/* ============================================================
   Top1 Signs — site styles
   Brand carried over from the v4 build: signwriter's blue on
   white, Archivo for anything shouted, Figtree for anything read.
   ============================================================ */

:root {
  --blue:       #1b74f0;
  --blue-deep:  #0f5ed4;
  --ink:        #101010;
  --ink-soft:   #6b7684;
  --rule:       #eceff3;
  --panel:      #f6f8fb;
  --dark:       #0d0d0d;

  --shout: 'Archivo', system-ui, sans-serif;
  --read:  'Figtree', system-ui, sans-serif;

  --gutter: 32px;
  --measure: 62ch;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: var(--ink);
  font-family: var(--read);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--shout);
  margin: 0;
  letter-spacing: -0.015em;
  line-height: 1.08;
}

p { margin: 0; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-deep); }

img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 12px; top: 12px;
  z-index: 100;
  background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: 4px;
}

/* ---------------------------------------------------- masthead
   Matches the v4 header exactly, but in plain CSS. The Services dropdown
   opens on :hover and :focus-within, so it also works from the keyboard —
   the original, driven by mouse-only JS handlers, did not. */

.mast {
  background: #fff;
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 40;
}

.mast__in {
  max-width: 1240px;
  margin: 0 auto;
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.mast__logo { flex: 0 0 auto; display: block; }
.mast__logo img { height: 70px; width: auto; display: block; }

.mast__nav {
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.mast__nav > a,
.mast__drop > a {
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 5px;
  border-bottom: 2px solid transparent;
}

.mast__nav > a:hover,
.mast__drop > a:hover { color: var(--blue); }

.mast__nav > a.on,
.mast__drop > a.on {
  color: var(--blue);
  border-bottom-color: var(--blue);
}

/* Services dropdown */
.mast__drop { position: relative; }

.mast__menu {
  position: absolute;
  top: 28px;
  left: -16px;
  width: 210px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(16, 16, 16, .13);
  padding: 8px;
  display: none;
  flex-direction: column;
  gap: 2px;
  letter-spacing: 0;
  text-transform: none;
}

.mast__drop:hover .mast__menu,
.mast__drop:focus-within .mast__menu { display: flex; }

.mast__menu a {
  color: #3d4753;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 12px;
  border-radius: 7px;
}
.mast__menu a:hover { background: #f2f5f8; color: var(--blue); }

.mast__quote {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--blue);
  color: #fff;
  font-family: var(--shout);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 14px 20px;
  border-radius: 4px;
  box-shadow: 0 8px 18px rgba(27, 116, 240, .28);
  flex: 0 0 auto;
}
.mast__quote:hover { background: var(--blue-deep); color: #fff; }

/* ---------------------------------------------------- footer */

.foot {
  background: var(--dark);
  color: #c8ced6;
  font-size: 15px;
}

.foot__in {
  max-width: 1240px;
  margin: 0 auto;
  padding: 52px 32px 30px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr) minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 40px;
}

.foot__brand img { height: 78px; width: auto; }

.foot__tag {
  margin-top: 14px;
  font-family: var(--shout);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .16em;
  color: #fff;
  text-transform: uppercase;
}

.foot__blurb { margin-top: 12px; max-width: 42ch; line-height: 1.65; }

.foot__col { display: flex; flex-direction: column; }

.foot h2 {
  font-family: var(--shout);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .1em;
  color: #fff;
  text-transform: uppercase;
  margin-bottom: 14px;
}

.foot__col a,
.foot__contact p {
  color: #c8ced6;
  padding: 5px 0;
  line-height: 1.6;
}
.foot__col a::before { content: "\2022\00a0 "; }
.foot__col a:hover { color: var(--blue); }

.foot__contact a::before { content: none; }
.foot__contact a { color: #e9edf2; padding: 0; }
.foot__contact a:hover { color: var(--blue); }
.foot__contact p { margin: 0 0 12px; }

.foot__bar {
  border-top: 1px solid #1e1e1e;
  padding: 20px 32px;
  text-align: center;
  font-size: 14px;
  color: #8b949e;
}

/* ---------------------------------------------------- intro */

.intro { padding-block: 64px 34px; }

.intro__title {
  font-size: clamp(38px, 6vw, 68px);
  font-weight: 900;
}

.intro__lead {
  margin-top: 16px;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: 19px;
}

/* ---------------------------------------------------- filters */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-bottom: 6px;
}

.filters__btn {
  font-family: var(--shout);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 9px 17px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}

.filters__btn:hover {
  background: #e8eef8;
  color: var(--ink);
}

.filters__btn.is-on {
  background: var(--ink);
  color: #fff;
}

.filters__n {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.filters__btn.is-on .filters__n { color: #9aa6b4; }

.tally {
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: 15px;
}

/* ---------------------------------------------------- grid */

.grid {
  margin-top: 22px;
  padding-bottom: 72px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 26px;
}

.tile { margin: 0; }
.tile[hidden] { display: none; }

/* Every tile is the same 4:3 box, whatever shape the photo is. */
.tile__frame {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  background: var(--panel);
  aspect-ratio: 4 / 3;
}

.tile__frame img {
  width: 100%;
  height: 100%;
}

/* Close to 4:3 — fill the box and trim one edge. */
.tile__frame--cover img { object-fit: cover; }

/* Far from 4:3 — sit inside the box rather than lose most of the picture.
   The darker backdrop stops a letterboxed tile reading as a loading error. */
.tile__frame--contain {
  background: #e7ecf2;
}
.tile__frame--contain img {
  object-fit: contain;
}

.tile__badge {
  position: absolute;
  left: 12px; bottom: 12px;
  background: rgba(13, 13, 13, .78);
  color: #fff;
  font-family: var(--shout);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  padding: 6px 11px;
  border-radius: 999px;
}

.tile__cap { margin-top: 13px; }

.tile__title {
  font-size: 18px;
  font-weight: 700;
}

.tile__desc {
  margin-top: 5px;
  color: var(--ink-soft);
  font-size: 15.5px;
  line-height: 1.55;
}

/* ---------------------------------------------------- closing */

.closing {
  border-top: 1px solid var(--rule);
  padding-block: 60px 76px;
}

.closing__title {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  max-width: 18ch;
}

.closing__body {
  margin-top: 14px;
  max-width: var(--measure);
  color: var(--ink-soft);
}

.closing__actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.btn {
  font-family: var(--shout);
  font-weight: 700;
  font-size: 16px;
  background: var(--blue);
  color: #fff;
  padding: 14px 26px;
  border-radius: 4px;
  display: inline-block;
}
.btn:hover { background: var(--blue-deep); color: #fff; }

.btn--plain {
  background: transparent;
  color: var(--ink);
  border: 1px solid #d8dee7;
}
.btn--plain:hover { background: var(--panel); color: var(--ink); }

/* ---------------------------------------------------- responsive */

@media (max-width: 1000px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mast__nav { gap: 18px; font-size: 14.5px; }
  .mast__logo img { height: 54px; }
  .foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  :root { --gutter: 20px; }
  body { font-size: 16px; }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .intro { padding-block: 40px 26px; }
  .mast__in { flex-wrap: wrap; row-gap: 14px; justify-content: center; }
  .mast__nav { width: 100%; flex-wrap: wrap; justify-content: center; gap: 14px; }
  .mast__quote { width: 100%; justify-content: center; }
  .foot__in { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------- staging notice
   Only ever rendered on ts1. Deliberately loud, so a screenshot of the
   test site can never be mistaken for the live one. */

.staging {
  margin: 0;
  background: #ffb400;
  color: #1a1400;
  font-family: var(--shout);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  padding: 9px 20px;
}

/* Service areas line under the gallery intro. Quieter than the lead, but
   still real text on the page — schema alone carries less weight. */
.intro__areas {
  margin-top: 10px;
  max-width: 70ch;
  color: var(--ink-soft);
  font-size: 15.5px;
}

/* ---------------------------------------------------- contact bar
   The thin black strip above the masthead. It was inline on the four v4
   pages and missing from Our Work, which is why that page looked different.
   Now it comes from site_header() like everything else. */

.topbar {
  background: var(--dark);
  color: #e9edf2;
  font-size: 15.5px;
}

.topbar__in {
  max-width: 1240px;
  margin: 0 auto;
  padding: 13px 32px;
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
}

.topbar a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
}
.topbar a:hover { color: var(--blue); }
.topbar__sep { opacity: .35; }

@media (max-width: 680px) {
  .topbar__in { padding-inline: 20px; gap: 16px; font-size: 14.5px; }
}