/* ============================================================
   MITTE BÜRO – BRAND WORK PROJECTS

   NAVIGATION
   ------------------------------------------------------------
   [00] PROJECT OVERLAY
   [01] TOP GRAPHICS
   [02] PROJECT CANVAS
   [03] PLACED ELEMENTS
   [04] PROJECT TYPOGRAPHY
   [05] VISUAL GROUPS
   [06] SINGLE-IMAGE CLOSE-UP
   [07] PROJECT FOOTER
   [08] DESKTOP
   [09] DESKTOP HOVER
   [10] REDUCED MOTION
   ============================================================ */


/* ============================================================
   [00] PROJECT OVERLAY
   ============================================================ */

.brand-project-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    1200;

  width:
    100%;

  height:
    100dvh;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  background:
    var(--paper);

  color:
    var(--ink);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  overscroll-behavior:
    contain;

  -webkit-overflow-scrolling:
    touch;

  transition:
    opacity 0.32s ease,
    visibility 0s linear 0.32s;
}


.brand-project-overlay.is-open {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transition:
    opacity 0.32s ease,
    visibility 0s linear 0s;
}


body.brand-project-is-open {
  overflow:
    hidden;
}


/* ============================================================
   [01] TOP GRAPHICS
   ============================================================ */

.brand-project__topbar {
  position:
    absolute;

  top:
    0;

  right:
    0;

  left:
    0;

  z-index:
    100;

  width:
    100%;

  height:
    64px;

  pointer-events:
    none;
}


.brand-project__back,
.brand-project__rights {
  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    var(--micro-font-size);

  font-weight:
    800;

  line-height:
    var(--micro-line-height);

  letter-spacing:
    0.04em;

  -webkit-text-stroke:
    0;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


/* ------------------------------------------------------------
   BACK

   Persistent independently from project content.

   JS fades it only while the opening paragraph
   physically enters its collision area.
   ------------------------------------------------------------ */

.brand-project__back {
  position:
    fixed;

  top:
    28px;

  left:
    var(--side);

  z-index:
    1250;

  display:
    block;

  margin:
    0;

  padding:
    0;

  border:
    0;

  outline:
    none;

  background:
    transparent;

  color:
    var(--ink);

  opacity:
    1;

  pointer-events:
    auto;

  cursor:
    pointer;

  appearance:
    none;

  -webkit-appearance:
    none;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    opacity 0.16s linear,
    color 0.16s ease;
}


.brand-project__back.is-colliding {
  opacity:
    0;

  pointer-events:
    none;
}


.brand-project__back:focus:not(:focus-visible) {
  outline:
    none;
}


/* ------------------------------------------------------------
   ALL RIGHTS RESERVED

   Opening-page micrographic only.
   Scrolls away naturally with the project.
   ------------------------------------------------------------ */

.brand-project__rights {
  position:
    absolute;

  top:
    28px;

  right:
    var(--side);

  z-index:
    2;

  display:
    block;

  color:
    var(--ink);

  pointer-events:
    none;
}


/* ============================================================
   [02] PROJECT CANVAS

   Mobile height comes from projects.js for the active project.
   It follows the lowest image group, including internal rows.

   JS includes the spacing controls below in that calculation.
   Do not add them to the height a second time here.

   Desktop switches to its own height variable in ].
   ============================================================ */

.brand-project__canvas {
  --project-mobile-after-intro-gap:
    40px;

  --project-mobile-before-footer-gap:
    32px;

  position:
    relative;

  width:
    100%;

  height:
    var(
      --project-mobile-canvas-height,
      100dvh
    );

  min-height:
    100dvh;

  overflow:
    visible;
}


/* ============================================================
   [03] PLACED ELEMENTS

   BASE = MOBILE.

   Every placed element receives the same vertical offset,
   except the opening intro.

   Original coordinates and four-column geometry stay intact.

   Desktop replaces the top coordinates in ], so this
   mobile offset does not affect the desktop composition.
   ============================================================ */

.brand-project__placed {
  --project-mobile-flow-offset:
    var(--project-mobile-after-intro-gap, 0px);

  position:
    absolute;

  left:
    var(--project-mobile-left);

  top:
    calc(
      var(--project-mobile-top) +
      var(--project-mobile-flow-offset)
    );

  width:
    var(
      --project-mobile-width,
      max-content
    );

  max-width:
    calc(
      100vw -
      var(--side)
    );

  margin:
    0;

  box-sizing:
    border-box;
}


/* ------------------------------------------------------------
   Keep the opening intro in its original position.
   ------------------------------------------------------------ */

.brand-project__intro {
  --project-mobile-flow-offset:
    0px;
}


/* ------------------------------------------------------------
   MOBILE PLACEMENT SAFETY

   Preserve the four-column geometry and apply the same
   vertical offset to both images and section text.
   ------------------------------------------------------------ */

@media (max-width: 799px) {

  .brand-project__placed {
    left:
      var(--project-mobile-left) !important;

    top:
      calc(
        var(--project-mobile-top) +
        var(--project-mobile-flow-offset)
      ) !important;

    width:
      var(
        --project-mobile-width,
        max-content
      ) !important;
  }


  .brand-project__text-block {
    left:
      var(--project-mobile-left) !important;

    top:
      calc(
        var(--project-mobile-top) +
        var(--project-mobile-flow-offset)
      ) !important;

    width:
      var(
        --project-mobile-width,
        max-content
      ) !important;
  }

}

/* ============================================================
   [04] PROJECT TYPOGRAPHY

   Shared across every Brand Work case:

   - Vertical
   - Dr. Kia
   - all future projects

   BODY / EDITORIAL
   Barlow Semi Condensed

   SECTION HEADINGS
   Barlow Condensed

   MICROGRAPHICS
   Barlow Semi Condensed
   ============================================================ */


/* ------------------------------------------------------------
   MICROGRAPHICS

   Shared by:
   - image numbers
   - image captions
   - project footer
   - detail labels
   - credit labels
   ------------------------------------------------------------ */

.brand-project__number,
.brand-project__caption,
.brand-project__footer,
.brand-project__detail-label,
.brand-project__credit-label {
  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    var(--micro-font-size);

  font-weight:
    800;

  line-height:
    var(--micro-line-height);

  letter-spacing:
    0.04em;

  -webkit-text-stroke:
    0;

  text-transform:
    uppercase;
}


/* ------------------------------------------------------------
   SHARED EDITORIAL BODY

   Applies to all cases.

   The compact 16/15 line-height ratio follows the new
   case-study typography shown in the Kia mockup.
   ------------------------------------------------------------ */

.brand-project__intro,
.brand-project__section-copy,
.brand-project__editorial-copy {
  min-width:
    0;

  box-sizing:
    border-box;

  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    var(--body-font-size);

  font-weight:
    800;

  line-height:
    1.0667;

  letter-spacing:
    0.04em;

  -webkit-text-stroke:
    0;

  text-transform:
    none;
}


/* ------------------------------------------------------------
   EDITORIAL PARAGRAPHS
   ------------------------------------------------------------ */

.brand-project__intro p,
.brand-project__section-copy p,
.brand-project__editorial-copy p {
  width:
    100%;

  max-width:
    100%;

  margin:
    0;

  padding:
    0;

  text-align:
    justify;

  text-align-last:
    left;

  text-justify:
    inter-word;

  text-wrap:
    pretty;
}


/*
  Multi-paragraph rhythm.

  Single-paragraph Vertical blocks remain unaffected.
*/

.brand-project__intro p + p,
.brand-project__section-copy p + p,
.brand-project__editorial-copy p + p {
  margin-top:
    10px;
}


/* ------------------------------------------------------------
   SECTION HEADINGS

   Mobile:
   24px

   Desktop:
   22px, scaled by [08]

   Distance to the following body copy remains controlled by
   the individual coordinates in projects.js.
   ------------------------------------------------------------ */

.brand-project__section-title {
  min-width:
    0;

  margin:
    0;

  padding:
    0;

  box-sizing:
    border-box;

  font-family:
    "Barlow Condensed",
    sans-serif;

  font-size:
    24px;

  font-weight:
    800;

  line-height:
    1;

  letter-spacing:
    0.04em;

  -webkit-text-stroke:
    0.4px
    var(--ink);

  text-transform:
    uppercase;

  white-space:
    nowrap;
}


/* ------------------------------------------------------------
   PROJECT DETAILS

   CLIENT
   Dr. Kia D.H.

   Labels use the shared micrographic treatment.
   Values use the shared editorial body type.
   ------------------------------------------------------------ */

.brand-project__detail {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    4px;

  min-width:
    0;

  margin:
    0;

  padding:
    0;

  box-sizing:
    border-box;

  color:
    var(--ink);
}


.brand-project__detail-label {
  display:
    block;

  width:
    max-content;

  max-width:
    100%;

  margin:
    0;

  padding:
    0;

  white-space:
    nowrap;
}


.brand-project__detail-value {
  display:
    block;

  width:
    max-content;

  max-width:
    100%;

  margin:
    0;

  padding:
    0;

  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    var(--body-font-size);

  font-weight:
    800;

  line-height:
    1.0667;

  letter-spacing:
    0.04em;

  -webkit-text-stroke:
    0;

  text-transform:
    none;

  white-space:
    nowrap;
}


/* ------------------------------------------------------------
   PROJECT CREDITS

   PROJECT LEAD
   Dima S.

   WITH SUPPORT OF
   Babe
   ------------------------------------------------------------ */

.brand-project__credit {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    4px;

  min-width:
    0;

  margin:
    0;

  padding:
    0;

  box-sizing:
    border-box;

  color:
    var(--ink);
}


.brand-project__credit-label {
  display:
    block;

  width:
    max-content;

  max-width:
    100%;

  margin:
    0;

  padding:
    0;

  white-space:
    nowrap;
}


.brand-project__credit-value {
  display:
    block;

  width:
    max-content;

  max-width:
    100%;

  margin:
    0;

  padding:
    0;

  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    var(--body-font-size);

  font-weight:
    800;

  line-height:
    1.0667;

  letter-spacing:
    0.04em;

  -webkit-text-stroke:
    0;

  text-transform:
    none;

  white-space:
    nowrap;
}


/* ------------------------------------------------------------
   CLOSING CTA

   Has your work outgrown
   the way it shows up?

   Email us
   ------------------------------------------------------------ */

.brand-project__cta {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    16px;

  min-width:
    0;

  margin:
    0;

  padding:
    0;

  box-sizing:
    border-box;

  color:
    var(--ink);
}


.brand-project__cta-headline {
  width:
    100%;

  max-width:
    100%;

  margin:
    0;

  padding:
    0;

  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    24px;

  font-weight:
    800;

  line-height:
    1.05;

  letter-spacing:
    0.04em;

  -webkit-text-stroke:
    0;

  text-transform:
    none;

  text-wrap:
    pretty;
}


.brand-project__cta-link,
.brand-project__cta-link:visited {
  display:
    block;

  width:
    max-content;

  margin:
    0;

  padding:
    0;

  color:
    var(--ink);

  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    var(--body-font-size);

  font-weight:
    800;

  line-height:
    1.0667;

  letter-spacing:
    0.04em;

  -webkit-text-stroke:
    0;

  text-decoration:
    none;

  text-transform:
    none;

  white-space:
    nowrap;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    color 0.16s ease;
}


/* ------------------------------------------------------------
   MOBILE TEXT RIGHT-EDGE SAFETY

   Every shared text-block type respects the standard mobile
   right gutter, including metadata and closing content.
   ------------------------------------------------------------ */

@media (max-width: 799px) {

  .brand-project__text-block {
    max-width:
      calc(
        100vw -
        var(--side) -
        var(--project-mobile-left)
      ) !important;
  }

}

/* ============================================================
   [05] VISUAL GROUPS

   Shared by all projects.

   Outer mobile placement follows the four-column grid in JS.
   Internal columns and image order also come from project data.

   Desktop overrides those variables in ].
   ============================================================ */

.brand-project__group {
  min-width:
    0;

  margin:
    0;

  padding:
    0;

  box-sizing:
    border-box;

  overflow:
    visible;
}


/* ------------------------------------------------------------
   Number

   number → image = 6px
   ------------------------------------------------------------ */

.brand-project__number {
  display:
    block;

  width:
    max-content;

  margin:
    0 0 6px;

  padding:
    0;

  white-space:
    nowrap;
}


/* ------------------------------------------------------------
   Image grid — MOBILE

   Outer width comes from the group's column/span placement.
   Internal columns and gaps come from its mobile grid settings.

   The older column variable remains as a fallback.
   ------------------------------------------------------------ */

.brand-project__visual {
  display:
    grid;

  grid-template-columns:
    repeat(
      var(
        --project-mobile-columns,
        var(--project-group-columns, 1)
      ),
      minmax(0, 1fr)
    );

  gap:
    var(--project-mobile-gap);

  width:
    100%;

  min-width:
    0;

  margin:
    0;

  padding:
    0;

  box-sizing:
    border-box;
}


/* ------------------------------------------------------------
   Clickable individual image

   Mobile image order comes from JS.
   Desktop applies its own order in ].
   ------------------------------------------------------------ */

.brand-project__image-button {
  display:
    block;

  order:
    var(--project-mobile-image-order, 0);

  width:
    100%;

  min-width:
    0;

  height:
    auto;

  aspect-ratio:
    1 / 1;

  margin:
    0;

  padding:
    0;

  border:
    0;

  outline:
    none;

  overflow:
    hidden;

  box-sizing:
    border-box;

  background:
    transparent;

  cursor:
    zoom-in;

  appearance:
    none;

  -webkit-appearance:
    none;

  -webkit-tap-highlight-color:
    transparent;
}


.brand-project__image-button:focus:not(:focus-visible) {
  outline:
    none;
}


.brand-project__image {
  display:
    block;

  width:
    100%;

  height:
    100%;

  aspect-ratio:
    1 / 1;

  margin:
    0;

  padding:
    0;

  border:
    0;

  object-fit:
    cover;

  object-position:
    center;

  background:
    var(--paper);

  opacity:
    1;

  transform:
    scale(1);

  transform-origin:
    center;

  user-select:
    none;

  -webkit-user-drag:
    none;

  transition:
    opacity 0.16s ease,
    transform 0.16s ease;
}


/* ------------------------------------------------------------
   Descriptor

   image → descriptor = 8px

   Mobile = visible.
   Desktop hover behavior lives in [09].
   ------------------------------------------------------------ */

.brand-project__caption {
  display:
    block;

  width:
    max-content;

  max-width:
    none;

  margin:
    8px 0 0;

  padding:
    0;

  color:
    var(--ink);

  white-space:
    nowrap;

  opacity:
    1;

  pointer-events:
    none;

  transition:
    opacity 0.14s ease;
}

/* ============================================================
   [06] SINGLE-IMAGE CLOSE-UP

   Vertical close-up deliberately has:

   NO arrows
   NO swipe
   NO image sequence

   Click exact asset → inspect → close → return to grid.
   ============================================================ */

.brand-project-lightbox {
  position:
    fixed;

  inset:
    0;

  z-index:
    1300;

  width:
    100%;

  height:
    100dvh;

  overflow:
    hidden;

  background:
    var(--paper);

  color:
    var(--ink);

  opacity:
    0;

  visibility:
    hidden;

  pointer-events:
    none;

  transition:
    opacity 0.18s ease,
    visibility 0s linear 0.18s;
}


.brand-project-lightbox.is-open {
  opacity:
    1;

  visibility:
    visible;

  pointer-events:
    auto;

  transition:
    opacity 0.18s ease,
    visibility 0s linear 0s;
}


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

.brand-project-lightbox__header {
  position:
    absolute;

  top:
    0;

  right:
    0;

  left:
    0;

  z-index:
    30;

  height:
    72px;

  background:
    var(--paper);
}


/* ------------------------------------------------------------
   Full project + asset descriptor

   Example:
   MITTE BÜRO // VERTICAL TYPOGRAPHY EXPLORATIONS
   ------------------------------------------------------------ */

.brand-project-lightbox__label {
  position:
    absolute;

  top:
    28px;

  left:
    var(--side);

  max-width:
    calc(
      100% -
      var(--side) -
      58px
    );

  overflow:
    hidden;

  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    var(--micro-font-size);

  font-weight:
    800;

  line-height:
    var(--micro-line-height);

  letter-spacing:
    0.04em;

  -webkit-text-stroke:
    0;

  text-transform:
    uppercase;

  white-space:
    nowrap;

  text-overflow:
    clip;
}


/* ------------------------------------------------------------
   Close cross
   ------------------------------------------------------------ */

.brand-project-lightbox__close {
  position:
    absolute;

  top:
    21px;

  right:
    var(--side);

  z-index:
    31;

  width:
    24px;

  height:
    24px;

  margin:
    0;

  padding:
    0;

  border:
    0;

  outline:
    none;

  background:
    transparent;

  color:
    var(--ink);

  opacity:
    1;

  cursor:
    pointer;

  appearance:
    none;

  -webkit-appearance:
    none;

  -webkit-tap-highlight-color:
    transparent;

  transition:
    opacity 0.16s ease,
    color 0.16s ease;
}


.brand-project-lightbox__close::before,
.brand-project-lightbox__close::after {
  content:
    "";

  position:
    absolute;

  top:
    50%;

  left:
    50%;

  width:
    16px;

  height:
    2px;

  background:
    currentColor;
}


.brand-project-lightbox__close::before {
  transform:
    translate(-50%, -50%)
    rotate(45deg);
}


.brand-project-lightbox__close::after {
  transform:
    translate(-50%, -50%)
    rotate(-45deg);
}


.brand-project-lightbox__close:focus:not(:focus-visible) {
  outline:
    none;
}


/* ------------------------------------------------------------
   Stage

   The stage owns the available close-up image field.

   We deliberately do NOT give it horizontal swipe behaviour.
   ------------------------------------------------------------ */

.brand-project-lightbox__stage {
  position:
    relative;

  display:
    grid;

  place-items:
    center;

  width:
    100%;

  height:
    100%;

  padding:
    96px
    var(--side)
    150px;

  box-sizing:
    border-box;

  user-select:
    none;

  -webkit-user-select:
    none;

  -webkit-tap-highlight-color:
    transparent;
}


/* ------------------------------------------------------------
   Close-up image — MOBILE

   Restored to the larger treatment.

   The old width:auto allowed a small intrinsic image to remain
   smaller than the available stage and could make the visual
   balance look left-biased.

   Now:
   - fill available horizontal image field
   - stay inside available vertical field
   - remain square
   - remain genuinely centered
   ------------------------------------------------------------ */

.brand-project-lightbox__image {
  display:
    block;

  justify-self:
    center;

  align-self:
    center;

  width:
    min(
      100%,
      calc(
        100dvh -
        246px
      )
    );

  max-width:
    100%;

  height:
    auto;

  max-height:
    calc(
      100dvh -
      246px
    );

  aspect-ratio:
    1 / 1;

  margin:
    0
    auto;

  padding:
    0;

  border:
    0;

  box-sizing:
    border-box;

  object-fit:
    contain;

  object-position:
    center;

  opacity:
    1;

  transform:
    none;

  pointer-events:
    none;

  user-select:
    none;

  -webkit-user-drag:
    none;

  animation:
    none;

  transition:
    none;
}


/* ------------------------------------------------------------
   CLOSE-UP FOOTER

   MOBILE:
   standard three-line site footer.

   LEFT
   C/O DIMA SAMARIN >
   DATA POLICY >
   IMPRINT >

   RIGHT
   YEAR // ALL RIGHTS RESERVED
   TORSTRASSE 170, 10119 BERLIN
   COORDINATES
   ------------------------------------------------------------ */

.brand-project-lightbox__footer {
  position:
    absolute;

  right:
    var(--side);

  bottom:
    max(
      28px,
      env(safe-area-inset-bottom)
    );

  left:
    var(--side);

  z-index:
    30;

  display:
    grid;

  grid-template-columns:
    auto
    1fr;

  align-items:
    end;

  gap:
    20px;

  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    var(--micro-font-size);

  font-weight:
    800;

  line-height:
    var(--micro-line-height);

  letter-spacing:
    0.04em;

  -webkit-text-stroke:
    0;

  text-transform:
    uppercase;
}


.brand-project-lightbox__footer-left,
.brand-project-lightbox__footer-right {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  margin:
    0;

  padding:
    0;
}


.brand-project-lightbox__footer-left {
  align-items:
    flex-start;

  text-align:
    left;
}


.brand-project-lightbox__footer-right {
  align-items:
    flex-end;

  justify-self:
    end;

  text-align:
    right;
}


.brand-project-lightbox__footer a,
.brand-project-lightbox__footer a:visited {
  color:
    var(--ink);

  text-decoration:
    none;

  transition:
    color 0.16s ease;
}


.brand-project-lightbox__address-link {
  color:
    var(--ink);

  line-height:
    inherit;

  white-space:
    nowrap;

  text-decoration:
    none;
}


.brand-project-lightbox__footer-desktop {
  display:
    none;
}
/* ============================================================
   [07] PROJECT FOOTER

   MOBILE

   LEFT
   C/O DIMA SAMARIN >
   DATA POLICY >
   IMPRINT >

   RIGHT
   YEAR // ALL RIGHTS RESERVED
   TORSTRASSE 170, 10119 BERLIN
   COORDINATES

   DESKTOP

   LEFT
   DATA POLICY >
   IMPRINT >

   RIGHT
   TORSTRASSE 170
   10119 BERLIN
   ============================================================ */

.brand-project__footer {
  position:
    absolute;

  right:
    var(--side);

  bottom:
    max(
      28px,
      env(safe-area-inset-bottom)
    );

  left:
    var(--side);

  z-index:
    10;

  display:
    grid;

  grid-template-columns:
    auto
    1fr;

  align-items:
    end;

  gap:
    20px;

  width:
    auto;

  margin:
    0;

  padding:
    0;

  box-sizing:
    border-box;

  font-family:
    "Barlow Semi Condensed",
    sans-serif;

  font-size:
    var(--micro-font-size);

  font-weight:
    800;

  line-height:
    var(--micro-line-height);

  letter-spacing:
    0.04em;

  -webkit-text-stroke:
    0;

  text-transform:
    uppercase;
}


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

   Three lines on mobile.
   Exact shared site rhythm:

   line-height: 1
   gap: 5px
   ------------------------------------------------------------ */

.brand-project__footer-left,
.brand-project__footer-right {
  display:
    flex;

  flex-direction:
    column;

  gap:
    5px;

  margin:
    0;

  padding:
    0;
}


.brand-project__footer-left {
  align-items:
    flex-start;

  text-align:
    left;
}


.brand-project__footer-right {
  align-items:
    flex-end;

  justify-self:
    end;

  text-align:
    right;
}


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

.brand-project__footer a,
.brand-project__footer a:visited {
  color:
    var(--ink);

  text-decoration:
    none;

  transition:
    color 0.16s ease;
}


/* ------------------------------------------------------------
   Mobile project address

   Middle line of the three-line mobile stack:

   TORSTRASSE 170, 10119 BERLIN
   ------------------------------------------------------------ */

.brand-project__address {
  display:
    inline-block;

  width:
    max-content;

  margin:
    0;

  padding:
    0;

  color:
    var(--ink);

  line-height:
    inherit;

  text-align:
    right;

  text-decoration:
    none;

  white-space:
    nowrap;

  transition:
    color 0.16s ease;
}


.brand-project__address-street,
.brand-project__address-postcode {
  display:
    inline;
}


.brand-project__address-street::after {
  content:
    ", ";
}


/* ============================================================
   [08] DESKTOP

   Shared wide-screen scale:
   - unchanged through 1440px
   - gradual growth to 125% at 1800px
   - centered composition beyond 1800px

   Project compositions and close-ups use the same scale.
   Mobile remains unchanged.
   ============================================================ */

@media (min-width: 800px) {


  /* ----------------------------------------------------------
     PROJECT SCALE / FRAME

     No transform or zoom: fixed controls remain
     positioned relative to the viewport.
     ---------------------------------------------------------- */

  .brand-project__topbar,
  .brand-project__canvas {
    --desktop-layout-unit:
      var(--wide-unit, 1px);

    --project-desktop-field-width:
      var(--wide-frame-width, 100vw);

    --desktop-edge:
      calc(28 * var(--desktop-layout-unit));

    --body-font-size:
      calc(15 * var(--desktop-layout-unit));

    --body-stroke:
      var(--desktop-layout-unit);

    --micro-font-size:
      calc(10 * var(--desktop-layout-unit));

    width: 100%;
    max-width: var(--wide-max-width, 1800px);
    margin-left: auto;
    margin-right: auto;
  }


  /* ----------------------------------------------------------
     PROJECT TOP GRAPHICS

     BACK remains fixed.
     ALL RIGHTS RESERVED scrolls with the project.
     ---------------------------------------------------------- */

  .brand-project__topbar {
    height:
      calc(64 * var(--desktop-layout-unit));
  }


  .brand-project__back {
    top:
      var(--desktop-edge);

    left:
      calc(
        var(--wide-frame-inset, 0px) +
        var(--desktop-edge)
      );
  }


  .brand-project__rights {
    top: var(--desktop-edge);
    right: var(--desktop-edge);
  }


  /* ----------------------------------------------------------
     PROJECT CANVAS

     JS supplies the height, including scaled footer clearance.
     ---------------------------------------------------------- */

  .brand-project__canvas {
    height:
      var(--project-desktop-canvas-height, 100dvh);

    min-height:
      100dvh;
  }


  /* ----------------------------------------------------------
     IMAGE PLACEMENTS
     ---------------------------------------------------------- */

  .brand-project__placed {
    left:
      var(--project-desktop-left);

    top:
      var(--project-desktop-top);

    width:
      var(--project-desktop-width, max-content);

    max-width:
      none;
  }


  /* ----------------------------------------------------------
     TEXT PLACEMENTS
     ---------------------------------------------------------- */

  .brand-project__text-block {
    left:
      var(--project-desktop-text-left);

    top:
      var(--project-desktop-text-top);

    width:
      var(--project-desktop-text-width, max-content);

    max-width:
      none;
  }


  .brand-project__section-title {
    font-size:
      calc(22 * var(--desktop-layout-unit));

    -webkit-text-stroke:
      calc(0.4 * var(--desktop-layout-unit))
      var(--ink);
  }
  /* ----------------------------------------------------------
     DESKTOP CASE-STUDY TYPOGRAPHY

     Preserve the source-artboard rhythm while scaling the
     complete composition on wide displays.
     ---------------------------------------------------------- */

  .brand-project__intro p + p,
  .brand-project__section-copy p + p,
  .brand-project__editorial-copy p + p {
    margin-top:
      calc(
        10 *
        var(--desktop-layout-unit)
      );
  }


  .brand-project__detail,
  .brand-project__credit {
    gap:
      calc(
        4 *
        var(--desktop-layout-unit)
      );
  }


  .brand-project__cta {
    gap:
      calc(
        16 *
        var(--desktop-layout-unit)
      );
  }


  .brand-project__cta-headline {
    font-size:
      calc(
        22 *
        var(--desktop-layout-unit)
      );

    line-height:
      1.05;
  }

  /* ----------------------------------------------------------
     NUMBER / IMAGE / DESCRIPTOR SPACING
     ---------------------------------------------------------- */

  .brand-project__number {
    margin-bottom:
      calc(6 * var(--desktop-layout-unit));
  }


  .brand-project__caption {
    margin-top:
      calc(8 * var(--desktop-layout-unit));

    opacity:
      1;
  }


  /* ----------------------------------------------------------
     INTERNAL IMAGE GRID

     Includes Kia's six-column groups.
     JS supplies the responsive, scaled gaps.
     ---------------------------------------------------------- */

  .brand-project__visual {
    grid-template-columns:
      repeat(
        var(
          --project-desktop-columns,
          var(--project-group-columns, 1)
        ),
        minmax(0, 1fr)
      );

    gap:
      var(--project-desktop-gap);
  }


  /* ----------------------------------------------------------
     IMAGE ORDER

     Visual order does not change close-up image indexing.
     Hover behavior remains in [09].
     ---------------------------------------------------------- */

  .brand-project__image-button {
    order:
      var(
        --project-desktop-image-order,
        var(--project-mobile-image-order, 0)
      );
  }


  /* ----------------------------------------------------------
     PROJECT FOOTER
     ---------------------------------------------------------- */

  .brand-project__footer {
    right: var(--desktop-edge);
    bottom: var(--desktop-edge);
    left: var(--desktop-edge);

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    align-items:
      start;

    gap:
      calc(20 * var(--desktop-layout-unit));
  }


  .brand-project__footer-left,
  .brand-project__footer-right {
    gap:
      calc(5 * var(--desktop-layout-unit));
  }


  .brand-project__footer-mobile-careof,
  .brand-project__footer-mobile-rights,
  .brand-project__footer-mobile-coordinates {
    display: none;
  }


  /* ----------------------------------------------------------
     TWO-LINE PROJECT ADDRESS
     ---------------------------------------------------------- */

  .brand-project__address {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    gap:
      calc(5 * var(--desktop-layout-unit));

    width: max-content;
    margin: 0;
    padding: 0;

    line-height: var(--micro-line-height);
    white-space: normal;
  }


  .brand-project__address-street,
  .brand-project__address-postcode {
    display: block;
    margin: 0;
    padding: 0;
    line-height: inherit;
  }


  .brand-project__address-street::after {
    content: none;
  }


  /* ----------------------------------------------------------
     CLOSE-UP SCALE

     Full-screen background, centered composition.
     Same scale and image limits as the Venue Gallery.

     Remains a single-image viewer:
     no arrows, swipe or image sequence.
     ---------------------------------------------------------- */

  .brand-project-lightbox {
    --desktop-layout-unit:
      var(--wide-unit, 1px);

    --desktop-edge:
      calc(28 * var(--desktop-layout-unit));

    --micro-font-size:
      calc(10 * var(--desktop-layout-unit));
  }


  /* ----------------------------------------------------------
     CLOSE-UP HEADER
     ---------------------------------------------------------- */

  .brand-project-lightbox__header {
    width: 100%;
    max-width: var(--wide-max-width, 1800px);

    height:
      calc(72 * var(--desktop-layout-unit));

    margin-left: auto;
    margin-right: auto;
  }


  .brand-project-lightbox__label {
    top: var(--desktop-edge);
    left: var(--desktop-edge);

    max-width:
      calc(
        100% -
        var(--desktop-edge) -
        (58 * var(--desktop-layout-unit))
      );

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }


  .brand-project-lightbox__close {
    top:
      calc(
        var(--desktop-edge) -
        (7 * var(--desktop-layout-unit))
      );

    right:
      var(--desktop-edge);

    width:
      calc(24 * var(--desktop-layout-unit));

    height:
      calc(24 * var(--desktop-layout-unit));
  }


  .brand-project-lightbox__close::before,
  .brand-project-lightbox__close::after {
    width:
      calc(16 * var(--desktop-layout-unit));

    height:
      calc(2 * var(--desktop-layout-unit));
  }


  /* ----------------------------------------------------------
     CLOSE-UP IMAGE FIELD

     Side padding includes the centered frame's outer margins.

     Image size remains limited by both width and height.
     Natural proportions are preserved without cropping.
     ---------------------------------------------------------- */

  .brand-project-lightbox__stage {
    box-sizing: border-box;

    padding:
      calc(120 * var(--desktop-layout-unit))

      calc(
        var(--wide-frame-inset, 0px) +
        (100 * var(--desktop-layout-unit))
      )

      calc(110 * var(--desktop-layout-unit));
  }


  .brand-project-lightbox__image {
    width: auto;
    height: auto;
    aspect-ratio: auto;
    margin: 0 auto;

    max-width:
      min(
        100%,
        calc(0.6 * var(--wide-frame-width, 100vw)),
        calc(760 * var(--desktop-layout-unit))
      );

    max-height:
      max(
        1px,
        calc(
          100dvh -
          (230 * var(--desktop-layout-unit))
        )
      );
  }


  /* ----------------------------------------------------------
     CLOSE-UP FOOTER

     Uses the same centered frame as the header.
     ---------------------------------------------------------- */

  .brand-project-lightbox__footer {
    right:
      calc(
        var(--wide-frame-inset, 0px) +
        var(--desktop-edge)
      );

    bottom:
      var(--desktop-edge);

    left:
      calc(
        var(--wide-frame-inset, 0px) +
        var(--desktop-edge)
      );

    display: block;
  }


  .brand-project-lightbox__footer-mobile {
    display: none;
  }


  .brand-project-lightbox__footer-desktop {
    display: grid;

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    align-items: start;
    width: 100%;
  }


  .brand-project-lightbox__footer-desktop-left,
  .brand-project-lightbox__footer-desktop-right {
    display: flex;
    flex-direction: column;
    align-self: start;

    gap:
      calc(5 * var(--desktop-layout-unit));

    margin: 0;
    padding: 0;

    font-family:
      "Barlow Semi Condensed",
      sans-serif;

    font-size: var(--micro-font-size);
    font-weight: 800;
    line-height: var(--micro-line-height);
    letter-spacing: 0.04em;

    -webkit-text-stroke: 0;
    text-transform: uppercase;
  }


  .brand-project-lightbox__footer-desktop-left {
    align-items: flex-start;
    text-align: left;
  }


  .brand-project-lightbox__footer-desktop-right {
    align-items: flex-end;
    justify-self: end;
    text-align: right;
  }


  /* ----------------------------------------------------------
     TWO-LINE CLOSE-UP ADDRESS
     ---------------------------------------------------------- */

  .brand-project-lightbox__address-link--desktop {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    align-self: start;

    gap:
      calc(5 * var(--desktop-layout-unit));

    width: max-content;
    margin: 0;
    padding: 0;

    color: var(--ink);
    line-height: var(--micro-line-height);
    text-align: right;
    text-decoration: none;
    white-space: normal;

    transition: color 0.16s ease;
  }


  .brand-project-lightbox__address-link--desktop span {
    display: block;
    margin: 0;
    padding: 0;
    line-height: inherit;
  }

}

/* ============================================================
   [09] DESKTOP HOVER

   True mouse / trackpad only.

   This restores the same interaction grammar used in the
   Venue Gallery.
   ============================================================ */

@media
  (min-width: 800px)
  and (hover: hover)
  and (pointer: fine) {


  /* ----------------------------------------------------------
     Project image hover

     Venue Gallery treatment:
     opacity 0.88
     scale 1.005

     Because the image button itself clips overflow, the tiny
     scale reads as a very soft zoom rather than layout motion.
     ---------------------------------------------------------- */

  .brand-project__image-button:hover
  .brand-project__image {
    opacity:
      0.88;

    transform:
      scale(1.005);
  }


  /* ----------------------------------------------------------
     Descriptor hover

     Desktop captions remain hidden until the corresponding
     visual unit is engaged.
     ---------------------------------------------------------- */

  .brand-project__caption {
    opacity:
      0;
  }


  .brand-project__group:hover
  .brand-project__caption {
    opacity:
      1;
  }


  /* ----------------------------------------------------------
     BACK

     Explicit hover state so it matches Venue Gallery.
     ---------------------------------------------------------- */

  .brand-project__back:hover {
    color:
      var(--muted-hover);
  }


  /* ----------------------------------------------------------
     PROJECT FOOTER LINKS

     Explicitly include normal + visited links and the address.
     ---------------------------------------------------------- */

  .brand-project__footer a:hover,
  .brand-project__footer a:visited:hover,
  .brand-project__address:hover {
    color:
      var(--muted-hover);
  }


  /* ----------------------------------------------------------
     CLOSE-UP FOOTER LINKS
     ---------------------------------------------------------- */

  .brand-project-lightbox__footer a:hover,
  .brand-project-lightbox__footer a:visited:hover,
  .brand-project-lightbox__address-link:hover {
    color:
      var(--muted-hover);
  }


  /* ----------------------------------------------------------
     Close cross
     ---------------------------------------------------------- */

  .brand-project-lightbox__close:hover {
    color:
      var(--muted-hover);
  }
  /* ----------------------------------------------------------
     PROJECT CTA
     ---------------------------------------------------------- */

  .brand-project__cta-link:hover,
  .brand-project__cta-link:visited:hover {
    color:
      var(--muted-hover);
  }
}


/* ============================================================
   [10] REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {


  .brand-project-overlay,
  .brand-project__back,
  .brand-project__rights,
  .brand-project__image,
  .brand-project__caption,
   .brand-project__cta-link,
  .brand-project__footer a,
  .brand-project__address,
  .brand-project-lightbox,
  .brand-project-lightbox__footer a,
  .brand-project-lightbox__address-link,
  .brand-project-lightbox__close {
    animation:
      none !important;

    transition:
      none !important;
  }

}
/* ============================================================
   [11] CASE STUDY REFINEMENTS
   ============================================================ */

/*
  Unit is 1px on mobile and follows the existing desktop scale.
*/

.brand-project__canvas {
  --project-type-unit: 1px;
}


/* ------------------------------------------------------------
   BODY COPY

   Regular + 4% tracking.

   A 0.6px centred stroke extends approximately 0.3px outward.
   Painting the fill after the stroke preserves the glyph face.
   ------------------------------------------------------------ */

.brand-project__intro,
.brand-project__section-copy,
.brand-project__editorial-copy {
  font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 400;
  font-size: var(--body-font-size);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: none;

  -webkit-text-stroke:
    calc(0.6 * var(--project-type-unit)) var(--ink);

  paint-order: stroke fill;
}

.brand-project__intro p + p,
.brand-project__section-copy p + p,
.brand-project__editorial-copy p + p {
  margin-top: calc(10 * var(--project-type-unit));
}


/* ------------------------------------------------------------
   METADATA VALUES

   Retain the earlier Uchen treatment:
   regular + approximately 0.5px outward stroke + 5% tracking.
   ------------------------------------------------------------ */

.brand-project__detail-value,
.brand-project__credit-value {
  font-family: "Uchen", serif;
  font-weight: 400;
  font-size: var(--body-font-size);
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-transform: none;

  width: auto;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;

  -webkit-text-stroke:
    calc(1 * var(--project-type-unit)) var(--ink);

  paint-order: stroke fill;
}

.brand-project__detail,
.brand-project__credit {
  gap: calc(6 * var(--project-type-unit));
}


/* ------------------------------------------------------------
   HEADSHOTS

   Separate from the numbered project imagery.
   ------------------------------------------------------------ */

.brand-project__headshot {
  display: block;

  width: min(100%, calc(76 * var(--project-type-unit)));
  height: auto;
  aspect-ratio: 1;

  margin: calc(8 * var(--project-type-unit)) 0 0;
  padding: 0;
  border: 0;

  object-fit: cover;
  object-position: center;

  flex: none;
}


/* ------------------------------------------------------------
   CTA HEADING

   Same typography as the subsection headings, sentence case.
   ------------------------------------------------------------ */

.brand-project__cta-headline {
  font-family: "Barlow Condensed", sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: none;
  white-space: normal;

  -webkit-text-stroke: 0.4px var(--ink);
}

.brand-project__cta {
  gap: calc(16 * var(--project-type-unit));
}


/* ------------------------------------------------------------
   CTA BUTTON

   Matches .brand-work-button.
   ------------------------------------------------------------ */

.brand-project__cta-link,
.brand-project__cta-link:visited {
  display: inline-block;
  box-sizing: border-box;
  width: max-content;

  padding: 5px 7px;
  margin: 0;

  border: 0;
  border-radius: 2px;

  background: var(--button-grey);
  color: var(--ink);

  font-family: "Barlow Condensed", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: 0.03em;

  -webkit-text-stroke: 0.4px var(--ink);

  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;

  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  transition:
    background-color 0.16s ease,
    color 0.16s ease,
    opacity 0.16s ease;
}

.brand-project__cta-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 4px;
}


/* ------------------------------------------------------------
   MOBILE CAPTIONS

   A caption may wrap within its group rather than extending
   across neighbouring content.

   JS includes its rendered height in the spacing calculation.
   ------------------------------------------------------------ */

@media (max-width: 799px) {
  .brand-project__caption {
    width: fit-content;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .brand-project__detail-label,
  .brand-project__credit-label {
    white-space: normal;
  }
}


/* ------------------------------------------------------------
   DESKTOP SCALE / TEXT SAFETY
   ------------------------------------------------------------ */

@media (min-width: 800px) {
  .brand-project__canvas {
    --project-type-unit: var(--desktop-layout-unit, 1px);
  }

  .brand-project__text-block {
    max-width:
      max(
        1px,
        calc(
          100% -
          var(--project-desktop-text-left) -
          var(--desktop-edge)
        )
      );
  }

  .brand-project__cta-headline {
    font-size: calc(22 * var(--project-type-unit));

    -webkit-text-stroke:
      calc(0.4 * var(--project-type-unit)) var(--ink);
  }

  .brand-project__cta-link,
  .brand-project__cta-link:visited {
    font-size: calc(16 * var(--project-type-unit));

    padding:
      calc(5 * var(--project-type-unit))
      calc(7 * var(--project-type-unit));

    border-radius: calc(2 * var(--project-type-unit));

    -webkit-text-stroke:
      calc(0.4 * var(--project-type-unit)) var(--ink);
  }
}

@media (hover: hover) and (pointer: fine) {
  .brand-project__cta-link:hover,
  .brand-project__cta-link:visited:hover {
    background: var(--button-grey-hover);
    color: var(--ink);
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-project__cta-link {
    transition: none !important;
  }
}

/* CTA: retain the heading typeface without extra outline. */

.brand-project__cta-headline {
  -webkit-text-stroke: 0;
  text-shadow: none;
}

/* Shared case-study paragraph treatment */

.brand-project__intro p,
.brand-project__section-copy p,
.brand-project__editorial-copy p {
  text-align: justify;
  text-align-last: left;
  text-justify: inter-word;
  text-wrap: pretty;

  hyphens: none;
  -webkit-hyphens: none;

  word-break: normal;
  overflow-wrap: normal;
  white-space: normal;
}

.brand-project__unbroken {
  white-space: nowrap;
}

.brand-project__intro em,
.brand-project__section-copy em,
.brand-project__editorial-copy em {
  font-style: italic;
  font-weight: inherit;
}

.brand-project__cta-headline {
  text-wrap: balance;
}


/* [12] SHARED PROJECT VIDEO ASSETS */
.brand-project__video { pointer-events: none; }
.brand-project-lightbox__video {
  display: block;
  justify-self: center;
  align-self: center;
  width: min(100%, calc(100dvh - 246px));
  max-width: 100%;
  max-height: calc(100dvh - 246px);
  aspect-ratio: 1;
  object-fit: contain;
  margin: 0 auto;
  background: var(--paper);
}
.brand-project-lightbox__image[hidden],
.brand-project-lightbox__video[hidden] { display: none !important; }
@media (min-width: 800px) {
  .brand-project-lightbox__video {
    width: auto;
    height: auto;
    aspect-ratio: auto;
    max-width: min(100%, calc(0.6 * var(--wide-frame-width, 100vw)), calc(760 * var(--desktop-layout-unit)));
    max-height: max(1px, calc(100dvh - (230 * var(--desktop-layout-unit))));
  }
}



/* ============================================================
   PEOPLE GROUPS

   One shared heading per group.
   Client/support names use the same treatment as Year, Sector
   and Geography. Portraits remain side by side.
   ============================================================ */

.brand-project__people-group {
  overflow:
    visible;
}


.brand-project__people {
  --project-person-size:
    calc(
      76 *
      var(--project-type-unit, 1px)
    );

  display:
    grid;

  grid-template-columns:
    repeat(
      var(--project-people-columns, 1),
      var(--project-person-size)
    );

  column-gap:
    var(
      --project-people-mobile-gap,
      17px
    );

  width:
    max-content;

  max-width:
    100%;

  min-width:
    0;

  margin:
    0;

  padding:
    0;
}


.brand-project__person {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  /*
    Same total name-to-portrait spacing as Dima:
    6px flex gap + 8px portrait margin.
  */
  gap:
    calc(
      6 *
      var(--project-type-unit, 1px)
    );

  width:
    var(--project-person-size);

  min-width:
    0;

  margin:
    0;

  padding:
    0;
}


/* Same typography as Year, Sector and Geography. */

.brand-project__person >
.brand-project__detail-value,

.brand-project__person >
.brand-project__credit-value {
  display:
    block;

  width:
    max-content;

  max-width:
    none;

  min-height:
    0;

  margin:
    0;

  padding:
    0;

  font-family:
    "Uchen",
    serif;

  font-size:
    var(--body-font-size);

  font-weight:
    400;

  line-height:
    1.2;

  letter-spacing:
    0.05em;

  -webkit-text-stroke:
    calc(
      1 *
      var(--project-type-unit, 1px)
    ) var(--ink);

  paint-order:
    stroke fill;

  text-transform:
    none;

  white-space:
    nowrap;
}


.brand-project__person >
.brand-project__headshot {
  display:
    block;

  flex:
    0 0 auto;

  width:
    var(--project-person-size);

  height:
    var(--project-person-size);

  margin:
    calc(
      8 *
      var(--project-type-unit, 1px)
    ) 0 0;

  padding:
    0;

  object-fit:
    cover;

  object-position:
    center;
}


.brand-project-lightbox__video {
  pointer-events:
    none;
}


@media (min-width: 800px) {

  .brand-project__people {
    column-gap:
      var(
        --project-people-desktop-gap,
        calc(
          17 *
          var(--desktop-layout-unit, 1px)
        )
      );
  }

}