/* ══════════════════════════════════════════════════════════
   INNER PAGES — shared styles for About / Work / Contact
   (loaded alongside base.css + home.css, which already provide
   the reusable section components: process-flow, philosophy-
   section, cta-banner, work-grid, cap-list, marquee, intro-list)
══════════════════════════════════════════════════════════ */

/* ── Page hero (non-home pages) ── */
.page-hero {
  position:relative; padding:clamp(150px,24vh,220px) clamp(20px,6vw,80px) clamp(70px,11vh,110px);
  overflow:hidden; text-align:center;
}
.page-hero::before {
  content:''; position:absolute; left:50%; top:30%; width:900px; height:900px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, var(--teal-a08) 0%, transparent 65%);
  pointer-events:none;
}
.page-hero-inner { position:relative; z-index:2; max-width:820px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:22px; }
.page-hero .eyebrow { justify-content:center; }
.page-hero-title { text-align:center; }
.page-hero-sub { max-width:560px; text-align:center; }

/* ── Small live-clock strip (echoes the hero clock on every inner page) ── */
.page-clock { display:inline-flex; align-items:center; gap:8px; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); opacity:.6; }
.page-clock-dot { width:5px; height:5px; border-radius:50%; background:var(--teal); animation:pulseDot 2s ease-in-out infinite; }
@keyframes pulseDot { 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

/* ── Closing question (About / Philosophy) ── */
.philosophy-question {
  font-family:var(--font-head); font-weight:300; font-style:italic;
  font-size:clamp(24px,3.6vw,40px); margin-top:4px;
}
.philosophy-question em { color:var(--teal); }

/* ── Punchy manifesto-style short lines (reuses .intro-line look, standalone) ── */
.punch-lines { display:flex; flex-direction:column; gap:10px; margin:22px 0; }
.punch-lines p {
  font-family:var(--font-head); font-weight:300; font-style:italic;
  font-size:clamp(18px,2.4vw,26px); line-height:1.4; color:var(--teal);
}
.punch-lines.plain p { font-style:normal; color:var(--light); opacity:.85; }

/* ── Two-column story layout ── */
.story-grid { display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(40px,6vw,90px); align-items:start; }
@media (max-width:860px) { .story-grid { grid-template-columns:1fr; gap:36px; } }

/* ── Contact details ── */
.contact-details {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(28px,4vw,56px);
  margin-top:46px; padding-top:40px; border-top:1px solid var(--teal-a08);
}
.contact-detail-label { font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--teal); opacity:.7; margin-bottom:14px; }
.contact-detail-value { font-family:var(--font-head); font-weight:300; font-size:clamp(17px,1.8vw,22px); line-height:1.5; }
.contact-detail-value a { transition:color .3s; }
.contact-detail-value a:hover { color:var(--teal); }
@media (max-width:700px) { .contact-details { grid-template-columns:1fr; gap:32px; } }

/* ── Contact form ── */
.contact-form { margin-top:10px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:34px 40px; }
.form-group { display:flex; flex-direction:column; gap:10px; }
.form-group.full { grid-column:1 / -1; }
.form-label { font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--teal); opacity:.75; }
.form-input, .form-textarea {
  background:transparent; border:none; border-bottom:1px solid var(--teal-a20);
  color:var(--light); font-family:var(--font-body); font-size:14px; font-weight:300;
  padding:10px 2px; transition:border-color .35s ease;
}
.form-input::placeholder, .form-textarea::placeholder { color:var(--light); opacity:.3; }
.form-input:focus, .form-textarea:focus { outline:none; border-color:var(--teal); }
.form-textarea { resize:vertical; min-height:110px; line-height:1.7; }

.chip-group { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.chip { position:relative; }
.chip input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.chip label {
  display:inline-flex; align-items:center; padding:9px 18px;
  border:1px solid var(--teal-a20); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--light); opacity:.6; cursor:pointer; transition:all .3s ease;
}
.chip input:checked + label { color:var(--dark); background:var(--teal); border-color:var(--teal); opacity:1; }
.chip label:hover { border-color:var(--teal-a50); opacity:.9; }

@media (max-width:560px) {
  /* Pill labels vary a lot in length ("PR" vs "VIDEO PRODUCTION"), which
     makes a plain flex-wrap row land unevenly on narrow screens — a 2-up
     grid keeps every row balanced regardless of label length. */
  .chip-group { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .chip label { width:100%; justify-content:center; text-align:center; }
}

.form-submit-row { margin-top:38px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.form-submit {
  padding:14px 40px; border:1px solid var(--teal); background:var(--teal); color:var(--dark);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; cursor:pointer;
  transition:background .3s, color .3s, opacity .3s;
}
.form-submit:hover { background:transparent; color:var(--teal); }
.form-submit:disabled { opacity:.5; cursor:default; }
.form-status { font-size:11.5px; letter-spacing:.04em; opacity:.7; }
.form-status.ok { color:var(--teal); }
.form-status.err { color:#e0a5a5; }

@media (max-width:700px) {
  .form-grid { grid-template-columns:1fr; }
}

/* ── Work category rows reuse .cap-list / .cap-row from home.css ── */
.category-list { margin-top:40px; }

/* ── Case study CTA (variant of cta-banner) ── */
.case-cta { background:var(--dark-2); }

/* ── Work grid filter pills ── */
.filter-pills {
  display:flex; flex-wrap:wrap; gap:10px; margin:40px 0 44px;
}
.filter-pill {
  padding:9px 20px; border:1px solid var(--teal-a20); background:transparent;
  color:var(--light); opacity:.55; font-family:var(--font-body);
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  cursor:pointer; transition:all .3s ease;
}
.filter-pill:hover { opacity:.9; border-color:var(--teal-a50); }
.filter-pill.active { background:var(--teal); border-color:var(--teal); color:var(--dark); opacity:1; }

/* ══════════════════════════════════════
   PROJECT CASE-STUDY PAGE (work/project.html)
══════════════════════════════════════ */
.back-link {
  display:inline-flex; align-items:center; gap:8px; margin-bottom:28px;
  font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--teal); opacity:.75;
  transition:opacity .3s;
}
.back-link:hover { opacity:1; }

.project-hero-media {
  position:relative; width:100%; height:min(78vh, 720px); min-height:340px;
  overflow:hidden; background:var(--dark-2); margin-top:78px;
}
.project-hero-media img { width:100%; height:100%; object-fit:cover; }

/* Shared width/inset frame for everything below the full-bleed hero image —
   one system (padding for narrow screens, max-width+auto-margin for very
   wide ones) so the info block and the gallery always share the same left
   edge, at every viewport, instead of each computing its own inset. */
.project-frame {
  box-sizing:content-box; /* so max-width caps CONTENT only — the site resets
    box-sizing to border-box globally, which would otherwise count this
    element's own padding against its max-width and double the inset */
  padding:0 clamp(20px,6vw,80px); max-width:1280px; margin:0 auto;
}

.project-info { padding-top:56px; padding-bottom:20px; }
.project-title { margin:14px 0 30px; }

.project-meta-row {
  display:flex; flex-wrap:wrap; gap:clamp(28px,4vw,60px);
  padding:26px 0; margin-bottom:26px;
  border-top:1px solid var(--teal-a08); border-bottom:1px solid var(--teal-a08);
}
.project-meta-label { display:block; font-size:9.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--teal); opacity:.7; margin-bottom:8px; }
.project-meta-val { display:block; font-family:var(--font-head); font-weight:300; font-size:16px; }

.project-desc { max-width:640px; }
.project-result {
  margin-top:22px; font-family:var(--font-head); font-style:italic; font-weight:300;
  font-size:clamp(18px,2.2vw,24px); color:var(--teal);
}

.project-gallery {
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  margin:60px 0 0;
}
.project-gallery-img { aspect-ratio:4/3; overflow:hidden; background:var(--dark-2); }
.project-gallery-img img { width:100%; height:100%; object-fit:cover; }
.project-gallery-img:first-child:nth-last-child(1) { grid-column:1 / -1; aspect-ratio:16/9; }

.next-project {
  display:flex; flex-direction:column; align-items:center; gap:14px; text-align:center;
  padding:clamp(80px,12vh,130px) 24px; margin-top:60px;
  border-top:1px solid var(--teal-a08); transition:background .4s ease;
}
.next-project:hover { background:var(--dark-2); }
.next-project-label { font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--teal); opacity:.7; }
.next-project-title { font-family:var(--font-head); font-weight:300; font-size:clamp(30px,5vw,58px); }

@media (max-width:700px) {
  .project-gallery { grid-template-columns:1fr; }
  .project-gallery-img:first-child:nth-last-child(1) { aspect-ratio:4/3; }
  .project-hero-media { height:52vh; margin-top:64px; }
  /* Client/Year/Category/Services vary in value length, so a plain
     flex-wrap row lands unevenly (e.g. Services stranded alone on its
     own line) — a fixed 2-up grid keeps every pair aligned instead. */
  .project-meta-row { display:grid; grid-template-columns:1fr 1fr; gap:22px 20px; }
}