/* ============================================================
   Arcem — arcem.no
   ============================================================ */

:root{
  --deep:   #071C19;   /* darkest green   */
  --dark:   #0E2C28;   /* dark green      */
  --mid:    #17453D;   /* teal green      */
  --copper: #BC896D;   /* accent          */
  --sage:   #949D8D;   /* muted body      */
  --sage-pale: #E3E8DF; /* pale green surface */
  --white:  #FFFFFF;
  --ink:    #000000;

  --font: "Work Sans", "Helvetica Neue", Arial, sans-serif;

  --max: 1200px;
  --pad: clamp(20px, 5vw, 60px);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:var(--font);
  font-size:14px;
  font-weight:500;
  line-height:1.5;
  letter-spacing:.25px;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}

img,video{ display:block; max-width:100%; height:auto; }

a{ color:inherit; }

h1,h2,h3{ margin:0; font-weight:500; }

p{ margin:0 0 1em; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--deep); color:var(--white);
  padding:12px 20px; border-radius:0 0 8px 0; text-decoration:none;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--copper); outline-offset:3px; }

/* ── Scroll reveal ───────────────────────────────────────
   Matches the original: opacity 0 → 1 over 1s ease-in-out,
   no translate, fired once as a block enters the viewport.
   Gated on .js so content is never hidden without scripting. */
.js .reveal{
  opacity:0;
  transition:opacity 1s cubic-bezier(.42, 0, .58, 1);
  will-change:opacity;
}
.js .reveal.is-visible{
  opacity:1;
  will-change:auto;
}

.container{
  width:100%; max-width:var(--max);
  margin:0 auto; padding:0 var(--pad);
}
.container-narrow{ max-width:900px; }
.container-wide{ max-width:1560px; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:500; letter-spacing:1.25px;
  text-decoration:none; white-space:nowrap;
  padding:12px 22px; border-radius:999px; border:1px solid transparent;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-dark{ background:var(--deep); color:var(--white); }
.btn-dark:hover{ background:var(--mid); }
.btn-outline{ background:transparent; color:currentColor; border-color:currentColor; }
.btn-outline:hover{ background:rgba(255,255,255,.1); }
.section-light .btn-outline:hover{ background:rgba(7,28,25,.06); }

/* ── Header ──────────────────────────────────────────────── */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:20;
  padding:28px 0;
  transition:background .3s ease, padding .3s ease, box-shadow .3s ease;
}
.site-header.scrolled{
  background:rgba(7,28,25,.92);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  padding:14px 0;
  box-shadow:0 1px 0 rgba(255,255,255,.10);
}
.site-header.scrolled .site-nav a{ color:var(--white); }
.site-header.scrolled .logo img{ filter:brightness(0) invert(1); }
.header-inner{
  width:100%; max-width:var(--max); margin:0 auto;
  padding:0 var(--pad);
  display:flex; align-items:center; gap:clamp(16px,3vw,48px);
}
.logo{ display:block; flex:0 0 auto; }
.logo img{ width:150px; height:40px; object-fit:contain; }

.site-nav{ flex:1 1 auto; min-width:0; }
.site-nav ul{
  display:flex; align-items:center; gap:clamp(18px,3vw,44px);
  list-style:none; margin:0; padding:0;
}
.site-nav a{
  font-size:14px; font-weight:500; letter-spacing:1.25px;
  text-decoration:none; color:var(--ink);
  padding:6px 0; border-bottom:1px solid transparent;
}
.site-nav a:hover{ border-bottom-color:var(--copper); }

.partner-login{ flex:0 0 auto; }

.nav-toggle{
  display:none;
  width:44px; height:44px; padding:10px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; justify-content:space-between;
}
.nav-toggle span{
  display:block; height:2px; width:100%;
  background:var(--ink); border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}

/* ── Hero ────────────────────────────────────────────────── */
.hero{
  position:relative;
  background:var(--white);
  height:100vh;
  min-height:640px;
  overflow:hidden;
}
.hero-panel-right{
  position:absolute; top:0; right:0;
  width:25%; height:100%;
  background:var(--mid);
}
.hero-media{
  position:absolute; z-index:2;
  left:40.6%; top:13.3%;
  width:50%; height:60.4%;
  background:var(--deep);
  overflow:hidden;
}
.hero-media video,
.hero-media img{
  width:100%; height:100%; object-fit:cover;
}
.hero-bar{
  position:absolute;
  left:40.6%; top:70%;
  width:59.4%; height:15%;
  background:var(--dark);
}
.hero-band{
  position:absolute;
  left:0; top:85%;
  width:100%; height:15%;
  background:var(--deep);
}
.hero-content{
  position:absolute; z-index:3;
  left:var(--pad); top:49%;
  max-width:min(560px, 62%);
}
.hero h1{
  font-size:clamp(22px, 2vw, 26px);
  font-weight:500; line-height:1.5;
  letter-spacing:0;
  color:var(--ink);
  margin:0 0 28px;
}
.hero-actions{
  display:flex; flex-wrap:wrap; gap:12px; margin:0;
}

/* ── Sections ────────────────────────────────────────────── */
.section{ padding:clamp(64px, 9vw, 130px) 0; }
.section-light{ background:var(--white); color:var(--ink); }
.section-mid  { background:var(--mid);   color:var(--white); }
.section-dark { background:var(--dark);  color:var(--white); }
.section-deep { background:var(--deep);  color:var(--white); }

/* One eyebrow system everywhere: small caps opened by the same
   copper tick that marks the development track — the page's one
   recurring signature. */
.eyebrow{
  font-size:13px; font-weight:600;
  letter-spacing:1.8px; text-transform:uppercase;
  margin:0 0 22px;
}
.eyebrow::after{
  content:""; display:block;
  width:38px; height:3px; background:var(--copper);
  margin-top:10px;
}
.eyebrow.center{ text-align:center; margin-bottom:26px; }
.eyebrow.center::after{ margin-left:auto; margin-right:auto; }

.display{
  font-size:clamp(34px, 5vw, 56px);
  font-weight:600; line-height:1.5;
  letter-spacing:-.5px;
  color:var(--copper);
  margin:0 0 26px;
}

.lede{
  font-size:clamp(20px, 2vw, 24px);
  font-weight:500; line-height:1.5; letter-spacing:0;
  margin:0;
}

/* About */
#about{ position:relative; overflow:hidden; }
#about > .container{ position:relative; z-index:1; }

/* Routed traces with travelling pulses. Kept faint and slow: this is
   texture behind the copy, never a thing to look at. Masked so it
   dissolves before it reaches the text column. */
.traces{
  position:absolute; inset:0 0 0 56%;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 26%, #000 88%, transparent);
          mask-image:linear-gradient(to right, transparent, #000 26%, #000 88%, transparent);
}
.traces svg{ width:100%; height:100%; display:block; }
.trace-base path{
  fill:none; stroke:var(--deep); stroke-width:1;
  opacity:.16;
}
.trace-flow path{
  fill:none; stroke:var(--sage); stroke-width:1.8;
  stroke-linecap:round;
  stroke-dasharray:60 1600;
  stroke-dashoffset:1660;
  animation:trace-flow 9s linear infinite;
}
.trace-flow .f2{ animation-duration:11s;   animation-delay:-3s; }
.trace-flow .f3{ animation-duration:10s;   animation-delay:-6s; }
.trace-flow .f4{ animation-duration:12.5s; animation-delay:-1.5s; }
.trace-flow .f5{ animation-duration:8s;    animation-delay:-4.5s; }
.trace-flow .f6{ animation-duration:7s;    animation-delay:-2s; stroke-dasharray:34 600; stroke-dashoffset:634; }
@keyframes trace-flow{ to{ stroke-dashoffset:0; } }

.trace-nodes circle{
  fill:var(--sage); opacity:.5;
  animation:trace-node 4.5s ease-in-out infinite;
}
.trace-nodes circle:nth-child(2){ animation-delay:-1.2s; }
.trace-nodes circle:nth-child(3){ animation-delay:-2.4s; }
.trace-nodes circle:nth-child(4){ animation-delay:-3.1s; }
.trace-nodes circle:nth-child(5){ animation-delay:-0.6s; }
.trace-nodes circle:nth-child(6){ animation-delay:-3.8s; }
@keyframes trace-node{ 50%{ opacity:.72; } }

.about-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px, 4vw, 72px);
  align-items:end;
}
.about-summary{
  margin:0; max-width:56ch;
  font-size:15px; line-height:1.65;
}
.about-cols{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(28px, 4vw, 72px);
  margin-top:clamp(30px, 3.2vw, 44px);
}
.about-cols p{
  margin:0; max-width:56ch;
  font-size:15px; line-height:1.65;
}

/* ── Statement + cards ──────────────────────────────────── */
.statement{
  font-size:clamp(20px, 2vw, 24px);
  font-weight:500; line-height:1.5; letter-spacing:0;
  text-align:center;
  max-width:900px; margin:0 auto clamp(40px, 4.6vw, 60px);
}

/* ── Audience tabs (Who we work with) ───────────────────
   One audience at a time. The active tab is marked by the same
   copper tick used everywhere else. Without JS the tab row is
   hidden and all three panels render stacked with headings. */
.aud-tabs{ display:none; }
.js .aud-tabs{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:0;
  background:var(--sage-pale);
  padding:0 clamp(8px, 1vw, 16px);
  margin-bottom:0;
}
.aud-tab{
  position:relative;
  font-family:var(--font);
  font-size:15px; font-weight:600; letter-spacing:.3px;
  color:var(--ink);
  background:none; border:0; cursor:pointer;
  padding:16px clamp(16px, 2vw, 28px);
}
.aud-tab span{ font-weight:500; color:rgba(7,28,25,.55); }
.aud-tab::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background:var(--copper);
  opacity:0; transform:scaleX(.4); transform-origin:center;
  transition:opacity .25s ease, transform .25s ease;
}
.aud-tab:hover::after{ opacity:.45; transform:scaleX(1); }
.aud-tab[aria-selected="true"]::after{ opacity:1; transform:scaleX(1); }

.aud-panel{
  border-radius:0;
  padding:clamp(28px, 3vw, 46px);
  color:rgba(255,255,255,.88);
}
.aud-panel + .aud-panel{ margin-top:18px; }
.js .aud-panel + .aud-panel{ margin-top:0; }
.js .aud-panel[hidden]{ display:none; }
.js .aud-panel{ animation:aud-in .45s ease; }
@keyframes aud-in{ from{ opacity:0; } }

/* One medium green for every panel, so the block reads as a single
   surface that contrasts with the deeper section below it. */
.aud-panel-1,
.aud-panel-2,
.aud-panel-3{ background:var(--mid); }

.aud-panel h3{
  margin:0 0 18px;
  font-size:22px; font-weight:600; line-height:1.4;
  color:var(--copper);
}
.js .aud-panel h3{ display:none; }

.aud-cols{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(24px, 3vw, 56px);
}
.aud-cols p{
  margin:0;
  font-size:15px; line-height:1.75;
}
.cards{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(18px, 1.6vw, 24px);
  align-items:start;
}
.card{
  display:flex; flex-direction:column;
  padding:clamp(26px, 2vw, 32px);
  border-radius:16px;
  color:var(--sage);
}
.card-1{ background:var(--deep); --card-bg:var(--deep); }
.card-2{ background:var(--dark); --card-bg:var(--dark); }
.card-3{ background:var(--mid);  --card-bg:var(--mid); }
.card h3{
  font-size:24px; font-weight:600; line-height:1.5;
  color:var(--copper); margin:0 0 20px;
}
.card p{ line-height:1.7; }
.card p:last-child{ margin-bottom:0; }

/* ── Expandable card body (Read more) ─────────────────────
   Without JS the full text shows; with JS it collapses to a
   few lines and the toggle reveals the rest. */
.js .card-body{
  position:relative;
  max-height:10.2em;
  overflow:hidden;
  transition:max-height .45s ease;
}
.js .card-body.is-open{ max-height:240em; }
.js .card-body:not(.is-open)::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:4.5em;
  background:linear-gradient(to bottom, transparent, var(--card-bg));
  pointer-events:none;
}

.card-toggle{
  display:none;
  margin-top:auto;
  padding-top:20px;
  border:0; background:none; cursor:pointer;
  font-family:var(--font);
  font-size:14px; font-weight:600; letter-spacing:.75px;
  color:var(--copper);
  align-items:center; gap:8px;
  align-self:flex-start;
}
.js .card-toggle{ display:inline-flex; }
.card-toggle:hover{ color:var(--white); }
.card-toggle .icon{ font-size:18px; line-height:1; transition:transform .3s ease; }
.card-toggle[aria-expanded="true"] .icon{ transform:rotate(45deg); }

/* ── Feature sections (What we do / Nordics / Sustainability) */
.feature-head{
  display:grid; grid-template-columns:minmax(0,1fr) 318px;
  gap:clamp(28px, 5vw, 60px);
  align-items:start;
  margin-bottom:clamp(32px, 4vw, 46px);
}
.feature-figure{ margin:0; }
.feature-figure img{
  width:100%; height:auto; aspect-ratio:3/2; object-fit:cover;
}

.cols{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(24px, 3vw, 46px);
}
.cols > p{
  margin:0;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.35);
  color:var(--white);
}

/* ── Team ────────────────────────────────────────────────── */
.team-grid{
  display:grid; grid-template-columns:minmax(0,1fr) 260px;
  gap:clamp(32px, 5vw, 70px);
  align-items:start;
  margin-top:clamp(48px, 7vw, 96px);
}
.bonum-logo{ width:180px; height:43px; object-fit:contain; }
.team-copy{
  margin-top:18px; padding-top:24px;
  border-top:1px solid rgba(255,255,255,.35);
  columns:2; column-gap:clamp(32px, 3.4vw, 56px);
  font-size:15px; line-height:1.7;
}
.team-copy p{ margin:0; color:var(--white); }
.team-main .btn{ margin-top:28px; }

.team-person{ text-align:center; }
.avatar{
  width:170px; height:170px;
  border-radius:50%; object-fit:cover;
  margin:0 auto 18px;
  filter:grayscale(1);
}
.person-name{ font-size:16px; font-weight:600; margin:0 0 4px; }
.person-role{ font-size:14px; font-weight:400; color:rgba(255,255,255,.8); margin:0 0 18px; }
.team-person .btn{ width:100%; }

/* ── Contact form ────────────────────────────────────────── */
.contact-title{
  font-size:clamp(22px, 2.2vw, 26px);
  font-weight:600; letter-spacing:0;
  color:var(--white); margin:0 0 40px;
}
.contact-form{ display:block; }
.field{ position:relative; margin-bottom:34px; }
.field input,
.field textarea{
  width:100%;
  font-family:var(--font); font-size:15px; font-weight:400;
  color:var(--white);
  background:transparent;
  border:0; border-bottom:1px solid rgba(255,255,255,.45);
  padding:26px 0 10px;
  border-radius:0;
  resize:vertical;
}
.field textarea{ min-height:74px; }
.field label{
  position:absolute; left:0; top:22px;
  font-size:14px; font-weight:500; color:var(--white);
  pointer-events:none;
  transition:transform .18s ease, font-size .18s ease, color .18s ease;
  transform-origin:left top;
}
.field input:focus + label,
.field textarea:focus + label,
.field input:not(:placeholder-shown) + label,
.field textarea:not(:placeholder-shown) + label{
  transform:translateY(-20px) scale(.85);
  color:var(--sage);
}
.field input:focus,
.field textarea:focus{
  outline:none; border-bottom-color:var(--copper);
}

.consent{ display:flex; align-items:flex-start; gap:12px; margin:8px 0 36px; }
.consent input{
  flex:0 0 auto; width:18px; height:18px; margin-top:1px;
  accent-color:var(--copper); cursor:pointer;
}
.consent label{ font-size:14px; font-weight:400; color:var(--white); }
.consent a{ text-decoration:underline; }

.form-actions{ display:flex; justify-content:center; }
.btn-send{
  font-family:var(--font);
  font-size:14px; font-weight:500; letter-spacing:1.25px;
  padding:10px 26px; border-radius:999px;
  background:transparent; color:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.25);
  cursor:not-allowed;
  transition:all .2s ease;
}
.btn-send:not([disabled]){
  background:var(--white); color:var(--deep);
  border-color:var(--white); cursor:pointer;
}
.btn-send:not([disabled]):hover{ background:var(--copper); border-color:var(--copper); color:var(--white); }

.form-status{
  margin:18px 0 0; min-height:1.2em; text-align:center;
  font-size:14px; color:var(--copper);
}

/* ── Footer ──────────────────────────────────────────────── */
.site-footer{
  background:var(--deep); color:var(--white);
  padding:clamp(56px, 7vw, 100px) 0 clamp(40px, 5vw, 70px);
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(200px, 1.1fr) 0.7fr 1.5fr 1fr;
  gap:clamp(20px, 2.4vw, 34px);
  align-items:end;
}
.footer-brand img{ width:170px; height:45px; object-fit:contain; margin-bottom:16px; }
.copyright{ font-size:14px; font-weight:400; color:rgba(255,255,255,.75); margin:0; }
.footer-label{ font-size:14px; font-weight:400; color:rgba(255,255,255,.7); margin:0 0 6px; }
.footer-col p:last-child{ margin:0; }
.footer-col a{ text-decoration:underline; font-size:14px; }
.footer-col a:hover{ color:var(--copper); }

/* ── Development path (What we do) ───────────────────────
   The copy describes a sequence, so the layout shows it: five
   stages on a hairline, each opened by a copper tick — a nod to
   the transmission lines these sites are built around. */
.path-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px, 4vw, 72px);
  align-items:end;
  margin-bottom:clamp(36px, 4vw, 56px);
}
.path-head .lede{ margin:0; }
.path-summary{
  margin:0; max-width:54ch;
  font-size:15px; line-height:1.75;
  color:rgba(255,255,255,.84);
}
/* One image treatment across all three sections: a full-width band
   in the same position, so the content below carries the variation
   rather than the frame. */
.path-figure{ margin:0 0 clamp(32px, 3.4vw, 48px); }

.path-eyebrow{
  margin:0 0 18px;
  font-size:13px; font-weight:600;
  letter-spacing:1.8px; text-transform:uppercase;
}
.path-eyebrow::after{
  content:""; display:block;
  width:38px; height:3px; background:var(--copper);
  margin-top:10px;
}

.path-track{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5, 1fr);
  gap:clamp(16px, 1.6vw, 26px);
}
.path-track > li{
  position:relative;
  padding-top:20px;
  border-top:1px solid rgba(255,255,255,.3);
}
.path-track > li::before{
  content:"";
  position:absolute; top:-1px; left:0;
  width:38px; height:3px;
  background:var(--copper);
}
.path-track h3{
  margin:0 0 12px;
  font-size:15px; font-weight:600; line-height:1.4;
  letter-spacing:.3px; color:var(--white);
}
.path-track p{
  margin:0;
  font-size:14px; line-height:1.7;
  color:rgba(255,255,255,.78);
}

.path-close{
  margin:clamp(26px, 2.8vw, 40px) 0 0;
  max-width:68ch;
  font-size:15px; line-height:1.65;
  color:rgba(255,255,255,.84);
}

/* ── Responsive ─────────────────────────────────────────── */
/* Portfolio: featured project on a full band, the rest in a grid.
   Tuned to sit within one screen — short band, inline facts,
   compact cards. */
#portfolio{ padding-top:clamp(48px,5vw,64px); padding-bottom:clamp(48px,5vw,64px); }
#portfolio .display{ font-size:clamp(30px, 3.4vw, 42px); margin-bottom:16px; }
#portfolio .lede{ font-size:clamp(17px, 1.6vw, 20px); }
.proj-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px, 4vw, 72px);
  align-items:end;
  margin-bottom:clamp(20px, 2.2vw, 30px);
}
.proj-summary{
  margin:0; max-width:56ch;
  font-size:15px; line-height:1.65;
  color:rgba(255,255,255,.84);
}

.proj-name{
  margin:0;
  font-size:clamp(24px, 2.6vw, 38px);
  font-weight:600; line-height:1.2;
  color:var(--white);
  display:flex; align-items:baseline; gap:14px;
}
.proj-name span{
  font-size:13px; font-weight:600;
  letter-spacing:1.6px; text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

/* Copper-separated fact row, reused by feature + cards. */
.proj-meta{
  list-style:none; margin:0 0 14px; padding:0;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:8px 0;
  font-size:13px; font-weight:600;
  letter-spacing:.4px; color:var(--copper);
}
.proj-meta li{ display:flex; align-items:center; }
.proj-meta li:not(:last-child)::after{
  content:""; width:4px; height:4px; border-radius:50%;
  background:var(--copper); opacity:.6; margin:0 14px;
}

.proj-feature{ position:relative; margin:0; }
.proj-feature img{
  width:100%; height:auto;
  aspect-ratio:24/5.5; object-fit:cover; display:block;
}
.proj-feature figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:clamp(48px, 6vw, 80px) clamp(20px, 2.4vw, 36px) clamp(18px, 2vw, 26px);
  background:linear-gradient(to bottom, rgba(4,20,17,0) 0%, rgba(4,20,17,.5) 40%, rgba(4,20,17,.86) 100%);
}
.proj-feature .path-eyebrow{ margin:0 0 10px; }
.proj-feature-body{
  display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(16px, 4vw, 56px); align-items:center;
  padding:clamp(14px, 1.6vw, 20px) 0 0;
  margin-bottom:clamp(26px, 3vw, 40px);
}
.proj-feature-body p{
  margin:0; max-width:70ch;
  font-size:15px; line-height:1.6;
  color:rgba(255,255,255,.84);
  order:-1;
}

.proj-feature-body .proj-meta{ margin:0; white-space:nowrap; }

.proj-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap:clamp(20px, 2.4vw, 36px);
}
.proj-card{ margin:0; }
.proj-card figure{ position:relative; margin:0 0 14px; }
.proj-card img{
  width:100%; height:auto;
  aspect-ratio:16/9; object-fit:cover; display:block;
}
.proj-card figcaption{
  position:absolute; left:0; right:0; bottom:0;
  padding:clamp(40px, 4vw, 56px) clamp(18px, 2vw, 24px) clamp(14px, 1.6vw, 20px);
  background:linear-gradient(to bottom, rgba(4,20,17,0) 0%, rgba(4,20,17,.5) 42%, rgba(4,20,17,.86) 100%);
}
.proj-card .proj-name{ font-size:clamp(20px, 1.8vw, 26px); }
.proj-card > p,
.proj-card .proj-details > p{
  margin:8px 0 0; max-width:52ch;
  font-size:14px; line-height:1.55;
  color:rgba(255,255,255,.8);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* Collapsible project details. Desktop: always open, toggle hidden.
   Phones: the copy and facts fold behind a small copper toggle. */
.proj-details > summary{
  display:none;
  list-style:none; cursor:pointer;
  font-size:13px; font-weight:600; letter-spacing:.6px; text-transform:uppercase;
  color:var(--copper);
  padding:10px 0;
  -webkit-user-select:none; user-select:none;
}
.proj-details > summary::-webkit-details-marker{ display:none; }
.proj-details > summary::after{
  content:""; display:inline-block; width:7px; height:7px; margin-left:10px;
  border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
  transform:translateY(-3px) rotate(45deg);
  transition:transform .2s ease;
}
.proj-details[open] > summary::after{ transform:translateY(1px) rotate(-135deg); }

/* ── Gallery ──────────────────────────────────────────
   A quiet strip of renders, no copy: native horizontal scroll with
   gentle snapping, the next frame peeking in from the edge. */
/* Gallery: a full-height snap stop of its own, with a draggable render
   strip and prev/next controls. Bigger frames fill the field; the strip
   is centred so it reads as a deliberate viewer. */
.gallery-section{
  background:var(--dark);
  min-height:100vh;
  display:flex; align-items:center;
  padding:clamp(32px,5vh,72px) 0;
}
.gallery-viewport{ position:relative; width:100%; }
/* Renders show planned facilities, so the strip is labelled even though
   it otherwise carries no copy. Kept quiet: small, sage, upper left. */
.gallery-note{
  margin:0 0 clamp(14px, 1.6vw, 22px);
  padding:0 var(--pad);
  font-size:12px; font-weight:600;
  letter-spacing:1.4px; text-transform:uppercase;
  color:rgba(148,157,141,.75);
}
.gallery{
  position:relative;
  display:flex;
  gap:clamp(16px, 1.8vw, 26px);
  overflow-x:auto;
  overscroll-behavior-x:contain;
  padding:0 var(--pad);
  scroll-snap-type:x proximity;
  scrollbar-width:none;
  cursor:grab;
  -webkit-user-select:none; user-select:none;
}
.gallery::-webkit-scrollbar{ display:none; }
.gallery.is-dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.gallery.is-dragging img{ pointer-events:none; }
.gallery img{
  flex:0 0 auto;
  width:min(1500px, 90vw); height:auto;
  max-height:80vh;
  aspect-ratio:16/9; object-fit:cover;
  scroll-snap-align:start;
}

/* Prev / next controls */
.gallery-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:clamp(44px, 3.4vw, 56px); height:clamp(44px, 3.4vw, 56px);
  display:flex; align-items:center; justify-content:center;
  border:0; border-radius:50%;
  background:rgba(7,28,25,.62); color:var(--white);
  cursor:pointer; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:background .2s ease, opacity .2s ease;
}
.gallery-nav:hover{ background:var(--copper); }
.gallery-prev{ left:clamp(10px, 1.6vw, 26px); }
.gallery-next{ right:clamp(10px, 1.6vw, 26px); }
.gallery-nav[disabled]{ opacity:0; pointer-events:none; }
@media (max-width:820px){
  /* Collapse project details behind a toggle; the head margin that
     spaces the desktop band is too much on a phone. */
  .proj-details > summary{ display:block; }
  .proj-details[open] > summary{ margin-bottom:6px; }
  .proj-head{ margin-bottom:14px; }
  .proj-feature-body{ padding-top:8px; margin-bottom:22px; }
  .proj-card .proj-details > p{ -webkit-line-clamp:unset; display:block; overflow:visible; }

  /* The 24:5.5 desktop band becomes a 100px sliver on a phone, with the
     caption covering all of it. Give the featured image a real frame. */
  .proj-feature img{ aspect-ratio:16/10; }
  .proj-feature figcaption{ padding:56px 18px 16px; }
  .proj-summary{ font-size:13px; color:rgba(255,255,255,.7); }

  /* Two columns with a nowrap fact row crushes the prose to one word
     per line on a phone. Stack instead, and let the facts wrap. */
  .proj-feature-body{ grid-template-columns:1fr; gap:14px; align-items:start; }
  .proj-feature-body .proj-meta{ white-space:normal; order:1; }
  .proj-feature-body p{ order:0; }
  .proj-meta{ gap:8px 0; }
  .proj-meta li:not(:last-child)::after{ margin:0 10px; }
  /* A separator that lands at a line break leaves a stray dot. */
  .proj-feature-body .proj-meta{ flex-direction:column; align-items:flex-start; gap:6px; }
  .proj-feature-body .proj-meta li::after{ display:none; }

  /* No snapping on phones, so the strip needn't fill the screen —
     let it size to the images instead of leaving a tall empty field. */
  .gallery-section{ min-height:0; padding:clamp(44px,7vh,72px) 0; }
  .gallery img{ width:min(1500px, 92vw); }
}

@media (max-width:1200px){
  /* Two columns before stacking — three would leave the text too narrow. */
  .cards{ grid-template-columns:repeat(2, 1fr); }
  .path-track{ grid-template-columns:repeat(3, 1fr); row-gap:36px; }
}

@media (max-width:1000px){
  .path-head,
  .region-head,
  .pledge-head,
  .proj-head{ grid-template-columns:1fr; align-items:start; }
  .feature-head{ grid-template-columns:1fr; }
  .feature-figure{ max-width:420px; }
  .cols{ grid-template-columns:1fr 1fr; }
  .team-grid{ grid-template-columns:1fr; }
  .team-copy{ columns:2; }
  .team-person{ text-align:left; }
  .avatar{ margin-left:0; }
  .team-person .btn{ width:auto; }
  .footer-grid{ grid-template-columns:1fr 1fr; align-items:start; }
  .footer-brand{ grid-column:1 / -1; }
}

@media (max-width:820px){
  .path-track{ grid-template-columns:repeat(2, 1fr); }
  .cards{ grid-template-columns:1fr; }
  .about-head{ grid-template-columns:1fr; align-items:start; }
  .about-cols{ grid-template-columns:1fr; gap:18px; }
  /* Not enough room beside the copy for it to read as anything but noise. */
  .traces{ display:none; }
  .aud-cols{ grid-template-columns:1fr; gap:16px; }
  .aud-tab{ padding:10px 12px 14px; font-size:14px; }
  .aud-tab::after{ left:12px; right:12px; }
  .team-copy{ columns:1; }

  /* Hero → stacked */
  .hero{ aspect-ratio:auto; height:auto; min-height:0; padding-top:120px; }
  .hero-panel-right{ display:none; }
  .hero-bar{ display:none; }
  .hero-band{ display:none; }
  .hero-content{
    position:static; max-width:none;
    padding:0 var(--pad) 40px;
    left:auto; top:auto;
  }
  .hero-media{
    position:static;
    left:auto; top:auto;
    width:100%; height:auto; aspect-ratio:16/10;
  }
  .hero-media video,
  .hero-media img{ aspect-ratio:16/10; }

  /* Header → mobile menu */
  .site-header{ padding:20px 0; }
  .header-inner{ flex-wrap:wrap; }
  .site-nav{ order:4; flex:1 1 100%; }
  .nav-toggle{ display:flex; order:2; margin-left:auto; }
  .partner-login{ order:3; }
  .site-nav ul{
    display:none; flex-direction:column; align-items:flex-start;
    gap:4px; padding:16px 0 0;
  }
  .site-nav.open ul{ display:flex; }
  .site-nav a{ padding:10px 0; }
  .logo img{ width:126px; height:34px; }
  .partner-login{ padding:10px 18px; }
}

@media (max-width:560px){
  .path-track{ grid-template-columns:1fr; row-gap:30px; }
  .cols{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .hero-actions .btn{ flex:1 1 auto; }
}

/* ── Region conditions (Why the Nordics) ─────────────────
   Not a sequence but a set of parallel conditions, so the grid
   is divided by vertical rules rather than a running line. */
.region-head,
.pledge-head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px, 4vw, 72px);
  align-items:end;
  margin-bottom:clamp(36px, 4vw, 56px);
}
.region-summary,
.pledge-summary{
  margin:0; max-width:56ch;
  font-size:15px; line-height:1.65;
  color:rgba(255,255,255,.84);
}

.region-figure{ position:relative; margin-bottom:clamp(32px, 3.4vw, 48px); }
.path-figure img,
.region-figure img,
.pledge-figure img{
  width:100%; height:auto;
  aspect-ratio:14/5; object-fit:cover;
  display:block;
}

.region-grid{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(20px, 2.2vw, 30px) 0;
}
.region-grid > div{
  padding:2px clamp(20px, 2vw, 36px);
  border-left:1px solid rgba(255,255,255,.26);
}
.region-grid > div:nth-child(3n+1){ padding-left:0; border-left:0; }
.region-grid h3{
  margin:0 0 10px;
  font-size:15px; font-weight:600; line-height:1.4;
  letter-spacing:.3px; color:var(--copper);
}
.region-grid p{
  margin:0;
  font-size:14px; line-height:1.7;
  color:rgba(255,255,255,.78);
}

/* Pipeline figures sit on the band itself — the numbers land on the
   landscape they describe, and the section still fits one screen.
   A scrim keeps the text legible over any part of the image. */
.pipeline{
  position:absolute; left:0; right:0; bottom:0;
  padding:clamp(48px, 6vw, 80px) clamp(20px, 2.4vw, 36px) clamp(18px, 2vw, 26px);
  background:linear-gradient(to bottom, rgba(4,20,17,0) 0%, rgba(4,20,17,.55) 38%, rgba(4,20,17,.88) 100%);
}
.pipeline .path-eyebrow{ margin:0 0 14px; }
.pipeline-stats{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(24px, 3vw, 52px);
}
.stat-figure{
  margin:0 0 10px;
  font-size:clamp(30px, 3.2vw, 46px);
  font-weight:600; line-height:1; letter-spacing:-1px;
  color:var(--white);
  display:flex; align-items:baseline; gap:8px;
}
.stat-figure span{
  font-size:.32em; font-weight:600; letter-spacing:1px;
  color:var(--copper);
}
.stat-rule{
  display:block; width:40px; height:3px;
  background:var(--copper); margin:0 0 10px;
}
.stat-label{
  margin:0; max-width:30ch;
  font-size:13px; line-height:1.55;
  color:rgba(255,255,255,.9);
}

/* ── Commitments (Sustainability & Energy) ────────────────
   Read as a signed list: label left, commitment right. */
.pledge-list{
  margin:0; padding:0;
  border-top:1px solid rgba(255,255,255,.22);
}
.pledge-row{
  display:grid; grid-template-columns:minmax(0,.4fr) minmax(0,1fr);
  gap:clamp(18px, 3vw, 56px);
  padding:clamp(14px, 1.6vw, 20px) 0;
  border-bottom:1px solid rgba(255,255,255,.22);
}
.pledge-row dt{
  margin:0;
  font-size:15px; font-weight:600; line-height:1.5;
  letter-spacing:.3px; color:var(--copper);
}
.pledge-row dd{
  margin:0;
  font-size:15px; line-height:1.6;
  color:rgba(255,255,255,.84);
}
.pledge-figure{ margin:0 0 clamp(30px, 3.2vw, 44px); }

@media (max-width:1000px){
  .region-head,
  .pledge-head{ grid-template-columns:1fr; align-items:start; }
}

@media (max-width:820px){
  .region-grid{ grid-template-columns:repeat(2, 1fr); }
  .region-grid > div:nth-child(3n+1){
    padding-left:clamp(20px, 2vw, 36px);
    border-left:1px solid rgba(255,255,255,.26);
  }
  .region-grid > div:nth-child(2n+1){ padding-left:0; border-left:0; }
  /* Too little width to sit on the image — drop the figures below it. */
  .pipeline{
    position:static; padding:22px 0 0;
    background:none;
    border-top:1px solid rgba(255,255,255,.26);
  }
  .region-figure{ margin-bottom:26px; }
  .pipeline-stats{ grid-template-columns:1fr 1fr; }
  .pledge-row{ grid-template-columns:1fr; gap:10px; }
}

@media (max-width:560px){
  .region-grid{ grid-template-columns:1fr; }
  .region-grid > div:nth-child(n){ padding-left:0; border-left:0; }
  .pipeline-stats{ grid-template-columns:1fr; }
}

/* Living stills: renders are static images, so the band figures get a
   very slow drift instead — a long zoom that reverses, reading as a
   quiet breath rather than an effect. Real video, when supplied, simply
   replaces the <img> and the framing stays identical. The global
   reduced-motion rule below switches this off. */
.region-figure,
.path-figure,
.pledge-figure,
.proj-feature{ overflow:hidden; }

.region-figure img,
.path-figure img,
.pledge-figure img,
.proj-feature img{
  transform-origin:center center;
  animation:still-drift 28s ease-in-out infinite alternate;
  will-change:transform;
}
.path-figure img{ animation-duration:34s; animation-delay:-6s; }
.pledge-figure img{ animation-duration:31s; animation-delay:-12s; }
.proj-feature img{ animation-duration:26s; animation-delay:-3s; }

@keyframes still-drift{
  from{ transform:scale(1.005); }
  to{   transform:scale(1.055); }
}

/* Section snapping.
   Only on large screens, where a section roughly fills the viewport and
   snapping helps. On phones every section runs 1.5-2.7x the viewport
   height, and mandatory snapping there fights the user's thumb: the
   browser keeps pulling toward a stop that is far off-screen. So below
   1025px we leave scrolling entirely alone. */
@media (prefers-reduced-motion: no-preference) and (min-width:1025px) and (min-height:1000px){
  html{ scroll-snap-type:y mandatory; }
  .hero,
  .section,
  .gallery-section{ scroll-snap-align:start; scroll-snap-stop:always; }
}

@media (prefers-reduced-motion:reduce){
  /* Keep the traces as static texture; stop the travelling pulses. */
  .trace-flow path,
  .trace-nodes circle{ animation:none; }
  .trace-flow path{ stroke-dashoffset:0; stroke-dasharray:none; opacity:.22; }
  html{ scroll-behavior:auto; }
  *{ animation:none !important; transition:none !important; }
  /* No fade, but never leave a block stuck at opacity 0. */
  .js .reveal{ opacity:1; }
}