/* OMFC International | page.css: the standalone pages written by tools/build-pages.ps1 (work/, work/<slug>/, the
   service pages, privacy.html, 404.html). They reuse the case study styles (case.css), the project cards, FAQ and
   quick contact bar (convert.css) and the footer (sections.css); this file adds their header, breadcrumb, service
   head and the quote band. No animation runs on these pages. */


/* === 1. Page ============================================================================================== */

body.page {
  background: var(--stone);
}

/* No case.js here: photographs show at once (case.css fades them in when it runs) */
.page .case-fig__btn img {
  opacity: 1;
  transform: none;
}

.page main {
  display: block;
}


/* === 2. Header: logo, links, telephone and "Get a quote", sticky ========================================== */

.page-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 4.25rem;
  padding: 0.5rem var(--margin);
  background: rgba(230, 226, 218, 0.94);
  border-bottom: 1px solid var(--line-on-light);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Lite mode (core.js): a solid bar, as the blur behind it is redrawn on every frame of scrolling */
.is-lite .page-header {
  background: var(--stone);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* The logo in ink on the stone bar, a little taller than the old one so its INTERNATIONAL line stays legible */
.page-header__logo img {
  display: block;
  width: auto;
  height: 3.25rem;
}

.page-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin-left: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.page-nav a {
  padding-block: 0.4rem;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: 100% 100%;
  transition: background-size var(--dur-3) var(--ease-out);
}

.page-nav a:hover,
.page-nav a:focus-visible {
  background-size: 100% 1px;
  background-position: 0% 100%;
}

.page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-left: auto;
}

.page-header__tel {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.page-header__cta {
  --btn-h: 2.75rem;
  --btn-fill: var(--hivis);
  --btn-fill-fg: var(--ink);
}

@media (max-width: 1180px) {
  .page-nav a:nth-child(n + 2):nth-child(-n + 4) {
    display: none;
  }
}

@media (max-width: 767px) {
  .page-nav,
  .page-header__tel {
    display: none;
  }
}



/* === 3. Breadcrumb ========================================================================================= */

.crumbs {
  padding-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.crumbs ol {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0;
  color: var(--muted);
}

.crumbs li:not(:last-child)::after {
  content: "/";
  margin: 0 0.75em;
  opacity: 0.6;
}

.crumbs [aria-current] {
  color: var(--ink);
}


/* === 4. Case study page: the overlay's layout, a little tighter at the top =================================== */

.case-page .case-head {
  padding-top: clamp(2rem, 6vh, 4.5rem);
}

.case-page .case-cover {
  margin-bottom: var(--space-block);
}

.case-page .case-next {
  margin-top: 0;
}


/* === 5. Service and project list pages: text beside a photograph ============================================ */

.svc-head {
  align-items: end;
  row-gap: var(--s-7);
  padding-block: clamp(2rem, 6vh, 4.5rem) var(--space-block);
}

.svc-head__text {
  grid-column: 1 / span 7;
  display: grid;
  justify-items: start;
  gap: var(--s-5);
}

.svc-head--plain .svc-head__text {
  grid-column: 1 / span 9;
}

.svc-head__kicker {
  color: var(--muted);
}

.svc-head__title {
  font-family: var(--font-narrow);
  font-size: clamp(3.2rem, 8vw, 9rem);
  font-weight: 280;
  font-stretch: 62%;
  line-height: 0.86;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.svc-head__lead {
  max-width: 40ch;
  font-size: var(--fs-lead);
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.svc-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.svc-head__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.875rem;
}

.svc-head__proof b {
  display: block;
  color: var(--ink);
  font-family: var(--font-narrow);
  font-size: 2.2rem;
  font-weight: 300;
  font-stretch: 64%;
  line-height: 1;
  text-transform: uppercase;
}

.svc-head__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

.svc-head__media {
  grid-column: 9 / span 4;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--stone-2);
}

.svc-head__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1023px) {
  .svc-head__text,
  .svc-head--plain .svc-head__text {
    grid-column: 1 / -1;
  }

  .svc-head__media {
    grid-column: 1 / span 5;
  }
}

@media (max-width: 767px) {
  .svc-head__media {
    grid-column: 1 / -1;
    aspect-ratio: 4 / 3;
  }
}


/* === 6. Project cards and questions on a light page ======================================================== */

.p-related {
  padding-block: var(--space-block) var(--space-section);
}

.p-related--all {
  padding-top: 0;
}

.p-related .section-head__title {
  grid-column: 1 / span 8;
}

.p-related .section-head__text {
  grid-column: 10 / span 3;
}

@media (max-width: 1023px) {
  .p-related .section-head__title,
  .p-related .section-head__text {
    grid-column: 1 / -1;
  }
}

.p-faq {
  row-gap: var(--s-5);
  padding-bottom: var(--space-section);
}

.p-faq .faq__list {
  grid-column: 4 / span 8;
}

@media (max-width: 1023px) {
  .p-faq .faq__list {
    grid-column: 1 / -1;
  }
}


/* === 7. Quote band (dark) ================================================================================== */

.p-cta {
  padding-block: var(--space-section);
  background: var(--graphite);
}

.p-cta__inner {
  row-gap: var(--s-5);
}

.p-cta__kicker {
  grid-column: 1 / -1;
  color: var(--hivis);
}

.p-cta__title {
  grid-column: 1 / span 9;
  font-size: clamp(2.4rem, 6vw, 6.5rem);
  font-weight: 450;
  line-height: 0.92;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.p-cta__text {
  grid-column: 1 / span 6;
  max-width: 48ch;
  color: var(--muted);
}

.p-cta__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5) var(--s-6);
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

@media (max-width: 1023px) {
  .p-cta__title,
  .p-cta__text {
    grid-column: 1 / -1;
  }
}


/* === 8. Footer: the site footer without the giant wordmark ================================================== */

.page-footer {
  border-top: 1px solid var(--line-on-dark);
}

.page-footer__projects ul {
  columns: 2;
  column-gap: var(--gutter);
}

.page-footer__projects li {
  break-inside: avoid;
}

@media (max-width: 767px) {
  .page-footer__projects {
    grid-column: 1 / -1;
  }
}


/* === 9. Plain text pages (privacy notice, not found) ========================================================= */

.prose {
  padding-block: clamp(2rem, 6vh, 4.5rem) var(--space-section);
}

.prose__body {
  grid-column: 3 / span 7;
  display: grid;
  gap: 1.1em;
  font-size: 1.0625rem;
  line-height: 1.6;
}

.prose__body h1 {
  margin-bottom: 0.3em;
  font-family: var(--font-narrow);
  font-size: clamp(3rem, 7vw, 7rem);
  font-weight: 280;
  font-stretch: 62%;
  line-height: 0.86;
  text-transform: uppercase;
}

.prose__body h2 {
  margin-top: 1em;
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: -0.015em;
}

.prose__body ul {
  display: grid;
  gap: 0.4em;
  padding-left: 1.2em;
  list-style: square;
}

.prose__body a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

@media (max-width: 1023px) {
  .prose__body {
    grid-column: 1 / -1;
  }
}