/* EMC Texas site. One stylesheet, no frameworks. The only downloads besides the page are the
   Saira heading font (two weights, about 27 KB, in /fonts, SIL Open Font License) and the photos.
   Look: dark where it sells, light where people read. Charcoal header, hero, feature bands and footer
   with one orange accent; body text, cards, questions and the form sit on a light surface.
   One design: there is no dark-mode switch and no second theme.
   To change colors, edit the values right below. Every text/background pair here passes WCAG AA
   (the table is in MAINTAIN.md, "The look"). */

@font-face { font-family: "Saira"; font-weight: 600; font-style: normal; font-display: swap;
  src: url("/fonts/saira-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Saira"; font-weight: 800; font-style: normal; font-display: swap;
  src: url("/fonts/saira-latin-800-normal.woff2") format("woff2"); }

:root {
  /* the palette (matches the logo) */
  --orange: #F58220;       /* the accent: buttons, rules, the header line. Charcoal text on it is 6.4:1. Never white text on it. */
  --orange-deep: #A84A09;  /* orange for words on a light surface: links, labels (5.7:1 on white, 4.8:1 on the grey panel) */
  --orange-soft: #FFB56B;  /* orange for words on charcoal: links (9.5:1) */
  --charcoal: #1B1F24;     /* header, hero, feature bands; also the main text colour */
  --charcoal-deep: #14171B;/* footer */
  --steel-800: #2B323A;    /* plates and frames on dark */
  --steel-500: #5D6976;    /* secondary text on light (5.1:1 or better) */
  --steel-200: #C9D1D9;    /* text on dark (10.7:1) */
  --steel-050: #F3F5F7;    /* the light page surface */
  --panel-blue: #1F4E8C;   /* focus rings on light; the solar panels in the logo */

  /* what the rules below actually use */
  --ink: var(--charcoal);
  --muted: var(--steel-500);
  --accent: var(--orange);
  --paper: var(--steel-050);
  --panel: #E7EBEF;        /* alternate light section */
  --tag: #FFFFFF;          /* card, question and form face */
  --line: #D5DAE0;         /* hairlines */
  --field: #6F7A86;        /* input borders (4.4:1 on white) */
  --error: #B3261E;
  --head: "Saira", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }  /* "hidden" always wins over class display rules */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font: 18px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
h1, h2, h3 { font-family: var(--head); line-height: 1.12; margin: 0 0 .55em; }
h1 { font-weight: 800; font-size: clamp(2rem, 6.2vw, 3.3rem); letter-spacing: -.01em; line-height: 1.06; margin-bottom: .35em; }
h2 { font-weight: 800; font-size: clamp(1.6rem, 4.6vw, 2.3rem); letter-spacing: -.005em; }
h2::after { content: ""; display: block; width: 56px; height: 4px; background: var(--accent); margin-top: 12px; }
h3 { font-weight: 600; font-size: 1.15rem; }
p { margin: 0 0 1em; }
a { color: var(--orange-deep); text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 16px; }
.narrow { max-width: 700px; }
.fine { font-size: .88rem; color: var(--muted); }
.opt { font-weight: normal; color: var(--muted); }
.nw { white-space: nowrap; }

/* sections: generous spacing; light, alternate light, or a dark band */
main > section { padding: 72px 0; }
main > section.alt { background: var(--panel); }
main > section.band { background: var(--charcoal); color: var(--steel-200); }
.band h2 { color: #fff; }
.band p { max-width: 640px; }
.band .btn { margin-top: 6px; }
.band a:not(.btn) { color: var(--orange-soft); }
.band .fine { color: var(--steel-200); }

/* letter-spaced labels: kicker, the now-booking line */
.kicker, .byline, .label {
  font-family: var(--head); font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  font-size: .78rem; line-height: 1.5;
}
.kicker { color: var(--orange); margin-bottom: 14px; }
.byline { color: var(--muted); margin-bottom: 20px; }
.booking-now { margin-bottom: 20px; }

/* header: charcoal, with the orange line under it */
.top { background: var(--charcoal); border-bottom: 3px solid var(--orange); position: sticky; top: 0; z-index: 5; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 62px; flex-wrap: wrap; padding-top: 6px; padding-bottom: 6px; }
/* logo: the EMCtexas wordmark (the E carries the bolt) in the header, the E alone beside "About EMC Texas", the full logo in the footer */
.brand { display: block; text-decoration: none; line-height: 1; }
.brand-logo { display: block; height: 30px; width: auto; }
.brand small { display: block; font-family: var(--head); font-weight: 600; font-size: .6rem; letter-spacing: .14em; text-transform: uppercase; color: var(--steel-200); margin-top: 6px; }
.brand-d { width: 64px; height: 64px; flex: none; margin-top: -10px; }   /* the E with the bolt */
@media (min-width: 780px) { .brand-d { width: 84px; height: 84px; } }
.footer-logo { display: block; width: 380px; max-width: 92%; height: auto; margin: 0 0 22px -10px; }
nav { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
nav a { font-family: var(--head); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; text-decoration: none; color: var(--steel-050); }
/* the header line is five services long, so the text links step aside early and the header stays one row */
@media (max-width: 940px) {
  nav a:not(.btn) { display: none; }
  .top .wrap { flex-wrap: nowrap; }
}
@media (max-width: 680px) {
  .brand-logo { height: 24px; }
  .brand small { font-size: .5rem; letter-spacing: .08em; }
  .brand small .sep { display: none; }   /* phones: two tidy lines, no dot left hanging at the start of line two */
  .brand small .nw { display: block; }
  .btn.small { padding: 6px 12px; font-size: .8rem; letter-spacing: .02em; white-space: nowrap; }
}
@media (max-width: 374px) { .brand-logo { height: 20px; } }   /* smallest phones: keep the header on one row */
@media (max-width: 345px) { .brand-logo { height: 17px; } .brand small { font-size: .43rem; letter-spacing: 0; white-space: nowrap; } }   /* 320px phones: the EMCtexas wordmark is wider than the old one */

/* buttons: flat orange with charcoal words (6.4:1). Big enough to tap with a thumb. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--orange); color: var(--charcoal); text-decoration: none;
  font-family: var(--head); font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; line-height: 1.2;
  padding: 14px 24px; min-height: 52px; border: 2px solid var(--orange); border-radius: 6px;
  cursor: pointer; transition: background-color .12s;
}
.btn:hover { background: #FF9A3D; border-color: #FF9A3D; }
.btn:focus-visible, a:focus-visible, summary:focus-visible, .slides:focus-visible { outline: 3px solid var(--panel-blue); outline-offset: 3px; }
.btn.ghost { background: transparent; color: var(--orange-deep); border-color: var(--orange-deep); }
.btn.ghost:hover { background: rgba(168,74,9,.08); border-color: var(--orange-deep); }
.btn.small { padding: 8px 14px; min-height: 44px; font-size: .9rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
/* focus rings on the dark parts are light, so they can be seen */
.top :focus-visible, .hero-text :focus-visible, .band :focus-visible, footer :focus-visible, .cookie-bar :focus-visible { outline-color: #fff; }

/* hero: charcoal. The words never sit on the photo. */
.hero { background: var(--charcoal); color: var(--steel-050); padding: 44px 0 0; }
.hero h1 { color: #fff; }
.hero-text { position: relative; z-index: 1; max-width: 860px; margin-left: auto; margin-right: auto; }
.hero-text .btn { margin: 4px 10px 8px 0; }
.hero-text .byline { color: var(--steel-200); }
.subhead { font-family: var(--head); font-weight: 600; font-size: clamp(1.1rem, 3.4vw, 1.4rem); line-height: 1.35; color: var(--steel-200); margin: 0 0 12px; max-width: 640px; }
/* the drawing (only shows if no header photo is set) */
.hero-art { display: block; width: 100%; height: clamp(230px, 34vw, 470px); margin-top: 10px; }
/* header photo: tools/hero-photo.sh puts a real job-site photo here; the drawing then hides.
   Phones and computers get a taller cut that shows the whole job (roof, posts and ground); tablets get a wide band.
   On phones and tablets the photo's top edge fades up into the charcoal. */
.hero-pic { display: block; margin-top: 14px; }
.hero-pic img { width: 100%; height: auto; aspect-ratio: 27 / 16; object-fit: cover; object-position: center;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16%); mask-image: linear-gradient(to bottom, transparent 0, #000 16%); }
@media (min-width: 641px) { .hero-pic img { aspect-ratio: 16 / 7; } }
.hero-pic ~ .hero-art { display: none; }
.hero-more { background: var(--paper); color: var(--ink); padding-top: 40px; padding-bottom: 8px; max-width: none; padding-left: max(16px, calc((100% - 1040px) / 2 + 16px)); padding-right: max(16px, calc((100% - 1040px) / 2 + 16px)); }
.hero-more > * { max-width: 700px; }
.hero-more .lead { font-size: 1.1em; }
.hero-more .btn { margin: 0 10px 10px 0; }
/* computers: words on the left, the whole photo on the right as a plate, so the job reads as a structure without scrolling */
@media (min-width: 1000px) {
  .hero { display: grid; align-items: center; padding-top: 0;
    grid-template-columns: max(16px, calc((100% - 1040px) / 2 + 16px)) minmax(0, 1.1fr) minmax(0, 1fr) max(16px, calc((100% - 1040px) / 2 + 16px)); }
  .hero-text { grid-column: 2; grid-row: 1; max-width: none; margin: 0; padding: 60px 44px 60px 0; }
  .hero-pic, .hero-art { grid-column: 3; grid-row: 1; margin: 0; }
  .hero-pic img { aspect-ratio: 27 / 16; border-radius: 10px; -webkit-mask-image: none; mask-image: none; box-shadow: 0 0 0 1px var(--steel-800), 0 18px 40px rgba(0,0,0,.35); }
  .hero-art { height: auto; aspect-ratio: 27 / 16; border-radius: 10px; }
  .hero-more { grid-column: 1 / -1; margin: 0; width: 100%; }
}

/* two-column with photo */
.two { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 780px) { .two { grid-template-columns: 3fr 2fr; } }
.about-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.photo { margin: 0; }
.photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.placeholder {
  aspect-ratio: 4 / 3; border: 2px dashed var(--line); border-radius: 8px; background: var(--tag);
  display: grid; place-items: center; text-align: center; padding: 16px; color: var(--muted); font-size: .9rem;
}
.placeholder.second { margin-top: 14px; aspect-ratio: 16 / 10; }
figcaption { font-size: .88rem; color: var(--muted); margin-top: 8px; }

/* cards: flat white plates with an orange top edge */
.cards { display: grid; gap: 20px; grid-template-columns: 1fr; margin-bottom: 24px; }
@media (min-width: 680px) { .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 680px) { .card.wide { grid-column: 1 / -1; } }
@media (min-width: 960px) { .cards.three { grid-template-columns: repeat(3, 1fr); } }
.card {
  display: flex; flex-direction: column;
  background: var(--tag); border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: 8px; padding: 24px 22px;
  box-shadow: 0 1px 2px rgba(27,31,36,.06), 0 6px 18px rgba(27,31,36,.06);
}
.card h3 { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; font-size: 1.02rem; color: var(--charcoal); }
.card p:last-child { margin-bottom: 0; }
#for .card > p:last-child { margin-top: auto; padding-top: 4px; }   /* audience cards: buttons line up along the bottom */
#for .cards { margin-bottom: 0; }

/* people row (About EMC Texas): photo, name, role, one line. One block per teammate. */
.people { list-style: none; margin: 8px 0 22px; padding: 0; display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 680px) { .people { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } }
.person { display: flex; align-items: center; gap: 16px; }
.person > div { min-width: 0; }
.person p { margin: 0; }
.person-name { font-family: var(--head); font-weight: 800; font-size: 1.2rem; line-height: 1.2; }
.person-role { font-family: var(--head); font-weight: 600; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--orange-deep); }
.person-role .role-line { display: block; } .person-role .role-sep { display: none; }   /* title on two tidy lines; the dot only shows without styles */
.person.founder .person-role { letter-spacing: .1em; line-height: 1.45; }
.person-line { font-size: .92rem; color: var(--muted); line-height: 1.4; margin-top: 4px !important; }
/* founder: a tall 3:4 portrait card. Teammates keep the round photo. */
.person.founder { align-items: flex-start; gap: 18px; }
.portrait { flex: none; width: 132px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border: 3px solid var(--tag); border-radius: 8px; box-shadow: 0 0 0 2px var(--orange); background: var(--panel); }
@media (min-width: 520px) { .portrait { width: 200px; } .person.founder { align-items: center; gap: 24px; } .person.founder .person-name { font-size: 1.5rem; } }
@media (max-width: 400px) { .person-line .nw { white-space: normal; } .portrait { width: 112px; } }   /* smallest phones: let the line wrap beside the portrait */

/* steps: numbers in a charcoal disc with an orange ring */
.steps { padding-left: 0; list-style: none; counter-reset: step; max-width: 740px; }
.steps li { position: relative; padding-left: 62px; margin-bottom: 26px; counter-increment: step; }
.steps li::before {
  content: counter(step); position: absolute; left: 4px; top: -2px;
  width: 40px; height: 40px; border-radius: 50%; background: var(--charcoal); color: #fff;
  display: grid; place-items: center; font-family: var(--head); font-weight: 800; font-size: 1.15rem;
  box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--orange);
}

/* questions */
details { background: var(--tag); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 10px; }
details[open] { border-color: var(--orange-deep); }
summary { padding: 14px 44px 14px 16px; cursor: pointer; font-family: var(--head); font-weight: 600; list-style: none; position: relative; min-height: 52px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 16px; top: 10px; color: var(--orange-deep); font-family: var(--head); font-weight: 800; font-size: 1.4rem; }
details[open] summary::after { content: "–"; }
details p { padding: 0 16px 16px; margin: 0; }
.search { margin-bottom: 18px; }
.search input { width: 100%; font: inherit; padding: 12px 14px; border: 2px solid var(--field); border-radius: 6px; min-height: 52px; background: #fff; color: var(--ink); }
.faq-none { background: var(--tag); border: 2px dashed var(--line); border-radius: 8px; padding: 14px 16px; }
.visually-hidden { position: absolute; left: -9999px; }

/* form: stays light and plain */
form { background: var(--tag); border: 1px solid var(--line); border-radius: 10px; padding: 26px 20px; box-shadow: 0 1px 2px rgba(27,31,36,.06), 0 8px 24px rgba(27,31,36,.07); }
.field { margin-bottom: 20px; border: 0; padding: 0; min-width: 0; }
label, legend { display: block; font-weight: 600; margin-bottom: 6px; }
input[type=text], input[type=tel], input[type=email] {
  width: 100%; font: inherit; padding: 12px; border: 2px solid var(--field); border-radius: 6px; min-height: 50px; background: #fff; color: var(--ink);
}
input:focus { outline: 3px solid #FFC68F; outline-offset: 1px; border-color: var(--orange-deep); }
.check { display: flex; align-items: flex-start; gap: 10px; font-weight: normal; margin: 6px 0; min-height: 36px; cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 3px 0 0; flex: none; accent-color: var(--orange-deep); }
.consent { background: var(--steel-050); border: 1px solid var(--line); border-radius: 6px; padding: 12px; }
.consent .check { font-size: .95rem; margin: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.error { color: var(--error); font-weight: 600; }
.done { background: #E8F3EA; border: 1px solid #A9CDB0; border-radius: 10px; padding: 20px 16px; }
.done h3 { font-weight: 800; }
.done ol { padding-left: 22px; } .done li { margin-bottom: 8px; }
.book-direct { margin-top: 18px; font-weight: 600; }
form .btn { width: 100%; margin-top: 4px; }
@media (min-width: 640px) { form .btn { width: auto; } }

/* quotes outside the thread */
blockquote { margin: 0 0 14px; padding: 6px 0 6px 18px; border-left: 4px solid var(--accent); }
blockquote p { font-style: italic; }
blockquote p:last-child { margin-bottom: 0; }

/* footer: the darkest part of the page */
footer { background: var(--charcoal-deep); color: var(--steel-200); padding: 44px 0 48px; font-size: .95rem; }
footer strong { font-family: var(--head); font-weight: 800; color: #fff; }
footer a { color: var(--orange-soft); }
footer .fine { color: var(--steel-200); }

/* cookie bar: one small charcoal strip pinned to the bottom. Hidden unless a tracking ID is set (see the last script in index.html). */
.cookie-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px;
  background: var(--charcoal); color: var(--steel-200); border-top: 3px solid var(--orange); padding: 8px 14px; font-size: .9rem; line-height: 1.35; }
.cookie-bar:focus { outline: none; }
.cookie-bar p { margin: 0; }
.cookie-bar a { color: var(--orange-soft); }
.cookie-btns { display: flex; gap: 10px; }
.cookie-bar .btn.small { min-height: 40px; padding: 6px 14px; }
.cookie-bar .btn.ghost { color: #fff; border-color: var(--steel-200); }
.cookie-bar .btn.ghost:hover { background: rgba(255,255,255,.1); }
/* short phones (small iPhones with the browser bars showing): one tight row, so the bar stays below the hero's Request a visit button */
@media (max-width: 520px) and (max-height: 620px) {
  .cookie-bar { flex-wrap: nowrap; justify-content: space-between; gap: 10px; padding: 3px 12px; font-size: .8rem; line-height: 1.3; border-top-width: 2px; }
  .cookie-btns { gap: 8px; flex: none; }
  .cookie-bar .btn.small { min-height: 36px; padding: 4px 10px; font-size: .8rem; }
}
.cookie-bar:not([hidden]) ~ footer { padding-bottom: 150px; }  /* so the bar never sits on the footer's last line */

/* preview switch: ribbon and form note only show when <body data-preview="true"> */
.ribbon { display: none; background: #000; color: #fff; text-align: center; padding: 8px 16px; font-size: .9rem; font-weight: 600; }
.preview-only { display: none; }
body[data-preview="true"] .ribbon { display: block; }
body[data-preview="true"] .preview-only { display: block; font-weight: 600; color: var(--ink); }
body[data-preview="true"] .placeholder { border-style: solid; color: var(--steel-500); font-weight: 600; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .btn { transition: none; } }

/* Chad's quotes as a short text thread (falls back to plain questions and quotes without CSS) */
.thread { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 14px; max-width: 580px; }
.thread .msg { margin: 0; padding: 11px 15px; border-radius: 18px; line-height: 1.45; max-width: 86%; }
.thread .msg p { margin: 0; font-style: normal; }
.thread .msg.out { align-self: flex-end; background: var(--charcoal); color: #fff; font-weight: 600; border-bottom-right-radius: 4px; }
.thread blockquote.msg.in { border-left: 0; background: var(--panel); color: var(--ink); border-bottom-left-radius: 4px; }
.thread .msg-row { display: flex; align-items: flex-end; gap: 10px; }
.thread .msg-row .msg.in { max-width: none; flex: 1; }
.thread .msg.in.follow { margin-left: 66px; }   /* lines up under the first answer, past the small round photo */
@media (max-width: 520px) { .thread .msg.in.follow { margin-left: 0; max-width: 92%; } }
.thread .who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.thread-note { margin-top: 0; }
/* round photos: 96px for teammates, 56px beside Chad's first answer */
.avatar { position: relative; flex: none; width: 96px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.avatar::before { content: ""; display: block; box-sizing: border-box; width: 96px; height: 96px; border-radius: 50%; border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--orange);
  background: #E1E5EA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 96'%3E%3Ccircle cx='48' cy='38' r='17' fill='%23AEB7C1'/%3E%3Cpath d='M14 92c3-20 17-30 34-30s31 10 34 30z' fill='%23AEB7C1'/%3E%3C/svg%3E") center / cover no-repeat; }
.avatar img { position: absolute; top: 0; left: 0; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 3px solid var(--paper); box-shadow: 0 0 0 2px var(--orange); background: var(--paper); }
.avatar-note { font-size: .68rem; line-height: 1.2; color: var(--muted); text-align: center; }
.avatar.has-photo .avatar-note { display: none; }
.avatar.has-photo::before { background: none; box-shadow: none; border-color: transparent; }
.avatar.small, .avatar.small::before, .avatar.small img { width: 56px; height: 56px; }
.avatar.small { align-self: flex-end; }

/* Real jobs: video + photo slider */
.job-video { margin: 8px 0 28px; max-width: 780px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.video-frame video { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--panel); }
.video-frame .video-ph { aspect-ratio: auto; height: 100%; border: 0; border-radius: 0; }
.video-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-height: 52px; padding: 12px 22px;
  font-family: var(--head); font-weight: 800; font-size: 1.05rem; color: var(--charcoal); background: var(--orange);
  border: 2px solid var(--orange); border-radius: 6px; cursor: pointer; }
.job-video figcaption { margin-top: 8px; }
.gallery { position: relative; }
.slides { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; list-style: none; margin: 0; padding: 4px 2px 14px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
.slide { flex: 0 0 82%; scroll-snap-align: start; }
@media (min-width: 780px) { .slide { flex-basis: calc((100% - 28px) / 3); } }
.slide figure { margin: 0; }
.slide img, .slide-ph { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); }
.slide figcaption { font-size: .88rem; color: var(--muted); margin-top: 6px; }
.gal-btn { position: absolute; top: calc(50% - 30px); width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--orange);
  background: var(--orange); color: var(--charcoal); font: 800 1.6rem/1 var(--head); cursor: pointer; z-index: 1; box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.gal-prev { left: -10px; } .gal-next { right: -10px; }
.gal-btn[disabled] { opacity: .35; cursor: default; }
@media (max-width: 679px) { .gal-btn { display: none; } }   /* phones swipe */

/* things that sit on a dark band: frames, placeholders and captions switch to their dark-friendly colours */
.band figcaption, .band .slide figcaption { color: var(--steel-200); }
.band .video-frame, .band .slide img { border-color: #4A5560; background: var(--steel-800); }
.band .video-frame video { background: var(--steel-800); }
.band .placeholder, body[data-preview="true"] .band .placeholder { background: var(--steel-800); border: 1px solid #4A5560; color: var(--steel-200); }
.band .video-frame .video-ph { border: 0; }  /* the frame already draws the outline */
@media (max-width: 480px) { .kicker-more { display: none; } }   /* phones: the full name alone on the line above the headline */

/* Large photo viewer (gallery photos open in it). Charcoal backdrop, the photo fitted to the screen, 48px buttons. */
.slide a.zoom { display: block; border-radius: 8px; cursor: zoom-in; }
.viewer { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; background: var(--charcoal-deep); overscroll-behavior: contain; }
.viewer[hidden] { display: none; }
.viewer-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; cursor: zoom-in; }
.viewer-stage.zoomed { cursor: grab; }
.viewer-stage.zoomed.dragging { cursor: grabbing; }
.viewer-stage img { flex: none; max-width: none; display: block; background: var(--steel-800) center / cover no-repeat; will-change: transform; -webkit-user-drag: none; }
.viewer-cap { margin: 0; padding: 10px 16px 14px; min-height: 2.6em; text-align: center; color: var(--steel-050); font-size: .92rem; line-height: 1.35; }
.viewer-btn { position: absolute; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid #5D6976; background: var(--steel-800); color: #fff; font: 800 1.5rem/1 var(--head); cursor: pointer; }
.viewer-btn:hover { background: #3A434D; }
.viewer-btn:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.viewer-close { top: 12px; right: 12px; }
.viewer-prev, .viewer-next { top: 50%; margin-top: -40px; }
.viewer-prev { left: 12px; } .viewer-next { right: 12px; }
.viewer-zoom { position: absolute; right: 12px; bottom: 64px; display: flex; gap: 8px; }
.viewer-zoom .viewer-btn { position: static; }
@media (hover: none) { .viewer-zoom { display: none; } }   /* phones pinch instead */

/* Offer cards: the Construction card carries a photo (above the words on phones, beside them from tablets up). */
.card.feature { padding: 0; overflow: hidden; }
.card.feature .card-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--panel); }
.card.feature .card-body { padding: 22px 22px 24px; }
.job-video[hidden] { display: none; }
@media (min-width: 680px) {
  .card.feature { flex-direction: row; align-items: stretch; }
  .card.feature .card-photo { flex: 0 0 44%; width: 44%; }
  .card.feature .card-body { flex: 1 1 auto; align-self: center; padding: 26px 30px; }
  .card.span2 { grid-column: 1 / -1; }
}
@media (min-width: 960px) { .cards.three .card.span2 { grid-column: span 2; } }