/* Phase 4: Our Story, Quality, Applications. Builds on site.css, home.css and catalogue.css (page hero, cards). */

/* ---------------------------------------------------------------- Our Story */
.il-st-intro__grid { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
@media (min-width: 900px) { .il-st-intro__grid { grid-template-columns: 1.15fr .85fr; } }
.il-st-lead { font: 500 var(--wp--preset--font-size--lead)/1.55 var(--wp--preset--font-family--body); color: var(--il-silver); }
.il-st-intro__fig { aspect-ratio: 4 / 5; max-height: 32rem; }
@media (min-width: 900px) { .il-st-intro__fig { margin-top: -6rem; } }
.il-st-note { font-size: .92rem; color: var(--il-ti); border-left: 2px solid var(--il-red); padding-left: .9rem; }

/* Vision / Mission: two machined plates, the mission carries the client's dictum. */
.il-vm { background: radial-gradient(60rem 28rem at 80% 30%, rgba(125, 14, 25, .35), transparent), var(--il-bg); }
.il-vm__grid { display: grid; gap: 1.25rem; }
@media (min-width: 900px) { .il-vm__grid { grid-template-columns: .9fr 1.1fr; align-items: stretch; } .il-vm__plate--vision { margin-top: 4rem; } }
.il-vm__plate { position: relative; overflow: hidden; padding: clamp(1.5rem, 4vw, 3rem); border-radius: 14px; border: 1px solid var(--il-line); border-top-color: rgba(255, 255, 255, .2); background: linear-gradient(160deg, #22262c, var(--il-raised) 55%, var(--il-bg)); box-shadow: var(--wp--custom--shadow--lift); }
.il-vm__plate--mission { background: linear-gradient(150deg, rgba(125, 14, 25, .55), rgba(23, 25, 29, .95) 60%), var(--il-raised); }
.il-vm__k { margin: 0 0 1.25rem; font: 600 1rem var(--il-display); letter-spacing: .22em; text-transform: uppercase; color: var(--il-red-text); }
.il-vm__text { margin: 0; font: 600 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.35 var(--il-display); color: #fff; max-width: 34ch; }
.il-vm__dictum { margin: 0 0 1.25rem; font: 700 clamp(3rem, 1.6rem + 6vw, 6.5rem)/.88 var(--il-display); text-transform: uppercase; letter-spacing: -.005em; color: #fff; }
.js .il-vm__dictum { clip-path: inset(0 100% 0 0); transition: clip-path 1.4s var(--il-ease) .25s; }
.js .il-vm__plate.is-in .il-vm__dictum { clip-path: inset(0); }
.il-vm__plate--mission p:not(.il-vm__dictum, .il-vm__text) { color: var(--il-silver); max-width: 44ch; }

/* Core values: large rows; burgundy wipe on hover. */
.il-cv__grid { display: grid; gap: 2rem; }
@media (min-width: 900px) { .il-cv__grid { grid-template-columns: .8fr 1.2fr; align-items: start; } .il-cv__side { position: sticky; top: 6rem; } }
.il-cv__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--il-line); }
.il-cv__list li { position: relative; margin: 0; padding: clamp(1rem, 2.5vw, 1.6rem) .25rem; border-bottom: 1px solid var(--il-line); font: 700 clamp(2rem, 1.2rem + 3.6vw, 4.25rem)/1 var(--il-display); text-transform: uppercase; color: #fff; isolation: isolate; }
.il-cv__list li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(125, 14, 25, .55), transparent); transform: scaleX(0); transform-origin: left; transition: transform var(--wp--custom--motion--slow) var(--il-ease); }
.il-cv__list li:hover::before { transform: scaleX(1); }

/* Guiding principles (light section). */
.il-gp__intro { margin: 0; flex: 1 1 18rem; }
.il-gp__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); border-top: 2px solid var(--il-bg); }
.il-gp__list li { margin: 0; padding: 1.5rem 1.5rem 1.75rem 0; border-bottom: 1px solid #cfcac0; }
.il-gp__list h3 { margin: 0 0 .5rem; font: 700 1.45rem/1.05 var(--il-display); text-transform: uppercase; }
.il-gp__list p { margin: 0; font-size: .98rem; }

/* ------------------------------------------------------------------ Quality */
.il-qm__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 900px) { .il-qm__grid { grid-template-columns: .85fr 1.15fr; } .il-qm__fig { position: sticky; top: 6rem; } }
.il-qm__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .75rem; }
.il-qm__list li { margin: 0; padding: 1.1rem 1.25rem; border: 1px solid var(--il-line); border-radius: 12px; background: linear-gradient(100deg, rgba(42, 46, 52, .55), transparent); }
.il-qm__list h3 { margin: 0 0 .3rem; font: 700 1.3rem var(--il-display); text-transform: uppercase; letter-spacing: .02em; }
.il-qm__list p { margin: 0; color: var(--il-silver); font-size: .97rem; }

.il-sm__intro, .il-amx__intro, .il-tdocs__intro { margin: 0; flex: 1 1 22rem; }
.il-sm__scroll, .il-amx__scroll { position: relative; overflow-x: auto; border: 1px solid var(--il-line); border-top-color: rgba(255, 255, 255, .18); border-radius: 12px; background: linear-gradient(170deg, #1d2025, var(--il-bg)); }
.il-sm__table, .il-amx__table { width: 100%; border-collapse: collapse; }
.il-sm__table caption, .il-amx__table caption { caption-side: bottom; padding: .9rem 1.1rem; text-align: left; font-size: .88rem; color: var(--il-ti); border-top: 1px solid var(--il-line); }
.il-sm__table th, .il-sm__table td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid rgba(255, 255, 255, .06); vertical-align: middle; }
.il-sm__table thead th { font: 600 .9rem var(--il-display); letter-spacing: .18em; text-transform: uppercase; color: var(--il-red-text); border-bottom-color: var(--il-line); }
.il-sm__table tbody th { min-width: min(15rem, 44vw); font-weight: 600; }
.il-sm__table tbody th a { display: inline-block; padding-block: .3rem; color: #fff; text-decoration: none; }
.il-sm__table tbody th a:hover { color: var(--il-red-text); }
.il-sm__table small { display: block; color: var(--il-ti); font-weight: 400; }
.il-sm__val { display: inline-block; padding: .25rem .6rem; border: 1px solid rgba(255, 255, 255, .25); border-radius: 3px; font: 700 1.05rem var(--il-display); letter-spacing: .05em; white-space: nowrap; color: #fff; }
.il-sm__none { color: var(--il-line); }
.il-sm__table tbody tr { transition: background var(--wp--custom--motion--base); }
.il-sm__table tbody tr:hover { background: rgba(125, 14, 25, .18); }
.il-sm__bodies { display: grid; gap: 1px; margin: 1.5rem 0 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); background: var(--il-line); border: 1px solid var(--il-line); border-radius: 12px; overflow: hidden; }
.il-sm__bodies div { padding: 1.25rem; background: var(--il-bg); }
.il-sm__bodies dt { font: 700 1.6rem var(--il-display); letter-spacing: .06em; color: #fff; }
.il-sm__bodies dd { margin: .35rem 0 0; color: var(--il-ti); font-size: .93rem; }

.il-qc { min-height: 0; }
.il-qc__grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 960px) { .il-qc__grid { grid-template-columns: 1fr 1fr; } }
.il-qc__cards { display: grid; gap: 1rem; }
.il-certs { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.il-certs li, .il-certs__empty, .il-oems { margin: 0; padding: 1.4rem; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .16); background: rgba(12, 13, 15, .72); backdrop-filter: blur(10px); }
.il-certs__empty { border-style: dashed; }
.il-certs h3, .il-certs__empty h3, .il-oems h3 { margin: 0 0 .4rem; font: 700 1.35rem var(--il-display); text-transform: uppercase; }
.il-certs__empty p, .il-oems p, .il-certs p { color: var(--il-silver); }
.il-oems ul { margin: 0; padding-left: 1.1rem; }

.il-tdl { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--il-bg); }
.il-tdl li { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0; padding: 1rem 0; border-bottom: 1px solid #cfcac0; }
.il-tdl__name { padding-block: .35rem; flex: 1 1 18rem; font: 700 1.2rem/1.15 var(--il-display); text-transform: uppercase; color: var(--il-bg); text-decoration: none; }
.il-tdl__name:hover { color: var(--il-burg); }
.il-tdoc { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1rem; border: 1px solid var(--il-burg); border-radius: 3px; font: 700 .95rem var(--il-display); letter-spacing: .1em; text-transform: uppercase; color: var(--il-burg); text-decoration: none; transition: background var(--wp--custom--motion--base), color var(--wp--custom--motion--base); }
.il-tdoc:hover, .il-tdoc--file { background: var(--il-burg); color: #fff; }

/* ------------------------------------------------------------- Applications */
.il-apx__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 700px) { .il-apx__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) {
	.il-apx__grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 17rem; }
	.il-apx__tile:nth-child(1) { grid-column: span 4; grid-row: span 2; }
	.il-apx__tile:nth-child(2), .il-apx__tile:nth-child(3) { grid-column: span 2; }
	.il-apx__tile:nth-child(4), .il-apx__tile:nth-child(5) { grid-column: span 3; }
	.il-apx__tile:nth-child(6) { grid-column: span 2; }
	.il-apx__tile:nth-child(7) { grid-column: span 4; }
}
.il-apx__tile { position: relative; isolation: isolate; overflow: hidden; min-height: 17rem; margin: 0; border-radius: 14px; border: 1px solid var(--il-line); display: flex; align-items: flex-end; }
.il-apx__ph { position: absolute; inset: -8% 0; z-index: -2; translate: 0 var(--par, 0px); }
.il-apx__ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--il-ease); }
.il-apx__tile:hover .il-apx__ph img { transform: scale(1.06); }
.il-apx__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(12, 13, 15, .96) 10%, rgba(12, 13, 15, .35) 70%, rgba(12, 13, 15, .15)); }
.il-apx__tile:hover { border-color: var(--il-red); box-shadow: var(--wp--custom--shadow--glow); }
.il-apx__txt { padding: clamp(1.1rem, 2.5vw, 1.75rem); }
.il-apx__txt h3 { margin: 0 0 .4rem; font: 700 clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem)/1 var(--il-display); text-transform: uppercase; }
.il-apx__tile:first-child h3 { font-size: clamp(2rem, 1.4rem + 2.5vw, 3.5rem); }
.il-apx__txt h3 a { color: #fff; text-decoration: none; }
.il-apx__txt h3 a::after { content: ""; position: absolute; inset: 0; }
.il-apx__txt p { margin: 0 0 .8rem; color: var(--il-silver); max-width: 40ch; font-size: .97rem; }
.il-apx__n { font: 600 .9rem var(--il-display); letter-spacing: .14em; text-transform: uppercase; color: var(--il-red-text); }
.il-apx__tile--soon { border-style: dashed; }
.il-apx__tile--soon .il-apx__ph img { filter: grayscale(1) brightness(.7); }
.il-apx__tile--soon .il-apx__n { color: var(--il-ti); }

/* Application matrix: rows = uses, columns = products. Row/column highlight follows the pointer and keyboard focus. */
.il-amx__table th, .il-amx__table td { padding: .7rem .6rem; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.il-amx__table thead th { vertical-align: bottom; min-width: 6.5rem; border-bottom-color: var(--il-line); }
.il-amx__table thead a { display: block; color: #fff; text-decoration: none; }
.il-amx__sae { display: block; font: 700 1.5rem/1 var(--il-display); }
.il-amx__table thead small { display: block; margin-top: .2rem; font: 500 .78rem var(--il-display); letter-spacing: .1em; text-transform: uppercase; color: var(--il-ti); }
.il-amx__table thead a:hover .il-amx__sae { color: var(--il-red-text); }
.il-amx__table tbody th { text-align: left; min-width: 12rem; font: 700 1.1rem var(--il-display); letter-spacing: .03em; text-transform: uppercase; }
.il-amx__table tbody th a { color: var(--il-silver); text-decoration: none; display: inline-block; padding-block: .5rem; }
.il-amx__table tbody tr:hover, .il-amx__table tbody tr:focus-within { background: linear-gradient(90deg, rgba(125, 14, 25, .35), rgba(125, 14, 25, .08)); }
.il-amx__table tbody tr:hover th a, .il-amx__table tbody tr:focus-within th a { color: #fff; }
.il-amx__dot { display: inline-block; width: 18px; height: 18px; border-radius: 50%; vertical-align: middle; }
.is-listed .il-amx__dot, .il-amx__dot.is-listed { background: radial-gradient(circle at 35% 30%, #ff7a80, var(--il-red) 55%, var(--il-burg)); box-shadow: 0 0 0 4px rgba(227, 15, 26, .15), 0 0 16px rgba(227, 15, 26, .55); }
.is-possible .il-amx__dot, .il-amx__dot.is-possible { box-shadow: inset 0 0 0 2px var(--il-ti); }
.is-none .il-amx__dot { width: 6px; height: 6px; background: var(--il-line); }
.js .il-amx__scroll:not(.is-in) .is-listed .il-amx__dot { transform: scale(0); }
.il-amx__scroll .is-listed .il-amx__dot { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.il-amx__scroll.is-in tbody tr:nth-child(2) .il-amx__dot { transition-delay: 80ms; }
.il-amx__scroll.is-in tbody tr:nth-child(3) .il-amx__dot { transition-delay: 160ms; }
.il-amx__scroll.is-in tbody tr:nth-child(4) .il-amx__dot { transition-delay: 240ms; }
.il-amx__scroll.is-in tbody tr:nth-child(5) .il-amx__dot { transition-delay: 320ms; }
.il-amx__scroll.is-in tbody tr:nth-child(6) .il-amx__dot { transition-delay: 400ms; }
.il-amx__key { display: flex; flex-wrap: wrap; gap: .75rem 2rem; list-style: none; margin: 1rem 0 0; padding: 0; font-size: .92rem; color: var(--il-silver); }
.il-amx__key li { display: flex; align-items: center; gap: .6rem; }

.il-cond__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.il-cond__list a { display: inline-flex; align-items: center; gap: .75rem; min-height: 48px; padding: 0 .6rem 0 1.1rem; border: 1px solid var(--il-line); border-radius: 99px; color: var(--il-paper); text-decoration: none; font: 600 1.05rem var(--il-display); letter-spacing: .05em; text-transform: uppercase; transition: border-color var(--wp--custom--motion--base), background var(--wp--custom--motion--base); }
.il-cond__list b { display: grid; place-items: center; min-width: 2rem; height: 2rem; border-radius: 99px; background: var(--il-raised); color: var(--il-red-text); font-size: .95rem; }
.il-cond__list a:hover { border-color: var(--il-red); background: rgba(125, 14, 25, .25); }

/* Application detail */
.il-ad__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 1000px) { .il-ad__grid { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; } .il-ad__side { position: sticky; top: 6rem; } }
.il-ad__main > header { margin-bottom: 1.5rem; }
.il-ad__possible { margin-top: 2.5rem; }
.il-ad__possible h3 { margin: 0 0 .3rem; font: 700 1.5rem var(--il-display); text-transform: uppercase; }
.il-ad__possible .il-muted { margin: 0 0 1rem; }
.il-ad__side { display: grid; gap: 1rem; }
.il-ad__quote { padding: 1.4rem; border-radius: 12px; border: 1px solid var(--il-line); border-top-color: rgba(255, 255, 255, .18); background: linear-gradient(165deg, rgba(125, 14, 25, .35), var(--il-raised) 55%); }
.il-ad__quote h3 { margin: 0 0 1rem; font: 600 .95rem var(--il-display); letter-spacing: .2em; text-transform: uppercase; color: var(--il-red-text); }
.il-ad__quote ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.il-ad__quote li { margin: 0; }
.il-ad__quote p { margin: 0; font: 600 1.15rem/1.35 var(--il-display); color: #fff; }
.il-ad__quote small { color: var(--il-ti); }
.il-ad__next { display: grid; gap: .75rem; }
.il-ad__next .il-btn { white-space: normal; text-align: center; }
.il-ad__more { background: var(--il-raised); }
.il-ad__links { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0 2rem; border-top: 1px solid var(--il-line); }
.il-ad__links a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 56px; border-bottom: 1px solid var(--il-line); font: 700 1.25rem var(--il-display); text-transform: uppercase; color: var(--il-paper); text-decoration: none; }
.il-ad__links a:hover { color: var(--il-red-text); }
.il-ad__links .il-icon { transition: translate var(--wp--custom--motion--base) var(--il-ease); }
.il-ad__links a:hover .il-icon { translate: 4px 0; }

@media (prefers-reduced-motion: reduce) {
	.js .il-vm__dictum { clip-path: none; transition: none; }
	.js .il-amx__scroll:not(.is-in) .is-listed .il-amx__dot { transform: none; }
	.il-cv__list li::before, .il-apx__ph img { transition: none; }
	.il-apx__tile:hover .il-apx__ph img { transform: none; }
}

/* Phase 7: depth on the Vision/Mission plates and quality points; matrix column follows the pointer. */
.il-vm__plate { transition: transform .35s var(--il-ease), box-shadow .3s, border-color .3s; }
.il-vm__plate:hover { border-color: rgba(255, 90, 98, .4); box-shadow: var(--wp--custom--shadow--lift), 0 0 50px -18px rgba(227, 15, 26, .45); }
.il-qm__list li { transition: transform var(--wp--custom--motion--base) var(--il-ease), border-color var(--wp--custom--motion--base), background var(--wp--custom--motion--base); }
.il-qm__list li:hover { transform: translateX(4px); border-color: rgba(255, 90, 98, .45); background: linear-gradient(100deg, rgba(125, 14, 25, .3), transparent); }
.il-amx__table td:hover, .il-amx__table th[scope=col]:hover { background: rgba(255, 255, 255, .04); }
.il-cond__list a { transition: border-color var(--wp--custom--motion--base), background var(--wp--custom--motion--base), transform var(--wp--custom--motion--base) var(--il-ease); }
.il-cond__list a:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
	.il-qm__list li:hover, .il-cond__list a:hover { transform: none; }
}