/* Concept One: final polish refinement layer, v0.11.8-c. */

/* Desktop footer: retain the approved quiet right-hand wordmark from v0.11.9-ar
   while accommodating the current secondary resource links. */
.footer-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 18rem);
  grid-template-areas:
    "tagline cta"
    "contact brand"
    "resources brand"
    "metadata brand"
    "company brand";
  column-gap: clamp(3rem, 8vw, 8rem);
  row-gap: 0;
}

.footer-tagline-wrapper {
  grid-area: tagline;
  align-self: start;
  max-width: 37.5rem;
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
}

.footer-tagline {
  margin: 0;
}

.footer-cta {
  grid-area: cta;
  align-self: start;
  justify-self: end;
}

.footer-contact-primary {
  grid-area: contact;
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
}

.footer-resource-nav {
  grid-area: resources;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0 0 clamp(2rem, 2.5vw, 2.5rem);
}

.footer-resource-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
}

.footer-resource-nav a:hover {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--pink);
}

.footer-resource-nav a:focus-visible {
  color: var(--white);
  outline: 0.1875rem solid var(--pink);
  outline-offset: 0.25rem;
}

.footer-meta {
  grid-area: metadata;
}

.footer-company-disclosure {
  grid-area: company;
  margin: 0;
}

.footer-brand {
  grid-area: brand;
  align-self: end;
  justify-self: end;
  margin: 0;
  padding-top: 2rem;
}

.footer-brand .site-wordmark--footer {
  display: inline-flex;
  justify-content: flex-end;
}

.footer-brand .site-wordmark--footer img {
  width: clamp(9rem, 15vw, 12.5rem);
  height: auto;
}

/* The added marks retain their original artwork. Scale compensation addresses
   only source-canvas whitespace and differing visible mass. */
.partner-logo--badrutts { --logo-optical-scale: 1.18; }
.partner-logo--howden { --logo-optical-scale: 0.96; }
.partner-logo--nesta { --logo-optical-scale: 1.08; }
.partner-logo--thch { --logo-optical-scale: 1.08; }
.partner-logo--nbid { --logo-optical-scale: 1.18; }

/* Increase the artwork caps by approximately 17% without altering the fixed
   logo-slot height, padding, grid gap or section spacing. */
.partner-logo {
  --logo-max-width: 9.35rem;
  --logo-max-height: 3.2rem;
}

.partner-logo--ucas {
  --logo-max-width: 5.85rem;
}

@media (max-width: 62rem) {
  .footer-content {
    grid-template-columns: minmax(0, 1fr) minmax(11rem, 14rem);
    column-gap: clamp(2rem, 5vw, 4rem);
  }
}

@media (max-width: 48rem) {
  .footer-content {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .footer-tagline-wrapper {
    margin-bottom: 1.25rem;
  }

  .footer-cta {
    align-self: flex-start;
    margin-bottom: 1.5rem;
  }

  .footer-contact-primary {
    flex-direction: row;
    align-items: flex-start;
    gap: 0.25rem 1.25rem;
    margin-bottom: 1.5rem;
  }

  .footer-resource-nav {
    margin-bottom: 1.75rem;
  }

  .partner-logo img,
  .partner-logo--wide img {
    max-width: min(var(--logo-max-width), 7.6rem);
    max-height: min(var(--logo-max-height), 2.625rem);
  }

  .footer-meta {
    margin-bottom: 0.9rem;
  }

  .footer-brand {
    align-self: flex-end;
    margin-top: 1.75rem;
    padding-top: 0;
  }

  .footer-brand .site-wordmark--footer img {
    width: clamp(8.5rem, 38vw, 10.5rem);
  }
}

@media (max-width: 28rem) {
  .footer-resource-nav {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.2rem;
  }
}

/* v0.11.9-a: selected navy-led direction.
   On the homepage only, Working with i-Spy adopts Concept Two's approved
   light treatment while Brand experience remains navy. */
#services.services-section {
  background: #F7F6F4;
  color: var(--navy);
}

#services .services-title {
  color: var(--navy);
}

#services .services-introduction {
  color: rgba(10, 25, 41, 0.82);
}

#services .section-label {
  color: var(--pink);
}

#services .services-more .download-btn {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

#services .services-more .download-btn:hover,
#services .services-more .download-btn:focus {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--navy);
}

#services.services-section {
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

#services .services-introduction {
  margin-bottom: 0;
}

#services .services-more {
  margin-top: 1.75rem;
}

/* v0.11.9-av: separate the final delivery thought from its lead paragraph. */
#services .services-conclusion {
  margin-top: 0.875rem;
}

/* Keep the homepage About action connected but visibly distinct from the copy. */
.about-section .about-more-link {
  display: inline-block;
  margin-top: 1.125rem;
}

/* Slightly quieter contact typography; the approved 44px target remains. */
.footer-contact-primary a {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
}

@media (max-width: 40rem) {
  .partner-grid .partner-logo:last-child {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc((100% - clamp(1rem, 2.5vw, 2rem)) / 2);
  }
}

@media (max-width: 48rem) {
  #services.services-section {
    padding-top: 3.25rem;
    padding-bottom: 3.25rem;
  }
}

@media (max-width: 28rem) {
  .footer-cta {
    width: 100%;
  }

  .footer-legal-nav {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem 1rem;
  }
}

/* v0.11.8-d: move the contact group towards the upper divider while keeping
   the legal information and wordmark anchored in their approved lower slots. */
@media (min-width: 48.0625rem) {
  footer#contact {
    padding-top: clamp(3rem, 4vw, 4rem);
  }

  .footer-content {
    min-height: clamp(17.5rem, calc(20vw + 0.75rem), 18.75rem);
    grid-template-areas:
      "tagline cta"
      "contact brand"
      "resources brand"
      ". brand"
      "metadata brand"
      "company brand";
    grid-template-rows: auto auto auto 1fr auto auto;
  }

  .footer-tagline-wrapper {
    margin-bottom: 1.5rem;
  }

  .footer-contact-primary {
    margin-bottom: 0;
  }
}

@media (max-width: 48rem) {
  footer#contact {
    padding-top: 3rem;
  }

  .footer-content {
    min-height: 0;
  }

  .footer-cta {
    margin-bottom: 1rem;
  }

  .footer-contact-primary {
    margin-bottom: 3.5rem;
  }

  .footer-contact-primary a,
  .footer-legal-nav a,
  .footer-brand .site-wordmark--footer {
    min-height: 44px;
  }
}

/* v0.11.9-c: twelve logos produce complete rows at every approved breakpoint. */
.partner-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.partner-grid .partner-logo:last-child {
  grid-column: auto;
  justify-self: stretch;
  width: auto;
}

@media (max-width: 63.999rem) {
  .partner-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 37.499rem) {
  .partner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(1rem, 4vw, 1.5rem);
    row-gap: 1rem;
  }
}

/* v0.11.9-i: retain a deliberate two-line hero statement above the mobile
   breakpoint while allowing natural wrapping on narrow screens. */
@media (min-width: 48.0625rem) {
  .hero h1 {
    max-width: 18ch;
  }

  .hero-heading-line {
    display: block;
    white-space: nowrap;
  }
}

/* v0.11.9-ap: calm, one-pass, layout-stable editorial line reveal.
   Both complete lines and the supporting paragraph remain visible by default. Animation
   is applied only where CSS transforms and animations are supported, so failed
   or disabled animation retains the readable final state without JavaScript. */
.hero-title__line {
  display: block;
  width: max-content;
  max-width: none;
  white-space: nowrap;
}

/* v0.11.9-at: the proposition reads as strategy followed by creative action. */
.hero {
  background: var(--navy);
  color: var(--white);
}

.hero-title__line--one {
  color: var(--white);
}

.hero-title__line--two {
  color: var(--pink);
}

.hero-subtitle {
  color: var(--white);
  opacity: 1;
}

.problem-section {
  background: var(--paper);
}

#services.services-section {
  background: var(--white);
}

@media (max-width: 48rem) {
  .hero h1.hero-title--line-reveal {
    max-width: none;
    font-size: clamp(1.95rem, 8.35vw, 2.75rem);
  }
}

@supports (animation-name: hero-line-reveal) and (transform: translateY(0)) {
  .hero-title__line--one {
    animation: hero-line-reveal 950ms cubic-bezier(0.22, 1, 0.36, 1) 250ms backwards;
  }

  .hero-title__line--two {
    animation: hero-line-reveal 900ms cubic-bezier(0.22, 1, 0.36, 1) 1.8s backwards;
  }
}

@keyframes hero-line-reveal {
  from {
    opacity: 0;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* v0.11.9-au: component-specific supporting-copy measures.
   Headings retain their expressive width while the copy immediately beneath
   uses a calmer editorial measure. Mobile returns to the available width. */
.hero-subtitle {
  max-width: 48ch;
  text-wrap: pretty;
}

.problem-section .intro-headline,
#services .services-title,
.about-section .section-label,
.brand-check-section h2,
.products-hero h1,
.products-list .offer-card h2,
.products-contact h2 {
  text-wrap: balance;
}

.problem-section .editorial-problem-copy > p {
  max-width: 44ch;
  text-wrap: pretty;
}

#services .services-introduction {
  max-width: 46ch;
  text-wrap: pretty;
}

.about-section .about-content-inner > p {
  max-width: 46ch;
  text-wrap: pretty;
}

.brand-check-section p:not(.section-label) {
  max-width: 44ch;
  text-wrap: pretty;
}

.products-hero p {
  max-width: 46ch;
  text-wrap: pretty;
}

.products-list .offer-card > p:not(.section-label) {
  max-width: 48ch;
  text-wrap: pretty;
}

.products-contact p {
  max-width: 42ch;
  text-wrap: pretty;
}

/* v0.11.9-av: mark the outcome in each service area through spacing alone. */
.products-list .offer-card > .offer-conclusion {
  margin-top: 1.125rem;
}

@media (max-width: 48rem) {
  .hero-subtitle,
  .problem-section .editorial-problem-copy > p,
  #services .services-introduction,
  .about-section .about-content-inner > p,
  .brand-check-section p:not(.section-label),
  .products-hero p,
  .products-list .offer-card > p:not(.section-label),
  .products-contact p {
    max-width: 100%;
  }

  .hero-subtitle {
    font-size: clamp(1rem, 4.2vw, 1.08rem);
  }

  .products-list .offer-card > p:not(.section-label) + p:not(.section-label) {
    margin-top: 0.875rem;
  }

  #services .services-conclusion,
  .products-list .offer-card > .offer-conclusion {
    margin-top: 0.875rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-title__line {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Keep the mobile testimonial link clear of the final testimonial divider. */
@media (max-width: 48rem) {
  .testimonials-grid > p:last-child {
    margin-top: 1.5rem;
  }
}

/* Mobile footer follows one semantic and visual sequence:
   contact, wordmark, statutory links, company disclosure. */
@media (max-width: 48rem) {
  .footer-contact-primary {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    margin-bottom: 2rem;
  }

  .footer-contact-primary a {
    width: fit-content;
    min-height: 44px;
    font-size: 1rem;
    line-height: 1.4;
  }

  .footer-brand {
    display: flex;
    align-self: stretch;
    justify-content: flex-end;
    margin: 0 0 1.75rem;
    padding-top: 0;
  }

  .footer-brand .site-wordmark--footer {
    min-height: 44px;
  }

  .footer-brand .site-wordmark--footer img {
    width: 10rem;
  }

  .footer-meta {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
  }

  .footer-legal-nav {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 1rem;
  }

  .footer-legal-nav a {
    min-height: 44px;
    font-size: 0.875rem;
    line-height: 1.4;
  }

  .footer-company-disclosure {
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.78125rem;
    line-height: 1.55;
  }
}

/* v0.11.9-d: align the wordmark to the left on phone-sized screens only.
   The existing tablet and desktop placement remains unchanged. */
@media (max-width: 37.499rem) {
  .footer-brand {
    justify-content: flex-start;
    margin-top: 0.75rem;
  }

  .footer-brand .site-wordmark--footer {
    justify-content: flex-start;
  }
}

/* v0.11.9-ab: keep one semantic Back to top link in the approved mobile
   source order, while positioning it beneath the primary CTA on desktop. */
@media (min-width: 48.0625rem) {
  .footer-content {
    position: relative;
  }

  .footer-back-to-top {
    position: absolute;
    top: calc(3.1rem + 0.75rem);
    right: 0;
    margin-left: 0;
  }
}

/* v0.11.9-e: optical logo normalisation.
   These values balance visible artwork rather than source-canvas dimensions. */
.partner-logo--cr {
  --logo-optical-scale: 1.62;
}

.partner-logo--ucas {
  --logo-optical-scale: 0.96;
  --logo-max-width: 4.25rem;
}

.partner-logo--bentley {
  --logo-optical-scale: 1.33;
}

.partner-logo--ids {
  --logo-optical-scale: 1.22;
}

.partner-logo--o2 {
  --logo-optical-scale: 0.85;
}

.partner-logo--shell {
  --logo-optical-scale: 0.96;
}

.partner-logo--voda {
  --logo-optical-scale: 1.12;
}

.partner-logo--gatwick {
  --logo-optical-scale: 1.26;
}

.partner-logo--pwc {
  --logo-optical-scale: 1.12;
}

.partner-logo--howden {
  --logo-optical-scale: 0.96;
  --logo-max-width: 3.9rem;
}

.partner-logo--nesta {
  --logo-optical-scale: 1.08;
}

.partner-logo--mcalpine {
  --logo-optical-scale: 0.92;
}

.partner-logo--nbid {
  --logo-optical-scale: 1.24;
}

/* v0.11.9-f: real-device phone calibration.
   These overrides correct perceived size on narrow, high-density screens only;
   tablet and desktop optical sizing remains unchanged. */
@media (max-width: 37.499rem) {
  .partner-logo--cr {
    --logo-optical-scale: 1.54;
  }

  .partner-logo--ucas {
    --logo-optical-scale: 0.96;
    --logo-max-width: 3.5rem;
  }

  .partner-logo--bentley {
    --logo-optical-scale: 1.4;
  }

  .partner-logo--ids {
    --logo-optical-scale: 1.22;
  }

  .partner-logo--o2 {
    --logo-optical-scale: 0.68;
  }

  .partner-logo--shell {
    --logo-optical-scale: 0.77;
  }

  .partner-logo--voda {
    --logo-optical-scale: 1.12;
  }

  .partner-logo--gatwick {
    --logo-optical-scale: 1.26;
  }

  .partner-logo--pwc {
    --logo-optical-scale: 1.18;
  }

  .partner-logo--howden {
    --logo-optical-scale: 0.96;
    --logo-max-width: 3.25rem;
  }

  .partner-logo--nesta {
    --logo-optical-scale: 1.13;
  }

  .partner-logo--mcalpine {
    --logo-optical-scale: 0.88;
  }

  .partner-logo--nbid {
    --logo-optical-scale: 1.24;
  }
}

/* v0.11.9-l: keep the statutory company disclosure readable but visually quiet. */
.footer-company-disclosure {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.5;
}

/* v0.11.9-ar: focused homepage simplification and content restructure. */
.brand-check-section {
  padding: 4.5rem 0;
  background: var(--paper);
}

.brand-check-section .centered-content {
  max-width: 52rem;
}

.brand-check-section .section-label {
  margin-bottom: 1.25rem;
}

.brand-check-section h2 {
  max-width: 17ch;
  margin: 0 0 1.5rem;
  font-size: clamp(2.25rem, 4.6vw, 4rem);
  font-weight: 560;
  line-height: 1.02;
}

.brand-check-section p:not(.section-label) {
  max-width: 62ch;
  margin: 0;
  color: rgba(10, 25, 41, 0.82);
  font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  line-height: 1.68;
}

.brand-check-section .download-btn {
  margin-top: 1.75rem;
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.brand-check-section .download-btn:hover,
.brand-check-section .download-btn:focus-visible {
  background: var(--pink);
  border-color: var(--pink);
  color: var(--navy);
}

.products-process-note {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.32);
  font-size: 1.05rem !important;
  line-height: 1.65;
}

@media (max-width: 48rem) {
  .brand-check-section {
    padding: 3.25rem 0;
  }

  .brand-check-section .download-btn {
    min-height: 2.75rem;
  }
}

/* Keep the final homepage Brand Check copy subordinate to its heading. */
.brand-check-section p:not(.section-label) {
  max-width: 44ch;
  text-wrap: pretty;
}

@media (max-width: 48rem) {
  .brand-check-section p:not(.section-label) {
    max-width: 100%;
  }
}

/* v0.11.9-ax-better-brand-01: formalise the approved homepage colour rhythm. */
.hero,
.partners-section,
footer {
  background: var(--navy);
}

.problem-section,
.testimonials-section,
.brand-check-section {
  background: var(--paper);
}

#services.services-section,
.about-section {
  background: var(--white);
}