:root {
  --ink: #090a0a;
  --ink-soft: #333534;
  --paper: #f7f4ee;
  --white: #fff;
  --orange: #e16625;
  --orange-bright: #f25d13;
  --orange-dark: #9b3512;
  --line: #d8d2c8;
  --display: "Barlow Condensed", sans-serif;
  --body: "Inter", sans-serif;
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--body); line-height: 1.6; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.sprite { position: absolute; }
.skip { position: fixed; z-index: 999; left: 1rem; top: -5rem; padding: .75rem 1rem; background: var(--white); color: var(--ink); }
.skip:focus { top: 1rem; }
.eyebrow { margin: 0 0 1rem; color: var(--orange-dark); font: 700 .78rem/1 var(--body); letter-spacing: .15em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); line-height: .98; text-transform: uppercase; }
h2 { margin-bottom: 1.2rem; font-size: clamp(2.7rem, 5.8vw, 5.7rem); letter-spacing: -.025em; }

.hdr { position: fixed; z-index: 100; inset: 0 0 auto; height: 84px; display: flex; align-items: center; gap: 2rem; padding: 0 max(24px, calc((100vw - var(--max)) / 2)); background: rgba(247,244,238,.97); border-bottom: 1px solid transparent; transition: box-shadow .25s, border-color .25s; }
.hdr.is-scrolled { border-color: var(--line); box-shadow: 0 8px 30px rgba(0,0,0,.08); }
.hdr__logo { align-self: stretch; width: 190px; display: flex; align-items: center; }
.hdr__logo img { width: 100%; height: 68px; object-fit: contain; object-position: left center; }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.75rem; }
.nav a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; font-size: .87rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.nav a:not(.nav__cta):hover, .nav a.is-active { color: var(--orange-dark); }
.nav__cta { padding: .3rem 1.25rem; color: var(--ink); background: var(--orange); border-radius: 2px; }
.hdr__burger { display: none; width: 48px; height: 48px; border: 0; background: none; }
.hdr__burger span { display: block; width: 24px; height: 2px; margin: 5px auto; background: var(--ink); transition: .25s; }

.hero { min-height: 820px; padding: 168px max(24px, calc((100vw - var(--max)) / 2)) 100px; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr); align-items: center; overflow: hidden; background: linear-gradient(106deg, var(--paper) 0 63%, var(--ink) 63%); }
.hero__copy { position: relative; z-index: 2; max-width: 720px; }
.hero h1 { margin-bottom: 1.5rem; font-size: clamp(5rem, 10vw, 9rem); letter-spacing: -.055em; }
.hero h1 span { color: var(--orange-dark); }
.hero__lead { margin-bottom: 1rem; font: 700 clamp(1.45rem, 2.6vw, 2.15rem)/1.15 var(--display); text-transform: uppercase; }
.hero__text { max-width: 620px; color: var(--ink-soft); font-size: 1.04rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2.1rem; }
.btn { min-height: 52px; padding: .85rem 1.25rem; border: 2px solid transparent; border-radius: 2px; display: inline-flex; justify-content: center; align-items: center; gap: .65rem; color: var(--ink); font-weight: 800; text-decoration: none; text-transform: uppercase; letter-spacing: .02em; cursor: pointer; }
.btn svg { width: 20px; height: 20px; fill: none; }
.btn--orange { background: var(--orange); border-color: var(--orange); }
.btn--orange:hover { background: #ef7a38; border-color: #ef7a38; }
.btn--outline { border-color: var(--ink); background: transparent; }
.btn--outline:hover { background: var(--ink); color: var(--white); }
.hero__visual { position: relative; height: 590px; }
.hero__visual > img { position: absolute; z-index: 2; right: 10%; top: 50%; width: 250px; height: auto; transform: translateY(-50%) rotate(2deg); filter: drop-shadow(0 24px 28px rgba(0,0,0,.4)); }
.hero__roll { position: absolute; right: -45%; top: 15%; width: 130%; height: 70%; padding: 0 4%; display: flex; align-items: center; gap: 2.5rem; color: var(--ink); background: var(--orange); border: 2px solid rgba(0,0,0,.2); transform: rotate(-18deg); }
.hero__roll::before, .hero__roll::after { content: ""; position: absolute; inset: 8% auto 8% 24%; border-left: 4px dashed rgba(0,0,0,.45); }
.hero__roll::after { left: 73%; }
.hero__roll span { min-width: 140px; height: 58%; display: grid; place-items: center; border: 3px solid currentColor; border-radius: 50%; font: 800 1.15rem/1 var(--display); text-align: center; }

.cut-section { position: relative; }
.cut-section::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; border-top: 3px dashed currentColor; opacity: .28; transform: rotate(-1.1deg); transform-origin: left; }
.products { padding: 140px max(24px, calc((100vw - var(--max)) / 2)); background: var(--white); }
.section-head { max-width: 840px; margin-bottom: 3.5rem; }
.section-head > p:last-child { max-width: 650px; color: var(--ink-soft); }
.product-grid { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; list-style: none; background: var(--ink); border: 1px solid var(--ink); }
.product-card { position: relative; min-height: 330px; padding: 2rem; overflow: hidden; background: var(--white); }
.product-card::after { content: ""; position: absolute; right: -17px; bottom: -17px; width: 34px; height: 34px; background: var(--ink); transform: rotate(45deg); }
.product-card__no { position: absolute; right: 1.5rem; top: 1.25rem; color: #625e58; font: 700 .75rem/1 var(--body); }
.product-card > svg { width: 56px; height: 56px; margin: 1.2rem 0 2.2rem; color: var(--orange-dark); }
.product-card h3 { max-width: 250px; margin-bottom: .9rem; font-size: 1.55rem; }
.product-card p { margin-bottom: 0; color: var(--ink-soft); font-size: .9rem; }
.product-card--wide { grid-column: span 2; display: grid; grid-template-columns: 80px 1fr; align-content: center; column-gap: 1.4rem; }
.product-card--wide > svg { grid-row: span 2; margin: 0; }

.industries { padding: 140px max(24px, calc((100vw - var(--max)) / 2)); display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: 7vw; background: var(--paper); }
.industries__intro { align-self: start; position: sticky; top: 125px; }
.industries__intro h2 { max-width: 520px; }
.industries__intro > p:not(.eyebrow) { max-width: 500px; color: var(--ink-soft); }
.industries__link { min-height: 48px; margin-top: 1.2rem; display: inline-flex; align-items: center; gap: .65rem; color: var(--orange-dark); font-size: .82rem; font-weight: 800; letter-spacing: .035em; text-transform: uppercase; text-underline-offset: 5px; }
.industries__link svg { width: 20px; height: 20px; fill: none; }
.industry-grid { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; list-style: none; }
.industry-card { position: relative; min-height: 258px; padding: 2rem 1.8rem 1.7rem; overflow: hidden; background: var(--white); border: 1px solid var(--line); }
.industry-card::after { content: ""; position: absolute; right: -14px; bottom: -14px; width: 28px; height: 28px; background: var(--orange); transform: rotate(45deg); }
.industry-card__tag { color: #625e58; font-size: .68rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.industry-card > svg { width: 40px; height: 40px; margin: 1.7rem 0 1.2rem; display: block; color: var(--orange-dark); }
.industry-card h3 { margin-bottom: .65rem; font-size: 1.5rem; }
.industry-card p { margin: 0; color: var(--ink-soft); font-size: .87rem; }
.industries__note { grid-column: 2; margin: .8rem 0 0; padding: 1.1rem 1.3rem; color: var(--ink-soft); background: #eee8de; border-left: 4px solid var(--orange); font-size: .88rem; }
.industries__note strong { color: var(--ink); }

.trust { padding: 130px max(24px, calc((100vw - var(--max)) / 2)); display: grid; grid-template-columns: .85fr 1.15fr; gap: 8vw; background: var(--orange); }
.trust .eyebrow { color: var(--ink); }
.trust__intro p:last-child { max-width: 480px; color: #2d1d17; }
.trust__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid rgba(0,0,0,.4); }
.trust__list li { padding: 1.4rem 0; display: grid; grid-template-columns: 52px 1fr; gap: 1rem; border-bottom: 1px solid rgba(0,0,0,.4); }
.trust__list li > span { font-size: .75rem; font-weight: 700; }
.trust__list h3 { margin: 0 0 .35rem; font-size: 1.7rem; }
.trust__list p { margin: 0; color: #2d1d17; }

.work { padding: 145px max(24px, calc((100vw - var(--max)) / 2)); color: var(--white); background: var(--ink); }
.section-head--light .eyebrow { color: #ef7a38; }
.section-head--light > p:last-child { color: #c8c8c4; }
.work__grid { display: grid; grid-template-columns: 1.35fr .8fr; gap: 1.5rem; }
.work-card { margin: 0; border: 1px solid #404241; background: #151716; }
.work-card__img { overflow: hidden; }
.work-card img { width: 100%; height: 470px; object-fit: cover; transition: transform .6s; }
.work-card--wide img { object-position: center; }
.work-card:hover img { transform: scale(1.025); }
.work-card figcaption { padding: 1.8rem 2rem 2rem; }
.work-card figcaption > span { color: #ef7a38; font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.work-card h3 { margin: .5rem 0 .7rem; font-size: 2rem; }
.work-card p { margin: 0; color: #c8c8c4; }

.quote { padding: 140px max(24px, calc((100vw - var(--max)) / 2)); display: grid; grid-template-columns: .85fr 1.15fr; gap: 8vw; background: var(--paper); }
.quote__copy > p:not(.eyebrow) { max-width: 520px; color: var(--ink-soft); }
.direct { margin-top: 2.5rem; display: grid; gap: .9rem; }
.direct a { min-height: 58px; display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.direct svg { width: 24px; height: 24px; color: var(--orange-dark); fill: none; }
.direct span { color: var(--ink-soft); font-size: .77rem; text-transform: uppercase; }
.direct strong { display: block; color: var(--ink); font-size: 1rem; text-transform: none; }
.form { padding: 2.3rem; background: var(--white); border: 1px solid var(--line); box-shadow: 14px 14px 0 var(--orange); }
.field { margin-bottom: 1.2rem; }
.field label { display: block; margin-bottom: .45rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.field label span { color: #625e58; font-weight: 500; text-transform: none; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: .8rem .9rem; color: var(--ink); background: #fbfaf7; border: 1px solid #a8a39b; border-radius: 0; }
.field textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #625e58; opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(225,102,37,.25); border-color: var(--orange-dark); }
.field.is-bad input, .field.is-bad select { border: 2px solid #a32020; }
.form__err { color: #8d1919; font-weight: 700; }
.form .btn { width: 100%; }

.ftr { padding: 72px max(24px, calc((100vw - var(--max)) / 2)) 24px; display: grid; grid-template-columns: 1fr 1fr .7fr; gap: 3rem; color: var(--white); background: var(--ink); }
.ftr__brand img { width: 180px; height: 110px; object-fit: cover; object-position: 0 45%; filter: invert(1) grayscale(1) brightness(2); mix-blend-mode: screen; }
.ftr__brand p { color: #d1d1cd; font-family: var(--display); font-size: 1.3rem; text-transform: uppercase; }
.ftr__contact { display: flex; flex-direction: column; align-items: flex-start; }
.ftr a { min-height: 44px; display: inline-flex; align-items: center; color: #ef7a38; }
.ftr address { margin: .5rem 0; color: #d1d1cd; font-style: normal; }
.ftr__facebook { margin: .5rem 0 0; color: #ef7a38; }
.ftr__label { margin-bottom: .75rem; color: #92938f; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.ftr__owner p:last-child { font-family: var(--display); font-size: 1.5rem; text-transform: uppercase; }
.ftr__bottom { grid-column: 1 / -1; padding-top: 1.3rem; display: flex; justify-content: space-between; gap: 1rem; color: #92938f; border-top: 1px solid #333534; font-size: .78rem; }
.ftr__bottom p { margin: 0; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s, transform .7s; }
.reveal.is-visible { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .hdr__burger { display: block; margin-left: auto; }
  .nav { position: fixed; z-index: -1; inset: 84px 0 auto; height: calc(100dvh - 84px); padding: 2rem 24px; display: none; flex-direction: column; align-items: stretch; gap: .5rem; background: var(--paper); }
  .nav.is-open { display: flex; }
  .nav a { padding: .6rem; font: 700 1.7rem/1 var(--display); }
  .nav__cta { margin-top: 1rem; justify-content: center; }
  .hdr__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .hdr__burger.is-open span:nth-child(2) { opacity: 0; }
  .hdr__burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .hero { min-height: auto; grid-template-columns: 1fr; background: linear-gradient(160deg, var(--paper) 0 67%, var(--ink) 67%); }
  .hero__visual { height: 490px; }
  .hero__visual > img { right: 35%; width: 210px; }
  .hero__roll { right: -20%; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .industries, .trust, .quote { grid-template-columns: 1fr; gap: 3rem; }
  .industries__intro { position: static; }
  .industries__note { grid-column: auto; }
  .work__grid { grid-template-columns: 1fr; }
  .work-card img { height: min(60vw, 520px); }
}

@media (max-width: 640px) {
  h2 { font-size: 3.25rem; }
  .hdr { height: 74px; }
  .hdr__logo { width: 154px; }
  .hdr__logo img { height: 58px; }
  .nav { top: 74px; height: calc(100dvh - 74px); }
  .hero { padding-top: 124px; padding-bottom: 50px; }
  .hero h1 { font-size: clamp(4.3rem, 22vw, 6rem); }
  .hero__actions { display: grid; }
  .hero__visual { height: 410px; }
  .hero__visual > img { right: 28%; width: 170px; }
  .hero__roll { right: -75%; width: 180%; }
  .products, .industries, .trust, .work, .quote { padding-top: 100px; padding-bottom: 100px; }
  .product-grid { grid-template-columns: 1fr; }
  .industry-grid { grid-template-columns: 1fr; }
  .product-card--wide { grid-column: auto; display: block; }
  .product-card--wide > svg { margin: 1.2rem 0 2.2rem; }
  .work-card img { height: 340px; }
  .work-card--wide img { object-position: 47% center; }
  .form { padding: 1.35rem; box-shadow: 8px 8px 0 var(--orange); }
  .ftr { grid-template-columns: 1fr; gap: 2rem; }
  .ftr__bottom { grid-column: auto; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}