/* Ardal Group. Built from the Ciridae teardown (design-loop/bar.md):
   a void that resolves in beats, one ember accent, hairlines over shadows,
   a single paper inversion, mono labels as system metadata.
   Ardal's own idea on top: the page is an ascent. Scrolling climbs; the altimeter counts it. */
:root {
  --void: #0F0F0E;
  --abyss: #090908;
  --surface: #191A19;
  --paper: #F5F3EE;
  --ink: #161616;
  --ember: #CF6A3F;
  --ember-hi: #E07B4F;
  --text: #F5F3EE;
  --dim: #A3A09A;
  --dim-ink: #6B6862;
  --hair: rgba(245, 243, 238, 0.14);
  --hair-2: rgba(245, 243, 238, 0.32);
  --display: 'Michroma', 'Arial Narrow', sans-serif;
  --sans: 'Schibsted Grotesk', system-ui, sans-serif;
  --mono: 'Roboto Mono', ui-monospace, monospace;
  --gutter: clamp(16px, 4vw, 48px);
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--void); color: var(--text); font: 400 16px/1.55 var(--sans); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
::selection { background: var(--ember); color: var(--ink); }
.wrap { max-width: 1400px; margin: 0 auto; padding: 0 var(--gutter); }
.mono { font: 400 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.display { font-family: var(--display); font-weight: 400; text-transform: uppercase; letter-spacing: -.01em; }

/* ---------- top strip ---------- */
.strip { position: relative; z-index: 20; background: var(--abyss); border-bottom: 1px solid var(--hair); color: var(--dim); text-align: center; padding: 10px var(--gutter); }
.strip .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--dim); margin: 0 10px 1px; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }

/* ---------- nav ---------- */
.nav { position: absolute; z-index: 20; left: 0; right: 0; }
.nav .wrap { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding-top: 22px; padding-bottom: 22px; }
.nav .logo img { height: 16px; width: auto; }
.nav .links { display: flex; gap: 36px; }
.nav .links a { position: relative; color: var(--text); font-size: 12px; padding: 6px 0; }
.nav .links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ember); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease); }
.nav .links a:hover::after, .nav .links a[aria-current]::after { transform: scaleX(1); transform-origin: left; }
.nav .end { justify-self: end; }

/* ---------- buttons: always visible at rest ---------- */
.btn { position: relative; display: inline-flex; align-items: center; gap: 14px; overflow: hidden; font: 500 14px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; padding: 19px 28px; isolation: isolate; cursor: pointer; }
.btn .arrow { display: inline-block; transition: transform .4s var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-solid { background: var(--ember); color: var(--ink); }
.btn-solid::before { content: ''; position: absolute; inset: 0; background: var(--paper); transform: translateY(101%); transition: transform .5s var(--ease); z-index: -1; }
.btn-solid:hover::before { transform: translateY(0); }
.btn-ghost { border: 1px solid var(--text); color: var(--text); border-radius: 999px; padding: 14px 22px; }
.btn-ghost::before { content: ''; position: absolute; inset: 0; background: var(--text); transform: translateY(101%); transition: transform .5s var(--ease); z-index: -1; border-radius: inherit; }
.btn-ghost:hover { color: var(--ink); }
.btn-ghost:hover::before { transform: translateY(0); }
.on-paper .btn-ghost { border-color: var(--ink); color: var(--ink); }
.on-paper .btn-ghost::before { background: var(--ink); }
.on-paper .btn-ghost:hover { color: var(--paper); }
.btn-sm { padding: 12px 18px; font-size: 13px; }
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; padding: 140px 0 120px; }
.hero-media { position: absolute; inset: 0; z-index: -2; opacity: 0; transform: scale(1.08); transition: opacity 1.8s ease 1.2s, transform 6s var(--ease) 1.2s; }
.hero-media video, .hero-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) brightness(1.18); transform: scale(1.03); }
.loaded .hero-media { opacity: 1; transform: scale(1); }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(9, 9, 8, .36); }
.hero .flank { position: absolute; top: 34%; transform: translateY(-50%); color: var(--text); opacity: 0; transition: opacity 1s ease 1.3s; }
.loaded .hero .flank { opacity: .85; }
.hero .flank.l { left: var(--gutter); }
.hero .flank.r { right: calc(var(--gutter) + 64px); }
.hero h1 { font-size: clamp(30px, 5vw, 76px); line-height: 1.12; margin: 0 auto; max-width: 16ch; min-height: 2.24em; }
.hero .lede { color: var(--text); opacity: 0; transform: translateY(12px); transition: opacity 1s ease 1.05s, transform 1.2s var(--ease) 1.05s; font-size: clamp(16px, 1.4vw, 19px); max-width: 42ch; margin: 28px auto 40px; }
.hero .ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; opacity: 0; transform: translateY(12px); transition: opacity 1s ease 1.3s, transform 1.2s var(--ease) 1.3s; }
.loaded .hero .lede, .loaded .hero .ctas { opacity: 1; transform: none; }
.scroll-cue { position: absolute; left: var(--gutter); bottom: 32px; display: flex; align-items: center; gap: 14px; color: var(--dim); opacity: 0; transition: opacity 1s ease 1.8s; }
.loaded .scroll-cue { opacity: 1; }
.scroll-cue i { order: -1; width: 1px; height: 44px; background: var(--hair-2); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--ember); animation: cue 2s var(--ease) infinite; }
@keyframes cue { to { top: 100%; } }

/* the mark assembles: two bars arrive from opposite sides and meet */
.mark { width: 104px; height: auto; margin: 0 auto 44px; overflow: visible; }
.mark .bar { transition: transform 1.3s var(--ease), opacity .6s ease; opacity: 0; }
.mark .bar-o { transform: translate(-9px, 9px); }
.mark .bar-b { transform: translate(9px, 9px); transition-delay: .12s; }
.loaded .mark .bar { opacity: 1; transform: none; }

/* ---------- altimeter ---------- */
.altimeter { position: fixed; z-index: 15; right: 18px; top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 12px; pointer-events: none; opacity: 0; transition: opacity 1s ease 1.8s; mix-blend-mode: difference; color: #fff; }
.loaded .altimeter { opacity: 1; }
.altimeter .scale { position: relative; width: 9px; height: 220px; background: repeating-linear-gradient(to bottom, rgba(255,255,255,.55) 0 1px, transparent 1px 11px); }
.altimeter .needle { position: absolute; right: -4px; width: 17px; height: 1px; background: #fff; top: 100%; transition: top .15s linear; }
.altimeter .read { writing-mode: vertical-rl; transform: rotate(180deg); font: 400 10px/1 var(--mono); letter-spacing: .14em; }

/* ---------- reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s ease, transform 1.2s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .1s; }
[data-reveal-delay="2"] { transition-delay: .2s; }
[data-reveal-delay="3"] { transition-delay: .3s; }

/* ---------- inversion (the one paper section) ---------- */
.inversion { background: var(--paper); color: var(--ink); text-align: center; padding: clamp(110px, 16vw, 220px) var(--gutter); }
.inversion .mono { color: var(--dim-ink); margin: 0 0 32px; }
.inversion .statement { font: 400 clamp(36px, 5.2vw, 84px)/1.08 var(--sans); letter-spacing: -.035em; max-width: 24ch; margin: 0 auto; text-wrap: balance; }
@media (min-width: 600px) { .inversion .statement .nowrap { white-space: nowrap; } }
.inversion .statement .w { color: rgba(22, 22, 22, .16); transition: color .3s ease; }
.inversion .statement .w.lit { color: var(--ink); }
.inversion .statement .w.em.lit { color: var(--ember); }

/* ---------- marquee ---------- */
.marquee { border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); overflow: hidden; padding: 30px 0; }
.marquee .track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee span { font: 400 clamp(26px, 4vw, 56px)/1 var(--display); text-transform: uppercase; padding-right: .9em; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(245, 243, 238, .62); }
.marquee span.fill { color: var(--text); -webkit-text-stroke: 0; }
.marquee b { font-weight: 400; color: var(--dim); -webkit-text-stroke: 0; padding-right: .9em; font: 400 clamp(26px, 4vw, 56px)/1 var(--display); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- section head ---------- */
.section { padding: clamp(96px, 12vw, 168px) 0; }
.head { text-align: center; margin: 0 auto clamp(48px, 6vw, 80px); max-width: 900px; }
.head .mono { color: var(--ember); margin: 0 0 22px; }
.head h2 { font-size: clamp(24px, 3.6vw, 52px); line-height: 1.16; margin: 0; text-wrap: balance; }
.head p:not(.mono) { color: rgba(245, 243, 238, .78); font-size: 17px; max-width: 46ch; margin: 24px auto 0; }

/* ---------- image cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { position: relative; border-radius: 10px; overflow: hidden; min-height: clamp(380px, 38vw, 540px); display: flex; flex-direction: column; justify-content: space-between; padding: 26px; isolation: isolate; border: 1px solid var(--hair); }
.card .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: blur(14px) brightness(calc(var(--b, 1) * .55)); transform: scale(1.15); transition: filter 1.2s var(--ease), transform 1.6s var(--ease); }
.card.in .bg { filter: blur(0) brightness(calc(var(--b, 1) * .7)); transform: scale(1.02); }
.card:hover .bg { filter: blur(0) brightness(calc(var(--b, 1) * .85)); transform: scale(1.07); }
.card::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(9,9,8,.92) 0%, rgba(9,9,8,.2) 55%, rgba(9,9,8,.35) 100%); }
.card .top { display: flex; justify-content: space-between; align-items: center; }
.badge { border: 1px solid var(--hair-2); border-radius: 999px; padding: 6px 12px; color: var(--text); }
.card h3 { font: 400 clamp(18px, 1.6vw, 24px)/1.25 var(--display); text-transform: uppercase; margin: 0 0 12px; }
.card p { color: rgba(245, 243, 238, .92); font-size: 16px; margin: 0; max-width: 32ch; min-height: 4.65em; }

/* ---------- the name (split) ---------- */
.name { border-top: 1px solid var(--hair); }
.split { display: grid; grid-template-columns: 1.3fr 1fr; border-bottom: 1px solid var(--hair); }
.split > * { padding: clamp(48px, 6vw, 88px) var(--gutter); }
.split > :first-child { border-right: 1px solid var(--hair); }
.giant { font: 400 clamp(56px, 10vw, 168px)/.95 var(--display); text-transform: uppercase; letter-spacing: -.03em; margin: 0; }
.giant .gloss { display: block; font: 400 12px/1 var(--mono); letter-spacing: .1em; color: var(--dim); margin: 14px 0 26px 4px; }
.giant .gloss em { font-style: normal; color: var(--text); }
.split .copy { align-self: end; }
.split .copy p { color: var(--dim); font-size: 18px; max-width: 34ch; margin: 0 0 20px; }
.split .copy p:first-of-type { color: var(--text); font-size: clamp(20px, 1.8vw, 26px); line-height: 1.35; letter-spacing: -.01em; }
.meta-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.meta-row > div { padding: 18px var(--gutter); color: var(--dim); border-right: 1px solid var(--hair); }
.meta-row > div:last-child { border-right: 0; text-align: right; }
.meta-row > div:nth-child(2) { text-align: center; }

/* ---------- full-bleed close ---------- */
.summit { position: relative; min-height: 78vh; display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; padding: 120px var(--gutter); }
.summit .bgimg { position: absolute; inset: -8% 0; z-index: -2; background-size: cover; background-position: center 60%; will-change: transform; }
.summit::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(9, 9, 8, .38); }
.summit .mono { color: var(--text); margin: 0 0 24px; font-size: 12px; }
.summit h2 { font-size: clamp(28px, 4.6vw, 72px); line-height: 1.1; margin: 0 auto 44px; max-width: 24ch; }
.summit .ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- page intro (inner pages) ---------- */
.intro { position: relative; min-height: 100svh; display: grid; place-items: center; text-align: center; overflow: hidden; isolation: isolate; padding: 160px 0 110px; }
.intro .bgimg { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; opacity: 0; transform: scale(1.06); transition: opacity 2s ease, transform 5s var(--ease); }
.loaded .intro .bgimg { opacity: 1; transform: scale(1); }
.intro::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(9, 9, 8, .42); }
.intro .mono { color: var(--text); margin: 0 0 24px; font-size: 12px; }
.intro h1 { font-size: clamp(28px, 4.6vw, 68px); line-height: 1.12; margin: 0 auto; max-width: 17ch; min-height: 2.24em; }
.intro .lede { color: var(--text); max-width: 46ch; margin: 28px auto 0; font-size: 18px; opacity: 0; transition: opacity 1s ease 1.3s; }
.loaded .intro .lede { opacity: .9; }

/* ---------- rows (companies, ideals) ---------- */
.rows { border-top: 1px solid var(--hair); }
.row { position: relative; display: grid; grid-template-columns: 90px 1.3fr 1.5fr 170px; gap: 24px; align-items: center; padding: 34px 0; border-bottom: 1px solid var(--hair); isolation: isolate; }
.row::before { content: ''; position: absolute; inset: 0 calc(var(--gutter) * -1); background: var(--surface); z-index: -1; transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); }
a.row:hover::before { transform: scaleY(1); }
.row .n { color: var(--dim); }
.row h3 { font: 400 clamp(20px, 2.4vw, 34px)/1.15 var(--display); text-transform: uppercase; margin: 0; transition: transform .6s var(--ease), color .4s; }
a.row:hover h3 { transform: translateX(10px); color: var(--ember); }
.row p { color: var(--dim); margin: 0; font-size: 17px; }
.row .go { justify-self: end; }
.status { display: inline-flex; align-items: center; gap: 8px; color: var(--dim); }
.status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
.status.live::before { background: var(--ember); animation: pulse 2.4s ease-in-out infinite; }
.redacted { display: inline-block; background: var(--text); color: transparent; border-radius: 2px; padding: 0 .2em; user-select: none; }

/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.step { padding: 40px 32px 48px; border-right: 1px solid var(--hair); min-height: 300px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.step:last-child { border-right: 0; }
.step .big { font: 400 clamp(48px, 5vw, 80px)/1 var(--display); color: transparent; -webkit-text-stroke: 1px rgba(245, 243, 238, .9); }
.step h3 { font: 400 20px/1.25 var(--display); text-transform: uppercase; margin: 0 0 12px; }
.step p { color: rgba(245, 243, 238, .82); font-size: 16px; margin: 0; max-width: 32ch; min-height: 4.65em; }

/* ---------- email block ---------- */
.email { display: inline-block; font: 400 clamp(18px, 3.4vw, 48px)/1.1 var(--display); text-transform: uppercase; border-bottom: 1px solid var(--hair-2); padding-bottom: 10px; transition: color .4s, border-color .4s; overflow-wrap: anywhere; }
.email:hover { color: var(--ember); border-color: var(--ember); }
.copied { margin-top: 18px; color: var(--dim); min-height: 1.2em; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--hair); text-align: center; color: var(--dim); }
footer .crest { padding: 96px var(--gutter) 64px; }
footer .crest svg { width: 72px; height: auto; margin: 0 auto 28px; }
footer .crest .display { color: var(--text); font-size: clamp(18px, 2.2vw, 30px); margin: 0 0 10px; }
footer .crest .ctas { display: flex; gap: 12px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }
footer .bar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; border-top: 1px solid var(--hair); padding: 22px var(--gutter); }
footer .bar nav { display: flex; gap: 28px; }
footer .bar nav a:hover { color: var(--text); }
footer .bar :first-child { text-align: left; }
footer .bar :last-child { text-align: right; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .nav .links, .hero .flank, .altimeter { display: none; }
  .nav .wrap { grid-template-columns: 1fr auto; }
  .cards, .steps { grid-template-columns: 1fr; }
  .step { border-right: 0; border-bottom: 1px solid var(--hair); min-height: 0; }
  .step:last-child { border-bottom: 0; }
  .split { grid-template-columns: 1fr; }
  .split > :first-child { border-right: 0; border-bottom: 1px solid var(--hair); }
  .meta-row { grid-template-columns: 1fr; }
  .meta-row > div, .meta-row > div:nth-child(2), .meta-row > div:last-child { text-align: left; border-right: 0; border-bottom: 1px solid var(--hair); }
  .row { grid-template-columns: 1fr auto; gap: 10px 16px; padding: 28px 0; }
  .row .n { grid-column: 1 / -1; }
  .row p { grid-column: 1 / -1; grid-row: 3; }
  .row .go { grid-column: 2; grid-row: 2; }
  footer .bar { grid-template-columns: 1fr; text-align: center; }
  footer .bar :first-child, footer .bar :last-child { text-align: center; }
  footer .bar nav { justify-content: center; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .inversion .statement .w { color: var(--ink); }
  .inversion .statement .w.em { color: var(--ember); }
}

/* ---------- ?still: end states for static captures ---------- */
html.still { scroll-behavior: auto !important; }
.still *, .still *::before, .still *::after { transition: none !important; animation-play-state: paused !important; }
.still [data-reveal], .still .card { opacity: 1; transform: none; }
.still .card .bg { filter: blur(0) brightness(calc(var(--b, 1) * .7)); transform: scale(1.02); }
.still .hero-media video { display: none; }
.still .hero-media { background: url(media/summit-dusk.jpg) center / cover; filter: saturate(1.08) brightness(1.18); }
@media (max-width: 600px) { .strip .sm-hide { display: none; } }

/* ---------- name label ---------- */
.name .label { color: var(--ember); margin: 0 0 28px; }

/* ---------- portfolio panels ---------- */
.panels { display: grid; gap: 16px; }
.panel { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; min-height: clamp(360px, 42vw, 520px); padding: clamp(24px, 3vw, 40px); border-radius: 10px; overflow: hidden; isolation: isolate; border: 1px solid var(--hair); }
.panel .bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: brightness(calc(var(--b, 1) * .6)); transform: scale(1.02); transition: transform 1.6s var(--ease), filter 1.2s var(--ease); }
a.panel:hover .bg { transform: scale(1.07); filter: brightness(calc(var(--b, 1) * .75)); }
.panel::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(9,9,8,.9), rgba(9,9,8,.15) 60%); }
.panel .top { position: absolute; top: clamp(24px, 3vw, 40px); left: clamp(24px, 3vw, 40px); right: clamp(24px, 3vw, 40px); display: flex; justify-content: space-between; align-items: center; }
.panel h3 { font: 400 clamp(30px, 5.4vw, 84px)/1 var(--display); text-transform: uppercase; letter-spacing: -.02em; margin: 0 0 16px; }
.panel p { color: rgba(245, 243, 238, .85); font-size: clamp(16px, 1.4vw, 19px); margin: 0; max-width: 40ch; }
.panel.withheld .bg { filter: blur(4px) brightness(.7); transform: scale(1.06); }
.redact { display: inline-flex; align-items: center; gap: .3em; border: 1px solid var(--hair-2); padding: .14em .3em; color: var(--dim); font: 400 clamp(26px, 4.6vw, 72px)/1 var(--display); letter-spacing: -.01em; }
.redact .cursor { width: .08em; height: .9em; background: var(--ember); animation: pulse 1.2s steps(2) infinite; }
.redact-note { display: block; margin-top: 14px; color: var(--dim); }
@media (max-width: 900px) { .panel { grid-template-columns: 1fr; } }
.panel > .btn { justify-self: start; }

/* ---------- ideals at display scale ---------- */
.ideals { border-top: 1px solid var(--hair); }
.ideal { position: relative; display: grid; grid-template-columns: 90px 1fr; gap: 8px 24px; padding: clamp(40px, 5vw, 72px) 0; border-bottom: 1px solid var(--hair); }
.ideal::before { content: ''; position: absolute; left: 0; top: -1px; height: 1px; width: 100%; background: rgba(245, 243, 238, .7); transform: scaleX(0); transform-origin: left; transition: transform 1.4s var(--ease) .2s; }
.ideal.in::before { transform: scaleX(1); }
.ideal .n { color: var(--text); font-size: 12px; padding-top: 1.1em; }
.ideal h3 { font: 400 clamp(34px, 6.4vw, 104px)/1 var(--display); text-transform: uppercase; letter-spacing: -.03em; margin: 0; }
.ideal:nth-child(2) h3 { color: var(--text); }
.ideal p { grid-column: 2; color: var(--dim); font-size: clamp(17px, 1.5vw, 21px); max-width: 44ch; margin: 18px 0 0; }
.still .ideal::before { transform: scaleX(1); }
@media (max-width: 900px) { .ideal { grid-template-columns: 1fr; } .ideal p { grid-column: 1; } .ideal .n { padding-top: 0; } }
.intro.low { place-items: start center; padding-top: 22vh; }
.section.tight-bottom { padding-bottom: clamp(32px, 4vw, 56px); }

/* ---------- light button for photo grounds ---------- */
.btn-light { background: var(--paper); color: var(--ink); }
.btn-light::before { content: ''; position: absolute; inset: 0; background: var(--ember); transform: translateY(101%); transition: transform .5s var(--ease); z-index: -1; }
.btn-light:hover::before { transform: translateY(0); }

/* ---------- phone menu ---------- */
.menu-btn { display: none; }
.menu { position: fixed; inset: 0; z-index: 30; background: var(--abyss); display: none; flex-direction: column; justify-content: center; gap: 8px; padding: 96px var(--gutter) 48px; opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s linear .5s; }
.menu a.big { font: 400 clamp(28px, 9vw, 44px)/1.2 var(--display); text-transform: uppercase; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.menu .mono { color: var(--dim); margin-top: 28px; }
.menu-open .menu { display: flex; opacity: 1; visibility: visible; transition: opacity .5s var(--ease); }
@media (min-width: 901px) { .menu, .menu-open .menu { display: none; } }
.menu-open .nav { position: fixed; z-index: 40; }
@media (max-width: 900px) {
  .menu-btn { display: inline-flex; }
  .nav .end { display: none; }
}

/* ---------- portfolio: the lead and the rest ---------- */
.panel.lead { min-height: clamp(460px, 56vw, 720px); }
.panel.lead h3 { font-size: clamp(44px, 9vw, 150px); }
.panel-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.panel-row .panel { grid-template-columns: 1fr; min-height: clamp(380px, 34vw, 480px); }
.panel-row .panel h3 { font-size: clamp(20px, 1.9vw, 28px); min-height: 2.3em; display: flex; align-items: flex-end; }
.panel-row .redact { font-size: clamp(22px, 2.2vw, 34px); }
.sub-head { display: flex; justify-content: space-between; align-items: center; color: var(--dim); padding: 40px 0 18px; border-bottom: 1px solid var(--hair); margin-bottom: 16px; }
@media (max-width: 900px) { .panel-row { grid-template-columns: 1fr; } }
.nav .end-sm { justify-self: end; }

.ln { display: block; }
.display, .head h2, .summit h2, .intro h1 { text-wrap: balance; }
button.btn { -webkit-appearance: none; appearance: none; background-color: transparent; color: var(--text); margin: 0; }
.panel-row .panel .bg { filter: brightness(calc(var(--b, 1) * .85)); }
.panel-row .panel.withheld .bg { filter: blur(14px) brightness(.85); }
.panel-row .panel::after { background: linear-gradient(to top, rgba(9,9,8,.92), rgba(9,9,8,0) 70%); }
@starting-style { .menu-open .menu { opacity: 0; } }
/* navigation is UI, so it is set in Schibsted, not the label mono */
.nav .links a, footer .bar nav a { font: 500 13px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; }
.altimeter .read { text-transform: uppercase; }

/* ---------- what we do: one composition, three parts ---------- */
.index { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: stretch; }
.index-media { position: relative; min-height: clamp(420px, 44vw, 620px); border-radius: 10px; overflow: hidden; border: 1px solid var(--hair); }
.index-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); filter: brightness(calc(var(--b, 1) * .8)); transition: opacity 1s var(--ease), transform 2.4s var(--ease); }
.index-media img.on { opacity: 1; transform: scale(1); }
.index-media .caption { position: absolute; left: 22px; bottom: 20px; }
.index-media .cap { display: none; color: var(--text); }
.index-media .cap.on { display: inline; }
.index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair); align-self: center; }
.index-list li { border-bottom: 1px solid var(--hair); position: relative; }
.index-list li::before { content: ''; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--ember); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
.index-list li.on::before { transform: scaleX(1); }
.index-list button { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 56px 1fr; gap: 16px; width: 100%; padding: clamp(24px, 3vw, 40px) 0; }
.index-list button:focus-visible { outline: 2px solid var(--ember); outline-offset: 4px; }
.index-list .n { color: var(--dim); padding-top: .7em; transition: color .4s; }
.index-list .h { display: block; font: 400 clamp(24px, 2.8vw, 42px)/1.05 var(--display); text-transform: uppercase; letter-spacing: -.02em; color: var(--text); opacity: .4; transition: opacity .5s var(--ease); }
.index-list .d { display: block; color: rgba(245, 243, 238, .82); font-size: 17px; max-width: 38ch; margin-top: 12px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height .7s var(--ease), opacity .5s ease; }
.index-list li.on .h { opacity: 1; }
.index-list li.on .n { color: var(--ember); }
.index-list li.on .d { max-height: 6em; opacity: 1; }
@media (max-width: 900px) { .index { grid-template-columns: 1fr; } .index-media { min-height: 360px; } }

/* ---------- companies: mid panels ---------- */
.panel.mid { min-height: clamp(320px, 30vw, 440px); }
.panel.mid h3 { font-size: clamp(28px, 4.4vw, 68px); line-height: 1; }
.panel .redact { font-size: inherit; }
.summit.compact { min-height: 64vh; padding-top: 88px; padding-bottom: 88px; }

/* ---------- work with us: one closing block ---------- */
.contact-close { text-align: center; margin-top: clamp(72px, 8vw, 112px); }

footer .bar nav a { color: rgba(245, 243, 238, .85); }

/* hero: the peak stays sharp; the mist and everything behind the words goes soft */
.hero-media::after { content: ''; position: absolute; inset: 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 24%, #000 52%); mask-image: linear-gradient(to bottom, transparent 0%, transparent 24%, #000 52%); }

/* never end a line on one word */
.panel p, .card p, .lede, .index-list .d, .ideal p, .head p, .split .copy p, .step p { text-wrap: pretty; }

/* ghost buttons over bright photography get a smoked backing */
.summit .btn-ghost, .intro .btn-ghost { background-color: rgba(9, 9, 8, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

footer .tagline { margin: 0; color: rgba(245, 243, 238, .78); font-size: 16px; }

/* ideals: one tight ruled list over a single soft plate */
.ideals-wrap { position: relative; isolation: isolate; overflow: hidden; }
.ideals-wrap .plate { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; z-index: -2; filter: blur(5px) brightness(.72) saturate(1.15); transform: scale(1.06); }
.ideals-wrap::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, var(--void), rgba(15,15,14,.3) 20%, rgba(15,15,14,.3) 80%, var(--void)); }
.ideals-wrap .head { margin-bottom: 32px; }
.ideal { padding: clamp(32px, 4vw, 52px) 0; }
.ideal p { color: rgba(245, 243, 238, .86); }

/* route map: a drawn ascent, camp by camp */
.route { background: #121312; }
.route svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.route .contours path { stroke: rgba(245, 243, 238, .09); stroke-width: 1; }
.route .ridge { fill: rgba(245, 243, 238, .03); stroke: rgba(245, 243, 238, .55); stroke-width: 1.2; stroke-linejoin: round; }
.route .trail { fill: none; stroke: rgba(245, 243, 238, .35); stroke-width: 1; stroke-dasharray: 3 5; }
.route .seg { fill: none; stroke: var(--ember); stroke-width: 2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s var(--ease); }
.route .camp circle { fill: var(--void); stroke: rgba(245, 243, 238, .6); stroke-width: 1.2; transition: fill .5s, stroke .5s; }
.route .camp text { fill: rgba(245, 243, 238, .55); font: 400 11px var(--mono); letter-spacing: .08em; transition: fill .5s; }
.route .ticks path { stroke: rgba(245, 243, 238, .25); stroke-width: 1; fill: none; }
.route[data-step="0"] .c0 circle, .route[data-step="1"] .c1 circle, .route[data-step="2"] .c2 circle { fill: var(--ember); stroke: var(--ember); }
.route[data-step="0"] .c0 text, .route[data-step="1"] .c1 text, .route[data-step="2"] .c2 text { fill: var(--text); }
.route[data-step="1"] .seg1, .route[data-step="2"] .seg1, .route[data-step="2"] .seg2 { stroke-dashoffset: 0; }
.route[data-step="2"] .seg2 { transition-delay: .5s; }

/* every index row keeps its two lines; the active one is lit */
.index-list .d { max-height: none; opacity: .45; }
.index-list li.on .d { opacity: 1; }

/* contact closes on the summit, like every other page */
.contact-summit { min-height: 80vh; }
.contact-summit .email { border-color: rgba(245, 243, 238, .6); }

/* route map: brighter, bigger, always showing the whole climb */
.index { grid-template-columns: 1.35fr 1fr; }
.route .trail { stroke: rgba(245, 243, 238, .7); stroke-width: 1.4; stroke-dasharray: 4 6; }
.route .ridge { stroke: rgba(245, 243, 238, .85); stroke-width: 1.6; fill: rgba(245, 243, 238, .05); }
.route .camp text { font-size: 13px; fill: rgba(245, 243, 238, .8); }
.route .camp circle { r: 8; stroke: var(--text); }
.route .seg { stroke-width: 3; }
.index-media.route { min-height: clamp(440px, 40vw, 560px); }
.index-list .h { font-size: clamp(22px, 2.4vw, 36px); }
.index-list button { padding: clamp(20px, 2.2vw, 30px) 0; }
.step .badge { align-self: flex-start; }

.route { background: linear-gradient(to bottom, #171a1d, #101110 70%); }
.route .far { fill: rgba(245, 243, 238, .025); stroke: rgba(245, 243, 238, .22); stroke-width: 1; }
.route .ridge { fill: #0c0d0c; }
.route .contours path { stroke: rgba(245, 243, 238, .16); }

/* closing images fade into the footer instead of stopping on a hard edge */
.summit::after { background: linear-gradient(to bottom, rgba(9, 9, 8, .38) 0%, rgba(9, 9, 8, .38) 70%, var(--void) 100%); }
.index-media.route { min-height: clamp(440px, 36vw, 500px); }
@media (max-width: 900px) { .index { grid-template-columns: 1fr; } .index-media.route { min-height: 340px; } }
.summit .btn-ghost, .intro .btn-ghost { background-color: rgba(9, 9, 8, .58); }

/* final pass */
.panel.lead { min-height: clamp(420px, 40vw, 580px); }
.panel.lead .bg { object-position: 75% center; }
.summit .bgimg.soft { filter: blur(6px) brightness(.9); transform: scale(1.05); }
.index-list li.on .n { color: var(--text); }
.index-list li::before { background: rgba(245, 243, 238, .7); }
.index-media .caption { left: auto; right: 22px; top: 20px; bottom: auto; }
.hero .lede { text-wrap: balance; }
@media (max-width: 600px) { .email { font-size: 15px; letter-spacing: 0; } }
.index-media .caption { top: auto; bottom: 20px; }

/* closers: brighter, tighter, fading only at the very edge */
.summit { min-height: 64vh; padding-top: 104px; padding-bottom: 104px; }
.summit::after { background: linear-gradient(to bottom, rgba(9, 9, 8, .3) 0%, rgba(9, 9, 8, .3) 86%, var(--void) 100%); }
.contact-summit { min-height: 60vh; }

/* route map reads as terrain */
.route .ridge { fill: #1b1d1c; }
.route .hatch { fill: url(#hatch); stroke: none; }
.route .flag path { stroke: var(--text); stroke-width: 1.4; fill: none; }
.route .flag .cloth { fill: var(--text); stroke: none; }
.route .camp circle { r: 10; stroke-width: 2; }
.route .camp text { font-size: 15px; fill: var(--text); }