/* =========================================================
   CENTER PUNCH MARKETING — SITE STYLESHEET
   Editorial / industrial / premium visual system.
   Plain CSS. No build step. No external fonts.
========================================================= */

:root{
  --black:        #0a0a0a;
  --charcoal:     #161616;
  --charcoal-2:   #1e1e1e;
  --steel:        #3a3d42;
  --steel-light:  #6b6f76;
  --line:         #2a2a2a;
  --white:        #f4f3f0;
  --white-dim:    #c9c8c3;
  --red:          #a80f1f;
  --red-bright:   #c8172a;

  --font: -apple-system, "SF Pro Text", "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;

  --max: 1240px;
  --pad: clamp(20px, 5vw, 64px);

  --ease: cubic-bezier(.22,.61,.36,1);
}

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

html{ scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body{
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a{ color: inherit; text-decoration: none; }

::selection{ background: var(--red); color: var(--white); }

:focus-visible{
  outline: 2px solid var(--red-bright);
  outline-offset: 3px;
}

.wrap{
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ---------- typography ---------- */

h1, h2, h3, h4{
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 0.5em;
}

.eyebrow{
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red-bright);
  margin: 0 0 14px;
  display: block;
}

.display{
  font-size: clamp(2.6rem, 6.4vw, 5.4rem);
  letter-spacing: -0.03em;
}

.h1{ font-size: clamp(2.2rem, 5vw, 3.6rem); }
.h2{ font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.h3{ font-size: clamp(1.25rem, 2vw, 1.6rem); }

p{
  line-height: 1.65;
  color: var(--white-dim);
  margin: 0 0 1.1em;
  font-size: 1.05rem;
}

.lede{
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: var(--white);
  line-height: 1.5;
  max-width: 46em;
}

.section-label{
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--steel-light);
}

/* ---------- buttons ---------- */

.btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid var(--white);
  color: var(--white);
  background: transparent;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
  white-space: nowrap;
}
.btn:hover{ background: var(--white); color: var(--black); }
.btn:active{ transform: scale(0.98); }

.btn-primary{
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
.btn-primary:hover{ background: var(--red-bright); border-color: var(--red-bright); color: var(--white); }

.btn-ghost{
  border-color: var(--steel);
  color: var(--white-dim);
}
.btn-ghost:hover{ background: var(--white); border-color: var(--white); color: var(--black); }

.link-arrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--white);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: border-color .2s var(--ease), color .2s var(--ease), gap .2s var(--ease);
}
.link-arrow:hover{ border-color: var(--red-bright); color: var(--red-bright); gap: 12px; }

/* ---------- header ---------- */

.site-header{
  position: sticky;
  top: 0;
  z-index: 500;
  background: rgba(10,10,10,0.88);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.brand{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.brand img{
  height: 44px;
  width: auto;
}
.brand-word{
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.15;
}
.brand-word span{
  display: block;
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: var(--steel-light);
}

.main-nav{
  display: flex;
  align-items: center;
  gap: 36px;
}
.main-nav a{
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--white-dim);
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.main-nav a:hover,
.main-nav a[aria-current="page"]{
  color: var(--white);
  border-color: var(--red);
}

.nav-toggle{
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--white);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content: "";
  display: block;
  width: 20px;
  height: 2px;
  background: var(--white);
  position: relative;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
}
.nav-toggle span::before{ position: absolute; top: -7px; }
.nav-toggle span::after{ position: absolute; top: 7px; }
.nav-toggle[aria-expanded="true"] span{ background: transparent; }
.nav-toggle[aria-expanded="true"] span::before{ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px){
  .main-nav{
    position: fixed;
    inset: 76px 0 0 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background: var(--black);
    padding: 12px var(--pad) 40px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s linear .25s;
    overflow-y: auto;
  }
  .main-nav.is-open{
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition: opacity .25s var(--ease), transform .25s var(--ease);
  }
  .main-nav a{
    width: 100%;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.05rem;
  }
  .nav-toggle{ display: inline-flex; }
}

/* ---------- footer ---------- */

.site-footer{
  border-top: 1px solid var(--line);
  padding: 34px 0;
  background: var(--charcoal);
}
.footer-simple{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--steel-light);
}
.footer-simple a{ color: var(--white-dim); }
.footer-simple a:hover{ color: var(--red-bright); }
.footer-links{ display: flex; align-items: center; gap: 10px; }
.footer-links .sep{ color: var(--line); }

/* ---------- hero (generic page header) ---------- */

.page-hero{
  padding: 76px 0 56px;
  border-bottom: 1px solid var(--line);
}
.page-hero .lede{ margin-top: 18px; }

/* ---------- sections ---------- */

section{ padding: 88px 0; }
section.tight{ padding: 56px 0; }
.section-border{ border-top: 1px solid var(--line); }
.on-charcoal{ background: var(--charcoal); }

.section-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 44px;
  flex-wrap: wrap;
}

/* ---------- grids / cards ---------- */

.grid-2{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.grid-3{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
  .grid-3{ grid-template-columns: 1fr; }
}

.media-frame{
  overflow: hidden;
  background: var(--charcoal-2);
  position: relative;
}
.media-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease);
}
.media-frame.ratio-16-9{ aspect-ratio: 16/9; }
.media-frame.ratio-4-3{ aspect-ratio: 4/3; }
.media-frame.ratio-1-1{ aspect-ratio: 1/1; }
.media-frame.ratio-3-4{ aspect-ratio: 3/4; }

.card{
  border: 1px solid var(--line);
  background: var(--charcoal);
  display: flex;
  flex-direction: column;
}
.card-body{ padding: 28px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.card-tag{
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-bright);
}
.card-actions{
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 10px;
}

.project-feature{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 0;
  border: 1px solid var(--line);
  background: var(--charcoal);
}
.project-feature .media-frame{ height: 100%; min-height: 320px; }
.project-feature .card-body{ padding: 44px; justify-content: center; gap: 18px; }
@media (max-width: 900px){
  .project-feature{ grid-template-columns: 1fr; }
  .project-feature .media-frame{ min-height: 260px; }
}

/* ---------- brand grid ---------- */

.brand-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (max-width: 900px){ .brand-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .brand-grid{ grid-template-columns: 1fr; } }

.brand-cell{
  background: var(--charcoal);
  padding: 44px 36px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.brand-logo-box{
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  align-self: stretch;
}
.brand-logo-box img{
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.brand-desc{ font-size: 0.98rem; color: var(--white-dim); }

.brand-teaser-strip{
  display: flex;
  align-items: center;
  gap: clamp(24px, 5vw, 64px);
  flex-wrap: wrap;
  padding: 36px 0;
}
.brand-teaser-strip img{
  height: 38px;
  width: auto;
  object-fit: contain;
}

/* ---------- intro experience ---------- */

#intro{
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: opacity .9s var(--ease);
}
#intro.intro-hide{ opacity: 0; pointer-events: none; }
#intro video{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.intro-skip{
  position: absolute;
  bottom: 24px;
  right: 24px;
  z-index: 3;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(244,243,240,0.55);
  border: none;
  background: none;
  padding: 8px;
  cursor: pointer;
  font-family: var(--font);
}
.intro-skip:hover{ color: var(--white); }

body.intro-active{ overflow: hidden; height: 100%; }

/* ---------- home hero ---------- */

.home-hero{
  position: relative;
  padding: 120px 0 90px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 900px 500px at 15% 0%, rgba(168,15,31,0.12), transparent 60%),
    var(--black);
}
.home-hero h1{
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  letter-spacing: -0.03em;
}
.home-hero h1 em{
  font-style: normal;
  color: var(--red-bright);
}
.home-hero .lede{ margin-top: 24px; }
.home-hero .hero-actions{
  margin-top: 36px;
  display: flex;
  gap: 28px;
  align-items: center;
  flex-wrap: wrap;
}

/* ---------- rock n taco project page ---------- */

.rt-hero{
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--line);
}
.rt-hero img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rt-hero::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.15) 0%, rgba(10,10,10,0.55) 60%, rgba(10,10,10,0.94) 100%);
}
.rt-hero .wrap{ position: relative; z-index: 2; padding-bottom: 56px; }
.rt-hero .card-tag{ margin-bottom: 14px; }
.rt-hero h1{ font-size: clamp(2.2rem, 5.4vw, 4rem); max-width: 16em; }
.rt-hero .rt-hero-actions{ margin-top: 28px; display: flex; gap: 24px; flex-wrap: wrap; }

.rt-meta-bar{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--line);
}
.rt-meta-bar div{
  padding: 26px var(--pad);
  border-left: 1px solid var(--line);
}
.rt-meta-bar div:first-child{ border-left: none; padding-left: var(--pad); }
.rt-meta-bar .k{
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--steel-light);
  margin-bottom: 6px;
}
.rt-meta-bar .v{ font-size: 0.95rem; font-weight: 600; }
@media (max-width: 760px){
  .rt-meta-bar{ grid-template-columns: repeat(2, 1fr); }
  .rt-meta-bar div:nth-child(3){ border-left: none; }
}

.rt-pullquote{
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--white);
  max-width: 20em;
  border-left: 3px solid var(--red);
  padding-left: 28px;
  margin: 0;
}

.rt-gallery{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
@media (max-width: 760px){ .rt-gallery{ grid-template-columns: 1fr 1fr; } }
.rt-gallery .media-frame{ aspect-ratio: 4/3; }
.rt-gallery figure{ margin: 0; }

.rt-spec{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
@media (max-width: 900px){ .rt-spec{ grid-template-columns: repeat(2, 1fr); } }
.rt-spec h4{
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-bright);
  margin-bottom: 14px;
}
.rt-spec p{ font-size: 0.92rem; }

.rt-collab{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
@media (max-width: 900px){ .rt-collab{ grid-template-columns: 1fr; } }
.rt-collab .card-body{ padding: 30px; }
.rt-collab .role{ font-size: 0.88rem; color: var(--white-dim); }
.rt-collab .name{ font-weight: 700; font-size: 1.05rem; }

/* ---------- about page ---------- */

.about-mark{
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-mark img{
  width: 100%;
  max-width: 300px;
  height: auto;
}
@media (max-width: 900px){
  .about-mark{ order: -1; margin-bottom: 8px; }
  .about-mark img{ max-width: 200px; }
}
.principle-list{
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 28px;
}
.principle-list li{
  font-size: 0.95rem;
  color: var(--white-dim);
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 560px){ .principle-list{ grid-template-columns: 1fr; } }

.credo{
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--white);
  margin: 0;
}

/* ---------- contact page ---------- */

.contact-hero{
  padding: 130px 0 110px;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.contact-hero .lede{ margin: 22px auto 0; }
.contact-hero .hero-actions{
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}
.contact-loc{
  margin-top: 30px;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--steel-light);
}

/* ---------- misc ---------- */

.divider{
  height: 1px;
  background: var(--line);
  border: none;
  margin: 0;
}

.kicker-row{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.kicker-row .dot{
  width: 8px; height: 8px;
  background: var(--red);
  flex-shrink: 0;
}

.tri-line{
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--white-dim);
  line-height: 1.9;
}

.skip-link{
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--red);
  color: var(--white);
  padding: 12px 20px;
  z-index: 5000;
  font-weight: 600;
}
.skip-link:focus{ left: 12px; top: 12px; }

.back-link{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--steel-light);
  margin-bottom: 20px;
}
.back-link:hover{ color: var(--white); }

/* ---------- portfolio grid v1.9 ---------- */
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 42px;}
.work-tile{display:flex;flex-direction:column;min-width:0;}
.work-tile .media-frame{aspect-ratio:16/10;}
.work-tile .card-body{padding:24px 0 0;gap:12px;}
.work-tile .card-actions{padding-top:8px;}
.work-tile .h3{margin:0;}
.work-subtitle{display:block;font-weight:400;color:var(--white-dim);font-size:.7em;margin-top:5px;line-height:1.35;}
@media(max-width:760px){.work-grid{grid-template-columns:1fr;gap:48px}.work-tile .card-body{padding-top:20px}}
.home-feature{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);align-items:stretch;background:var(--charcoal);border:1px solid var(--line);}
.home-feature .media-frame{min-height:440px;}
.home-feature .card-body{padding:48px;justify-content:center;gap:18px;}
.home-portfolio-bridge{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-top:28px;margin-top:28px;border-top:1px solid var(--line);}
.home-portfolio-bridge p{margin:0;max-width:720px;color:var(--white-dim);}
@media(max-width:900px){.home-feature{grid-template-columns:1fr}.home-feature .media-frame{min-height:300px}.home-feature .card-body{padding:32px}.home-portfolio-bridge{align-items:flex-start;flex-direction:column}}

/* =========================================================
   CPM v2.0 — PREMIUM EDITORIAL LAYOUT PASS
   Deliberate viewport composition, tighter rhythm, stronger
   project hierarchy and more restrained brand presentation.
========================================================= */
:root{--max:1320px;--pad:clamp(24px,4.4vw,72px);--line:#252525;--charcoal:#121212;--white:#f6f4ef;--white-dim:#b9b8b3;}
body{background:#090909;}
.site-header .wrap{height:72px;}
.site-header{background:rgba(9,9,9,.92);}
.brand img{height:40px}.main-nav{gap:42px}.main-nav a{font-size:.78rem;letter-spacing:.12em}

/* more editorial type */
.h1{font-size:clamp(2.7rem,5.6vw,5.25rem);letter-spacing:-.045em;line-height:.92}
.h2{font-size:clamp(2rem,3.8vw,3.6rem);letter-spacing:-.04em;line-height:.98}
.h3{font-size:clamp(1.35rem,2.2vw,2rem);letter-spacing:-.025em}
.display{font-size:clamp(3.2rem,7vw,6.8rem);letter-spacing:-.055em;line-height:.9}
p{font-size:1rem;line-height:1.72}.lede{font-size:clamp(1.08rem,1.55vw,1.35rem);line-height:1.55}
.eyebrow,.section-label,.card-tag{letter-spacing:.2em;font-size:.68rem}

/* first screen belongs entirely to the hero */
.home-hero{min-height:calc(100svh - 72px);padding:0;display:flex;align-items:center;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.home-hero::before{content:"CPM / ATL";position:absolute;right:var(--pad);bottom:34px;color:#555;font-size:.64rem;font-weight:700;letter-spacing:.22em;writing-mode:vertical-rl}
.home-hero .wrap{width:100%;padding-top:6vh;padding-bottom:7vh}
.home-hero h1{font-size:clamp(3.4rem,6.7vw,7rem);line-height:.92;letter-spacing:-.06em;max-width:10.8em}
.home-hero .lede{max-width:42em;margin-top:32px;color:#d6d4cf}
.home-hero .hero-actions{margin-top:38px}

/* page intros: compact, architectural, never a giant empty box */
.page-hero{padding:72px 0 58px;border-bottom:1px solid var(--line);position:relative}
.page-hero .wrap{display:grid;grid-template-columns:minmax(220px,.65fr) minmax(420px,1.35fr);column-gap:7vw;align-items:end}
.page-hero .eyebrow{grid-column:1;align-self:start;margin-top:7px}
.page-hero .h1{grid-column:1;margin:0}
.page-hero .lede{grid-column:2;grid-row:1 / span 2;margin:0;align-self:end;max-width:36em;color:#d0cfca}
.page-hero .wrap>.h1:only-child{grid-column:1 / -1}
section{padding:72px 0}section.tight{padding:58px 0}

/* home featured work: one cinematic piece of evidence */
.home-feature{grid-template-columns:minmax(0,1.55fr) minmax(330px,.65fr);border:0;background:transparent;gap:0}
.home-feature .media-frame{min-height:560px}
.home-feature .media-frame img{filter:saturate(.92) contrast(1.02)}
.home-feature .card-body{background:#111;padding:clamp(34px,4vw,62px);border-top:1px solid var(--line);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.home-feature .h3{font-size:clamp(1.7rem,2.7vw,2.7rem);line-height:1.03}
.home-portfolio-bridge{margin-top:42px;padding-top:26px}

/* portfolio: large editorial rows instead of template cards */
.work-grid{display:flex;flex-direction:column;gap:96px}
.work-tile{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(340px,.82fr);align-items:center;gap:clamp(34px,6vw,90px)}
.work-tile:nth-child(even){grid-template-columns:minmax(340px,.82fr) minmax(0,1.18fr)}
.work-tile:nth-child(even) .media-frame{grid-column:2}.work-tile:nth-child(even) .card-body{grid-column:1;grid-row:1}
.work-tile .media-frame{aspect-ratio:16/10;min-height:390px}
.work-tile .card-body{padding:0;gap:16px;max-width:470px}
.work-tile .h3{font-size:clamp(2rem,3.5vw,3.5rem);line-height:.98;margin:0}
.work-subtitle{font-size:.43em;margin-top:12px;letter-spacing:.02em;line-height:1.35;color:#9e9d98}
.work-tile p{max-width:42em}.work-tile .card-actions{margin-top:8px}
.work-tile .btn{padding:12px 18px;font-size:.8rem}

/* brands: fewer boxes, more gallery / representation wall */
.brand-grid{grid-template-columns:repeat(2,1fr);gap:0;background:transparent;border:0;border-top:1px solid var(--line)}
.brand-cell{background:transparent;padding:42px 0 46px;display:grid;grid-template-columns:180px 1fr;align-items:center;gap:42px;border-bottom:1px solid var(--line)}
.brand-cell:nth-child(odd){padding-right:44px;border-right:1px solid var(--line)}
.brand-cell:nth-child(even){padding-left:44px}
.brand-logo-box{height:70px}.brand-desc{margin:0;font-size:.92rem;line-height:1.55;color:#aeadA8}
.brand-teaser-strip{justify-content:space-between;gap:32px;opacity:.82}

/* about: turn the mark into a graphic, not a placeholder */
.about-mark{min-height:430px;display:flex;align-items:center;justify-content:center;position:relative;border-left:1px solid var(--line)}
.about-mark::before{content:"CENTER PUNCH";position:absolute;font-size:clamp(3rem,7vw,7rem);font-weight:800;letter-spacing:-.06em;color:#111;white-space:nowrap;transform:rotate(-90deg)}
.about-mark img{width:min(260px,62%);position:relative;z-index:1;filter:drop-shadow(0 20px 40px #000)}
.principle-list{border-top:1px solid var(--line)}.principle-list li{font-size:clamp(1.15rem,2vw,1.65rem);padding:18px 0}

/* project pages: less template repetition, more breathing control */
.rt-hero{min-height:calc(82svh - 72px)}
.rt-hero .wrap{padding-bottom:64px}.rt-hero h1{max-width:12em}
.rt-meta-bar{background:#0d0d0d}
.rt-grid-2,.rt-grid-3,.rt-split{gap:clamp(32px,5vw,72px)}

/* contact is a final statement, not a padded form page */
.contact-hero{min-height:calc(100svh - 72px);padding:9vh 0;display:flex;align-items:center;border-bottom:0}
.contact-hero .h1{font-size:clamp(3.4rem,7vw,7rem)}

/* subtle motion only */
.media-frame img{transition:transform .8s var(--ease),filter .8s var(--ease)}
.work-tile:hover .media-frame img,.home-feature:hover .media-frame img{transform:scale(1.018)}

@media(max-width:900px){
 .page-hero .wrap{display:block}.page-hero .lede{margin-top:22px}.page-hero{padding:54px 0 44px}
 .home-feature{grid-template-columns:1fr}.home-feature .card-body{border:1px solid var(--line);border-top:0}
 .work-grid{gap:68px}.work-tile,.work-tile:nth-child(even){grid-template-columns:1fr;gap:26px}.work-tile:nth-child(even) .media-frame,.work-tile:nth-child(even) .card-body{grid-column:1;grid-row:auto}.work-tile .media-frame{min-height:0}.work-tile .card-body{max-width:650px}
 .brand-grid{grid-template-columns:1fr}.brand-cell,.brand-cell:nth-child(odd),.brand-cell:nth-child(even){padding:34px 0;border-right:0;grid-template-columns:150px 1fr}
 .about-mark{border-left:0;border-top:1px solid var(--line);min-height:320px}
}
@media(max-width:600px){
 .home-hero::before{display:none}.home-hero h1{font-size:clamp(3rem,15vw,4.8rem)}
 .home-feature .media-frame{min-height:300px}.home-feature .card-body{padding:28px 24px}
 .brand-cell,.brand-cell:nth-child(odd),.brand-cell:nth-child(even){grid-template-columns:1fr;gap:20px}.brand-logo-box{height:58px}
 section,section.tight{padding:52px 0}.work-grid{gap:58px}.work-tile .h3{font-size:2.25rem}
}

/* ===== CPM v2.1 — premium viewport composition ===== */
html{scroll-behavior:smooth;scroll-padding-top:72px}
body{background:#090909}
.wrap{max-width:1320px}
.site-header{background:rgba(7,7,7,.96);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.site-header .wrap{height:72px}

/* precise CPM registration-line language */
.home-hero,.viewport-intro{position:relative}
.home-hero::after,.viewport-intro::after{content:"";position:absolute;left:var(--pad);right:var(--pad);bottom:22px;height:1px;background:linear-gradient(90deg,var(--red) 0 46px,#292929 46px 100%);opacity:.9}
.home-hero::before{content:"01 / CENTER PUNCH";position:absolute;right:var(--pad);bottom:36px;color:#6d6d6d;font-size:.62rem;font-weight:700;letter-spacing:.22em;writing-mode:vertical-rl}

.home-hero{min-height:calc(100svh - 72px);padding:0;display:flex;align-items:center;border-bottom:0;background:#090909}
.home-hero .wrap{width:100%;padding-top:5vh;padding-bottom:10vh;position:relative}
.home-hero h1{font-size:clamp(3.8rem,7.3vw,7.6rem);line-height:.9;letter-spacing:-.065em;max-width:10.5em}
.home-hero .lede{max-width:42em;margin-top:34px;font-size:clamp(1.05rem,1.55vw,1.35rem);color:#d2d0cb}
.home-hero .hero-actions{margin-top:40px}

.scroll-cue{position:absolute;left:50%;bottom:31px;z-index:5;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:5px;color:#aaa;text-transform:uppercase;letter-spacing:.2em;font-size:.58rem;font-weight:700;transition:color .2s ease}
.scroll-cue b{font-size:1.45rem;font-weight:300;line-height:1;color:var(--white);animation:cpm-down 1.7s ease-in-out infinite}
.scroll-cue:hover{color:var(--red-bright)}
@keyframes cpm-down{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}

/* Featured work: a complete second-screen composition */
.featured-viewport{min-height:calc(100svh - 72px);padding:clamp(28px,4vh,52px) 0;display:flex;align-items:center}
.featured-viewport>.wrap{width:100%}
.featured-viewport .section-head{margin-bottom:clamp(18px,2.5vh,30px)}
.featured-viewport .section-head .h2{font-size:clamp(2rem,3.2vw,3.5rem)}
.featured-viewport .home-feature{grid-template-columns:minmax(0,1.7fr) minmax(300px,.62fr);max-height:66vh}
.featured-viewport .home-feature .media-frame{min-height:0;height:min(58vh,610px)}
.featured-viewport .home-feature .card-body{padding:clamp(26px,3vw,48px)}
.featured-viewport .home-feature .h3{font-size:clamp(1.6rem,2.35vw,2.5rem)}
.featured-viewport .home-feature p{font-size:.95rem}
.featured-viewport .home-portfolio-bridge{display:none}

/* Interior intros own the first view and stop feeling like generic headers */
.page-hero.viewport-intro{min-height:calc(100svh - 72px);padding:0;border-bottom:0;display:flex;align-items:center}
.page-hero.viewport-intro .wrap{width:100%;position:relative;display:grid;grid-template-columns:minmax(280px,.9fr) minmax(360px,1.1fr);column-gap:9vw;align-items:center;padding-bottom:7vh}
.page-hero.viewport-intro .eyebrow{grid-column:1;margin:0 0 22px}
.page-hero.viewport-intro .h1{grid-column:1;margin:0}
.page-hero.viewport-intro .lede{grid-column:2;grid-row:1 / span 2;margin:0;align-self:center;max-width:30em;font-size:clamp(1.3rem,2.1vw,2rem);line-height:1.25;color:#e8e6e1}
.work-manifesto{font-size:clamp(3.2rem,6vw,6.6rem)!important;line-height:.9!important;letter-spacing:-.06em!important}
.page-hero.viewport-intro .scroll-cue{position:fixed;position:absolute;grid-column:auto}

/* Brand wall: more gallery, less card grid */
#brand-wall{padding:54px 0 76px}
.brand-grid{grid-template-columns:repeat(4,1fr);border:0;border-top:1px solid var(--line);background:transparent}
.brand-cell{background:transparent;padding:34px 26px;gap:18px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.brand-cell:nth-child(4n){border-right:0}
.brand-logo-box{height:68px;justify-content:center}
.brand-desc{font-size:.82rem;line-height:1.45;color:#8f8f8f}

/* About: remove watermark / resume skills, replace with editorial story */
.about-premium{min-height:calc(100svh - 72px);display:flex;align-items:center;padding:0}
.about-editorial{width:100%;display:grid;grid-template-columns:.42fr 1.58fr;gap:7vw;position:relative;padding-top:7vh;padding-bottom:10vh}
.about-kicker{padding-top:12px}
.about-story{max-width:850px}
.about-story .h1{font-size:clamp(3rem,6vw,6.4rem);line-height:.92;letter-spacing:-.06em;margin-bottom:38px}
.about-story .lede{font-size:clamp(1.25rem,1.9vw,1.75rem);max-width:34em;color:#e3e1dc;margin-bottom:24px}
.about-story>p:not(.lede):not(.credo){max-width:48em}
.about-story .credo{font-size:clamp(1.9rem,3.5vw,3.8rem);line-height:1.03;font-weight:800;letter-spacing:-.045em;margin:44px 0}
.about-story .credo em{font-style:normal;color:var(--red-bright)}
.about-actions{display:flex;gap:32px;flex-wrap:wrap;margin-top:34px}
.about-principle{padding:88px 0}
.principle-statement{display:grid;grid-template-columns:.5fr 1.5fr;gap:7vw;align-items:start}
.principle-statement p{font-size:clamp(1.7rem,3.3vw,3.3rem);line-height:1.08;font-weight:700;letter-spacing:-.035em;max-width:22em;margin:0}
.principle-statement .btn{grid-column:2;justify-self:start;margin-top:8px}

@media(max-width:900px){
 .featured-viewport{min-height:auto;padding:48px 0}.featured-viewport .home-feature{max-height:none;grid-template-columns:1fr}.featured-viewport .home-feature .media-frame{height:48vh;min-height:300px}
 .page-hero.viewport-intro{min-height:calc(100svh - 72px)}.page-hero.viewport-intro .wrap{display:block;padding-bottom:11vh}.page-hero.viewport-intro .lede{margin-top:30px;max-width:28em}
 .brand-grid{grid-template-columns:repeat(2,1fr)}.brand-cell:nth-child(4n){border-right:1px solid var(--line)}.brand-cell:nth-child(2n){border-right:0}
 .about-editorial{grid-template-columns:1fr;padding-bottom:12vh}.about-kicker{padding:0}.principle-statement{grid-template-columns:1fr}.principle-statement .btn{grid-column:1}
}
@media(max-width:560px){
 .home-hero h1{font-size:clamp(3rem,14vw,4.8rem)}.home-hero .wrap{padding-bottom:14vh}.scroll-cue{bottom:25px}
 .brand-grid{grid-template-columns:1fr}.brand-cell,.brand-cell:nth-child(2n),.brand-cell:nth-child(4n){border-right:0}
 .about-story .h1{font-size:3.2rem}
}

/* ===== CPM v2.2 — viewport rhythm correction ===== */
/* Home feature: right stack may never outrun the image. */
.featured-viewport{min-height:calc(100svh - 72px);padding:34px 0 40px;align-items:center}
.featured-viewport .section-head{margin-bottom:20px}
.featured-viewport .home-feature{grid-template-columns:minmax(0,1.72fr) minmax(330px,.62fr);height:min(59vh,590px);max-height:none;align-items:stretch}
.featured-viewport .home-feature .media-frame{height:100%;min-height:0}
.featured-viewport .home-feature .card-body{height:100%;min-height:0;padding:30px 32px;display:flex;flex-direction:column;justify-content:center;gap:12px;overflow:hidden}
.featured-viewport .home-feature .h3{font-size:clamp(1.45rem,1.95vw,2.15rem);line-height:1.04;margin-bottom:4px}
.featured-viewport .home-feature p{font-size:.91rem;line-height:1.5;margin-bottom:4px}
.featured-viewport .home-feature .card-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.featured-viewport .home-feature .btn{padding:11px 16px;font-size:.8rem}
#brand-experience{padding-top:64px}

/* Work manifesto: actual CPM mark, not abbreviation. */
.work-signature{grid-column:2;grid-row:1 / span 2;align-self:center;display:flex;align-items:center;gap:15px;flex-wrap:wrap;color:#e8e6e1;font-size:clamp(1.18rem,1.8vw,1.65rem);font-weight:700;line-height:1.2}
.work-signature img{width:clamp(48px,5vw,70px);height:auto;flex:0 0 auto}
.page-hero.viewport-intro .scroll-cue{bottom:42px}

/* Work is intentionally two clean viewport stops: top two, then lower two. */
.work-projects{padding:0}
.work-stop{position:relative;min-height:calc(100svh - 72px);display:flex;align-items:center;padding:58px 0 78px;scroll-margin-top:72px}
.work-row{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(34px,4vw,62px)}
.work-row .work-tile{display:block;min-width:0}
.work-row .work-tile .media-frame{aspect-ratio:16/9;min-height:0;height:auto}
.work-row .work-tile .card-body{padding:24px 0 0;max-width:none}
.work-row .work-tile .h3{font-size:clamp(1.7rem,2.35vw,2.45rem);margin-bottom:12px}
.work-row .work-tile p{font-size:.93rem;line-height:1.52;max-width:45em}
.work-row .work-tile .card-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.work-row .work-tile .btn{padding:11px 16px;font-size:.8rem}
.work-next{bottom:24px}

/* Brands: centered hero, with the cue given its own breathing room. */
#brands-top .wrap{display:flex;flex-direction:column;align-items:center;text-align:center;justify-content:center;padding-bottom:15vh}
#brands-top .eyebrow,#brands-top .h1,#brands-top .lede{grid-column:auto;grid-row:auto}
#brands-top .lede{margin-top:24px;max-width:760px;font-size:clamp(1.15rem,1.7vw,1.55rem);line-height:1.45}
#brands-top .scroll-cue{bottom:38px}
#brand-wall{scroll-margin-top:72px;padding-top:70px}

/* About: stop shouting; one narrative, one quiet close. */
.about-premium{min-height:calc(100svh - 72px)}
.about-editorial{grid-template-columns:.34fr 1.66fr;gap:6vw;padding-top:5vh;padding-bottom:14vh}
.about-story{max-width:800px}
.about-story .h1{font-size:clamp(2.65rem,4.6vw,4.8rem);line-height:.98;letter-spacing:-.045em;margin-bottom:30px;max-width:11em}
.about-story .lede{font-size:clamp(1.15rem,1.55vw,1.45rem);line-height:1.48;margin-bottom:20px}
.about-story>p:not(.lede){font-size:1rem;max-width:47em}
.about-close{min-height:calc(100svh - 72px);display:flex;align-items:center;padding:72px 0}
.about-close-inner{display:grid;grid-template-columns:.38fr 1.62fr;gap:6vw;align-items:start;width:100%}
.about-close-copy>p{font-size:clamp(1.65rem,2.8vw,2.8rem);line-height:1.1;font-weight:700;letter-spacing:-.03em;max-width:22em;color:var(--white);margin-bottom:42px}
.about-logo-line{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:clamp(1.15rem,1.7vw,1.55rem);font-weight:700;color:#d7d5d0;margin-bottom:42px}
.about-logo-line img{width:clamp(58px,6vw,84px);height:auto}

@media(max-height:760px) and (min-width:901px){
 .featured-viewport .home-feature{height:54vh}
 .featured-viewport .home-feature .card-body{padding:22px 26px;gap:8px}
 .featured-viewport .home-feature .h3{font-size:1.55rem}.featured-viewport .home-feature p{font-size:.84rem}
 .work-stop{padding-top:38px;padding-bottom:60px}.work-row .work-tile .media-frame{aspect-ratio:2/1}.work-row .work-tile p{font-size:.86rem}.work-row .work-tile .card-body{padding-top:18px}
}
@media(max-width:900px){
 .featured-viewport .home-feature{height:auto;grid-template-columns:1fr}.featured-viewport .home-feature .media-frame{height:45vh}.featured-viewport .home-feature .card-body{height:auto;overflow:visible}
 .work-signature{display:flex;margin-top:28px}.work-stop{min-height:auto;padding:54px 0}.work-row{grid-template-columns:1fr;gap:58px}.work-next{display:none}
 #brands-top .wrap{padding-bottom:13vh;text-align:left;align-items:flex-start}.about-editorial{grid-template-columns:1fr}.about-close{min-height:auto}.about-close-inner{grid-template-columns:1fr;gap:28px}
}


/* ===== CPM v2.3 — balance, hierarchy, and optical brand sizing ===== */
/* Work hero: create more separation between manifesto and signature. */
#work-top .wrap{
  grid-template-columns:minmax(470px,1.08fr) minmax(420px,.92fr);
  column-gap:clamp(90px,10vw,170px);
}
#work-top .work-signature{
  justify-self:end;
  max-width:430px;
  flex-wrap:nowrap;
  white-space:nowrap;
}
#work-top .scroll-cue{bottom:-58px}

/* Brands hero: center the eyebrow with the headline and lower Explore. */
#brands-top .eyebrow{
  align-self:center;
  text-align:center;
  margin-bottom:24px;
}
#brands-top .scroll-cue{bottom:18px}

/* About: eyebrow belongs to the headline block, not an orphaned left rail. */
.about-editorial{
  display:block;
  max-width:920px;
  margin:0 auto;
  padding-top:7vh;
  padding-bottom:14vh;
}
.about-story{max-width:820px;margin:0 auto}
.about-story>.eyebrow{margin-bottom:24px}
.about-story .h1{max-width:12em}
.about-premium .scroll-cue{bottom:18px}

/* Brand wall: true 4x2, equal cells, logos optically balanced. */
#brand-wall{padding-top:72px;padding-bottom:88px}
.brand-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:minmax(220px,1fr);
}
.brand-cell,
.brand-cell:nth-child(odd),
.brand-cell:nth-child(even){
  padding:30px 28px 28px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  gap:22px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.brand-cell:nth-child(4n){border-right:0}
.brand-logo-box{
  width:100%;
  height:94px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.brand-logo-box img{display:block;object-fit:contain;width:auto;height:auto;max-width:100%;max-height:100%}
.brand-desc{font-size:.84rem;line-height:1.48;margin:0;color:#92918d;max-width:24em}
/* Per-logo optical scale — equal visual weight, not equal pixels. */
#gamma-led-vision .brand-logo-box img{max-width:84%;max-height:70%}
#cad-audio .brand-logo-box img{max-width:65%;max-height:78%}
#goodsell-amplifiers .brand-logo-box img{max-width:86%;max-height:86%}
#gotham-audio .brand-logo-box img{max-width:56%;max-height:88%}
#tiny-connector .brand-logo-box img{max-width:48%;max-height:92%}
#perstaff-holdings .brand-logo-box img{max-width:80%;max-height:74%}
#mogami-cable .brand-logo-box img{max-width:82%;max-height:54%}
#painting-party-events .brand-logo-box img{max-width:88%;max-height:74%}

@media(max-width:1050px){
  #work-top .wrap{grid-template-columns:1fr 1fr;column-gap:60px}
  #work-top .work-signature{white-space:normal;justify-self:end}
}
@media(max-width:900px){
  #work-top .wrap{display:block}
  #work-top .work-signature{justify-self:auto;white-space:normal;max-width:none}
  #brands-top .eyebrow{align-self:flex-start;text-align:left}
  .about-editorial{padding-left:0;padding-right:0}
  .brand-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .brand-cell:nth-child(4n){border-right:1px solid var(--line)}
  .brand-cell:nth-child(2n){border-right:0}
}
@media(max-width:560px){
  .brand-grid{grid-template-columns:1fr}
  .brand-cell,.brand-cell:nth-child(2n),.brand-cell:nth-child(4n){border-right:0}
}