/* ============================================================
   HOME — Hero carousel, intro, work scroll, wins grid, CTA
   ============================================================ */

/* Offset home content below the fixed nav */
#home { padding-top: var(--nav-h); }

/* ── Hero ── */
.hero {
  position: relative;
  height:   460px;
  overflow: hidden;
  cursor:   grab;
}
.hero:active { cursor: grabbing; }

.carousel-scene {
  position:           absolute;
  inset:              0;
  perspective:        1400px;
  perspective-origin: 50% 50%;
}

.carousel-track {
  position:        absolute;
  inset:           0;
  transform-style: preserve-3d;
}

/* Carousel cards */
.c-card {
  position:    absolute;
  width:       288px;
  height:      389px;
  border-radius: 2px;
  overflow:    hidden;
  cursor:      pointer;
  will-change: transform, opacity, filter;
}

.c-card img {
  width:       100%;
  height:      79%;
  object-fit:  cover;
  display:     block;
  background:  #1c1c1c;
}

.c-card-foot {
  height:          21%;
  background:      #0c0c0c;
  padding:         10px 13px;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
}

.c-card-artist {
  font-size:       9px;
  letter-spacing:  0.17em;
  text-transform:  uppercase;
  color:           rgba(255, 255, 255, 0.9);
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
}

.c-card-cat {
  font-size:       9px;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  color:           rgba(255, 255, 255, 0.35);
  margin-top:      3px;
  white-space:     nowrap;
  overflow:        hidden;
  text-overflow:   ellipsis;
}

.c-badge {
  position:       absolute;
  top:            10px;
  right:          10px;
  font-size:      8px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  padding:        3px 7px;
  background:     rgba(0, 0, 0, 0.75);
  border:         0.5px solid rgba(255, 255, 255, 0.17);
  color:          rgba(255, 255, 255, 0.85);
}
.c-badge.winner {
  color:        var(--gold);
  border-color: var(--gold-dim);
}

/* Hero text overlay */
.hero-overlay {
  position:        absolute;
  inset:           0;
  z-index:         20;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  pointer-events:  none;
  text-align:      center;
}

.hero-eyebrow {
  font-size:       9px;
  letter-spacing:  0.35em;
  text-transform:  uppercase;
  color:           rgba(255, 255, 255, 0.3);
  margin-bottom:   20px;
}

.hero-title {
  font-family:    var(--serif);
  font-size:      clamp(72px, 11vw, 120px);
  font-weight:    700;
  line-height:    0.88;
  letter-spacing: -0.02em;
  color:          var(--white);
  text-shadow:    0 0 100px rgba(0,0,0,1), 0 0 40px rgba(0,0,0,0.9);
}

.hero-title em {
  font-style: italic;
  color:      rgba(255, 255, 255, 0.32);
}

.hero-sub {
  font-size:      9px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.5);
  margin-top:     20px;
  padding:        0 20px;
  text-align:     center;
  line-height:    2;
  max-width:      480px;
}

.hero-label {
  position:       absolute;
  bottom:         90px;
  left:           0;
  right:          0;
  text-align:     center;
  z-index:        20;
  pointer-events: none;
  font-size:      9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.35);
}

.drag-hint {
  position:       absolute;
  bottom:         74px;
  right:          44px;
  z-index:        20;
  font-size:      8px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.18);
}

/* Stats bar */
.stats-bar {
  position:        relative;
  display:         flex;
  z-index:         20;
  border-top:      0.5px solid var(--border);
  background:      rgba(8, 8, 8, 0.72);
  backdrop-filter: blur(10px);
}

.stat-item {
  flex:         1;
  padding:      20px 16px;
  text-align:   center;
  border-right: 0.5px solid var(--border);
}
.stat-item:last-child { border-right: none; }

.stat-num {
  font-family: var(--serif);
  font-size:   28px;
  font-weight: 700;
  color:       var(--white);
  line-height: 1;
}

.stat-label {
  font-size:       8px;
  letter-spacing:  0.22em;
  text-transform:  uppercase;
  color:           var(--dim);
  margin-top:      4px;
}

/* ── Intro strip ── */
.intro-strip {
  display:     flex;
  align-items: stretch;
  border-top:  0.5px solid var(--border);
}

.intro-text {
  flex:         1;
  padding:      72px var(--gutter);
  border-right: 0.5px solid var(--border);
}

.intro-text h2 {
  font-family:   var(--serif);
  font-size:     44px;
  font-weight:   400;
  line-height:   1.15;
  margin-bottom: 24px;
}
.intro-text h2 em { font-style: italic; color: var(--dim); }

.intro-text p {
  font-size:  14px;
  color:      var(--mid);
  line-height: 1.8;
  max-width:  480px;
}

.intro-services {
  width:                   320px;
  display:                 grid;
  grid-template-columns:   1fr 1fr;
}

.svc-item {
  padding:      28px 24px;
  border-bottom: 0.5px solid var(--border);
  border-right:  0.5px solid var(--border);
  display:      flex;
  flex-direction: column;
  gap:          8px;
}
.svc-item:nth-child(even) { border-right: none; }
.svc-item:nth-child(5),
.svc-item:nth-child(6)    { border-bottom: none; }

.svc-icon  { font-size: 18px; opacity: 0.5; }
.svc-label {
  font-size:      9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          var(--mid);
}

/* ── Work scroll ── */
.work-scroll {
  display:    flex;
  gap:        2px;
  overflow-x: auto;
  padding:    0 var(--gutter) 64px;
  scrollbar-width: none;
}
.work-scroll::-webkit-scrollbar { display: none; }

.work-card {
  flex-shrink: 0;
  width:       300px;
  cursor:      pointer;
  border:      0.5px solid var(--border);
  transition:  border-color 0.2s;
}
.work-card:hover { border-color: rgba(255, 255, 255, 0.25); }

.work-card img {
  width:       100%;
  height:      380px;
  object-fit:  cover;
  background:  #1a1a1a;
  display:     block;
}

.work-card-info { padding: 18px 16px; }

.work-card-name {
  font-size:      10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.9);
  margin-bottom:  4px;
}

.work-card-cat {
  font-size:      10px;
  color:          var(--dim);
  letter-spacing: 0.08em;
}

.wtag {
  display:        inline-block;
  margin-top:     10px;
  font-size:      8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding:        3px 8px;
}
.wtag.w { border: 0.5px solid var(--gold-dim); color: var(--gold); }
.wtag.n { border: 0.5px solid rgba(255,255,255,0.18); color: var(--dim); }

/* ── Home wins grid ── */
.home-wins {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  margin:                0 var(--gutter);
  border:                0.5px solid var(--border);
}

.hw-tile {
  padding:      28px 22px;
  border-right: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  transition:   background 0.2s;
}
.hw-tile:hover              { background: rgba(255,255,255,0.03); }
.hw-tile:nth-child(4n)      { border-right: none; }

.hw-year {
  font-size:      8px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color:          rgba(255,255,255,0.2);
  margin-bottom:  10px;
}

.hw-name {
  font-size:     13px;
  font-weight:   500;
  color:         var(--white);
  margin-bottom: 3px;
}

.hw-cat {
  font-size:      11px;
  color:          var(--dim);
  letter-spacing: 0.04em;
}

.hw-status {
  display:        inline-block;
  margin-top:     12px;
  font-size:      8px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding:        3px 8px;
}
.hw-status.w { border: 0.5px solid var(--gold-dim); color: var(--gold); }
.hw-status.n { border: 0.5px solid rgba(255,255,255,0.15); color: var(--dim); }

/* ── CTA band — magazine style ── */
.cta-band {
  margin:  40px var(--gutter) 80px;
  padding: 80px var(--gutter);
  border:  0.5px solid var(--border);
}

.cta-top {
  display:       flex;
  align-items:   center;
  gap:           24px;
  margin-bottom: 48px;
}

.cta-rule {
  flex:       1;
  height:     0.5px;
  background: var(--border);
  max-width:  120px;
}

.cta-eyebrow {
  font-size:      9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color:          var(--dim);
}

.cta-headline {
  font-family:    var(--serif);
  font-size:      clamp(52px, 8vw, 110px);
  font-weight:    700;
  line-height:    0.88;
  letter-spacing: -0.025em;
  color:          var(--white);
  margin-bottom:  48px;
}

.cta-headline em {
  font-style:  italic;
  font-weight: 400;
  color:       rgba(255,255,255,0.28);
}

/* Home CTA has no body paragraph — pull buttons up to flow under headline */
#home .cta-band .cta-headline { margin-bottom: 32px; }

.cta-body {
  font-size:     14px;
  color:         var(--mid);
  max-width:     560px;
  line-height:   1.9;
  margin-bottom: 48px;
}

.cta-actions {
  display:   flex;
  gap:       16px;
  flex-wrap: wrap;
}

/* ── CREATIVE PARTNER — magazine layout ── */
.creative-partner {
  padding:    80px var(--gutter) 48px;
  border-top: 0.5px solid var(--border);
}

/* Top bar — issue number + rule */
.cp-top {
  display:     flex;
  align-items: center;
  gap:         24px;
  margin-bottom: 48px;
}

.cp-issue {
  display:    flex;
  align-items: baseline;
  gap:        12px;
  flex-shrink: 0;
}

.cp-issue-num {
  font-family:    var(--serif);
  font-size:      11px;
  color:          var(--dim);
  letter-spacing: 0.1em;
}

.cp-issue-label {
  font-size:      9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color:          var(--dim);
}

.cp-rule {
  flex:        1;
  height:      0.5px;
  background:  var(--border);
}

/* Display headline */
.cp-headline {
  display:        flex;
  flex-wrap:      wrap;
  align-items:    baseline;
  gap:            0 24px;
  margin-bottom:  64px;
  line-height:    0.88;
}

.cp-hl-word {
  font-family:    var(--serif);
  font-size:      clamp(64px, 10vw, 130px);
  font-weight:    700;
  letter-spacing: -0.025em;
  color:          var(--white);
  display:        block;
}

.cp-hl-italic {
  font-style:  italic;
  font-weight: 400;
  color:       rgba(255,255,255,0.28);
}

/* Two-column body */
.cp-body {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   80px;
  align-items:           start;
  border-top:            0.5px solid var(--border);
  padding-top:           40px;
}

.cp-col p {
  font-size:   14px;
  color:       var(--mid);
  line-height: 1.9;
}

.cp-col p.cp-lead {
  font-family:   var(--serif);
  font-size:     22px;
  font-style:    italic;
  line-height:   1.4;
  color:         var(--white);
  margin-bottom: 0;
}

.cp-col p + p { margin-top: 24px; }

.cp-capabilities {
  margin-top:  48px;
  padding-top: 24px;
  border-top:  0.5px solid var(--border);
}

.cp-cap-label {
  font-size:       8px;
  letter-spacing:  0.28em;
  text-transform:  uppercase;
  color:           var(--dim);
  margin-bottom:   14px;
}

.cp-cap-list {
  font-size:      12px;
  color:          var(--white);
  letter-spacing: 0.04em;
  line-height:    2;
}

@media (max-width: 900px) {
  .cp-headline   { margin-bottom: 40px; }
  .cp-hl-word    { font-size: clamp(48px, 12vw, 80px); }
  .cp-body       { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 600px) {
  .cp-hl-word { font-size: clamp(40px, 14vw, 64px); }
}

/* ── Hero title below carousel ── */
.hero-below {
  padding:    28px var(--gutter) 32px;
  text-align: center;
  overflow:   hidden;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
}

.hero-title-wrap {
  display:         flex;
  justify-content: center;
  align-items:     center;
}

.hero-below .hero-title {
  font-family:    var(--serif);
  font-size:      clamp(56px, 8vw, 96px);
  font-weight:    700;
  line-height:    0.92;
  letter-spacing: -0.02em;
  color:          var(--dim);
  text-align:     center;
  margin-bottom:  32px;
}

.hero-below .hero-title em {
  display:    block;
  font-style: italic;
  color:      rgba(255,255,255,0.32);
}

.hero-below .hero-lead {
  font-family:    var(--serif);
  font-size:      clamp(18px, 2.4vw, 24px);
  font-style:     italic;
  letter-spacing: 0.01em;
  line-height:    1.45;
  text-align:     center;
  max-width:      720px;
  margin:         0;
  padding:        0 var(--gutter);
  color:          var(--white);
}

.hero-cta {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             16px;
  flex-wrap:       wrap;
  margin-top:      32px;
}

.hero-cta .btn-o { margin-left: 0; }

/* ── Marquee (transform-based auto-scroll) ── */
.marquee-track {
  display:     flex;
  flex-wrap:   nowrap;
  width:       max-content;
  gap:         3px;
  will-change: transform;
}
/* Children inside a marquee must keep their size */
.work-scroll .marquee-track > .work-card,
.wg-row .marquee-track > .wg-row-item {
  flex-shrink: 0;
}
/* When a strip becomes a marquee, it is a clipping window for the track.
   The .is-marquee class (added by JS) raises specificity above pages2.css. */
.work-scroll.is-marquee,
.wg-row.is-marquee {
  overflow:        hidden;
  scroll-behavior: auto;
}
/* The track carries the gutter padding so the strip clips edge-to-edge */
.wg-row.is-marquee .marquee-track { padding-right: 3px; }

/* ============================================================
   CONTACT — magazine layout (single column, editorial)
   ============================================================ */
.contact-mag {
  max-width: 760px;
  margin:    0 auto;
  padding:   calc(var(--nav-h) + 72px) var(--gutter) 96px;
}

/* Masthead row */
.cm-top {
  display:       flex;
  align-items:   center;
  gap:           20px;
  margin-bottom: 40px;
}
.cm-issue-num {
  font-family:    var(--serif);
  font-size:      13px;
  color:          var(--dim);
  letter-spacing: 0.1em;
}
.cm-issue-label {
  font-size:      9px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color:          var(--dim);
}
.cm-rule {
  flex:       1;
  height:     0.5px;
  background: var(--border);
}

/* Display heading */
.cm-headline {
  font-family:    var(--serif);
  font-size:      clamp(48px, 8vw, 92px);
  font-weight:    700;
  line-height:    0.92;
  letter-spacing: -0.02em;
  color:          var(--white);
  margin-bottom:  32px;
}
.cm-headline em {
  font-style: italic;
  font-weight: 400;
  color:      rgba(255,255,255,0.30);
}

/* Intro paragraph */
.cm-intro {
  font-size:     15px;
  color:         var(--mid);
  line-height:   1.85;
  max-width:     520px;
  margin-bottom: 64px;
  padding-bottom: 56px;
  border-bottom: 0.5px solid var(--border);
}

/* Form spacing in the single column */
.cm-form { margin-bottom: 80px; }

/* Contact details below the form */
.cm-details-top {
  display:       flex;
  align-items:   center;
  gap:           20px;
  margin-bottom: 36px;
}
.cm-details-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   40px 64px;
}
.cm-detail {
  display:        flex;
  flex-direction: column;
  gap:            6px;
}
.cm-detail .cd-label {
  font-size:      8px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color:          var(--dim);
  margin-bottom:  4px;
}
.cm-detail .cd-link {
  font-size:   15px;
  color:       var(--white);
  transition:  color 0.2s;
  width:       fit-content;
}
.cm-detail .cd-link:hover { color: var(--gold); }
.cm-detail .cd-value {
  font-size: 15px;
  color:     var(--white);
}

@media (max-width: 600px) {
  .contact-mag      { padding: calc(var(--nav-h) + 40px) var(--gutter) 64px; }
  .cm-intro         { margin-bottom: 48px; padding-bottom: 40px; }
  .cm-form          { margin-bottom: 56px; }
  .cm-details-grid  { grid-template-columns: 1fr; gap: 28px; }
}

/* ── Contact form layout (fields styled by pages2.css) ── */
/* Only spacing tweaks for the single-column magazine arrangement;
   field appearance (.fi/.fs/.ft/.form-sub) comes from pages2.css. */
.cm-form .form-group { margin-bottom: 28px; }
.cm-form .form-sub   { width: auto; min-width: 200px; }

@media (max-width: 600px) {
  .cm-form .form-sub { width: 100%; }
}

/* ── Contact: dim placeholder + default category to match field placeholders ── */
.cm-form .fi::placeholder,
.cm-form .ft::placeholder { color: var(--dim); }

/* Select shows dimmed text while the default "Not sure yet" is selected */
.cm-form .fs.is-placeholder { color: var(--dim); }

/* ── Work page intro CTA tagline (styled like .page-h1, smaller) ── */
.work-cta-tagline {
  display:         block;
  padding:         0 var(--gutter) 56px;
  font-family:     var(--serif);
  font-size:       clamp(28px, 4vw, 44px);
  font-weight:     700;
  line-height:     0.95;
  letter-spacing:  -0.01em;
  color:           var(--white);
  transition:      color 0.2s;
}
.work-cta-tagline em {
  font-style: italic;
  color:      var(--dim);
  transition: color 0.2s;
}
.work-cta-tagline:hover,
.work-cta-tagline:hover em { color: var(--gold); }

@media (max-width: 600px) {
  .work-cta-tagline { padding-bottom: 40px; }
}