/* ===========================================================
   SPC — SECTOR DETAIL PAGES (shared)
   Dark fine-line blueprint hero + light editorial content.
   Used by: Renewable Power.html, Water Environment.html
   =========================================================== */
body{background:#070b12;}
.content{background:var(--bg);}

/* ---- top chrome (dark variant over hero) ---- */
.topbar.dark{z-index:20;opacity:1;}
.topbar.dark .meta{color:#7f93b4;display:flex!important;align-items:flex-start;}
.topbar.dark .brand-text{color:#eaf2fb;}
.topbar.dark .brand-text b{color:#2287c6;}
.topbar.dark .back{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:30px;
  border:1px solid rgba(118,211,255,.3);background:rgba(9,17,28,.5);backdrop-filter:blur(5px);
  font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:#cfe2f5;transition:.3s;}
.topbar.dark .back:hover{border-color:#76d3ff;color:#76d3ff;background:rgba(118,211,255,.1);}
.topbar.dark .back i{font-style:normal;font-size:15px;transition:transform .3s;}
.topbar.dark .back:hover i{transform:translateX(-3px);}
.topbar.dark .btn{background:#76d3ff;color:#06121d;}
.topbar.dark .btn:hover{background:#fff;}
.topbar.dark .lang{color:#7f93b4;}
.topbar.dark .lang .on{color:#eaf2fb;}

/* ============ BLUEPRINT HERO ============ */
.bp-hero{position:relative;height:100vh;min-height:660px;overflow:hidden;
  background:radial-gradient(120% 90% at 70% 18%,#13243c 0%,#0a1320 46%,#060a11 100%);}
#bp{position:absolute;inset:0;width:100%;height:100%;display:block;}
.bp-vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(80% 60% at 28% 42%,rgba(118,211,255,.10),transparent 60%),
    linear-gradient(180deg,transparent 55%,rgba(4,8,14,.9) 100%);}

/* drafting frame ticks in the corners */
.bp-frame{position:absolute;inset:clamp(16px,2.4vw,30px);pointer-events:none;z-index:4;
  border:1px solid rgba(118,211,255,.13);}
.bp-frame::before,.bp-frame::after{content:"";position:absolute;width:14px;height:14px;border:1px solid rgba(118,211,255,.4);}
.bp-frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0;}
.bp-frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0;}
.bp-drawno{position:absolute;right:clamp(28px,3.6vw,46px);bottom:clamp(26px,3.4vw,42px);z-index:5;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#5f7798;text-align:right;line-height:1.9;}

/* hero copy */
.bp-copy{position:absolute;left:clamp(28px,5vw,96px);top:50%;transform:translateY(-50%);z-index:6;max-width:560px;}
.bp-copy .tag{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;
  letter-spacing:.26em;color:#76d3ff;margin-bottom:24px;}
.bp-copy .tag i{display:block;width:34px;height:1px;background:#76d3ff;opacity:.6;}
.bp-copy h1{font-size:clamp(36px,4.8vw,74px);font-weight:800;line-height:.96;letter-spacing:-.025em;color:#eef5fc;}
.bp-copy h1 em{font-style:normal;color:#76d3ff;}
.bp-copy p{margin-top:26px;max-width:42ch;font-size:clamp(15px,1.2vw,18px);line-height:1.7;color:#9fb2cd;text-wrap:pretty;}
.bp-meta{display:flex;gap:34px;margin-top:34px;}
.bp-meta .m{display:flex;flex-direction:column;gap:6px;}
.bp-meta .m b{font-size:15px;font-weight:700;color:#dfeaf6;letter-spacing:.01em;}
.bp-meta .m span{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:#6f86a8;text-transform:uppercase;}

/* tracking annotation labels (positioned by JS) */
.bp-labels{position:absolute;inset:0;z-index:5;pointer-events:none;}
.bp-tag{position:absolute;top:0;left:0;display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:#a9c6e4;white-space:nowrap;
  transform:translate(-9999px,0);transition:opacity .5s ease;opacity:0;margin:-6px 0 0 10px;}
.bp-tag i{width:5px;height:5px;border:1px solid #76d3ff;border-radius:50%;flex:none;
  box-shadow:0 0 0 3px rgba(118,211,255,.12);}
.bp-tag .cal{display:flex;flex-direction:column;gap:1px;padding:3px 9px;border:1px solid rgba(118,211,255,.26);
  background:linear-gradient(180deg,rgba(12,24,40,.74),rgba(8,16,28,.62));backdrop-filter:blur(4px);
  border-radius:3px;box-shadow:0 6px 18px rgba(0,0,0,.30);}
.bp-tag .cal b{font-family:var(--mono);font-size:12.5px;font-weight:700;color:#d8efff;letter-spacing:.04em;
  line-height:1.18;text-shadow:0 0 12px rgba(118,211,255,.28);}
.bp-tag .cal em{font-style:normal;font-size:8.5px;font-weight:400;letter-spacing:.2em;color:#7390b0;line-height:1.12;}

.bp-scroll{position:absolute;left:50%;bottom:30px;transform:translateX(-50%);z-index:6;
  display:flex;flex-direction:column;align-items:center;gap:9px;font-family:var(--mono);font-size:10px;
  letter-spacing:.3em;color:#6f86a8;}
.bp-scroll i{width:1px;height:34px;background:linear-gradient(#76d3ff,transparent);}

/* ============ LIGHT CONTENT ============ */
.r-intro{padding:clamp(80px,13vh,150px) 0 clamp(40px,6vh,70px);}
.r-intro .wrap{display:grid;grid-template-columns:1.05fr 0.95fr;gap:clamp(28px,4.5vw,72px);align-items:end;}
.r-intro .lead{font-size:clamp(24px,3.1vw,44px);font-weight:700;line-height:1.18;letter-spacing:-.015em;
  text-wrap:balance;}
.r-intro .lead b{color:var(--accent);font-weight:700;}
.r-intro .sub{max-width:52ch;font-size:clamp(15px,1.15vw,17px);line-height:1.75;color:var(--ink-soft);}
@media(max-width:820px){
  .r-intro .wrap{grid-template-columns:1fr;gap:22px;align-items:start;}
  .r-intro .sub{max-width:60ch;}
}

/* capability split */
.caps{padding:clamp(20px,5vh,60px) 0 clamp(70px,11vh,130px);}
.caps-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line);}
.cap{padding:clamp(34px,4vw,54px) clamp(28px,3vw,44px) clamp(40px,5vw,60px) 0;border-bottom:1px solid var(--line);}
.cap:nth-child(1){border-right:1px solid var(--line);padding-right:clamp(28px,3vw,44px);}
.cap:nth-child(2){padding-left:clamp(28px,3vw,44px);}
.cap-h{display:flex;align-items:baseline;gap:14px;margin-bottom:30px;}
.cap-h .gl{font-family:var(--mono);font-size:12px;letter-spacing:.2em;color:var(--accent);}
.cap-h h2,.cap-h h3{font-size:clamp(24px,2.6vw,34px);font-weight:800;letter-spacing:-.01em;}
.cap ul{list-style:none;display:flex;flex-direction:column;}
.cap li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;padding:15px 0;
  border-top:1px solid var(--line);font-size:15px;line-height:1.55;color:var(--ink);}
.cap li:first-child{border-top:0;}
.cap li .n{font-family:var(--mono);font-size:12px;color:var(--ink-faint);padding-top:2px;}
.cap li span b{font-weight:700;}
.cap li span small{display:block;font-size:13px;color:var(--ink-soft);margin-top:3px;line-height:1.5;}

/* end-to-end process strip */
.proc{padding:clamp(60px,9vh,110px) 0;border-top:1px solid var(--line);background:var(--paper);}
.proc .head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:18px;margin-bottom:clamp(40px,6vh,64px);}
.proc h2{font-size:clamp(22px,2.72vw,37px);font-weight:800;letter-spacing:-.02em;line-height:1.04;max-width:16ch;}
.proc .note{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--ink-soft);max-width:30ch;line-height:1.7;}
.steps{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:0;}
.steps::before{content:"";position:absolute;top:11px;left:0;right:0;height:1px;background:var(--line);}
.step{position:relative;padding:0 12px 0 0;}
.step .dot{width:23px;height:23px;border:1.5px solid var(--ink);background:var(--paper);position:relative;z-index:1;
  display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;font-weight:700;}
.step:nth-child(1) .dot{background:var(--accent);border-color:var(--accent);color:#fff;}
.step .st-no{font-family:var(--mono);font-size:11px;color:var(--ink-faint);margin:18px 0 7px;letter-spacing:.08em;}
.step h3,.step h4{font-size:14px;font-weight:700;line-height:1.25;letter-spacing:-.005em;max-width:13ch;}

/* selected works */
.works{padding:clamp(80px,12vh,150px) 0;}
.works .head{margin-bottom:clamp(40px,6vh,64px);}
.works .head .kicker{display:block;margin-bottom:18px;}
.works .head h2{font-size:clamp(24px,3.04vw,42px);font-weight:800;letter-spacing:-.02em;line-height:1.02;max-width:18ch;}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.2vw,30px);}
.work{display:flex;flex-direction:column;}
.work .frame{position:relative;aspect-ratio:4/3;border:1px solid var(--line);overflow:hidden;background:var(--paper);}
.work .frame image-slot{width:100%;height:100%;display:block;}
.work .frame .badge{position:absolute;top:14px;left:14px;z-index:3;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;padding:5px 9px;background:rgba(7,11,18,.78);color:#bfe6ff;border-radius:3px;backdrop-filter:blur(3px);}
.work .cap-line{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-top:18px;}
.work h3{font-size:19px;font-weight:700;letter-spacing:-.01em;}
.work .yr{font-family:var(--mono);font-size:12px;color:var(--ink-faint);}
.work p{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--ink-soft);margin-top:7px;}
.work.big{grid-column:span 3;}
.work.big .frame{aspect-ratio:21/8;}

/* project list */
.proj-list{display:flex;flex-direction:column;gap:clamp(26px,4vh,46px);}
.proj{display:grid;grid-template-columns:1.08fr 0.92fr;
  grid-template-areas:"hero head" "hero sites";grid-template-rows:auto 1fr;
  gap:clamp(16px,1.8vw,26px) clamp(22px,2.6vw,42px);align-items:start;
  padding-bottom:clamp(26px,4vh,46px);border-bottom:1px solid var(--line);}
.proj-list .proj:last-child{border-bottom:0;padding-bottom:0;}
.proj-head{grid-area:head;display:flex;flex-direction:column;gap:12px;margin:0;padding:0;border:0;}
.proj-id{display:flex;flex-direction:row;align-items:center;gap:12px;flex:0 0 auto;}
.proj-id .badge{font-family:var(--mono);font-size:10px;letter-spacing:.14em;padding:5px 9px;
  background:rgba(7,11,18,.78);color:#bfe6ff;border-radius:3px;}
.proj-id .cap{font-family:var(--mono);font-size:clamp(20px,2vw,28px);font-weight:700;color:var(--accent);letter-spacing:-.01em;}
.proj-meta{flex:1 1 auto;}
.proj-meta h3{font-size:clamp(18px,1.7vw,24px);font-weight:800;letter-spacing:-.015em;line-height:1.12;}
.proj-meta p{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--ink-soft);margin-top:9px;line-height:1.55;}
.proj-hero{grid-area:hero;position:relative;height:100%;min-height:230px;
  border:1px solid var(--line);overflow:hidden;background:var(--paper);}
.proj-hero image-slot{width:100%;height:100%;display:block;}
.sites{grid-area:sites;display:flex;flex-wrap:wrap;gap:7px;margin:0;align-self:start;list-style:none;padding:0;}
.sites li{display:flex;align-items:baseline;gap:7px;font-family:var(--mono);font-size:11.5px;
  padding:6px 10px;border:1px solid var(--line);border-radius:4px;background:var(--paper);}
.sites li span{color:var(--ink-soft);}
.sites li b{color:var(--accent);font-weight:700;}
.sites li i{font-style:normal;color:var(--ink-faint);font-size:10px;letter-spacing:.06em;}
.works .hint{margin-top:34px;font-family:var(--mono);font-size:12px;color:var(--ink-faint);letter-spacing:.04em;line-height:1.7;}
@media(max-width:780px){
  .proj{grid-template-columns:1fr;grid-template-areas:"head" "hero" "sites";grid-template-rows:auto auto auto;}
  .proj-hero{min-height:0;aspect-ratio:16/10;}
}

/* qualities band */
.band{padding:clamp(60px,9vh,110px) 0;border-top:1px solid var(--line);}
.band-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,60px);}
.qual h4{font-size:clamp(18px,1.5vw,21px);font-weight:700;margin-bottom:12px;letter-spacing:-.01em;}
.qual h4 .gl{font-family:var(--mono);font-size:12px;color:var(--accent);margin-right:10px;}
.qual p{font-size:14px;line-height:1.65;color:var(--ink-soft);max-width:34ch;}

/* CTA */
.cta{background:#070b12;color:#eaf2fb;padding:clamp(80px,13vh,150px) 0;
  background-image:radial-gradient(90% 70% at 75% 0%,#152844 0%,#0a1320 55%,#060a11 100%);}
.cta-in{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:36px;}
.cta h2{font-size:clamp(26px,3.52vw,51px);font-weight:800;letter-spacing:-.025em;line-height:1;max-width:14ch;}
.cta h2 em{font-style:normal;color:#76d3ff;}
.cta .act-row{display:flex;flex-direction:column;gap:18px;align-items:flex-start;}
.cta .big-btn{display:inline-flex;align-items:center;gap:12px;padding:16px 30px;border-radius:44px;background:#76d3ff;
  color:#06121d;font-size:15px;font-weight:700;transition:.35s;}
.cta .big-btn:hover{background:#fff;}.cta .big-btn i{font-style:normal;transition:transform .35s;}
.cta .big-btn:hover i{transform:translate(2px,-2px);}
.cta .back-all{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:#9fb2d0;transition:color .3s;}
.cta .back-all:hover{color:#76d3ff;}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .8s cubic-bezier(.16,1,.3,1);}
.rv.in{opacity:1;transform:none;}
.rv.d1{transition-delay:.08s;}.rv.d2{transition-delay:.16s;}.rv.d3{transition-delay:.24s;}

@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;}}
@media(max-width:900px){
  /* clean mobile hero — drop the scattered annotation tags & drawing-number,
     dim the wireframe to a subtle texture, and flow the copy from the top */
  .bp-hero{height:auto;min-height:100svh;}
  #bp{opacity:.32;}
  .bp-labels{display:none;}
  .bp-drawno{display:none;}
  .bp-scroll{display:none;}
  .bp-frame{inset:12px;}
  .bp-vignette{background:linear-gradient(180deg,rgba(6,11,18,.6) 0%,rgba(6,11,18,.46) 46%,rgba(4,8,14,.95) 100%);}
  .bp-copy{position:relative;left:auto;top:auto;transform:none;max-width:none;width:100%;
    padding:clamp(104px,17vh,150px) var(--pad) clamp(54px,9vh,82px);}
  .bp-copy h1{font-size:clamp(34px,9.6vw,50px);}
  .bp-copy p{max-width:48ch;}
  .bp-meta{gap:20px 30px;flex-wrap:wrap;}
  .caps-grid{grid-template-columns:1fr;}
  .cap:nth-child(1){border-right:0;padding-right:0;}
  .cap:nth-child(2){padding-left:0;}
  .steps{grid-template-columns:repeat(2,1fr);gap:28px 0;}
  .steps::before{display:none;}
  .work-grid{grid-template-columns:1fr;}.work.big{grid-column:auto;}.work.big .frame{aspect-ratio:4/3;}
  .band-grid{grid-template-columns:1fr;gap:30px;}
  .cta-in{flex-direction:column;align-items:flex-start;}
}
@media(max-width:600px){
  .topbar.dark .back{padding:8px 12px;font-size:11px;letter-spacing:.04em;white-space:nowrap;}
  .topbar.dark .back i{font-size:13px;}
}