/* OFFERING PAGES — one door, opened.
   The home page keeps the seam; behind each door the page speaks plainly.
   Same grid, same rules, same three type sizes. Nothing new is invented here. */

/* The nav is no longer floating over a photograph, so it takes a surface. */
.nav.solid{position:relative;background:var(--quiet);border-bottom:1px solid var(--rule)}
.nav.solid a,.nav.solid .nav-center{color:var(--ink);text-shadow:none}
.nav.solid .wordmark{width:9.0556em;background:none;padding:0;margin-left:0}
.nav.solid .wordmark img,.site-foot .wordmark img{filter:invert(1)}

/* DOOR HEAD — the plain statement of what this door is. */
.door-head{padding:clamp(64px,8vw,120px) var(--pad) clamp(48px,6vw,86px);display:grid;grid-template-columns:repeat(12,1fr);gap:0 20px;border-bottom:1px solid var(--rule)}
.door-head .eyebrow{grid-column:1/5;color:var(--ink-soft)}
.door-back{grid-column:9/13;justify-self:end;font:10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.door-back a{border-bottom:1px solid var(--rule);padding-bottom:3px}
.door-back a:hover{border-color:var(--ink);color:var(--ink)}
.door-title{grid-column:1/11;margin-top:38px;font-size:clamp(42px,6.6vw,108px);line-height:.93;letter-spacing:-.065em;font-weight:500}
.door-title em{font-family:var(--serif);font-weight:400;font-style:italic}
.door-lead{grid-column:1/7;margin-top:44px;font-size:clamp(16px,1.4vw,21px);line-height:1.55;color:var(--ink-soft)}
.door-ctas{grid-column:8/13;align-self:end;margin-top:44px;display:flex;flex-wrap:wrap;gap:14px 32px}
.door-ctas a{font-size:clamp(14px,1.2vw,18px);border-bottom:1px solid var(--world);padding-bottom:6px}
.door-ctas a:hover{border-color:var(--ink)}
.door-ctas a.quiet{border-color:var(--rule);color:var(--ink-soft)}
.door-ctas a.quiet:hover{border-color:var(--ink);color:var(--ink)}

/* PLATE — a photograph given the width of the page, and a caption that credits it. */
.plate{border-bottom:1px solid var(--rule);background:var(--ink)}
.plate-frame{position:relative;aspect-ratio:21/9;overflow:hidden;background:#1b252b}
.plate-frame img{height:100%;object-fit:cover;filter:saturate(.78) contrast(1.06)}
.plate figcaption{display:grid;grid-template-columns:1fr 3fr 1fr;gap:8px 20px;padding:16px var(--pad) 20px;background:var(--quiet-2);border-top:1px solid var(--rule)}
.plate-text{grid-column:2;font-size:13px;line-height:1.6;color:var(--ink-soft);max-width:78ch}
.plate-text b{color:var(--ink);font-weight:500}
.plate-credit{grid-column:3;justify-self:end;text-align:right;font:9px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}

/* MARKER — what the door used to say when it opened on the home page: one line
   of intent, and the four numbers that back it. */
.marker{padding:clamp(52px,6vw,86px) var(--pad);display:grid;grid-template-columns:repeat(12,1fr);gap:34px 20px;border-bottom:1px solid var(--rule)}
.marker-lead{grid-column:1/6;font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(19px,1.9vw,28px);line-height:1.35}
.marker-proof{grid-column:7/13;display:grid;grid-template-columns:repeat(2,1fr);gap:22px 20px;align-self:center}
.marker-proof strong{display:block;font:500 clamp(21px,2.3vw,34px)/1 var(--sans);letter-spacing:-.05em}
.marker-proof span{display:block;margin-top:6px;font:9px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-soft)}

/* Section heads follow the house pattern: label · headline · one paragraph. */
.sec{padding:clamp(90px,12vw,180px) var(--pad);border-bottom:1px solid var(--rule)}
.sec-head{display:grid;grid-template-columns:1fr 2fr 1fr;gap:24px 20px;align-items:end;padding-bottom:24px;border-bottom:1px solid var(--rule);margin-bottom:clamp(52px,6vw,88px)}
.sec-head .eyebrow{grid-column:1;color:var(--ink-soft);padding-bottom:6px}
.sec-head h2{grid-column:2;font-size:clamp(34px,4.8vw,72px);line-height:.96;letter-spacing:-.06em;font-weight:500}
.sec-head h2 em{font-family:var(--serif);font-weight:400;font-style:italic}
.sec-head p{grid-column:3;font-size:13px;line-height:1.6;color:var(--ink-soft);max-width:34ch}

/* FORMATS — four cells, same borders as the capability grid. */
.sec.formats{background:var(--quiet-2)}
.formats-grid{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);border-left:1px solid var(--rule)}
.format{min-height:270px;padding:20px 24px 26px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);display:flex;flex-direction:column}
.format .eyebrow{color:var(--ink-soft)}
.format h3{margin:auto 0 14px;font-size:clamp(26px,3.1vw,44px);font-weight:500;letter-spacing:-.05em;line-height:.98}
.format h3 em{font-family:var(--serif);font-weight:400;font-style:italic}
.format p{font-size:13px;line-height:1.6;color:var(--ink-soft);max-width:42ch}
.format-meta{max-width:none;margin-top:18px;padding-top:12px;border-top:1px solid var(--rule);font:9px/1.6 var(--mono)!important;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft)}

/* WORK — the receipts. Dark, like the home page's cases: photographs read as breaches. */
.sec.work{background:var(--ink);color:#fff;border-bottom:0}
.sec.work .sec-head{border-color:rgba(255,255,255,.26)}
.sec.work .sec-head .eyebrow,.sec.work .sec-head p{color:rgba(255,255,255,.6)}
.work-list{list-style:none;border-top:1px solid rgba(255,255,255,.26)}
/* Deep links from the landing page land on a row, not flush against the top edge. */
.work-row[id]{scroll-margin-top:96px}
.work-row{display:grid;grid-template-columns:repeat(12,1fr);gap:24px 20px;padding:clamp(34px,4vw,58px) 0;border-bottom:1px solid rgba(255,255,255,.18);align-items:start}
.wr-meta{grid-column:1/4}
.wr-meta .eyebrow{color:rgba(255,255,255,.5);margin-bottom:14px}
/* Swedish titles carry å/ä/ö — the ring needs room when a title wraps. */
.wr-meta h3{font-size:clamp(25px,2.7vw,40px);font-weight:500;line-height:1.02;letter-spacing:-.055em}
.wr-meta h3 em{font-family:var(--serif);font-weight:400;font-style:italic}
/* Photographs keep their own proportions — one of them is a triptych, and a
   4:3 crop would throw two thirds of it away. The rules carry the rhythm instead. */
/* Third-party coverage, set apart from the studio's own account of the work. */
/* CREDITS — a run-in line, the way a programme prints them. The body column
   is four of twelve, so a stacked grid of name-over-role grew taller than the
   prose it belonged to; this spans the row instead and stays two or three
   lines whether it carries two names or seventeen. */
.wr-credits{grid-column:4/13;margin-top:2px;padding-top:13px;
  border-top:1px solid rgba(255,255,255,.14);
  font:10.5px/1.85 var(--mono);letter-spacing:.02em;color:rgba(255,255,255,.44)}
.wr-credits + .wr-credits{margin-top:-14px;padding-top:0;border-top:0}
.wr-credits-h{color:rgba(255,255,255,.38);letter-spacing:.11em;text-transform:uppercase;margin-right:12px}
.wr-credits b{color:rgba(255,255,255,.86);font-weight:400}
.wr-credits .sep{color:rgba(255,255,255,.26);padding:0 3px}

.wr-body .wr-press{margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,.18);
  font:11px/1.65 var(--mono);letter-spacing:.03em;color:rgba(255,255,255,.6)}
.wr-body .wr-press b{color:rgba(255,255,255,.9);font-weight:400}
.wr-body .wr-press em{font-family:var(--serif);font-style:italic;color:rgba(255,255,255,.8)}

.wr-photo{grid-column:4/9;position:relative;overflow:hidden;background:#1b252b;align-self:start}
.wr-photo img{filter:saturate(.72) contrast(1.04);transition:scale 1.1s cubic-bezier(.2,.75,.2,1),filter .5s ease}
.work-row:hover .wr-photo img{scale:1.03;filter:saturate(1) contrast(1)}
.wr-photo::after{content:"";position:absolute;inset:0;border:1px solid rgba(255,255,255,.16);pointer-events:none}
.wr-body{grid-column:9/13}
.work-row.no-photo .wr-body{grid-column:4/13;display:grid;grid-template-columns:2fr 1fr;gap:20px;align-items:start}
.wr-body p{font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.74);max-width:46ch}
.wr-body p em{font-family:var(--serif);font-style:italic}
.wr-body p strong{color:#fff;font-weight:500}
.wr-body .proof{grid-template-columns:1fr;margin-top:22px}
.work-row.no-photo .wr-body .proof{margin-top:0;border-top:0;padding-top:0}

/* BUYERS — prose against a panel of titles, the way the doors list formats. */
.buyers{display:grid;grid-template-columns:repeat(12,1fr);gap:40px 20px}
.buyers-prose{grid-column:1/7;display:flex;flex-direction:column;gap:22px}
.buyers-prose p{font-size:15px;line-height:1.65;color:var(--ink-soft);max-width:52ch}
.buyers-prose strong{color:var(--ink);font-weight:500}
.buyers-titles{grid-column:8/13;align-self:start;border-left:2px solid var(--world);padding:4px 0 4px 24px}
.buyers-titles .bt-k{font:9px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--world);margin-bottom:16px}
.buyers-titles ul{list-style:none}
.buyers-titles li{padding:11px 0;border-top:1px solid var(--rule);font-size:14px;letter-spacing:-.02em}
.buyers-titles li:first-child{border-top:0;padding-top:0}
.buyers-titles li span{display:block;font:9px/1.7 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft)}

/* STEPS — the engagement, in four. The last one is the threshold, and takes the accent. */
.steps-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink)}
.step{min-height:290px;padding:20px 20px 26px 0;border-right:1px solid var(--rule);display:flex;flex-direction:column}
.step+.step{padding-left:20px}
.step:last-child{border-right:0}
.step .eyebrow{color:var(--ink-soft)}
.step h3{margin:auto 0 16px;font-size:clamp(24px,2.8vw,40px);font-weight:500;letter-spacing:-.055em;line-height:.96}
.step p{font-size:13px;line-height:1.6;color:var(--ink-soft);max-width:34ch}
.step.threshold{background:var(--world);color:#fff;margin-top:-32px;padding:52px 20px 26px}
.step.threshold p,.step.threshold .eyebrow{color:rgba(255,255,255,.94)}

/* CTA — the same blue as the home page's last word, at a shorter measure. */
.cta-band{background:var(--world);color:#fff;padding:clamp(90px,11vw,160px) var(--pad);display:grid;grid-template-columns:repeat(12,1fr);gap:0 20px}
.cta-band .eyebrow{grid-column:1/5}
.cta-band h2{grid-column:1/10;margin-top:30px;font-size:clamp(44px,7.2vw,116px);line-height:.9;letter-spacing:-.07em;font-weight:500}
.cta-band h2 em{font-family:var(--serif);font-weight:400;font-style:italic}
.cta-band p{grid-column:1/7;margin-top:36px;font-size:clamp(15px,1.3vw,19px);line-height:1.55;color:rgba(255,255,255,.86)}
.cta-band a.cta-mail{grid-column:8/13;align-self:end;margin-top:36px;justify-self:start;font-size:clamp(16px,1.6vw,24px);border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:8px}
.cta-band a.cta-mail:hover{border-color:#fff}

/* THE OTHER DOORS — the house has three; never let a page be a dead end. */
.otherdoors{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--rule);background:var(--quiet-2)}
.otherdoors a{position:relative;padding:34px var(--pad) 40px;border-right:1px solid var(--rule);overflow:hidden;transition:color .35s ease}
.otherdoors a:last-child{border-right:0}
.otherdoors a::before{content:"";position:absolute;inset:0;translate:0 101%;background:var(--ink);transition:translate .5s cubic-bezier(.2,.8,.2,1);z-index:0}
.otherdoors a:hover,.otherdoors a:focus-visible{color:#fff}
.otherdoors a:hover::before,.otherdoors a:focus-visible::before{translate:0}
.otherdoors a>*{position:relative;z-index:1}
.otherdoors .od-no{display:block;font:11px var(--mono);letter-spacing:.08em;margin-bottom:16px}
.otherdoors .od-name{display:block;font-size:clamp(27px,3.4vw,50px);font-weight:500;letter-spacing:-.055em;line-height:.94}
.otherdoors .od-name em{font-family:var(--serif);font-weight:400;font-style:italic}

.site-foot{padding:34px var(--pad) 40px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:end}
.site-foot .wordmark{width:9.0556em;background:none;padding:0;margin:0;grid-column:1}
.site-foot nav{grid-column:2/4;display:flex;flex-wrap:wrap;gap:8px 24px;font:10px var(--mono);text-transform:uppercase;letter-spacing:.08em}
.site-foot nav a{border-bottom:1px solid var(--rule);padding-bottom:3px}
.site-foot nav a:hover{border-color:var(--ink)}
.site-foot p{grid-column:4;text-align:right;font:10px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.07em;color:var(--ink-soft)}

/* TEAM — a wall of faces. The card is vertical so the row can hold four:
   portrait, name, role, short bio, stacked in one column. */
.team{padding:clamp(52px,6vw,86px) var(--pad) clamp(64px,7vw,104px)}
.team-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(34px,3.4vw,54px) clamp(20px,2.2vw,34px);align-items:start}
.tm{display:flex;flex-direction:column}
.tm-portrait{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--quiet-2);border:1px solid var(--rule)}
.tm-portrait img{position:absolute;inset:0;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.03)}
.tm-monogram{position:absolute;inset:0;display:grid;place-items:center;font:400 clamp(20px,1.8vw,30px)/1 var(--mono);letter-spacing:.06em;color:var(--ink-soft);opacity:.5}
.tm-body{padding-top:18px}
.tm-body .eyebrow{color:var(--ink-soft)}
.tm-body h2{margin-top:11px;font-size:clamp(19px,1.55vw,25px);line-height:1.06;letter-spacing:-.04em;font-weight:500}
.tm-role{margin-top:12px;font:600 clamp(18px,1.6vw,22px)/1.3 var(--sans);text-transform:none;letter-spacing:-.02em;color:var(--ink)}
.tm-bio{margin-top:14px;font-size:13.5px;line-height:1.6;color:var(--ink-soft)}
.tm-bio em{font-style:italic}
.tm .cred-lines{margin-top:18px}

/* An open seat states that it is one. */
.tm.is-placeholder .tm-portrait{background:transparent;border-style:dashed}
.tm.is-placeholder .tm-monogram{opacity:.32}
.tm.is-placeholder h2{color:var(--ink-soft)}
.tm.is-placeholder .tm-role{color:var(--ink)}

/* Four across only while the columns stay wide enough to read in. */
@media(max-width:1180px){
  .team-grid{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:820px){
  .door-head{grid-template-columns:1fr 1fr}
  .door-head .eyebrow{grid-column:1/3}
  .door-back{grid-column:1/3;justify-self:start;margin-top:10px}
  .door-title{grid-column:1/3;margin-top:26px}
  .door-lead,.door-ctas{grid-column:1/3;margin-top:30px}
  .plate-frame{aspect-ratio:16/10}
  .plate figcaption{grid-template-columns:1fr}
  .plate-text,.plate-credit{grid-column:1}
  .plate-credit{justify-self:start;text-align:left}
  .marker{grid-template-columns:1fr;gap:28px}
  .marker-lead,.marker-proof{grid-column:1}
  .sec-head{grid-template-columns:1fr}
  .sec-head .eyebrow,.sec-head h2,.sec-head p{grid-column:1}
  .formats-grid{grid-template-columns:1fr}
  .format{min-height:auto}
  .work-row{grid-template-columns:1fr;gap:20px}
  .wr-meta,.wr-photo,.wr-body,.work-row.no-photo .wr-body,.wr-credits{grid-column:1}
  .work-row.no-photo .wr-body{grid-template-columns:1fr}
  .buyers{grid-template-columns:1fr}
  .buyers-prose,.buyers-titles{grid-column:1}
  .steps-grid{grid-template-columns:1fr}
  .step{min-height:auto;border-right:0;border-bottom:1px solid var(--rule);padding:22px 0 26px}
  .step+.step{padding-left:0}
  .step.threshold{margin:0 calc(var(--pad)*-1);padding:34px var(--pad)}
  .cta-band{grid-template-columns:1fr}
  .cta-band .eyebrow,.cta-band h2,.cta-band p,.cta-band a.cta-mail{grid-column:1}
  .otherdoors{grid-template-columns:1fr}
  .otherdoors a{border-right:0;border-bottom:1px solid var(--rule)}
  .otherdoors a:last-child{border-bottom:0}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .site-foot{grid-template-columns:1fr;gap:22px}
  .site-foot .wordmark,.site-foot nav,.site-foot p{grid-column:1;text-align:left}
}
/* One across on a phone, with the portrait reined in so it does not
   become a full-bleed slab above three lines of text. */
@media(max-width:520px){
  .team-grid{grid-template-columns:1fr;gap:34px}
  .tm-portrait{width:min(66%,240px)}
}

/* Type floor on phones — nothing smaller than 10px. */
@media(max-width:520px){
  .plate-credit,.marker-proof span,.format-meta,.buyers-titles .bt-k,.buyers-titles li span{font-size:10px!important}
}

@media(prefers-reduced-motion:reduce){
  .wr-photo img,.otherdoors a::before{transition:none}
}

/* The identity lives in the margin of the team introduction. */
.team-intro .door-lead{grid-row:3}
.team-intro .door-ctas{grid-row:4;grid-column:1/7;margin-top:26px}
.brand-card{grid-row:3;grid-column:9/13;align-self:start;margin-top:44px;background:var(--white);color:var(--ink);border:1px solid var(--rule);padding:28px;display:block;transition:background .2s}
.brand-card img{margin-bottom:32px;filter:invert(1)}
.brand-card h2{font-size:26px;letter-spacing:-.04em;font-weight:500}
.brand-card p{font-size:14px;line-height:1.6;margin-top:12px}
.brand-card span{display:inline-block;font-size:13px;margin-top:25px;border-bottom:1px solid var(--rule);padding-bottom:4px}
.brand-card:hover{background:var(--quiet-2)}
.brand-card:focus-visible{outline:3px solid var(--ink);outline-offset:5px}
@media(max-width:820px){.team-intro .door-lead,.team-intro .door-ctas,.brand-card{grid-column:1/-1;grid-row:auto}.brand-card{max-width:400px;margin-top:32px}}