/* ═══════════════════════════════════════════════════════
   ABOUT PAGE — Page-Specific Styles
   ═══════════════════════════════════════════════════════ */

/* ── 1. Hero ───────────────────────────────────────── */
.about-hero {
  position: relative;
  height: 62vh;          /* was 90vh; 10 Sept review: match the service pages */
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.about-hero__bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.about-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-hero__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(
    to top,
    rgba(35, 31, 32, 0.85) 0%,
    rgba(35, 31, 32, 0.35) 45%,
    rgba(35, 31, 32, 0.15) 100%
  );
}

.about-hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
}

.about-hero__heading {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 2.6486vw, 3.1775rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
  color: #fff;
  max-width: 900px;
  margin: 0 auto;
}

.about-hero__heading em {
  font-style: italic;
  font-weight: 400;
}

/* ── 2. About intro ────────────────────────────────── */
.about-intro__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(3rem, 4.92vw, 4.92rem);
  align-items: start;
}
.about-intro__desc {
  font-size: clamp(1.0625rem, 1.1103vw, 1.3325rem);
  line-height: 1.5;
  color: var(--color-text);
  margin-bottom: 1.25rem;
  /* 26 Sept: left-aligned at Victor's request — the mockup had it justified */
  text-align: left;
  text-wrap: pretty;
}

.about-intro__desc:last-of-type {
  margin-bottom: 2rem;
}

.about-intro__img {
  aspect-ratio: 3/4;
  overflow: hidden;
  border-radius: 4px;
  position: sticky;
  top: 140px;
}

/* ── 3. In a nutshell ──────────────────────────────────
   30 Sept: the whole section used to be dark, so when the heading moved out of
   the picture on 29 September it landed on black — which is not how any other
   section label on the site reads. The dark treatment now belongs to the grid
   alone, so "In A Nutshell" sits on the page's own background above it, exactly
   like every other section label, and the picture and facts keep their dark
   panel below.

   The panel still runs the full width of the viewport. `50% - 50vw` pulls it out
   of the centred container, and the side padding puts its contents back in line
   with the container's own content edge on wide screens. */
.about-facts {
  background: var(--color-bg);
  color: var(--color-text);
}

/* styles.css groups .about-facts .section-label with the labels that sit on dark
   panels and forces them white — correct while this whole section was dark, wrong
   now that the label sits on the page background. about.css loads after the base
   stylesheet, so the same specificity wins here. The entry should come out of that
   group in styles.css next time the base stylesheet is rebuilt for another reason;
   doing it for this alone would mean repointing all seventeen pages. */
.about-facts .section-label {
  color: var(--color-copper);
}

.about-facts .section-label::before {
  background: var(--color-copper);
}

.about-facts__grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(2.5rem, 4.1vw, 3.28rem);
  align-items: start;
  margin-top: clamp(2rem, 3.28vw, 2.46rem);
  background: var(--color-dark);
  color: #fff;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(2.5rem, 4.1vw, 3.28rem)
           max(var(--gutter), calc(50vw - (var(--container) / 2) + var(--gutter)));
}

.about-facts__img {
  aspect-ratio: 4/3.4;
  overflow: hidden;
  border-radius: 4px;
}

.about-facts__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.about-facts__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2.25rem 2rem;
}

/* 25 Sept: the mockup sets each fact as a cream disc with a dark glyph, with
   the text beside it rather than underneath. */
.about-fact {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1.1rem;
}

.about-fact__icon,
.about-fact__number {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-bg);
  color: var(--color-dark);
}

.about-fact__icon {
  padding: 14px;
  box-sizing: border-box;
}

.about-fact__number {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1;
}

.about-fact__title {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 0.943vw, 1.1275rem);
  font-weight: 400;
  margin-bottom: 0.4rem;
  color: #fff;
  line-height: 1.4;
}

.about-fact__desc {
  font-size: clamp(1rem, 0.943vw, 1.1275rem);
  line-height: 1.4;
  color: #fff;
}

.about-facts__brand {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: clamp(2.5rem, 4.1vw, 3.28rem);
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.about-facts__brand-name {
  font-family: var(--font-serif);
  font-size: 1.23rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.about-facts__brand-desc {
  font-size: 0.984rem;
  color: var(--color-text-muted-on-dark);
  line-height: 1.5;
}

/* ── 4. Values ─────────────────────────────────────── */
.about-values__words {
  margin-bottom: clamp(3rem, 4.92vw, 4.1rem);
}

.about-values__word-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.1rem 0;
}

.about-values__word {
  font-family: var(--font-serif);
  font-size: clamp(3rem, 5.1414vw, 6.15rem);
  font-weight: 400;
  line-height: 0.9;     /* 10 Sept review: tighter */
}

.about-values__tag {
  display: inline-block;
  font-size: 0.9225rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  /* 25 Sept: the mockup fills these solid copper with white text. They were
     the other way round — copper text on a sand chip with a hairline border. */
  color: #fff;
  background: var(--color-copper);
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  white-space: nowrap;
}

/* 25 Sept: the mockup draws a full box around this table, not just rules
   between the rows. */
.about-values__table {
  border: 1px solid var(--color-border);
}

.about-values__row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(2rem, 3.28vw, 3.28rem);
  padding: 2rem clamp(1.5rem, 2.6vw, 2.5rem);
  border-bottom: 1px solid var(--color-border);
}

.about-values__label {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.7958vw, 2.1525rem);
  font-weight: 400;
  line-height: 1.1;
}
.about-values__desc {
  font-size: clamp(1.0625rem, 1.1103vw, 1.3325rem);
  line-height: 1.45;
  color: var(--color-text);
  max-width: 720px;
}

/* ── 5. Directors (dark) ───────────────────────────── */
.about-directors {
  background: var(--color-dark);
  color: #fff;
}

.about-directors .section-label {
  color: var(--color-copper-light);
}

.about-directors .section-label::before {
  background: var(--color-copper-light);
}

.about-directors__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.46vw, 2.05rem);
  margin-top: clamp(2rem, 3.28vw, 2.46rem);
}

.about-director {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.about-director__img {
  width: 100%;
  aspect-ratio: 3/3.4;
  overflow: hidden;
  filter: grayscale(100%);
}

/* Copper name plate sits flush under the portrait, as in the mockup */
.about-director__plate {
  width: 100%;
  background: var(--color-copper);
  padding: 0.875rem 1rem;
  margin-bottom: 1.25rem;
}

.about-director__name {
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.05vw, 1.25rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1.15;
}

/* 1 Oct: the role was set at the same size as the name, so on the plate the two
   lines carried equal weight and read as one block - "it is fighting with the
   Name". Dropped to roughly three quarters of the name and muted a little more,
   so the name leads and the role sits under it. */
.about-director__role {
  display: block;
  font-size: clamp(0.78rem, 0.8vw, 0.95rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 0.15rem;
  line-height: 1.2;
}
.about-directors .btn--outline {
  background: rgba(255, 255, 255, 0);
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.about-directors .btn--outline::before {
  background: var(--color-copper);
}

.about-directors .btn--outline:hover {
  border-color: var(--color-copper);
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 1024px) {
  .about-intro__grid {
    grid-template-columns: 1fr;
  }

  .about-intro__img {
    position: static;
    max-width: 460px;
  }

  .about-facts__grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 768px) {
  .about-facts__list {
    grid-template-columns: 1fr;
  }

  .about-values__row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .about-directors__grid {
    grid-template-columns: 1fr;
  }

  .about-values__word-row {
    flex-wrap: wrap;
  }
}

/* 30 Sept: the Morris & Co mark was set as styled text rather than the real
   wordmark, so it did not match the brand. It is now the supplied logo, knocked
   out to white on a transparent background so it sits on the dark facts panel.
   The global `img { height: 100% }` has to be overridden or it stretches. */
/* 30 Sept: this was 84px wide against the 56px icons beside it, so the Morris & Co
   row's copy started 28px further right than every other row and the text column
   stopped lining up. It now takes the same 56x56 slot as .about-fact__icon, with
   the wordmark contained inside it and pinned left, so all seven rows share one
   text edge. */
img.about-fact__brandmark {
  width: 56px;
  height: 56px;
  object-fit: contain;
  object-position: left center;
  display: block;
  flex: 0 0 auto;
}

/* Morris & Co sits inside the facts grid in the mockup, as its own wordmark */
.about-fact__brandmark {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.7056vw, 2.05rem);
  font-weight: 700;
  line-height: 0.85;
  color: #fff;
  flex: 0 0 auto;
  width: 56px;
  text-align: left;
  letter-spacing: 0.01em;
}

/* last fact runs full width under the two columns */
.about-fact--wide { grid-column: 1 / -1; }


/* ═══════════════════════════════════════════════════════
   25 Sept: In a Nutshell, matched to the mockup.

   The mockup runs the photograph hard against the left edge of the page and
   fills the full height of the dark band, so the image and the panel read as
   two halves rather than a thumbnail floating on a dark field. The label sits
   over the top-left of the photograph. Below 1025px the band stacks and the
   ordinary container padding applies again.
   ═══════════════════════════════════════════════════════ */
@media (min-width: 1025px) {
  .about-facts {
    position: relative;
    overflow: hidden;
    padding: 0;
  }

  .about-facts > .container {
    max-width: none;
    padding: 0;
  }

  /* 28 Sept: the label used to sit absolutely over the photograph. Victor asked
     for it above the picture instead. The section is full-bleed here and its
     container has no padding, so the label carries its own gutter. */
  .about-facts {
    padding-top: clamp(3rem, 4.6vw, 4.5rem);
  }

  .about-facts .section-label {
    position: static;
    margin: 0 0 clamp(1.6rem, 2.6vw, 2.4rem);
    padding-left: var(--gutter);
  }

  /* The section is already full-bleed here and its container carries no padding,
     so the grid needs neither the pull-out nor the side padding it uses further
     down. The photograph runs to the left edge and the facts list brings its own. */
  .about-facts__grid {
    grid-template-columns: 47% 1fr;
    gap: 0;
    align-items: stretch;
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }

  .about-facts__img {
    aspect-ratio: auto;
    border-radius: 0;
    min-height: 620px;
    height: 100%;
  }

  .about-facts__list {
    align-content: center;
    padding: clamp(3rem, 5vw, 4.5rem) clamp(2.5rem, 4.6vw, 4rem);
    gap: clamp(1.8rem, 2.6vw, 2.5rem) clamp(1.5rem, 2.6vw, 2.5rem);
  }
}