* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth}
body {
  margin:0;
  font:17px/1.65 system-ui,sans-serif}
a {
  color:inherit;
  text-underline-offset:.25em}
a:hover {
  text-decoration-thickness:2px}
a:focus-visible {
  outline:3px solid #fff;
  outline-offset:3px;
  box-shadow:0 0 0 7px #111}
a {
  border-radius:2px}
a:active {
  opacity:.8}
.skip {
  position:absolute;
  left:1rem;
  top:-8rem;
  z-index:20;
  background:#fff;
  color:#111;
  padding:1rem}
.skip:focus {
  top:1rem}
.wrap {
  width:min(1200px,calc(100% - 3rem));
  margin:auto}
header {
  padding:1.5rem 0}
nav {
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.4rem}
nav a {
  padding:.4rem 0;
  font-size:.9rem}
h1,h2,h3,p {
  margin:0 0 1.2rem}
h1,h2 {
  line-height:1.08;
  letter-spacing:-.04em}
h1 {
  font-size:clamp(3rem,6vw,6.3rem)}
h2 {
  font-size:clamp(2.1rem,4vw,4rem)}
h3 {
  font-size:1.25rem;
  line-height:1.3}
section {
  padding:5rem 0;
  scroll-margin-top:1rem}
img {
  display:block;
  width:100%;
  height:auto;
  object-fit:cover}
figure {
  margin:0}
figcaption {
  font-size:.78rem;
  padding:.6rem 0}
address {
  font-style:normal}
small,.micro {
  font-size:.84rem;
  line-height:1.65}
.eyebrow {
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:650}
.button {
  display:inline-block;
  padding:.85rem 1.4rem;
  text-decoration:none;
  font-size:.95rem;
  font-weight:650;
  border:1px solid currentColor}
.contact-details>div {
  padding:1rem 0}
.contact-details span {
  display:block;
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.1em}
.contact-details a {
  overflow-wrap:anywhere}
.steps {
  list-style:none;
  padding:0;
  margin:2rem 0 0;
  counter-reset:step}
.steps li {
  counter-increment:step}
.step-number {
  font-size:.85rem;
  font-weight:700;
  display:block;
  margin-bottom:1.2rem}
.brand {
  text-decoration:none;
  font-weight:750;
  letter-spacing:-.03em;
  font-size:1.35rem}
.monogram {
  margin-right:.7rem}
.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  font-size:.75rem}
footer {
  padding:2rem 0}
main {
  overflow:clip}
main:focus {
  outline:none}
@media(max-width:700px) {
  .wrap {
  width:calc(100% - 2rem)}
section {
  padding:3.5rem 0}
h1 {
  font-size:clamp(2.8rem,12vw,4.8rem)}
header {
  padding:1rem 0}
.nav {
  gap:1rem}
nav {
  gap:.3rem 1rem}
nav a {
  min-height:44px;
  display:flex;
  align-items:center}
.button {
  padding:.85rem 1rem}
footer {
  padding:1.5rem 0}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*::before,*::after {
  animation:none!important;
  transition:none!important}
}
body {
  background:#151515;
  color:#f4f1e8}
h1,h2 {
  font-family:Impact,"Arial Narrow",sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:-.025em}
h1 {
  font-size:clamp(3.2rem,6.5vw,7rem)}
.nav {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid #57513f;
  padding-bottom:1.4rem}
.brand {
  letter-spacing:.04em;
  text-transform:uppercase}
.monogram {
  color:#ddc381}
.executive-opening {
  padding-top:3rem}
.executive-grid {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:5rem}
.executive-grid h1 span {
  color:#ddc381}
.executive-aside {
  padding-top:1rem}
.button {
  background:#ddc381;
  color:#151515;
  border-color:#ddc381;
  text-transform:uppercase;
  font-size:.8rem;
  letter-spacing:.08em}
.executive-image {
  margin-top:2.5rem}
.executive-image img {
  height:270px;
  object-position:70%}
.dashboard {
  background:#242424;
  border-top:1px solid #57513f;
  border-bottom:1px solid #57513f}
.dashboard-title {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:3rem}
.dashboard-title>p {
  max-width:370px}
.metric-grid {
  display:grid;
  grid-template-columns:1fr 1.7fr;
  margin-top:2rem;
  border:1px solid #8e805f}
.market-panel {
  padding:2.5rem}
.market-panel strong {
  font-family:Impact,"Arial Narrow",sans-serif;
  font-size:3.8rem;
  color:#ddc381}
.operation-note {
  padding:2.5rem;
  align-self:center}
.executive-company {
  background:#f4f1e8;
  color:#151515}
.company-heading {
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:2rem;
  border-bottom:2px solid #151515;
  margin-bottom:3rem}
.textile-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:4rem;
  align-items:center}
.executive-products img {
  height:430px}
.executive-textile a {
  color:#ddc381}
.executive-process {
  border-top:1px solid #57513f}
.process-grid {
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:4rem}
.steps {
  margin:0}
.steps li {
  display:grid;
  grid-template-columns:3rem 1fr;
  gap:0 1rem;
  padding:1.5rem 0;
  border-top:1px solid #8e805f}
.steps li p {
  grid-column:2}
.step-number {
  color:#ddc381}
.contact {
  background:#ddc381;
  color:#151515}
.executive-contact {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4rem}
.contact .button {
  background:#151515;
  color:#f4f1e8;
  border-color:#151515}
footer {
  background:#090909;
  color:#f4f1e8}
@media(max-width:900px) {
  .executive-grid {
  gap:2.5rem}
.market-panel,.operation-note {
  padding:1.5rem}
.market-panel strong {
  font-size:3rem}
}
@media(max-width:700px) {
  .nav {
  display:block}
.nav nav {
  margin-top:1rem}
.brand {
  font-size:1.1rem}
.executive-grid,.textile-grid,.process-grid,.executive-contact {
  grid-template-columns:1fr;
  gap:2rem}
.executive-opening h1 {
  font-size:clamp(3rem,13vw,5.5rem)}
.dashboard-title,.company-heading {
  display:block}
.metric-grid {
  grid-template-columns:1fr}
.executive-products img {
  height:300px}
}