@font-face { font-family: Golos; src: url('assets/golos-400.ttf') format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: Golos; src: url('assets/golos-600.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
@font-face { font-family: Plex; src: url('assets/ibm-plex-sans-600.ttf') format('truetype'); font-style: normal; font-weight: 600; font-display: swap; }
:root { --ink: #10171c; --paper: #edf2f4; --white: #fff; --muted: #54636c; --line: #cfd9df; --accent: #22694f; --accent-hover: #19513c; --accent-light: #8dceb0; --pale: #dce8ed; --soft: #e0eee5; --frame: 14px; --space: clamp(28px, 4.6vw, 82px); --gap: 16px; }
* { box-sizing: border-box; }
html { scroll-padding-top: 30px; }
body { margin: 0; padding: var(--frame); background: var(--ink); color: var(--ink); font: 400 17px/1.65 Golos, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, summary { color: inherit; cursor: pointer; }
button { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
h2 { font: 600 clamp(37px, 4.2vw, 64px)/1.08 Plex, Golos, Arial, sans-serif; letter-spacing: -.045em; }
h3 { font: 600 34px/1.13 Plex, Golos, Arial, sans-serif; letter-spacing: -.035em; }
::selection { background: var(--accent); color: white; }
:focus-visible { outline: 3px solid #4a9c75; outline-offset: 5px; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: inline-block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.skip-link { position: fixed; z-index: 100; top: 10px; left: 10px; padding: 12px 20px; border-radius: 8px; background: white; color: var(--ink); transform: translateY(-170%); }
.skip-link:focus { transform: none; }
.hero { display: flex; flex-direction: column; position: relative; isolation: isolate; min-height: 810px; height: calc(100svh - var(--frame) * 2); max-height: 1100px; overflow: clip; border-radius: 22px; background: #1c2c35; color: white; }
.hero-image, .hero-shade { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; }
.hero-image { object-fit: cover; object-position: center 46%; }
.hero-shade { background: linear-gradient(180deg, rgb(9 18 25 / .4), transparent 26%, transparent 43%, rgb(9 18 25 / .55) 74%, rgb(9 18 25 / .85)), radial-gradient(ellipse at 100% 80%, rgb(9 18 25 / .42), transparent 50%); }
.site-header { display: flex; align-items: center; justify-content: space-between; min-height: 100px; gap: 36px; margin-inline: var(--space); border-bottom: 1px solid rgb(255 255 255 / .24); position: relative; z-index: 5; }
.wordmark { display: inline-flex; align-items: center; flex-shrink: 0; }
.wordmark img { display: block; width: 286px; height: auto; }
.site-nav { display: flex; align-items: center; gap: 38px; font-size: 15px; }
.site-nav > a { padding-block: 14px; }
.site-nav > a:not(.nav-request):hover { text-decoration: underline; text-underline-offset: 6px; }
.site-nav .nav-request { display: flex; align-items: center; gap: 25px; margin-left: 15px; padding: 12px 18px; border: 1px solid rgb(255 255 255 / .6); border-radius: 8px; font-weight: 600; }
.nav-request .icon { width: 19px; height: 19px; }
.site-nav .nav-request:hover { background: white; color: var(--ink); }
.menu-toggle { display: none; width: 44px; height: 44px; padding: 10px; border: 1px solid rgb(255 255 255 / .5); border-radius: 8px; background: transparent; }
.menu-toggle span { display: block; height: 1px; width: 22px; margin-block: 6px; background: currentColor; }
.hero-topline { display: flex; justify-content: space-between; gap: 32px; padding: 29px var(--space) 0; color: #f3f5f6; font-size: 12px; letter-spacing: .025em; }
.hero-topline > p:first-child { display: flex; align-items: center; gap: 9px; }
.status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-light); flex-shrink: 0; }
.hero-content { display: grid; grid-template-columns: 1fr 330px; align-items: end; gap: 65px; margin-top: auto; padding: 160px var(--space) 50px; }
.hero h1 { font: 600 clamp(68px, 7.3vw, 112px)/1.01 Plex, Golos, Arial, sans-serif; letter-spacing: -.055em; }
.hero-offer { margin-top: 18px; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.15; letter-spacing: -.045em; }
.hero-condition { max-width: 610px; margin-top: 18px; color: #d0d9df; font-size: 16px; line-height: 1.6; }
.hero-description { color: white; font-size: 20px; line-height: 1.6; }
.button { display: inline-flex; justify-content: space-between; align-items: center; gap: 28px; min-height: 58px; padding: 16px 21px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: white; font-size: 16px; font-weight: 600; line-height: 1.5; text-align: left; }
.button:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.button .icon { width: 23px; height: 23px; }
.hero-side .button { width: 100%; margin-top: 27px; }
.hero-contact-note { margin-top: 15px; color: #d0d9df; font-size: 14px; }
.hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-inline: var(--space); padding-block: 23px 25px; border-top: 1px solid rgb(255 255 255 / .22); }
.hero-bottom > a { display: flex; align-items: center; gap: 13px; font-size: 14px; }
.scroll-symbol { display: flex; justify-content: center; align-items: center; width: 34px; height: 34px; border: 1px solid rgb(255 255 255 / .4); border-radius: 50%; font-size: 21px; line-height: 1; }
.hero-bottom > p { color: #c4ced4; font-size: 12px; line-height: 1.6; text-align: right; }
.surface { border-radius: 22px; background: var(--paper); }
.production-section { margin-top: var(--frame); padding: 68px var(--space) 24px; }
.section-label { display: flex; align-items: center; gap: 10px; font-size: 12px; line-height: 1.5; letter-spacing: .055em; text-transform: uppercase; }
.section-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.section-heading { display: grid; grid-template-columns: 1.35fr 1fr; align-items: end; gap: 8%; margin-top: 30px; margin-bottom: 43px; }
.section-heading > p { max-width: 440px; font-size: 19px; line-height: 1.65; color: var(--muted); }
.production-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.tile { min-width: 0; display: flex; flex-direction: column; padding: 30px; background: var(--white); border-radius: 17px; }
.tile > p:not(.eyebrow) { font-size: 18px; line-height: 1.6; color: var(--muted); }
.eyebrow { font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: .055em; text-transform: uppercase; color: var(--muted); }
.tile h3 { margin-top: 27px; margin-bottom: 22px; }
.tile-mould { grid-column: span 7; grid-row: span 2; min-height: 480px; padding: 38px; }
.tile-mould h3 { font-size: clamp(44px, 4.4vw, 66px); margin-top: 32px; }
.tile-mould .mould-description { margin-top: auto; padding-top: 40px; max-width: 420px; font-size: 20px; }
.tile-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 27px; padding-top: 17px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.tile-experience { grid-column: span 5; min-height: 230px; background: var(--accent); color: white; }
.tile-experience .eyebrow, .tile-experience > p:not(.eyebrow) { color: white; }
.tile-experience h3 { font-size: clamp(46px, 5vw, 74px); margin-block: 12px 8px; letter-spacing: -.05em; }
.quality-grid { grid-column: span 5; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.quality-grid .tile { min-height: 234px; padding: 26px; }
.quality-grid h3 { font-size: clamp(24px, 2.35vw, 34px); }
.tile-assembly { background: var(--pale); }
.tile-check { background: var(--ink); color: white; }
.tile-check .eyebrow, .tile-check > p:not(.eyebrow) { color: #d0dde4; }
.tile-current, .tile-new { grid-column: span 6; min-height: 260px; }
.tile-current { background: var(--soft); }
.tile-current h3, .tile-new h3 { margin-block: 22px; font-size: clamp(28px, 2.9vw, 42px); }
.tile-new > p:last-child { max-width: 470px; }
.presentation-link { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-block: 25px 6px; font-size: 16px; font-weight: 600; }
.presentation-link:hover { color: var(--accent); }
.file-label { margin-left: 18px; color: var(--muted); font-size: 12px; font-weight: 400; }
.process-section { padding: 80px var(--space) 66px; color: white; }
.process-section .section-label { color: #b6c6d0; }
.process-section .section-heading > p { color: #b6c6d0; }
.process-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.process-grid > li { min-height: 300px; color: var(--ink); }
.step-number { color: var(--accent); font-size: 13px; font-weight: 600; }
.step-sample, .step-batch { grid-column: span 7; }
.step-terms, .step-approval { grid-column: span 5; }
.process-grid h3 { font-size: clamp(29px, 3.2vw, 46px); margin-block: 29px 24px; }
.process-grid p { max-width: 445px; }
.step-approval { background: var(--pale); }
.process-grid .step-batch { background: #263b49; color: white; }
.step-batch .step-number { color: var(--accent-light); }
.step-batch > p:not(.eyebrow) { color: #d0dde4; }
.approval-strip { display: flex; justify-content: space-between; align-items: center; gap: 30px; margin-top: var(--gap); padding: 30px; background: var(--accent); border-radius: 17px; }
.approval-strip p { font: 600 clamp(25px, 2.8vw, 40px)/1.16 Plex, Golos, Arial, sans-serif; letter-spacing: -.025em; }
.process-note { margin-top: 22px; font-size: 15px; color: #b6c6d0; }
.request-section { padding: 66px var(--space) 28px; }
.conversation-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: var(--gap); }
.conversation-prompts ul { list-style: none; margin: 0; padding: 0; }
.conversation-prompts li { padding-block: 24px; font-size: 22px; line-height: 1.45; letter-spacing: -.02em; }
.conversation-prompts li + li { border-top: 1px solid var(--line); }
.conversation-prompts li:last-child { padding-bottom: 0; }
.conversation-prompts li > span { display: block; margin-bottom: 10px; color: var(--muted); font-size: 11px; line-height: 1.5; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.conversation-reply { background: var(--ink); color: white; }
.conversation-reply h3 { font-size: clamp(35px, 3.8vw, 55px); margin-block: 31px; }
.conversation-reply .eyebrow, .conversation-reply > p:not(.eyebrow) { color: #d0dde4; }
.conversation-reply .reply-note { margin-top: auto; padding-top: 31px; font-size: 15px; }
.conversation-reply .contact-message { margin-top: 27px; font-size: 15px; }
.contact-phone { align-self: start; margin-top: 18px; font-size: clamp(20px, 2.2vw, 28px); font-weight: 600; line-height: 1.4; white-space: nowrap; }
.contact-phone:hover, .contact-backup a:hover { text-decoration: underline; text-underline-offset: 5px; }
.contact-backup { display: grid; justify-items: start; gap: 7px; margin-top: 25px; padding-top: 23px; border-top: 1px solid #37434b; }
.contact-backup p { color: #b6c6d0; font-size: 12px; }
.contact-backup > a { font-size: 18px; line-height: 1.5; white-space: nowrap; }
.contact-backup .contact-backup-message { color: #d0dde4; font-size: 13px; }
.order-questions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 10px; }
.order-questions details { min-width: 0; border-top: 1px solid var(--line); }
.order-questions summary { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-block: 20px; list-style: none; font-size: 16px; font-weight: 600; }
.order-questions summary::-webkit-details-marker { display: none; }
.order-questions summary .icon { width: 19px; height: 19px; }
.order-questions details[open] summary .icon { transform: rotate(45deg); }
.order-questions details > p { padding: 0 15px 18px 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
.site-footer { padding: 48px var(--space) 5px; color: white; }
.footer-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 40px; padding-bottom: 35px; }
.footer-top .wordmark img { width: min(260px, calc(100vw - 144px)); }
.footer-top > p { margin-left: auto; color: #b4c1c9; font-size: 14px; line-height: 1.8; }
.back-top { display: flex; justify-content: center; align-items: center; width: 42px; height: 42px; border: 1px solid #52616a; border-radius: 50%; }
.back-top .icon { width: 21px; height: 21px; }
.footer-meta { display: flex; justify-content: space-between; gap: 24px; padding-block: 23px 10px; border-top: 1px solid #37434b; color: #b4c1c9; font-size: 12px; }
@media (min-width: 1800px) { body { max-width: 1920px; margin-inline: auto; } }
@media (max-width: 1150px) {
  .hero-content { grid-template-columns: 1fr 280px; gap: 35px; }
  .hero h1 { font-size: 84px; }
  .hero-offer { font-size: 42px; }
  .site-nav { gap: 24px; }
  .wordmark img { width: 240px; }
  .site-nav .nav-request { margin-left: 0; }
  .quality-grid .tile { padding: 23px; }
  .quality-grid h3 { font-size: 27px; }
}
@media (max-width: 950px) {
  .hero { min-height: 850px; max-height: 1080px; }
  .hero-content { grid-template-columns: 1fr; gap: 26px; padding-top: 140px; }
  .hero-side { display: grid; grid-template-columns: 1fr 270px; gap: 15px 38px; align-items: end; }
  .hero-description { grid-row: 1 / 3; max-width: 400px; font-size: 18px; }
  .hero-side .button { margin-top: 0; }
  .hero-contact-note { margin-top: 0; }
  .section-heading { grid-template-columns: 1fr; gap: 22px; }
  .section-heading > p { max-width: 590px; }
  .tile-mould { grid-column: span 6; padding: 29px; }
  .tile-experience, .quality-grid { grid-column: span 6; }
  .quality-grid { grid-template-columns: 1fr; }
  .quality-grid .tile { min-height: 150px; }
  .quality-grid h3 { margin-block: 17px 10px; font-size: 29px; }
  .tile-mould h3 { font-size: 49px; }
  .process-grid h3 { font-size: 35px; }
  .conversation-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  :root { --frame: 10px; --space: 26px; --gap: 12px; }
  .hero { min-height: 840px; height: auto; border-radius: 17px; }
  .site-header { min-height: 88px; gap: 20px; }
  .wordmark img { width: min(230px, calc(100vw - 140px)); }
  .menu-toggle { display: block; flex-shrink: 0; }
  .js .site-nav { display: none; position: absolute; top: 77px; left: -8px; right: -8px; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 21px 20px; border: 1px solid #536570; border-radius: 12px; background: #13232e; }
  .js .site-nav.is-open { display: flex; }
  .site-nav > a { padding-block: 15px; font-size: 16px; }
  .site-nav .nav-request { justify-content: space-between; margin: 7px 0 0; }
  .menu-toggle[aria-expanded='true'] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded='true'] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .hero-topline { padding-top: 22px; }
  .hero-topline > p:last-child { display: none; }
  .hero-image { object-position: 50% 46%; }
  .hero-shade { background: linear-gradient(180deg, rgb(9 18 25 / .4), transparent 23%, rgb(9 18 25 / .4) 40%, rgb(9 18 25 / .64) 70%, rgb(9 18 25 / .85)); }
  .hero-content { padding-top: 190px; padding-bottom: 33px; gap: 27px; }
  .hero h1 { font-size: 73px; }
  .hero-offer { margin-top: 13px; font-size: 38px; }
  .hero-side { grid-template-columns: 1fr 260px; column-gap: 25px; }
  .hero-bottom { padding-block: 21px 23px; }
  .hero-bottom > p { max-width: 210px; }
  .surface { border-radius: 17px; }
  .production-section, .request-section { padding-top: 51px; }
  .section-heading { margin-bottom: 31px; }
  .tile { padding: 25px; }
  .tile-mould { grid-column: 1 / -1; grid-row: auto; min-height: 360px; }
  .tile-experience, .quality-grid { grid-column: span 6; }
  .quality-grid { grid-template-columns: 1fr; }
  .quality-grid .tile { min-height: 160px; }
  .tile-current, .tile-new { min-height: 260px; }
  .file-label { display: block; margin: 5px 0 0; }
  .process-section { padding-top: 61px; padding-bottom: 51px; }
  .process-grid > li { grid-column: span 6; min-height: 310px; }
  .process-grid h3 { font-size: 31px; }
  .conversation-grid { grid-template-columns: 1fr; }
  .conversation-reply { min-height: 320px; }
  .conversation-reply h3 { font-size: 46px; }
  .site-footer { padding-top: 36px; }
  .footer-top { grid-template-columns: 1fr auto; gap: 24px; }
  .footer-top > p { grid-column: 1; grid-row: 2; margin-left: 0; }
  .back-top { grid-column: 2; grid-row: 1; }
}
@media (max-width: 560px) {
  :root { --space: 23px; }
  .hero { min-height: 805px; }
  .hero-content { padding-top: 155px; }
  .hero h1 { font-size: clamp(46px, 12.1vw, 65px); }
  .hero-offer { font-size: clamp(25px, 7vw, 35px); }
  .hero-side { grid-template-columns: 1fr; gap: 20px; }
  .hero-description { grid-row: auto; max-width: 420px; font-size: 18px; line-height: 1.65; }
  .hero-side .button { min-height: 55px; }
  .hero-contact-note { margin-top: -7px; }
  .hero-bottom { align-items: start; flex-direction: column; gap: 17px; }
  .hero-bottom > p { max-width: none; text-align: left; }
  .hero-bottom > p br { display: none; }
  .section-heading { margin-top: 25px; }
  .section-heading > p { font-size: 17px; }
  .production-section, .request-section { padding-inline: 18px; }
  .tile-mould { min-height: 365px; padding: 26px; }
  .tile-mould h3 { font-size: 43px; }
  .tile-mould .mould-description { font-size: 18px; }
  .tile-bottom { font-size: 10px; }
  .tile-experience, .quality-grid, .tile-current, .tile-new { grid-column: 1 / -1; }
  .tile-experience { min-height: 220px; }
  .tile-experience h3 { font-size: 68px; }
  .quality-grid { grid-template-columns: 1fr 1fr; }
  .quality-grid .tile { padding: 19px 16px; min-height: 204px; }
  .quality-grid h3 { font-size: 24px; }
  .quality-grid .eyebrow { font-size: 9px; }
  .quality-grid p:not(.eyebrow) { font-size: 16px; }
  .tile-current, .tile-new { min-height: 235px; }
  .tile-current h3, .tile-new h3 { font-size: 34px; }
  .tile > p:not(.eyebrow) { font-size: 17px; }
  .presentation-link { font-size: 15px; padding-top: 23px; }
  .file-label { font-size: 10px; }
  .process-section { padding-inline: 18px; }
  .process-grid > li { grid-column: 1 / -1; min-height: 264px; }
  .process-grid h3 { font-size: 34px; margin-block: 23px; }
  .approval-strip { padding: 26px; }
  .approval-strip p { font-size: 25px; }
  .process-note { font-size: 13px; }
  .conversation-prompts li { font-size: 21px; }
  .conversation-reply h3 { font-size: 42px; }
  .order-questions { grid-template-columns: 1fr; gap: 0; margin-top: 15px; }
  .footer-meta { flex-direction: column; gap: 9px; }
}
@media (max-width: 359px) {
  :root { --space: 18px; }
  .hero h1 { font-size: 43px; }
  .tile-mould h3 { font-size: 37px; }
  .quality-grid { grid-template-columns: 1fr; }
  .quality-grid .tile { min-height: 170px; padding: 23px; }
  .quality-grid h3 { font-size: 29px; }
}
@media print {
  body { padding: 0; background: white; }
  .hero { height: auto; min-height: 0; max-height: none; background: white; color: black; }
  .hero-image, .hero-shade, .site-nav, .menu-toggle, .hero-bottom, .skip-link { display: none !important; }
  .site-header { min-height: 80px; }
  .wordmark img { filter: brightness(0); }
  .hero-topline, .hero-contact-note { color: black; }
  .hero-content { padding-block: 20px; gap: 20px; }
  .hero h1 { font-size: 48px; }
  .hero-description { color: black; }
  .hero-offer { font-size: 30px; }
  .production-section, .process-section, .request-section { padding: 28px; color: black; }
  .section-heading > p, .process-section .section-heading > p, .process-section .section-label, .process-note { color: #444; }
  .section-heading { gap: 18px; }
  .tile { break-inside: avoid; }
  .process-grid > li { grid-column: span 6; }
  .site-footer { color: black; }
  .footer-top > p, .footer-meta { color: #444; }
}