/* ==========================================================================
   SquareMeter — shared stylesheet (site-v6)
   The visual identity (colours, type, spacing rhythm) is carried over
   unchanged from site-v5; this file only lifts it out of inline styles so
   the seven pages stay legible and stay consistent with each other.
   ========================================================================== */

:root{
  --bone:#f4f3ef;
  --bone-2:#ecebe5;
  --teal-900:#0f3340;
  --teal-700:#143e51;
  --ink:#16323d;
  --muted:#5a676c;
  --muted-2:#7c878b;
  --brass:#b0936a;
  --brass-l:#c7b291;
  --line:rgba(22,50,61,0.14);
  --line-soft:rgba(22,50,61,0.08);
  --line-d:rgba(244,243,239,0.14);
  --cell:var(--bone);          /* background of hairline-grid cells */
  --pad-x:clamp(20px,5vw,64px);
  --sans:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--bone);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
::selection{background:var(--teal-700);color:var(--bone);}
a{color:inherit;text-decoration:none;}
img{display:block;}

.page{font-family:var(--sans);color:var(--ink);background:var(--bone);overflow-x:clip;position:relative;}

/* --------------------------------------------------------------- layout */
.wrap{width:100%;max-width:1320px;margin:0 auto;}
.sec{padding:clamp(90px,14vh,170px) var(--pad-x);}
.sec--tight{padding:clamp(70px,10vh,120px) var(--pad-x);}
.sec--alt{background:var(--bone-2);border-top:1px solid var(--line-soft);--cell:var(--bone-2);}
.sec--dark{background:var(--teal-900);color:var(--bone);--cell:var(--teal-900);}
.sec--deep{background:var(--teal-700);color:var(--bone);--cell:var(--teal-700);}

.cols{display:grid;gap:clamp(32px,6vw,96px);align-items:start;}
.cols--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.cols--3{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,56px);}
.cols--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,28px);}
.cols--5{grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);}
.cols--aside{grid-template-columns:minmax(0,0.85fr) minmax(0,1.4fr);gap:clamp(32px,7vw,110px);}
.cols--split{grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);align-items:center;}
.cols--wide-left{grid-template-columns:minmax(0,1fr) minmax(0,0.9fr);align-items:end;gap:clamp(40px,6vw,90px);}

.stack-sm{display:flex;flex-direction:column;gap:14px;}
.mb-lg{margin-bottom:clamp(48px,7vh,84px);}
.mb-md{margin-bottom:clamp(36px,5vh,64px);}
.mt-lg{margin-top:clamp(44px,6vh,72px);}

/* ------------------------------------------------------------ typography */
.eyebrow{font-family:var(--mono);font-size:13px;letter-spacing:0.16em;text-transform:uppercase;color:var(--brass);display:block;}
.sec--dark .eyebrow,.sec--deep .eyebrow,.hero .eyebrow,[data-who-label]{color:var(--brass-l);}
.eyebrow--rule{display:flex;align-items:center;gap:14px;letter-spacing:0.22em;}
.eyebrow--rule::before{content:"";width:30px;height:1px;background:var(--brass);display:inline-block;flex:none;}
.numeral{display:block;font-family:var(--mono);font-size:clamp(36px,4vw,56px);color:rgba(22,50,61,0.16);margin-bottom:18px;letter-spacing:0;}
.sec--dark .numeral,.sec--deep .numeral,.hero .numeral,[data-who-label] .numeral{color:rgba(244,243,239,0.2);}

h1,h2,h3{text-wrap:balance;}
/* Danish compounds get long enough to outrun their column - measured
   'investeringsbeslutning' spilling 9px past its grid cell at 900px. This
   only fires when a single word would otherwise overflow, so nothing that
   currently fits changes. */
.h1,.h2,.h3,.h4{overflow-wrap:break-word;}
.h1{margin:0;font-weight:600;font-size:clamp(38px,6.2vw,88px);line-height:0.99;letter-spacing:-0.028em;color:var(--bone);}
.h2{margin:0;font-weight:600;font-size:clamp(30px,4.4vw,58px);line-height:1.02;letter-spacing:-0.022em;color:var(--ink);}
.sec--dark .h2,.sec--deep .h2{color:var(--bone);}
.h3{margin:0;font-weight:600;font-size:clamp(21px,1.9vw,28px);line-height:1.15;letter-spacing:-0.012em;color:var(--ink);}
.sec--dark .h3,.sec--deep .h3{color:var(--bone);}
.h4{margin:0;font-weight:600;font-size:18px;line-height:1.3;color:var(--ink);}
.sec--dark .h4,.sec--deep .h4{color:var(--bone);}

.lead{margin:0;font-weight:500;font-size:clamp(22px,2.6vw,36px);line-height:1.3;letter-spacing:-0.015em;color:var(--ink);text-wrap:pretty;}
.sec--dark .lead,.sec--deep .lead{color:var(--bone);}
.body{margin:0;font-size:clamp(16px,1.2vw,18.5px);line-height:1.65;color:var(--muted);text-wrap:pretty;}
.sec--dark .body,.sec--deep .body{color:rgba(244,243,239,0.74);}
.small{margin:0;font-size:16px;line-height:1.62;color:var(--muted);}
.sec--dark .small,.sec--deep .small{color:rgba(244,243,239,0.7);}
.meta{font-family:var(--mono);font-size:12px;letter-spacing:0.08em;color:var(--muted-2);}
.sec--dark .meta,.sec--deep .meta{color:rgba(244,243,239,0.55);}
.measure{max-width:48ch;}
.measure-sm{max-width:42ch;}
.strong-line{font-weight:600;color:var(--ink);}
.sec--dark .strong-line{color:var(--bone);}

/* ----------------------------------------------------------------- links */
.link{font-family:var(--mono);font-size:13px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--brass);padding-bottom:6px;white-space:nowrap;display:inline-block;transition:color .3s ease,border-color .3s ease;}
.link:hover{color:var(--brass);}
.sec--dark .link,.sec--deep .link{color:var(--bone);}
.sec--dark .link:hover,.sec--deep .link:hover{color:var(--brass-l);}
.btn{display:inline-block;font-family:var(--mono);font-size:13px;letter-spacing:0.12em;text-transform:uppercase;padding:17px 30px;background:var(--ink);color:var(--bone);transition:background .35s ease,color .35s ease;}
.btn:hover{background:var(--teal-700);}
.btn--light{background:var(--bone);color:var(--ink);}
.btn--light:hover{background:var(--brass-l);color:var(--ink);}

/* ----------------------------------------------------------------- media */
.duo{position:relative;overflow:hidden;background:var(--teal-900);}
.duo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);}
.duo::after{content:"";position:absolute;inset:0;background:var(--teal-700);mix-blend-mode:color;opacity:.45;pointer-events:none;}
.duo--soft::after{opacity:.26;}
.duo--plain::after{content:none;}
.duo--hover img{transition:filter .8s ease,transform 1.1s var(--ease);}
.duo--hover:hover img{filter:grayscale(0) contrast(1);transform:scale(1.05);}
.duo--hover:hover::after{opacity:.1;}
.ar-45{aspect-ratio:4/5;}
.ar-34{aspect-ratio:3/4;}
.ar-11{aspect-ratio:1/1;}
.ar-1610{aspect-ratio:16/10;}
.ar-169{aspect-ratio:16/9;}
.ar-tall{aspect-ratio:3/4.2;}
.tag{position:absolute;left:16px;top:16px;font-family:var(--mono);font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:rgba(244,243,239,0.92);background:rgba(15,51,64,0.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);padding:6px 10px;z-index:1;max-width:calc(100% - 32px);}

/* --------------------------------------------------- hairline grid / list */
.rule-grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);}
.rule-grid>*{background:var(--cell);}
.sec--dark .rule-grid,.sec--deep .rule-grid{background:var(--line-d);border-color:var(--line-d);}
.cell{padding:clamp(26px,2.8vw,42px);}
.cell--sm{padding:24px 22px 28px;}
.rule-list{display:flex;flex-direction:column;gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.rule-list>*{background:var(--cell);display:flex;gap:20px;align-items:baseline;padding:20px 0;}
.sec--dark .rule-list,.sec--deep .rule-list{background:var(--line-d);border-color:var(--line-d);}
.rule-list .idx{font-family:var(--mono);font-size:11.5px;letter-spacing:0.12em;color:var(--brass);min-width:32px;flex:none;}
.sec--dark .rule-list .idx,.sec--deep .rule-list .idx{color:var(--brass-l);}
.rule-list .txt{font-size:clamp(16.5px,1.4vw,20px);line-height:1.45;color:var(--ink);}
.sec--dark .rule-list .txt,.sec--deep .rule-list .txt{color:var(--bone);}

.panel{background:rgba(244,243,239,0.05);border:1px solid var(--line-d);padding:clamp(28px,3vw,44px);}
.panel--light{background:transparent;border-color:var(--line);}
.top-rule{border-top:1px solid var(--ink);padding-top:24px;}
.sec--dark .top-rule,.sec--deep .top-rule{border-top-color:rgba(244,243,239,0.35);}

.bullets{margin:0;padding:0;list-style:none;display:grid;gap:1px;background:var(--line-d);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);}
.bullets li{background:var(--cell);padding:15px 0;font-size:17px;color:var(--bone);display:flex;gap:16px;align-items:baseline;}
.bullets li::before{content:"";width:18px;height:1px;background:var(--brass-l);flex:none;transform:translateY(-5px);}

/* ------------------------------------------------------------------- nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:11px var(--pad-x);border-bottom:1px solid rgba(255,255,255,0);transition:background .5s ease,border-color .5s ease,backdrop-filter .5s ease;}
/* The wordmark's glyphs sit high in their own box, so centring the image
   leaves it reading a touch above the nav links. Nudged down to sit on the
   same optical line. */
.nav img{height:30px;width:auto;position:relative;top:3px;}
.menu-head img{position:static;}
.nav-right{display:flex;align-items:center;gap:0;}
.navlinks{display:flex;align-items:stretch;font-family:var(--mono);font-size:clamp(10px,0.78vw,11.5px);letter-spacing:0.06em;text-transform:uppercase;color:rgba(244,243,239,0.82);}
/* Each item is delimited two ways. A hairline on every item's left edge, the
   switcher's own line closing the row on the right - the same device the switcher
   already used, so the two long labels stop reading as one run of text. And a brass rule spans
   exactly the item's own width, drawn from the left on hover and held for the
   current page, which is what actually shows its extent. */
.navlinks a{position:relative;display:flex;align-items:center;padding:7px clamp(7px,0.75vw,13px);border-left:1px solid rgba(244,243,239,0.2);opacity:.82;white-space:nowrap;line-height:1.2;transition:opacity .3s ease,color .3s ease;}
.navlinks a:last-child{padding-right:clamp(12px,1.5vw,22px);}
.navlinks a::after{content:'';position:absolute;left:clamp(7px,0.75vw,13px);right:clamp(7px,0.75vw,13px);bottom:0;height:1px;background:var(--brass-l);opacity:0;transform:scaleX(.3);transform-origin:left center;transition:opacity .35s var(--ease),transform .45s var(--ease);}
.navlinks a:hover::after,.navlinks a.is-current::after{opacity:1;transform:scaleX(1);}
.navlinks a:hover{opacity:1;color:#fff;}
.navlinks a.is-current{opacity:1;color:var(--brass-l);}
.lang{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;letter-spacing:0.08em;padding-left:clamp(12px,1.5vw,22px);border-left:1px solid rgba(244,243,239,0.2);}
.lang button{background:none;border:none;cursor:pointer;padding:2px 1px;font-family:inherit;font-size:inherit;letter-spacing:inherit;}
.burger{display:none;background:none;border:none;cursor:pointer;padding:12px 0 12px 12px;flex-direction:column;gap:5px;align-items:flex-end;}
.burger span{width:22px;height:2px;background:var(--bone);display:block;}
.burger span:last-child{width:14px;}

.menu{position:fixed;inset:0;z-index:100;background:var(--teal-900);display:flex;flex-direction:column;padding:20px 24px 40px;overflow:auto;transform:translate3d(0,-103%,0);visibility:hidden;}
.menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6vh;}
.menu-head img{height:30px;width:auto;}
.menu-close{background:none;border:none;cursor:pointer;color:var(--bone);font-size:34px;line-height:1;padding:8px 12px;}
.menu-links{display:flex;flex-direction:column;}
.menu-links a{font-weight:600;font-size:clamp(24px,5.6vw,38px);color:var(--bone);padding:13px 0;letter-spacing:-0.018em;border-bottom:1px solid rgba(244,243,239,0.1);line-height:1.1;}

/* ----------------------------------------------------------------- heroes */
.hero{position:relative;min-height:82svh;display:flex;align-items:flex-end;background:var(--teal-900);overflow:hidden;}
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06) brightness(.8);animation:sqm-kenburns 34s ease-in-out infinite alternate;}
.hero-bg--frame img{filter:contrast(1.02) brightness(.86);}
.hero-tint{position:absolute;inset:0;z-index:1;background:var(--teal-700);mix-blend-mode:color;opacity:.55;}
.hero-scrim{position:absolute;inset:0;z-index:2;background:linear-gradient(to bottom,rgba(15,51,64,.5) 0%,rgba(15,51,64,.28) 40%,rgba(15,51,64,.8) 82%,rgba(15,51,64,.95) 100%);}
.hero-copy{position:relative;z-index:3;width:100%;max-width:1320px;margin:0 auto;padding:0 var(--pad-x) clamp(52px,7vh,96px);}
.hero-copy .eyebrow{margin-bottom:24px;}
.hero-copy .body{color:rgba(244,243,239,0.78);margin-top:clamp(24px,3vh,36px);}

.scroll-cue{margin-top:clamp(36px,5vh,64px);display:flex;align-items:center;gap:16px;color:rgba(244,243,239,0.7);font-family:var(--mono);font-size:12px;letter-spacing:0.2em;text-transform:uppercase;}
.scroll-cue::before{content:"";width:1px;height:46px;background:var(--brass);display:inline-block;animation:sqm-cue 2.8s ease-in-out infinite;}

@keyframes sqm-kenburns{0%{transform:scale(1.06) translate3d(0,0,0);}100%{transform:scale(1.16) translate3d(-1.5%,-2%,0);}}
@keyframes sqm-cue{0%{transform:scaleY(0);transform-origin:top;}40%{transform:scaleY(1);transform-origin:top;}60%{transform:scaleY(1);transform-origin:bottom;}100%{transform:scaleY(0);transform-origin:bottom;}}

/* ---------------------------------------------------------------- footer */
.footer{background:var(--teal-900);color:var(--bone);padding:clamp(48px,6vh,72px) var(--pad-x) 36px;}
.footer-grid{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px);}
/* The brand column holds only a wordmark, so it stretches the copyright down to
   the foot of the row rather than leaving the column half empty. */
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:28px;height:100%;}
/* Thin white hairline around the square footer logo tile. */
.footer-brand img{border:1px solid var(--bone);}
.footer-copy{font-family:var(--mono);font-size:12px;letter-spacing:0.06em;color:rgba(244,243,239,0.5);}
.footer h5{margin:0 0 18px;font-family:var(--mono);font-size:12px;letter-spacing:0.14em;color:var(--brass-l);text-transform:uppercase;font-weight:400;}
.footer p{margin:0;font-size:15.5px;line-height:1.7;color:rgba(244,243,239,0.72);}
.footer a{color:rgba(244,243,239,0.82);}
.footer-nav{display:flex;flex-direction:column;gap:9px;font-size:15.5px;}
.footer-nav a:hover{color:#fff;}
.link-inline{border-bottom:1px solid var(--brass);padding-bottom:1px;transition:color .3s ease;}
.link-inline:hover{color:var(--brass);}
/* The two persondatapolitik links open PDFs in a new tab; say so rather than
   letting the download surprise anyone. */
.doctype{margin-left:8px;font-family:var(--mono);font-size:9.5px;letter-spacing:0.12em;color:rgba(244,243,239,0.45);vertical-align:1px;}

/* ------------------------------------------------------------ CTA banner */
.cta{background:var(--teal-700);color:var(--bone);padding:clamp(70px,11vh,130px) var(--pad-x);--cell:var(--teal-700);}
.cta .h2{color:var(--bone);}

/* --------------------------------------------------------------- reveals */
/* The reveal moves; it does not fade. There is deliberately no opacity here:
   an element that is never transparent cannot be mistaken for one that is
   still loading, which is exactly how the old fade read. It also means that
   if motion.js never runs, content is visible — offset by 30px, but there.
   The old rule started elements at opacity 0 and left them invisible. */
.rv{transform:translateY(30px);transition:transform 1s var(--ease);}

/* ----------------------------------------------------------- placeholders */
.ph{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:0.14em;text-transform:uppercase;color:var(--brass);border:1px solid var(--brass);padding:5px 9px;line-height:1;}
.sec--dark .ph,.sec--deep .ph{color:var(--brass-l);border-color:rgba(199,178,145,0.6);}

/* Partnerships is reachable from the nav on every page now, so a cross-page jump
   to #partnerships lands far more often than it used to. Without this the target
   sits underneath the fixed nav. Covers the project anchors on Projekter too. */
section[id],article[id]{scroll-margin-top:40px;}

/* Stretch so the hairline dividers run the full height of the bar. Only above
   the burger breakpoint: below it .navlinks is hidden and .nav-right holds the
   burger, which is taller than the switcher and must stay centred against it. */
@media (min-width:1151px){
  .nav-right{align-items:stretch;}
}

/* Four footer columns do not survive a narrow desktop; pair them before the
   860px rule collapses everything to one. */
@media (max-width:1080px){
  .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* Five project cards only hold up on a wide desktop. */
@media (max-width:1150px){
  .cols--5{grid-template-columns:repeat(3,minmax(0,1fr));}
}

/* ----------------------------------------------------------- breakpoints */
@media (max-width:1150px){
  .navlinks{display:none;}
  .burger{display:flex;}
}
/* cols--flip puts the image column first in the DOM so it sits left on desktop.
   Once the split stacks, that would place the image above the section heading —
   02 and 04 both lead with their text — so below the breakpoint the text is
   ordered back to the top. */
@media (max-width:860px){
  .cols--flip > :first-child{order:2;}
  .cols--flip > :last-child{order:1;}
}

@media (max-width:860px){
  .cols--2,.cols--3,.cols--4,.cols--aside,.cols--split,.cols--wide-left{grid-template-columns:1fr;}
  .cols--wide-left{align-items:start;}
  .cols--4.keep-2,.cols--3.keep-2,.cols--5.keep-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .footer-grid{grid-template-columns:1fr;gap:30px;}
  .hero{min-height:76svh;}
  .rule-grid.keep-2{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lead{font-size:21px;}
  .body,.small{font-size:17px;line-height:1.62;}
}
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;}
  html{scroll-behavior:auto;}
}