/* Absolute Upholstery — Commercial & Contract
   Page-specific composition for the three flagship projects. Shares the brand
   DNA (palette, type, header/footer, hero, Guild, CTA); the middle is unique.
   Namespaced .cm- so it never collides with shared components. Mobile-first. */

/* ================================================================
   OPENER — editorial masthead: an oversized statement set against
   offset body copy, closed by a signature stitched rule (SVG brass
   dashes + a diamond node) and a line of flagship venues. This is the
   page's unique high-end opener, cf. the Antique stagger and the
   Modern spine, built from the same brass-and-diamond stitch motif.
================================================================ */
.cm-opener {
  padding-block: var(--section-y);
  background-color: var(--surface-page);
  background-image: var(--texture-paper);
  border-bottom: 1px solid var(--border-subtle);
  overflow: hidden;
}
.cm-opener__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* Centred editorial masthead — deliberately distinct from the Modern
     lead's two-column statement/body split. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cm-opener__lead .eyebrow { margin-bottom: clamp(0.75rem, 1.5vw, 1.1rem); }

/* statement + body side by side: narrow heading, wide body that starts
   further left (mirrors the .text-feature columns below). */
.cm-opener__head {
  width: 100%;
  display: grid;
  gap: clamp(1.25rem, 3vw, 2rem);
  text-align: left;
}
.cm-opener__statement {
  font-family: var(--font-sans);
  font-weight: var(--fw-light);
  font-size: clamp(2.1rem, 1.3rem + 3vw, 3.6rem);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
  margin: 0;
  max-width: 22ch;
}
.cm-opener__body p { color: var(--text-body); max-width: none; }

@media (min-width: 900px) {
  .cm-opener__head {
    grid-template-columns: 0.8fr 1.2fr;
    align-items: start;
    gap: clamp(2.5rem, 6vw, 5rem);
  }
}

/* signature stitched rule — brass dashes flanking a diamond node */
.cm-opener__rule {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2.5vw, 1.75rem);
  margin-top: clamp(2.5rem, 6vw, 4rem);
  width: min(100%, 30rem);
}
.cm-opener__rule-line { flex: 1; height: 2px; display: block; }
.cm-opener__rule-line line {
  stroke: var(--au-brass-300);
  stroke-width: 2;
  stroke-dasharray: 1 6;
  stroke-linecap: round;
  opacity: 0.6;
  vector-effect: non-scaling-stroke;
}
.cm-opener__rule-node { flex: 0 0 auto; width: 16px; height: 16px; display: block; }
.cm-opener__rule-node path { fill: none; stroke: var(--au-brass-300); stroke-width: 1.5; opacity: 0.85; }

/* flagship venues — promoted into named credentials, each a two-line
   pillar (kicker over name) divided by a hairline brass rule. */
.cm-opener__venues {
  list-style: none;
  margin: clamp(2.25rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  width: 100%;
}
.cm-opener__venue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.cm-opener__venue-kicker {
  font-family: var(--font-accent);
  font-size: var(--fs-label);
  font-variant-caps: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.2em;
  color: var(--au-brass-300);
}
.cm-opener__venue-name {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.45rem);
  letter-spacing: var(--ls-heading);
  color: var(--text-heading);
}

@media (min-width: 600px) {
  .cm-opener__venues {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
  /* hairline brass dividers between the three pillars */
  .cm-opener__venue + .cm-opener__venue {
    border-left: 1px solid var(--border-subtle);
  }
}

/* ================================================================
   FEATURE — full-bleed split: image grid one side, copy the other.
   Mirrors the split sections elsewhere on the site: the media reaches
   the top and bottom of the section with no gaps, the copy sits on a
   parchment panel beside it. Side alternates per section for rhythm,
   set purely by DOM order (media-first vs copy-first).
================================================================ */
.cm-feature {
  padding-block: 0;
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  border-block: 1px solid var(--border-subtle);
}
/* Britannia meets the green film panel below it: drop the hairline there. */
.cm-feature:has(+ .cm-film) { border-bottom: none; }

/* Copy panel — parchment, copy centred vertically */
.cm-feature__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.5rem, 8vw, 4rem) var(--gutter);
  background-color: var(--surface-page);
  background-image: var(--texture-paper);
}
.cm-feature--alt .cm-feature__text { background-color: var(--surface-page-alt); }
.cm-feature__copy { width: 100%; max-width: 46ch; margin-inline: auto; }
.cm-feature__text .eyebrow { margin-bottom: 1.1rem; }
.cm-feature__text h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  color: var(--text-heading);
  line-height: var(--lh-heading);
  margin-bottom: 1.25rem;
}
.cm-feature__text p { color: var(--text-body); }
.cm-feature__text p + p { margin-top: 1.1rem; }

/* Tablet/mobile (stacked): left-align the copy and let it run the full width
   rather than sitting as a narrow centred block. Desktop keeps it centred. */
@media (max-width: 899px) {
  .cm-feature__copy { max-width: 62ch; margin-inline: 0; }
}

/* Media side — full bleed, holds the image grid */
.cm-feature__media {
  position: relative;
  overflow: hidden;
  min-height: 70vw;
}

/* Image grid fills the media side edge to edge, no gaps. Two columns,
   equal rows: 2 images fill one row, 4 fill two, and more reflow
   automatically as photos are added. */
.cm-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 0;
}
.cm-grid__cell {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-page-alt);
}
.cm-grid__cell .photo-placeholder,
.cm-grid__cell .img-cover {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}
/* Three-up variant (Britannia): lead image spans the full width, two beneath */
.cm-grid--three .cm-grid__cell:first-child { grid-column: 1 / -1; }

/* Small tablet (600–899px): stacked single column, the Britannia three-up grid
   crops its portrait photos hard at the base 70vw media height. Give that media
   box more height so the cells are taller and the images are far less cropped.
   Targets only the Britannia media (the one holding the three-up grid). */
@media (min-width: 600px) and (max-width: 899px) {
  .cm-feature__media:has(.cm-grid--three) { min-height: 115vw; }
}

/* Mobile (<600px): even narrower, so the same three-up grid crops harder still.
   Give it more height again so the Britannia photos are far less cropped. */
@media (max-width: 599px) {
  .cm-feature__media:has(.cm-grid--three) { min-height: 155vw; }
}

@media (min-width: 900px) {
  .cm-feature {
    grid-template-columns: 1fr 1fr;
    min-height: clamp(34rem, 52vw, 48rem);
  }
  /* Flagship: give the imagery a little more visual weight, and keep the
     photos generous — never shorter than 80vh, never taller than the viewport. */
  .cm-feature--flagship {
    grid-template-columns: 1.08fr 0.92fr;
    min-height: 80vh;
    max-height: 100vh;
  }
  .cm-feature__media { min-height: 0; }
  .cm-feature__text { padding: clamp(4rem, 7vw, 7rem) clamp(1.5rem, 4vw, 4rem); }
}

/* Large tablet (900–1199px, e.g. iPad): 80vh makes the Edinburgh Castle
   flagship images far too tall on a tall viewport — cap the band. Also trim the
   top/bottom padding on the Edinburgh Castle copy panel and on the contracts
   section so neither runs over-tall in this range. Wider desktop is untouched. */
@media (min-width: 900px) and (max-width: 1199px) {
  .cm-feature--flagship {
    min-height: min(66vh, 33rem);
    max-height: none;
  }
  .cm-feature--flagship .cm-feature__text { padding-block: clamp(1.25rem, 2.5vw, 2rem); }
}

/* ================================================================
   FILM — full-width video walkthrough on the deep-green panel,
   with a composed, on-brand facade until the viewer presses play.
================================================================ */
.cm-film {
  padding-block: 0;                 /* no top/bottom padding: band = video height */
  background-color: var(--au-black-900);
  background-image: radial-gradient(120% 80% at 0% 0%, rgba(247, 241, 230, 0.05), transparent 60%);
  text-align: center;
}
.cm-film__inner {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(3rem, 7vw, 5rem);
}
.cm-film .eyebrow { color: var(--au-brass-300); margin-bottom: 1.1rem; }
.cm-film h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  color: var(--au-cream);
  margin-bottom: 1rem;
}
.cm-film__lead {
  color: rgba(250, 247, 240, 0.82);
  max-width: 60ch;
  margin: 0 auto clamp(1rem, 2vw, 1.5rem);
}
.cm-film__text p {
  color: rgba(250, 247, 240, 0.72);
  max-width: 62ch;
  margin: 0 auto clamp(1rem, 2vw, 1.5rem);
}
.cm-film__points {
  list-style: none;
  margin: 0 auto clamp(1.5rem, 3vw, 2rem);
  padding: 0;
  display: grid;
  gap: 0.65rem;
  max-width: 42ch;
  text-align: left;
}
.cm-film__points li {
  position: relative;
  padding-left: 1.5rem;
  color: rgba(250, 247, 240, 0.82);
}
.cm-film__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.5rem;
  height: 0.5rem;
  transform: rotate(45deg);
  background: var(--au-brass-300);
}
.cm-film__text .btn { margin-top: 0.25rem; }
.cm-film__caption {
  margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
  color: var(--au-brass-300);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
}

/* Shared intro block, then a centred row of video posters */
.cm-film__head { max-width: 64ch; margin-inline: auto; }
.cm-film__head .btn { margin-top: 0.25rem; }

.cm-film__videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 4vw, 2.5rem);
  max-width: 44rem;
  margin: clamp(2rem, 5vw, 3rem) auto 0;
}
.cm-video-item { margin: 0; }

/* Video frame — tall portrait, the poster is cover-cropped into it */
.cm-video {
  position: relative;
  width: 100%;
  margin-inline: auto;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid rgba(250, 247, 240, 0.14);
  background-color: var(--au-black-900);
}

/* Copy on the left, videos on the right — side by side at ALL screen sizes,
   both columns top-aligned so the heading starts at the top of the band. */
.cm-film { text-align: left; }
.cm-film__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  align-items: start;
  column-gap: clamp(1rem, 4vw, 4.5rem);
}
.cm-film__videos { max-width: none; margin: 0; gap: clamp(0.5rem, 2vw, 2.5rem); }
.cm-film__head { max-width: none; margin: 0; }
.cm-film__lead { margin-inline: 0; }
.cm-film__note {
  color: rgba(250, 247, 240, 0.72);
  max-width: 60ch;                 /* match .cm-film__lead width for unity */
  margin: 0 0 clamp(1.1rem, 2.5vw, 1.6rem);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  line-height: 1.65;
}
.cm-film__head .cm-film__points { margin-inline: 0; max-width: none; }
.cm-film__caption { text-align: left; }

/* Small tablet (600–899px): stack top-down — the copy sits above, with the two
   video posters in a row below — rather than the side-by-side band, which is
   too tight in this range. */
@media (min-width: 600px) and (max-width: 899px) {
  .cm-film__inner {
    grid-template-columns: 1fr;
    row-gap: clamp(1.75rem, 4vw, 2.75rem);
  }
}

/* Mobile (<600px): far too tight for the side-by-side band, and two posters in a
   row is too narrow — stack top-down (copy above) and stack the posters too. */
@media (max-width: 599px) {
  .cm-film__inner {
    grid-template-columns: 1fr;
    row-gap: clamp(1.5rem, 6vw, 2.25rem);
  }
  .cm-film__videos { grid-template-columns: 1fr; }
}

/* Tablet only (861–1024px): the two-column walkthroughs band feels cramped in
   this range, so open up the spacing between each part of the content — the
   column gap, the vertical rhythm in the copy, and the gap between the posters.
   Desktop (>=1025px) and mobile (<861px) are deliberately left untouched. */
@media (min-width: 900px) and (max-width: 1199px) {
  .cm-film__inner { column-gap: 3.5rem; padding-block: clamp(4.5rem, 8vw, 6.5rem); }
  .cm-film h2 { margin-bottom: 1.4rem; }
  .cm-film__lead { margin-bottom: 1.75rem; }
  .cm-film__note { margin-bottom: 2rem; }
  .cm-film__head .cm-film__points { margin-bottom: 2.4rem; gap: 0.9rem; }
  .cm-film__videos { gap: 1.75rem; }
  .cm-film__caption { margin-top: 2.25rem; }
}

/* The centred head + two-poster row scales cleanly at all widths, so no
   desktop-specific override is needed here. */

/* Lightbox — the square poster opens the full portrait video here */
.cm-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 2.5rem);
}
.cm-lightbox[hidden] { display: none; }
.cm-lightbox__backdrop {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: rgba(6, 17, 10, 0.86);
}
.cm-lightbox__stage {
  position: relative;
  z-index: 1;
  width: min(92vw, 49.5vh);   /* 49.5vh = 88vh × 9/16, so height stays within 88vh */
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #000;
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.6);
}
.cm-lightbox__stage video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}
.cm-lightbox__close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 2;
  width: 2.6rem;
  height: 2.6rem;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--au-cream);
  background: rgba(8, 17, 10, 0.55);
  transition: background-color var(--dur-base) var(--ease-soft);
}
.cm-lightbox__close:hover,
.cm-lightbox__close:focus-visible { background: rgba(8, 17, 10, 0.9); }
.cm-lightbox__close svg { width: 55%; height: 55%; }
body.cm-lightbox-open { overflow: hidden; }

/* Facade button — composed green/brass frame, never a grey box */
.cm-video__facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  display: block;
  background-color: var(--au-black-900);
  background-image: radial-gradient(120% 90% at 50% 0%, rgba(26, 133, 19, 0.30), transparent 60%);
}
.cm-video__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Tinted (dimmed) by default; lightens and gently zooms on hover/focus. */
  filter: brightness(0.7) saturate(0.96);
  transition: filter 0.45s var(--ease-soft), transform 1.1s var(--ease-out);
}
.cm-video__facade:hover .cm-video__poster,
.cm-video__facade:focus-visible .cm-video__poster {
  filter: brightness(1) saturate(1);
  transform: scale(1.05);
}
/* Bottom scrim keeps the venue name legible over any poster (brightened or not) */
.cm-video__facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 24, 10, 0.82) 0%, rgba(8, 24, 10, 0.12) 46%, transparent 66%);
  pointer-events: none;
}
/* Venue name sits inside the poster at the bottom-left, matching the gallery tiles */
.cm-video__cap {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.2rem;
  padding: clamp(0.9rem, 2.2vw, 1.4rem);
  pointer-events: none;
}
.cm-video__name {
  font-family: var(--font-sans);
  font-size: var(--fs-h4);
  font-weight: var(--fw-regular);
  line-height: var(--lh-snug);
  color: var(--au-cream);
}
.cm-video__place {
  font-family: var(--font-accent);
  font-variant-caps: small-caps;
  text-transform: lowercase;
  letter-spacing: 0.16em;
  font-size: 0.8rem;
  color: var(--au-brass-300);
}
.cm-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(3rem, 7vw, 4.25rem);
  height: clamp(3rem, 7vw, 4.25rem);
  border-radius: 50%;
  background: var(--au-brass-300);
  display: grid;
  place-items: center;
  z-index: 1;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur-base) var(--ease-soft), background-color var(--dur-base) var(--ease-soft);
}
.cm-video__facade:hover .cm-video__play,
.cm-video__facade:focus-visible .cm-video__play {
  transform: translate(-50%, -50%) scale(1.06);
  background: #9a7030;
}
.cm-video__play svg { width: 36%; height: 36%; fill: #fff; margin-left: 6%; }
.cm-video__caption {
  margin-top: 1rem;
  color: rgba(250, 247, 240, 0.92);
  font-size: var(--fs-body);
  letter-spacing: 0.01em;
}
/* Loaded player */
.cm-video iframe,
.cm-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.cm-video video {
  object-fit: cover;
  background-color: var(--au-black-900);
}

/* ================================================================
   CONTRACTS — current contract clients
================================================================ */
.cm-contracts {
  padding-block: clamp(6.5rem, 14vh, 11rem);
  text-align: center;
  background-color: var(--surface-page-alt);
  background-image: var(--texture-paper);
}
/* Large tablet: tune the top/bottom padding for this band. Placed after the base
   rule so it wins on source order (same specificity). */
@media (min-width: 900px) and (max-width: 1199px) {
  .cm-contracts { padding-block: clamp(4rem, 9vh, 6rem); }
}
.cm-contracts__head { text-align: center; }
.cm-contracts .eyebrow { margin-bottom: 1.1rem; color: var(--au-brass-300); }
.cm-contracts__head h2 { margin-bottom: 1.1rem; }
.cm-contracts__lead {
  color: var(--text-body);
  max-width: 52ch;
  margin: 0 auto clamp(3rem, 6vw, 5rem);
}

/* Roster — flat grid, diamond bullets */
.cm-contracts__grid {
  list-style: none;
  max-width: 72rem;
  margin-inline: auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem 2.5rem;
  text-align: left;
}
.cm-contracts__grid li {
  position: relative;
  padding-left: 1.5rem;
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  font-weight: var(--fw-light);
  color: var(--text-secondary);
  line-height: var(--lh-snug);
}
.cm-contracts__grid li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58em;
  width: 0.42rem;
  height: 0.42rem;
  transform: rotate(45deg);
  background: var(--au-brass-300);
}

@media (min-width: 600px) {
  .cm-contracts__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .cm-contracts__grid { grid-template-columns: repeat(4, 1fr); }
}

/* Tablet/mobile: centre the roster as a block so it sits balanced under the
   centred heading, with equal space either side, rather than flush left.
   Desktop (>=861px) keeps its full-width columns. */
@media (min-width: 600px) and (max-width: 899px) {
  .cm-contracts__grid {
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    column-gap: clamp(2.5rem, 8vw, 5rem);
  }
}
@media (max-width: 599px) {
  .cm-contracts__grid { width: fit-content; margin-inline: auto; }
}

/* ================================================================
   THE SCOTCH WHISKY EXPERIENCE — text row on top (heading left, copy
   right), then a row of framed images below. Reuses the .before-after
   framed-image treatment; the split head + full-width media are local.
================================================================ */
.wx-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1rem, 3vw, 1.75rem);
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.wx-head__title .eyebrow { margin-bottom: 1.1rem; }
.wx-head__title h2 { margin-bottom: 0; }
/* Smaller than the default text-lead */
.wx-head__body .text-lead {
  color: var(--text-body);
  margin-inline: 0;
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  line-height: 1.65;
}
.wx-head__body .text-lead + .text-lead { margin-top: 1rem; }
.wx-head__body .hub-cta { margin-top: clamp(1.5rem, 3vw, 2rem); justify-content: flex-start; }
/* Images fill the wide container rather than the centred 1200px before/after cap */
.wx-media { max-width: none; margin-inline: 0; }

/* More breathing room top and bottom than the default .service-work band */
.service-work:has(.wx-head) { padding-block: clamp(4rem, 9vh, 6.5rem); }

@media (min-width: 900px) {
  .wx-head {
    grid-template-columns: 0.8fr 1.2fr;
    align-items: start;
    column-gap: clamp(2.5rem, 6vw, 5rem);
  }
}

@media (min-width: 1200px) {
  .service-work:has(.wx-head) { padding-block: clamp(6rem, 12vh, 9rem); }
}

/* Phone: match the section rhythm (see the note in main.css). */
@media (max-width: 599px) {
  .cm-feature__text,
  .cm-film__inner { padding-block: var(--panel-y); }
}