/*
Theme Name: MASS 2.0
Theme URI: https://masshq.co.uk/
Author: MASS Associates
Description: Custom MASS 2.0 editable WordPress theme with protected premium layout, live content controls, Archive and Case Study project management.
Version: 25.1
Text Domain: mass-2-0
*/


:root{
  --teal:#009189;
  --blue:#162340;
  --black:#231f20;
  --white:#fff;
  --soft:#f1f3f2;
  --line:#cfd6d5;
  --pad:clamp(28px,4vw,72px);
  --content:1440px;

  /* Based on the supplied MASS typography hierarchy */
  /* MASS TYPOGRAPHY SYSTEM — translated directly from supplied print rules */
  --mass-h1:clamp(54px,4.15vw,80px);      /* Extra Light */
  --mass-h2:clamp(38px,3.05vw,58px);      /* Light */
  --mass-h3:clamp(22px,1.35vw,28px);      /* Light */
  --mass-sub:clamp(18px,1.05vw,21px);     /* Roman */
  --mass-body:clamp(15px,.86vw,17px);     /* Light */
  --mass-small:clamp(12px,.66vw,13px);    /* Roman */

  /* Backward aliases */
  --h1:var(--mass-h1);
  --h2:var(--mass-h2);
  --h3:var(--mass-h3);
  --sub:var(--mass-sub);
  --body:var(--mass-body);
  --small:var(--mass-small);
  --strip-h:min(47px, 2.4479167vw);

  /* One shared content system across the site */
  --icon:52px;
  --icon-col:60px;
  --grid-gap:14px;
  --section-y:clamp(92px,7vw,132px);
  --title-gap:clamp(42px,4vw,66px);
  --icon-title-gap:16px;

  /* MASS spacing rhythm */
  --space-eyebrow-heading:22px;
  --space-heading-copy:20px;
  --space-copy-content:40px;
  --space-section:clamp(76px,5.5vw,104px);

  /* Shared motion language */
  --flow-ease:cubic-bezier(.65,0,.35,1);
  --soft-ease:cubic-bezier(.22,.61,.36,1);
  --tile-flow:820ms;
  --hover-flow:260ms;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--black);background:#fff;overflow-x:hidden;
  font-family:"Neue Haas Grotesk Display Pro","Helvetica Neue",Arial,sans-serif;
  font-weight:300
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{line-height:1.35}
.eyebrow{
  font-size:var(--mass-sub);
  font-weight:400;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--teal);
  line-height:1
}
.eyebrow.light{color:#72cbc6}

/* -------------------------------------------------------------
   GLOBAL HEADER STRIP
------------------------------------------------------------- */
.mass-strip{
  position:fixed;left:0;right:0;top:0;z-index:200;height:var(--strip-h);
  background:var(--blue);overflow:hidden
}
.mass-strip-art{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:auto;
  height:100%;
  max-width:none;
  object-fit:contain
}
.mass-strip nav{
  position:absolute;
  left:48%;
  right:18.5%;
  top:0;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(12px,1.2vw,24px);
  color:#fff;
  font-size:clamp(8px,.55vw,11px);
  letter-spacing:.08em;
  white-space:nowrap
}
.mass-strip nav a{opacity:.9}.mass-strip nav a:hover{opacity:1;color:var(--teal)}
.mass-strip nav .talk{color:var(--teal);opacity:1}

/* -------------------------------------------------------------
   SIGNED-OFF HERO — FULL WIDTH, NO OUTER FRAME
------------------------------------------------------------- */
.hero-section{width:100%;background:#fff;overflow:hidden}
.hero-stage{
  position:relative;
  width:100vw;
  aspect-ratio:1920/930;
  overflow:hidden;
  background:#fff;
  user-select:none;
  touch-action:pan-y
}
.hero-slide{position:absolute;inset:0;visibility:hidden;overflow:hidden}
.hero-slide.active{visibility:visible;z-index:2}
.hero-slide.previous{visibility:visible;z-index:1}
.hero-art{
  position:absolute;
  left:0;top:0;
  width:100%;
  height:116.129032%;
  object-fit:fill;
  will-change:transform
}
.hero-type{
  position:absolute;
  left:0;top:0;
  width:100%;
  height:116.129032%;
  z-index:5;
  pointer-events:none
}
.hero-line{
 position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);
 object-fit:contain;object-position:left top;opacity:0;will-change:transform,opacity
}
.hero-line.left{transform:translate3d(-38px,0,0)}
.hero-line.right{transform:translate3d(38px,0,0)}
.hero-line.top{transform:translate3d(0,-28px,0)}
.hero-slide.active .hero-line{animation:heroLineIn .78s cubic-bezier(.16,1,.3,1) var(--delay) both}
@keyframes heroLineIn{to{opacity:1;transform:translate3d(0,0,0)}}
.hero-slide.from-left.active .hero-art{animation:heroFromLeft .90s cubic-bezier(.16,1,.3,1) both}
.hero-slide.from-right.active .hero-art{animation:heroFromRight .90s cubic-bezier(.16,1,.3,1) both}
.hero-slide.from-bottom.active .hero-art{animation:heroFromBottom .90s cubic-bezier(.16,1,.3,1) both}
@keyframes heroFromLeft{from{opacity:.15;transform:translate3d(-42px,0,0) scale(1.012)}to{opacity:1;transform:none}}
@keyframes heroFromRight{from{opacity:.15;transform:translate3d(42px,0,0) scale(1.012)}to{opacity:1;transform:none}}
@keyframes heroFromBottom{from{opacity:.15;transform:translate3d(0,36px,0) scale(1.012)}to{opacity:1;transform:none}}
.hero-edge{position:absolute;top:0;bottom:0;width:12%;border:0;background:transparent;z-index:30;cursor:pointer}
.hero-edge.prev{left:0}.hero-edge.next{right:0}

/* -------------------------------------------------------------
   ABOUT
------------------------------------------------------------- */
.about{
  padding:var(--space-section) var(--pad) clamp(54px,4vw,76px);
  background:#fff
}
.about-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);gap:clamp(34px,3.5vw,56px);margin-top:var(--space-eyebrow-heading);align-items:end}
.about h1{
  font-size:var(--mass-h1);
  line-height:.93;
  letter-spacing:-.025em;
  font-weight:200;
  color:var(--blue);
  margin:0
}
.about-copy h2{
  font-size:var(--mass-h2);
  line-height:.95;
  letter-spacing:-.015em;
  font-weight:300;
  color:var(--teal);
  margin:0 0 var(--space-heading-copy)
}
.about-copy p{
  font-size:var(--mass-body);
  line-height:1.3;
  max-width:640px;
  margin:0;
  font-weight:300
}
.about-principles{
  margin-top:var(--space-copy-content);
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr))
}
.about-principles article{
  padding:18px 14px 8px 0;
  min-height:132px
}
.about-principles img{width:var(--icon);height:var(--icon);object-fit:contain}
.about-principles h3{
  font-size:var(--mass-sub);
  line-height:1.05;
  font-weight:400;
  color:var(--blue);
  margin:12px 0 3px
}
.about-principles p{
  font-size:var(--mass-sub);
  line-height:1.05;
  font-weight:400;
  color:#4a4f51;
  margin:0
}

/* -------------------------------------------------------------
   SECTION HEADS
------------------------------------------------------------- */
.section-heading{
  margin:var(--space-eyebrow-heading) 0 var(--space-copy-content);
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
  gap:clamp(30px,3.5vw,54px);
  align-items:end
}
.section-heading h2{
  font-size:var(--mass-h1);
  line-height:.92;
  letter-spacing:-.025em;
  font-weight:200;
  margin:0
}
.section-heading p{
  font-size:var(--mass-sub);
  line-height:1.2;
  max-width:620px;
  margin:0;
  font-weight:400
}
.light-heading h2{color:var(--blue)}
.light-heading p{color:#4b5456}

/* -------------------------------------------------------------
   WHAT WE DO
------------------------------------------------------------- */
.services{padding:var(--space-section) var(--pad);background:var(--blue);color:#fff}
.services .section-heading{
  /* Use the exact same columns as the service rows below. */
  grid-template-columns:var(--icon-col) minmax(250px,340px) minmax(0,1fr) 28px;
  column-gap:10px;
  align-items:end;
}
.services .section-heading h2{
  color:#fff;
  grid-column:2;
}
.services .section-heading p{
  color:#c8d4d6;
  grid-column:3;
  max-width:none;
}
.service-list{border-top:1px solid rgba(255,255,255,.25)}
.service-list details{border-bottom:1px solid rgba(255,255,255,.25)}
.service-list summary{
  min-height:94px;display:grid;
  grid-template-columns:var(--icon-col) minmax(250px,340px) minmax(0,1fr) 28px;
  align-items:center;column-gap:10px;cursor:pointer;list-style:none
}
.service-list summary::-webkit-details-marker{display:none}
.service-list summary>img{width:var(--icon);height:var(--icon);object-fit:contain}
.service-list h3{
  font-size:var(--mass-h3);
  line-height:1;
  font-weight:300;
  margin:0
}
.service-list em{
  font-style:normal;
  font-size:var(--mass-sub);
  line-height:1.05;
  color:#bed0d3;
  font-weight:400;
  padding-left:0
}
.service-list b{font-size:30px;color:var(--teal);font-weight:200}
.service-detail{
  margin-left:calc(var(--icon-col) + 10px);
  padding:4px 0 28px;
  display:grid;
  grid-template-columns:repeat(2,minmax(220px,1fr));
  gap:clamp(28px,4vw,64px);
  max-width:860px;
  color:#d7e0e1
}
.service-detail strong{
  display:block;
  margin-bottom:8px;
  color:var(--teal);
  font-size:var(--mass-small);
  font-weight:400;
  letter-spacing:.08em
}
.service-detail p{
  margin:0;
  font-size:var(--mass-body);
  line-height:1.42;
  font-weight:300
}

/* -------------------------------------------------------------
   SELECTED WORK V10 — BROCHURE-LED EDITORIAL STORIES
------------------------------------------------------------- */

.work-v10{
  padding:var(--space-section) max(var(--pad),calc((100vw - var(--content))/2));
  background:#fff;
  overflow:hidden
}
.work-v10-intro{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:end;
  gap:50px;
  margin-bottom:clamp(54px,5vw,80px)
}
.work-v10-intro p{
  max-width:560px;
  justify-self:end;
  margin:0;
  font-size:var(--mass-sub);
  line-height:1.22;
  font-weight:400
}
.work-story{position:relative}
.work-story + .work-story{margin-top:clamp(110px,10vw,170px)}
.work-story small{
  font-size:var(--mass-small);
  letter-spacing:.1em;
  font-weight:400
}
.work-story a{
  display:inline-block;
  margin-top:24px;
  padding-bottom:6px;
  border-bottom:1px solid var(--teal);
  font-size:var(--mass-small);
  letter-spacing:.08em
}

/* SEFTON */
.sefton-story{
  min-height:760px;
  background:#101a31;
  overflow:hidden
}
.sefton-photo{
  position:absolute;
  inset:0;
}
.sefton-photo img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center 57%;
  opacity:.92
}
.sefton-copy-panel{
  position:absolute;
  z-index:3;
  left:3%;
  top:5%;
  width:min(360px,30%);
  min-height:66%;
  background:#fff;
  padding:32px 30px;
  color:var(--blue)
}
.sefton-copy-panel small{color:var(--teal)}
.sefton-copy-panel h2{
  margin:18px 0 20px;
  font-size:clamp(44px,3.6vw,68px);
  line-height:.88;
  letter-spacing:-.03em;
  font-weight:200
}
.sefton-copy-panel h2 span{color:var(--teal)}
.sefton-copy-panel h3{
  margin:0 0 16px;
  font-size:var(--mass-h3);
  line-height:1.02;
  font-weight:300
}
.sefton-copy-panel p{
  font-size:var(--mass-body);
  line-height:1.33;
  margin:0 0 13px
}
.sefton-glance{
  position:absolute;
  z-index:4;
  top:6%;
  right:5%;
  width:min(430px,34%);
  background:var(--blue);
  color:#fff;
  padding:28px 28px 30px
}
.sefton-glance>h3{
  margin:0 0 25px;
  color:var(--teal);
  font-size:clamp(28px,2.2vw,42px);
  line-height:.92;
  font-weight:300
}
.glance-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.glance-grid img{
  width:42px;height:42px;
  margin-bottom:11px
}
.glance-grid b{
  display:block;
  color:var(--teal);
  font-size:12px;
  line-height:1.05;
  font-weight:400
}
.glance-grid span{
  display:block;
  margin-top:6px;
  font-size:10px;
  line-height:1.2;
  color:#d8e1e2
}
.sefton-detail{
  position:absolute;
  z-index:5;
  right:4%;
  bottom:-45px;
  width:210px;
  height:295px;
  margin:0;
  border:10px solid #fff
}
.sefton-detail img{
  width:100%;height:100%;
  object-fit:cover
}

/* NHS */
.nhs-story{background:#fff}
.nhs-hero{
  position:relative;
  height:clamp(500px,49vw,720px);
  overflow:hidden
}
.nhs-hero>img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center
}
.nhs-role{
  position:absolute;
  top:13%;
  right:12%;
  width:min(390px,31%);
  background:var(--blue);
  color:#fff;
  padding:30px
}
.nhs-role small{color:#87d5cf}
.nhs-role h2{
  margin:12px 0 16px;
  font-size:clamp(50px,4vw,78px);
  line-height:.83;
  font-weight:200;
  letter-spacing:-.03em
}
.nhs-role h3{
  margin:0 0 9px;
  color:var(--teal);
  font-size:var(--mass-h3);
  font-weight:300
}
.nhs-role p{
  margin:0;
  font-size:var(--mass-body);
  line-height:1.34;
  color:#d8e0e2
}
.nhs-lower{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  align-items:stretch
}
.nhs-title-panel{
  background:var(--blue);
  color:#fff;
  padding:34px 32px
}
.nhs-title-panel h2{
  margin:0;
  font-size:clamp(36px,3vw,58px);
  line-height:.88;
  font-weight:200;
  letter-spacing:-.025em
}
.nhs-title-panel>p{
  margin:16px 0 52px;
  color:#72cbc6;
  font-size:var(--mass-small);
  line-height:1.25;
  text-transform:uppercase;
  letter-spacing:.06em
}
.nhs-title-panel h3{
  font-size:var(--mass-h3);
  line-height:1.03;
  font-weight:300
}
.nhs-title-panel h3 span{color:var(--teal)}
.nhs-evidence{
  padding:34px 38px 32px;
  border-bottom:1px solid var(--line)
}
.nhs-challenge{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
  padding-bottom:26px;
  border-bottom:1px solid var(--line)
}
.nhs-challenge small{
  color:var(--teal);
  display:block;
  margin-bottom:8px
}
.nhs-challenge p{
  margin:0;
  font-size:var(--mass-body);
  line-height:1.35
}
.nhs-proof-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px 28px;
  padding-top:28px
}
.nhs-proof-grid div{
  display:grid;
  grid-template-columns:42px 1fr;
  grid-template-rows:auto auto;
  column-gap:12px
}
.nhs-proof-grid img{
  width:42px;height:42px;
  grid-row:1/3
}
.nhs-proof-grid b{
  color:var(--blue);
  font-size:12px;
  line-height:1.05;
  font-weight:400
}
.nhs-proof-grid span{
  margin-top:4px;
  color:#535b5d;
  font-size:10px;
  line-height:1.2
}

/* GLOBAL */
.global-story{background:#fff}
.global-grid{
  display:grid;
  grid-template-columns:1.02fr .78fr .92fr;
  grid-template-rows:430px auto;
  gap:0;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}
.global-grid>*{
  margin:0;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.global-grid figure{overflow:hidden}
.global-grid figure img{
  width:100%;height:100%;
  object-fit:cover
}
.global-product{grid-column:1;grid-row:1}
.global-intro{
  grid-column:2;grid-row:1;
  padding:30px 28px;
  background:#fff;
  color:var(--blue)
}
.global-intro small{color:var(--teal)}
.global-intro h2{
  margin:14px 0 8px;
  font-size:clamp(46px,3.45vw,66px);
  line-height:.84;
  letter-spacing:-.03em;
  font-weight:200
}
.global-intro h3{
  color:var(--teal);
  font-size:var(--mass-h3);
  font-weight:300;
  margin:0 0 22px
}
.global-intro dl{margin:0}
.global-intro dl div{margin-top:12px}
.global-intro dt{
  color:var(--teal);
  font-size:10px;
  letter-spacing:.08em
}
.global-intro dd{
  margin:4px 0 0;
  font-size:12px;
  line-height:1.28
}
.global-screen{grid-column:3;grid-row:1}
.global-markets{
  grid-column:3;
  grid-row:1/3;
  align-self:end;
  z-index:3;
  margin-left:32%;
  margin-bottom:0;
  min-height:430px;
  padding:28px;
  background:var(--blue);
  color:#fff;
  border:0
}
.global-markets h3{
  margin:0 0 24px;
  color:var(--teal);
  font-size:clamp(30px,2.35vw,45px);
  line-height:.9;
  font-weight:300
}
.global-markets p{
  margin:0 0 13px;
  font-size:11px;
  line-height:1.25;
  color:#d5dfe0
}
.global-markets b{
  display:block;
  color:#fff;
  font-weight:400
}
.global-event{
  grid-column:1;
  grid-row:2;
  height:420px
}
.global-main-copy{
  grid-column:2/4;
  grid-row:2;
  padding:36px 38px 34px;
  padding-right:36%;
  min-height:420px
}
.global-main-copy small{color:var(--teal)}
.global-main-copy h2{
  margin:14px 0 22px;
  font-size:clamp(52px,4.25vw,82px);
  line-height:.85;
  font-weight:200;
  letter-spacing:-.03em;
  color:var(--blue)
}
.global-main-copy h2 span{color:var(--teal)}
.global-main-copy>p{
  max-width:720px;
  margin:0;
  font-size:var(--mass-body);
  line-height:1.35
}
.global-capabilities{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px 24px;
  margin-top:28px
}
.global-capabilities div{
  display:grid;
  grid-template-columns:42px 1fr;
  grid-template-rows:auto auto;
  column-gap:11px
}
.global-capabilities img{
  width:42px;height:42px;
  grid-row:1/3
}
.global-capabilities b{
  font-size:11px;
  color:var(--teal);
  font-weight:400
}
.global-capabilities span{
  font-size:10px;
  line-height:1.18;
  color:#596061;
  margin-top:3px
}
.global-usa{
  position:absolute;
  right:4%;
  bottom:-36px;
  width:210px;
  height:210px;
  border:10px solid #fff
}
.global-story{position:relative}

/* Responsive */
@media(max-width:1050px){
  .sefton-copy-panel{width:38%;max-width:none}
  .sefton-glance{width:42%;max-width:none}
  .nhs-role{right:7%;width:38%}
  .nhs-proof-grid{grid-template-columns:1fr 1fr}
  .global-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto
  }
  .global-product{grid-column:1;grid-row:1;height:390px}
  .global-intro{grid-column:2;grid-row:1}
  .global-screen{grid-column:1;grid-row:2;height:320px}
  .global-event{grid-column:2;grid-row:2;height:320px}
  .global-main-copy{grid-column:1/3;grid-row:3;padding-right:38px}
  .global-markets{position:relative;grid-column:2;grid-row:2/4;margin:0;align-self:start;z-index:5}
}
@media(max-width:760px){
  .work-v10{padding-left:22px;padding-right:22px}
  .work-v10-intro{grid-template-columns:1fr;gap:18px}
  .work-v10-intro p{justify-self:start}
  .sefton-story{min-height:auto;background:#fff;display:flex;flex-direction:column}
  .sefton-photo{position:relative;height:420px;order:1}
  .sefton-copy-panel{position:relative;left:auto;top:auto;width:auto;order:2;padding:28px 0}
  .sefton-glance{position:relative;right:auto;top:auto;width:auto;order:3}
  .sefton-detail{display:none}
  .nhs-hero{height:460px}
  .nhs-role{left:20px;right:20px;bottom:20px;top:auto;width:auto}
  .nhs-lower{grid-template-columns:1fr}
  .nhs-proof-grid{grid-template-columns:1fr}
  .global-grid{display:block;border-left:0}
  .global-grid>*{border-left:1px solid var(--line)}
  .global-product,.global-screen,.global-event{height:330px}
  .global-markets{margin:0}
  .global-main-copy{padding:30px}
  .global-usa{display:none}
  .global-capabilities{grid-template-columns:1fr}
}

/* -------------------------------------------------------------
   HOW WE DO IT
------------------------------------------------------------- */
.process{padding:var(--space-section) var(--pad);background:var(--soft)}
.process .section-heading{
  /* Lock the heading copy to the five process columns below. */
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  align-items:end;
}
.process .section-heading h2{
  grid-column:1 / 3;
}
.process .section-heading p{
  grid-column:3 / 6;
  max-width:none;
  padding-left:16px;
}
.process-row{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr))
}
.process-row article{padding:18px 16px 16px 0;min-height:210px}
.process-row article+article{padding-left:16px}
.process-row img{width:var(--icon);height:var(--icon);object-fit:contain}
.process-row h3{
  font-size:var(--mass-h3);
  font-weight:300;
  color:var(--blue);
  margin:10px 0 4px
}
.process-row p{
  font-size:var(--mass-sub);
  line-height:1.05;
  font-weight:400;
  margin:0;
  color:#596061
}

/* -------------------------------------------------------------
   SIGNED-OFF ARCHIVE
------------------------------------------------------------- */
.archive-section{width:100%;background:var(--teal);overflow:hidden}
.archive-stage{position:relative;width:100vw;aspect-ratio:1920/1032;overflow:hidden;background:var(--teal)}
.archive-grid{
  position:absolute;inset:0;
  background:var(--teal);overflow:hidden
}
.archive-tile{
  position:absolute;left:0;top:0;width:25%;height:33.333333%;
  overflow:hidden;cursor:pointer;background:var(--teal);
  transform:translate3d(var(--archive-x,0),var(--archive-y,0),0);
  transition:transform var(--tile-flow) var(--flow-ease);
  will-change:transform;backface-visibility:hidden;transform-style:preserve-3d;
  contain:layout paint style
}
.archive-tile.fixed{cursor:default}
.archive-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;backface-visibility:hidden}
.archive-tile .base{z-index:1;opacity:1;transition:opacity var(--hover-flow) var(--soft-ease)}
.archive-tile .hover{z-index:2;opacity:0;transition:opacity var(--hover-flow) var(--soft-ease)}
.archive-tile .strip{z-index:3;opacity:0;transform:translate3d(0,8px,0);transition:opacity 280ms var(--soft-ease),transform 360ms var(--soft-ease)}
.archive-tile.hovering .base{opacity:0}
.archive-tile.hovering .hover{opacity:1}
.archive-tile.show-strip .hover{opacity:0}
.archive-tile.show-strip .strip{opacity:1;transform:translate3d(0,0,0)}
.archive-hint{position:absolute;left:16px;bottom:11px;z-index:60;color:rgba(255,255,255,.45);font-size:8px;letter-spacing:.13em;pointer-events:none}
.archive-fullscreen{
  position:fixed;inset:0;z-index:300;background:#000;visibility:hidden;opacity:0;
  transition:opacity 340ms var(--soft-ease),visibility 0s linear 340ms
}
.archive-fullscreen.open{visibility:visible;opacity:1;transition:opacity 340ms var(--soft-ease),visibility 0s}
.archive-fullscreen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.008);transition:opacity 320ms var(--soft-ease),transform 560ms var(--soft-ease);will-change:opacity,transform}
.archive-fullscreen.open .plain{opacity:1;transform:scale(1)}
.archive-fullscreen .with-strip{opacity:0}
.archive-fullscreen.open.show-strip .plain{opacity:0}
.archive-fullscreen.open.show-strip .with-strip{opacity:1;transform:scale(1)}
.archive-fullscreen button{
 position:absolute;right:22px;top:22px;z-index:4;width:42px;height:42px;
 border:1px solid rgba(255,255,255,.7);background:rgba(22,35,64,.65);
 color:#fff;font-size:23px;cursor:pointer
}

/* -------------------------------------------------------------
   WORKING WITH MASS
------------------------------------------------------------- */
.engagement{padding:var(--space-section) var(--pad);background:#fff}
.engagement-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.engagement-row article{padding:18px 16px 16px 0;min-height:240px}
.engagement-row article+article{padding-left:16px}
.engagement-row img{width:var(--icon);height:var(--icon);object-fit:contain}
.engagement-row h3{
  font-size:var(--mass-h3);
  line-height:1;
  font-weight:300;
  color:var(--blue);
  margin:10px 0 5px
}
.engagement-row span{font-size:10px;color:var(--teal);letter-spacing:.12em}
.engagement-row p{
  font-size:var(--mass-sub);
  line-height:1.1;
  font-weight:400;
  margin-top:12px
}

/* -------------------------------------------------------------
   CONTACT
------------------------------------------------------------- */
.contact{
  min-height:0;
  background:var(--blue);
  color:#fff;
  padding-top:24px;
  padding-bottom:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start
}
.contact>img{width:66px}
.contact h2{
  font-size:clamp(40px,3.25vw,62px);
  line-height:.9;
  font-weight:200;
  letter-spacing:-.025em;
  margin:14px 0 18px
}
.contact h2 span{color:var(--teal)}
.contact>a{
  font-size:var(--mass-h3);
  font-weight:300;
  border-bottom:1px solid var(--teal);
  width:max-content;
  padding-bottom:7px
}

/* -------------------------------------------------------------
   SCROLL-ACTIVE PROOF RAIL
------------------------------------------------------------- */
.scroll-proof{
  position:fixed;left:0;right:0;bottom:0;height:112px;z-index:250;
  background:var(--blue);border-top:1px solid rgba(255,255,255,.18);
  overflow:hidden;transform:translate3d(0,102%,0);transition:transform .34s var(--soft-ease);will-change:transform;
  pointer-events:none
}
.scroll-proof.visible{transform:translate3d(0,0,0)}
.scroll-proof-track{
  height:100%;display:flex;align-items:center;width:max-content;will-change:transform
}
.proof-item{
  width:330px;height:78px;padding:0 22px;display:grid;grid-template-columns:var(--icon-col) 1fr;gap:var(--grid-gap);
  align-items:center;border-right:1px solid rgba(255,255,255,.22);color:#fff
}
.proof-item img{width:var(--icon);height:var(--icon);object-fit:contain}
.proof-item b{display:block;color:var(--teal);font-size:15px;font-weight:400;letter-spacing:.05em}
.proof-item span{display:block;margin-top:5px;font-size:11px;line-height:1.2;color:#d4dddf}

/* ------------------------------------------------------------- */
@media(max-width:900px){
 .about-grid,.section-heading,.services .section-heading{grid-template-columns:1fr}
 .about-principles{grid-template-columns:1fr 1fr}
 .case,.case:nth-of-type(odd){grid-template-columns:1fr}
 .case-copy{order:2}.case-images{order:1}
 .process-row{grid-template-columns:1fr 1fr}
 .engagement-row{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
 .mass-strip-art{
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  width:auto;
  height:100%;
  max-width:none;
  object-fit:contain
}
 .mass-strip nav{display:none}
 .hero-stage,.archive-stage{width:100vw}
 .about,.services,.work,.process,.engagement{padding-top:80px;padding-bottom:80px}
 .about-principles,.process-row,.engagement-row{grid-template-columns:1fr}
 .services .section-heading h2,.services .section-heading p{grid-column:auto}
 .service-list summary{grid-template-columns:var(--icon-col) 1fr 26px;min-height:98px}
 .service-list summary em{display:none}
 .service-list details>div{padding-left:86px}
 .case-images{min-height:430px}.case-images .main{height:390px}.case-images .secondary{height:210px}
 .scroll-proof{display:none}
}


/* -------------------------------------------------------------
   GLOBAL DESKTOP ALIGNMENT SYSTEM
   Content stays on one fixed max-width grid instead of stretching endlessly.
------------------------------------------------------------- */
@media(min-width:901px){
  .about,
  .services,
  .work,
  .process,
  .engagement,
  .contact{
    padding-left:max(var(--pad), calc((100vw - var(--content))/2));
    padding-right:max(var(--pad), calc((100vw - var(--content))/2));
  }
}


@media(min-width:901px) and (max-width:1220px){
  :root{
    --content:1120px;
    --icon:48px;
    --icon-col:56px;
  }

  .about-grid{
    grid-template-columns:minmax(0,1fr) minmax(300px,.88fr);
  }

  .service-list summary{
    grid-template-columns:var(--icon-col) minmax(220px,290px) minmax(0,1fr) 28px;
    column-gap:10px;
  }
  .services .section-heading{
    grid-template-columns:var(--icon-col) minmax(220px,290px) minmax(0,1fr) 28px;
    column-gap:10px;
  }

  .service-list em{
    font-size:clamp(18px,1.65vw,22px);
  }

  .about-principles h3{
    font-size:19px;
  }

  .case{
    grid-template-columns:minmax(0,1fr) minmax(300px,.82fr);
  }

  .case:nth-of-type(odd){
    grid-template-columns:minmax(300px,.82fr) minmax(0,1fr);
  }
}


@media(min-width:901px) and (max-width:1220px){
  .mass-strip nav{
    left:45%;
    right:18.5%;
    gap:12px;
    font-size:8px;
  }
}

@media(max-width:900px){
  .about-principles h3,
  .about-principles p{
    font-size:18px;
  }
  .about-principles article{
    min-height:125px;
  }
}

@media(max-width:900px){
  :root{
    --mass-h1:clamp(44px,7vw,58px);
    --mass-h2:clamp(34px,5.5vw,46px);
    --mass-h3:clamp(22px,3.2vw,28px);
    --mass-sub:18px;
    --mass-body:15px;
    --mass-small:12px;
  }

  .about-principles h3,
  .about-principles p{
    font-size:var(--mass-sub);
  }
}



@media(max-width:900px){
  .services .section-heading{
    grid-template-columns:1fr;
  }
  .services .section-heading h2,
  .services .section-heading p{
    grid-column:auto;
  }
  .service-detail{
    margin-left:calc(var(--icon-col) + 10px);
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:650px){
  .service-detail{
    grid-template-columns:1fr;
    margin-left:0;
  }
}

/* New 930px-deep hero crop: preserve low-set type on slides 3 and 5 */
.hero-slide[data-index="2"] .hero-type,
.hero-slide[data-index="4"] .hero-type{
  transform:translateY(-5.1%);
}

@media(max-width:700px){
  .hero-stage{
    width:100vw;
    height:auto;
    aspect-ratio:1920/930;
  }
}

@media(min-width:901px) and (max-width:1300px){
  .mass-strip nav{
    left:46%;
    right:17.5%;
    gap:10px;
    font-size:8px;
  }
}
@media(max-width:900px){
  :root{ --strip-h:34px; }
  .mass-strip-art{
    height:34px;
    width:auto;
  }
  .mass-strip nav{display:none}
}

.engagement .section-heading{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  align-items:end;
}
.engagement .section-heading h2{
  grid-column:1 / 3;
}
.engagement .section-heading p{
  grid-column:3 / 5;
  max-width:none;
  padding-left:16px;
}

@media(max-width:900px){
  .process .section-heading,
  .engagement .section-heading{
    grid-template-columns:1fr;
    gap:24px;
  }
  .process .section-heading h2,
  .process .section-heading p{
    grid-column:auto;
    padding-left:0;
  }
  .engagement .section-heading h2,
  .engagement .section-heading p{
    grid-column:auto;
    padding-left:0;
  }
}

.contact .eyebrow{
  margin-top:9px;
}
.contact>a{
  margin-top:0;
}


/* -------------------------------------------------------------
   CASE STUDIES — BLUE COUNTERPART TO THE MASS ARCHIVE
   7 projects + 1 moving title tile, using supplied artwork only.
------------------------------------------------------------- */
.case-studies-section{width:100%;background:var(--blue);overflow:hidden}
.case-studies-stage{
  position:relative;
  width:100vw;
  aspect-ratio:1920/688;
  overflow:hidden;
  background:var(--blue)
}
.case-studies-grid{
  position:absolute;inset:0;
  background:var(--blue);overflow:hidden
}
.case-study-tile{
  position:absolute;left:0;top:0;width:25%;height:50%;
  overflow:hidden;cursor:pointer;background:var(--blue);
  transform:translate3d(var(--case-x,0),var(--case-y,0),0);
  transition:transform var(--tile-flow) var(--flow-ease);
  will-change:transform;backface-visibility:hidden;transform-style:preserve-3d;
  contain:layout paint style
}
.case-study-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;backface-visibility:hidden}
.case-study-tile .base{z-index:1;opacity:1;transition:opacity var(--hover-flow) var(--soft-ease)}
.case-study-tile .hover{z-index:2;opacity:0;transition:opacity var(--hover-flow) var(--soft-ease)}
.case-study-tile .strip{z-index:3;opacity:0;transform:translate3d(0,8px,0);transition:opacity 280ms var(--soft-ease),transform 360ms var(--soft-ease)}
.case-study-tile.hovering .base{opacity:0}
.case-study-tile.hovering .hover{opacity:1}
.case-study-tile.show-strip .hover{opacity:0}
.case-study-tile.show-strip .strip{opacity:1;transform:translate3d(0,0,0)}
.case-study-tile.fixed{cursor:default}
.case-studies-hint{position:absolute;left:16px;bottom:11px;z-index:60;color:rgba(255,255,255,.45);font-size:8px;letter-spacing:.13em;pointer-events:none}
.case-studies-fullscreen{
  position:fixed;inset:0;z-index:310;background:#000;visibility:hidden;opacity:0;
  transition:opacity 340ms var(--soft-ease),visibility 0s linear 340ms
}
.case-studies-fullscreen.open{visibility:visible;opacity:1;transition:opacity 340ms var(--soft-ease),visibility 0s}
.case-studies-fullscreen img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--blue);opacity:0;transform:scale(1.008);transition:opacity 320ms var(--soft-ease),transform 560ms var(--soft-ease);will-change:opacity,transform}
.case-studies-fullscreen.open img{opacity:1;transform:scale(1)}
.case-studies-fullscreen button{
 position:absolute;right:22px;top:22px;z-index:4;width:42px;height:42px;
 border:1px solid rgba(255,255,255,.7);background:rgba(22,35,64,.65);
 color:#fff;font-size:23px;cursor:pointer
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .archive-tile,.case-study-tile,.scroll-proof{transition-duration:1ms!important}
  .archive-tile .base,.archive-tile .hover,.archive-tile .strip,
  .case-study-tile .base,.case-study-tile .hover,.case-study-tile .strip{transition-duration:1ms!important}
}





/* -------------------------------------------------------------
   SELECTED WORK V22 — TRUE INLINE SVG LAYERS
   Exact supplied vector artwork is injected into the DOM. Photography,
   text groups and vector elements animate as their own SVG objects.
   No flat page image, no icon replacement overlays, no duplicate icons.
------------------------------------------------------------- */
.selected-work-live{
  background:#fff;
  padding-bottom:0;
}
.selected-work-live .work-v10-intro{margin-bottom:18px}
.selected-live-stack{
  width:100%;display:flex;flex-direction:column;gap:2px;
}
.live-story{width:100%;margin:0!important;position:relative;background:#fff;overflow:hidden}
.live-story.landscape{aspect-ratio:1190.55/841.89}
.selected-page-svg{display:block;width:100%;height:100%;overflow:visible;background:#fff}
.live-story.nhs{aspect-ratio:auto;overflow:visible}
.nhs-live-pair{display:grid;grid-template-columns:1fr 1fr;gap:0;background:#fff;align-items:start}
.live-page.portrait{aspect-ratio:612/792;position:relative;overflow:hidden;background:#fff}
.nhs-live-pair .live-page + .live-page{border-left:1px solid rgba(22,35,64,.045)}

/* Motion wrappers are created around the actual SVG objects at runtime. */
.selected-page-svg .sw-base,
.selected-page-svg .sw-motion{
  transform-box:fill-box;
  transform-origin:center;
  will-change:transform,opacity;
}
.selected-page-svg.motion-armed .sw-base{opacity:0}
.selected-page-svg.motion-armed .sw-motion{
  opacity:0;
  transform:translate3d(var(--sw-x,0px),var(--sw-y,13px),0) scale(var(--sw-scale,.995));
}
.selected-page-svg.is-playing .sw-base{
  animation:swBaseIn 440ms cubic-bezier(.22,1,.36,1) both;
}
.selected-page-svg.is-playing .sw-motion{
  animation:swLayerIn var(--sw-duration,760ms) cubic-bezier(.16,1,.3,1) var(--sw-delay,0ms) both;
}
@keyframes swBaseIn{from{opacity:0}to{opacity:1}}
@keyframes swLayerIn{
  from{opacity:0;transform:translate3d(var(--sw-x,0px),var(--sw-y,13px),0) scale(var(--sw-scale,.995))}
  to{opacity:1;transform:translate3d(0,0,0) scale(1)}
}
.live-story.story-enter{
  animation:storySettle 920ms cubic-bezier(.16,1,.3,1) both;
}
@keyframes storySettle{from{opacity:.01;transform:translate3d(0,20px,0) scale(.995)}to{opacity:1;transform:none}}

@media(max-width:760px){
  .selected-work-live{padding-left:0;padding-right:0}
  .selected-work-live .work-v10-intro{padding-left:22px;padding-right:22px;margin-bottom:12px}
  .selected-live-stack{gap:2px}
  .live-story.landscape{aspect-ratio:1190.55/841.89}
  .nhs-live-pair{grid-template-columns:1fr;gap:2px}
  .nhs-live-pair .live-page + .live-page{border-left:0}
}
@media(prefers-reduced-motion:reduce){
  .selected-page-svg .sw-base,.selected-page-svg .sw-motion,.live-story{
    opacity:1!important;transform:none!important;animation:none!important
  }
}


/* V23 SELECTED WORK — compositional layered build, zero external gaps */
.selected-work-layered{background:#fff;padding-bottom:0}
.selected-work-layered .work-v10-intro{margin-bottom:0}
.selected-build-stack{display:flex;flex-direction:column;gap:0;width:100%}
.build-story{position:relative;width:100%;margin:0;overflow:hidden;background:#fff;isolation:isolate}
.build-story.landscape{aspect-ratio:2880/2037}
.build-story.nhs-pair{display:grid;grid-template-columns:1fr 1fr;gap:0;aspect-ratio:5760/3728}
.nhs-build-page{position:relative;overflow:hidden;background:#fff}
.build-layer{position:absolute;inset:0;background-image:var(--img);background-size:100% 100%;background-repeat:no-repeat;clip-path:var(--clip);opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(1.008);will-change:transform,opacity,clip-path}
.build-story.is-playing .build-layer{animation:massBuildLayer 980ms cubic-bezier(.16,1,.3,1) var(--d) both}
@keyframes massBuildLayer{0%{opacity:0;transform:translate3d(var(--dx),var(--dy),0) scale(1.008)}18%{opacity:.18}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}
.build-story.is-playing{animation:massStorySettle 900ms cubic-bezier(.16,1,.3,1) both}
@keyframes massStorySettle{from{opacity:.92;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(max-width:760px){
 .selected-work-layered{padding-left:0;padding-right:0}
 .selected-work-layered .work-v10-intro{padding:0 22px 10px}
 .build-story.nhs-pair{display:flex;flex-direction:column;aspect-ratio:auto}
 .nhs-build-page{aspect-ratio:2880/3728}
}
@media(prefers-reduced-motion:reduce){.build-layer{opacity:1!important;transform:none!important;animation:none!important}.build-story{animation:none!important}}


/* -------------------------------------------------------------
   V24 — SIGNED-OFF SELECTED WORK V13 INTEGRATION
   Live selectable Neue Haas text + separate visual regions.
   Premium two-way scroll choreography. Existing site untouched.
------------------------------------------------------------- */
.selected-work-v13{background:#fff;overflow:hidden;padding:0;margin:0;width:100%}
.selected-work-v13-intro{
  padding:var(--space-section) max(var(--pad),calc((100vw - var(--content))/2));
  margin:0!important;
}
.selected-work-v13-pages{width:100%;margin:0;padding:0;background:#fff}
.selected-work-v13 .page-shell{position:relative;width:100%;overflow:hidden;background:#fff;margin:0;padding:0;isolation:isolate}
.selected-work-v13 .page-canvas{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;background:#fff}
.selected-work-v13 .art-region{position:absolute;background-repeat:no-repeat;will-change:transform,opacity,filter,clip-path;opacity:0;filter:blur(7px);transform:translate3d(var(--dx,0),var(--dy,34px),0) scale(1.018);clip-path:inset(0 0 100% 0);transition:opacity 1.12s cubic-bezier(.19,1,.22,1),transform 1.7s cubic-bezier(.19,1,.22,1),filter 1.45s cubic-bezier(.2,.9,.22,1),clip-path 1.48s cubic-bezier(.16,1,.3,1)}
.selected-work-v13 .page-shell.is-active .art-region{opacity:1;filter:blur(0);transform:translate3d(0,0,0) scale(1);clip-path:inset(0 0 0 0)}
.selected-work-v13 .art-region.r0{transition-delay:.04s}.selected-work-v13 .art-region.r1{transition-delay:.16s}.selected-work-v13 .art-region.r2{transition-delay:.30s}.selected-work-v13 .art-region.r3{transition-delay:.46s}
.selected-work-v13 .text-pos{position:absolute;white-space:pre;overflow:visible;user-select:text;-webkit-user-select:text;will-change:transform,opacity,filter;opacity:0;filter:blur(4px);transform:translate3d(0,22px,0);transition:opacity .82s cubic-bezier(.19,1,.22,1),transform 1.18s cubic-bezier(.19,1,.22,1),filter 1s cubic-bezier(.2,.9,.22,1);z-index:5}
.selected-work-v13 .text-pos.hero{transform:translate3d(-38px,28px,0);filter:blur(6px);transition-duration:1.36s}
.selected-work-v13 .text-pos.head{transform:translate3d(0,24px,0)}
.selected-work-v13 .text-pos.body{font-weight:300!important;letter-spacing:.002em}
.selected-work-v13 .page-shell.is-active .text-pos{opacity:1;filter:blur(0);transform:translate3d(0,0,0)}
.selected-work-v13 .text-glyph{display:inline-block;transform-origin:left top;white-space:pre;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;font-synthesis:none}
.selected-work-v13 .page-shell::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.76) 42%,rgba(255,255,255,0) 100%);z-index:20;pointer-events:none;transform-origin:top;transform:scaleY(1);opacity:.98;transition:transform 1.2s cubic-bezier(.16,1,.3,1),opacity 1.2s cubic-bezier(.16,1,.3,1)}
.selected-work-v13 .page-shell.is-active::after{transform:scaleY(0);opacity:0}
.selected-work-v13 .page-shell:nth-child(odd)::after{transform-origin:bottom}
.selected-work-v13 .page-shell + .page-shell{margin-top:0}
@media(max-width:760px){
  .selected-work-v13-intro{padding:var(--space-section) 22px 24px;grid-template-columns:1fr;gap:18px}
  .selected-work-v13-intro p{justify-self:start}
}
@media(prefers-reduced-motion:reduce){
 .selected-work-v13 .art-region,.selected-work-v13 .text-pos,.selected-work-v13 .page-shell::after{transition:none!important;opacity:1!important;filter:none!important;transform:none!important;clip-path:none!important}
}

/* MASS 2.0 editable-theme additions */
.hero-overlay-replacement{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:6;pointer-events:none}
.hero-live-headline{position:absolute;left:6.4%;top:15%;z-index:7;max-width:43%;font-family:"Neue Haas Grotesk Display Pro","Helvetica Neue",Arial,sans-serif;font-size:clamp(34px,4.5vw,86px);line-height:.95;font-weight:200;letter-spacing:-.025em;color:#162340;white-space:pre-line;pointer-events:none}
.mass-sw-art-override{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:3;pointer-events:none}
.mass-sw-art-override~.art-region{opacity:0!important}
@media(max-width:700px){.hero-live-headline{max-width:62%;font-size:clamp(28px,6vw,54px)}}

/* -------------------------------------------------------------
   V25.1 RESPONSIVE REPAIR
   Purpose-built portrait layouts rather than scaled desktop artwork.
------------------------------------------------------------- */
.mass-mobile-brand,.mass-menu-toggle,.mass-mobile-nav-link{display:none}
.selected-mobile-halves{display:none}

@media(max-width:900px){
  :root{
    --strip-h:64px;
    --pad:22px;
    --space-section:64px;
    --space-copy-content:32px;
    --mass-h1:clamp(43px,11.6vw,64px);
    --mass-h2:clamp(34px,8.6vw,48px);
    --mass-h3:clamp(21px,5.4vw,28px);
    --mass-sub:clamp(16px,4.2vw,19px);
    --mass-body:clamp(15px,3.9vw,17px);
    --icon:48px;
    --icon-col:54px;
  }
  body.mass-nav-open{overflow:hidden}
  .mass-strip{
    overflow:visible;
    height:var(--strip-h);
    border-bottom:1px solid rgba(255,255,255,.16)
  }
  .mass-strip-art{display:none}
  .mass-mobile-brand{
    position:absolute;display:block;left:20px;top:50%;width:108px;
    transform:translateY(-50%);z-index:3
  }
  .mass-mobile-brand img{width:100%;height:auto}
  .mass-menu-toggle{
    position:absolute;right:14px;top:50%;z-index:4;display:grid;
    width:48px;height:48px;padding:13px 11px;transform:translateY(-50%);
    border:0;background:transparent;cursor:pointer
  }
  .mass-menu-toggle span{
    display:block;width:100%;height:2px;margin:auto;background:#fff;
    transform-origin:center;transition:transform .25s var(--soft-ease),opacity .2s ease
  }
  .mass-strip.nav-open .mass-menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mass-strip.nav-open .mass-menu-toggle span:nth-child(2){opacity:0}
  .mass-strip.nav-open .mass-menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mass-strip nav{
    position:fixed;display:flex;left:0;right:0;top:var(--strip-h);bottom:0;
    height:auto;padding:clamp(36px,8vh,78px) 24px max(30px,env(safe-area-inset-bottom));
    flex-direction:column;align-items:flex-start;justify-content:center;gap:clamp(13px,3vh,28px);
    background:rgba(22,35,64,.985);font-size:inherit;white-space:normal;
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-12px);
    transition:opacity .24s ease,transform .3s var(--soft-ease),visibility 0s linear .3s
  }
  .mass-strip.nav-open nav{
    opacity:1;visibility:visible;pointer-events:auto;transform:none;
    transition:opacity .24s ease,transform .3s var(--soft-ease),visibility 0s
  }
  .mass-strip nav a{
    font-size:clamp(27px,7.8vw,44px);line-height:1;font-weight:200;
    letter-spacing:-.015em;opacity:1
  }
  .mass-strip nav .mass-mobile-nav-link{display:block}

  .hero-section{padding-top:var(--strip-h)}
  .hero-stage{
    width:100vw;height:clamp(440px,64svh,620px);aspect-ratio:auto;
    background:var(--blue)
  }
  .hero-art,.hero-type,.hero-overlay-replacement{
    left:50%;right:auto;top:0;bottom:auto;width:auto;height:100%;max-width:none;aspect-ratio:16/9;
    object-fit:fill;translate:-50% 0
  }
  .hero-slide[data-index="0"] :is(.hero-art,.hero-type,.hero-overlay-replacement),
  .hero-slide[data-index="1"] :is(.hero-art,.hero-type,.hero-overlay-replacement){translate:-22% 0}
  .hero-slide[data-index="2"] :is(.hero-art,.hero-type,.hero-overlay-replacement),
  .hero-slide[data-index="4"] :is(.hero-art,.hero-type,.hero-overlay-replacement){translate:-78% 0}
  .hero-slide[data-index="3"] :is(.hero-art,.hero-type,.hero-overlay-replacement){translate:-50% 0}
  .hero-live-headline{left:22px;top:11%;max-width:76%;font-size:clamp(38px,10vw,58px)}
  .hero-edge{width:18%}

  .about,.services,.work,.process,.engagement{padding:64px 22px}
  .about-grid,.section-heading,.services .section-heading,
  .process .section-heading,.engagement .section-heading{
    grid-template-columns:1fr;gap:24px;align-items:start
  }
  .about-grid{margin-top:18px}
  .about h1,.section-heading h2{line-height:.92}
  .about-copy h2{line-height:.98;margin-bottom:16px}
  .section-heading{margin:18px 0 34px}
  .process .section-heading h2,.process .section-heading p,
  .engagement .section-heading h2,.engagement .section-heading p{
    grid-column:auto;padding-left:0
  }
  .about-principles,.process-row,.engagement-row{
    grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 18px
  }
  .about-principles article,.process-row article,.engagement-row article,
  .about-principles article+article,.process-row article+article,.engagement-row article+article{
    min-height:0;padding:0!important
  }
  .about-principles h3,.about-principles p{font-size:var(--mass-sub)}
  .process-row h3,.engagement-row h3{line-height:1.02;margin-top:10px}
  .process-row p,.engagement-row p{line-height:1.12;margin-top:7px}
  .service-list summary{grid-template-columns:var(--icon-col) 1fr 28px;min-height:92px}
  .service-list summary em{display:none}
  .service-list details>div{padding-left:0}
  .contact{padding:30px 22px calc(30px + env(safe-area-inset-bottom))}

  .scroll-proof{
    display:block;height:calc(64px + env(safe-area-inset-bottom));
    padding-bottom:env(safe-area-inset-bottom)
  }
  .proof-item{
    width:234px;height:54px;padding:0 13px;grid-template-columns:36px 1fr;gap:10px
  }
  .proof-item img{width:34px;height:34px}
  .proof-item b{font-size:11px;letter-spacing:.035em}
  .proof-item span{margin-top:2px;font-size:8px;line-height:1.15}
}

@media(max-width:1024px) and (orientation:portrait){
  .selected-work-v13 .page-shell>.page-canvas{display:none}
  .selected-mobile-halves{display:block;width:100%;height:100%}
  .selected-mobile-half{position:relative;width:100%;overflow:hidden;background:#fff}
  .selected-mobile-half+.selected-mobile-half{border-top:1px solid rgba(22,35,64,.1)}
  .selected-mobile-half .page-canvas{display:block}
  .selected-work-v13-intro{padding:64px 22px 26px;grid-template-columns:1fr;gap:16px}
  .selected-work-v13-intro p{justify-self:start}

  .archive-stage{aspect-ratio:960/2064}
  .archive-tile{width:50%;height:16.666667%}
  .case-studies-stage{aspect-ratio:960/1376}
  .case-study-tile{width:50%;height:25%}
  .archive-hint,.case-studies-hint{font-size:0}
  .archive-hint::after,.case-studies-hint::after{content:"TAP TO VIEW";font-size:8px}
}

@media(max-width:900px) and (orientation:landscape){
  :root{--strip-h:52px}
  .mass-mobile-brand{width:92px}
  .mass-strip nav{justify-content:flex-start;padding-top:24px;gap:10px;overflow-y:auto}
  .mass-strip nav a{font-size:clamp(22px,5.1vh,34px)}
  .hero-stage{height:calc(100svh - var(--strip-h));min-height:310px;max-height:520px}
  .scroll-proof{height:calc(50px + env(safe-area-inset-bottom))}
  .proof-item{width:206px;height:42px;padding:0 10px;grid-template-columns:30px 1fr;gap:8px}
  .proof-item img{width:28px;height:28px}
  .proof-item b{font-size:10px}.proof-item span{font-size:7px}
}

@media(max-width:390px){
  :root{--pad:18px}
  .about,.services,.work,.process,.engagement{padding-left:18px;padding-right:18px}
  .about-principles,.process-row,.engagement-row{gap:32px 14px}
}