/* Trial 05: a restrained industrial editorial direction, with authentic photography. */
@font-face { font-family: 'Temco Sans'; src: url('assets/fonts/PretendardVariable.woff2') format('woff2'); font-weight: 45 920; font-style: normal; font-display: swap; }
@font-face { font-family: 'Temco Display'; src: url('assets/fonts/Barlow-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Temco Display'; src: url('assets/fonts/Barlow-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
:root { --blue: #123b65; --navy: #123451; --ink: #203348; --muted: #596b7c; --line: #d9e1e8; --pale: #f4f6f8; --m74-gold: #d4b588; --premium-width: 1320px; }
body { font-family: 'Temco Sans','Malgun Gothic',sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.container,.utility-inner,.header-inner,.m74-hero-inner,.m74-proof-inner { width: min(var(--premium-width),calc(100% - 120px)); }
.utility-bar { background: #0c2846; font-size: 10px; letter-spacing: .08em; }
.utility-inner { height: 27px; }
.utility-inner > span { opacity: .65; }
.site-header { border-bottom: 0; }
.header-inner { min-height: 82px; }
.brand img { width: 167px; }
#main-nav { gap: 33px; }
#main-nav > a { font-size: 14px; font-weight: 550; }
#main-nav .nav-catalog { border: 0; border-left: 1px solid #d6dde5; border-radius: 0; padding: 7px 0 7px 27px; font-weight: 650; font-size: 13px; }
.m74-hero { padding: 65px 0 44px; background: radial-gradient(ellipse at 77% 31%,#2d59817d 0%,#1e49703d 35%,transparent 66%),linear-gradient(115deg,#0b2746 0%,#123b65 63%,#143c62 100%); }
.m74-hero::before { background: none; inset: auto 0 0; height: 1px; background: linear-gradient(90deg,#7dabc800,#b7d0e04d,#7dabc800); }
.m74-hero-inner { grid-template-columns: minmax(350px,.91fr) minmax(0,1.65fr); gap: 70px; }
.m74-copy { padding-bottom: 7px; }
.m74-kicker { font-family: 'Temco Sans',sans-serif; font-size: 10px; letter-spacing: .23em; color: #d9c5a5; font-weight: 500; gap: 16px; }
.m74-kicker::before { width: 24px; height: 1px; }
.m74-copy h1 { margin: 21px 0 23px; }
.m74-series-title { font-family: 'Temco Display',sans-serif; font-size: clamp(74px,6.5vw,99px); font-weight: 600; letter-spacing: -.035em; line-height: 1; }
.m74-series-title > span { font-family: inherit; font-weight: 300; font-size: .6em; letter-spacing: -.035em; }
.m74-product-title { font-size: clamp(31px,2.55vw,38px); line-height: 1.4; font-weight: 550; letter-spacing: -.045em; margin-top: 23px; }
.m74-category { font-size: 15px; font-weight: 600; letter-spacing: -.015em; color: #e4eef8; margin-bottom: 12px; }
.m74-description { color: #bdcfe0; font-size: 16px; font-weight: 350; letter-spacing: -.02em; line-height: 1.85; }
.m74-actions { margin-top: 29px; gap: 27px; }
.m74-detail { background: #f3f6fa; color: #133755; min-height: 50px; font-size: 13px; font-weight: 650; padding: 13px 19px; gap: 30px; }
.m74-detail:hover { background: #fff; transform: translateY(-2px); box-shadow: 0 5px 20px #04192b24; }
.m74-detail > span { transition: transform .2s; }
.m74-detail:hover > span { transform: translate(2px,-2px); }
.m74-catalog { color: #dce7f1; border-color: #8fa9be6e; font-size: 13px; gap: 14px; }
.m74-stage { position: relative; isolation: isolate; padding-top: 16px; }
.m74-lineup { gap: 25px; align-items: start; }
.m74-photo { position: relative; width: 100%; }
.m74-photo::after { content: ''; position: absolute; z-index: -1; left: 11%; right: 8%; bottom: -3px; height: 10px; border-radius: 50%; background: #03192bc4; filter: blur(8px); }
.m74-module figcaption { margin-top: 21px; }
.m74-module figcaption strong { font-family: 'Temco Display',sans-serif; font-size: 25px; font-weight: 600; line-height: 1.1; letter-spacing: .015em; }
.m74-module figcaption span { color: #c9d9e7; font-size: 12px; line-height: 1.5; letter-spacing: -.02em; margin-top: 8px; }
.m74-stage .m74-assembly { gap: 25px; margin-top: 25px; }
.m74-assembly img { width: 160px; }
.m74-assembly figcaption { font-size: 11px; color: #adc3d6; letter-spacing: .01em; gap: 18px; }
.m74-assembly figcaption span { color: #8da6bf; font-size: 23px; }
.m74-proof { background: #f6f7f9; padding: 45px 0 28px; }
.m74-proof-heading { display: block; padding-bottom: 27px; border-color: #d1dae3; }
.m74-proof-heading > p { padding: 0; font-family: 'Temco Sans',sans-serif; font-size: 9px; font-weight: 500; letter-spacing: .21em; color: #6f8397; margin-bottom: 10px; }
.m74-proof-heading h2 { font-size: 28px; font-weight: 550; letter-spacing: -.035em; }
.m74-proof-columns { margin-top: 27px; gap: 44px; }
.m74-proof-number { font-family: 'Temco Sans',sans-serif; font-weight: 450; font-size: 10px; letter-spacing: .13em; color: #738599; }
.m74-proof-columns h3 { font-size: 21px; font-weight: 600; letter-spacing: -.035em; margin: 10px 0 11px; }
.m74-proof-columns article > p:not(.m74-proof-number) { font-size: 15px; color: #5c6f83; line-height: 1.75; font-weight: 400; min-height: 53px; }
.m74-proof-columns article + article { border-color: #d5dfe8; padding-left: 40px; }
.m74-proof-spec { align-items: flex-start; flex-direction: column; gap: 10px; margin-top: 21px; }
.m74-proof-spec strong { font-family: 'Temco Display',sans-serif; font-size: 51px; line-height: 1; font-weight: 300; letter-spacing: -.035em; color: #1b426b; }
.m74-proof-spec strong > span { font-family: 'Temco Sans',sans-serif; font-size: 18px; font-weight: 400; margin-left: 6px; }
.m74-proof-spec > p { color: #667b90; font-size: 11px; line-height: 1.6; }
.m74-proof-footnote { font-size: 12px; color: #687c8e; margin-top: 25px; padding-top: 17px; line-height: 1.75; }
.catalog-section { background: #fff; padding: 31px 0; border-color: #dde4eb; }
.catalog-grid { grid-template-columns: 63px 1fr 240px; gap: 29px; }
.catalog-cover img { width: 63px; box-shadow: 0 6px 16px #152b4520; }
.catalog-copy h2 { font-size: 25px; letter-spacing: -.035em; font-weight: 600; }
.catalog-copy .eyebrow { color: #9b7650; font-size: 10px; letter-spacing: .16em; }
.catalog-copy > p:not(.eyebrow) { font-size: 14px; }
.button-orange { background: #173e68; border-radius: 2px; font-size: 13px; min-height: 48px; }
.button-orange:hover { background: #0d2d50; }
.catalog-actions .text-link { color: #65788a; font-size: 12px; font-weight: 500; }
.section-heading h2 { font-weight: 600; letter-spacing: -.03em; }
.eyebrow { font-weight: 500; font-size: 10px; color: #617b95; letter-spacing: .18em; }
.products-section { padding: 63px 0; }
.product-grid { gap: 29px; }
.product-card { border: 0; border-radius: 0; background: none; overflow: visible; }
.product-card:hover { border: 0; box-shadow: none; transform: translateY(-3px); }
.product-photo { padding: 12px; height: 156px; }
.product-copy { padding: 20px 0 0; background: none; border-color: #d1dce7; }
.product-copy h3 { font-family: 'Temco Display',sans-serif; font-size: 29px; font-weight: 600; letter-spacing: 0; }
.product-copy h3 span { font-family: inherit; font-size: 17px; font-weight: 300; }
.product-copy > p:not(.product-category) { font-size: 14px; line-height: 1.65; min-height: 45px; }
.product-category { font-size: 11px; color: #5b748e; font-weight: 500; }
.product-link { font-size: 12px; margin-top: 20px; padding-top: 14px; }
.resources-section { background: #f5f7f9; padding: 44px 0; }
.resource-grid { gap: 32px; }
.resource-grid > a { border: 0; border-radius: 0; padding: 19px 0; background: none; border-top: 1px solid #bfcddc; }
.resource-grid > a:hover { border-color: #173e68; }
.resource-grid h3 { font-size: 19px; font-weight: 600; }
.resource-grid p { font-size: 13px; margin-top: 6px; }
.resource-no { color: #7b91a7; font-family: 'Temco Display',sans-serif; font-size: 18px; font-weight: 300; }
.contact-panel { border-radius: 2px; background: #123b65; }
.contact-panel h2,.panel-heading h2 { font-weight: 550; }
.news-list a { font-size: 14px; }
.news-tag { background: none; text-align: left; font-size: 11px; color: #657f98; }
.contact-panel > p:not(.eyebrow) { font-size: 13px; }
.contact-phone { font-family: 'Temco Display',sans-serif; font-size: 34px; font-weight: 600; }
.contact-links { font-size: 12px; }
.company-links { border-radius: 0; }
.company-links > a { font-size: 13px; font-weight: 500; }
.footer-grid p { font-size: 12px; }
.footer-grid h2 { font-size: 13px; font-weight: 600; }
@media(min-width:1700px) { .m74-hero { padding: 72px 0 49px; } .m74-lineup { gap: 28px; } .m74-assembly img { width: 165px; } }
@media(max-width:1200px) { .container,.utility-inner,.header-inner,.m74-hero-inner,.m74-proof-inner { width: calc(100% - 72px); } .m74-hero-inner { grid-template-columns: minmax(310px,.91fr) minmax(0,1.3fr); gap: 35px; } .m74-series-title { font-size: 77px; } .m74-description { font-size: 15px; } .m74-lineup { gap: 16px; } .m74-module figcaption strong { font-size: 23px; } .m74-module figcaption span { font-size: 11px; } .m74-proof-columns { gap: 29px; } .m74-proof-columns article + article { padding-left: 26px; } .m74-proof-columns h3 { font-size: 19px; } .m74-proof-columns article > p:not(.m74-proof-number) { font-size: 14px; } .product-grid { gap: 20px; } .product-copy { padding-inline: 0; } .product-copy > p:not(.product-category) { font-size: 13px; } #main-nav { gap: 26px; } }
@media(max-width:900px) { .container,.utility-inner,.header-inner,.m74-hero-inner,.m74-proof-inner { width: calc(100% - 48px); } .header-inner { min-height: 72px; } .brand img { width: 150px; } .menu-toggle { border-radius: 0; border: 0; font-size: 13px; padding-right: 0; } #main-nav .nav-catalog { border-left: 0; padding: 12px 6px; margin-top: 4px; } .m74-hero { padding: 44px 0 31px; } .m74-hero-inner { grid-template-columns: minmax(290px,1fr) minmax(0,1.1fr); gap: 25px; } .m74-series-title { font-size: 67px; } .m74-product-title { font-size: 29px; margin-top: 21px; } .m74-description { font-size: 14px; } .m74-category { font-size: 14px; } .m74-actions { gap: 18px; } .m74-detail { gap: 20px; font-size: 12px; padding-inline: 15px; } .m74-catalog { font-size: 12px; gap: 9px; } .m74-lineup { gap: 10px; } .m74-module figcaption strong { font-size: 19px; } .m74-module figcaption span { font-size: 10px; white-space: normal; min-height: 30px; } .m74-assembly img { width: 124px; } .m74-assembly figcaption { font-size: 10px; gap: 12px; } .m74-stage .m74-assembly { gap: 15px; } .m74-proof-columns { gap: 20px; } .m74-proof-columns article + article { padding-left: 20px; } .m74-proof-columns h3 { font-size: 18px; } .m74-proof-columns article > p:not(.m74-proof-number) { font-size: 13px; min-height: 70px; } .m74-proof-heading h2 { font-size: 25px; } .m74-proof-spec strong { font-size: 44px; } .resource-grid { gap: 22px; } .resource-grid p { font-size: 12px; } }
@media(max-width:700px) { .m74-hero-inner { grid-template-columns: 1fr; gap: 33px; } .m74-hero { padding: 35px 0 26px; } .m74-copy { padding-bottom: 0; } .m74-series-title { font-size: 73px; } .m74-product-title { font-size: 31px; line-height: 1.4; margin-top: 18px; } .m74-copy h1 { margin: 19px 0 17px; } .m74-category { font-size: 14px; margin-bottom: 12px; } .m74-description { font-size: 14px; line-height: 1.75; } .m74-description br { display: none; }  .m74-actions { margin-top: 23px; gap: 22px; } .m74-detail { min-height: 47px; } .m74-kicker { font-size: 9px; letter-spacing: .22em; } .m74-stage { padding-top: 0; } .m74-lineup { gap: 12px; } .m74-module figcaption { margin-top: 14px; } .m74-module figcaption strong { font-size: 18px; } .m74-module figcaption span { font-size: 11px; line-height: 1.35; min-height: 30px; margin-top: 7px; } .m74-stage .m74-assembly { gap: 19px; margin-top: 21px; } .m74-assembly img { width: 128px; } .m74-assembly figcaption { font-size: 10px; } .m74-proof { padding: 32px 0 24px; } .m74-proof-heading { padding-bottom: 23px; } .m74-proof-heading > p { margin-bottom: 10px; font-size: 9px; } .m74-proof-heading h2 { font-size: 24px; } .m74-proof-heading h2 br { display: block; } .m74-proof-columns { grid-template-columns: 1fr; gap: 0; margin-top: 0; } .m74-proof-columns article { padding: 26px 0; } .m74-proof-columns article + article { padding-left: 0; border-left: 0; border-top: 1px solid #d5dfe8; } .m74-proof-columns h3 { font-size: 20px; } .m74-proof-columns article > p:not(.m74-proof-number) { font-size: 14px; min-height: 0; } .m74-proof-spec { flex-direction: row; align-items: center; gap: 22px; margin-top: 20px; } .m74-proof-spec strong { font-size: 46px; } .m74-proof-footnote { font-size: 11px; margin-top: 0; } }
@media(max-width:650px) { .container,.utility-inner,.header-inner,.m74-hero-inner,.m74-proof-inner { width: calc(100% - 40px); } .catalog-grid { grid-template-columns: 58px 1fr; gap: 16px; } .catalog-cover img { width: 58px; } .catalog-copy h2 { font-size: 20px; } .catalog-copy > p:not(.eyebrow) { font-size: 13px; } .catalog-actions { grid-column: 1 / -1; } .products-section { padding: 41px 0; } .product-grid { gap: 27px 23px; } .product-photo { height: 125px; } .product-copy { padding: 16px 0 0; } .product-copy h3 { font-size: 27px; } .product-copy h3 span { font-size: 15px; } .product-copy > p:not(.product-category) { font-size: 13px; } .product-link { font-size: 11px; } .product-card:last-child .product-photo { min-height: 140px; } .product-card:last-child .product-copy { padding-left: 20px; border-color: #d1dce7; } .resources-section { padding: 32px 0 22px; } .resource-grid { gap: 3px; } .resource-grid > a { padding: 20px 0; gap: 18px; } .resource-grid h3 { font-size: 18px; } .resource-grid p { font-size: 13px; } .contact-panel { padding: 26px; } .contact-panel h2 { font-size: 22px; } .news-list a { font-size: 14px; gap: 11px; } .contact-phone { font-size: 34px; } .company-links > a { font-size: 11px; padding-inline: 10px; } .footer-grid p { font-size: 12px; } }
@media(max-width:360px) { .container,.utility-inner,.header-inner,.m74-hero-inner,.m74-proof-inner { width: calc(100% - 32px); } .m74-series-title { font-size: 65px; } .m74-product-title { font-size: 29px; } .m74-description { font-size: 14px; } .m74-actions { gap: 15px; } .m74-lineup { gap: 8px; } .m74-module figcaption strong { font-size: 16px; } .m74-module figcaption span { font-size: 10px; } .m74-assembly img { width: 115px; } .m74-assembly figcaption { font-size: 9px; } .m74-proof-heading h2 { font-size: 22px; } .m74-proof-spec { gap: 16px; } .product-grid { column-gap: 19px; } }
@media(prefers-reduced-motion:reduce) { .m74-detail,.m74-detail > span { transition: none; } }