/* =========================================================
   SUN ENGINEERING WORKS — STYLESHEET
   =========================================================

   HOW THIS FILE IS ORDERED
   ---------------------------------------------------------
   PART A — SETUP           (1–3)    tokens, reset, helpers
   PART B — COMPONENTS      (4–5)    buttons, header/nav
   PART C — PAGE SECTIONS   (6–20)   in the order they appear
                                     on the page, top to bottom
   PART D — UTILITIES       (21–23)  loader, reveal, placeholders
   PART E — RESPONSIVE      (24)     EVERY media query, in one
                                     place, largest → smallest
   PART F — TRAILING RULES  (25)     must stay last (see note)

   TABLE OF CONTENTS
   ---------------------------------------------------------
   PART A — SETUP
   1.  Design Tokens (CSS Variables) — edit colors / fonts here
   2.  Base Reset & Typography
   3.  Layout Helpers (container, section)

   PART B — COMPONENTS
   4.  Buttons
   5.  Header / Navigation

   PART C — PAGE SECTIONS (top to bottom)
   6.  Hero
   7.  Hero Spiral / Rotating Thread
   8.  Page Header (interior pages)
   9.  Page Header Thread Animation
   10. Section Headings
   11. Services
   12. Rolled Threads Info
   13. Capabilities
   14. Products (detailed horizontal layout)
   15. Thread Forms
   16. Gallery
   17. About
   18. CTA Banner
   19. Contact
   20. Footer

   PART D — UTILITIES
   21. Loader
   22. Reveal Animations
   23. Image Placeholders

   PART E — RESPONSIVE (all breakpoints together)
   24. Responsive
       24a. Large laptop      — max-width: 1200px
       24b. Tablet            — max-width: 1024px
       24b-2. Tablet only     — 769px to 1024px (odd last card)
       24c. Small tablet      — max-width: 991px  (mobile menu)
       24d. Mobile            — max-width: 768px
       24e. Small mobile      — max-width: 480px
       24f. Reduced motion    — prefers-reduced-motion

   PART F — CASCADE-CRITICAL
   25. Trailing Rules (leave at the bottom)

   ---------------------------------------------------------
   WHAT CHANGED IN THIS VERSION (responsive fix)
   ---------------------------------------------------------
   PARTS A–D ARE UNTOUCHED. The desktop design is exactly the
   same. Every fix below lives inside a media query in Part E
   or Part F, so nothing can leak onto desktop.

   • Mobile menu — .menu-toggle was hidden forever and the
     nav links never collapsed. Now, at 991px and below, the
     hamburger shows and the links become a dropdown panel.
     The panel opens when .nav-links gets the class "open"
     (also accepts active / show / is-open).

   • Old mobile block removed from Part F. It was setting
     .service-card to width:300px inside a section with 60px
     side padding (so cards overflowed the screen), forcing
     EVERY .btn to 240px wide, giving .section-title1 a
     max-width of 240px at 3.2rem, and shrinking the hero
     text to 10–12px. Those rules are replaced with
     proper mobile values in 24d.

   • Parallax (background-attachment: fixed) is switched off
     at 1024px and below. Mobile browsers (especially iOS)
     render it zoomed, jumpy, or blank.

   • Section padding (140px / 100px on all sides) is scaled
     down for tablet and mobile.

   • Grids: 3-column grids become 2 columns on tablet and 1
     column on mobile. Two-column layouts (rolled, about,
     capabilities, contact, product rows) stack on mobile.
     Reversed product rows no longer flip the order.

   • CTA banner — title had white-space: nowrap so it ran off
     the screen. It now wraps, and the banner stacks at 991px.

   • Inputs are 16px on mobile so iPhones don't zoom in
     when a field is tapped.

   • Section 25.1 (footer stacking) was labelled "Mobile" but
     had no media query, so it flattened the desktop footer into
     one centred column. It is now wrapped in max-width: 768px,
     so desktop shows 4 columns, 769–991px shows 2 columns and
     phones show 1 centred column.

   • Section 25.2 (hero framing) is split into two independent
     media queries: desktop (1025px and up) and tablet/mobile
     (1024px and below). Edit one without touching the other.
   ========================================================= */




/* #########################################################
   PART A — SETUP
   ######################################################### */


/* =========================================================
   1. DESIGN TOKENS — change colors, fonts, spacing here
   ========================================================= */
:root {
  /* Brand Colors */
  --yellow-1: #FFC400;
  --yellow-2: #FFB300;
  --yellow-grad: linear-gradient(135deg, #FFC400, #FFB300);

  /* Neutrals */
  --charcoal: #1E1E1E;
  --dark-gray: #555555;
  --text: #222222;
  --white: #FFFFFF;
  --alt-bg: #F8F9FA;
  --border: #E5E7EB;
  --muted: #6B7280;

  /* Typography */
  --font-head: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Spacing (8px system) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  /* Radius */
  --radius-sm: 8px;
  --radius: 14px;
  --radius-lg: 20px;

  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.12);

  /* Transitions */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 0.2s var(--ease);
  --t: 0.4s var(--ease);
}


/* =========================================================
   2. BASE RESET & TYPOGRAPHY
   ========================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  font-size: 16px;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.2;
  color: var(--charcoal);
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast);
}

img { max-width: 100%; display: block; }

ul { list-style: none; }


/* =========================================================
   3. LAYOUT HELPERS
   ========================================================= */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-2);
}

.section { padding: var(--space-3) 0; }
.section.alt { background: var(--alt-bg); }




/* #########################################################
   PART B — COMPONENTS
   ######################################################### */


/* =========================================================
   4. BUTTONS
   ========================================================= */

/* --- 4.1 Base ------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: 14px 28px;
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  will-change: transform;
}
.btn:active { transform: translateY(1px); }

/* --- 4.2 Variants -------------------------------------- */
.btn-primary {
  background: var(--yellow-grad);
  color: var(--charcoal);
  box-shadow: 0 4px 14px rgba(255,179,0,0.35);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(255,179,0,0.45);
}

.btn-ghost {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.5);
}
.btn-ghost:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--white);
}

.btn-light {
  background: var(--white);
  color: var(--charcoal);
}
.btn-light:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

/* --- 4.3 Sizes & modifiers ----------------------------- */
.btn-sm { padding: 18px 22px; font-size: 0.85rem; }
.btn-block { width: 100%; }

/* --- 4.4 Button groups --------------------------------- */
.capability-buttons {
  display: flex;
  justify-content: center;
  gap: 70px;
  margin-top: 40px;
  flex-wrap: wrap;
}
.capability-buttons .btn {
  flex: 1;
  max-width: 220px;
  min-width: 180px;
  text-align: center;
}


/* =========================================================
   5. HEADER / NAVIGATION
   ========================================================= */

/* --- 5.1 Bar ------------------------------------------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: var(--space-2) 0;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background var(--t), border-color var(--t), box-shadow var(--t), transform 0.35s ease;
}
/* Hidden while scrolling down (js/main.js); slides back when scrolling up */
.header.header-hidden { transform: translateY(calc(-100% - 16px)); }
.header.scrolled {
  background: rgba(255,255,255,0.95);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* --- 5.2 Logo ------------------------------------------ */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-mark {
  width: 48px;       /* Adjust as needed */
  height: 48px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}
.logo-text {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--charcoal);
}

/* --- 5.3 Links ----------------------------------------- */
.nav-links {
  display: flex;
  align-items: center;          /* keeps text links and the Contact button on one line */
  gap: var(--space-3);
}
.nav-links li { display: flex; align-items: center; }
.nav-link {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--dark-gray);
  position: relative;
  padding: 6px 0;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--yellow-grad);
  transition: width var(--t);
}
.nav-link:hover,
.nav-link.active { color: var(--charcoal); }
.nav-link:hover::after,
.nav-link.active::after { width: 100%; }

/* Contact stands out as a button */
.nav-link.nav-cta {
  padding: 8px 20px;
  border-radius: 999px;
  background: var(--yellow-1);
  color: var(--charcoal);
  font-weight: 600;
  transition: background var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.nav-link.nav-cta::after { display: none; }
.nav-link.nav-cta:hover { background: var(--yellow-2); box-shadow: 0 4px 14px rgba(255,179,0,0.35); transform: translateY(-1px); }
.nav-link.nav-cta.active { background: var(--charcoal); color: var(--yellow-1); }

/* --- 5.4 Hamburger (mobile toggle) --------------------- */
.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.menu-toggle span {
  width: 24px; height: 2px;
  background: var(--charcoal);
  transition: transform var(--t), opacity var(--t);
}
.menu-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.open span:nth-child(2) { opacity: 0; }
.menu-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }




/* #########################################################
   PART C — PAGE SECTIONS (top to bottom)
   ######################################################### */


/* =========================================================
   6. HERO
   ========================================================= */

/* --- 6.1 Shell ----------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: var(--charcoal);
  overflow: hidden;
}

/* --- 6.2 Background overlay ---------------------------- */
.hero-overlay {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.hero-overlay::before {
  content: "";
  position: absolute;
  inset: -20px; /* Prevent white edges after blur */

  background:
    linear-gradient(
      rgba(0,0,0,0.65),
      rgba(0,0,0,0.88)
    ),
    radial-gradient(
      circle at 75% 30%,
      rgba(255,196,0,0.20),
      transparent 55%
    ),
    url("../images/hero-bg.jpg");


  background-position: center;
  background-repeat: no-repeat;

  filter: blur(2.5px);    /* Increase to 6px or 8px if needed */
  transform: scale(1.05); /* Prevent blur edges from showing */
}

/* --- 6.3 Content --------------------------------------- */
.hero-content {
  position: relative;
  z-index: 2;

  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 0 16px;
}

.hero-eyebrow {
  font-family: var(--font-head);
  font-size: 0.85rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--yellow-1);
  margin-bottom: var(--space-2);
}
.hero-title {
  font-size: clamp(2.4rem, 6vw, 4.6rem);
  color: var(--white);
  margin-bottom: var(--space-2);
}
.hero-title .accent {
  background: var(--yellow-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-subtitle {
  font-size: 1.4rem;
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--space-4);
  max-width: 900px;
}

.hero-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* --- 6.4 Scroll cue ------------------------------------ */
.hero-scroll {
  position: absolute;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.scroll-line {
  display: block;
  width: 2px; height: 48px;
  background: linear-gradient(var(--yellow-1), transparent);
  animation: scrollPulse 2s var(--ease) infinite;
}
@keyframes scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
  50%      { opacity: 1; transform: scaleY(1); }
}


/* =========================================================
   7. HERO SPIRAL / ROTATING THREAD
   ========================================================= */

/* --- 7.1 Container ------------------------------------- */
.hero-spiral {
  position: absolute;
  top: -15%;
  right: 4%;

  width: min(30vw, 420px);
  height: 130%;

  z-index: 1;
  pointer-events: none;
  opacity: 0.75;
  overflow: hidden;

  transform: rotate(8deg);
}

/* --- 7.2 SVG ------------------------------------------- */
.hero-spiral svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
  animation: spiralFloat 30s linear infinite;
}

/* --- 7.3 Spiral line ----------------------------------- */
.spiral-path {
  fill: none;
  stroke: url(#spiralGradient);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter:
    drop-shadow(0 0 4px rgba(255,196,0,0.35))
    drop-shadow(0 0 12px rgba(255,196,0,0.12));
}

/* --- 7.4 Glow ------------------------------------------ */
.hero-spiral::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at center,
      rgba(255,196,0,0.08),
      transparent 60%
    );
  pointer-events: none;
  animation: spiralGlow 4s ease-in-out infinite alternate;
}

/* --- 7.5 Keyframes ------------------------------------- */

/* Continuous top → bottom movement */
@keyframes spiralFloat {
  0%   { transform: translateY(-18%) rotate(0deg); }
  50%  { transform: translateY(0%) rotate(2deg); }
  100% { transform: translateY(18%) rotate(0deg); }
}

@keyframes spiralGlow {
  from { opacity: 0.35; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1.1); }
}


/* =========================================================
   8. PAGE HEADER (interior pages)
   ========================================================= */

/* --- 8.1 Variant A: .page-header ----------------------- */
.page-header {
  padding: calc(var(--space-7) + 40px) 0 var(--space-5);
  background: var(--charcoal);
  position: relative;
  overflow: hidden;
}
.page-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 20%, rgba(255,196,0,0.15), transparent 55%);
}
.page-header .container {
  position: relative;
  z-index: 2;
}

/* --- 8.2 Variant B: .page-header1 ---------------------- */
.page-header1 {
  position: relative;
  width: 100%;
  min-height: 350px;

  display: flex;
  align-items: center;

  overflow: hidden;
  isolation: isolate;

  background: linear-gradient(
    110deg,
    #1c1c1c 0%,
    #202020 50%,
    #302d20 100%
  );
}

.header-content1 {
  position: relative;
  z-index: 10;
  width: 100%;

  /* Keep content LEFT aligned */
  text-align: left;

  /* Move the content slightly lower */
  transform: translateY(30px);
}

/* --- 8.3 Header text ----------------------------------- */
.page-title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: var(--white);
  margin-bottom: var(--space-1);
}
.page-intro {
  color: rgba(255,255,255,0.8);
  max-width: 700px;
  font-size: 1.1rem;
}


/* =========================================================
   9. PAGE HEADER THREAD ANIMATION
   ========================================================= */

/* --- 9.1 Container — declared twice in the original.
       Both kept; the SECOND one wins (top 60%, opacity .08). */
.header-thread {
  position: absolute;
  left: 0;
  top: 50%;

  width: 100%;
  height: 300px;

  transform: translateY(-50%);

  z-index: 1;
  pointer-events: none;
  opacity: 0.10;
}

.header-thread {
  position: absolute;
  top: 60%;
  left: 0;

  width: 100%;
  height: 300px;

  transform: translateY(-50%);

  overflow: hidden;
  pointer-events: none;
  z-index: 1;

  /* Keep it subtle behind the text */
  opacity: 0.08;
}

/* --- 9.2 SVG ------------------------------------------- */
.thread-svg {
  position: absolute;
  top: 0;
  left: 0;

  /* TWO IDENTICAL PATTERNS */
  width: 200%;
  height: 100%;

  display: block;
  overflow: visible;

  /* SLOW, CONTINUOUS MOVEMENT */
  animation: threadInfinite 28s linear infinite;

  will-change: transform;
}

/* --- 9.3 Stroke ---------------------------------------- */
.thread-path {
  fill: none;
  stroke: #ffffff;

  /* Thin clean engineering line */
  stroke-width: 4;

  stroke-linecap: round;
  stroke-linejoin: round;

  vector-effect: non-scaling-stroke;

  /* Very subtle glow */
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.15));
}

/* --- 9.4 Seamless infinite loop ------------------------
   SVG is 200% wide.
   First pattern  = 0   → 600
   Second pattern = 600 → 1200
   Moving -50% moves exactly one pattern width, so the first
   and last frames are IDENTICAL and there is no jump. */
@keyframes threadInfinite {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}


/* =========================================================
   10. SECTION HEADINGS
   ========================================================= */
.section-head { margin-bottom: var(--space-5); }
.section-head.center { text-align: center; }

.section-tag {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--yellow-2);
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.section-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: var(--space-2);
}
.section-title1 {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  margin-bottom: var(--space-2);
  color: #FFFFFF;
}

.section-intro {
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto;
  font-size: 1.05rem;
}


/* =========================================================
   11. SERVICES
   ========================================================= */

/* --- 11.1 Section background --------------------------- */
.section-services {
  padding: 140px;
  background:
    linear-gradient(
      135deg,
      #1E1E1E 0%,
      #2B2B2B 60%,
      rgba(255,196,0,0.18) 100%
    ),
    url("../images/services-bg.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Parallax */
  background-attachment: fixed;
}

/* --- 11.2 Grid ----------------------------------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}

/* --- 11.3 Card ----------------------------------------- */
.service-card {
  background-color: #FFFFFF;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

/* --- 11.4 Icon ----------------------------------------- */
.service-icon {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--alt-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-3);
  color: var(--yellow-2);
  transition: background var(--t), color var(--t);
}
.service-card:hover .service-icon {
  background: var(--yellow-grad);
  color: var(--charcoal);
}
.service-icon svg { width: 32px; height: 32px; }
.service-icon1 svg { width: 32px; height: 32px; }

/* --- 11.5 Card text ------------------------------------ */
.service-name { font-size: 1.25rem; margin-bottom: var(--space-1); }
.service-desc { color: var(--muted); }


/* =========================================================
   12. ROLLED THREADS INFO
   ========================================================= */

/* --- 12.1 Section background --------------------------- */
.rolled-threads {
  padding: 140px;
  background:
    linear-gradient(
      270deg,
      #1E1E1E 0%,
      #2B2B2B 60%,
      rgba(255,196,0,0.18) 100%
    ),
    url("../images/spiral-bg.png");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Parallax */
  background-attachment: fixed;
}

/* --- 12.2 Grid ----------------------------------------- */
.rolled-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}

/* --- 12.3 Image ---------------------------------------- */
.rolled-image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius);
}
.rolled-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 12.4 Text blocks ---------------------------------- */
.rolled-block { margin-bottom: var(--space-3); }
.rolled-sub {
  font-size: 1.15rem;
  color: var(--yellow-1);
  display: inline;
}
.rolled-block p { display: inline; color: var(--border); }


/* =========================================================
   13. CAPABILITIES
   ========================================================= */
.section-capabilities {
  padding: 100px;
  background:
    radial-gradient(
      circle at top center,
      rgba(255,196,0,0.08),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #FFFFFF 0%,
      #F5F5F5 25%,
      #E3E3E3 55%,
      #C7C7C7 100%
    );
    /* url("../images/spiral-bg.png"); */

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.capabilities-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}
.capabilities-text {
  font-size: 1.1rem;
  color: var(--dark-gray);
}


/* =========================================================
   14. PRODUCTS — DETAILED HORIZONTAL LAYOUT
   ========================================================= */

/* --- 14.1 Detail rows (Products and Forms pages) ------- */
.detail-item {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border);
}
.detail-item1 {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--space-7);
  align-items: center;
  padding: var(--space-5) 0;
  border-bottom: 1px solid var(--border);
}
.detail-item:last-child { border-bottom: none; }

/* --- 14.2 Reversed row --------------------------------- */
.detail-item.reverse { grid-template-columns: 6fr 5fr; }
.detail-item.reverse .detail-media { order: 2; }
.detail-item.reverse .detail-body { order: 1; }

/* --- 14.3 Media ---------------------------------------- */
.detail-media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.detail-media1 {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 7.8 / 3;
}
.detail-media .img-placeholder { min-height: 100%; height: 100%; }

/* --- 14.4 Body ----------------------------------------- */
.detail-body { padding: var(--space-2); }
.detail-body.full { grid-column: 1 / -1; text-align: center; }

.detail-index {
  display: inline-block;
  font-family: var(--font-head);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--yellow-2);
  letter-spacing: 2px;
  margin-bottom: var(--space-1);
}
.detail-title {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  margin-bottom: var(--space-2);
}
.detail-desc {
  color: var(--dark-gray);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 560px;
}
.detail-item.reverse .detail-desc { margin-left: auto; }

/* --- 14.5 Legacy product card grid
       (kept for reference, unused on detail pages) ------ */
.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.product-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--t), box-shadow var(--t);
}
.product-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.product-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.product-body { padding: var(--space-3); }
.product-name { font-size: 1.3rem; margin-bottom: var(--space-1); }
.product-desc { color: var(--muted); font-size: 0.95rem; }

/* --- 14.6 Additional operations ------------------------ */
.additional-ops {
  margin-top: var(--space-5);
  text-align: center;
  padding: var(--space-4);
  background: var(--alt-bg);
  border-radius: var(--radius);
}
.additional-title { font-size: 1.5rem; margin-bottom: var(--space-1); }
.additional-text { color: var(--muted); margin-bottom: var(--space-3); }

.additional-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
}
.additional-list li {
  padding: 8px 18px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: var(--font-head);
  font-weight: 500;
  font-size: 0.9rem;
  transition: background var(--t-fast), color var(--t-fast);
}
.additional-list li:hover {
  background: var(--yellow-grad);
  color: var(--charcoal);
}


/* =========================================================
   15. THREAD FORMS
   ========================================================= */

/* --- 15.1 Section -------------------------------------- */
.thread-forms { background: var(--alt-bg); }

/* --- 15.2 Intro ---------------------------------------- */
.forms-intro {
  max-width: 1000px;
  margin: 0 auto var(--space-1);
  text-align: center;
}
.forms-heading {
  font-size: 1.4rem;
  color: var(--yellow-2);
  margin-bottom: var(--space-2);
  text-transform: lowercase;
}
.forms-intro p { color: var(#1f1f1f); }

/* --- 15.3 Grid & cards --------------------------------- */
.forms-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
}
.form-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  transition: transform var(--t), box-shadow var(--t);
}
.form-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.form-diagram {
  background: var(--alt-bg);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  overflow: hidden;
}
.form-name { font-size: 1.2rem; margin-bottom: var(--space-1); }
.form-desc { color: var(--muted); font-size: 0.92rem; }


/* =========================================================
   16. GALLERY
   ========================================================= */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
}
.gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  transition: transform var(--t);
}
.gallery-item:hover { transform: scale(1.01); }
.gallery-item > img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;          /* gallery page: keep in sync with crop-tool.html */
  object-fit: cover;
}
/* Black tint (40%) over the photo on hover, instead of fading the photo */
.gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background var(--t);
  pointer-events: none;
}
.gallery-item:hover::after { background: rgba(0,0,0,0.4); }
/* Preview section (About & Products pages): shorter, shows the middle band */
.gallery-grid.preview .gallery-item > img { aspect-ratio: 16 / 9; }
.gallery-grid.preview .img-placeholder { aspect-ratio: 16 / 9; }
.gallery-grid:not(.preview) .img-placeholder { aspect-ratio: 4 / 3; }
.gallery-item figcaption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: var(--space-3) var(--space-2) var(--space-2);
  background: linear-gradient(transparent, rgba(30,30,30,0.85));
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 500;
  z-index: 1;
  transition: opacity var(--t), transform var(--t);
}
/* Gold line under the caption (grows in on hover) */
.gallery-item figcaption::after {
  content: "";
  display: block;
  width: 36px; height: 3px;
  margin-top: 8px;
  border-radius: 2px;
  background: var(--yellow-1);
  transition: width 0.4s ease 0.05s;
}
/* On devices with a mouse: caption + line hidden until the photo is hovered.
   (Phones/tablets have no hover, so captions stay visible there.) */
@media (hover: hover) {
  .gallery-item figcaption { opacity: 0; transform: translateY(8px); }
  .gallery-item figcaption::after { width: 0; }
  .gallery-item:hover figcaption { opacity: 1; transform: none; }
  .gallery-item:hover figcaption::after { width: 36px; }
}


/* =========================================================
   17. ABOUT
   ========================================================= */

/* --- 17.1 Standard layout ------------------------------ */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  align-items: center;
}
.about-text p {
  margin-bottom: var(--space-2);
  color: var(--dark-gray);
}

/* --- 17.2 Alternate layout (.about-grid1) -------------- */
.about-grid1 {
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  align-items: center;
  gap: 70px;
  min-height: 350px;
}
.about-text1,
.about-image1 { direction: ltr; }

.aboutimg1 {
  border-radius: 16px;
  display: block;
  width: 100%;
}


/* =========================================================
   18. CTA BANNER
   ========================================================= */

/* --- 18.1 Banner --------------------------------------- */
.cta-banner {
  position: relative;
  overflow: hidden;
  padding: 80px 0;

  background:
    linear-gradient(
      rgba(114, 114, 114, 0.65),
      rgba(20,20,20,.65)
    ),
    url("../images/askquote.jpg");

  background-size: 120%;
  background-position: center;
  background-repeat: no-repeat;

  /* Parallax */
  background-attachment: fixed;
}

/* --- 18.2 Content layout ------------------------------- */
.cta-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 300px;
}

.cta-title {
  margin: 0;
  flex: 0;          /* NOT flex:1 */
}
.cta-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  color: var(--white);
  margin: 0;
  white-space: nowrap;
  flex: 0;          /* or simply remove this line */
  text-align: left;
}

.btn-light { flex-shrink: 0; }


/* =========================================================
   19. CONTACT
   ========================================================= */

/* --- 19.1 Grid ----------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}

/* --- 19.2 Info side ------------------------------------ */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.info-block {
  padding: var(--space-3);
  background: var(--alt-bg);
  border-radius: var(--radius);
  border-left: 3px solid var(--yellow-2);
}
.info-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--yellow-2);
  margin-bottom: var(--space-1);
}
.info-value { color: var(--dark-gray); }
.info-value a:hover { color: var(--charcoal); }

/* --- 19.3 Form side ------------------------------------ */
.contact-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.form-row { margin-bottom: var(--space-2); }
.form-row input,
.form-row textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text);
  background: var(--alt-bg);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--yellow-2);
  background: var(--white);
}
.form-row textarea { resize: vertical; }

.form-success {
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: var(--alt-bg);
  border-radius: var(--radius-sm);
  color: var(--dark-gray);
  font-size: 0.92rem;
}
.form-error {
  margin-top: var(--space-2);
  padding: var(--space-2);
  background: #fdecec;
  border-radius: var(--radius-sm);
  color: #a12626;
  font-size: 0.92rem;
}
.contact-form button[disabled] { opacity: 0.7; cursor: wait; }


/* =========================================================
   20. FOOTER
   ========================================================= */

/* --- 20.1 Shell ---------------------------------------- */
.footer {
  background: #1f1f1f;
  color: #bdbdbd;
  padding: 50px 0 30px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.9fr 1.2fr 1fr 1fr;
  gap: 40px;
  align-items: flex-start;
}

/* --- 20.2 Brand ---------------------------------------- */
.footer-brand h3 {
  color: #fff;
  font-size: 2rem;
  margin: 20px 0 10px;
}
.footer-logo {
  width: 75px;
  display: block;
}
.footer-tagline {
  margin-bottom: 25px;
  font-size: 1rem;
}

/* --- 20.3 Columns -------------------------------------- */
.footer-column h4 {
  color: #fff;
  font-size: 1.1rem;
  margin-bottom: 20px;
  letter-spacing: .5px;
  line-height: 1.5;
}
.footer-column p {
  margin: 4px 0;
  line-height: 1.7;
}

/* --- 20.4 Social --------------------------------------- */
.footer-social {
  display: flex;
  gap: 15px;
  margin-top: 25px;
}
.footer-social a {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: #fff;
  color: #222;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: .3s;
  font-size: 18px;
}
.footer-social a:hover {
  background: #f2c300;
  color: #111;
  transform: translateY(-3px);
}

/* --- 20.5 Bottom bar ----------------------------------- */
.footer-divider {
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,.12);
  margin: 55px 0 25px;
}
.footer-bottom { text-align: center; }
.footer-iso {
  color: #fff;
  font-weight: 600;
  margin-bottom: 12px;
}
.footer-bottom p { margin: 6px 0; }




/* #########################################################
   PART D — UTILITIES
   ######################################################### */


/* =========================================================
   21. LOADER
   ========================================================= */
.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--charcoal);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0;
  transition: opacity 0.5s var(--ease), visibility 0.5s;
}
.loader.hidden { opacity: 0; visibility: hidden; }

.loader-bar {
  position: absolute;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  background: var(--yellow-grad);
  transform-origin: left;
  animation: loadBar 1.2s var(--ease) forwards;
}
@keyframes loadBar {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}


/* =========================================================
   22. REVEAL ANIMATIONS
   ========================================================= */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   23. IMAGE PLACEHOLDERS
   ========================================================= */
.img-placeholder {
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    var(--alt-bg),
    var(--alt-bg) 12px,
    #eef0f2 12px,
    #eef0f2 24px
  );

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

.img-placeholder span { line-height: 1.5; }
.img-placeholder code {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 8px;
  background: var(--white);
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--charcoal);
}
.img-placeholder.wide { min-height: 320px; }
.img-placeholder.svg-placeholder { min-height: 180px; }




/* #########################################################
   PART E — RESPONSIVE
   ---------------------------------------------------------
   Every media query in the stylesheet lives here, ordered
   from the widest breakpoint down to the narrowest, so each
   smaller screen correctly overrides the larger one.
   Inside each breakpoint the rules follow page order:
   header → hero → page header → sections → CTA → footer.

   Nothing in this part applies above 1200px, so the desktop
   design is untouched.
   ######################################################### */


/* =========================================================
   24. RESPONSIVE
   ========================================================= */

/* ---------------------------------------------------------
   24a. LARGE LAPTOP — max-width: 1200px
   --------------------------------------------------------- */
@media (max-width: 1200px) {

  /* CTA banner — the 300px desktop gap is too wide here and
     pushes the button off-screen */
  .cta-content { gap: 120px; }

}

/* ---------------------------------------------------------
   24b. TABLET — max-width: 1024px
   --------------------------------------------------------- */
@media (max-width: 1024px) {

  /* Hero */
  .hero { padding: var(--space-7) 0; }

  /* Hero spiral */
  .hero-spiral {
    right: -2%;
    width: 34vw;
    opacity: 0.55;
  }
  .spiral-path { stroke-width: 4; }

  /* Page header thread */
  .header-thread {
    height: 280px;
    opacity: 0.075;
  }
  .thread-path { stroke-width: 3.5; }

  /* Parallax OFF — "fixed" backgrounds break on touch devices
     (zoomed, jumpy, or blank on iOS Safari) */
  .section-services,
  .rolled-threads,
  .cta-banner { background-attachment: scroll; }
  .cta-banner { background-size: cover; }

  /* Section spacing (was 140px / 100px on every side) */
  .section-services,
  .rolled-threads { padding: 88px 40px; }
  .section-capabilities { padding: 72px 40px; }
  .section-head { margin-bottom: var(--space-4); }

  /* Grids: 3 columns → 2 columns */
  .services-grid,
  .products-grid,
  .forms-grid { grid-template-columns: repeat(2, 1fr); }

  /* Tighter gaps between columns */
  .rolled-grid,
  .capabilities-content,
  .about-grid,
  .contact-grid { gap: var(--space-4); }
  .about-grid1 { gap: var(--space-5); }
  .detail-item,
  .detail-item1 { gap: var(--space-5); }
  .capability-buttons { gap: var(--space-3); }

}

/* ---------------------------------------------------------
   24b-2. TABLET ONLY — 769px to 1024px
   Two-column grids with an odd number of cards leave one
   card stranded on the left. Centre it instead.
   --------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px) {

  .services-grid > :last-child:nth-child(odd),
  .products-grid > :last-child:nth-child(odd),
  .forms-grid > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - var(--space-3) / 2);
  }

}

/* ---------------------------------------------------------
   24c. SMALL TABLET — max-width: 991px
   Mobile menu + CTA stacking
   --------------------------------------------------------- */
@media (max-width: 991px) {

  /* Anchor links stop under the fixed header */
  html { scroll-padding-top: 80px; }

  /* --- Mobile menu ------------------------------------- */
  .menu-toggle { display: flex; }

  /* Dropdown panel under the header bar.
     Uses position:absolute (NOT fixed) because the header's
     backdrop-filter would trap a fixed child inside it. */
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;

    flex-direction: column;
    gap: 0;
    padding: var(--space-1) var(--space-3) var(--space-3);

    background: rgba(255,255,255,0.98);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);

    max-height: calc(100vh - 72px);
    overflow-y: auto;

    /* Closed */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity var(--t), transform var(--t), visibility var(--t);
  }

  /* Open — add ONE of these classes with JavaScript */
  .nav-links.open,
  .nav-links.active,
  .nav-links.show,
  .nav-links.is-open,
  .nav.open .nav-links,
  .header.menu-open .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-links { align-items: stretch; }
  .nav-links li { display: block; }
  .nav-links .nav-link {
    display: block;
    padding: 14px 0;
    font-size: 1rem;
  }
  .nav-links .nav-link.nav-cta {
    display: inline-block;
    margin-top: var(--space-1);
    padding: 12px 28px;
    text-align: center;
  }

  /* CTA banner — stack */
  .cta-content {
    flex-direction: column;
    text-align: center;
    gap: var(--space-3);
  }
  .cta-title {
    text-align: center;
    white-space: normal;   /* was nowrap — ran off the screen */
  }

  /* Footer — two columns (phones go to one column in 25.1) */
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
  }

}

/* ---------------------------------------------------------
   24d. MOBILE — max-width: 768px
   --------------------------------------------------------- */
@media (max-width: 768px) {

  /* --- Header ------------------------------------------ */
  .header { padding: 12px 0; }
  .logo-mark { width: 40px; height: 40px; }
  .nav-links { max-height: calc(100vh - 64px); }

  /* --- Hero -------------------------------------------- */
  .hero {
    min-height: 100vh;
    min-height: 100svh;              /* real visible height on phones */
    padding: 104px 0 88px;           /* clears fixed header + scroll cue */
  }

  .hero-spiral {
    right: -12%;
    width: 55vw;
    height: 120%;
    opacity: 0.4;                    /* keeps text readable */
  }
  .spiral-path { stroke-width: 3; }

  .hero-eyebrow {
    font-size: 0.75rem;
    letter-spacing: 2px;
  }
  .hero-title { font-size: clamp(2.1rem, 9vw, 3rem); }
  
  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: var(--space-3);
  }

  /* Hero + CTA buttons — stacked, full width (max 320px).
     Scoped so it no longer hits every .btn on the site. */
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    max-width: 320px;
  }
  .hero-actions .btn,
  .cta-content .btn { width: 100%; }
  .cta-content .btn { max-width: 320px; }

  /* --- Page header ------------------------------------- */
  .page-header { padding: calc(var(--space-6) + 32px) 0 var(--space-4); }

  .page-header1 {
    min-height: 360px;
    padding-top: 72px;               /* room for the fixed header */
  }
  .header-content1 { transform: none; }

  .page-intro { font-size: 1rem; }

  .header-thread {
    height: 240px;
    opacity: 0.065;
  }

  /* Still slow on mobile */
  .thread-svg { animation-duration: 22s; }

  .thread-path { stroke-width: 3.5; }

  /* --- Section spacing & headings ---------------------- */
  .section-services,
  .rolled-threads { padding: 64px 12px; }
  .section-capabilities { padding: 56px 12px; }

  .section-head { margin-bottom: var(--space-4); }
  .section-title,
  .section-title1 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  .section-intro { font-size: 1rem; }

  /* --- Services ---------------------------------------- */
  .services-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }
  .service-card {
    width: 100%;
    max-width: 440px;
    padding: var(--space-4) var(--space-3);
  }

  /* --- Products / forms / gallery ---------------------- */
  .products-grid,
  .forms-grid { grid-template-columns: 1fr; }
  .gallery-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  /* --- Two-column layouts → one column ----------------- */
  .rolled-grid,
  .capabilities-content,
  .about-grid,
  .about-grid1,
  .contact-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .about-grid1 { min-height: 0; }

  /* --- Product detail rows ----------------------------- */
  .detail-item,
  .detail-item1,
  .detail-item.reverse {
    grid-template-columns: 1fr;
    gap: var(--space-3);
    padding: var(--space-4) 0;
  }
  /* Reversed rows: always image first, then text */
  .detail-item.reverse .detail-media,
  .detail-item.reverse .detail-body { order: 0; }
  .detail-item.reverse .detail-desc { margin-left: 0; }

  .detail-media1 { aspect-ratio: 16 / 9; }   /* 7.8:3 is a sliver on phones */
  .detail-body { padding: 0; }
  .detail-desc { max-width: 100%; }

  /* --- Capabilities buttons ---------------------------- */
  .capability-buttons {
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
  }
  .capability-buttons .btn {
    flex: none;
    width: 100%;
    max-width: 320px;
    min-width: 0;
  }

  /* --- Additional operations --------------------------- */
  .additional-ops { padding: var(--space-3) var(--space-2); }

  /* --- CTA banner -------------------------------------- */
  .cta-banner { padding: 56px 0; }

  /* --- Contact ----------------------------------------- */
  .contact-form { padding: var(--space-3); }
  .form-row input,
  .form-row textarea { font-size: 16px; }   /* stops iOS zoom-on-focus */


  /* --- Footer (phones) --------------------------------- */
  .footer { padding: 40px 0 24px; }
  .footer-grid { gap: 32px; }
  .footer-brand h3 { font-size: 1.6rem; }
  .footer-divider { margin: 32px 0 20px; }

}

/* ---------------------------------------------------------
   24e. SMALL MOBILE — max-width: 480px
   --------------------------------------------------------- */
@media (max-width: 480px) {

  /* Header */
  .logo-mark { width: 36px; height: 36px; }
  .logo-text { font-size: 0.95rem; }

  /* Hero */
  .hero { padding: 96px 0 80px; }

  /* Page header */
  .page-header1 { min-height: 340px; }

  .header-thread {
    height: 220px;
    opacity: 0.055;
  }

  .thread-svg { animation-duration: 20s; }

  /* Sections */
  .section-services,
  .rolled-threads { padding: 56px 8px; }
  .section-capabilities { padding: 48px 8px; }

  .service-card { padding: var(--space-3) var(--space-2); }

  .additional-list { gap: var(--space-1); }
  .additional-list li {
    padding: 6px 14px;
    font-size: 0.85rem;
  }

}

/* ---------------------------------------------------------
   24f. REDUCED MOTION — accessibility
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  .hero-spiral svg,
  .hero-spiral::after,
  .thread-svg,
  .scroll-line { animation: none; }

}




/* #########################################################
   PART F — CASCADE-CRITICAL
   ---------------------------------------------------------
   READ BEFORE MOVING ANYTHING HERE.

   25.1 (footer stacking) was written under a "Mobile" comment
   in the original file but was never wrapped in a media query,
   so it forced a single centred column on EVERY screen width,
   including desktop. It is now limited to max-width: 768px so
   the desktop footer is the 4-column layout from section 20.1.

   25.2 (hero framing) is split into real desktop and
   tablet/mobile media queries.
   ######################################################### */


/* =========================================================
   25. TRAILING RULES (leave at the bottom)
   ========================================================= */

/* --- 25.1 Footer stacking — PHONES ONLY (max-width: 768px).
       Desktop keeps the 4-column footer from section 20.1
       (brand | Address | Contact | Business Hours).
       769–991px uses the 2-column rule in 24c. ------------- */
@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-social { justify-content: center; }
  .capabilities-text {
  font-size: 0.8rem;
  color: var(--dark-gray);
}
}

/* --- 25.2 Hero framing — the SAME close-up on every screen.
       The photo is square. It is drawn at whichever is bigger:
       twice the screen width, or 2.4x the screen height.
       On desktops the width wins (2560px on a 1280px screen,
       exactly as before); on phones and tablets the height wins,
       so the bars stay large and diagonal, like on desktop. */
.hero-overlay::before {
  background-size: max(200vw, 240vh);
  background-size: max(200vw, 240svh);
  background-position: 30% center;
}
@media (max-width: 1024px) {
  .hero-overlay::before { background-position: 50% center; }
}

/* =========================================================
   GET A QUOTE — wizard (quote.html, js/quote.js)
   ========================================================= */
.quote-form { max-width: 760px; margin: 0 auto; }
.qw-progress { margin-bottom: var(--space-3); }
.qw-step-label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: var(--space-1); }
.qw-bar { height: 5px; background: var(--alt-bg); border-radius: 3px; overflow: hidden; }
.qw-bar-fill { height: 100%; width: 25%; background: var(--yellow-1); transition: width var(--t); }
.qw-progress { display: none; }
.quote-form.qw-js .qw-progress { display: block; }

.qw-section { border: 0; margin: 0; padding: 0; min-width: 0; }
.quote-form:not(.qw-js) .qw-section + .qw-section { margin-top: var(--space-5); }
.qw-section[hidden] { display: none; }
.qw-legend { font-family: var(--font-head); font-size: 1.25rem; font-weight: 600; color: var(--charcoal); margin-bottom: var(--space-2); padding: 0; }
.qw-label { display: block; font-size: 0.9rem; font-weight: 500; color: var(--dark-gray); margin: var(--space-2) 0 var(--space-1); }
.qw-label-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-1); flex-wrap: wrap; }

.qw-profile { background: var(--charcoal); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-2) var(--space-1); margin-bottom: var(--space-2); }
.qw-profile-top { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-1); flex-wrap: wrap; }
.qw-profile-name { font-family: var(--font-head); font-size: 1.15rem; font-weight: 600; color: var(--white); }
.qw-profile-angle { font-size: 0.85rem; color: #B4B2A9; }
.qw-profile-angle strong { font-family: var(--font-head); font-size: 1.3rem; color: var(--yellow-1); }
.qw-profile svg { display: block; width: 100%; height: 110px; }
.qw-profile path { fill: none; stroke: var(--yellow-1); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

.qw-chips, .qw-units { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.qw-chip { position: relative; cursor: pointer; }
.qw-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.qw-chip span {
  display: inline-block; padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--white);
  font-family: var(--font-head); font-weight: 500; font-size: 0.9rem; color: var(--text);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.qw-chip:hover span { border-color: var(--yellow-2); }
.qw-chip input:checked + span { background: var(--yellow-1); border-color: var(--yellow-1); color: var(--charcoal); font-weight: 600; }
.qw-chip input:focus-visible + span { outline: 2px solid var(--charcoal); outline-offset: 2px; }
.qw-chip-sm span { padding: 5px 12px; font-size: 0.8rem; }

.qw-inline { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.qw-inline input[type=number] { max-width: 160px; }
.qw-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; color: var(--dark-gray); cursor: pointer; }
.qw-check input { width: auto; }
.quote-form input[type=file] { background: transparent; border-style: dashed; padding: 12px; }
.quote-form input:disabled { opacity: 0.5; }

.qw-note { font-size: 0.85rem; color: var(--muted); margin-top: 6px; min-height: 1.2em; }
.qw-ok { color: #1d6b3a; }
.qw-warn { color: #8a5a00; }
.qw-bad, .qw-error { color: #a12626; }
.qw-error { font-size: 0.85rem; margin-top: 6px; min-height: 1.2em; }

.qw-send { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.qw-wa { background: #25D366; color: #0b3d1e; }
.qw-wa:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.qw-nav { display: flex; justify-content: space-between; margin-top: var(--space-3); }
.quote-form:not(.qw-js) .qw-nav { display: none; }
.qw-back { background: var(--white); color: var(--charcoal); border: 1px solid var(--border); }
.qw-back:hover { border-color: var(--charcoal); }
.quote-form button[disabled] { opacity: 0.7; cursor: wait; }

/* Contact page shortcut to the quote page */
.quote-shortcut {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap;
  background: var(--charcoal); color: var(--white); border-radius: var(--radius); padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}
.quote-shortcut h3 { font-family: var(--font-head); font-size: 1.2rem; margin: 0 0 4px; color: var(--white); }
.quote-shortcut p { margin: 0; color: #D3D1C7; font-size: 0.95rem; }

@media (max-width: 640px) {
  .qw-send .btn { width: 100%; }
  .quote-shortcut { padding: var(--space-3); }
  .quote-shortcut .btn { width: 100%; }
}


/* =========================================================
   THREADED BAR + SPINNING NUT HEADER (Thread Forms page)
   The bottom padding is the strip the bar and nut live in,
   so they never sit on top of the heading text.
   ========================================================= */
.page-header1.has-nut {
  min-height: 0;
  align-items: flex-start;
  padding-top: calc(81px + 40px);   /* menu bar + 40px */
  padding-bottom: 128px;            /* 8px gap + nut (80px) + 40px, so text+bar sit centred */
}
.page-header1.has-nut .header-content1 { transform: none; }
.nut-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 768px) {
  .page-header1.has-nut { padding-top: calc(61px + 40px); padding-bottom: 106px; }  /* 8 + nut (58) + 40 */
  .page-header1.has-nut:not(.has-roll) .header-content1 { text-align: center; }
  .page-header1.has-nut:not(.has-roll) .page-intro { margin-left: auto; margin-right: auto; }
}

/* Rolling-machine header (Thread Forms)
   Upright machine (wide screens): text left-aligned, vertically centred
   in the area below the fixed menu bar (81px).
   Narrow screens / phones: no machine; text centred with equal space
   above and below. */
.page-header1.has-nut.has-roll {
  min-height: 402px;
  padding-top: 81px;
  padding-bottom: 0;
  align-items: center;
}
.page-header1.has-nut.has-roll.roll-sideways {
  min-height: 0;
  align-items: flex-start;
  padding-top: calc(81px + 40px);
  padding-bottom: 40px;           /* no machine on narrow screens: text only */
}
.page-header1.roll-sideways .roll-canvas { display: none; }
/* Thread Forms on phones/narrow screens: show the bar + brass nut strip
   (same as Products) under the centred text. Desktop keeps the machine. */
.page-header1.has-roll .nut-mobile { display: none; }
.page-header1.has-roll.roll-sideways .nut-mobile { display: block; }
.page-header1.has-nut.has-roll.roll-sideways { padding-bottom: 128px; }
.page-header1.roll-sideways .header-content1 { text-align: center; }
.page-header1.roll-sideways .page-intro { margin-left: auto; margin-right: auto; }
@media (max-width: 768px) {
  .page-header1.has-nut.has-roll { padding-top: 61px; }
  .page-header1.has-nut.has-roll.roll-sideways { padding-top: calc(61px + 40px); padding-bottom: 106px; }
}

/* =========================================================
   HOME HERO — gold 3D helix (js/hero-helix.js)
   Replaces the flat SVG wave; sits in the same .hero-spiral box.
   ========================================================= */
.hero-spiral { opacity: 0.9; }
.helix-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 768px) { .hero-spiral { opacity: 0.5; } }

/* =========================================================
   404 PAGE (404.html)
   A broken 60° thread profile, big "404", and links back.
   ========================================================= */
.nf {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(81px + 48px) 0 64px;
  background: linear-gradient(110deg, #1c1c1c 0%, #202020 50%, #302d20 100%);
  color: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.nf::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 25%, rgba(255,196,0,0.14), transparent 55%);
  pointer-events: none;
}
.nf-inner { position: relative; z-index: 1; }
.nf-thread { width: min(520px, 90%); height: auto; margin: 0 auto 8px; display: block; overflow: visible; }
.nf-profile {
  fill: none;
  stroke: var(--yellow-1);
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(255,196,0,0.35));
  stroke-dasharray: 700;
  stroke-dashoffset: 700;
  animation: nfDraw 1.6s ease-out forwards;
}
.nf-gap {
  stroke: rgba(255,255,255,0.35);
  stroke-width: 2;
  stroke-dasharray: 4 8;
  animation: nfBlink 1.6s ease-in-out infinite;
}
@keyframes nfDraw { to { stroke-dashoffset: 0; } }
@keyframes nfBlink { 0%,100% { opacity: 0.25; } 50% { opacity: 0.9; } }
.nf-code {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(5rem, 18vw, 9rem);
  line-height: 1;
  margin: 0 0 8px;
  background: var(--yellow-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nf-title { color: var(--white); font-size: clamp(1.6rem, 4.5vw, 2.4rem); margin-bottom: 12px; }
.nf-text { color: rgba(255,255,255,0.8); max-width: 520px; margin: 0 auto 28px; font-size: 1.05rem; }
.nf-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
@media (max-width: 540px) {
  .nf { padding-top: calc(61px + 40px); }
  .nf-actions { flex-direction: column; align-items: stretch; }
  .nf-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .nf-profile { animation: none; stroke-dashoffset: 0; }
  .nf-gap { animation: none; }
}

/* =========================================================
   BACK TO TOP button (js/to-top.js)
   Yellow round button, bottom right; the thin ring shows how far
   down the page you are.
   ========================================================= */
.to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 90;
  width: 52px;
  height: 52px;
  border: 0;
  border-radius: 50%;
  padding: 3px;
  cursor: pointer;
  background: conic-gradient(var(--yellow-1) var(--p, 0%), rgba(255,196,0,0.28) 0);
  box-shadow: 0 6px 18px rgba(0,0,0,0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.9);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, box-shadow 0.2s ease;
}
.to-top-in {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--charcoal);
  color: var(--yellow-1);
  border: 2px solid #2b2b2b;
  transition: background 0.2s ease, color 0.2s ease;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { box-shadow: 0 8px 24px rgba(255,179,0,0.4); }
.to-top:hover .to-top-in { background: var(--yellow-1); color: var(--charcoal); }
.to-top:hover svg { animation: toTopNudge 0.6s ease; }
.to-top:focus-visible { outline: 2px solid var(--yellow-1); outline-offset: 3px; }
@keyframes toTopNudge { 40% { transform: translateY(-3px); } }
@media (max-width: 540px) {
  .to-top { right: 16px; bottom: 16px; width: 46px; height: 46px; }
}

/* Thread Forms: highlights block now sits between the forms list and Die Capabilities */
.forms-intro-section { padding: 56px 0 8px; }
@media (max-width: 540px) { .forms-intro-section { padding: 40px 0 0; } }

/* =========================================================
   PRODUCTS PREVIEW (Thread Forms page) — _includes/products-preview.html
   Two product photos that fade out towards the bottom (a teaser, not
   fully revealed), with the "View All Products" button over the fade.
   ========================================================= */
.products-preview { padding: var(--space-6) 0; }
.pp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.pp-card {
  position: relative;
  display: block;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  background: var(--charcoal);
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, rgba(0,0,0,0.55) 62%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 30%, rgba(0,0,0,0.55) 62%, transparent 100%);
}
.pp-card img {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  transition: transform 0.6s ease;
}
/* Black tint over the whole photo (stronger at the top behind the name)
   so the white text always reads clearly */
.pp-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.5) 40%, rgba(0,0,0,0.38) 100%);
  z-index: 1;
  pointer-events: none;
  transition: background 0.3s ease;
}
.pp-name { text-shadow: 0 1px 6px rgba(0,0,0,0.55); }
@media (hover: hover) {
  .pp-card:hover::before { background: linear-gradient(rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.25) 100%); }
}
.pp-name {
  position: absolute;
  left: 20px; right: 20px; top: 18px;
  text-align: center;
  z-index: 2;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--white);
}
.pp-name::after {
  content: "";
  display: block;
  width: 28px; height: 3px;
  margin: 6px auto 0;
  border-radius: 2px;
  background: var(--yellow-1);
  transition: width 0.3s ease;
}
.products-preview .section-head,
.products-preview .section-intro,
.pp-more { text-align: center; margin-left: auto; margin-right: auto; }
.pp-more { position: relative; z-index: 2; text-align: center; margin-top: -72px; }
@media (hover: hover) {
  .pp-card:hover img { transform: scale(1.05); }
  .pp-card:hover .pp-name::after { width: 56px; }
}
@media (max-width: 540px) {
  .products-preview { padding: var(--space-5) 0; }
  .pp-grid { gap: 12px; }
  .pp-card img { height: 115px; }
  .pp-name { left: 12px; top: 12px; font-size: 0.95rem; }
  .pp-more { margin-top: -40px; }
  .pp-more .btn { width: auto; padding-left: 28px; padding-right: 28px; }
}

/* Products & gallery teasers: intro on one line on wide screens, and
   equal space above the heading and below the button */
.section.products-preview { padding: 48px 0 77px; }   /* bottom = top, measured from the label and from the photos' lower edge */
.products-preview .section-head { margin-bottom: 32px; }
.products-preview .section-intro { max-width: none; }
@media (min-width: 900px) { .products-preview .section-intro { white-space: nowrap; } }
@media (max-width: 540px) {
  .section.products-preview { padding: 43px 0 54px; }
  .products-preview .section-head { margin-bottom: 20px; }
}

/* =========================================================
   HOME "Know our Capabilities": three previews (Thread Forms,
   Products, Gallery) in the same fading teaser style
   ========================================================= */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.cap-col .pp-card img { height: 200px; }
.cap-col .pp-more { margin-top: -64px; }
@media (max-width: 900px) {
  .cap-grid { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; gap: 20px; }
  .cap-col .pp-card img { height: 150px; }
  .cap-col .pp-more { margin-top: -54px; }
}
@media (max-width: 540px) {
  .cap-col .pp-more .btn { width: auto; padding-left: 28px; padding-right: 28px; }
}