/* OMFC International | convert.css: the hero's title sizes, proof numbers, project cards and filters,
   results, pricing, FAQ, the 3D section's controls, and the outcome block in the case studies. The project cards,
   FAQ and outcome block are also used by the standalone pages (page.css). Breakpoints as in base.css. */


/* === 1. Hero: no text over the photographs (the page's heading is for search engines and screen readers) === */

/* The project titles keep clear of the index on short screens */
.hero__titles {
  font-size: clamp(2.5rem, min(7.4vw, 11.5vh), 9.5rem);
}

@media (max-width: 767px) {
  .hero__titles {
    font-size: clamp(2.2rem, min(13vw, 7vh), 4.5rem);
  }
}


/* === 2. Proof: numbers, clients, accreditations ========================================================== */

.proof {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5.5rem);
  background: var(--paper);
  border-bottom: 1px solid var(--line-on-light);
}

.proof__stats {
  row-gap: var(--s-6);
}

.proof__stat {
  grid-column: span 3;
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink);
}

.proof__num {
  font-family: var(--font-narrow);
  font-size: clamp(3rem, 6vw, 6.25rem);
  font-weight: 250;
  font-stretch: 62%;
  line-height: 0.86;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.proof__txt {
  max-width: 26ch;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.proof__trust {
  align-items: center;
  row-gap: var(--s-4);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

.proof__label {
  grid-column: 1 / span 2;
  color: var(--muted);
}

.proof__clients {
  grid-column: 3 / span 7;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0;
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* A hi-vis-free separator: a short rule between the names */
.proof__clients li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 1px;
  margin: 0 0.7em;
  vertical-align: 0.32em;
  background: var(--line);
}

/* Accreditation badges: a row of their own under the clients, each tile as tall as the others and as wide as its
   logo (Constructionline's is wide) */
.proof__badges {
  grid-column: 3 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
}

.proof__badges img {
  display: block;
  width: auto;
  height: 3.75rem;
  padding: 0.3rem;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--line);
  object-fit: contain;
}

.proof__quals {
  display: grid;
  gap: 0.3rem;
  color: var(--muted);
}

@media (max-width: 1023px) {
  .proof__stat {
    grid-column: span 4;
  }

  .proof__label,
  .proof__clients,
  .proof__badges {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

@media (max-width: 767px) {
  .proof__stat {
    grid-column: span 2;
  }

  .proof__num {
    font-size: clamp(2.6rem, 13vw, 3.6rem);
  }
}


/* === 3. Our work: filters and project cards ================================================================ */

.work {
  position: relative;
  padding-block: var(--space-section) calc(var(--space-section) * 0.7);
  background: var(--graphite);
}

.work .section-head__title {
  grid-column: 1 / span 7;
}

.work .section-head__text {
  grid-column: 9 / span 4;
}

/* Filter chips */
.work__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--s-7);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.5rem;
  padding: 0 0.95rem;
  box-shadow: inset 0 0 0 1px var(--line);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transition:
    background-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}

.chip span {
  opacity: 0.55;
  font-variant-numeric: tabular-nums;
}

@media (hover: hover) {
  .chip:hover {
    box-shadow: inset 0 0 0 1px currentColor;
  }
}

.chip[aria-pressed="true"] {
  background: var(--hivis);
  color: var(--ink);
  box-shadow: none;
}

.chip[aria-pressed="true"] span {
  opacity: 0.7;
}

/* The grid: three cards a row on desktop, two on tablet, one on phones. On the home page and the projects page
   (.work__grid--lead) the first two lead, side by side at twice the size, until a filter is chosen. The cards in a
   row are as tall as each other, so their "View project" lines sit level. */
.work__grid {
  row-gap: clamp(3rem, 5vw, 5rem);
  align-items: stretch;
}

.work-card {
  grid-column: span 4;
  min-width: 0;
}

.work-card[hidden] {
  display: none;
}

.work-card__link {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  height: 100%;
  color: inherit;
}

.work-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--graphite-2);
}

[data-theme="light"] .work-card__media {
  background: var(--stone-2);
}

.work-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out);
}

/* A drawing (a project still in progress) stops animating while a case study or the menu covers the page: it is
   hidden once the curtain has closed over it */
.work-card__media img[src$=".svg"] {
  transition:
    transform 1.1s var(--ease-out),
    visibility 0s;
}

html.is-locked .work-card__media img[src$=".svg"] {
  visibility: hidden;
  transition: visibility 0s linear 1s;
}

/* A project still in progress: a hi-vis tag over its drawing */
.work-card__status {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1;
  padding: 0.35em 0.7em;
  background: var(--hivis);
  color: var(--ink);
}

.work-card__body {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding-top: var(--s-4);
  border-top: 1px solid var(--line);
}

/* Hi-vis line drawn over the hairline on hover */
.work-card__body::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--hivis);
  transform: scaleX(0);
  transform-origin: 100% 50%;
  transition: transform 0.7s var(--ease-roll);
}

[data-theme="light"] .work-card__body::before {
  background: var(--ink);
}

/* Number, place and client, with a dot between them */
.work-card__meta {
  display: flex;
  flex-wrap: wrap;
  row-gap: 0.25rem;
  color: var(--muted);
}

.work-card__meta > span + span::before {
  content: "\00b7";
  margin-inline: 0.7em;
}

.work-card__name {
  font-size: clamp(1.4rem, 1.9vw, 2rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

.work-card__scope {
  color: var(--muted);
  font-size: 0.9375rem;
}

/* The outcome: at most three lines, so every card keeps the same rhythm (the case study has it in full) */
.work-card__outcome {
  display: -webkit-box;
  max-width: 46ch;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  font-size: 0.9375rem;
  line-height: 1.5;
}

.work-card__go {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  padding-top: 0.6rem;
}

.work-card__go svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  transition: transform var(--dur-3) var(--ease-roll);
}

@media (hover: hover) {
  .work-card__link:hover .work-card__media img {
    transform: scale(1.045);
  }

  .work-card__link:hover .work-card__body::before {
    transform: scaleX(1);
    transform-origin: 0 50%;
  }

  .work-card__link:hover .work-card__go svg {
    transform: translateX(4px);
  }
}

.work-card__link:focus-visible .work-card__body::before {
  transform: scaleX(1);
}

/* Desktop: the first two cards lead, side by side, with wider photographs and larger names */
@media (min-width: 1024px) {
  .work__grid--lead:not(.is-filtered) > .work-card:nth-child(-n + 2) {
    grid-column: span 6;
  }

  .work__grid--lead:not(.is-filtered) > .work-card:nth-child(-n + 2) .work-card__media {
    aspect-ratio: 3 / 2;
  }

  .work__grid--lead:not(.is-filtered) > .work-card:nth-child(-n + 2) .work-card__name {
    font-size: clamp(2rem, 2.9vw, 3.1rem);
  }
}

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

  .work-card {
    grid-column: span 4;
  }
}

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

  .work__filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    margin-right: calc(var(--margin) * -1);
    padding-right: var(--margin);
  }

  .work__filters::-webkit-scrollbar {
    display: none;
  }

  .chip {
    flex: none;
  }
}

.work__foot {
  align-items: center;
  row-gap: var(--s-5);
  margin-top: var(--space-block);
}

.work__more {
  grid-column: 1 / -1;
  justify-self: start;
}

.work__more[hidden] {
  display: none;
}




/* === 4. Results: four outcomes, each with its figure ======================================================== */

.results {
  position: relative;
  padding-block: var(--space-section);
  background: var(--stone);
  border-bottom: 1px solid var(--line-on-light);
}

.results .section-head__title {
  grid-column: 1 / span 7;
}

.results .section-head__text {
  grid-column: 9 / span 4;
}

.results__list {
  row-gap: var(--s-8);
}

.result {
  grid-column: span 3;
  display: grid;
  align-content: start;
  gap: 0.8rem;
  padding-top: var(--s-4);
  border-top: 1px solid var(--ink);
}

.result__num {
  font-family: var(--font-narrow);
  font-size: clamp(3rem, 5.2vw, 5.75rem);
  font-weight: 250;
  font-stretch: 62%;
  line-height: 0.86;
  text-transform: uppercase;
}

.result__title {
  font-size: clamp(1.15rem, 1.4vw, 1.4rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.result__text {
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.result__link {
  justify-self: start;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}

@media (max-width: 1023px) {
  .results .section-head__title,
  .results .section-head__text {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .result {
    grid-column: span 4;
  }
}

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


/* === 5. Pricing: two ways to work, how a price is made ===================================================== */

.pricing {
  position: relative;
  padding-block: var(--space-section);
  background: var(--graphite);
  border-top: 1px solid var(--line-on-dark);
}

.pricing .section-head__title {
  grid-column: 1 / span 7;
}

.pricing .section-head__text {
  grid-column: 9 / span 4;
}

.pricing__options {
  row-gap: var(--gutter);
}

.offer {
  grid-column: span 6;
  display: grid;
  align-content: start;
  gap: var(--s-4);
  padding: clamp(1.5rem, 3vw, 3rem);
  box-shadow: inset 0 0 0 1px var(--line);
  background: rgba(245, 243, 238, 0.025);
}

.offer__no {
  color: var(--hivis);
}

.offer__title {
  font-family: var(--font-narrow);
  font-size: clamp(2.6rem, 4.6vw, 5rem);
  font-weight: 300;
  font-stretch: 64%;
  line-height: 0.88;
  text-transform: uppercase;
}

.offer__text {
  max-width: 46ch;
  font-size: clamp(1rem, 1.15vw, 1.15rem);
  line-height: 1.5;
}

.offer__list {
  border-top: 1px solid var(--line);
}

.offer__list li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}

/* A small hi-vis square before each line */
.offer__list li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 0.55em;
  background: var(--hivis);
}

.offer__proof {
  display: grid;
  gap: 0.35rem;
  color: var(--muted);
  font-size: 0.9375rem;
}

.offer__proof .label {
  color: var(--bone);
}

.offer__cta {
  justify-self: start;
  margin-top: var(--s-3);
}

.pricing__how {
  row-gap: var(--s-7);
  margin-top: var(--space-block);
}

.pricing__label {
  margin-bottom: var(--s-5);
  color: var(--muted);
}

.pricing__how > .pricing__label {
  grid-column: 1 / -1;
  margin-bottom: 0;
}

.steps {
  grid-column: 1 / span 7;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
}

.step {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding-top: var(--s-4);
  border-top: 1px solid var(--bone);
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.step__no {
  color: var(--hivis);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
}

.step__title {
  color: var(--bone);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.pricing__factors {
  grid-column: 9 / span 4;
  grid-row: 2;
}

.factors li {
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.9375rem;
}

.factors li:first-child {
  border-top: 1px solid var(--line);
}

.factors strong {
  color: var(--bone);
  font-weight: 500;
}

@media (max-width: 1023px) {
  .pricing .section-head__title,
  .pricing .section-head__text,
  .steps,
  .pricing__factors {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .offer {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .steps {
    grid-template-columns: 1fr;
  }
}


/* === 6. FAQ: <details> rows, a "+" that turns into "-" ===================================================== */

.faq {
  position: relative;
  padding-block: var(--space-section);
  background: var(--graphite);
}

.faq__layout {
  row-gap: var(--s-7);
  align-items: start;
}

.faq__head {
  grid-column: 1 / span 4;
  position: sticky;
  top: calc(var(--header-top) + var(--header-h) + 2rem);
}

.faq__title {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--track-tight);
}

.faq__list {
  grid-column: 6 / span 7;
  border-top: 1px solid var(--line);
}

.qa {
  border-bottom: 1px solid var(--line);
}

.qa__q {
  position: relative;
  display: block;
  padding: 1.35rem 3.5rem 1.35rem 0;
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  list-style: none;
  cursor: pointer;
}

.qa__q::-webkit-details-marker {
  display: none;
}

/* The square toggle, as in the disciplines */
.qa__q::before,
.qa__q::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.9rem;
  width: 14px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--dur-3) var(--ease-roll);
}

.qa__q::after {
  transform: rotate(90deg);
}

.qa[open] .qa__q::after {
  transform: rotate(0deg);
}

@media (hover: hover) {
  .qa__q:hover {
    color: var(--hivis);
  }

  [data-theme="light"] .qa__q:hover {
    color: inherit;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
  }
}

.qa__a {
  max-width: 62ch;
  padding-bottom: 1.5rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.6;
}

.qa__a .text-link {
  color: var(--bone);
  background-size: 100% 1px;
  background-position: 0% 100%;
}

[data-theme="light"] .qa__a .text-link {
  color: var(--ink);
}

@media (max-width: 1023px) {
  .faq__head,
  .faq__list {
    position: relative;
    top: 0;
    grid-column: 1 / -1;
  }
}


/* === 7. Enquire: hours, help line, privacy line, what happens next ========================================= */

.enquire__hours {
  color: var(--muted);
  font-size: 0.8125rem;
}

.field__help {
  grid-column: 2;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.sheet__note {
  max-width: 36ch;
  line-height: 1.6;
}

.sheet__note .text-link {
  background-size: 100% 1px;
  background-position: 0% 100%;
}

.sheet__next {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter);
  margin-bottom: var(--s-6);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  font-size: 0.875rem;
  line-height: 1.45;
}

.sheet__next li {
  display: grid;
  gap: 0.35rem;
}

.sheet__next .label {
  color: var(--muted);
}

@media (max-width: 767px) {
  .sheet__next {
    grid-template-columns: 1fr;
  }
}


/* === 8. Menu: a direct line under the links ================================================================ */

.menu__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
  margin-right: auto;
  color: var(--bone);
}


/* === 9. In focus: Replay the build, Step inside (focus.js shows them once the build has finished) ======== */

.focus__controls {
  position: absolute;
  z-index: 4;
  left: var(--margin);
  bottom: var(--margin);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.75rem);
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-3) var(--ease-out),
    visibility 0s linear var(--dur-3);
}

.focus__stage.has-controls .focus__controls {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.focus__ctrl {
  min-height: 2.5rem;
  padding: 0 1rem;
  background: rgba(245, 243, 238, 0.92);
  box-shadow: inset 0 0 0 1px var(--line-on-light);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  transition:
    background-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out);
}

.focus__ctrl--go {
  background: var(--ink);
  color: var(--bone);
}

@media (hover: hover) {
  .focus__ctrl:hover {
    background: var(--hivis);
    color: var(--ink);
  }
}

.is-static .focus__controls,
.is-model-fallback .focus__controls {
  display: none;
}

/* Tablet and phone: the panel sits at the bottom, so the controls go top left (where the caption was) */
@media (max-width: 1023px) {
  .focus__controls {
    top: calc(var(--header-top) + var(--header-h) + 1.5rem);
    bottom: auto;
  }
}

/* Phone: the controls on one line, and the marker card under them, the full width (it sat on top of them) */
@media (max-width: 767px) {
  .focus__controls {
    right: var(--margin);
    flex-wrap: nowrap;
  }

  .focus__ctrl {
    padding: 0 0.85rem;
    white-space: nowrap;
  }

  .focus__card {
    top: calc(var(--header-top) + var(--header-h) + 1.5rem + 2.5rem + 0.75rem);
    width: auto;
    left: var(--margin);
  }
}


/* === 10. Case studies (overlay and pages): the outcome ================================= */

.case-outcome {
  align-items: start;
  row-gap: var(--s-4);
  padding-bottom: var(--space-block);
}

.case-outcome__label {
  grid-column: 1 / span 3;
  padding-top: 0.6em;
  color: var(--muted);
}

.case-outcome__text {
  grid-column: 4 / span 6;
  font-size: clamp(1.3rem, 2.2vw, 2.3rem);
  line-height: 1.15;
  letter-spacing: -0.022em;
}

@media (max-width: 1023px) {
  .case-outcome__label,
  .case-outcome__text {
    grid-column: 1 / -1;
    justify-self: start;
  }
}

/* What the client said (data.js testimonial): under the outcome, the same columns, set in quotation marks */
.case-quote {
  align-items: start;
  row-gap: var(--s-4);
  margin: 0;
  padding-bottom: var(--space-block);
}

.case-quote__label {
  grid-column: 1 / span 3;
  padding-top: 0.6em;
  color: var(--muted);
}

.case-quote__text {
  grid-column: 4 / span 6;
  margin: 0;
  font-size: clamp(1.1rem, 1.5vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.case-quote__text p::before {
  content: "\201C";
}

.case-quote__text p::after {
  content: "\201D";
}

.case-quote__by {
  grid-column: 4 / span 6;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
  align-items: baseline;
}

.case-quote__by .label {
  color: var(--muted);
}

@media (max-width: 1023px) {
  .case-quote__label,
  .case-quote__text,
  .case-quote__by {
    grid-column: 1 / -1;
  }
}