/* ============================================================================
   MITGO v4 — INTERIOR PAGES. Loads AFTER v4.css and reuses its whole system:
   Alegreya display · Instrument Sans body + labels · ink/paper/green.
   Adds only what interior pages need: a compact page hero, real prose, and the
   MOLD grammar carried inward (sticky media that slides, block-slide seams).
   ========================================================================== */

/* ------------------------------------------------------------- page hero */
.phero{
  position:relative;min-height:clamp(440px,62svh,640px);
  display:flex;align-items:flex-end;overflow:clip;
}
.phero .bg{position:absolute;inset:0}
.phero .bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.phero .bg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(10,22,34,.86) 0%,rgba(10,22,34,.55) 48%,rgba(10,22,34,.18) 82%),
    linear-gradient(0deg,rgba(10,22,34,.88) 0%,rgba(10,22,34,.20) 46%,rgba(10,22,34,.42) 100%);
}
.phero .wrap{position:relative;z-index:2;padding-block:clamp(54px,7vw,86px);padding-top:clamp(130px,15vw,170px)}
.phero h1{max-width:15ch;margin:18px 0 0}
.phero .lede{
  margin-top:20px;max-width:52ch;color:#C9D8E8;
  font-size:clamp(1rem,1.3vw,1.18rem);line-height:1.7;
}
/* the MitgoZero hero runs the live drone loop, same poster-crossfade as the
   homepage so it never shows a black or half-loaded frame */
.phero.forest .bg video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--ease);
}
.phero.forest .bg.vid-on video{opacity:1}
.phero.forest .bg::after{
  background:
    linear-gradient(90deg,rgba(16,44,30,.90) 0%,rgba(20,54,36,.62) 50%,rgba(24,66,44,.28) 84%),
    linear-gradient(0deg,rgba(14,38,26,.88) 0%,rgba(20,54,36,.20) 48%,rgba(20,54,36,.40) 100%);
}
.zhero{min-height:clamp(520px,76svh,780px)}
body.shot .phero.forest video{display:none}

.crumb{font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--sky-dim)}
.crumb a{color:var(--green-hi)}
.crumb a:hover{text-decoration:underline}

/* ------------------------------------------------------------------ prose */
.prose p{margin-bottom:1.05em}
.prose p:last-child{margin-bottom:0}
.prose{font-size:clamp(1rem,1.15vw,1.09rem);line-height:1.78;color:var(--slate);max-width:62ch}
.dark .prose{color:var(--sky)}
.prose strong{font-weight:600;color:var(--ink)}
.dark .prose strong{color:var(--white)}

/* a real bulleted list, in the v4 voice — green rule, no bullet glyph */
.plist{list-style:none;display:grid;gap:0;margin:26px 0 0;max-width:62ch}
.plist li{
  position:relative;padding:14px 0 14px 30px;
  border-top:1px solid rgba(10,22,34,.13);
  font-size:.99rem;line-height:1.6;color:var(--slate);
}
.plist li:last-child{border-bottom:1px solid rgba(10,22,34,.13)}
.plist li::before{
  content:"";position:absolute;left:2px;top:23px;
  width:11px;height:2px;background:var(--green);
}
.dark .plist li{border-color:rgba(143,180,214,.18);color:var(--sky)}
.dark .plist li:last-child{border-color:rgba(143,180,214,.18)}
.dark .plist li::before{background:var(--green-hi)}

/* --------------------------------------------------- numbered entry blocks
   The interior workhorse: a sticky image column that holds while the copy
   scrolls past it, so the pictures slide between each other exactly like the
   homepage deck. Alternates side per entry. */
.entries{padding:clamp(80px,10vw,140px) 0}
.entry{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(36px,5vw,80px);align-items:start;
  padding-block:clamp(52px,6vw,90px);
  border-top:1px solid rgba(10,22,34,.12);
}
.dark .entry{border-color:rgba(143,180,214,.16)}
.entry:first-child{border-top:0;padding-top:0}
.entry:nth-child(even) .e-media{order:2}
.e-media{position:sticky;top:96px;border-radius:20px;overflow:clip;aspect-ratio:4/3;min-width:0}
.e-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.03);transition:transform 1.2s var(--ease)}
.e-media:hover img{transform:scale(1.08)}
.e-body{min-width:0;padding-top:4px}
.e-no{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.16em;
  color:var(--green);display:block;margin-bottom:12px;
}
.dark .e-no{color:var(--green-hi)}
.e-body h2{
  font-family:var(--font-display);font-weight:600;line-height:1.04;letter-spacing:-.015em;
  font-size:clamp(1.55rem,2.9vw,2.5rem);margin-bottom:20px;
}
/* Entry copy runs 120-190 words. Set as one even slab it reads as a wall, which
   is the same complaint the About page earned — so give it a shape instead of
   shortening it: the opening paragraph carries as a lede (bigger, inked, its
   own measure) and the rest follow at body weight underneath. Costs no words
   and applies to all thirteen service and industry entries at once.

   The measure is also capped again here. The base .prose stops at 62ch; this
   block used to override that with max-width:none, which let lines run to 71
   characters on a wide screen — past the point where the eye reliably finds
   the start of the next line. */
.e-body .prose{max-width:62ch}
.e-body .prose > p:first-child{
  font-size:clamp(1.04rem,1.35vw,1.19rem);
  line-height:1.62;
  color:var(--ink);
  max-width:52ch;
  margin-bottom:1.15em;
}
.dark .e-body .prose > p:first-child{color:var(--white)}
.e-body .plist{max-width:none}

/* capability sub-blocks inside an entry (Mitgo's own "Services Include" lists) */
.subhead{
  font-family:var(--font-display);font-weight:600;font-size:1.02rem;letter-spacing:.005em;
  margin:34px 0 4px;color:var(--ink);
}
.dark .subhead{color:var(--white)}
.subhead + .prose{margin-top:8px}
.plist.tight li{padding:11px 0 11px 30px;font-size:.94rem}
.plist.tight li::before{top:20px}

/* ------------------------------------------------------- "who we are" block
   Long institutional copy, made readable. The rules that matter: a measure
   that stops around 62 characters (the old block ran past 90 on a wide screen,
   which is where the eye loses its place on the return sweep), the strongest
   sentence lifted out at display size instead of buried mid-paragraph, and the
   remainder split into three short labelled columns so it can be scanned
   rather than waded through. */
.who{display:grid;gap:clamp(34px,3.6vw,52px)}
.who-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:end}
.who-title .d-lg{margin:16px 0 0}
.who-lede{
  font-size:clamp(1.05rem,1.5vw,1.3rem);line-height:1.6;color:var(--ink);
  max-width:42ch;
}
/* Wide and short, not tall and narrow: at 30ch this ran eight lines and built a
   tower with a dead half-page beside it. A pull-quote works as a band. */
.who-quote{
  border-top:2px solid var(--green);padding-top:22px;
  max-width:54ch;
}
.who-quote p{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.35rem,2.2vw,1.95rem);line-height:1.24;letter-spacing:-.012em;
  color:var(--ink);
}
.who-quote em{font-style:normal;color:var(--green)}
.who-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.who-col{border-top:1px solid rgba(10,22,34,.16);padding-top:18px}
.who-col .k{display:block;color:var(--green);margin-bottom:10px}
.who-col p{font-size:.97rem;line-height:1.65;color:var(--slate);max-width:38ch}

/* The quote wants to sit beside the intro on a wide screen, and lead on a
   narrow one — where a 30ch pull-quote next to nothing would just look lost. */
@media (max-width:900px){
  .who-head{grid-template-columns:1fr;gap:18px;align-items:start}
  .who-lede{max-width:none}
  .who-quote{max-width:none}
  .who-cols{grid-template-columns:1fr;gap:26px}
  .who-col p{max-width:none}
}

/* ------------------------------------------------------------- value rows */
.vrow{padding:clamp(80px,10vw,140px) 0}
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,44px);margin-top:44px}
.vcard{
  padding:30px 30px 34px;border-radius:18px;
  background:rgba(10,22,34,.04);border:1px solid rgba(10,22,34,.09);
}
.dark .vcard{background:rgba(143,180,214,.06);border-color:rgba(143,180,214,.14)}
.vcard .n{font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.16em;color:var(--green);display:block;margin-bottom:12px}
.dark .vcard .n{color:var(--green-hi)}
.vcard p{font-size:1rem;line-height:1.65;color:var(--slate)}
.dark .vcard p{color:var(--sky)}

/* --------------------------------------------------------------- sections */
.sec{padding:clamp(84px,11vw,160px) 0}
.sec .d-lg{margin:20px 0 22px}
.sec.dark{background:var(--ink);color:var(--paper)}
.sec.paper{background:var(--paper);color:var(--ink)}
.sec.paper2{background:var(--paper-2);color:var(--ink)}

/* --------------------------------------------------------------- team page */
.bios{display:grid;gap:clamp(30px,4vw,58px);margin-top:50px}
.bio{display:grid;grid-template-columns:210px 1fr;gap:clamp(26px,3vw,48px);align-items:start}
.bio img{
  width:100%;aspect-ratio:.86;object-fit:cover;border-radius:16px;
  filter:saturate(.94);background:var(--ink-3);
}
.bio .r{font-family:var(--font-mono);font-weight:500;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--green-hi);display:block;margin-bottom:8px}
.bio h3{font-family:var(--font-display);font-weight:600;font-size:clamp(1.25rem,2vw,1.62rem);margin-bottom:14px;letter-spacing:-.01em}
.bio .prose{font-size:1rem;max-width:64ch}
.bio .mailto{display:inline-block;margin-top:14px;font-family:var(--font-display);font-weight:500;font-size:1.12rem;letter-spacing:-.008em;color:var(--paper);transition:color .3s}
.bio .mailto em{font-style:normal;color:var(--green-hi)}
.bio .mailto:hover{color:var(--green-hi)}

/* ------------------------------------------------------------ contact page */
.cgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,92px);align-items:start}
.croute{display:grid;gap:0;margin-top:8px}
.croute a.cr{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:20px;
  padding:24px 0;border-top:1px solid rgba(143,180,214,.18);
  transition:padding-left .4s var(--ease);
}
.croute a.cr:last-child{border-bottom:1px solid rgba(143,180,214,.18)}
.croute a.cr:hover{padding-left:12px}
.cr .lbl{font-weight:600;font-size:1.06rem;color:var(--white)}
.cr .sub{font-size:.84rem;color:var(--sky-dim);margin-top:3px;display:block}
.cr .val{font-family:var(--font-display);font-weight:500;font-size:1.32rem;letter-spacing:-.01em;color:var(--paper);text-align:right;transition:color .3s}
.cr .val em{font-style:normal;color:var(--green-hi)}
.croute a.cr:hover .val{color:var(--green-hi)}
.croute a.cr:hover .val em{color:var(--green-hi)}
.cnums{display:grid;gap:0;margin-top:34px}
.cnum{
  display:flex;justify-content:space-between;align-items:baseline;gap:18px;
  padding:15px 0;border-top:1px solid rgba(143,180,214,.14);
}
.cnum .k{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--sky-dim);font-weight:600}
.cnum .v{font-family:var(--font-display);font-weight:500;font-size:1.2rem;letter-spacing:-.008em;color:var(--paper);font-variant-numeric:tabular-nums}
.cnum a.v:hover{color:var(--green-hi)}

.cform{background:rgba(143,180,214,.06);border:1px solid rgba(143,180,214,.16);border-radius:22px;padding:clamp(26px,3.2vw,42px)}
.cform h2{font-family:var(--font-display);font-weight:600;font-size:clamp(1.3rem,2.1vw,1.75rem);margin-bottom:8px;letter-spacing:-.01em}
.cform .note{font-size:.87rem;color:var(--sky-dim);margin-bottom:24px}
.fld{display:block;margin-bottom:16px}
.fld span{display:block;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;color:var(--sky-dim);font-weight:600;margin-bottom:7px}
.fld input,.fld textarea,.fld select{
  width:100%;background:rgba(10,22,34,.5);color:var(--paper);
  border:1px solid rgba(143,180,214,.22);border-radius:11px;
  padding:13px 15px;font:inherit;font-size:.97rem;
  transition:border-color .3s,background .3s;
}
.fld textarea{min-height:118px;resize:vertical}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:0;border-color:var(--green-hi);background:rgba(10,22,34,.75)}
.cform .btn{width:100%;justify-content:center;margin-top:6px}

/* ------------------------------------------------------------ careers band */
.careers{position:relative;overflow:clip;padding:clamp(84px,11vw,150px) 0}
.careers .bg{position:absolute;inset:0}
.careers .bg img{width:100%;height:100%;object-fit:cover}
.careers .bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(10,22,34,.93) 0%,rgba(10,22,34,.78) 52%,rgba(10,22,34,.5) 100%)}
.careers .wrap{position:relative;z-index:2}

/* --------------------------------------------------------------- cta strip */
.ctaband{background:var(--green-dp);color:var(--white);padding:clamp(70px,9vw,120px) 0}
.ctaband .d-lg{margin-bottom:16px;max-width:18ch}
.ctaband .support{color:#CDEBD9;max-width:52ch;margin-bottom:32px}
.ctaband .btn{background:var(--white);color:var(--green-dp)}
.ctaband .btn:hover{background:#E4F4EA;box-shadow:0 14px 34px -12px rgba(0,0,0,.45)}
.ctaband .btn.ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.42)}
.ctaband .btn.ghost:hover{background:rgba(255,255,255,.1)}

/* ------------------------------------------------------------- responsive */
@media (max-width:900px){
  /* The desktop signature — a picture that HOLDS while its copy scrolls past —
     used to be thrown away here (position:static), so interior pages became a
     wall of body text with a photo dropped in. It survives fine in one column:
     make the entry a block so the sticky media's containing block is the whole
     entry rather than a one-row grid cell, then let the copy panel ride up over
     the photo on its own opaque background. Same "pictures slide between each
     other" beat as the homepage deck, in a single column. */
  .entry{display:block;padding-block:0 clamp(46px,8vw,72px)}
  .entry:nth-child(even) .e-media{order:0}
  .e-media{
    position:sticky;top:0;z-index:0;
    height:34svh;aspect-ratio:auto;border-radius:0 0 18px 18px;
  }
  .e-body{
    position:relative;z-index:1;background:var(--paper);
    border-radius:18px 18px 0 0;padding:clamp(24px,5vw,34px) 0 0;
  }
  .sec.paper2 .e-body{background:var(--paper-2)}
  .dark .e-body{background:var(--ink)}
  /* no pointer to leave, so the zoom would stick on after a tap */
  .e-media:hover img{transform:scale(1.03)}
  .vgrid{grid-template-columns:1fr}
  .bio{grid-template-columns:150px 1fr;gap:22px}
  .cgrid{grid-template-columns:1fr}
  .phero{min-height:auto}
  .phero .wrap{padding-top:clamp(118px,20vw,150px);padding-bottom:48px}
}
@media (max-width:560px){
  .bio{grid-template-columns:1fr}
  .bio img{max-width:220px}
  .croute a.cr{grid-template-columns:1fr;gap:6px}
  .cr .val{text-align:left}
}

/* ------------------------------------------- shot mode / no-JS on interiors */
body.nojs .e-media,body.shot .e-media{position:static}