/* Sphere Construction — mock site styles */

:root {
  --ink: #141a21;
  --ink-soft: #1f2730;
  --accent: #c3c8ce;
  --accent-deep: #12356b;
  --paper: #ffffff;
  --stone: #f1f3f5;
  --silver: #b9bec4;
  --text: #333333;
  --muted: #646b73;
  --line: rgba(120, 132, 145, 0.4);
  --display: "Forum", "Times New Roman", serif;
  --body: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --header-h: 104px;
  --wrap: 1240px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 15px;
  line-height: 1.8;
  letter-spacing: 0.04em;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.25;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1.2em; }
p:last-child { margin-bottom: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  font-family: var(--display);
  font-variant: small-caps;
  font-size: 19px;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.title {
  font-size: clamp(26px, 3.2vw, 40px);
  text-transform: uppercase;
}

.lead {
  max-width: 820px;
  margin: 22px auto 0;
}

.center { text-align: center; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  padding: 15px 34px;
  border: 2px solid currentColor;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn:hover, .btn:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn--accent { border-color: var(--accent-deep); color: var(--accent-deep); }
.btn--accent:hover, .btn--accent:focus-visible { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }
.btn--solid { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.btn--solid:hover, .btn--solid:focus-visible { background: transparent; color: var(--accent); }

.btn-row { display: flex; flex-wrap: wrap; gap: 18px; }
.center .btn-row, .btn-row.center { justify-content: center; }

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  color: #fff;
  transition: background 0.3s, box-shadow 0.3s, height 0.3s;
}
.site-header.is-solid {
  background: var(--ink);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  --header-h: 90px;
}
.site-header__inner {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  padding: 0 32px;
}
.nav { display: flex; justify-content: space-evenly; gap: 20px; }
.nav a {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--accent); border-color: var(--accent); }

.logo { display: flex; flex-direction: column; align-items: center; gap: 6px; line-height: 1; color: #fff; }
.logo img { width: 55px; height: 55px; transition: width 0.3s, height 0.3s; }
.logo__text { display: flex; flex-direction: column; align-items: center; }
.site-header.is-solid .logo { gap: 4px; }
.site-header.is-solid .logo img { width: 36px; height: 36px; }
.logo__name { font-family: var(--display); font-size: 22px; letter-spacing: 0.22em; padding-left: 0.22em; }
.logo__sub {
  margin-top: 5px;
  /* The left padding balances the letter-spacing after the last letter, so the word sits centred. */
  padding-left: 0.42em;
  font-size: 9.5px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--silver);
}

.menu-toggle {
  display: none;
  justify-self: end;
  width: 44px; height: 44px;
  background: none; border: 0; cursor: pointer;
  color: #fff;
}
.menu-toggle span { display: block; width: 26px; height: 2px; margin: 6px auto; background: currentColor; transition: transform 0.25s, opacity 0.25s; }
.menu-open .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 40;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  background: var(--ink);
  color: #fff;
  opacity: 0; visibility: hidden;
  transition: opacity 0.25s, visibility 0.25s;
}
.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu a { font-family: var(--display); font-size: 22px; letter-spacing: 0.14em; text-transform: uppercase; }
.mobile-menu a[aria-current="page"] { color: var(--accent); }

/* ---------- Cover (the photo banner at the top of each page) ---------- */

.cover {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: calc(var(--header-h) + 40px) 0 90px;
  color: #fff;
  background: var(--ink) center / cover no-repeat;
}
.cover::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 18, 24, 0.72) 0%, rgba(14, 18, 24, 0.25) 35%, rgba(14, 18, 24, 0.7) 100%);
}
.cover > .wrap { position: relative; }
.cover__box {
  display: inline-block;
  max-width: 720px;
  padding: 26px 30px;
  background: rgba(30, 37, 46, 0.86);
  margin-bottom: 30px;
}
.cover__kicker { font-family: var(--display); font-size: 21px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 10px; }
.cover__title { font-size: clamp(30px, 4.4vw, 50px); text-transform: uppercase; }
.cover__text { font-family: var(--display); font-variant: small-caps; font-size: 23px; line-height: 1.5; margin-top: 14px; text-wrap: pretty; }

/* Home cover: a wide text box centred on the page, 160px above the cover's
   bottom edge, with the buttons centred beneath it. */
@media (min-width: 641px) {
  .cover { padding-bottom: 66px; }
  .cover > .wrap { max-width: none; padding: 0 64px; display: flex; flex-direction: column; align-items: center; }
  .cover__box { max-width: 900px; margin-bottom: 37px; text-align: center; }
  .cover .btn-row { gap: 20px; justify-content: center; }
}

.page-cover {
  position: relative;
  min-height: 32vh;
  display: flex; align-items: flex-end;
  padding: calc(var(--header-h) + 60px) 0 64px;
  color: #fff;
  background: var(--ink) center / cover no-repeat;
}
.page-cover::before { content: ""; position: absolute; inset: 0; background: rgba(14, 18, 24, 0.68); }
.page-cover > .wrap { position: relative; }
.page-cover h1 { font-size: clamp(32px, 5vw, 56px); text-transform: uppercase; }
.page-cover p { max-width: 640px; margin-top: 14px; }
.page-cover .eyebrow { color: var(--accent); }

/* ---------- Sections ---------- */

.section { padding: 96px 0; }
.section--dark { background: var(--ink); color: #fff; }
.section--stone { background: var(--stone); }
.section--dark .eyebrow { color: var(--accent); }
.section__head { margin-bottom: 56px; }

/* Image tiles with overlaid label */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.tile {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3 / 4.4;
  overflow: hidden;
  background: var(--ink-soft);
  color: #fff;
  text-align: center;
}
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.tile::after { content: ""; position: absolute; inset: 0; background: rgba(14, 18, 24, 0.42); transition: background 0.3s; }
.tile:hover img { transform: scale(1.06); }
.tile:hover::after { background: rgba(14, 18, 24, 0.62); }
.tile__label { position: relative; z-index: 1; padding: 0 16px; }
.tile__label h3 { font-size: 23px; text-transform: uppercase; }
.tile__label span {
  display: block; margin-top: 10px;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  opacity: 0; transform: translateY(6px); transition: opacity 0.3s, transform 0.3s;
}
.tile:hover .tile__label span, .tile:focus-visible .tile__label span { opacity: 1; transform: none; }

/* Split image / text */
.split { display: grid; grid-template-columns: 5fr 6fr; gap: 72px; align-items: center; }
.split--flip > :first-child { order: 2; }
.split__media { background: var(--stone); }
.split__media img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.split__media--wide img { aspect-ratio: 4 / 3; }
.split h2 { font-size: clamp(24px, 2.6vw, 32px); text-transform: uppercase; margin-bottom: 4px; }
.split .sub { font-family: var(--display); font-variant: small-caps; font-size: 19px; color: var(--accent-deep); margin-bottom: 22px; }
.split .btn { margin-top: 28px; }

.checklist { list-style: none; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
.checklist li { position: relative; padding-left: 22px; font-size: 14px; }
.checklist li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 10px; height: 1px; background: var(--accent-deep); }

.service-row + .service-row { margin-top: 110px; }
.service-row { scroll-margin-top: 120px; }

/* Bordered feature cards */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.card {
  padding: 30px 26px 34px;
  background: #fff;
  color: var(--text);
  border: 5px solid var(--accent);
}
.card h3 { font-size: 21px; text-transform: uppercase; margin-bottom: 14px; }
.card p { font-size: 14px; line-height: 1.75; }

/* Numbered points: a heading block on the left, a numbered list on the right */
.points { display: grid; grid-template-columns: 5fr 7fr; gap: 88px; align-items: start; }
.points__head { position: sticky; top: 130px; }
.points__head .title { margin-bottom: 20px; }
.points__head p:not(.eyebrow) { max-width: 44ch; color: rgba(255, 255, 255, 0.82); }
.points__head .btn { margin-top: 32px; }
.points__list { list-style: none; margin: 0; padding: 0; counter-reset: point; }
.points__list li {
  counter-increment: point;
  display: grid; grid-template-columns: 96px 1fr; gap: 24px; align-items: start;
  padding: 34px 0;
  border-top: 1px solid rgba(195, 200, 206, 0.28);
}
.points__list li:last-child { border-bottom: 1px solid rgba(195, 200, 206, 0.28); }
.points__list li::before {
  content: counter(point, decimal-leading-zero);
  font-family: var(--display); font-size: 58px; line-height: 0.9; color: var(--accent);
}
.points__list h3 { font-size: 24px; text-transform: uppercase; margin-bottom: 10px; }
.points__list p { font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, 0.82); max-width: 58ch; }

/* Testimonials */
.quotes {
  position: relative;
  padding: 120px 0;
  color: #fff;
  text-align: center;
  background: var(--ink) center / cover no-repeat;
}
.quotes::before { content: ""; position: absolute; inset: 0; background: rgba(14, 18, 24, 0.8); }
.quotes > .wrap { position: relative; }
.quotes__head { display: inline-block; padding: 20px 44px; background: rgba(44, 52, 62, 0.85); margin-bottom: 44px; }
.quotes__head h2 { font-size: 22px; text-transform: uppercase; }
.quotes__head p { font-size: 13px; margin-top: 6px; }
.quote { display: none; max-width: 860px; margin: 0 auto; }
.quote.is-active { display: block; animation: fade 0.5s ease; }
.quote blockquote { margin: 0 0 22px; font-size: 17px; line-height: 1.9; }
.quote cite { font-family: var(--display); font-style: normal; font-size: 17px; letter-spacing: 0.1em; color: var(--accent); }
.quote small { display: block; margin-top: 4px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }
.quotes__nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 40px; }
.arrow {
  width: 46px; height: 46px;
  border: 1px solid #fff; background: transparent; color: #fff;
  font-size: 18px; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.arrow:hover, .arrow:focus-visible { background: var(--accent); border-color: var(--accent); color: var(--ink); }

@keyframes fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Projects */
.projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.project {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--ink-soft);
  color: #fff;
}
.project img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.project::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 18, 24, 0) 40%, rgba(14, 18, 24, 0.85) 100%); }
.project:hover img { transform: scale(1.05); }
.project__info { position: absolute; left: 22px; right: 22px; bottom: 18px; z-index: 1; }
.project__info h3 { font-size: 19px; text-transform: uppercase; }
.project__info p { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; margin: 4px 0 0; }
.project__tag {
  position: absolute; top: 16px; left: 16px; z-index: 1;
  padding: 4px 12px;
  background: var(--accent); color: var(--ink);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.project[hidden] { display: none; }

.filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 44px; }
.filter {
  padding: 10px 22px;
  border: 1px solid var(--line); background: transparent; color: var(--text);
  font-family: var(--body); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.filter:hover { border-color: var(--accent-deep); }
.filter.is-active { background: var(--ink); border-color: var(--ink); color: #fff; }

/* Process steps */
.steps { counter-reset: step; max-width: 900px; margin: 0 auto; }
.step {
  counter-increment: step;
  display: grid; grid-template-columns: 110px 1fr; gap: 28px;
  padding: 38px 0;
  border-top: 1px solid var(--line);
}
.step:last-child { border-bottom: 1px solid var(--line); }
.step::before { content: counter(step, decimal-leading-zero); font-family: var(--display); font-size: 54px; line-height: 1; color: var(--accent); }
.step h3 { font-size: 22px; text-transform: uppercase; margin-bottom: 10px; }
.step .when { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-deep); margin-top: 12px; }

.faq { max-width: 900px; margin: 0 auto; }
.faq details { border-top: 1px solid rgba(255, 255, 255, 0.18); }
.faq details:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.18); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0;
  font-family: var(--display); font-size: 18px; letter-spacing: 0.06em;
  cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 24px; color: var(--accent); transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 40px 24px 0; font-size: 14px; opacity: 0.85; }

/* Team */
.team { display: grid; grid-template-columns: repeat(var(--team-cols, 4), 1fr); gap: 28px; }
.member { text-align: center; }
.member__photo {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; margin-bottom: 18px;
  background: var(--ink); color: var(--accent);
  font-family: var(--display); font-size: 44px; letter-spacing: 0.08em;
  border: 5px solid var(--accent);
}
.member h3 { font-size: 18px; text-transform: uppercase; }
.member p { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-deep); }

/* Review cards */
.reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.review { margin: 0; padding: 32px 28px; background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; }
.review .stars { color: var(--accent-deep); letter-spacing: 0.3em; margin-bottom: 14px; }
.review blockquote { margin: 0 0 22px; font-size: 14px; flex: 1; }
.review cite { font-family: var(--display); font-style: normal; font-size: 16px; letter-spacing: 0.08em; }
.review small { display: block; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }

/* CTA band */
.cta {
  position: relative;
  padding: 130px 0;
  color: #fff; text-align: center;
  background: var(--ink) center / cover no-repeat;
}
.cta::before { content: ""; position: absolute; inset: 0; background: rgba(14, 18, 24, 0.72); }
.cta > .wrap { position: relative; }
.cta h2 { font-size: clamp(28px, 3.6vw, 44px); text-transform: uppercase; }
.cta p { max-width: 640px; margin: 18px auto 32px; }

/* Contact */
.contact { display: grid; grid-template-columns: 6fr 4fr; gap: 72px; align-items: start; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid #c8ced4; border-radius: 0;
  background: #fff; color: var(--text);
  font: inherit; font-size: 14px; letter-spacing: 0.02em;
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent-deep); outline-offset: 0; border-color: var(--accent-deep); }
.form__note { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.form__done { grid-column: 1 / -1; padding: 16px 18px; background: var(--stone); border-left: 4px solid var(--accent-deep); font-size: 14px; }

.info-card { padding: 36px 32px; background: var(--ink); color: #fff; border: 5px solid var(--accent); }
.info-card h3 { font-size: 20px; text-transform: uppercase; color: var(--accent); margin: 26px 0 8px; }
.info-card h3:first-child { margin-top: 0; }
.info-card p, .info-card a { font-size: 14px; }
.info-card a:hover { color: var(--accent); }

/* ---------- Footer ---------- */

.site-footer { background: var(--ink); color: #fff; padding: 72px 0 0; font-size: 14px; }
.site-footer__grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 48px; }
.site-footer .logo { flex-direction: row; align-items: center; gap: 14px; }
.site-footer .logo img { width: 66px; height: 66px; }
.site-footer .logo__text { align-items: center; }
.site-footer h4 { font-family: var(--body); font-size: 14px; font-weight: 500; letter-spacing: 0.1em; margin-bottom: 16px; color: var(--accent); }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a:hover { color: var(--accent); }
.site-footer__blurb { margin-top: 20px; max-width: 280px; opacity: 0.75; font-size: 13px; }
.site-footer__legal {
  margin-top: 60px; padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px;
  font-size: 12px; opacity: 0.7;
}

.site-footer__legal a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Pages written in the editor (e.g. the privacy notice) ---------- */

.entry { max-width: 760px; }
.entry h2 { margin: 2em 0 0.6em; font-size: 26px; color: var(--accent-deep); }
.entry h2:first-child { margin-top: 0; }
.entry ul, .entry ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.entry li { margin-bottom: 0.6em; }
.entry a { color: var(--accent-deep); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Scroll reveal ---------- */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .tile img, .project img { transition: none; }
}

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .tiles, .cards, .team { grid-template-columns: repeat(2, 1fr); }
  .tile { aspect-ratio: 4 / 3; }
  .projects, .reviews { grid-template-columns: repeat(2, 1fr); }
  .site-footer__grid { grid-template-columns: 1fr 1fr; }
  .split, .contact { gap: 48px; }
}

@media (max-width: 900px) {
  :root { --header-h: 76px; }
  .site-header.is-solid { --header-h: 76px; } /* the phone header keeps one height when scrolled */
  .site-header__inner { grid-template-columns: 1fr auto; padding: 0 20px; }
  .site-header .nav { display: none; }
  .site-header .logo, .site-header.is-solid .logo { flex-direction: row; gap: 10px; }
  .site-header .logo img, .site-header.is-solid .logo img { width: 44px; height: 44px; }
  .site-header .logo__text { align-items: center; }
  .menu-toggle { display: block; }
  .split, .contact { grid-template-columns: 1fr; }
  .points { grid-template-columns: 1fr; gap: 40px; }
  .points__head { position: static; }
  .split--flip > :first-child { order: 0; }
  .split__media img { aspect-ratio: 4 / 3; }
  .section { padding: 72px 0; }
  .service-row + .service-row { margin-top: 72px; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .tiles, .cards, .projects, .reviews, .form, .checklist { grid-template-columns: 1fr; }
  .team { grid-template-columns: 1fr 1fr; }
  .site-footer__grid { grid-template-columns: 1fr; gap: 36px; }
  .cover { padding-bottom: 56px; }
  .cover__box { padding: 20px; }
  .cover__kicker { font-size: 18px; }
  .cover__text { font-size: 20px; }
  .step { grid-template-columns: 1fr; gap: 8px; }
  .points__list li { grid-template-columns: 1fr; gap: 10px; padding: 28px 0; }
  .points__list li::before { font-size: 44px; }
  .btn { width: 100%; text-align: center; }
  .quotes__head { padding: 18px 22px; }
}

/* ---------- WordPress toolbar (signed-in staff only) ----------
   WordPress puts .admin-bar on <body> only while it shows its toolbar along
   the top (32px tall, 46px on smaller screens), so none of this affects
   visitors. It moves the fixed header and phone menu below the toolbar. */

.admin-bar .site-header,
.admin-bar .mobile-menu { top: 32px; }
.admin-bar .service-row { scroll-margin-top: 152px; }

@media (max-width: 782px) {
  .admin-bar .site-header,
  .admin-bar .mobile-menu { top: 46px; }
  .admin-bar .service-row { scroll-margin-top: 166px; }
}

@media (max-width: 600px) {
  /* WordPress lets the toolbar scroll away on phones, which would leave a gap
     above the fixed header; keep it in place instead. */
  .admin-bar #wpadminbar { position: fixed; }
}

/* About > Our Values: a darkened photo behind, the values in columns
   divided by thin lines. */
.values { position: relative; color: #fff; background: var(--ink) center / cover no-repeat; }
.values::before { content: ""; position: absolute; inset: 0; background: rgba(20, 26, 33, 0.82); }
.values > .wrap { position: relative; }
.values .eyebrow { color: var(--accent); }
.values__row { display: grid; grid-template-columns: repeat(4, 1fr); }
.values__row > div { padding: 8px 28px; }
.values__row > div + div { border-left: 1px solid rgba(195, 200, 206, 0.35); }
.values__row h3 { font-size: 20px; text-transform: uppercase; margin-bottom: 14px; }
.values__row p { margin: 0; font-size: 14px; line-height: 1.75; color: rgba(255, 255, 255, 0.82); }

@media (max-width: 1080px) {
  .values__row { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .values__row > div:nth-child(3) { border-left: 0; }
}
@media (max-width: 640px) {
  .values__row { grid-template-columns: 1fr; row-gap: 0; }
  .values__row > div, .values__row > div + div { padding: 24px 0; border-left: 0; }
  .values__row > div + div { border-top: 1px solid rgba(195, 200, 206, 0.35); }
}