/* =========================================================
   Northwind Commerce — shared styles
   Pulled from the original design handoff. Edit with care.
   ========================================================= */

html { scroll-behavior: smooth; }

body {
  background: #0A0A0A;
  color: #F5F5F5;
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Grain texture overlay */
.grain::before {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: .035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Mono micro-label */
.eyebrow {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #9CA3AF;
}
.eyebrow .dot {
  display: inline-block; width: 6px; height: 6px; background: #FF5722; margin-right: 10px; transform: translateY(-2px);
}

/* Display headlines */
.display {
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: .95;
}
.display-xl { font-size: clamp(3rem, 7vw, 6rem); }
.display-lg { font-size: clamp(2.5rem, 5.5vw, 4.5rem); }
.display-md { font-size: clamp(2rem, 4vw, 3.25rem); }

/* Orange thin underline reveal on link hover */
.ulink { position: relative; display: inline-flex; align-items: center; gap: .5rem; }
.ulink::after {
  content: '';
  position: absolute; left: 0; bottom: -4px; height: 1px; width: 100%;
  background: #FF5722; transform-origin: right; transform: scaleX(0);
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
}
.ulink:hover::after { transform-origin: left; transform: scaleX(1); }
.ulink .arrow { transition: transform .35s ease; display: inline-block; }
.ulink:hover .arrow { transform: translateX(4px); }

/* Service / principle card */
.card {
  background: #141414;
  border: 1px solid #1F1F1F;
  transition: border-color .3s ease, transform .3s ease, background .3s ease;
  position: relative;
  overflow: hidden;
}
.card::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: #FF5722;
  transition: width .5s cubic-bezier(.2,.8,.2,1);
}
.card:hover { border-color: #2A2A2A; transform: translateY(-2px); background: #161616; }
.card:hover::after { width: 100%; }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: .6rem; padding: 14px 22px; font-weight: 600; font-size: 14px; letter-spacing: .01em; transition: all .25s ease; border-radius: 4px; cursor: pointer; border: none; }
.btn-primary { background: #FF5722; color: #0A0A0A; }
.btn-primary:hover { background: #FF6B35; transform: translateY(-1px); box-shadow: 0 12px 32px -10px rgba(255,87,34,.55); }
.btn-ghost { border: 1px solid #2A2A2A; color: #F5F5F5; background: transparent; }
.btn-ghost:hover { border-color: #FF5722; color: #FF6B35; }

/* Photo treatment: desaturated + warm tint + dark vignette */
.img-mood { filter: grayscale(.85) contrast(1.05) brightness(.55); transition: filter .6s ease, transform .9s ease; }
.img-mood-wrap { position: relative; overflow: hidden; }
.img-mood-wrap::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,.0) 0%, rgba(10,10,10,.55) 70%, rgba(10,10,10,.9) 100%),
              radial-gradient(120% 80% at 30% 20%, rgba(255,87,34,.10), transparent 60%);
  pointer-events: none;
}
.img-mood-wrap:hover .img-mood { filter: grayscale(.6) contrast(1.08) brightness(.62); transform: scale(1.03); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* Marquee */
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marq-track { display: flex; width: max-content; animation: marq 60s linear infinite; }

/* Form input */
.field {
  background: #0E0E0E;
  border: 1px solid #1F1F1F;
  color: #F5F5F5;
  padding: 14px 16px;
  width: 100%;
  border-radius: 4px;
  font-size: 15px;
  font-family: inherit;
  transition: border-color .25s ease, background .25s ease;
}
.field:focus { outline: none; border-color: #FF5722; background: #111111; }
.field::placeholder { color: #6B7280; }
.field-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #9CA3AF; margin-bottom: 8px; display: block; }

/* Hairline divider */
.hr-thin { height: 1px; background: #1A1A1A; }
.hr-orange { height: 1px; background: #FF5722; }

/* Nav scrolled state */
.nav-scrolled { background: rgba(10,10,10,.78); backdrop-filter: blur(14px); border-bottom-color: #181818 !important; }

/* Number counter */
.count { font-variant-numeric: tabular-nums; }

/* Subtle dotted grid */
.dotgrid {
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  background-position: -1px -1px;
}

/* Diagonal stripe placeholder used as fallback / accent panel */
.stripes {
  background-image: repeating-linear-gradient(45deg, #161616 0 14px, #111 14px 28px);
}

/* For the alternating service section image cards */
.frame { border: 1px solid #1F1F1F; }
.frame .corner { position: absolute; width: 14px; height: 14px; border: 1px solid #FF5722; }
.frame .corner.tl { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.frame .corner.tr { top: -1px; right: -1px; border-left: none; border-bottom: none; }
.frame .corner.bl { bottom: -1px; left: -1px; border-right: none; border-top: none; }
.frame .corner.br { bottom: -1px; right: -1px; border-left: none; border-top: none; }

/* Process step connector */
.step-line { height: 1px; background: linear-gradient(90deg, #2A2A2A, #FF5722 30%, #FF5722 70%, #2A2A2A); }

/* Mobile menu */
#mobileMenu { transform: translateY(-100%); transition: transform .35s cubic-bezier(.2,.8,.2,1); }
#mobileMenu.open { transform: translateY(0); }

/* Selection */
::selection { background: #FF5722; color: #0A0A0A; }

/* Page entry fade */
@keyframes pageFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
main { animation: pageFade .45s ease; }