
/* ============================================================
   IVEON — INDUSTRY DETAIL SYSTEM / LOT 5
   White + grey dominant. Photography/video carries color.
   Black is a restrained punctuation only.
   ============================================================ */

.id-page{overflow:hidden;background:#fff;color:#111}
.id-page .wrap{position:relative}
.id-kicker{margin:0 0 24px;font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#55554f}
.id-title-xl{margin:0;max-width:1380px;font-size:clamp(58px,8.4vw,142px);line-height:.89;letter-spacing:-.064em;font-weight:500}
.id-title{margin:0;max-width:1240px;font-size:clamp(46px,6vw,102px);line-height:.94;letter-spacing:-.057em;font-weight:500}
.id-title-sm{margin:0;max-width:980px;font-size:clamp(36px,4.5vw,76px);line-height:.99;letter-spacing:-.049em;font-weight:500}
.id-lede{max-width:760px;color:#51514b;font-size:clamp(19px,1.5vw,25px);line-height:1.55;letter-spacing:-.016em}
.id-copy{max-width:790px;color:#50504a;font-size:clamp(17px,1.28vw,21px);line-height:1.68;letter-spacing:-.01em}
.id-copy p{margin:0 0 25px}.id-copy p:last-child{margin-bottom:0}
.id-long{max-width:980px;margin-left:auto}
.id-long p{margin:0 0 29px;color:#44443f;font-size:clamp(18px,1.38vw,23px);line-height:1.72;letter-spacing:-.012em}
.id-long p:first-child{font-size:clamp(24px,1.95vw,33px);line-height:1.48;color:#151514}
.id-page .link{display:inline-flex;align-items:center;gap:10px}

.id-hero{position:relative;min-height:92svh;padding:calc(var(--header) + 78px) 0 80px;display:flex;align-items:flex-end;background:#fff}
.id-hero .eyebrow{margin-bottom:34px}
.id-hero-bottom{display:grid;grid-template-columns:minmax(320px,760px) auto;gap:70px;align-items:end;margin-top:50px}
.id-hero-bottom p{margin:0;max-width:760px;color:#4d4d48;font-size:clamp(19px,1.55vw,25px);line-height:1.55}
.id-hero.paper{background:var(--paper)}
.id-hero.image{min-height:100svh;color:#fff;background:#111}
.id-hero.image .id-hero-media{position:absolute;inset:0;background:center/cover no-repeat;filter:saturate(.9)}
.id-hero.image:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.14),rgba(0,0,0,.58))}
.id-hero.image .wrap{z-index:2}
.id-hero.image .id-hero-bottom p{color:#f0f0ec}
.id-hero.split{padding:0;display:grid;grid-template-columns:1.02fr .98fr;min-height:100svh;background:#fff}
.id-hero.split .id-hero-copy{padding:calc(var(--header) + 86px) var(--gutter) 82px;display:flex;flex-direction:column;justify-content:flex-end}
.id-hero.split .id-title-xl{font-size:clamp(56px,7vw,118px)}
.id-hero.split .id-hero-copy .id-lede{margin-top:38px}
.id-hero.split .id-hero-media{min-height:100svh;background:center/cover no-repeat}
.id-hero.editorial{align-items:center;padding-top:calc(var(--header) + 70px)}
.id-hero.editorial .id-title-xl{max-width:1450px}
.id-hero.editorial .id-hero-bottom{margin-top:72px}

.id-section{padding:clamp(100px,11vw,180px) 0;background:#fff}
.id-section.paper{background:var(--paper)}
.id-section.grey{background:#e8e8e4}
.id-intro{display:grid;grid-template-columns:.58fr 1.42fr;gap:9vw;align-items:start}
.id-intro .id-long{margin-top:3px}

.id-media{position:relative;min-height:74svh;background:center/cover no-repeat;color:#fff}
.id-media.tall{min-height:86svh}
.id-media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.46))}
.id-media .wrap{position:absolute;z-index:2;left:0;right:0;bottom:42px}
.id-media-caption{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px;align-items:end}
.id-media-caption p{margin:0;max-width:690px;font-size:18px;line-height:1.58;color:#f0f0eb}
.id-media .id-kicker{color:#fff;margin:0}

.id-split{display:grid;grid-template-columns:1fr 1fr;min-height:80svh;background:#fff}
.id-split.reverse .id-split-media{order:2}
.id-split.reverse .id-split-copy{order:1}
.id-split-media{min-height:620px;background:center/cover no-repeat}
.id-split-copy{padding:clamp(78px,8vw,135px) clamp(44px,6vw,105px);display:flex;flex-direction:column;justify-content:center;background:var(--paper)}
.id-split-copy.white{background:#fff}
.id-split-copy.grey{background:#e8e8e4}
.id-split-copy .id-copy{margin-top:36px}
.id-split-copy .link{margin-top:38px;align-self:flex-start}

.id-index{margin-top:72px;border-top:1px solid var(--line)}
.id-index-row{display:grid;grid-template-columns:75px minmax(0,1fr) minmax(280px,.72fr);gap:36px;padding:34px 0;border-bottom:1px solid var(--line);align-items:start}
.id-index-row .num{font-size:10px;font-weight:800;letter-spacing:.15em;color:#85857f}
.id-index-row h3{margin:0;font-size:clamp(29px,3vw,50px);line-height:1.03;letter-spacing:-.043em;font-weight:500}
.id-index-row p{margin:4px 0 0;color:#65655f;font-size:15px;line-height:1.6}

.id-matrix{display:grid;grid-template-columns:repeat(3,1fr);margin-top:70px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.id-module{min-height:315px;padding:31px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between}
.id-module.wide{grid-column:span 2}
.id-module .meta{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7c7c76}
.id-module h3{margin:56px 0 18px;max-width:490px;font-size:clamp(29px,2.9vw,49px);line-height:1.03;letter-spacing:-.043em;font-weight:500}
.id-module p{margin:0;max-width:500px;color:#5f5f59;font-size:15px;line-height:1.6}
.id-module .link{margin-top:28px;align-self:flex-start}

.id-flow{display:grid;grid-template-columns:repeat(4,1fr);margin-top:72px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.id-flow-step{min-height:270px;padding:29px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between}
.id-flow-step span{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#85857f}
.id-flow-step h3{margin:48px 0 16px;font-size:clamp(27px,2.6vw,43px);line-height:1.03;letter-spacing:-.04em;font-weight:500}
.id-flow-step p{margin:0;color:#62625c;font-size:14px;line-height:1.55}

.id-arch{margin-top:70px;border:1px solid var(--line);background:#fff}
.id-arch-row{display:grid;grid-template-columns:190px 1fr;min-height:120px;border-bottom:1px solid var(--line)}
.id-arch-row:last-child{border-bottom:0}
.id-arch-label{padding:27px;border-right:1px solid var(--line);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#75756f}
.id-arch-nodes{padding:22px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.id-node{padding:12px 15px;border:1px solid #c8c8c2;background:#f7f7f4;font-size:13px}
.id-node.dark{background:#1a1a18;border-color:#1a1a18;color:#fff}

.id-dual{display:grid;grid-template-columns:1fr 1fr;margin-top:70px;border-top:1px solid var(--line);border-left:1px solid var(--line)}
.id-dual-block{min-height:360px;padding:38px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.id-dual-block .meta{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7c7c76}
.id-dual-block h3{margin:62px 0 20px;font-size:clamp(33px,3.4vw,57px);line-height:1;letter-spacing:-.047em;font-weight:500}
.id-dual-block p{margin:0;max-width:580px;color:#5e5e58;font-size:16px;line-height:1.62}

.id-rail{display:grid;grid-template-columns:.67fr 1.33fr;gap:9vw;align-items:start}
.id-rail-list{border-top:1px solid var(--line)}
.id-rail-item{padding:30px 0;border-bottom:1px solid var(--line)}
.id-rail-item span{display:block;margin-bottom:13px;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7d7d77}
.id-rail-item h3{margin:0 0 13px;font-size:clamp(28px,2.7vw,46px);line-height:1.04;letter-spacing:-.04em;font-weight:500}
.id-rail-item p{margin:0;max-width:670px;color:#62625c;font-size:15px;line-height:1.6}
.id-rail-item .link{margin-top:20px}

.id-band{padding:72px 0;background:#171715;color:#fff}
.id-band-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:80px;align-items:center}
.id-band .id-kicker{color:#e9e9e5}
.id-band p{max-width:760px;margin:26px 0 0;color:#c6c6bf;font-size:17px;line-height:1.62}

.id-quote{padding:clamp(105px,12vw,190px) 0;background:#fff}
.id-quote blockquote{margin:0;max-width:1450px;font-size:clamp(44px,6vw,99px);line-height:.96;letter-spacing:-.055em;font-weight:500}
.id-quote .id-kicker{margin-bottom:68px}

.id-proof{padding:clamp(100px,11vw,170px) 0;background:#fff}
.id-proof-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:8vw;align-items:start}
.id-proof-copy .id-title-sm{margin:22px 0 32px}
.id-proof-copy p{max-width:670px;margin:0;color:#55554f;font-size:17px;line-height:1.62}
.id-proof-copy .link{margin-top:35px}
.id-proof-panel{min-height:450px;padding:42px;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between}
.id-proof-panel .meta{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#777771}
.id-proof-panel h3{margin:0;max-width:760px;font-size:clamp(37px,4vw,66px);line-height:1;letter-spacing:-.049em;font-weight:500}
.id-proof-panel p{margin:0;max-width:620px;color:#5c5c56;font-size:16px;line-height:1.58}

.id-final{min-height:64svh;padding:clamp(105px,11vw,170px) 0;display:flex;align-items:center;background:var(--paper)}
.id-final.white{background:#fff;border-top:1px solid var(--line)}
.id-final .id-title{margin:22px 0 50px}
.id-final-bottom{display:grid;grid-template-columns:minmax(300px,700px) auto;gap:70px;align-items:end}
.id-final-bottom p{margin:0;color:#5c5c56;font-size:18px;line-height:1.6}

@media(max-width:1050px){
  .id-hero-bottom,.id-intro,.id-media-caption,.id-rail,.id-band-grid,.id-proof-grid,.id-final-bottom{grid-template-columns:1fr}
  .id-hero.split{grid-template-columns:1fr}
  .id-hero.split .id-hero-media{min-height:62svh;order:-1}
  .id-split{grid-template-columns:1fr}
  .id-split.reverse .id-split-media,.id-split.reverse .id-split-copy{order:initial}
  .id-flow{grid-template-columns:repeat(2,1fr)}
  .id-matrix{grid-template-columns:1fr 1fr}.id-module.wide{grid-column:span 2}
  .id-index-row{grid-template-columns:60px 1fr}.id-index-row p{grid-column:2}
}
@media(max-width:720px){
  .id-hero{min-height:calc(90svh - 72px);padding:calc(var(--header) + 60px) 0 58px}
  .id-hero.image{min-height:calc(100svh - 72px)}
  .id-hero.split .id-hero-copy{padding:92px 22px 72px}
  .id-hero.split .id-hero-media{min-height:54svh}
  .id-title-xl{font-size:clamp(55px,16vw,82px)}
  .id-hero-bottom{margin-top:34px;gap:28px}.id-hero-bottom p{font-size:18px}
  .id-section{padding:94px 0}.id-intro{gap:58px}
  .id-long p{font-size:18px}.id-long p:first-child{font-size:23px}
  .id-media{min-height:60svh}.id-media.tall{min-height:68svh}.id-media .wrap{bottom:26px}.id-media-caption{gap:16px}
  .id-split-media{min-height:54svh}.id-split-copy{padding:80px 22px}
  .id-flow,.id-matrix,.id-dual{grid-template-columns:1fr}.id-module.wide{grid-column:auto}
  .id-flow-step{min-height:220px}.id-module{min-height:275px}
  .id-index-row{grid-template-columns:34px 1fr;gap:18px;padding:29px 0}.id-index-row p{grid-column:2}
  .id-arch-row{grid-template-columns:1fr}.id-arch-label{border-right:0;border-bottom:1px solid var(--line)}
  .id-proof-panel{min-height:390px;padding:30px}
  .id-final{min-height:0;padding:96px 0}
  .id-quote{padding:96px 0}.id-quote .id-kicker{margin-bottom:52px}
}
