@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&display=swap');

:root {
  --castle-ink: #111a38;
  --castle-muted: #64748b;
  --castle-paper: #f8fafc;
  --castle-card: #ffffff;
  --castle-line: #e2e8f0;
  --castle-oak: #E8600A;
  --castle-coral: #ff7f30;
  --castle-moss: #1C2B5E;
  --castle-deep: #0b1226;
  --castle-shadow: 0 22px 60px rgba(28, 43, 94, .08);
}

html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  background: var(--castle-paper) !important;
  color: var(--castle-ink) !important;
  font-family: "DM Sans", sans-serif !important;
  letter-spacing: -.012em;
}
body::before {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 80;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}
h1, h2, h3, h4 { font-family: "Fraunces", serif !important; letter-spacing: -.045em; }
h1 { font-weight: 600 !important; }
p { line-height: 1.72; }
.text-muted-foreground { color: var(--castle-muted) !important; }
.text-foreground { color: var(--castle-ink) !important; }
.bg-background { background: var(--castle-paper) !important; }
.bg-card { background: var(--castle-card) !important; }
.bg-muted\/30 { background: #f1f5f9 !important; }
.text-primary { color: var(--castle-oak) !important; }

#site-header {
  height: 86px;
  background: rgba(248,250,252,.88) !important;
  border-bottom: 1px solid rgba(17,26,56,.1) !important;
  box-shadow: 0 8px 28px rgba(17,26,56,.05) !important;
  backdrop-filter: blur(18px);
}
#site-header.header-transparent {
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}
#site-header .header-ink { color: var(--castle-ink) !important; }
#site-header.header-transparent .header-ink { color: #fff !important; }
#site-header .nav-active { color: var(--castle-oak) !important; position: relative; }
#site-header nav a { font-size: .79rem; letter-spacing: .035em; text-transform: uppercase; }
#site-header nav a:not(.nav-active):hover { color: var(--castle-oak) !important; }
#site-header > div { max-width: 1380px; }
#site-header img { filter: saturate(.8); }

.btn {
  min-height: 46px !important;
  border-radius: 999px !important;
  padding-inline: 1.35rem !important;
  font-size: .78rem !important;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease !important;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.btn:hover { transform: translateY(-2px); }
.btn-icon { padding-inline: 0 !important; }
.btn-primary, .bg-primary {
  background: var(--castle-oak) !important;
  color: #fff !important;
  border-color: var(--castle-oak) !important;
  box-shadow: 0 10px 22px rgba(232, 96, 10, .23);
}
.btn-primary:hover { background: #cc5408 !important; box-shadow: 0 15px 28px rgba(232, 96, 10, .3); }
.btn-outline { border: 1px solid var(--castle-ink) !important; background: transparent !important; }
.btn-outline:hover { background: var(--castle-ink) !important; color: #fff !important; }

main > section { position: relative; }
main > section > div:not(.absolute) { max-width: 1380px !important; }
main > section:not(:first-child) { overflow: hidden; }
section.py-20 { padding-top: 8rem !important; padding-bottom: 8rem !important; }
section.py-16 { padding-top: 7rem !important; padding-bottom: 7rem !important; }
section h1 { font-size: clamp(3rem, 7vw, 6.8rem) !important; line-height: .94 !important; }
section h2 { font-size: clamp(2.35rem, 4vw, 4.2rem) !important; line-height: 1.02 !important; }
section h3 { letter-spacing: -.03em; }

/* Home hero: editorial scale and a quiet, warm overlay -> updated to cooler/neutral for Weldtech */
body:has(#site-header[data-home]) main > section:first-child { min-height: 840px; }
body:has(#site-header[data-home]) main > section:first-child img { transform: scale(1.03); }
body:has(#site-header[data-home]) main > section:first-child > div:first-child::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11,18,38,.85) 0%, rgba(11,18,38,.68) 42%, rgba(11,18,38,.68) 100%);
}
body:has(#site-header[data-home]) main > section:first-child > div:nth-child(2) {
  max-width: 1380px; width: 100%; text-align: left; padding-left: clamp(1rem,7vw,7rem);
}
body:has(#site-header[data-home]) main > section:first-child h1 {
  max-width: 880px; font-size: clamp(3.8rem, 8vw, 8.2rem) !important;
}
body:has(#site-header[data-home]) main > section:first-child h1 .text-primary { color: #f97316 !important; }
body:has(#site-header[data-home]) main > section:first-child p { max-width: 690px; }
body:has(#site-header[data-home]) main > section:first-child .text-primary:first-child {
  color: #fb923c !important; text-transform: uppercase; letter-spacing: .2em;
}
body:has(#site-header[data-home]) main > section:first-child .btn-lg { min-height: 56px !important; }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .85s cubic-bezier(.2,.75,.25,1), transform .85s cubic-bezier(.2,.75,.25,1); }
.reveal.show { opacity: 1; transform: none; }
.grid > .reveal:nth-child(2) { transition-delay: .08s; }
.grid > .reveal:nth-child(3) { transition-delay: .16s; }
.grid > .reveal:nth-child(4) { transition-delay: .24s; }
.grid > .reveal:nth-child(5) { transition-delay: .32s; }
.grid > .reveal:nth-child(6) { transition-delay: .40s; }

/* cards and image treatments */
.rounded-xl, .rounded-2xl { border-radius: 1.25rem !important; }
.border-border { border-color: var(--castle-line) !important; }
.shadow-xl, .shadow-2xl { box-shadow: var(--castle-shadow) !important; }
.group.bg-card, .bg-card.border { transition: transform .35s ease, box-shadow .35s ease; }
.group.bg-card:hover, .bg-card.border:hover { transform: translateY(-7px); box-shadow: var(--castle-shadow); }
img { image-rendering: auto; }
.group img { transition: transform .8s cubic-bezier(.2,.7,.2,1) !important; }
.group:hover img { transform: scale(1.06); }

/* generous, gallery-like feature imagery */
section .aspect-video, section .aspect-\[4\/3\] { box-shadow: var(--castle-shadow); }
section .aspect-video img, section .aspect-\[4\/3\] img { filter: saturate(.9) contrast(1.03); }
.bento-caption { opacity: 0; transition: opacity .35s ease; }
.group:hover .bento-caption { opacity: 1; }

/* Inner page mastheads */
body:not(:has(#site-header[data-home])) main { padding-top: 86px !important; }
body:not(:has(#site-header[data-home])) main > section:first-child {
  background: linear-gradient(135deg, #e2e8f0 0%, var(--castle-paper) 58%);
}
body:not(:has(#site-header[data-home])) main > section:first-child::before {
  content: ""; position: absolute; width: 360px; height: 360px; right: 4%; top: 8%;
  border: 1px solid rgba(232, 96, 10, .22); border-radius: 50%;
  box-shadow: 0 0 0 28px rgba(232, 96, 10, .035), 0 0 0 58px rgba(232, 96, 10, .025);
}

/* forms */
.form-input {
  min-height: 50px !important; border-radius: .75rem !important;
  border-color: var(--castle-line) !important; background: #ffffff !important;
  color: var(--castle-ink) !important; border-width: 1px; width: 100%; padding: 0.75rem 1rem;
}
.form-input:focus { border-color: var(--castle-oak) !important; box-shadow: 0 0 0 3px rgba(232, 96, 10, .13) !important; outline: none; }

footer { background: var(--castle-deep) !important; color: #fff !important; }
footer .text-primary { color: #f97316 !important; }
footer a:hover { color: #f97316 !important; }
footer .border-background\/20 { border-color: rgba(255,255,255,.14) !important; }
footer .text-background\/70 { color: rgba(255,255,255,.7) !important; }
footer .text-background\/50 { color: rgba(255,255,255,.5) !important; }

#toast { border-radius: 1rem !important; }

@media (max-width: 767px) {
  #site-header { height: 72px; }
  #site-header .h-20 { height: 72px; }
  #site-header img { height: 44px; }
  body:has(#site-header[data-home]) main > section:first-child { min-height: 760px; }
  body:has(#site-header[data-home]) main > section:first-child > div:nth-child(2) { padding: 8rem 1.25rem 4rem; }
  body:has(#site-header[data-home]) main > section:first-child h1 { font-size: clamp(2.6rem, 11vw, 4.2rem) !important; }
  body:has(#site-header[data-home]) main > section:first-child h1 .text-primary { letter-spacing: .05em; font-size: .82em; }
  section.py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
  section.py-16 { padding-top: 4.5rem !important; padding-bottom: 4.5rem !important; }
  body:not(:has(#site-header[data-home])) main { padding-top: 72px !important; }
}