/* ==========================================================================
   MANU — page components. Loaded after manu.css.
   ========================================================================== */

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:calc(100svh - 62px);
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-bottom:clamp(2rem, 6vh, 4.5rem); overflow:hidden;
}

/* No-JS hero: the canvas stays empty without script, so paint a static star
   field behind it. html.js hides it, since the real canvas takes over. */
.hero::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(1.4px 1.4px at 18% 24%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 72% 16%, rgba(255,255,255,.65) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 41% 62%, rgba(255,255,255,.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 87% 48%, rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 9% 71%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 83%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 31% 9%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 79%, rgba(255,255,255,.45) 50%, transparent 51%);
  background-size:520px 520px, 380px 380px, 610px 610px, 300px 300px,
                  470px 470px, 350px 350px, 560px 560px, 420px 420px;
}
.js .hero::before{display:none;}
#heroCanvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; z-index:0;
}
.hero-foot{
  position:relative; z-index:1; width:100%;
  display:grid; grid-template-columns:1.3fr 1fr; gap:var(--s4); align-items:end;
}
.hero-say{max-width:22em; color:var(--white);}
.hero-meta{justify-self:end; text-align:right;}
.hero-meta .btn-row{justify-content:flex-end;}
@media(max-width:820px){
  .hero{min-height:calc(100svh - 58px);}
  .hero-foot{grid-template-columns:1fr; gap:var(--s3);}
  .hero-meta{justify-self:start; text-align:left;}
  .hero-meta .btn-row{justify-content:flex-start;}
  .hero-meta .btn{flex:1 1 auto;}
}

/* ---------- generic two-column editorial block ---------- */
.two-col{display:grid; grid-template-columns:minmax(0,0.34fr) minmax(0,1fr); gap:clamp(1.5rem,5vw,5rem);}
.two-col > .label{padding-top:0.5rem;}
@media(max-width:820px){
  .two-col{grid-template-columns:1fr; gap:var(--s3);}
}

/* ---------- work entries ---------- */
.entry{
  display:grid; grid-template-columns:1.15fr 1fr; gap:clamp(1.5rem,4vw,4rem);
  align-items:center; padding-block:clamp(2rem,5vh,3.5rem);
  border-top:1px solid var(--g-14); text-decoration:none; color:inherit;
}
.entry:last-of-type{border-bottom:1px solid var(--g-14);}
.entry-img{aspect-ratio:4/3;}
.entry-img img{filter:grayscale(1) contrast(1.06); transform:translateY(var(--py,0)); transition:transform 1.1s var(--ease), filter .7s var(--ease);}
.entry:hover .entry-img img{transform:translateY(var(--py,0)) scale(1.035); filter:grayscale(1) contrast(1.14) brightness(1.06);}
.entry-txt{display:flex; flex-direction:column; align-items:flex-start; gap:0.875rem;}
.entry-txt .prose{max-width:38em;}
.entry-txt .tlink{margin-top:0.5rem; font-size:0.9375rem;}
.entry--flip .entry-img{order:2;}
@media(max-width:820px){
  .entry{grid-template-columns:1fr; gap:var(--s3);}
  .entry--flip .entry-img{order:0;}
}

/* ---------- numbered steps ---------- */
.steps{list-style:none; display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s4) var(--s5);}
.steps li{display:flex; flex-direction:column; gap:0.5rem; padding-top:var(--s2); border-top:1px solid var(--g-14);}
.steps .prose{max-width:30em;}
@media(max-width:680px){ .steps{grid-template-columns:1fr; gap:var(--s3);} }

/* ---------- page heads ---------- */
.page-head .h-xl{margin-top:var(--s2);}
.page-head{padding-bottom:var(--s3);}

/* ---------- services grid ---------- */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s5) var(--s4);}
.svc{display:flex; flex-direction:column; gap:0.625rem; padding-top:var(--s2); border-top:1px solid var(--g-14);}
.svc .prose{max-width:26em;}
@media(max-width:900px){ .svc-grid{grid-template-columns:repeat(2,1fr); gap:var(--s4) var(--s3);} }
@media(max-width:600px){ .svc-grid{grid-template-columns:1fr; gap:var(--s3);} }

/* ---------- facts list ---------- */
.facts{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s3) var(--s4);}
.facts > div{padding-top:0.875rem; border-top:1px solid var(--g-14);}
.facts dd{font-family:var(--serif); font-size:1.0625rem; line-height:1.5; color:var(--g-90); margin-top:0.375rem;}
@media(max-width:680px){ .facts{grid-template-columns:1fr;} }

/* ---------- form ---------- */
.contact-mail{font-family:var(--display); font-size:1.0625rem;}
.form{margin-top:var(--s5); max-width:34rem; border-top:1px solid var(--g-14); padding-top:var(--s3);}
.form-or{margin-bottom:var(--s3);}
.field{margin-bottom:var(--s3);}
.field label{display:block; font-family:var(--display); font-size:0.75rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--g-55); margin-bottom:0.5rem;}
.field input, .field textarea{
  width:100%; background:transparent; border:0; border-bottom:1px solid var(--g-20);
  color:var(--white); font-family:var(--serif); font-size:1.0625rem; line-height:1.5;
  padding:0.75rem 0; min-height:48px; border-radius:0;
  transition:border-color .3s var(--ease);
}
.field textarea{resize:vertical;}
.field input::placeholder{color:var(--g-40);}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--white);}
.field.bad input, .field.bad textarea{border-color:var(--g-90);}
.field.bad label{color:var(--g-90);}
.form-note{min-height:1.25rem; margin-bottom:var(--s2); color:var(--g-55);}

/* ---------- case study pages ---------- */
.case-head{padding-bottom:var(--s4); border-bottom:1px solid var(--g-14);}
.case-meta{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); margin-top:var(--s4);}
.case-meta > div{padding-top:0.875rem; border-top:1px solid var(--g-14);}
.case-meta dd, .case-meta p:last-child{font-family:var(--serif); font-size:1rem; color:var(--g-90); margin-top:0.375rem;}
@media(max-width:760px){ .case-meta{grid-template-columns:repeat(2,1fr);} }
.case-block{margin-top:clamp(3rem,8vh,6rem);}
.case-shot{margin-block:clamp(2rem,6vh,4.5rem);}
.case-next{border-top:1px solid var(--g-14); padding-top:var(--s3); margin-top:clamp(3rem,8vh,6rem); display:flex; justify-content:space-between; align-items:baseline; gap:var(--s2); flex-wrap:wrap; text-decoration:none;}
.case-next .h-2{transition:opacity .3s var(--ease);}
.case-next:hover .h-2{opacity:0.6;}
.detail-list{list-style:none; display:flex; flex-direction:column; gap:0.875rem; max-width:36em;}
.detail-list li{font-family:var(--serif); font-size:1.0625rem; line-height:1.6; color:var(--g-70); padding-left:1.5rem; position:relative;}
.detail-list li::before{content:''; position:absolute; left:0; top:0.7em; width:0.6rem; height:1px; background:var(--g-40);}

/* ---------- touch ergonomics ----------
   Keyed off pointer type, not viewport width: a 1024px tablet needs finger-sized
   targets, a 768px browser window on a desktop does not. */
@media (pointer:coarse){
  .wordmark{display:inline-flex; align-items:center; min-height:44px;}
  .nav a{min-height:44px; display:inline-flex; align-items:center;}
  .foot-links a{min-height:44px; display:inline-flex; align-items:center;}
  .tlink{display:inline-flex; align-items:center; min-height:44px;}
  .case-meta .tlink, .contact-mail{min-height:44px;}
  .entry-txt .tlink{min-height:44px;}
}
/* Fine pointers still get a comfortable hit area without inflating the layout. */
@media (pointer:fine){
  .wordmark{display:inline-flex; align-items:center; min-height:32px;}
  .foot-links a{padding-block:0.3125rem;}
  .tlink{padding-block:0.25rem;}
}
/* Narrow viewports get finger-sized targets regardless of reported pointer type,
   which also covers desktop browsers resized down. */
@media (max-width:820px){
  .wordmark{display:inline-flex; align-items:center; min-height:44px;}
  .foot-links a{min-height:44px; display:inline-flex; align-items:center;}
  .tlink{display:inline-flex; align-items:center; min-height:44px;}
  .entry-txt .tlink, .case-meta .tlink, .contact-mail{min-height:44px;}
}

/* ---------- plate grid (Nous-inspired abstract plates) ---------- */
.plate-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(0.75rem,1.6vw,1.5rem);}
.plate--tall{aspect-ratio:3/4;}
.plate-grid .plate img{transform:translateY(var(--py,0)); transition:transform 1.4s var(--ease), opacity .6s var(--ease);}
.plate-grid .plate:hover img{transform:translateY(var(--py,0)) scale(1.04);}
@media(max-width:760px){
  .plate-grid{grid-template-columns:1fr 1fr;}
  .plate-grid .plate:nth-child(3){display:none;}   /* keep a clean pair on phones */
}

/* ---------- hero morph button ---------- */
.hero-morph{margin-top:0.75rem; transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;}
.hero-morph[aria-pressed="true"]{background:var(--white); color:var(--black); border-color:var(--white);}
.hero-morph.is-pressing{transform:scale(.94);}
.hero-morph::after{ /* brief pulse ring on press */
  content:""; position:absolute; inset:0; border-radius:inherit;
  border:1px solid var(--white); opacity:0; pointer-events:none;
}
.hero-morph.is-pulsing::after{animation:morphPulse .45s ease-out;}
@keyframes morphPulse{from{opacity:.6; transform:scale(1);}to{opacity:0; transform:scale(1.35);}}
.hero-morph{position:relative; overflow:visible;}

/* ---------- case-study gallery ---------- */
.gallery{margin-block:clamp(2rem,6vh,4rem);}
.gal-bar{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2); margin-bottom:var(--s2); flex-wrap:wrap;}
.gal-strip{
  display:flex; gap:clamp(0.75rem,1.6vw,1.25rem);
  overflow-x:auto; scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:0.5rem;
}
.gal-strip::-webkit-scrollbar{display:none;}
.gal-slide{
  flex:0 0 min(84%, 900px); scroll-snap-align:center;
  display:flex; flex-direction:column; gap:0.75rem;
}
.gal-slide .plate{aspect-ratio:16/10;}
.gal-slide figcaption{font-family:var(--display); font-size:0.75rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; color:var(--g-55);}
.gal-nav{display:flex; align-items:center; gap:0.5rem;}
.gal-btn{
  width:44px; height:44px; display:grid; place-items:center;
  background:transparent; border:1px solid var(--g-20); color:var(--white);
  font-size:1rem; cursor:pointer; transition:border-color .3s var(--ease), opacity .3s var(--ease);
}
.gal-btn:hover:not(:disabled){border-color:var(--white);}
.gal-btn:disabled{opacity:0.3; cursor:default;}
.gal-dots{display:flex; gap:0.375rem; align-items:center;}
.gal-dot{
  width:28px; height:44px; padding:0; background:none; border:0; cursor:pointer;
  position:relative;
}
.gal-dot::after{
  content:''; position:absolute; left:0; right:0; top:50%; height:1px;
  background:var(--g-20); transition:background .3s var(--ease);
}
.gal-dot[aria-current="true"]::after{background:var(--white); height:2px;}
@media(max-width:680px){
  .gal-slide{flex:0 0 92%;}
  .gal-dots{display:none;}   /* swipe is the interaction on touch */
}