/* ==========================================================================
   JMI GROUP — global + homepage
   Signature element: the gold hairline rail with node dots.
   ========================================================================== */

:root{
  --green:#1F5B47;
  --green-deep:#173F32;
  --brand-accent:#C9A24A;
  --ivory:#F2EFE6;
  --stone:#E6E2D5;
  --charcoal:#2B2B28;
  --ink:#1A1A18;
  --muted:#3F3F39;
  --quiet:#6B6B62;
  --pad:48px;
  --font-display:'Prata',Georgia,'Times New Roman',serif;
  --font-body:'Lato',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.6,.2,1);
  --nav-h:88px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;line-height:1.65;-webkit-font-smoothing:antialiased}
body.locked,bodyimg{max-width:100%;height:auto;display:block}

.wrap{max-width:1280px;margin:0 auto;padding:0 var(--pad)}
section{padding:120px 0}

h1,h2,h3,h4{margin:0;line-height:1.15;letter-spacing:.01em;font-weight:400}
p{margin:0}
.jmi-home p + p{margin-top:20px}

:focus-visible{outline:2px solid var(--brand-accent);outline-offset:4px}

/* ── Placeholder labels. Delete this block once every image is live. ── */
.needed{background:rgba(201,162,74,.22);border-bottom:1px dashed var(--brand-accent);padding:0 4px}

/* ── Type ── */
.on-dark .eyebrow,.hero .eyebrow,.chapters .eyebrow,.history .eyebrow,.close .eyebrow{color:var(--brand-accent)}
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:#7A6224;margin:0}
.on-dark .eyebrow,.hero .eyebrow,.chapters .eyebrow,.history .eyebrow,.close .eyebrow{color:var(--brand-accent)}

/* ── Buttons ── */
.btns{display:flex;gap:14px;flex-wrap:wrap;margin-top:36px}
.btn{display:inline-block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  padding:16px 30px;border:1px solid currentColor;min-height:44px;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.btn-solid{background:var(--brand-accent);border-color:var(--brand-accent);color:var(--green-deep)}
.btn-solid:hover{background:transparent;color:var(--brand-accent)}
.btn-ghost{color:var(--ghost,var(--green))}
.btn-ghost:hover{background:var(--ghost-hb,var(--green));color:var(--ghost-hf,var(--ivory));
  border-color:var(--ghost-hb,var(--green))}
.hero .btn-ghost,.close .btn-ghost{color:var(--ivory)}
.hero .btn-ghost:hover,.close .btn-ghost:hover{background:var(--ivory);color:var(--green-deep);border-color:var(--ivory)}

/* ── Arrow links. No underline, weight plus arrow motion. ── */
.alink{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  display:inline-flex;align-items:center;gap:10px;color:var(--green);
  transition:color .3s var(--ease)}
.alink .ar{display:inline-block;transition:transform .35s var(--ease)}
.alink:hover .ar{transform:translateX(7px)}
.alink:hover{color:#7A6224}

/* ── Reveals ── */
.js .reveal{opacity:0;transform:translateY(22px)}
.js .reveal.is-visible{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* ==========================================================================
   01 HERO
   ========================================================================== */
.hero{position:relative;--ghost:var(--ivory);--ghost-hb:var(--ivory);--ghost-hf:var(--green-deep);min-height:92vh;display:flex;align-items:center;justify-content:center;
  padding:0;background:var(--green-deep);overflow:hidden}
.hero-media{position:absolute;inset:0}
.hero-media img,.hero-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-yt{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .6s var(--ease)}
.hero-yt.is-playing{opacity:1}
.hero-yt iframe{position:absolute;top:50%;left:50%;
  width:100vw;height:56.25vw;min-height:100vh;min-width:177.78vh;
  transform:translate(-50%,-50%) scale(1.15);border:0}
@media(max-width:768px){.hero-yt{display:none}}
@media(prefers-reduced-motion:reduce){.hero-yt{display:none}}
.hero-media::after{content:"";position:absolute;inset:0;z-index:2;
  background:radial-gradient(ellipse at 50% 50%,rgba(23,63,50,.30) 0%,rgba(23,63,50,.62) 58%,rgba(23,63,50,.86) 100%)}
.hero .eyebrow{font-size:clamp(11px,1.05vw,13px);letter-spacing:.26em;color:var(--brand-accent);
  margin-bottom:26px}
.hero-copy{position:relative;z-index:3;width:100%;max-width:1280px;margin:0 auto;
  padding:0 var(--pad);text-align:center;display:flex;flex-direction:column;align-items:center}
.hero h1{font-size:clamp(34px,5.4vw,72px);color:var(--ivory);max-width:none;margin-top:0;
  display:flex;flex-direction:column;gap:.10em}
.hero h1 span{display:block}
.hero .btns{justify-content:center}

/* ==========================================================================
   02 WHO WE ARE
   ========================================================================== */
.premise{background:var(--ivory);color:var(--ink)}
.premise-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.premise h2{font-size:clamp(28px,3.2vw,42px);max-width:18ch;margin-top:18px}
.premise p{font-size:17px;max-width:52ch;color:var(--muted)}
.premise-media{position:relative;margin:0;overflow:hidden}
.premise-media img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}

/* ==========================================================================
   03 WHAT WE DO
   ========================================================================== */
.chapters{--ghost:var(--ivory);--ghost-hb:var(--ivory);--ghost-hf:var(--green-deep);background:var(--green);color:var(--ivory);padding:130px 0}
.chapters .eyebrow{color:var(--brand-accent)}
.chapters h2{font-size:clamp(28px,3.4vw,44px);color:var(--ivory);max-width:20ch;margin-top:18px}
.chlist{margin-top:70px;border-top:1px solid rgba(242,239,230,.22)}
.chapter{position:relative;display:grid;grid-template-columns:132px 1.05fr 1.75fr;gap:44px;
  align-items:start;padding:44px 0 44px 34px;border-bottom:1px solid rgba(242,239,230,.22);
  transition:transform .45s var(--ease)}
.chapter::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--brand-accent);transform:scaleY(0);transform-origin:top;
  transition:transform .5s var(--ease)}
.chapter:hover{transform:translateX(16px)}
.chapter:hover::before{transform:scaleY(1)}
.chnum{font-family:var(--font-display);font-size:46px;line-height:1;color:var(--brand-accent);
  transition:opacity .4s var(--ease)}
.chapter:hover .chnum{opacity:.55}
.chapter h3{font-size:30px;color:var(--ivory)}
.chapter p{font-size:16px;color:rgba(242,239,230,.82);max-width:56ch}
.chlink{display:inline-flex;align-items:center;gap:10px;margin-top:20px;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--brand-accent);transition:color .3s var(--ease)}
.chlink .ar{display:inline-block;transition:transform .35s var(--ease)}
.chapter:hover .chlink{color:var(--ivory)}
.chapter:hover .chlink .ar{transform:translateX(7px)}

/* ==========================================================================
   04 THE WORK
   ========================================================================== */
.work{background:var(--ivory);color:var(--ink)}
.work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.work-head h2{font-size:clamp(28px,3.2vw,42px);max-width:16ch;margin-top:18px}
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px;margin-top:56px}
/* The work cards are buttons now, since the projects they open have no pages
   of their own. A button carries a default surface colour that background:none
   alone does not always clear, which showed as a grey block behind the title.
   appearance:none plus an explicit transparent colour removes it. */
.card{grid-column:span 4;display:block;color:inherit;width:100%;padding:0;border:0;
  -webkit-appearance:none;appearance:none;background:transparent;background-color:transparent;
  text-align:left;font-family:inherit;font-size:inherit;line-height:inherit;cursor:pointer}
.card.wide{grid-column:span 6}
.card-media{position:relative;display:block;overflow:hidden}
.card-media img{width:100%;height:320px;object-fit:cover;transition:transform .7s var(--ease)}
.card.wide .card-media img{height:400px}
.card:hover .card-media img,.card:focus-visible .card-media img{transform:scale(1.05)}
.card-veil{position:absolute;inset:0;opacity:0;transition:opacity .45s var(--ease);
  background:linear-gradient(180deg,rgba(23,63,50,0) 40%,rgba(23,63,50,.78) 100%)}
.card:hover .card-veil,.card:focus-visible .card-veil{opacity:1}
.card-cue{position:absolute;left:24px;bottom:22px;z-index:5;color:var(--brand-accent);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;font-weight:700;display:flex;align-items:center;gap:10px;
  opacity:0;transform:translateY(12px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.card:hover .card-cue,.card:focus-visible .card-cue{opacity:1;transform:none}
/* On hover the text block fills deep evergreen and the type goes light, so the
   card reads as light on dark against the ivory page. Applies to all five
   cards, so the section stays consistent. */
.card-body{display:block;margin-top:18px;padding:16px 18px 18px;
  background:transparent;transition:background .4s var(--ease)}
.card:hover .card-body,.card:focus-visible .card-body{background:var(--green-deep)}
.card h3{font-size:21px;margin:0;color:var(--ink);transition:color .3s var(--ease)}
.card:hover h3,.card:focus-visible h3{color:var(--ivory)}
.card .meta{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--quiet);
  margin-top:8px;transition:color .3s var(--ease)}
.card:hover .meta,.card:focus-visible .meta{color:var(--brand-accent)}

/* ==========================================================================
   05 HOW WE LEARNED THIS COUNTY
   ========================================================================== */
.history{--ghost:var(--ivory);--ghost-hb:var(--ivory);--ghost-hf:var(--green-deep);background:var(--green-deep);color:var(--ivory);padding:104px 0}
.history h2{font-size:clamp(28px,3.2vw,42px);color:var(--ivory);max-width:26ch;margin-top:18px}
.history-top{display:grid;grid-template-columns:1.15fr .85fr;gap:80px;align-items:center}
.history p{color:rgba(242,239,230,.85);font-size:17px;max-width:58ch}
.history-media{position:relative;margin:0;overflow:hidden}
.history-media img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;transition:transform 1.2s var(--ease)}
.history-media:hover img{transform:scale(1.04)}
.history-cap{font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(242,239,230,.55);margin-top:14px}

/* Signature element: gold rail with node dots */
.timeline{list-style:none;border-left:1px solid rgba(201,162,74,.5);padding-left:26px;margin:38px 0 0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:22px 36px}
.timeline li{position:relative}
.timeline .yr{font-family:var(--font-display);font-size:18px;color:var(--brand-accent);display:block}
.timeline .txt{color:rgba(242,239,230,.8);font-size:14px}

/* ==========================================================================
   06 THE COMPANY TODAY
   ========================================================================== */
.now{background:var(--stone);color:var(--ink)}
.now h2{font-size:clamp(28px,3.2vw,42px);max-width:20ch;margin-top:18px}
.now .lede{font-size:17px;max-width:62ch;margin-top:20px;color:var(--muted)}
.co-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:56px}
.co{background:#fff;padding-bottom:34px;border:1px solid rgba(31,91,71,.16);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)}
.co:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(23,63,50,.14);
  border-color:rgba(201,162,74,.7)}
.co-media{position:relative;display:block;overflow:hidden;border-bottom:1px solid rgba(31,91,71,.16)}
.co-media img{width:100%;height:220px;object-fit:cover;transition:transform .7s var(--ease)}
.co:hover .co-media img{transform:scale(1.06)}
.co-body{padding:30px 30px 0}
.co h3{font-size:24px}
.co .role{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#7A6224;
  font-weight:700;margin-top:10px}
.co p{font-size:15px;color:var(--muted)}
.co .alink{margin-top:20px}

/* ==========================================================================
   07 SAY HELLO
   ========================================================================== */
.close{--ghost:var(--ivory);--ghost-hb:var(--ivory);--ghost-hf:var(--green-deep);position:relative;padding:0;overflow:hidden;background:var(--green-deep)}
.close > img{width:100%;height:auto;aspect-ratio:1920/720;min-height:520px;max-height:78vh;object-fit:cover;transition:transform 1.4s var(--ease)}
.close:hover > img{transform:scale(1.03)}
.close::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,rgba(23,63,50,.72) 0%,rgba(23,63,50,.86) 100%)}
.close-over{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:0 var(--pad)}
.close-over h2{font-size:clamp(30px,3.6vw,50px);color:var(--ivory);max-width:18ch;margin-top:18px}
.close-over .btns{justify-content:center}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.jmi-footer{background:var(--green-deep);color:rgba(242,239,230,.72);padding:80px 0 40px;font-size:14px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px}
.f-brand img{width:150px;height:auto}
.f-nap{font-style:normal;margin-top:22px;line-height:1.9}
.f-nap a{color:var(--brand-accent)}
.f-col h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand-accent);
  font-family:var(--font-body) !important;font-weight:700 !important;margin-bottom:16px}
.f-col a{display:block;padding:7px 0;color:rgba(242,239,230,.72);
  transition:color .3s var(--ease),transform .3s var(--ease)}
.f-col a:hover{color:var(--brand-accent);transform:translateX(4px)}
.f-bottom{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-top:56px;
  padding-top:26px;border-top:1px solid rgba(242,239,230,.18);font-size:13px}
.f-legal a{color:rgba(242,239,230,.72);margin-right:18px}
.f-legal a:hover{color:var(--brand-accent)}

/* ==========================================================================
   PROJECT LIGHTBOX
   ========================================================================== */
.lb{position:fixed;inset:0;z-index:1000;display:none;padding:40px}
.lb.open{display:flex;align-items:center;justify-content:center}
.lb-scrim{position:absolute;inset:0;background:rgba(15,32,26,.86);opacity:0;
  transition:opacity .35s var(--ease)}
.lb.open .lb-scrim{opacity:1}
/* Centred and sized to its contents. It was pinned forty pixels from every edge
   in two columns, so both stretched to the viewport whatever they held. With a
   name and one button in the right column that left most of the panel empty.
   Image on top, name under it, action under that. */
/* The width is capped by the viewport height as well as by 840, so the image
   keeps its 16 by 10 and the name and the action still fit without scrolling.
   240px is the space the name, the button and the padding need. */
.lb-panel{position:relative;z-index:2;
  width:min(840px, calc((100vh - 240px) * 1.6), 100%);
  background:var(--ivory);
  border:1px solid rgba(201,162,74,.5);opacity:0;
  transform:translateY(18px) scale(.99);
  transition:transform .45s var(--ease),opacity .45s var(--ease)}
.lb.open .lb-panel{opacity:1;transform:none}
.lb-close{position:absolute;top:18px;right:18px;z-index:6;width:46px;height:46px;cursor:pointer;
  border:1px solid rgba(242,239,230,.5);background:rgba(23,63,50,.55);color:var(--ivory);font-size:20px;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease)}
.lb-close:hover{background:var(--brand-accent);color:var(--green-deep);border-color:var(--brand-accent)}
.lb-gallery{position:relative;background:var(--green-deep);display:block}
.lb-stage img{display:block;width:100%;height:100%;object-fit:cover}
.lb-stage{position:relative;aspect-ratio:16/10;overflow:hidden}
.lb-shot{position:absolute;inset:0;opacity:0;transition:opacity .5s var(--ease);
  background:var(--green-deep)}
.lb-shot img{width:100%;height:100%;object-fit:cover}
.lb-shot.active{opacity:1}
.lb-detail{padding:26px 30px 30px}
.lb-detail h3{font-size:clamp(24px,2.4vw,32px);margin:0;color:var(--green)}
.lb-detail .btns{margin-top:20px}

/* ==========================================================================
   ARCHIVE POPUP
   ========================================================================== */

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (min-width:769px) and (max-width:1024px){
  :root{--pad:32px}
          .premise-grid,.history-top{grid-template-columns:1fr;gap:48px}
  .co-grid{grid-template-columns:1fr 1fr}
  .card,.card.wide{grid-column:span 6}
  section{padding:96px 0}
}

@media (max-width:768px){
  :root{--pad:24px;--nav-h:74px}
  section{padding:80px 0}
  .hero{min-height:86vh}
  .hero h1{font-size:34px}
  .premise-grid,.history-top{grid-template-columns:1fr;gap:40px}
  .premise-media img,.history-media img{aspect-ratio:1/1;height:auto}
  .chapter{grid-template-columns:78px 1fr;gap:22px;padding:34px 0 34px 22px}
  .chapter > div:last-child{grid-column:2}
  .chnum{font-size:34px}
  .chapter h3{font-size:24px}
  .chapter:hover{transform:none}
  .work-grid{gap:20px}
  .card,.card.wide{grid-column:span 12}
  .card-media img,.card.wide .card-media img{height:260px}
  .timeline{grid-template-columns:1fr;margin-top:32px}
  .co-grid{grid-template-columns:1fr}
  .close > img{min-height:480px;max-height:none}
  .f-grid{grid-template-columns:1fr 1fr;gap:36px}
  .lb{padding:16px}
  .lb-panel{width:100%;max-height:calc(100vh - 32px)}
  .lb-detail{padding:22px 20px 26px}
}

@media (max-width:480px){
  .f-grid{grid-template-columns:1fr}
  .btns{flex-direction:column;align-items:stretch}
  .btn{text-align:center}
  .close > img{min-height:520px}
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important;animation:none !important}
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none}
  .card:hover .card-media img,.co:hover .co-media img,
  .history-media:hover img,.close:hover > img{transform:none}
}

@media (max-width:768px){
  .history h2 br{display:none}
}

@media (min-width:769px) and (max-width:1024px){
  .chapter{grid-template-columns:96px 1fr;gap:28px}
  .chapter > div:last-child{grid-column:2}
  .chnum{font-size:38px}
}