/* ============================================================
   PAGE.CSS — shared components for probuild+ inner pages
   Loaded AFTER styles.css. Uses the same :root tokens.
   ============================================================ */

/* ---------- page enter ---------- */
@keyframes pageEnter{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
.js main{ animation:pageEnter .7s var(--ease) both; }
@media (prefers-reduced-motion:reduce){ .js main{ animation:none; } }

/* ---------- page hero ---------- */
.page-hero{
  position:relative; min-height:74vh; display:flex; align-items:flex-end;
  padding:150px 0 clamp(3rem,7vw,5.5rem); overflow:hidden;
  background:
    radial-gradient(110% 80% at 85% 0%, rgba(255,91,0,.14), transparent 55%),
    var(--black);
}
.page-hero .ph-img{
  position:absolute; inset:0; z-index:0;
}
.page-hero .ph-img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.25) brightness(.4) contrast(1.06);
}
.page-hero .ph-shade{
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(7,7,10,.55) 0%, rgba(7,7,10,.25) 40%, rgba(7,7,10,.96) 100%);
}
.page-hero .hero-grid{ z-index:1; }
.ph-ghost{
  position:absolute; right:-1%; top:6%; z-index:1; pointer-events:none;
  font-family:var(--font-display); font-weight:700; line-height:.8;
  font-size:clamp(8rem,26vw,24rem); letter-spacing:-.04em;
  color:transparent; -webkit-text-stroke:1.5px rgba(255,91,0,.16);
  user-select:none;
}
.page-hero .container{ position:relative; z-index:2; }
.crumb{
  display:inline-flex; align-items:center; gap:.6rem; margin-bottom:1.4rem;
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase;
  letter-spacing:.18em; color:var(--muted-2);
}
.crumb a{ color:var(--muted); transition:color .2s var(--ease); }
.crumb a:hover{ color:var(--orange-bright); }
.crumb i{ font-style:normal; color:var(--orange); }
.ph-title{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(2.6rem,6.8vw,5.2rem); line-height:.99; letter-spacing:-.025em;
  margin-bottom:1.2rem; max-width:18ch;
}
.ph-title .hl{ color:var(--orange); }
.ph-sub{ font-size:clamp(1.02rem,1.55vw,1.25rem); color:var(--muted); max-width:62ch; }
.ph-meta{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.9rem; }
.ph-chip{
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.12em;
  color:var(--ember); padding:.45rem .85rem; border-radius:999px;
  border:1px solid rgba(255,91,0,.3); background:rgba(255,91,0,.07);
}

/* ---------- sticky subnav ---------- */
.subnav{
  position:sticky; top:0; z-index:900;
  background:rgba(10,10,13,.82); backdrop-filter:blur(14px) saturate(140%);
  border-block:1px solid var(--line);
}
.subnav .container{ display:flex; gap:.4rem; overflow-x:auto; padding-block:.7rem; scrollbar-width:none; }
.subnav .container::-webkit-scrollbar{ display:none; }
.subnav a{
  flex:none; font-family:var(--font-mono); font-size:.74rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--muted); padding:.5rem .95rem; border-radius:999px;
  border:1px solid transparent; transition:color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
  white-space:nowrap;
}
.subnav a:hover{ color:#fff; background:rgba(255,255,255,.05); }
.subnav a.active{ color:var(--orange-bright); border-color:rgba(255,91,0,.4); background:rgba(255,91,0,.08); }

/* ---------- sections ---------- */
.page-section{ padding-block:clamp(4rem,9vw,7rem); background:var(--bg); }
.page-section.alt{ background:var(--bg-2); }
.page-section.dark{ background:var(--black); }

/* ---------- split layout ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.split.wide-left{ grid-template-columns:1.25fr .75fr; }
.sticky-col{ position:sticky; top:96px; }

/* ---------- feature grid ---------- */
.fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.fgrid.cols2{ grid-template-columns:repeat(2,1fr); }
.fcard{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:1.9rem 1.7rem; overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.fcard:hover{ transform:translateY(-5px); border-color:rgba(255,91,0,.35); box-shadow:var(--glow-soft); }
.fnum{ font-family:var(--font-mono); font-size:.8rem; color:var(--orange); letter-spacing:.12em; margin-bottom:1rem; display:block; }
.fcard h3{ font-family:var(--font-display); font-size:1.18rem; letter-spacing:-.01em; margin-bottom:.55rem; }
.fcard p{ color:var(--muted); font-size:.95rem; }

/* ---------- vertical timeline ---------- */
.tl{ display:flex; flex-direction:column; }
.tl-item{
  display:grid; grid-template-columns:96px 1fr; gap:1.6rem;
  padding-block:2rem; border-top:1px solid var(--line); position:relative;
}
.tl-item:last-child{ border-bottom:1px solid var(--line); }
.tl-num{
  font-family:var(--font-display); font-weight:700; font-size:2.6rem; line-height:1;
  background:var(--grad-orange); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.tl-body h3{ font-family:var(--font-display); font-size:1.3rem; margin-bottom:.5rem; letter-spacing:-.01em; }
.tl-body p{ color:var(--muted); max-width:64ch; }
.tl-tag{
  display:inline-block; margin-top:.8rem; font-family:var(--font-mono); font-size:.7rem;
  text-transform:uppercase; letter-spacing:.14em; color:var(--ember);
  padding:.3rem .7rem; border:1px solid rgba(255,91,0,.25); border-radius:999px; background:rgba(255,91,0,.06);
}

/* ---------- accordion ---------- */
.acc{ border-top:1px solid var(--line); }
.acc-item{ border-bottom:1px solid var(--line); }
.acc-q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  padding:1.45rem 0; cursor:pointer; background:none; border:none; text-align:left;
  font-family:var(--font-display); font-weight:600; font-size:1.12rem; color:var(--text);
  transition:color .25s var(--ease);
}
.acc-q:hover{ color:var(--orange-bright); }
.acc-x{
  flex:none; width:30px; height:30px; border-radius:50%; position:relative;
  border:1px solid var(--line-strong); transition:transform .4s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.acc-x::before, .acc-x::after{
  content:""; position:absolute; left:50%; top:50%; width:12px; height:1.6px;
  background:var(--orange); transform:translate(-50%,-50%);
}
.acc-x::after{ transform:translate(-50%,-50%) rotate(90deg); transition:transform .35s var(--ease); }
.acc-item.open .acc-x{ transform:rotate(45deg); border-color:var(--orange); background:rgba(255,91,0,.08); }
.acc-a{ max-height:0; overflow:hidden; transition:max-height .55s var(--ease); }
.acc-a > div{ padding:0 0 1.6rem; color:var(--muted); max-width:70ch; }
.acc-a a{ color:var(--orange-bright); }

/* ---------- callout ---------- */
.callout{
  border-left:3px solid var(--orange); border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  background:rgba(255,91,0,.05); padding:1.6rem 1.8rem; margin-block:2rem;
}
.callout p{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(1.1rem,1.8vw,1.4rem); line-height:1.4; color:#fff;
}
.callout .co-src{ display:block; margin-top:.8rem; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted-2); }

/* ---------- spec table ---------- */
.spec-table{ width:100%; border-collapse:collapse; }
.spec-table th{
  font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--orange); text-align:left; padding:.9rem 1rem; border-bottom:1px solid var(--line-strong);
}
.spec-table td{ padding:1rem; border-bottom:1px solid var(--line); color:var(--muted); font-size:.95rem; vertical-align:top; }
.spec-table td:first-child{ color:var(--text); font-weight:500; }
.spec-table tr:hover td{ background:rgba(255,255,255,.02); }

/* ---------- versus cards ---------- */
.vs{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.vs-card{
  padding:2.1rem 1.9rem; border-radius:var(--radius); border:1px solid var(--line);
  background:var(--surface);
}
.vs-card.hot{
  border-color:rgba(255,91,0,.45);
  background:linear-gradient(180deg, rgba(255,91,0,.09), var(--surface));
  box-shadow:var(--glow-soft);
}
.vs-card h3{ font-family:var(--font-display); font-size:1.3rem; margin-bottom:.4rem; }
.vs-kicker{ display:block; font-family:var(--font-mono); font-size:.7rem; text-transform:uppercase; letter-spacing:.16em; color:var(--muted-2); margin-bottom:1rem; }
.vs-card.hot .vs-kicker{ color:var(--ember); }
.vs-card ul{ margin-top:1.2rem; display:flex; flex-direction:column; gap:.7rem; }
.vs-card li{ display:flex; gap:.65rem; align-items:flex-start; color:var(--muted); font-size:.95rem; }
.vs-card li::before{ content:"—"; color:var(--orange); flex:none; }

/* ---------- image banner ---------- */
.img-banner{
  position:relative; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); margin-block:1rem;
}
.img-banner img{
  width:100%; height:clamp(280px,46vw,520px); object-fit:cover;
  filter:grayscale(.3) brightness(.65) contrast(1.05);
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
.img-banner:hover img{ transform:scale(1.04); filter:grayscale(0) brightness(.72) contrast(1.05); }
.ib-cap{
  position:absolute; left:1.4rem; bottom:1.2rem; z-index:2;
  font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em;
  color:#fff; background:rgba(7,7,10,.55); backdrop-filter:blur(8px);
  padding:.45rem .8rem; border-radius:999px; border:1px solid var(--line);
}
.img-banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(7,7,10,.75)); }

/* ---------- case studies (projects page) ---------- */
.case{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem);
  align-items:center; padding-block:clamp(3rem,7vw,5rem);
  border-top:1px solid var(--line);
}
.case:first-of-type{ border-top:none; }
.case.flip .case-img{ order:2; }
.case-img{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); }
.case-img img{
  width:100%; height:clamp(280px,34vw,460px); object-fit:cover;
  filter:grayscale(.3) brightness(.68) contrast(1.05);
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
.case:hover .case-img img{ transform:scale(1.05); filter:grayscale(0) brightness(.75); }
.case-meta{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.1rem; }
.case-body h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.6rem,3vw,2.3rem); letter-spacing:-.02em; margin-bottom:.9rem; }
.case-body p{ color:var(--muted); margin-bottom:1rem; }
.case-stats{ display:flex; gap:2rem; margin-top:1.6rem; padding-top:1.4rem; border-top:1px solid var(--line); }
.case-stat strong{ display:block; font-family:var(--font-display); font-weight:700; font-size:1.6rem; color:#fff; line-height:1; }
.case-stat span{ font-size:.8rem; color:var(--muted-2); margin-top:.3rem; display:block; }

/* ---------- inline CTA band ---------- */
.cta-band{
  position:relative; overflow:hidden; border-top:1px solid var(--line);
  background:radial-gradient(80% 120% at 50% 0%, rgba(255,91,0,.12), transparent 60%), var(--black);
  padding-block:clamp(4rem,9vw,7rem);
}
.cta-band .container{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2rem; }
.cta-band h2{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.9rem,4vw,3.1rem); letter-spacing:-.02em; line-height:1.06; max-width:22ch;
}
.cta-band .cb-actions{ display:flex; gap:1rem; flex-wrap:wrap; }

/* ---------- prose helpers ---------- */
.prose p{ color:var(--muted); margin-bottom:1.1rem; max-width:68ch; }
.prose p strong{ color:var(--text); }
.prose h3{ font-family:var(--font-display); font-size:1.35rem; letter-spacing:-.01em; margin:2rem 0 .8rem; }
.lead-xl{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(1.4rem,2.8vw,2.1rem); line-height:1.25; letter-spacing:-.015em; color:#fff;
  max-width:30ch;
}

/* ---------- project grid (more projects) ---------- */
.proj-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; margin-top:3rem; }
.proj-card{
  display:flex; flex-direction:column; overflow:hidden; position:relative;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  transition:transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.proj-card:hover{ transform:translateY(-6px); border-color:rgba(255,91,0,.4); box-shadow:var(--glow-soft); }
.pc-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:#0c0c10; }
.pc-media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.25) brightness(.82) contrast(1.04);
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
.proj-card:hover .pc-media img{ transform:scale(1.05); filter:grayscale(0) brightness(.9); }
.pc-media::after{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, transparent 55%, rgba(7,7,10,.5)); }
.pc-info{ padding:1.5rem 1.6rem 1.7rem; }
.pc-info .case-meta{ margin-bottom:.9rem; }
.pc-info h3{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; letter-spacing:-.015em; margin-bottom:.6rem; }
.pc-info p{ color:var(--muted); font-size:.95rem; line-height:1.5; }
.pc-loc{ display:block; margin-top:1rem; font-family:var(--font-mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.14em; color:var(--muted-2); }

/* ---------- hover photo-burst (projects without a film) ---------- */
.proj-card.has-burst:hover{ overflow:visible; z-index:5; }
.pc-burst{
  position:absolute; top:0; left:0; right:0; aspect-ratio:16/10;
  pointer-events:none; z-index:4;
}
.pc-burst-img{
  position:absolute; top:50%; left:50%;
  width:9rem; aspect-ratio:4/3; object-fit:cover;
  border-radius:9px; border:1px solid rgba(255,255,255,.18);
  box-shadow:0 18px 42px rgba(0,0,0,.6);
  transform:translate(-50%,-50%) scale(.34);
  opacity:0; filter:blur(7px) brightness(.82);
  transition:transform .6s var(--ease), opacity .45s var(--ease), filter .55s var(--ease);
}
.has-burst:hover .pc-burst-img{
  opacity:1; filter:blur(0) brightness(1);
  transform:translate(-50%,-50%) translate(var(--x),var(--y)) rotate(var(--r)) scale(1);
  transition-delay:calc(var(--i) * 55ms);
}
.pc-burst-badge{
  position:absolute; z-index:3; left:1rem; bottom:1rem;
  display:inline-flex; align-items:center; gap:.4rem;
  font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.14em;
  color:#fff; background:rgba(7,7,10,.62); border:1px solid rgba(255,255,255,.2);
  padding:.34rem .62rem; border-radius:999px; backdrop-filter:blur(6px);
  transition:opacity .3s var(--ease);
}
.has-burst:hover .pc-burst-badge{ opacity:0; }
@media (hover:none){ .pc-burst{ display:none; } }

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .fgrid{ grid-template-columns:1fr 1fr; }
  .split, .split.wide-left{ grid-template-columns:1fr; }
  .sticky-col{ position:static; }
  .vs{ grid-template-columns:1fr; }
  .case{ grid-template-columns:1fr; }
  .case.flip .case-img{ order:0; }
}
@media (max-width:680px){
  .fgrid, .fgrid.cols2{ grid-template-columns:1fr; }
  .proj-grid{ grid-template-columns:1fr; }
  .tl-item{ grid-template-columns:56px 1fr; gap:1rem; }
  .tl-num{ font-size:1.9rem; }
  .page-hero{ min-height:62vh; }
  .ph-ghost{ font-size:7rem; opacity:.7; }
  .case-stats{ gap:1.2rem; flex-wrap:wrap; }
  .spec-table{ display:block; overflow-x:auto; }
}