/* ==========================================================================
   HAIR.WIRED STYLESHEET
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & base
   -------------------------------------------------------------------------- */

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

html {
  /* The design is light-only. Declaring it stops browsers with an auto-dark
     mode from inventing a dark treatment for the scrollbars and the ground. */
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  /* iOS paints a grey box over a tapped element, which lands on top of the
     pressed states below and fights them. */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-md);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
}

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

a {
  color: inherit;
}

p,
blockquote {
  margin: 0;
}

h1,
h2,
h3 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
}

/* .u-skip-link and .c-header have no ground of their own — when the skip link
   is revealed both sit on the hero photograph. */
.u-skip-link:focus-visible,
.c-header :focus-visible,
.c-hero :focus-visible,
.s-inverse :focus-visible,
.s-green :focus-visible,
.c-tooltip :focus-visible {
  outline-color: var(--color-focus-inverse);
}

/* Visible only to screen readers — used for the page's H1 and section labels
   that the design conveys visually rather than with text. */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.u-skip-link {
  position: absolute;
  top: var(--spacing-8);
  left: var(--spacing-8);
  z-index: 100;
  padding: var(--spacing-8) var(--spacing-16);
  border-radius: var(--radius-sm);
  background-color: var(--color-background);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-body-bold);
  text-decoration: none;
  transform: translateY(-200%);
}

.u-skip-link:focus {
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   2. Typography primitives
   -------------------------------------------------------------------------- */

.t-heading {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-md);
  font-stretch: semi-expanded;
  text-transform: uppercase;
  text-wrap: balance;
}

.t-heading--sentence {
  text-transform: none;
  text-wrap: pretty;
}

.t-heading--sans {
  font-family: var(--font-heading);
}

.c-panel__heading {
  line-height: 28px;
  padding-bottom: var(--spacing-16);
}

.t-body {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-body);
  line-height: var(--line-height-md);
}

.t-small {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
}

.t-bold {
  font-weight: var(--font-weight-body-bold);
}

.t-subtle {
  color: var(--color-text-subtle);
}

.t-center {
  text-align: center;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.l-main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-64);
  padding: var(--spacing-64) var(--spacing-16) var(--spacing-16);
}

.l-main > * {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.l-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.l-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-16) var(--spacing-16) var(--spacing-32);
}

.c-panel__content {
  display: flex;
  flex-direction: column;
}

.s-green .c-panel__content {
  align-items: center;
}

/* --------------------------------------------------------------------------
   4. Surfaces
   -------------------------------------------------------------------------- */

.s-inverse {
  background-color: var(--color-background-inverse);
  color: var(--color-text-inverse);
}

.s-inverse--deep {
  background-color: var(--color-background-jet);
  padding-block: var(--spacing-32);
}

.s-green {
  background-color: var(--color-background-green);
  color: var(--color-text-green);
}

/* --------------------------------------------------------------------------
   5. Media
   -------------------------------------------------------------------------- */

.m-image {
  width: 100%;
  object-fit: cover;
}

.m-image--portrait { aspect-ratio: 2 / 3; }
.m-image--landscape { aspect-ratio: 3 / 2; }
.m-image--salon { aspect-ratio: 329 / 241; mix-blend-mode: lighten; }

/* --------------------------------------------------------------------------
   6. Button
   -------------------------------------------------------------------------- */

.c-button {
  display: inline-block;
  padding: 15px var(--spacing-24);
  border-radius: var(--radius-sm);
  background-color: var(--color-background);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  font-weight: var(--font-weight-body-bold);
  text-decoration: none;
  transition: background-color 150ms ease, transform 160ms ease-out;
}

/* Guarded so the fill does not stick after a tap on a touch device. Some
   touch devices report hover, so a fine pointer is required too. */
@media (hover: hover) and (pointer: fine) {
  .c-button:hover {
    background-color: var(--color-background-hover);
  }
}

/* After the hover block, so a press wins while the pointer is still over it.
   The scale is what confirms the press was heard; the fill alone reads as a
   state change rather than feedback. */
.c-button:active {
  background-color: var(--color-background-pressed);
  transform: scale(0.97);
}

/* --------------------------------------------------------------------------
   7. Header — sits over the hero image, so it uses inverse text
   -------------------------------------------------------------------------- */

.c-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--spacing-12) var(--spacing-16);
  color: var(--color-text-inverse);
}

/* The underline is drawn at rest and coloured in on hover, so it fades at the
   button's speed instead of snapping, and nothing reflows. */
.c-header__link {
  font-size: var(--font-size-md);
  line-height: var(--line-height-md);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-shadow: 0 1px 2px rgb(0 0 0 / 10%);
  transition: text-decoration-color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .c-header__link:hover {
    text-decoration-color: currentColor;
  }
}

.c-header__link:focus-visible {
  text-decoration-color: currentColor;
}

.c-header__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-md);
  font-stretch: semi-expanded;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

/* "Book on Fresha" on desktop shortens to "Book" below 1024. The rest is
   hidden visually rather than removed, so the link is still announced as
   "Book on Fresha" — "Book" alone doesn't say where it goes. */
.c-header__rest {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.c-hero {
  position: relative;
  isolation: isolate;
}

.c-hero__image {
  width: 100%;
  aspect-ratio: 2 / 3;
  max-height: 100vh;
  max-height: 100dvh;
  object-fit: cover;
}

.c-hero__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--spacing-16) var(--spacing-32);
  background-image: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-background-jet) 20%, transparent) 0%,
    color-mix(in srgb, var(--color-background-jet) 40%, transparent) 45%,
    color-mix(in srgb, var(--color-background-jet) 66%, transparent) 100%
  );
  color: var(--color-text-inverse);
  text-align: center;
}

.c-hero__title {
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-md);
  font-stretch: semi-expanded;
  text-transform: uppercase;
  padding-bottom: var(--spacing-16);
}

.c-hero__standfirst {
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  padding-bottom: var(--spacing-16);
  text-shadow: 0 1px 2px rgb(0 0 0 / 10%);
}

/* The hero is art-directed across three photographs, each with its own crop:
   a 2:3 portrait below 768, a 4:3 pair from 768, and the 2:1 triptych at
   --breakpoint-xl. These steps are the hero's own and are deliberately not
   tied to the layout breakpoints. */
@media (min-width: 768px) {
  .c-hero__image {
    aspect-ratio: 4 / 3;
  }
}

/* --------------------------------------------------------------------------
   9. Introduction
   -------------------------------------------------------------------------- */

.c-intro {
  font-size: var(--font-size-lg);
  line-height: 28px;
  text-wrap: pretty;
}

.c-section__heading--centred {
  padding-bottom: var(--spacing-8);
}

/* --------------------------------------------------------------------------
   10. About — portrait, quote, and the service price list
   -------------------------------------------------------------------------- */

.c-about {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
}

.c-about__quote {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding-inline: var(--spacing-24);
  padding-block: var(--spacing-16);
  text-align: center;
}

.c-about__credentials {
  text-wrap: balance;
}

.c-services {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.c-services .t-heading {
  font-size: var(--font-size-md);
  line-height: var(--line-height-sm);
}

.c-services__list {
  border-bottom: 1px solid var(--color-border-subtle);
}

.c-service {
  display: flex;
  align-items: flex-start;
  align-items: last baseline;
  justify-content: space-between;
  gap: var(--spacing-16);
  min-height: 48px;
  padding-block: 11px;
  border-top: 1px solid var(--color-border-subtle);
}

.c-service__label {
  display: flex;
  align-items: last baseline;
  gap: var(--spacing-8);
}

.c-service__name {
  width: fit-content;
  font-weight: var(--font-weight-body-bold);
}

.c-service__duration {
  flex-shrink: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-subtle);
}

.c-service__price {
  flex-shrink: 0;
  width: fit-content;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-body-bold);
  text-align: right;
}

/* --------------------------------------------------------------------------
   11. Image galleries — Results and Behind the scenes
   -------------------------------------------------------------------------- */

.c-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-16);
}

/* --------------------------------------------------------------------------
   12. Testimonials
   -------------------------------------------------------------------------- */

.c-section--testimonials {
  gap: var(--spacing-24);
}

.c-testimonials {
  display: grid;
  gap: var(--spacing-24);
}

.c-testimonial {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-0);
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--color-border-subtle);
  text-align: center;
}

.c-testimonial__quote {
  margin-inline: var(--spacing-24);
  margin-bottom: var(--spacing-8);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  text-wrap: balance;
}

.c-testimonial__name {
  font-family: var(--font-heading);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-heading);
  line-height: var(--line-height-sm);
  font-stretch: semi-expanded;
}

.c-testimonial__service {
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  color: var(--color-text-subtle);
}

/* --------------------------------------------------------------------------
   13. Location
   -------------------------------------------------------------------------- */

.c-location__details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-8);
  padding-top: var(--spacing-16);
  padding-bottom: var(--spacing-32);
  text-align: center;
}

.c-location__fresha {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding-top: var(--spacing-8);
  font-size: var(--font-size-xs);
  line-height: var(--line-height-sm);
  color: var(--color-text-subtle-green);
}

.c-location__fresha svg {
  margin-bottom: 1px;
  fill: var(--color-text-green);
}

/* --------------------------------------------------------------------------
   14. Instagram
   -------------------------------------------------------------------------- */

.c-instagram__handle {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-color 150ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .c-instagram__handle:hover {
    text-decoration-color: currentColor;
  }
}

.c-instagram__handle:focus-visible {
  text-decoration-color: currentColor;
}

.c-instagram__heading {
  padding-bottom: var(--spacing-32);
  text-align: center;
}

/* Behold renders the feed into a closed shadow root and sizes it from its own
   grid settings, so the element is 0px tall until the feed arrives and the
   footer would jump when it does. The ratio below reserves that height.

   Its grid gaps are fixed pixels while the tiles scale, so the height it
   settles at is not proportional to its width: measured 1.2784 at 393px wide
   and 1.2289 at 1024px. 1.22 is below both, which over-reserves by a few
   pixels of ground rather than under-reserving — the widget sets its own
   overflow: hidden, so anything short is silently clipped. */
.c-instagram__embed {
  display: block;
  width: 100%;
  aspect-ratio: 1.22;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.c-footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-64) var(--spacing-16) var(--spacing-12);
}

.c-footer__links {
  display: flex;
  gap: var(--spacing-16);
}

.c-footer__link {
  /* Credit is a <button>; strip it back to match the links beside it. */
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: text-decoration-color 150ms ease;
  /* The line box alone is a 24px target, the bare minimum, on the part of
     the page most often tapped with a thumb. Padding grows it to 40px; the
     negative margin gives the space back so nothing moves. */
  padding: var(--spacing-8) 0;
  margin-block: calc(-1 * var(--spacing-8));
}

@media (hover: hover) and (pointer: fine) {
  .c-footer__link:hover {
    text-decoration-color: currentColor;
  }
}

.c-footer__link:focus-visible {
  text-decoration-color: currentColor;
}

/* -- Credit toggletip --------------------------------------------------------
   Opened by the footer's Credit button and anchored above it with CSS anchor
   positioning. Without anchor support it keeps the UA popover placement,
   centred in the viewport, and drops the arrow, which would point at
   nothing. Centring on the button is safe at every width: Credit sits far
   enough in from the edge that the 240px box clears the 16px gutter even at
   320px. The motion follows shadcn's tooltip: a short fade and a 95% scale
   from the arrow, rising 2px into place, on a stronger ease-out curve.
   -------------------------------------------------------------------------- */

.c-footer__link[popovertarget] {
  anchor-name: --credit;
  transition:
    text-decoration-color 150ms ease,
    transform 160ms ease-out;
}

/* Credit is the one footer item that keeps you on the page, so it's the one
   that needs to show the press was heard. */
.c-footer__link[popovertarget]:active {
  transform: scale(0.97);
}

/* Hold the underline while the tooltip is open, tying the two together. */
.c-footer:has(.c-tooltip:popover-open) .c-footer__link[popovertarget] {
  text-decoration-color: currentColor;
}

.c-tooltip {
  width: 240px;
  max-width: calc(100vw - 2 * var(--spacing-16));
  padding: var(--spacing-12);
  border: 0;
  border-radius: var(--radius-sm);
  overflow: visible;
  background-color: var(--color-background-jet);
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  opacity: 0;
  transform: translateY(2px) scale(0.95);
  /* This duration is the close; :popover-open sets the open. Closing is
     quicker, because by then attention has already moved on. */
  transition-property: opacity, transform, overlay, display;
  transition-duration: 100ms;
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
  transition-behavior: allow-discrete;
}

@supports (anchor-name: --a) {
  .c-tooltip {
    position-anchor: --credit;
    inset: auto;
    margin: 0;
    /* The 10px arrow plus 4px of air above the text, less the 8px of tap
       padding that sits above the text inside the anchor box. */
    bottom: calc(anchor(top) + 14px - var(--spacing-8));
    justify-self: anchor-center;
    /* Scale from the arrow's tip, 10px below the box, so it grows out of
       the button. The unanchored fallback keeps the centre origin. */
    transform-origin: 50% calc(100% + 10px);
  }
}

.c-tooltip:popover-open {
  opacity: 1;
  transform: none;
  transition-duration: 150ms;
}

@starting-style {
  .c-tooltip:popover-open {
    opacity: 0;
    transform: translateY(2px) scale(0.95);
  }
}

/* Links sit inside running text on the jet ground, so unlike the footer's they
   stay underlined — colour alone can't mark them out. */
.c-tooltip__link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* The arrow: a 16×10 triangle hanging off the bottom edge. It starts 1px up
   inside the body, so the two overlap. Butting them edge to edge leaves a
   hairline seam wherever the edge lands on a fractional pixel, which the
   wrapped text and the scale-in make likely. */
.c-tooltip::after {
  content: none;
  position: absolute;
  top: calc(100% - 1px);
  left: 50%;
  width: 16px;
  height: 11px;
  translate: -50% 0;
  background-color: inherit;
  clip-path: polygon(0 0, 100% 0, 100% 1px, 50% 100%, 0 1px);
}

@supports (anchor-name: --a) {
  .c-tooltip::after {
    content: "";
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-tooltip {
    transform: none;
    transition-property: opacity, overlay, display;
  }

  @starting-style {
    .c-tooltip:popover-open {
      transform: none;
    }
  }
}

/* ==========================================================================
   Desktop — 12 columns
   ========================================================================== */

@media (min-width: 600px) and (max-width: 1023.98px) {
  .l-panel {
    gap: var(--spacing-32);
    padding: var(--spacing-32);
  }

  .c-gallery--six {
    grid-template-columns: repeat(3, 1fr);
  }

  /* -- About: portrait | quote, with the services below ----------------- */

  .c-about {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--spacing-16);
  }

  .c-about__quote {
    align-self: center;
  }

  .c-services {
    grid-column: 1 / -1;
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .l-panel {
    padding-block: var(--spacing-64);
  }

  .s-inverse--deep {
    padding-block: var(--spacing-64);
  }

  .l-panel--split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: var(--spacing-16);
    align-items: center;
  }

  .c-gallery--four {
    grid-template-columns: repeat(4, 1fr);
  }

  .c-testimonials {
    grid-template-columns: repeat(2, 1fr);
  }

  .c-gallery--six {
    grid-template-columns: repeat(6, 1fr);
  }

  .c-prose {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
  }

  .c-prose__heading {
    grid-column: 1 / span 4;
  }

  .c-prose__body {
    grid-column: 5 / span 8;
  }
}

@media (min-width: 1024px) {
  .l-main {
    gap: var(--spacing-96);
    max-width: 1512px;
    margin-inline: auto;
    padding: var(--spacing-96) var(--spacing-32) var(--spacing-48);
  }

  .l-main > * {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--spacing-32);
    align-items: start;
  }

  .l-panel {
    padding: var(--spacing-64) 0;
  }

  .s-inverse--deep {
    padding-block: var(--spacing-64);
  }

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

  .c-header {
    max-width: 1512px;
    margin-inline: auto;
    padding: var(--spacing-12) var(--spacing-32);
  }

  .c-header__rest {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }

  /* -- Hero ------------------------------------------------------------- */

  .c-hero__title {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-lg);
    padding-bottom: var(--spacing-24);
  }

  /* -- Introduction ----------------------------------------------------- */

  .c-intro {
    grid-column: 3 / span 8;
  }

  /* -- About: quote | portrait | services ------------------------------- */

  /* Explicit rows: the DOM order is the mobile order (portrait, quote,
     services), and the quote sits to the LEFT of the portrait on desktop,
     which sparse auto-placement would otherwise push onto a second row. */
  .c-about__portrait,
  .c-about__quote,
  .c-services {
    grid-row: 1;
  }

  .c-about__portrait {
    grid-column: 5 / span 4;
  }

  .c-about__quote {
    grid-column: 1 / span 4;
    align-self: center;
    gap: var(--spacing-16);
    padding-block: var(--spacing-16);
  }

  .c-services {
    grid-column: 9 / span 4;
    align-self: center;
  }

  /* -- Results and Behind the scenes ------------------------------------ */

  .c-section__heading--centred {
    grid-column: 5 / span 4;
    padding-bottom: var(--spacing-16);
    text-align: center;
  }

  .c-about__quote,
  .c-services,
  .c-prose__body,
  .c-panel__content {
    min-width: 0;
  }

  .c-gallery {
    grid-column: 1 / -1;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-32);
  }

  /* Results: six across on one row, where BTS keeps its four. */
  .c-gallery--six {
    grid-template-columns: repeat(6, 1fr);
  }

  /* -- Two-column prose: heading in cols 3–5, body in cols 6–9 ---------- */

  .c-prose__heading {
    grid-column: 3 / span 3;
  }

  /* Five columns here rather than four: between --breakpoint-lg and -xl the
     grid is tight, and the extra column buys the body copy a usable measure.
     It drops back to four at -xl, matching the design. */
  .c-prose__body {
    grid-column: 6 / span 5;
  }

  /* -- Story and Location: image and text side by side ------------------ */

  .c-panel__media,
  .c-panel__content {
    grid-row: 1;
  }

  .c-panel__media {
    grid-column: 2 / span 5;
  }

  .c-panel__content {
    grid-column: 7 / span 5;
    align-self: center;
  }

  .m-image--salon {
    aspect-ratio: 3 / 2;
  }

  /* -- Testimonials ----------------------------------------------------- */

  .c-testimonials {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-32);
  }

  .c-testimonial {
    padding-top: var(--spacing-16);
  }

  /* -- Instagram -------------------------------------------------------- */

  .c-instagram {
    grid-column: 4 / span 6;
  }

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

  .c-footer {
    max-width: 1512px;
    margin-inline: auto;
    padding: var(--spacing-96) var(--spacing-32) var(--spacing-12);
  }
}

/* ==========================================================================
   --breakpoint-xl
   ========================================================================== */

@media (min-width: 1280px) {

  .c-intro {
    font-size: var(--font-size-xl);
    line-height: var(--line-height-xl);
    letter-spacing: -0.002em;
  }

  .l-panel {
    padding-block: var(--spacing-96);
  }

  .s-inverse--deep {
    padding-block: var(--spacing-96);
  }

  .c-about__quote {
    padding-inline: var(--spacing-32);
  }

  .c-testimonial__quote {
    margin-inline: var(--spacing-48);
  }

  .c-prose__heading {
    padding-right: var(--spacing-16);
  }

  .c-prose__body {
    grid-column: 6 / span 4;
  }

  .c-panel__content--narrow {
    grid-column: 7 / span 4;
  }

  .c-hero__image {
    aspect-ratio: 2 / 1;
  }
}