/* ─────────────────────────────────────────────────
   Shared styles for the secondary pages.
   Same tokens and type system as index.html, which
   keeps its own inline styles so the homepage stays
   self-contained and can't be broken from here.
   ───────────────────────────────────────────────── */

:root{
  --wall:   oklch(0.985 0.002 240);
  --wall-2: oklch(0.955 0.003 240);
  --ink:    oklch(0.2 0.008 250);
  --ink-2:  oklch(0.46 0.008 250);
  --line:   oklch(0.2 0.008 250 / 0.12);
  --dark:   oklch(0.17 0.008 250);
  --btn:       oklch(0.28 0.008 250);
  --btn-hover: oklch(0.13 0.006 250);
  --dark-t: oklch(0.93 0.004 240);

  --f: "Schibsted Grotesk", system-ui, sans-serif;
  --m: "Fragment Mono", monospace;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --gut: clamp(1.25rem, 4vw, 4rem);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  background:var(--wall); color:var(--ink); font-family:var(--f);
  font-size:clamp(0.98rem, 0.95rem + 0.2vw, 1.06rem); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100svh;
}
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; }
::selection{ background:var(--ink); color:var(--wall); }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid var(--ink); outline-offset:3px;
}

.mono{
  font-family:var(--m); font-size:0.66rem; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--ink-2);
}
.wrap{ padding-inline:var(--gut); max-width:1600px; margin-inline:auto; width:100%; }

/* ── Header: same chrome as the homepage ── */
.hud{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:1.1rem var(--gut);
  border-bottom:1px solid var(--line);
}
.hud a{ text-decoration:none; }
.hud .mark{ font-weight:700; letter-spacing:-0.02em; font-size:0.95rem; }
.hud nav{ display:flex; gap:clamp(1rem, 2.2vw, 2.1rem); align-items:baseline; }
.hud nav a{
  font-family:var(--m); font-size:0.72rem; letter-spacing:0.01em;
  padding-bottom:2px; border-bottom:1px solid transparent;
  transition:border-color 160ms var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .hud nav a:hover{ border-bottom-color:currentColor; }
}
/* ── Phone menu: below 860px the nav becomes a full-screen wall list ── */
.hud .menu-btn{
  display:none; appearance:none; background:none; border:0; cursor:pointer;
  font-family:var(--m); font-size:0.72rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--ink);
  padding:0.5rem 0; min-height:44px; min-width:44px; text-align:right;
}
@media (max-width:860px){
  .hud{ align-items:center; }
  .hud .menu-btn{ display:block; }
  .hud .mark, .hud .menu-btn{ position:relative; z-index:2; }
  .hud nav{
    position:fixed; top:0; left:0; width:100%; height:100dvh; z-index:1;
    background-color:var(--wall);
    flex-direction:column; justify-content:center; align-items:flex-start;
    gap:1.5rem; padding:0 var(--gut);
    opacity:0; visibility:hidden;
    transition:opacity 260ms var(--ease), visibility 260ms var(--ease);
  }
  .hud nav a{
    font-family:var(--f); font-size:clamp(1.5rem, 7vw, 2.1rem); font-weight:500;
    letter-spacing:-0.03em; text-transform:none; border-bottom:0; padding:0.15rem 0;
  }
  .hud.open nav{ opacity:1; visibility:visible; }
  body.nav-open{ overflow:hidden; }
}

/* ── Page body ── */
main{ flex:1 0 auto; display:flex; align-items:center; }
.sheet{
  max-width:1240px; margin-inline:auto; width:100%;
  padding-block:clamp(3.5rem, 14vh, 9rem);
}
.sheet .mono{ display:block; margin-bottom:1rem; }
.sheet h1{
  font-size:clamp(2rem, 1rem + 3.6vw, 4.2rem);
  font-weight:500; letter-spacing:-0.04em; line-height:1.05;
  max-width:20ch; text-wrap:balance;
}
.sheet h1 strong{ font-weight:800; }
.sheet .lede{
  color:var(--ink-2); max-width:56ch; margin-top:1.3rem;
  font-size:clamp(1rem, 0.95rem + 0.3vw, 1.12rem);
}
.sheet .addr{ margin-top:1.1rem; color:var(--ink); }
.sheet .addr a{
  color:inherit; text-decoration:none;
  border-bottom:1px solid currentColor; padding-bottom:2px;
  transition:opacity 160ms var(--ease);
}
@media (hover:hover) and (pointer:fine){ .sheet .addr a:hover{ opacity:0.55; } }
/* the address is set larger here, so the copy icon scales to match it */
.sheet .addr .copy{ opacity:0.85; }
.sheet .addr .copy svg{ width:15px; height:15px; }
.sheet .back{
  display:inline-block; margin-top:2.2rem; text-decoration:none;
  font-family:var(--m); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink); border-bottom:1px solid currentColor; padding-bottom:3px;
  transition:opacity 160ms var(--ease);
}
@media (hover:hover) and (pointer:fine){ .sheet .back:hover{ opacity:0.55; } }

/* meanwhile-list on the under-construction pages */
.meanwhile{
  margin-top:clamp(2.5rem, 7vh, 4rem);
  border-top:1px solid var(--line); padding-top:1.4rem;
  max-width:52ch;
}
.meanwhile p{ color:var(--ink-2); font-size:0.92rem; margin-top:0.5rem; }

/* ── The one live case study, shown on the under-construction pages ── */
.case-card{
  margin-top:clamp(2.5rem, 7vh, 4rem);
  border-top:1px solid var(--line); padding-top:clamp(1.6rem, 4vh, 2.4rem);
  display:grid; grid-template-columns:minmax(0,26rem) minmax(0,1fr);
  gap:clamp(1.5rem, 4vw, 3rem); align-items:center;
}
.case-card + .case-card{ margin-top:clamp(1.6rem, 4vh, 2.4rem); }
.case-card .shot{
  position:relative; overflow:hidden; background:var(--wall-2);
  aspect-ratio:3/2; border-radius:12px;
}
.case-card .shot img{ width:100%; height:100%; object-fit:cover; }

/* not-yet-written case studies: veiled, labelled, no way in */
.case-card.soon .shot::after{
  content:"Under construction";
  position:absolute; inset:0;
  background:rgb(0 0 0 / 0.5);
  display:grid; place-items:center;
  color:#fff;
  font-family:var(--m); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase;
}
.case-card.soon h2, .case-card.soon p{ color:var(--ink-2); }
.case-card h2{
  font-size:clamp(1.35rem, 1rem + 1.2vw, 1.9rem);
  font-weight:700; letter-spacing:-0.03em; line-height:1.15;
  margin-bottom:0.25rem;
}
.case-card .tag{ display:block; margin-bottom:0.8rem; }
.case-card p{ color:var(--ink-2); font-size:0.92rem; max-width:44ch; }
@media (max-width:760px){ .case-card{ grid-template-columns:1fr; } }

.btn{
  display:inline-block; margin-top:1.4rem; text-decoration:none;
  background:var(--btn); color:var(--wall); border-radius:6px;
  font-weight:700; font-size:0.88rem; letter-spacing:-0.01em;
  padding:0.66rem 1.4rem;
  position:relative;
  transition:transform 300ms var(--ease), background-color 300ms ease;
}
.btn::before{ content:""; position:absolute; inset:-6px; }
@media (prefers-reduced-motion:reduce){
  .btn, .send{ transition:background-color 300ms ease, border-color 300ms ease; }
  .btn:hover, .btn:active, .send:hover, .send:active{ transform:none; }
}
.btn:active{ transform:scale(0.98); transition-duration:120ms; }
@media (hover:hover) and (pointer:fine){
  .btn:hover{ background:var(--btn-hover); transform:translateY(-2px); }
}

/* ── Case-study page ── */
.case h1{ max-width:24ch; }
.case .meta{ display:flex; flex-wrap:wrap; gap:0.5rem 2.5rem; margin-top:1.6rem; }
.case .meta .mono{ display:block; margin:0; }
.case .meta b{ color:var(--ink); font-weight:700; }
.case figure{ margin:clamp(2rem, 6vh, 3.5rem) 0 0; }
.case figure img{ width:100%; background:var(--wall-2); }
.case figcaption{ margin-top:0.85rem; }
.case .body{ margin-top:clamp(2rem, 6vh, 3.5rem); max-width:60ch; }
.case .body h2{
  font-size:1.05rem; font-weight:700; letter-spacing:-0.01em;
  margin:2rem 0 0.5rem;
}
.case .body p + p{ margin-top:0.9rem; }
.case .body p{ color:var(--ink-2); }

/* ── Audit form ── */
.audit-grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,26rem);
  gap:clamp(2rem, 6vw, 5rem); align-items:start;
}
@media (max-width:860px){ .audit-grid{ grid-template-columns:1fr; } }

.facts{ margin-top:2rem; display:flex; flex-wrap:wrap; gap:0.5rem 2.5rem; }
.facts .mono b{ color:var(--ink); font-weight:700; }

.form-card{ border:1px solid var(--line); padding:clamp(1.4rem, 4vw, 2rem); }
.field{ display:block; margin-bottom:1.1rem; }
.field span{
  display:block; margin-bottom:0.4rem;
  font-family:var(--m); font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-2);
}
.field input{
  width:100%; font:inherit; font-size:0.95rem; color:var(--ink);
  background:var(--wall); border:1px solid var(--line);
  padding:0.7rem 0.8rem;
  transition:border-color 160ms var(--ease);
}
.field input:hover{ border-color:oklch(0.2 0.008 250 / 0.3); }
.field input:focus{ border-color:var(--ink); outline:none; }
.hp{ position:absolute; left:-9999px; }

.send{
  width:100%; font:inherit; cursor:pointer;
  background:var(--btn); color:var(--wall); border-radius:6px;
  font-weight:700; font-size:0.92rem; letter-spacing:-0.01em;
  border:1px solid var(--btn); padding:0.72rem 1.6rem;
  transition:transform 300ms var(--ease), background-color 300ms ease, border-color 300ms ease;
}
.send:active{ transform:scale(0.98); transition-duration:120ms; }
@media (hover:hover) and (pointer:fine){
  .send:hover{ background:var(--btn-hover); border-color:var(--btn-hover); transform:translateY(-2px); }
}
.fine{
  font-family:var(--m); font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-2); margin-top:1rem; text-align:center;
}

/* ── Footer ── */
footer{ border-top:1px solid var(--line); flex-shrink:0; }
.foot-in{
  display:flex; flex-wrap:wrap; gap:0.8rem 2.5rem; align-items:baseline;
  padding-block:1.5rem;
}
.foot-in .mark{ font-weight:700; font-size:0.92rem; text-decoration:none; letter-spacing:-0.02em; }
.foot-in a:not(.mark){
  font-family:var(--m); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase;
  text-decoration:none; color:var(--ink-2);
}
@media (hover:hover) and (pointer:fine){ .foot-in a:not(.mark):hover{ color:var(--ink); } }
.foot-in .mono{ margin-left:auto; }

/* ── Email address with a copy control ── */
.mailto{ display:inline-flex; align-items:baseline; gap:0.45rem; }
.copy{
  appearance:none; background:none; border:0; padding:0; cursor:pointer;
  color:var(--ink-2); line-height:0; position:relative; align-self:center;
  opacity:0.75; transition:opacity 160ms var(--ease), color 160ms var(--ease);
}
/* the icon stays small; the tap target does not */
.copy::before{ content:""; position:absolute; inset:-14px; }
.copy:hover, .copy:focus-visible{ opacity:1; color:var(--ink); }
.copy:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; border-radius:2px; }
.copy .copied{
  position:absolute; bottom:calc(100% + 7px); left:50%; transform:translateX(-50%);
  font-family:var(--m); font-size:0.58rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink); white-space:nowrap; line-height:1;
  opacity:0; pointer-events:none; transition:opacity 160ms var(--ease);
}
.copy.is-copied{ opacity:1; color:var(--ink); }
.copy.is-copied .copied{ opacity:1; }