/* =========================================================
   SPIRE DIMENSIONS — PROJECT MANAGEMENT PAGE
========================================================= */

:root {
    --pm-black: #080908;
    --pm-dark: #10110f;
    --pm-dark-2: #171713;
    --pm-cream: #f2eee5;
    --pm-cream-2: #e8e0d2;
    --pm-gold: #c5a46d;
    --pm-gold-light: #e0c68e;
    --pm-ink: #171712;
    --pm-muted: #77736b;
    --pm-line: rgba(197,164,109,.24);
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
.pm-hero,.pm-intro,.pm-scope,.pm-control,.pm-process,.pm-projects,.pm-cta { overflow: hidden; }

/* HERO */
.pm-hero {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    background:
        radial-gradient(circle at 80% 22%, rgba(197,164,109,.13), transparent 31%),
        radial-gradient(circle at 18% 82%, rgba(255,255,255,.035), transparent 30%),
        var(--pm-black);
    color: #fff;
}
.pm-grid {
    position:absolute; inset:0; opacity:.11; pointer-events:none;
    background-image: linear-gradient(rgba(255,255,255,.11) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.11) 1px,transparent 1px);
    background-size:80px 80px;
    mask-image:linear-gradient(to bottom,#000 0%,rgba(0,0,0,.75) 62%,transparent 100%);
}
.pm-glow { position:absolute; width:620px; height:620px; right:-250px; top:-170px; border:1px solid rgba(197,164,109,.12); border-radius:50%; box-shadow:0 0 0 90px rgba(197,164,109,.025),0 0 0 180px rgba(197,164,109,.018); }
.pm-watermark { position:absolute; left:-40px; bottom:10px; font:400 clamp(80px,13vw,210px)/.8 "Playfair Display",serif; letter-spacing:-7px; color:rgba(255,255,255,.018); white-space:nowrap; user-select:none; }
.pm-hero-layout { position:relative; z-index:2; display:grid; grid-template-columns:1fr .95fr; gap:clamp(50px,7vw,110px); align-items:center; padding-top:155px; padding-bottom:110px; }
.pm-eyebrow { display:flex; align-items:center; gap:14px; color:var(--pm-gold-light); font-size:10px; letter-spacing:4px; text-transform:uppercase; }
.pm-eyebrow > span { width:36px; height:1px; background:var(--pm-gold); }
.pm-title { margin:30px 0 0; max-width:820px; font:400 clamp(62px,7vw,112px)/.9 "Playfair Display",serif; letter-spacing:-4px; }
.pm-title em { color:var(--pm-gold); font-weight:400; }
.pm-lead { max-width:620px; margin-top:34px; color:rgba(255,255,255,.61); font-size:15px; line-height:1.9; }
.pm-actions { display:flex; align-items:center; gap:28px; margin-top:34px; flex-wrap:wrap; }
.pm-primary { background:var(--pm-gold); border-color:var(--pm-gold); color:#111; z-index:1; }
.pm-primary::before { background:#fff; }
.pm-primary span { transition:transform .3s ease; }
.pm-primary:hover span { transform:translate(4px,-4px); }
.pm-text-link { display:inline-flex; align-items:center; gap:11px; padding-bottom:7px; border-bottom:1px solid rgba(255,255,255,.34); color:rgba(255,255,255,.78); font-size:10px; letter-spacing:2px; text-transform:uppercase; transition:.3s ease; }
.pm-text-link:hover { color:var(--pm-gold-light); border-color:var(--pm-gold); }
.pm-hero-meta { display:grid; grid-template-columns:repeat(4,1fr); margin-top:54px; max-width:650px; border-top:1px solid rgba(255,255,255,.1); }
.pm-hero-meta div { padding:18px 18px 0 0; }
.pm-hero-meta strong { display:block; color:var(--pm-gold); font:400 20px "Playfair Display",serif; }
.pm-hero-meta span { display:block; margin-top:6px; color:rgba(255,255,255,.44); font-size:8px; letter-spacing:1.2px; text-transform:uppercase; }

/* DASHBOARD */
.pm-dashboard { position:relative; padding:29px; background:rgba(18,19,17,.94); border:1px solid rgba(197,164,109,.35); box-shadow:0 40px 90px rgba(0,0,0,.45); }
.pm-dashboard::before { content:""; position:absolute; inset:12px; border:1px solid rgba(255,255,255,.06); pointer-events:none; }
.pm-dashboard-head { position:relative; z-index:2; display:flex; justify-content:space-between; gap:25px; align-items:flex-start; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.09); }
.pm-dashboard-head small { color:var(--pm-gold-light); font-size:8px; letter-spacing:2.1px; }
.pm-dashboard-head h2 { margin:8px 0 0; font:400 31px "Playfair Display",serif; }
.pm-live { display:flex; align-items:center; gap:7px; padding:7px 10px; border:1px solid rgba(197,164,109,.28); color:rgba(255,255,255,.58); font-size:7px; letter-spacing:1.4px; }
.pm-live i { width:6px; height:6px; border-radius:50%; background:#91a66a; box-shadow:0 0 0 4px rgba(145,166,106,.1); }
.pm-progress-block { position:relative; z-index:2; margin-top:26px; }
.pm-progress-top { display:flex; justify-content:space-between; gap:20px; color:rgba(255,255,255,.6); font-size:9px; letter-spacing:1.2px; text-transform:uppercase; }
.pm-progress-top strong { color:var(--pm-gold-light); font:400 20px "Playfair Display",serif; }
.pm-progress { height:5px; margin-top:12px; background:rgba(255,255,255,.08); overflow:hidden; }
.pm-progress span { display:block; width:68%; height:100%; background:linear-gradient(90deg,#8d6a3c,var(--pm-gold-light)); }
.pm-stats { position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:25px; background:rgba(255,255,255,.08); }
.pm-stats div { padding:17px; background:#121310; }
.pm-stats small { display:block; color:rgba(255,255,255,.38); font-size:7px; letter-spacing:1.5px; }
.pm-stats strong { display:block; margin-top:8px; color:#fff; font-size:12px; font-weight:500; }
.pm-stats span { display:block; margin-top:6px; color:rgba(255,255,255,.35); font-size:8px; }
.pm-timeline { position:relative; z-index:2; margin-top:26px; border-top:1px solid rgba(255,255,255,.08); }
.pm-timeline-head,.pm-timeline-row { display:grid; grid-template-columns:34px 1fr auto; gap:12px; align-items:center; }
.pm-timeline-head { padding:12px 0 8px 46px; color:rgba(255,255,255,.3); font-size:7px; letter-spacing:1.3px; }
.pm-timeline-head span:last-child { text-align:right; }
.pm-timeline-row { padding:12px 0; border-top:1px solid rgba(255,255,255,.06); }
.pm-timeline-row b { display:grid; place-items:center; width:27px; height:27px; border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.38); font-size:7px; font-weight:500; }
.pm-timeline-row span { color:rgba(255,255,255,.65); font-size:9px; }
.pm-timeline-row small { color:rgba(255,255,255,.3); font-size:6px; letter-spacing:1.2px; }
.pm-timeline-row.done b,.pm-timeline-row.active b { border-color:var(--pm-gold); color:var(--pm-gold-light); }
.pm-timeline-row.active span,.pm-timeline-row.active small { color:var(--pm-gold-light); }
.pm-scroll { position:absolute; z-index:4; right:28px; bottom:34px; display:flex; align-items:center; gap:12px; writing-mode:vertical-rl; color:rgba(255,255,255,.3); font-size:8px; letter-spacing:2px; text-transform:uppercase; }
.pm-scroll span { width:1px; height:45px; background:rgba(197,164,109,.62); }

/* MARQUEE */
.pm-marquee { overflow:hidden; background:var(--pm-gold); color:#17130e; }
.pm-marquee-track { width:max-content; display:flex; gap:34px; align-items:center; padding:14px 0; animation:pmMarquee 30s linear infinite; }
.pm-marquee span { font-size:9px; letter-spacing:3px; font-weight:600; }
.pm-marquee b { font-size:8px; opacity:.7; }
@keyframes pmMarquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* INTRO */
.pm-intro { background:var(--pm-cream); color:var(--pm-ink); }
.pm-intro-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(55px,9vw,150px); align-items:start; }
.pm-intro .section-label,.pm-scope .section-label,.pm-process .section-label,.pm-projects .section-label,.pm-control .section-label { color:#94733f; }
.pm-large-copy { margin:0 0 25px; font:400 clamp(28px,3vw,47px)/1.2 "Playfair Display",serif; color:#242017; }
.pm-intro-copy .text { max-width:700px; }
.pm-signature { display:flex; align-items:center; gap:16px; margin-top:30px; }
.pm-signature span { width:55px; height:1px; background:#a17d48; }
.pm-signature small { color:#8c7758; font-size:8px; letter-spacing:2px; }

/* SCOPE */
.pm-scope { background:#11120f; color:#fff; }
.pm-scope .section-title { color:#fff; }
.pm-scope .section-title em { color:var(--pm-gold); }
.pm-section-head { display:grid; grid-template-columns:1fr .7fr; gap:55px; align-items:end; margin-bottom:55px; }
.pm-section-head .text { color:rgba(255,255,255,.48); }
.pm-scope-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(255,255,255,.09); border-left:1px solid rgba(255,255,255,.09); }
.pm-card { min-height:300px; padding:34px; border-right:1px solid rgba(255,255,255,.09); border-bottom:1px solid rgba(255,255,255,.09); transition:background .35s ease,transform .35s ease; }
.pm-card:hover { background:rgba(197,164,109,.08); }
.pm-card > span { color:var(--pm-gold); font:400 23px "Playfair Display",serif; }
.pm-card small { display:block; margin-top:30px; color:rgba(255,255,255,.35); font-size:7px; letter-spacing:2px; }
.pm-card h3 { margin:11px 0 14px; font:400 25px/1.15 "Playfair Display",serif; }
.pm-card p { margin:0; color:rgba(255,255,255,.5); font-size:13px; line-height:1.8; }

/* CONTROL */
.pm-control { background:var(--pm-cream); color:var(--pm-ink); }
.pm-control-layout { display:grid; grid-template-columns:1.03fr .97fr; gap:clamp(55px,8vw,120px); align-items:center; }
.pm-control-visual { position:relative; min-height:590px; overflow:hidden; }
.pm-control-visual img { width:100%; height:590px; object-fit:cover; filter:saturate(.68) contrast(1.02); }
.pm-control-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.65),transparent 55%); }
.pm-control-caption { position:absolute; left:30px; right:30px; bottom:28px; display:flex; justify-content:space-between; gap:20px; color:rgba(255,255,255,.72); font-size:7px; letter-spacing:2px; }
.pm-control-copy .text { margin-top:25px; }
.pm-control-list { margin-top:32px; border-top:1px solid rgba(23,23,18,.14); }
.pm-control-list div { display:grid; grid-template-columns:48px 1fr; gap:18px; padding:19px 0; border-bottom:1px solid rgba(23,23,18,.12); }
.pm-control-list span { color:#a27c44; font:400 17px "Playfair Display",serif; }
.pm-control-list p { margin:0; color:#6f695e; font-size:13px; line-height:1.65; }
.pm-control-list strong { color:#201d17; font-weight:600; }

/* PROCESS */
.pm-process { background:#ebe5da; color:var(--pm-ink); }
.pm-process-heading { margin-bottom:48px; }
.pm-process-list { border-top:1px solid rgba(23,23,18,.18); }
.pm-process-row { display:grid; grid-template-columns:70px 1.05fr 1.15fr 32px; gap:28px; align-items:center; padding:28px 0; border-bottom:1px solid rgba(23,23,18,.16); transition:padding-left .3s ease,background .3s ease; }
.pm-process-row:hover { padding-left:12px; background:rgba(255,255,255,.22); }
.pm-no { color:#a27c44; font:400 24px "Playfair Display",serif; }
.pm-process-row small { color:#9a8767; font-size:7px; letter-spacing:1.6px; }
.pm-process-row h3 { margin:6px 0 0; font:400 25px "Playfair Display",serif; }
.pm-process-row p { margin:0; color:#6f695f; font-size:12px; line-height:1.7; }
.pm-arrow { color:#a27c44; font-size:19px; text-align:right; }

/* PROJECT TYPES */
.pm-projects { background:#0c0d0b; color:#fff; }
.pm-projects .section-title { color:#fff; }
.pm-projects .section-title em { color:var(--pm-gold); }
.pm-projects-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(50px,8vw,120px); align-items:start; }
.pm-inline-link { display:inline-flex; gap:10px; align-items:center; margin-top:30px; padding-bottom:7px; border-bottom:1px solid rgba(255,255,255,.24); color:rgba(255,255,255,.65); font-size:9px; letter-spacing:1.7px; text-transform:uppercase; }
.pm-project-grid { display:grid; grid-template-columns:repeat(2,1fr); border-top:1px solid rgba(255,255,255,.09); border-left:1px solid rgba(255,255,255,.09); }
.pm-project-card { min-height:230px; padding:28px; border-right:1px solid rgba(255,255,255,.09); border-bottom:1px solid rgba(255,255,255,.09); }
.pm-project-card span { color:var(--pm-gold); font:400 20px "Playfair Display",serif; }
.pm-project-card h3 { margin:35px 0 10px; font:400 24px "Playfair Display",serif; }
.pm-project-card p { margin:0; color:rgba(255,255,255,.44); font-size:12px; line-height:1.7; }

/* CTA */
.pm-cta { position:relative; overflow:hidden; background:#15140f; color:#fff; }
.pm-cta-lines { position:absolute; inset:0; opacity:.08; background-image:linear-gradient(90deg,transparent 49.8%,rgba(255,255,255,.4) 50%,transparent 50.2%),linear-gradient(transparent 49.8%,rgba(255,255,255,.3) 50%,transparent 50.2%); background-size:150px 150px; }
.pm-cta-content { position:relative; z-index:2; padding-top:115px; padding-bottom:120px; }
.pm-cta h2 { margin:28px 0 0; max-width:900px; font:400 clamp(58px,8vw,120px)/.9 "Playfair Display",serif; letter-spacing:-4px; }
.pm-cta h2 em { color:var(--pm-gold); font-weight:400; }
.pm-cta p { max-width:610px; margin:30px 0 0; color:rgba(255,255,255,.52); font-size:14px; line-height:1.8; }
.pm-cta-actions { display:flex; gap:28px; align-items:center; flex-wrap:wrap; margin-top:35px; }
.pm-call { color:rgba(255,255,255,.75); font-size:11px; letter-spacing:1.3px; border-bottom:1px solid rgba(255,255,255,.25); padding-bottom:5px; }

/* RESPONSIVE */
@media (max-width: 1100px) {
    .pm-hero-layout { grid-template-columns:1fr; }
    .pm-dashboard { max-width:760px; }
    .pm-scroll { display:none; }
    .pm-scope-grid { grid-template-columns:repeat(2,1fr); }
    .pm-control-layout,.pm-projects-layout { grid-template-columns:1fr; }
    .pm-control-visual { min-height:520px; max-width:820px; }
    .pm-control-visual img { height:520px; }
}

@media (max-width: 800px) {
    .pm-hero { min-height:auto; }
    .pm-hero-layout { padding-top:125px; padding-bottom:80px; }
    .pm-title { font-size:clamp(52px,12vw,76px); letter-spacing:-3px; }
    .pm-hero-meta { grid-template-columns:repeat(2,1fr); }
    .pm-section-head,.pm-intro-grid { grid-template-columns:1fr; gap:30px; }
    .pm-scope-grid { grid-template-columns:1fr; }
    .pm-card { min-height:auto; }
    .pm-process-row { grid-template-columns:55px 1fr 25px; gap:18px; }
    .pm-process-row p { grid-column:2 / 4; }
    .pm-project-grid { grid-template-columns:1fr; }
    .pm-cta h2 { font-size:clamp(52px,12vw,78px); letter-spacing:-3px; }
}

@media (max-width: 560px) {
    .pm-hero-layout { padding-top:112px; padding-bottom:64px; }
    .pm-eyebrow { font-size:8px; letter-spacing:2.4px; }
    .pm-title { margin-top:22px; font-size:clamp(44px,13vw,62px); letter-spacing:-2px; line-height:.94; }
    .pm-lead { margin-top:24px; font-size:13px; line-height:1.75; }
    .pm-actions { align-items:flex-start; flex-direction:column; gap:18px; }
    .pm-hero-meta { margin-top:38px; }
    .pm-dashboard { padding:20px; }
    .pm-dashboard-head h2 { font-size:25px; }
    .pm-live { padding:6px 8px; }
    .pm-stats { grid-template-columns:1fr; }
    .pm-timeline-head { display:none; }
    .pm-timeline-row { grid-template-columns:28px 1fr; }
    .pm-timeline-row small { grid-column:2; }
    .pm-large-copy { font-size:30px; }
    .pm-card { padding:26px; }
    .pm-control-visual,.pm-control-visual img { min-height:0; height:390px; }
    .pm-control-caption { left:18px; right:18px; bottom:18px; flex-direction:column; gap:5px; }
    .pm-process-row { grid-template-columns:42px 1fr 20px; gap:13px; }
    .pm-process-row h3 { font-size:22px; }
    .pm-project-card { min-height:auto; }
    .pm-cta-content { padding-top:85px; padding-bottom:90px; }
    .pm-cta h2 { font-size:clamp(44px,13vw,62px); letter-spacing:-2px; }
}