:root {
  color-scheme: light;
  --color-ink: #191b20;
  --color-muted: #64666d;
  --color-soft: #f5f4f1;
  --color-line: #e7e5e0;
  --color-red: #d92732;
  --color-red-deep: #b71f29;
  --color-gold: #d7aa38;
  --color-gold-deep: #b88a22;
  --color-white: #fff;
  --color-green: #188b68;
  --font-body: "DM Sans", Arial, sans-serif;
  --font-heading: "Manrope", Arial, sans-serif;
  --container-width: 1200px;
  --page-gutter: clamp(22px, 5vw, 72px);
  --radius-small: 8px;
  --radius-card: 15px;
  --shadow-soft: 0 18px 48px rgba(28, 30, 34, .08);
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }
html { width: 100%; min-width: 320px; scroll-behavior: smooth; scroll-padding-top: 100px; overflow-x: clip; }
body {
  display: flex;
  width: auto;
  min-width: 320px;
  max-width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  flex-direction: column;
  margin: 0;
  overflow-x: clip;
  background: var(--color-white);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body, button, input, select, textarea { font-family: var(--font-body); }
main { width: 100%; flex: 1 0 auto; }
body > .site-header, body > main, body > .site-footer { width: 100%; }
body > .site-footer { flex-shrink: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { color: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid rgba(217, 39, 50, .45);
  outline-offset: 4px;
}
::selection { background: rgba(217, 39, 50, .16); color: var(--color-ink); }
.container { width: min(var(--container-width), calc(100% - var(--page-gutter) * 2)); margin-inline: auto; }
.section { padding-block: clamp(76px, 10vw, 132px); }
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  color: #77716c;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .17em;
  line-height: 1.4;
}
.eyebrow > span { width: 23px; height: 2px; background: var(--color-red); }
.eyebrow--light { color: rgba(255,255,255,.76); }
.eyebrow--light > span { background: var(--color-gold); }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-heading); }
h1, h2 { font-weight: 700; letter-spacing: -.052em; line-height: 1.08; }
h1 em, h2 em { color: var(--color-red); font-style: normal; }
.skip-link {
  position: fixed; z-index: 1000; top: 10px; left: 10px; padding: 10px 14px;
  transform: translateY(-160%); background: var(--color-ink); color: white; border-radius: 4px;
}
.skip-link:focus { transform: translateY(0); }
.reading-progress { position: fixed; z-index: 1001; inset: 0 auto auto 0; width: 100%; height: 3px; pointer-events: none; }
.reading-progress span { display: block; width: 0; height: 100%; background: var(--color-red); }
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .65s var(--ease-out), transform .65s var(--ease-out); }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
.js.reveal-static .reveal { opacity: 1; transform: none; transition: none; }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: var(--color-ink); font-size: 13px; font-weight: 700; }
.text-link span { color: var(--color-red); transition: transform .25s var(--ease-out); }
.text-link:hover span { transform: translate(4px, -2px); }
.text-link--light { color: white; }
.text-link--light span { color: var(--color-gold); }
.card-kicker { display: block; color: #8a8781; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.button {
  position: relative; display: inline-flex; min-height: 50px; align-items: center; justify-content: center; gap: 15px;
  padding: 0 23px; border: 1px solid transparent; border-radius: 4px; cursor: pointer;
  font-size: 12px; font-weight: 700; line-height: 1.3; transition: color .25s, background .25s, border-color .25s, transform .25s, box-shadow .25s;
}
.button span { font-size: 16px; transition: transform .25s var(--ease-out); }
.button:hover { transform: translateY(-2px); }
.button:hover span { transform: translateX(3px); }
.button--gold { background: var(--color-gold); color: #181818; box-shadow: 0 8px 20px rgba(215, 170, 56, .18); }
.button--gold:hover { background: #e1ba53; box-shadow: 0 12px 24px rgba(215, 170, 56, .28); }
.button--red { background: var(--color-red); color: white; box-shadow: 0 8px 20px rgba(217, 39, 50, .17); }
.button--red:hover { background: var(--color-red-deep); box-shadow: 0 12px 24px rgba(217, 39, 50, .25); }
.button--dark { background: var(--color-ink); color: white; }
.button--dark:hover { background: #30343a; }
.button--outline { border-color: rgba(25,27,32,.23); background: white; color: var(--color-ink); }
.button--outline:hover { border-color: var(--color-ink); background: var(--color-ink); color: white; }
.image-arrow { position: absolute; right: 15px; bottom: 15px; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: white; color: var(--color-ink); transition: transform .25s, background .25s, color .25s; }
.page-masthead { position: relative; min-height: 385px; display: flex; align-items: end; overflow: hidden; background: #1e2226; color: white; }
.page-masthead::before, .closing-cta::before, .contact-bottom::before { position: absolute; inset: 0; content: ""; pointer-events: none; background: linear-gradient(100deg, rgba(17,19,22,.91) 0%, rgba(17,19,22,.76) 51%, rgba(17,19,22,.35) 100%); }
.page-masthead::after { position: absolute; right: 4%; top: 0; width: 310px; height: 100%; content: "A.H."; color: rgba(255,255,255,.055); font: 800 clamp(130px, 23vw, 300px)/1 var(--font-heading); display: grid; place-items: center; pointer-events: none; }
.page-masthead__inner { position: relative; z-index: 1; padding-block: 35px 78px; }
.page-masthead h1 { max-width: 720px; margin: 0 0 17px; font-size: clamp(48px, 7.1vw, 82px); }
.page-masthead h1 em, .closing-cta h2 em, .contact-bottom h2 em { color: var(--color-gold); }
.page-masthead__inner > p:last-child { max-width: 540px; margin-bottom: 0; color: rgba(255,255,255,.76); font-size: 16px; }
.page-masthead__index { position: absolute; z-index: 1; right: var(--page-gutter); bottom: 38px; color: rgba(255,255,255,.56); font-size: 10px; font-weight: 700; letter-spacing: .18em; }
.breadcrumb { display: flex; gap: 11px; margin-bottom: 37px; color: rgba(255,255,255,.6); font-size: 11px; }
.breadcrumb a:hover { color: white; }
.breadcrumb span:last-child { color: white; }
.page-masthead--about { background: #262928 url("../images/business/stock-handling.webp") center 42%/cover no-repeat; }
.page-masthead--products { background: #222625 url("../images/workshop/wood-material.webp") center 47%/cover no-repeat; }
.page-masthead--services { background: #222827 url("../images/business/warehouse-interior.webp") center 49%/cover no-repeat; }
.page-masthead--gallery { background: #242521 url("../images/products/precision-cutting.webp") center 48%/cover no-repeat; }
.closing-cta, .contact-bottom { position: relative; overflow: hidden; padding-block: 75px; background: #1c2023; color: white; }
.closing-cta::before, .contact-bottom::before { background: radial-gradient(ellipse at 82% 40%, rgba(217,39,50,.19), transparent 34%), linear-gradient(110deg, #1b1f22, #252a2c); }
.closing-cta__inner, .contact-bottom__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 35px; }
.closing-cta h2, .contact-bottom h2 { margin: 0; font-size: clamp(36px, 5.1vw, 59px); }
.closing-cta__inner > .button, .contact-bottom__inner > .button { flex-shrink: 0; }
.admin-page { min-height: 100vh; background: #f7f6f3; }
.admin-header { display: flex; min-height: 82px; align-items: center; justify-content: space-between; gap: 20px; padding: 10px var(--page-gutter); border-bottom: 1px solid var(--color-line); background: white; }
.admin-header .brand__mark { width: 51px; height: 47px; }
.admin-header .brand__text strong { font-size: 13px; }
.admin-header .brand__text > span { font-size: 9px; }
.admin-main { display: grid; min-height: calc(100vh - 82px); place-items: center; padding: 56px var(--page-gutter); }
.admin-card { width: min(100%, 700px); padding: clamp(28px, 6vw, 56px); border: 1px solid var(--color-line); border-radius: 12px; background: white; box-shadow: var(--shadow-soft); }
.admin-card__eyebrow { display: inline-flex; margin-bottom: 18px; color: #8a8781; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.admin-card h1 { margin: 0 0 20px; font-size: clamp(42px, 7vw, 62px); }
.admin-card > p { color: var(--color-muted); }
.admin-card h2 { margin: 32px 0 12px; font-size: 18px; letter-spacing: -.03em; }
.admin-card ol { padding-left: 22px; color: var(--color-muted); }
.admin-card li { margin: 7px 0; }
.admin-card code { padding: 2px 5px; border-radius: 4px; background: var(--color-soft); color: var(--color-ink); font-size: .9em; }
.admin-warning { margin: 24px 0; padding: 18px 20px; border-left: 3px solid var(--color-red); background: #fff7f6; }
.admin-warning strong { display: block; margin-bottom: 4px; font-size: 13px; }
.admin-warning p { margin: 0; color: var(--color-muted); font-size: 13px; }
.admin-back { margin: 25px 0 0; font-size: 13px; }
.admin-back a { color: var(--color-red); font-weight: 700; }

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