*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  :root {
    --background: 210 60% 8%;
    --foreground: 210 30% 95%;
    --card: 210 50% 12%;
    --card-foreground: 210 30% 95%;
    --primary: 38 100% 47%;
    --primary-foreground: 210 60% 8%;
    --secondary: 205 60% 60%;
    --secondary-foreground: 210 60% 8%;
    --muted: 210 30% 25%;
    --muted-foreground: 210 20% 70%;
    --border: 205 50% 30%;
    --input: 210 50% 12%;
    --ring: 38 100% 47%;
    --radius: 6px;
  }
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .container {
    max-width: 1536px;
  }
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}
.pointer-events-none {
  pointer-events: none;
}
.pointer-events-auto {
  pointer-events: auto;
}
.\!visible {
  visibility: visible !important;
}
.visible {
  visibility: visible;
}
.invisible {
  visibility: hidden;
}
.collapse {
  visibility: collapse;
}
.static {
  position: static;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-x-0 {
  left: 0px;
  right: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-bottom-12 {
  bottom: -3rem;
}
.-left-12 {
  left: -3rem;
}
.-right-12 {
  right: -3rem;
}
.-top-12 {
  top: -3rem;
}
.bottom-0 {
  bottom: 0px;
}
.left-0 {
  left: 0px;
}
.left-1 {
  left: 0.25rem;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-\[50\%\] {
  left: 50%;
}
.right-0 {
  right: 0px;
}
.right-1 {
  right: 0.25rem;
}
.right-2 {
  right: 0.5rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-1 {
  top: 0.25rem;
}
.top-1\/2 {
  top: 50%;
}
.top-4 {
  top: 1rem;
}
.top-\[1px\] {
  top: 1px;
}
.top-\[50\%\] {
  top: 50%;
}
.top-\[60\%\] {
  top: 60%;
}
.top-full {
  top: 100%;
}
.z-10 {
  z-index: 10;
}
.z-50 {
  z-index: 50;
}
.z-\[100\] {
  z-index: 100;
}
.z-\[1\] {
  z-index: 1;
}
.-mx-1 {
  margin-left: -0.25rem;
  margin-right: -0.25rem;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-1 {
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}
.-ml-4 {
  margin-left: -1rem;
}
.-mt-4 {
  margin-top: -1rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-24 {
  margin-top: 6rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-auto {
  margin-top: auto;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.grid {
  display: grid;
}
.contents {
  display: contents;
}
.hidden {
  display: none;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-2 {
  height: 0.5rem;
}
.h-2\.5 {
  height: 0.625rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-5 {
  height: 1.25rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[1px\] {
  height: 1px;
}
.h-\[var\(--radix-navigation-menu-viewport-height\)\] {
  height: var(--radix-navigation-menu-viewport-height);
}
.h-\[var\(--radix-select-trigger-height\)\] {
  height: var(--radix-select-trigger-height);
}
.h-auto {
  height: auto;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-\[--radix-context-menu-content-available-height\] {
  max-height: var(--radix-context-menu-content-available-height);
}
.max-h-\[--radix-select-content-available-height\] {
  max-height: var(--radix-select-content-available-height);
}
.max-h-\[300px\] {
  max-height: 300px;
}
.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] {
  max-height: var(--radix-dropdown-menu-content-available-height);
}
.max-h-screen {
  max-height: 100vh;
}
.min-h-\[60px\] {
  min-height: 60px;
}
.w-10 {
  width: 2.5rem;
}
.w-2 {
  width: 0.5rem;
}
.w-2\.5 {
  width: 0.625rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-3\/4 {
  width: 75%;
}
.w-4 {
  width: 1rem;
}
.w-64 {
  width: 16rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-\[100px\] {
  width: 100px;
}
.w-\[1px\] {
  width: 1px;
}
.w-full {
  width: 100%;
}
.w-max {
  width: max-content;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-10 {
  min-width: 2.5rem;
}
.min-w-8 {
  min-width: 2rem;
}
.min-w-9 {
  min-width: 2.25rem;
}
.min-w-\[12rem\] {
  min-width: 12rem;
}
.min-w-\[8rem\] {
  min-width: 8rem;
}
.min-w-\[var\(--radix-select-trigger-width\)\] {
  min-width: var(--radix-select-trigger-width);
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-max {
  max-width: max-content;
}
.flex-1 {
  flex: 1 1;
}
.shrink-0 {
  flex-shrink: 0;
}
.grow {
  flex-grow: 1;
}
.grow-0 {
  flex-grow: 0;
}
.basis-full {
  flex-basis: 100%;
}
.caption-bottom {
  caption-side: bottom;
}
.border-collapse {
  border-collapse: collapse;
}
.origin-\[--radix-context-menu-content-transform-origin\] {
  transform-origin: var(--radix-context-menu-content-transform-origin);
}
.origin-\[--radix-dropdown-menu-content-transform-origin\] {
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}
.origin-\[--radix-hover-card-content-transform-origin\] {
  transform-origin: var(--radix-hover-card-content-transform-origin);
}
.origin-\[--radix-menubar-content-transform-origin\] {
  transform-origin: var(--radix-menubar-content-transform-origin);
}
.origin-\[--radix-popover-content-transform-origin\] {
  transform-origin: var(--radix-popover-content-transform-origin);
}
.origin-\[--radix-select-content-transform-origin\] {
  transform-origin: var(--radix-select-content-transform-origin);
}
.origin-\[--radix-tooltip-content-transform-origin\] {
  transform-origin: var(--radix-tooltip-content-transform-origin);
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-\[-50\%\] {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-y-\[-50\%\] {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
  --tw-rotate: 45deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.touch-none {
  touch-action: none;
}
.select-none {
  -webkit-user-select: none;
          user-select: none;
}
.resize {
  resize: both;
}
.list-none {
  list-style-type: none;
}
.flex-row {
  flex-direction: row;
}
.flex-col {
  flex-direction: column;
}
.flex-col-reverse {
  flex-direction: column-reverse;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-4 {
  gap: 1rem;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(0.25rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.overflow-auto {
  overflow: auto;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-x-hidden {
  overflow-x: hidden;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.break-words {
  overflow-wrap: break-word;
}
.rounded-\[inherit\] {
  border-radius: inherit;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 6px;
  border-radius: var(--radius);
}
.rounded-md {
  border-radius: calc(6px - 2px);
  border-radius: calc(var(--radius) - 2px);
}
.rounded-sm {
  border-radius: calc(6px - 4px);
  border-radius: calc(var(--radius) - 4px);
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-t-\[10px\] {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.rounded-tl-sm {
  border-top-left-radius: calc(6px - 4px);
  border-top-left-radius: calc(var(--radius) - 4px);
}
.border {
  border-width: 1px;
}
.border-2 {
  border-width: 2px;
}
.border-y {
  border-top-width: 1px;
  border-bottom-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-l {
  border-left-width: 1px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-destructive {
  border-color: hsl(var(--destructive));
}
.border-destructive\/50 {
  border-color: hsl(var(--destructive) / 0.5);
}
.border-input {
  border-color: hsl(210 50% 12%);
  border-color: hsl(var(--input));
}
.border-primary {
  border-color: hsl(38 100% 47%);
  border-color: hsl(var(--primary));
}
.border-primary\/50 {
  border-color: hsl(38 100% 47% / 0.5);
  border-color: hsl(var(--primary) / 0.5);
}
.border-transparent {
  border-color: transparent;
}
.border-l-transparent {
  border-left-color: transparent;
}
.border-t-transparent {
  border-top-color: transparent;
}
.bg-accent {
  background-color: hsl(#F47A0F);
  background-color: hsl(var(--accent));
}
.bg-background {
  background-color: hsl(210 60% 8%);
  background-color: hsl(var(--background));
}
.bg-black\/80 {
  background-color: rgb(0 0 0 / 0.8);
}
.bg-border {
  background-color: hsl(rgba(143,166,178,0.14));
  background-color: hsl(var(--border));
}
.bg-card {
  background-color: hsl(210 50% 12%);
  background-color: hsl(var(--card));
}
.bg-destructive {
  background-color: hsl(var(--destructive));
}
.bg-foreground {
  background-color: hsl(210 30% 95%);
  background-color: hsl(var(--foreground));
}
.bg-muted {
  background-color: hsl(210 30% 25%);
  background-color: hsl(var(--muted));
}
.bg-muted\/50 {
  background-color: hsl(210 30% 25% / 0.5);
  background-color: hsl(var(--muted) / 0.5);
}
.bg-popover {
  background-color: hsl(var(--popover));
}
.bg-primary {
  background-color: hsl(38 100% 47%);
  background-color: hsl(var(--primary));
}
.bg-primary\/10 {
  background-color: hsl(38 100% 47% / 0.1);
  background-color: hsl(var(--primary) / 0.1);
}
.bg-primary\/20 {
  background-color: hsl(38 100% 47% / 0.2);
  background-color: hsl(var(--primary) / 0.2);
}
.bg-secondary {
  background-color: hsl(205 60% 60%);
  background-color: hsl(var(--secondary));
}
.bg-transparent {
  background-color: transparent;
}
.fill-current {
  fill: currentColor;
}
.fill-primary {
  fill: hsl(38 100% 47%);
  fill: hsl(var(--primary));
}
.p-0 {
  padding: 0px;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-4 {
  padding: 1rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-\[1px\] {
  padding: 1px;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-2\.5 {
  padding-left: 0.625rem;
}
.pl-4 {
  padding-left: 1rem;
}
.pl-8 {
  padding-left: 2rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-2\.5 {
  padding-right: 0.625rem;
}
.pr-6 {
  padding-right: 1.5rem;
}
.pr-8 {
  padding-right: 2rem;
}
.pt-0 {
  padding-top: 0px;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-4 {
  padding-top: 1rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.align-middle {
  vertical-align: middle;
}
.text-\[0\.8rem\] {
  font-size: 0.8rem;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.italic {
  font-style: italic;
}
.leading-none {
  line-height: 1;
}
.tracking-tight {
  letter-spacing: -0.025em;
}
.tracking-widest {
  letter-spacing: 0.1em;
}
.text-accent-foreground {
  color: hsl(var(--accent-foreground));
}
.text-card-foreground {
  color: hsl(210 30% 95%);
  color: hsl(var(--card-foreground));
}
.text-current {
  color: currentColor;
}
.text-destructive {
  color: hsl(var(--destructive));
}
.text-destructive-foreground {
  color: hsl(var(--destructive-foreground));
}
.text-foreground {
  color: hsl(210 30% 95%);
  color: hsl(var(--foreground));
}
.text-foreground\/50 {
  color: hsl(210 30% 95% / 0.5);
  color: hsl(var(--foreground) / 0.5);
}
.text-muted-foreground {
  color: hsl(210 20% 70%);
  color: hsl(var(--muted-foreground));
}
.text-popover-foreground {
  color: hsl(var(--popover-foreground));
}
.text-primary {
  color: hsl(38 100% 47%);
  color: hsl(var(--primary));
}
.text-primary-foreground {
  color: hsl(210 60% 8%);
  color: hsl(var(--primary-foreground));
}
.text-secondary-foreground {
  color: hsl(210 60% 8%);
  color: hsl(var(--secondary-foreground));
}
.underline {
  text-decoration-line: underline;
}
.line-through {
  text-decoration-line: line-through;
}
.underline-offset-4 {
  text-underline-offset: 4px;
}
.opacity-0 {
  opacity: 0;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-70 {
  opacity: 0.7;
}
.opacity-90 {
  opacity: 0.9;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.outline {
  outline-style: solid;
}
.ring-0 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-1 {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-ring {
  --tw-ring-color: hsl(var(--ring));
}
.ring-offset-background {
  --tw-ring-offset-color: hsl(var(--background));
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-1000 {
  transition-duration: 1000ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.duration-300 {
  transition-duration: 300ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes enter {

  from {
    opacity: 1;
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0));
  }
}
@keyframes exit {

  to {
    opacity: 1;
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(0, 0, 0) scale3d(1, 1, 1) rotate(0);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0));
  }
}
.animate-in {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.fade-in-0 {
  --tw-enter-opacity: 0;
}
.zoom-in-95 {
  --tw-enter-scale: .95;
}
.duration-1000 {
  animation-duration: 1000ms;
}
.duration-200 {
  animation-duration: 200ms;
}
.duration-300 {
  animation-duration: 300ms;
}
.ease-in-out {
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.running {
  animation-play-state: running;
}

/* ============================================
   STAKETEK — BRAND DESIGN SYSTEM
   Australian rural engineering aesthetic
   ============================================ */

:root {
  /* Brand palette */
  --ink: #091722;
  --navy: #0B1B29;
  --navy-mid: #132C3E;
  --navy-light: #1F465B;
  --charcoal: #172029;
  --surface: #F7F5EF;
  --surface-strong: #FFFFFF;
  --surface-muted: #ECE8DE;
  --steel: #778894;
  --steel-lt: #C8D1D5;
  --white: #FFFFFF;
  --text: #F7F5EF;
  --body: #29343A;
  --grey: #65747C;
  --grey-lt: #B4C0C6;
  /* StakeTek approved brand orange. Single source of truth for the accent
     colour; --accent-lt is the lighter hover tint. */
  --accent: #F47A0F;
  --accent-lt: #F7963F;
  --success: #2F694A;
  --success-lt: #5EA878;
  --success-bg: rgba(63,143,98,.12);
  --success-border: rgba(63,143,98,.42);
  --border: rgba(143,166,178,0.14);
  --border-strong: rgba(143,166,178,0.32);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.12);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.18);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.3);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.4);
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background: #0B1B29;
  background: var(--navy);
  color: #FFFFFF;
  color: var(--white);
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

img { display: block; max-width: 100%; }
::selection { background: #F47A0F; background: var(--accent); color: #0B1B29; color: var(--navy); }
a { color: inherit; transition: color 0.2s ease; text-decoration: none; }

*:focus-visible { outline: 2px solid #F47A0F; outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #0B1B29; background: var(--navy); }
::-webkit-scrollbar-thumb { background: #1F465B; background: var(--navy-light); border-radius: 8px; border: 2px solid #0B1B29; border: 2px solid var(--navy); }
::-webkit-scrollbar-thumb:hover { background: #778894; background: var(--steel); }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration: 0.01ms!important; animation-iteration-count: 1!important; transition-duration: 0.01ms!important; scroll-behavior: auto!important; }
}

/* ============================================
   TYPOGRAPHY HELPERS
   ============================================ */
.font-display { font-family: "Bebas Neue", sans-serif; letter-spacing: 2px; }
.font-mono { font-family: "JetBrains Mono", monospace; }

/* ============================================
   NAVIGATION
   ============================================ */
nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  padding: 26px 56px;
  display: flex; justify-content: space-between; align-items: center;
  background: rgba(14,30,51,.88);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid rgba(143,166,178,0.14);
  border-bottom: 1px solid var(--border);
  transition: padding .3s ease, background .3s ease, box-shadow .3s ease;
  min-height: 88px;
}
nav.site-nav.scrolled { padding: 18px 56px; background: rgba(14,30,51,.97); box-shadow: 0 4px 24px rgba(0,0,0,0.2); min-height: 72px; }

.nav-logo {
  display: flex; align-items: center; gap: 14px;
  text-decoration: none;
  transition: opacity .2s ease, transform .2s ease;
  flex-shrink: 0;
  cursor: pointer;
  padding: 4px 8px;
  margin-left: -8px;
  border-radius: 4px;
  border-radius: var(--radius-sm);
}
.nav-logo:hover { opacity: .92; transform: translateY(-1px); }
.nav-logo:active { transform: translateY(0); }
.nav-logo-icon {
  /* Two-tone monogram (white ST + brand-orange Y) baked into the PNG asset. */
  height: 48px;
  width: auto;
  display: block;
  transition: height .3s ease;
}
nav.site-nav.scrolled .nav-logo-icon { height: 38px; }
.nav-logo-text {
  font-family: "Bebas Neue", sans-serif;
  font-size: 36px;
  letter-spacing: 4px;
  color: #FFFFFF;
  color: var(--white);
  font-weight: 400;
  line-height: 1;
  transition: font-size .3s ease;
}
nav.site-nav.scrolled .nav-logo-text { font-size: 28px; }
.nav-logo-accent { color: #F47A0F; color: var(--accent); }

.nav-links { display: flex; gap: 28px; list-style: none; align-items: center; margin: 0; padding: 0; }
.nav-links > li { display: flex; align-items: center; line-height: 1; }
.nav-links a {
  display: inline-flex; align-items: center;
  color: #B4C0C6;
  color: var(--grey-lt); font-size: 12.5px; letter-spacing: 1.8px;
  text-transform: uppercase; font-weight: 600;
  position: relative; padding: 10px 2px;
  transition: color .25s ease;
  white-space: nowrap;
  line-height: 1;
}
.nav-links a:hover, .nav-links a.active { color: #FFFFFF; color: var(--white); }
.nav-links a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 2px; background: #F47A0F; background: var(--accent); border-radius: 2px;
}

.nav-dropdown { position: relative; display: flex; align-items: center; }
.nav-dropdown-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer;
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 12.5px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  font-weight: 600;
  padding: 10px 2px;
  transition: color .25s ease;
  white-space: nowrap;
  background: none;
  border: none;
  font-family: inherit;
  line-height: 1;
}
.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger { color: #FFFFFF; color: var(--white); }
.nav-dropdown-trigger svg { transition: transform .25s ease; }
.nav-dropdown:hover .nav-dropdown-trigger svg { transform: rotate(180deg); }
.nav-dropdown-menu {
  position: absolute; top: calc(100% + 8px); left: -16px;
  background: rgba(13, 34, 53, 0.98);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(143,166,178,0.32);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  border-radius: var(--radius-md);
  padding: 8px; min-width: 200px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.nav-dropdown-menu a {
  display: block; padding: 10px 16px; border-radius: 4px; border-radius: var(--radius-sm);
  font-size: 11px; letter-spacing: 2px; color: #B4C0C6; color: var(--grey-lt);
  text-transform: uppercase; font-weight: 600;
}
.nav-dropdown-menu a:hover { background: rgba(143,166,178,0.10); color: #FFFFFF; color: var(--white); }
.nav-dropdown-menu a::after { display: none !important; }
.nav-dropdown-menu a:focus-visible {
  background: rgba(143,166,178,0.10);
  color: #FFFFFF;
  color: var(--white);
  outline: 2px solid #F47A0F;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Chevron toggle next to the Products link — separate click target that pins
   the dropdown open (is-open); hover/focus-within still open it too. */
.nav-dropdown-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: #B4C0C6;
  color: var(--grey-lt); padding: 10px 4px; margin-left: 2px;
  transition: color .25s ease;
  line-height: 1;
}
.nav-dropdown-toggle svg { transition: transform .25s ease; }
.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown.is-open .nav-dropdown-toggle { color: #FFFFFF; color: var(--white); }
.nav-dropdown.is-open .nav-dropdown-toggle svg { transform: rotate(180deg); }
.nav-dropdown-toggle:focus-visible { outline: 2px solid #F47A0F; outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.nav-dropdown.is-open .nav-dropdown-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }

.nav-cta {
  background: #F47A0F !important;
  background: var(--accent) !important;
  color: #0B1B29 !important;
  color: var(--navy) !important;
  padding: 13px 24px !important;
  border-radius: 4px;
  border-radius: var(--radius-sm);
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  font-size: 12.5px !important;
  box-shadow: 0 4px 12px rgba(244,122,15,.3);
}
.nav-cta:hover { background: #F7963F !important; background: var(--accent-lt) !important; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(244,122,15,.45); }
.nav-cta.active::after { display: none; }
.nav-shop-trigger { gap: 7px; }
.nav-shop-dropdown:hover .nav-shop-trigger svg,
.nav-shop-dropdown:focus-within .nav-shop-trigger svg { transform: rotate(180deg); }
.nav-shop-menu {
  left: auto;
  right: 0;
  min-width: 280px;
  padding: 10px;
}
.nav-shop-menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 11px 12px;
  letter-spacing: 0;
  text-transform: none;
}
.nav-shop-menu a strong { color: #FFFFFF; color: var(--white); font-size: 13px; letter-spacing: .2px; }
.nav-shop-menu a small { color: #B4C0C6; color: var(--grey-lt); font-size: 11px; white-space: nowrap; }
.nav-shop-menu .nav-shop-main {
  display: block;
  background: rgba(244,122,15,.1);
  border: 1px solid rgba(244,122,15,.32);
  margin-bottom: 8px;
}
.nav-shop-menu .nav-shop-main strong,
.nav-shop-menu .nav-shop-main small { display: block; }
.nav-shop-menu .nav-shop-main strong { color: #F47A0F; color: var(--accent); margin-bottom: 4px; }
.nav-shop-label {
  display: block;
  padding: 7px 12px 4px;
  color: #F47A0F;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}

.hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; cursor: pointer; padding: 6px; min-width: 44px; min-height: 44px; background: none; border: none; }
.hamburger span { display: block; width: 26px; height: 2.5px; background: #FFFFFF; background: var(--white); transition: all .3s ease; border-radius: 3px; }
.hamburger.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ── MOBILE MENU ────────────────────────────────────────────────────────────
   One row system for every top-level entry. Entries with a submenu are a DIV
   (.mobile-products-row) and plain entries are an A, so both selectors carry
   the SAME height, alignment, type and divider — otherwise only some rows get
   a separator and the menu reads as unfinished.
   Everything is left-aligned: parents in Bebas caps, children indented in DM
   Sans behind an orange hairline, so the hierarchy is obvious at a glance.
   -------------------------------------------------------------------------- */
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 190;
  background: rgba(9,23,34,.98); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  flex-direction: column; justify-content: flex-start; align-items: stretch;
  gap: 0; padding: 92px 22px 36px; overflow-y: auto;
}
.mobile-menu.open { display: flex; }

/* Top-level row — shared by submenu parents and plain links. */
.mobile-menu > a:not(.m-cta),
.mobile-products-row {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  min-height: 58px; padding: 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: #FFFFFF;
  color: var(--white);
  font-family: "Bebas Neue", sans-serif;
  font-size: 24px; letter-spacing: 2.5px; line-height: 1;
}
/* The word itself fills the row so the whole left side is the tap target. */
.mobile-products-row > a {
  display: flex; align-items: center;
  flex: 1 1; align-self: stretch;
  color: #FFFFFF;
  color: var(--white);
  font-family: "Bebas Neue", sans-serif;
  font-size: 24px; letter-spacing: 2.5px; line-height: 1;
}
.mobile-menu > a:not(.m-cta):hover,
.mobile-products-row > a:hover { color: #F47A0F; color: var(--accent); }

/* The chevron is its own 44px target, so the word can navigate independently. */
.mobile-sub-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; flex: none;
  background: none; border: none; cursor: pointer;
  color: #B4C0C6;
  color: var(--grey-lt);
}
.mobile-sub-toggle svg { transition: transform .25s ease; }
.mobile-sub-toggle.is-open { color: #F47A0F; color: var(--accent); }
.mobile-sub-toggle.is-open svg { transform: rotate(180deg); }

.mobile-submenu {
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  padding: 6px 0 10px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.mobile-submenu a {
  display: flex; align-items: center;
  min-height: 46px; padding: 0 0 0 18px;
  border-left: 2px solid rgba(244,122,15,.4);
  font-family: 'DM Sans', sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: .2px;
  color: #B4C0C6;
  color: var(--grey-lt);
  text-align: left;
}
.mobile-submenu a:hover { color: #FFFFFF; color: var(--white); border-left-color: #F47A0F; border-left-color: var(--accent); }

/* ============================================
   BUTTONS
   ============================================ */
.btn-accent, .btn-primary, .btn-outline, .btn-steel, .btn-dim, .btn-ghost {
  padding: 16px 32px;
  font-size: 12px; font-weight: 700;
  letter-spacing: 2.5px; text-transform: uppercase;
  border-radius: 4px;
  border-radius: var(--radius-sm);
  transition: all .25s ease;
  display: inline-flex; align-items: center; gap: 10px;
  border: none; cursor: pointer; font-family: inherit;
  text-decoration: none;
}
.btn-accent { background: #F47A0F; background: var(--accent); color: #0B1B29; color: var(--navy); box-shadow: 0 6px 20px rgba(244,122,15,.32); }
.btn-accent:hover { background: #F7963F; background: var(--accent-lt); transform: translateY(-3px); box-shadow: 0 10px 28px rgba(244,122,15,.45); }
.btn-primary { background: #778894; background: var(--steel); color: #0B1B29; color: var(--navy); box-shadow: 0 4px 16px rgba(143,166,178,.22); }
.btn-primary:hover { background: #C8D1D5; background: var(--steel-lt); transform: translateY(-3px); box-shadow: 0 8px 24px rgba(143,166,178,.34); }
.btn-outline { background: transparent; color: #FFFFFF; color: var(--white); border: 1.5px solid rgba(143,166,178,0.32); border: 1.5px solid var(--border-strong); }
.btn-outline:hover { border-color: #778894; border-color: var(--steel); color: #778894; color: var(--steel); transform: translateY(-2px); }
.btn-steel { background: rgba(143,166,178,.10); color: #C8D1D5; color: var(--steel-lt); border: 1.5px solid rgba(143,166,178,.38); }
.btn-steel:hover { background: rgba(143,166,178,.18); border-color: #778894; border-color: var(--steel); transform: translateY(-2px); }
.btn-dim { background: transparent; color: #B4C0C6; color: var(--grey-lt); border: 1.5px solid rgba(143,166,178,.20); }
.btn-dim:hover { border-color: rgba(143,166,178,.42); color: #FFFFFF; color: var(--white); transform: translateY(-2px); }
.btn-ghost { padding: 12px 8px; color: #B4C0C6; color: var(--grey-lt); letter-spacing: 2px; }
.btn-ghost:hover { color: #FFFFFF; color: var(--white); transform: translateX(4px); }
.btn-accent:disabled, .btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ============================================
   HERO
   ============================================ */
.hero {
  min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr;
  position: relative; overflow: hidden;
}
.hero-left {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0;
  padding: 160px 64px 80px; position: relative; z-index: 2;
}
.hero-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 0% 60%, rgba(143,166,178,.09) 0%, transparent 60%),
    radial-gradient(ellipse at 15% 5%, rgba(244,122,15,.07) 0%, transparent 50%);
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(143,166,178,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143,166,178,.04) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at top left, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at top left, black 30%, transparent 75%);
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  background: rgba(244,122,15,.09); border: 1px solid rgba(244,122,15,.4);
  color: #F47A0F;
  color: var(--accent); font-size: 11px; letter-spacing: 3.5px;
  text-transform: uppercase; padding: 9px 16px;
  border-radius: 4px;
  border-radius: var(--radius-sm); margin-bottom: 28px;
  width: fit-content; font-weight: 700;
}
.hero-eyebrow::before {
  content: ""; width: 7px; height: 7px;
  background: #F47A0F;
  background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 10px #F47A0F;
  box-shadow: 0 0 10px var(--accent);
}
.hero-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(56px, 8vw, 116px);
  line-height: .91; letter-spacing: 3px;
  margin-bottom: 28px;
}
.hero-title em { color: #778894; color: var(--steel); font-style: normal; }
.hero-title .accent-word { color: #F47A0F; color: var(--accent); position: relative; display: inline-block; }
.hero-title .accent-word::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 6px;
  height: 10px; background: rgba(244,122,15,.2); z-index: -1; border-radius: 2px;
}
.hero-body {
  font-size: 18px; line-height: 1.75; color: #B4C0C6; color: var(--grey-lt);
  max-width: 520px; margin-bottom: 36px; font-weight: 300;
}
.hero-body strong { color: #FFFFFF; color: var(--white); font-weight: 600; }
.hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero-trust { display: flex; gap: 24px; margin-top: 44px; flex-wrap: wrap; }
.trust-item {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: #65747C;
  color: var(--grey); font-weight: 600;
}
.trust-item svg { width: 16px; height: 16px; color: #778894; color: var(--steel); flex-shrink: 0; }

.hero-right { position: relative; overflow: hidden; }
.hero-right picture {
  display: block;
  width: 100%;
  height: 100%;
}
.hero-right img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: brightness(.8) contrast(1.08);
  transition: transform 14s ease;
}
.hero:hover .hero-right img { transform: scale(1.06); }
.hero-right::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, #0B1B29 0%, transparent 40%),
    linear-gradient(0deg, #0B1B29 0%, transparent 35%);
  background:
    linear-gradient(90deg, var(--navy) 0%, transparent 40%),
    linear-gradient(0deg, var(--navy) 0%, transparent 35%);
}

/* ============================================
   PAGE HEADER
   ============================================ */
.page-header {
  padding: 180px 64px 90px;
  background: linear-gradient(180deg, #132C3E 0%, #0B1B29 100%);
  background: linear-gradient(180deg, var(--navy-mid) 0%, var(--navy) 100%);
  border-bottom: 1px solid rgba(143,166,178,0.14);
  border-bottom: 1px solid var(--border);
  position: relative; overflow: hidden;
}
.page-header::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(143,166,178,.09) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(244,122,15,.06) 0%, transparent 55%);
  pointer-events: none;
}
.crumbs {
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: #65747C;
  color: var(--grey); margin-bottom: 24px; position: relative; font-weight: 500;
}
.crumbs a { color: #778894; color: var(--steel); }
.crumbs a:hover { color: #FFFFFF; color: var(--white); }
.crumbs .sep { margin: 0 12px; }
.page-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(48px, 7vw, 96px);
  letter-spacing: 3px; line-height: .94; margin-bottom: 20px;
  position: relative;
}
.page-title em { color: #F47A0F; color: var(--accent); font-style: normal; }
.page-title span { color: #778894; color: var(--steel); }
.page-lead {
  font-size: 18px; line-height: 1.75; color: #B4C0C6; color: var(--grey-lt);
  max-width: 720px; font-weight: 300; position: relative;
}

/* ============================================
   SECTIONS
   ============================================ */
.section { padding: 96px 64px; }
.section-tight { padding: 68px 64px; }
.section-tag {
  font-size: 11px; letter-spacing: 3.5px; text-transform: uppercase;
  color: #778894;
  color: var(--steel); margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 12px; font-weight: 600;
}
.section-tag::before {
  content: ""; width: 28px; height: 2px;
  background: #778894;
  background: var(--steel); border-radius: 2px;
}
.section-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(40px, 5vw, 70px);
  letter-spacing: 2px; margin-bottom: 24px;
  line-height: .98; max-width: 840px;
}
.section-title em { font-style: normal; color: #778894; color: var(--steel); }
.section-title .acc { color: #F47A0F; color: var(--accent); }
.section-sub {
  font-size: 17px; line-height: 1.75; color: #B4C0C6; color: var(--grey-lt);
  max-width: 680px; margin-bottom: 40px; font-weight: 300;
}

/* ============================================
   CARDS
   ============================================ */
.card {
  background: linear-gradient(180deg, rgba(20,42,66,.58) 0%, rgba(20,42,66,.24) 100%);
  border: 1px solid rgba(143,166,178,0.14);
  border: 1px solid var(--border);
  border-radius: 6px;
  border-radius: var(--radius-md);
  padding: 30px 28px;
  transition: all .3s ease;
  position: relative;
}
.card:hover {
  border-color: rgba(143,166,178,0.32);
  border-color: var(--border-strong);
  background: linear-gradient(180deg, rgba(28,60,85,.62) 0%, rgba(20,42,66,.34) 100%);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  box-shadow: var(--shadow-lg);
}
.card-icon {
  width: 52px; height: 52px;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(143,166,178,0.10);
  border: 1px solid rgba(143,166,178,0.32);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  border-radius: var(--radius-sm);
  color: #778894;
  color: var(--steel); margin-bottom: 22px;
}
.card-title {
  font-family: "Bebas Neue", sans-serif;
  font-size: 26px; letter-spacing: 1.5px;
  color: #FFFFFF;
  color: var(--white); margin-bottom: 14px;
}
.card-body { font-size: 15px; line-height: 1.7; color: #B4C0C6; color: var(--grey-lt); font-weight: 300; }

/* Product cards */
.product-card {
  background: rgba(20,42,66,.42);
  border: 1px solid rgba(143,166,178,0.14);
  border: 1px solid var(--border);
  border-radius: 6px;
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all .35s ease;
  display: flex; flex-direction: column;
}
.product-card:hover {
  transform: translateY(-6px);
  border-color: #778894;
  border-color: var(--steel);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  box-shadow: var(--shadow-xl);
}
.product-card-media {
  aspect-ratio: 1.333;
  background: #132C3E;
  background: var(--navy-mid);
  overflow: hidden; position: relative;
}
/* ============================================
   BRACKET PACK PICKER
   ============================================ */
.pack-picker {
  overflow: hidden;
  margin-bottom: 16px;
  background: rgba(9,23,34,.96);
  border: 1px solid rgba(200,209,213,.22);
  border-radius: 8px;
  box-shadow: 0 16px 38px rgba(9,23,34,.18);
}
.pack-picker-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px;
  background: rgba(255,255,255,.045);
  border-bottom: 1px solid rgba(200,209,213,.16);
}
.pack-picker-heading strong {
  display: block;
  color: #FFFFFF;
  color: var(--white);
  font-size: 16px;
  line-height: 1.2;
}
.pack-picker-heading div > span {
  display: block;
  max-width: 370px;
  margin-top: 5px;
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 12px;
  line-height: 1.45;
}
.pack-picker-heading-tag {
  flex: 0 0 auto;
  padding: 5px 8px;
  border: 1px solid rgba(244,122,15,.44);
  border-radius: 4px;
  background: rgba(244,122,15,.1);
  color: #F7963F;
  color: var(--accent-lt);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .7px;
  text-transform: uppercase;
}
.pack-picker-list { display: flex; flex-direction: column; gap: 7px; padding: 10px; }
.pack-picker-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 10px 12px;
  background: rgba(255,255,255,.045);
  border: 1px solid rgba(200,209,213,.14);
  border-radius: 8px;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.pack-picker-option:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,.075);
  border-color: rgba(200,209,213,.34);
}
.pack-picker-option.is-popular {
  background: rgba(244,122,15,.1);
  border-color: rgba(244,122,15,.48);
}
.pack-picker-option.is-value { border-color: rgba(155,197,222,.38); }
.pack-picker-name { display: flex; align-items: center; gap: 9px; min-width: 0; }
.pack-picker-name > span:first-child { min-width: 0; }
.pack-picker-name strong,
.pack-picker-name small,
.pack-picker-price strong,
.pack-picker-price small { display: block; }
.pack-picker-name strong { color: #FFFFFF; color: var(--white); font-size: 14px; }
.pack-picker-name small { margin-top: 3px; color: #B4C0C6; color: var(--grey-lt); font-size: 11px; }
.pack-picker-badge {
  padding: 3px 6px;
  border: 1px solid rgba(244,122,15,.38);
  border-radius: 4px;
  background: rgba(244,122,15,.12);
  color: #F7963F;
  color: var(--accent-lt);
  font-size: 8.5px;
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
  white-space: nowrap;
}
.pack-picker-price { flex: 0 0 auto; text-align: right; }
.pack-picker-price strong { color: #FFFFFF; color: var(--white); font-size: 15px; }
.pack-picker-price small { margin-top: 2px; color: #B4C0C6; color: var(--grey-lt); font-size: 10.5px; }
.pack-picker-saving {
  display: inline-flex;
  justify-content: center;
  min-width: 92px;
  margin-top: 3px;
  padding: 2px 6px;
  border: 1px solid rgba(244,122,15,.28);
  border-radius: 999px;
  color: #F7963F;
  color: var(--accent-lt);
  font-size: 10px;
  font-weight: 700;
}
.pack-picker-custom {
  display: block;
  padding: 9px 14px 12px;
  color: #C8D1D5;
  color: var(--steel-lt);
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}
.pack-picker-custom:hover { color: #FFFFFF; color: var(--white); }
.bracket-price-first {
  padding: 16px 18px;
  background: rgba(244,122,15,.08);
  border: 1px solid rgba(244,122,15,.42);
  border-radius: 6px;
  border-radius: var(--radius-md);
}
.bracket-price-label {
  display: block;
  margin-bottom: 7px;
  color: #F47A0F;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.bracket-price-line {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.bracket-unit-price {
  color: #FFFFFF;
  color: var(--white);
  font-size: 38px;
  font-weight: 750;
  line-height: 1;
}
.bracket-price-was {
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 16px;
  text-decoration: line-through;
}
.bracket-price-unit {
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 13px;
}
.bracket-strength-proof {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  padding-left: 12px;
  border-left: 3px solid #F47A0F;
  border-left: 3px solid var(--accent);
}
.bracket-strength-proof strong {
  color: #FFFFFF;
  color: var(--white);
  font-size: 14px;
}
.bracket-strength-proof span {
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 12px;
  line-height: 1.45;
}
.bracket-support-content {
  width: 100%;
  margin-top: 42px;
  padding-top: 36px;
  border-top: 1px solid rgba(143,166,178,0.14);
  border-top: 1px solid var(--border);
}
.bracket-support-content .pack-picker-list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.bracket-support-content .pack-picker-option {
  align-items: flex-start;
  min-height: 126px;
}
.bracket-support-content .pack-picker-name {
  align-items: flex-start;
  flex-direction: column;
}
.bracket-support-content .pack-picker-price {
  align-self: flex-end;
}
.bracket-support-content [data-testid="social-proof-summary"] {
  margin: 30px 0 26px !important;
}
.bracket-support-copy {
  max-width: none;
  margin: 0;
}
.bracket-benefit-tags,
.bracket-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
.bracket-trust-row {
  gap: 14px 24px;
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 13px;
}
.bracket-trust-row span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.bracket-trade-note {
  margin-top: 20px;
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 13px;
}
.bracket-trade-note a {
  color: #F47A0F;
  color: var(--accent);
  font-weight: 600;
}
.product-card-media picture,
.gallery-tile picture {
  display: block;
  width: 100%;
  height: 100%;
}
.product-card-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s ease;
  filter: brightness(.92);
}
.product-card:hover .product-card-media img { transform: scale(1.05); }
.product-card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(14,30,51,.64) 100%);
}
.product-card-body { padding: 24px; flex: 1 1; display: flex; flex-direction: column; }
.product-card h3 {
  font-family: "Bebas Neue", sans-serif;
  font-size: 30px; letter-spacing: 1.5px;
  color: #FFFFFF;
  color: var(--white); margin-bottom: 10px;
}
.product-card p { color: #B4C0C6; color: var(--grey-lt); font-size: 14px; line-height: 1.65; flex: 1 1; margin-bottom: 22px; font-weight: 300; }
.product-card .price-tag {
  font-family: "Bebas Neue", sans-serif;
  font-size: 20px; color: #F47A0F; color: var(--accent); letter-spacing: 1.5px; margin-bottom: 18px;
}
.product-card .finish-tag,
.finish-tag {
  display: inline-block;
  font-family: "Bebas Neue", sans-serif;
  font-size: 14px;
  color: #F47A0F;
  color: var(--accent);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  background: rgba(244,122,15,.06);
  border: 1px solid rgba(244,122,15,.35);
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 18px;
}
.product-availability {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 16px;
  padding: 5px 9px;
  border: 1px solid rgba(143,166,178,0.32);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  color: #C8D1D5;
  color: var(--steel-lt);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.product-availability.is-online {
  background: rgba(63,143,98,.12);
  background: var(--success-bg);
  border-color: rgba(63,143,98,.42);
  border-color: var(--success-border);
  color: #5EA878;
  color: var(--success-lt);
}

/* ============================================
   SPEC LIST (B2B product spec rows)
   ============================================ */
.spec-list {
  margin-top: 28px;
  border-top: 1px solid rgba(143,166,178,0.14);
  border-top: 1px solid var(--border);
}
.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(143,166,178,0.14);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.spec-label {
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #B4C0C6;
  color: var(--grey-lt);
  font-weight: 600;
}
.spec-value {
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  letter-spacing: 1.2px;
  color: #FFFFFF;
  color: var(--white);
  text-align: right;
  max-width: 60%;
}

/* ============================================
   CONTACT REPLY BADGE
   ============================================ */
.reply-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 28px;
  padding: 14px 22px;
  background: rgba(63,143,98,.12);
  background: var(--success-bg);
  border: 1px solid rgba(63,143,98,.42);
  border: 1px solid var(--success-border);
  border-radius: 6px;
  border-radius: var(--radius-md);
  max-width: fit-content;
}
.reply-dot {
  width: 10px; height: 10px;
  background: #5EA878;
  background: var(--success-lt);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(63,143,98,.6);
  animation: reply-pulse 2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes reply-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(63,143,98,.55); }
  70%  { box-shadow: 0 0 0 12px rgba(63,143,98,0); }
  100% { box-shadow: 0 0 0 0 rgba(63,143,98,0); }
}
.reply-text {
  display: flex; flex-direction: column; gap: 3px;
  line-height: 1.3;
}
.reply-text strong {
  font-family: "Bebas Neue", sans-serif;
  font-size: 16px;
  letter-spacing: 2px;
  color: #FFFFFF;
  color: var(--white);
  text-transform: uppercase;
}
.reply-text span {
  font-size: 12px;
  color: #B4C0C6;
  color: var(--grey-lt);
  letter-spacing: 0.3px;
}

/* ============================================
   PROCESS STEP NUMBER
   ============================================ */
.step-num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 44px;
  letter-spacing: 2px;
  color: #F47A0F;
  color: var(--accent);
  line-height: 1;
  margin-bottom: 14px;
}


/* ============================================
   PRICE CALCULATOR
   ============================================ */
.calc-wrap {
  background: rgba(20,42,66,.52);
  border: 1px solid rgba(143,166,178,0.32);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  border-radius: var(--radius-md);
  padding: 36px;
}
.calc-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 22px; }
.calc-label { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: #B4C0C6; color: var(--grey-lt); font-weight: 600; }
.calc-value {
  font-family: "Bebas Neue", sans-serif;
  font-size: 28px; color: #FFFFFF; color: var(--white); letter-spacing: 1.5px;
}
.calc-value.accent { color: #F47A0F; color: var(--accent); }
.calc-total {
  font-family: "Bebas Neue", sans-serif;
  font-size: 56px; line-height: 1; color: #F47A0F; color: var(--accent); letter-spacing: 2px;
}
.calc-divider { height: 1px; background: rgba(143,166,178,0.14); background: var(--border); margin: 22px 0; }
.qty-control { display: inline-flex; align-items: center; border: 1px solid rgba(143,166,178,0.32); border: 1px solid var(--border-strong); border-radius: 4px; border-radius: var(--radius-sm); overflow: hidden; }
.qty-btn {
  width: 42px; height: 42px;
  background: transparent; color: #FFFFFF; color: var(--white); border: none;
  font-size: 20px; cursor: pointer;
  transition: background .2s ease;
}
.qty-btn:hover { background: rgba(143,166,178,0.12); }
.qty-input {
  width: 80px; height: 42px; background: transparent;
  border: none; border-left: 1px solid rgba(143,166,178,0.14); border-left: 1px solid var(--border); border-right: 1px solid rgba(143,166,178,0.14); border-right: 1px solid var(--border);
  color: #FFFFFF;
  color: var(--white); text-align: center; font-size: 16px;
  font-family: "JetBrains Mono", monospace; font-weight: 600;
}
.qty-input:focus { outline: none; background: rgba(143,166,178,0.07); }
.calc-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.calc-preset {
  padding: 8px 14px; font-size: 12px; font-weight: 600; letter-spacing: 1px;
  background: transparent; color: #B4C0C6; color: var(--grey-lt);
  border: 1px solid rgba(143,166,178,0.14);
  border: 1px solid var(--border); border-radius: 4px; border-radius: var(--radius-sm);
  cursor: pointer; transition: all .2s ease; font-family: inherit;
}
.calc-preset:hover { color: #FFFFFF; color: var(--white); border-color: #778894; border-color: var(--steel); }
.calc-preset.active { background: #778894; background: var(--steel); color: #0B1B29; color: var(--navy); border-color: #778894; border-color: var(--steel); }
.calc-note { font-size: 13px; color: #65747C; color: var(--grey); margin-top: 18px; font-style: italic; }
.calc-note strong { color: #C8D1D5; color: var(--steel-lt); font-style: normal; font-weight: 600; }

/* Size selector for star pickets */
.size-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-gap: 10px; gap: 10px; margin-bottom: 22px; }
.size-option {
  padding: 16px 12px; border: 1px solid rgba(143,166,178,0.14); border: 1px solid var(--border);
  border-radius: 4px;
  border-radius: var(--radius-sm); background: transparent;
  cursor: pointer; transition: all .2s ease;
  text-align: center; font-family: inherit; color: #B4C0C6; color: var(--grey-lt);
}
.size-option:hover { border-color: #778894; border-color: var(--steel); color: #FFFFFF; color: var(--white); }
.size-option.active { background: rgba(143,166,178,0.11); border-color: #778894; border-color: var(--steel); color: #FFFFFF; color: var(--white); }
.size-option .size-label { font-family: "Bebas Neue", sans-serif; font-size: 22px; letter-spacing: 1px; color: #FFFFFF; color: var(--white); display: block; }
.size-option .size-price { font-size: 12px; color: #B4C0C6; color: var(--grey-lt); margin-top: 4px; }
.size-option.active .size-price { color: #F47A0F; color: var(--accent); }

/* Pointer toggle */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px; background: rgba(143,166,178,0.05);
  border: 1px solid rgba(143,166,178,0.14);
  border: 1px solid var(--border); border-radius: 4px; border-radius: var(--radius-sm);
}
.toggle-info { flex: 1 1; }
.toggle-info h4 { font-family: "Bebas Neue", sans-serif; font-size: 20px; letter-spacing: 1px; color: #FFFFFF; color: var(--white); margin-bottom: 4px; }
.toggle-info p { font-size: 13px; color: #B4C0C6; color: var(--grey-lt); }
.toggle-switch {
  position: relative; width: 50px; height: 28px;
  background: #1F465B;
  background: var(--navy-light); border-radius: 999px;
  cursor: pointer; transition: background .2s ease;
  border: none; flex-shrink: 0;
}
.toggle-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 22px; height: 22px; background: #FFFFFF; background: var(--white);
  border-radius: 50%; transition: transform .25s ease;
}
.toggle-switch.on { background: #F47A0F; background: var(--accent); }
.toggle-switch.on::after { transform: translateX(22px); }

/* ============================================
   STATS / TRUST BAR
   ============================================ */
.stats-row {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-gap: 28px;
  gap: 28px; padding: 54px 0; border-top: 1px solid rgba(143,166,178,0.14); border-top: 1px solid var(--border); border-bottom: 1px solid rgba(143,166,178,0.14); border-bottom: 1px solid var(--border);
}
.stat {
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
}
.stat-number {
  font-family: "Bebas Neue", sans-serif;
  font-size: 56px; line-height: 1; color: #F47A0F; color: var(--accent); letter-spacing: 2px;
}
.stat-number span,
.stat-number .counter-suffix { color: #778894; color: var(--steel); font-size: 36px; margin-left: 2px; }
.stat-label { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: #65747C; color: var(--grey); font-weight: 600; }

/* ============================================
   FAQ ACCORDION
   ============================================ */
.faq-item {
  border-bottom: 1px solid rgba(143,166,178,0.14);
  border-bottom: 1px solid var(--border);
  padding: 4px 0;
}
.faq-trigger {
  width: 100%; background: none; border: none; cursor: pointer;
  padding: 24px 0; display: flex; justify-content: space-between; align-items: center;
  text-align: left; gap: 24px;
  font-family: inherit;
}
.faq-question {
  font-family: "Bebas Neue", sans-serif;
  font-size: 22px; letter-spacing: 1px; color: #FFFFFF; color: var(--white);
  flex: 1 1;
}
.faq-icon {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(143,166,178,0.32);
  border: 1px solid var(--border-strong);
  display: flex; align-items: center; justify-content: center;
  color: #778894;
  color: var(--steel); flex-shrink: 0;
  transition: transform .3s ease, background .2s ease, color .2s ease;
}
.faq-trigger:hover .faq-icon { background: #778894; background: var(--steel); color: #0B1B29; color: var(--navy); }
.faq-item.open .faq-icon { transform: rotate(45deg); background: #F47A0F; background: var(--accent); color: #0B1B29; color: var(--navy); border-color: #F47A0F; border-color: var(--accent); }
.faq-content {
  max-height: 0; overflow: hidden;
  transition: max-height .35s ease, padding .25s ease;
  font-size: 15px; line-height: 1.75; color: #B4C0C6; color: var(--grey-lt); font-weight: 300;
}
.faq-item.open .faq-content { max-height: 800px; padding: 0 0 26px; }

/* ============================================
   FEATURES LIST
   ============================================ */
.feat-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.feat-list li {
  display: flex; align-items: flex-start; gap: 14px;
  font-size: 15px; color: #B4C0C6; color: var(--grey-lt); line-height: 1.6; font-weight: 300;
}
.feat-list li svg { width: 18px; height: 18px; color: #778894; color: var(--steel); flex-shrink: 0; margin-top: 3px; }
.feat-list li strong { color: #FFFFFF; color: var(--white); font-weight: 600; }

/* Notice / Alert banner */
.notice {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px 20px;
  background: rgba(244,122,15,.08);
  border: 1px solid rgba(244,122,15,.3);
  border-radius: 4px;
  border-radius: var(--radius-sm);
  font-size: 14px; line-height: 1.55; color: #F7963F; color: var(--accent-lt);
}
.notice svg { color: #F47A0F; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.notice strong { color: #F47A0F; color: var(--accent); display: block; font-weight: 700; letter-spacing: 0.5px; }
.notice.success {
  background: rgba(63,143,98,.12);
  background: var(--success-bg);
  border-color: rgba(63,143,98,.42);
  border-color: var(--success-border);
  color: #FFFFFF;
  color: var(--white);
}
.notice.success svg,
.notice.success strong { color: #5EA878; color: var(--success-lt); }
.checkout-paid-card { border-color: rgba(63,143,98,.42); border-color: var(--success-border); }

/* ============================================
   FORMS
   ============================================ */
.form-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-row label { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: #B4C0C6; color: var(--grey-lt); font-weight: 600; }
.form-row input, .form-row textarea, .form-row select {
  width: 100%; background: rgba(20,42,66,.52);
  border: 1px solid rgba(143,166,178,0.32);
  border: 1px solid var(--border-strong); border-radius: 4px; border-radius: var(--radius-sm);
  /* 16px minimum stops iOS Safari auto-zooming the page when a field is focused */
  padding: 14px 16px; color: #FFFFFF; color: var(--white); font-size: 16px;
  font-family: inherit; transition: border .2s ease, background .2s ease;
  resize: vertical;
}
.form-row input::placeholder, .form-row textarea::placeholder { color: #65747C; color: var(--grey); }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: none; border-color: #778894; border-color: var(--steel); background: rgba(20,42,66,.82);
}
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 16px; gap: 16px; }
.form-row select option { color: #091722; color: var(--ink); background: #FFFFFF; background: var(--white); }

.st-contact-section {
  background:
    linear-gradient(180deg, rgba(9,23,34,.98), rgba(19,44,62,.98));
  color: #FFFFFF;
  color: var(--white);
}
.st-contact-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  grid-gap: 28px;
  gap: 28px;
  align-items: start;
}
.st-contact-panel,
.st-contact-card {
  border: 1px solid rgba(200,209,213,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.065);
  box-shadow: 0 18px 48px rgba(0,0,0,.18);
}
.st-contact-panel {
  padding: 30px;
}
.st-contact-panel h2 {
  margin: 0 0 12px;
  font-family: "Bebas Neue", sans-serif;
  font-size: 48px;
  letter-spacing: 1.3px;
  line-height: 1;
}
.st-contact-panel > p {
  margin: 0 0 24px;
  max-width: 620px;
  color: rgba(247,245,239,.82);
  font-size: 16px;
  line-height: 1.7;
}
.st-contact-panel .form-row label {
  color: rgba(200,209,213,.9);
}
.st-contact-panel .form-row input,
.st-contact-panel .form-row textarea,
.st-contact-panel .form-row select {
  background: rgba(9,23,34,.72);
  border-color: rgba(200,209,213,.22);
  color: #FFFFFF;
  color: var(--white);
}
.st-contact-panel .form-row input::placeholder,
.st-contact-panel .form-row textarea::placeholder {
  color: rgba(200,209,213,.52);
}
.st-contact-panel .form-row input:focus,
.st-contact-panel .form-row textarea:focus,
.st-contact-panel .form-row select:focus {
  background: rgba(9,23,34,.92);
  border-color: #F47A0F;
  border-color: var(--accent);
}
.st-contact-panel .notice {
  margin-bottom: 18px;
}
.st-contact-panel .notice a {
  color: #F7963F;
  color: var(--accent-lt);
  font-weight: 700;
}
.st-contact-panel .notice div {
  display: grid;
  grid-gap: 4px;
  gap: 4px;
}
.st-form-note {
  display: block;
  margin-top: 6px;
  color: #F7963F;
  color: var(--accent-lt);
  font-size: 12px;
  line-height: 1.5;
}
.st-contact-submit {
  margin-top: 4px;
}
.st-contact-side {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}
.st-contact-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-gap: 14px;
  gap: 14px;
  padding: 18px;
}
.st-contact-card svg {
  width: 38px;
  height: 38px;
  padding: 9px;
  border: 1px solid rgba(244,122,15,.28);
  border-radius: 8px;
  background: rgba(244,122,15,.09);
  color: #F47A0F;
  color: var(--accent);
}
.st-contact-card h3 {
  margin: 0 0 4px;
  color: #FFFFFF;
  color: var(--white);
  font-size: 17px;
  line-height: 1.2;
}
.st-contact-card a {
  color: #F7963F;
  color: var(--accent-lt);
  font-weight: 700;
  overflow-wrap: anywhere;
}
.st-contact-card p {
  margin: 4px 0 0;
  color: rgba(247,245,239,.74);
  font-size: 13px;
  line-height: 1.58;
}

.st-review-hero .st-product-hero-inner {
  max-width: 780px;
  margin-left: 0;
}
.st-review-section {
  padding-top: 72px;
}
.st-review-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
  grid-gap: 28px;
  gap: 28px;
  align-items: start;
}
.st-review-panel h2,
.st-review-form-panel h2 {
  max-width: 680px;
}
.st-review-actions {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin-top: 24px;
}
.st-review-actions a {
  width: 100%;
}
.st-review-callout {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
  padding: 16px;
  border: 1px solid rgba(244,122,15,.34);
  border-radius: 8px;
  background: rgba(244,122,15,.11);
  color: #FFFFFF;
  color: var(--white);
  font-weight: 900;
  line-height: 1.45;
}
.st-review-callout svg {
  flex: 0 0 auto;
  color: #F47A0F;
  color: var(--accent);
}
.st-review-permission {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 4px 0 20px;
  color: rgba(247,245,239,.82);
  font-size: 13px;
  line-height: 1.55;
}
.st-review-permission input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: #F47A0F;
  accent-color: var(--accent);
  flex: 0 0 auto;
}

/* ============================================
   FOOTER
   ============================================ */
footer.site-footer {
  background: #132C3E;
  background: var(--navy-mid);
  border-top: 1px solid rgba(143,166,178,0.14);
  border-top: 1px solid var(--border);
  padding: 70px 64px 30px;
}
.footer-grid {
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr);
  grid-gap: 56px;
  gap: 56px; margin-bottom: 50px;
}
/* legacy .footer-brand img kept for fallback (we now use .footer-logo) */
.footer-brand p { font-size: 14px; color: #B4C0C6; color: var(--grey-lt); line-height: 1.65; font-weight: 300; max-width: 320px; }
.footer-logo {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 20px;
}
.footer-logo-icon { height: 38px; width: auto; display: block; }
.footer-logo span {
  font-family: "Bebas Neue", sans-serif;
  font-size: 28px; letter-spacing: 4px;
  color: #FFFFFF;
  color: var(--white); line-height: 1;
}
.footer-logo .footer-logo-accent { color: #F47A0F; color: var(--accent); }
.footer-col h5 {
  font-family: "Bebas Neue", sans-serif;
  font-size: 16px; letter-spacing: 2.5px;
  color: #FFFFFF;
  color: var(--white); margin-bottom: 18px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a {
  color: #B4C0C6;
  color: var(--grey-lt); font-size: 13px; font-weight: 400;
  transition: color .2s ease;
}
.footer-col a:hover { color: #778894; color: var(--steel); }
.footer-contact { font-size: 13px; color: #B4C0C6; color: var(--grey-lt); line-height: 1.6; font-weight: 300; display: flex; flex-direction: column; gap: 14px; }
.footer-contact strong { color: #FFFFFF; color: var(--white); font-weight: 600; display: block; margin-bottom: 3px; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; }
.footer-contact-row { display: flex; gap: 10px; align-items: flex-start; color: #B4C0C6; color: var(--grey-lt); }
.footer-contact-row > svg { color: #F47A0F; color: var(--accent); margin-top: 2px; flex-shrink: 0; }
.footer-contact-row a { color: #B4C0C6; color: var(--grey-lt); transition: color .2s ease; }
.footer-contact-row a:hover { color: #F47A0F; color: var(--accent); }
.footer-social {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border: 1px solid rgba(143,166,178,0.32);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  color: #B4C0C6;
  color: var(--grey-lt);
  transition: all .2s ease;
  text-decoration: none;
}
.footer-social:hover { background: rgba(143,166,178,0.10); color: #FFFFFF; color: var(--white); border-color: #778894; border-color: var(--steel); transform: translateY(-1px); }
.footer-bottom {
  border-top: 1px solid rgba(143,166,178,0.14);
  border-top: 1px solid var(--border);
  padding-top: 24px; display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; color: #65747C; color: var(--grey); flex-wrap: wrap; gap: 12px;
}
.footer-bottom a { color: #778894; color: var(--steel); }

/* ============================================
   GRIDS / UTIL
   ============================================ */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 24px; gap: 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 48px; gap: 48px; align-items: start; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 24px; gap: 24px; }
.grid-2 > *,
.grid-3 > *,
.grid-4 > *,
.products-range-grid > * { min-width: 0; }

.tag-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; background: rgba(143,166,178,0.10);
  border: 1px solid rgba(143,166,178,0.32);
  border: 1px solid var(--border-strong); border-radius: 999px;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  color: #C8D1D5;
  color: var(--steel-lt); font-weight: 600;
}
.tag-chip.accent { background: rgba(244,122,15,.08); border-color: rgba(244,122,15,.4); color: #F47A0F; color: var(--accent); }

/* Gallery strip — in-field photos */
.gallery-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 12px;
  gap: 12px;
  margin-top: 12px;
}
.gallery-tile {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 6px;
  border-radius: var(--radius-md);
  border: 1px solid rgba(143,166,178,0.14);
  border: 1px solid var(--border);
  background: #132C3E;
  background: var(--navy-mid);
  position: relative;
  transition: transform .35s ease, border-color .25s ease, box-shadow .35s ease;
}
.gallery-tile img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .8s ease, filter .35s ease;
  filter: brightness(.92) saturate(1.05);
}
.gallery-tile:hover {
  transform: translateY(-4px);
  border-color: #778894;
  border-color: var(--steel);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  box-shadow: var(--shadow-lg);
}
.gallery-tile:hover img { transform: scale(1.07); filter: brightness(1) saturate(1.1); }
@media (max-width: 1024px) {
  .gallery-strip { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .gallery-strip { grid-template-columns: repeat(2, 1fr); }
}

.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(143,166,178,0.32), transparent);
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  margin: 64px 0;
}

/* ============================================
   COMPARISON TABLE
   ============================================ */
.compare-wrap {
  margin-top: 40px;
  border: 1px solid rgba(143,166,178,0.14);
  border: 1px solid var(--border);
  border-radius: 6px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: rgba(20,42,66,.42);
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.compare-head {
  background: #1F465B;
  background: var(--navy-light);
}
.compare-head tr {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  border-bottom: 1px solid rgba(143,166,178,0.32);
  border-bottom: 1px solid var(--border-strong);
}
.compare-head .compare-cell {
  font-family: "Bebas Neue", sans-serif;
  font-size: 18px;
  letter-spacing: 2px;
  padding: 18px 24px;
  color: #FFFFFF;
  color: var(--white);
  text-align: left;
  font-weight: 400;
}
.compare-head .compare-us { color: #F47A0F; color: var(--accent); }
.compare-head .compare-them { color: #B4C0C6; color: var(--grey-lt); text-align: center; }
.compare-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  border-bottom: 1px solid rgba(143,166,178,0.14);
  border-bottom: 1px solid var(--border);
  transition: background .2s ease;
}
.compare-row:last-child { border-bottom: none; }
.compare-row:hover { background: rgba(143,166,178,0.05); }
.compare-cell {
  padding: 18px 24px;
  display: flex;
  align-items: center;
  font-size: 15px;
  line-height: 1.55;
  color: #B4C0C6;
  color: var(--grey-lt);
  text-align: left;
  font-weight: 400;
}
.compare-cell.compare-label { color: #FFFFFF; color: var(--white); font-weight: 500; }
.compare-cell.compare-us { justify-content: center; background: rgba(244,122,15,.05); }
.compare-cell.compare-them { justify-content: center; }
.check-yes { color: #F47A0F; color: var(--accent); }
.check-no { color: #65747C; color: var(--grey); opacity: .6; }
.compare-them-text { font-size: 13px; color: #65747C; color: var(--grey); font-style: italic; }
@media (max-width: 768px) {
  .compare-head .compare-cell, .compare-cell { padding: 12px 14px; font-size: 13px; }
  .compare-head .compare-cell { font-size: 14px; letter-spacing: 1px; }
}

/* Product hero shot — for photos with solid dark/black backgrounds (picket-hero.jpg).
   Lets the picket image bleed into the navy site bg without an obvious crop edge. */
.picket-hero-shot {
  background: linear-gradient(135deg, #000 0%, #0a0f14 100%) !important;
}
.picket-hero-shot img {
  object-fit: contain !important;
  padding: 8% 14%;
  filter: brightness(1.05) contrast(1.04);
}

/* Animations */
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp .6s ease both; }
.fade-up-1 { animation-delay: .08s; }
.fade-up-2 { animation-delay: .16s; }
.fade-up-3 { animation-delay: .24s; }
.fade-up-4 { animation-delay: .32s; }

@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
  nav.site-nav, nav.site-nav.scrolled { padding-left: 32px; padding-right: 32px; }
  .nav-links { gap: 20px; }
  .nav-links a, .nav-dropdown-trigger { font-size: 11.5px; letter-spacing: 1.5px; }
  .nav-cta { padding: 11px 18px !important; font-size: 11.5px !important; }
  .nav-logo-text { font-size: 30px; }
  .nav-logo-icon { height: 42px; }
}
@media (max-width: 1024px) {
  nav.site-nav, nav.site-nav.scrolled { padding: 18px 24px; min-height: 72px; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  /* Mobile-menu layout lives with the base .mobile-menu rules and in the single
     1024px block further down — deliberately not duplicated here. */
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .hero-right { min-height: 280px; max-height: 40vh; order: 0; }
  .hero-left { padding: 104px 24px 40px; }
  .page-header { padding: 140px 24px 70px; }
  .section, .section-tight { padding: 72px 24px; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; gap: 32px; }
  .bracket-support-content .pack-picker-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  footer.site-footer { padding: 50px 24px 24px; }
  .form-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
  .mobile-menu { padding: 84px 18px 30px; }
  .calc-wrap { padding: 24px; }
  .calc-total { font-size: 44px; }
  .stats-row { padding: 50px 0; gap: 22px; }
  .stat-number { font-size: 44px; }
  /* Mobile hero — text-led, readable, tappable CTAs */
  .hero-left { padding: 96px 20px 34px; }
  .hero-eyebrow {
    width: 100%;
    max-width: 100%;
    padding: 8px 12px;
    flex-wrap: wrap;
    font-size: 9.5px;
    letter-spacing: 2px;
    line-height: 1.5;
  }
  .hero-right { min-height: 250px; max-height: 34vh; }
  .hero-title { font-size: clamp(42px, 12vw, 60px); letter-spacing: 2px; margin-bottom: 22px; }
  .hero-body { font-size: 16px; line-height: 1.65; margin-bottom: 28px; }
  .hero-actions { width: 100%; gap: 10px; }
  .hero-actions a { flex: 1 1 100%; justify-content: center; }
  .hero-trust { gap: 14px 20px; margin-top: 30px; }
  .pack-picker-heading { display: block; padding: 14px; }
  .pack-picker-heading-tag { display: inline-block; margin-top: 10px; }
  .pack-picker-option { min-height: 72px; padding: 10px; }
  .pack-picker-name { display: block; }
  .pack-picker-badge { display: inline-block; margin-top: 5px; }
  .pack-picker-price strong { font-size: 14px; }
  .bracket-price-first { padding: 14px; }
  .bracket-unit-price { font-size: 34px; }
  .bracket-price-unit { flex-basis: 100%; line-height: 1.45; }
  .bracket-support-content { margin-top: 30px; padding-top: 26px; }
  .bracket-support-content .pack-picker-list { grid-template-columns: 1fr; }
  .bracket-support-content .pack-picker-option {
    min-height: 76px;
    align-items: center;
  }
  .bracket-support-content .pack-picker-name { flex-direction: row; }
  .bracket-support-content .pack-picker-price { align-self: auto; }
  .page-header { padding: 116px 20px 58px; }
  .page-title {
    font-size: clamp(40px, 11vw, 48px);
    letter-spacing: 2px;
    overflow-wrap: anywhere;
  }
  .crumbs {
    font-size: 9px;
    letter-spacing: 2px;
    line-height: 1.7;
    overflow-wrap: anywhere;
  }
  .crumbs .sep { margin: 0 7px; }
  .section, .section-tight { padding: 56px 20px; }
  .section-sub { margin-bottom: 36px; }
  .product-card-body { padding: 22px 18px; }
  .bracket-buy-controls,
  .buy-actions { width: 100%; }
  .bracket-buy-controls > button,
  .buy-actions > button,
  .buy-actions > a {
    width: 100%;
    justify-content: center;
  }
}

/* Product range index — three equal, fully clickable destinations */
.products-page-header { padding-bottom: 72px; }
.products-range { padding-top: 72px; }
.products-range-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-gap: 24px;
  gap: 24px;
}
.range-card {
  display: flex;
  min-width: 0;
  min-height: 100%;
  overflow: hidden;
  flex-direction: column;
  background: rgba(20,42,66,.48);
  border: 1px solid rgba(143,166,178,0.14);
  border: 1px solid var(--border);
  border-radius: 6px;
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.range-card:hover,
.range-card:focus-visible {
  transform: translateY(-5px);
  border-color: #778894;
  border-color: var(--steel);
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
  box-shadow: var(--shadow-xl);
}
.range-card.is-featured { border-color: rgba(244,122,15,.62); }
.range-card-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #132C3E;
  background: var(--navy-mid);
}
.range-card-media picture {
  display: block;
  width: 100%;
  height: 100%;
}
.range-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.range-card:hover .range-card-media img { transform: scale(1.035); }
.range-card-status {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 9px;
  background: rgba(14,30,51,.92);
  border: 1px solid rgba(143,166,178,0.32);
  border: 1px solid var(--border-strong);
  border-radius: 3px;
  color: #FFFFFF;
  color: var(--white);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.range-card-status.is-online {
  background: #2F694A;
  background: var(--success);
  border-color: #5EA878;
  border-color: var(--success-lt);
  color: #FFFFFF;
  color: var(--white);
}
.range-card-body {
  display: flex;
  min-height: 220px;
  padding: 25px 24px 23px;
  flex: 1 1;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}
.range-card-body h2 {
  margin-bottom: 10px;
  color: #FFFFFF;
  color: var(--white);
  font-family: "Bebas Neue", sans-serif;
  font-size: 30px;
  letter-spacing: 1.5px;
  line-height: 1.05;
}
.range-card-body p {
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 14px;
  line-height: 1.6;
}
.range-card-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #F47A0F;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.range-card:not(.is-featured) .range-card-action { color: #C8D1D5; color: var(--steel-lt); }
.range-card-action svg { transition: transform .2s ease; }
.range-card:hover .range-card-action svg { transform: translateX(4px); }

@media (max-width: 1024px) {
  .products-range-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .range-card:last-child {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: minmax(280px, .8fr) 1fr;
  }
  .range-card:last-child .range-card-media {
    min-height: 280px;
    aspect-ratio: auto;
  }
}

@media (max-width: 600px) {
  .products-page-header { padding-bottom: 50px; }
  .products-range { padding-top: 48px; }
  .products-range-grid { grid-template-columns: 1fr; gap: 16px; }
  .range-card:last-child {
    display: flex;
    grid-column: auto;
  }
  .range-card:last-child .range-card-media {
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
  .range-card-body {
    min-height: 190px;
    padding: 21px 18px 19px;
    gap: 18px;
  }
  .range-card-body h2 { font-size: 27px; }
  .range-card-status { top: 11px; left: 11px; }
}

.gallery-tile-product {
  background: linear-gradient(135deg, #000 0%, #0a0f14 100%);
}
.gallery-tile-product img {
  object-fit: contain !important;
  padding: 14%;
}

/* Tailwind base layer kept minimal for shadcn compat */

/* ============================================
   STAKETEK 2026 COMMERCE REDESIGN
   Modern industrial product site layer
   ============================================ */

body {
  background: #F7F5EF;
  background: var(--surface);
  color: #091722;
  color: var(--ink);
}

nav.site-nav {
  min-height: 76px;
  padding: 18px 56px;
  background: rgba(9, 23, 34, 0.94);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.18);
}

nav.site-nav.scrolled {
  min-height: 66px;
  padding: 12px 56px;
  background: rgba(9, 23, 34, 0.98);
}

.nav-logo-icon { height: 42px; }
nav.site-nav.scrolled .nav-logo-icon { height: 35px; }
.nav-logo-text {
  font-size: 31px;
  letter-spacing: 3px;
}
nav.site-nav.scrolled .nav-logo-text { font-size: 27px; }
.nav-links { gap: 24px; }
.nav-links a {
  color: rgba(247,245,239,0.76);
  font-size: 12px;
  letter-spacing: 1.1px;
}
.nav-links a:hover,
.nav-links a.active { color: #FFFFFF; color: var(--white); }
.nav-links a.active::after { background: #F47A0F; background: var(--accent); }

.btn-accent,
.btn-secondary,
.btn-dark {
  min-height: 46px;
  padding: 14px 22px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.1px;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.btn-accent {
  background: #F47A0F;
  background: var(--accent);
  color: #091722;
  color: var(--ink);
  border-color: #F47A0F;
  border-color: var(--accent);
  box-shadow: 0 12px 24px rgba(244,122,15,.28);
}
.btn-accent:hover {
  background: #F7963F;
  background: var(--accent-lt);
  border-color: #F7963F;
  border-color: var(--accent-lt);
  color: #091722;
  color: var(--ink);
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(244,122,15,.34);
}
.btn-secondary {
  background: rgba(255,255,255,0.92);
  color: #091722;
  color: var(--ink);
  border-color: rgba(9,23,34,.24);
}
.btn-secondary:hover {
  background: #FFFFFF;
  background: var(--white);
  color: #091722;
  color: var(--ink);
  border-color: rgba(9,23,34,.42);
  transform: translateY(-2px);
}
.btn-dark {
  background: #091722;
  background: var(--ink);
  color: #FFFFFF;
  color: var(--white);
  border-color: #091722;
  border-color: var(--ink);
}
.btn-dark:hover {
  background: #132C3E;
  background: var(--navy-mid);
  color: #FFFFFF;
  color: var(--white);
  transform: translateY(-2px);
}
.btn-accent:disabled,
.btn-dark:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}
.nav-cta {
  gap: 8px;
  padding: 12px 18px !important;
  background: #F47A0F !important;
  background: var(--accent) !important;
  color: #091722 !important;
  color: var(--ink) !important;
  border-radius: 8px;
  box-shadow: 0 10px 22px rgba(244,122,15,.25);
}
.nav-cta:hover {
  background: #F7963F !important;
  background: var(--accent-lt) !important;
  transform: translateY(-1px);
}
.nav-link-trade {
  color: #F47A0F !important;
  font-weight: 700;
}
.nav-link-trade:hover { color: #F7963F !important; }

.st-kicker {
  margin: 0 0 14px;
  color: #F47A0F;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.8px;
  line-height: 1.3;
  text-transform: uppercase;
}

.st-hero,
.st-product-hero {
  position: relative;
  overflow: hidden;
  color: #FFFFFF;
  color: var(--white);
  background: #091722;
  background: var(--ink);
}

.st-hero {
  min-height: calc(100svh - 130px);
  padding: 138px 64px 72px;
  display: flex;
  align-items: center;
}

.st-hero-media,
.st-product-hero-media {
  position: absolute;
  inset: 0;
}
.st-hero-media picture,
.st-hero-media img,
.st-product-hero-media picture,
.st-product-hero-media img {
  width: 100%;
  height: 100%;
  display: block;
}
.st-hero-media img,
.st-product-hero-media img {
  object-fit: cover;
  object-position: center;
  filter: saturate(.92) contrast(1.08) brightness(.78);
}
.st-img-focus-top { object-position: center 22% !important; }
.st-img-focus-upper { object-position: center 35% !important; }
.st-img-focus-center { object-position: center center !important; }
.st-img-focus-lower { object-position: center 68% !important; }
.st-img-focus-bracket-hero { object-position: center 42% !important; }
@media (min-width: 900px) {
  .st-img-focus-bracket-hero { object-position: center 18% !important; }
}
.st-hero-scrim,
.st-product-hero-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(9,23,34,.95) 0%, rgba(9,23,34,.84) 36%, rgba(9,23,34,.32) 78%),
    linear-gradient(0deg, rgba(9,23,34,.9) 0%, rgba(9,23,34,0) 42%);
}
.st-hero-inner,
.st-product-hero-inner {
  position: relative;
  z-index: 1;
  width: min(1280px, 100%);
  margin: 0 auto;
}
.st-hero-inner {
  max-width: 760px;
  margin-left: 0;
}
.st-hero h1,
.st-product-hero h1,
.st-section h2,
.st-final-cta h2 {
  font-family: "Bebas Neue", sans-serif;
  letter-spacing: 1.4px;
  line-height: .96;
}
.st-hero h1 {
  max-width: 760px;
  margin: 0 0 22px;
  font-size: 76px;
}
.st-hero-copy {
  max-width: 650px;
  margin: 0 0 28px;
  color: rgba(247,245,239,.88);
  font-size: 19px;
  line-height: 1.65;
}
.st-hero-actions,
.st-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.st-actions-center { justify-content: center; }
.st-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}
.st-hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 9px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: rgba(247,245,239,.9);
  font-size: 13px;
  font-weight: 700;
}
.st-hero-proof svg { color: #F47A0F; color: var(--accent); }
.st-review-mini-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-top: 16px;
  color: rgba(247,245,239,.78);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: color .18s ease, transform .18s ease;
}
.st-review-mini-link svg {
  color: #F47A0F;
  color: var(--accent);
  flex: 0 0 auto;
}
.st-review-mini-link:hover {
  color: #FFFFFF;
  color: var(--white);
  transform: translateY(-1px);
}
.st-review-mini-link-center {
  justify-content: center;
  margin: 18px auto 0;
}

.st-stat-strip {
  position: relative;
  overflow: hidden;
  padding: 48px 64px;
  background:
    linear-gradient(90deg, rgba(9,23,34,.99) 0%, rgba(11,27,41,1) 48%, rgba(19,44,62,.99) 100%);
  color: #FFFFFF;
  color: var(--white);
  border-top: 1px solid rgba(244,122,15,.24);
  border-bottom: 1px solid rgba(244,122,15,.18);
}
.st-stat-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(244,122,15,.09), transparent 42%, rgba(200,209,213,.04)),
    linear-gradient(180deg, rgba(255,255,255,.055), transparent 62%);
  opacity: .78;
}
.st-stat-strip::after {
  content: "";
  position: absolute;
  left: 64px;
  right: 64px;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,122,15,.86), transparent);
}
.st-stat-shell {
  position: relative;
  z-index: 1;
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, .42fr) minmax(0, 1fr);
  grid-gap: 34px;
  gap: 34px;
  align-items: center;
}
.st-stat-intro h2 {
  margin: 0;
  max-width: 360px;
  color: #FFFFFF;
  color: var(--white);
  font-family: "Bebas Neue", sans-serif;
  font-size: 42px;
  line-height: 1;
  letter-spacing: 1.2px;
}
.st-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
.st-stat-card {
  min-width: 0;
  min-height: 150px;
  padding: 22px 18px;
  border: 1px solid rgba(200,209,213,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.055);
  box-shadow: 0 14px 36px rgba(0,0,0,.16);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.st-stat-value {
  color: #F47A0F;
  color: var(--accent);
  font-family: "Bebas Neue", sans-serif;
  font-size: 58px;
  line-height: .95;
  letter-spacing: 2px;
  white-space: nowrap;
}
.st-stat-value .counter-suffix {
  margin-left: 3px;
  color: #F47A0F;
  color: var(--accent);
  font-size: .82em;
}
.st-stat-label {
  margin-top: 14px;
  color: rgba(247,245,239,.74);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 2.6px;
  line-height: 1.45;
  text-transform: uppercase;
}

.st-section {
  padding: 92px 64px;
  background: #091722;
  background: var(--ink);
  color: #FFFFFF;
  color: var(--white);
}
.st-section-light {
  background: #F7F5EF;
  background: var(--surface);
  color: #091722;
  color: var(--ink);
}
.st-section-head {
  width: min(920px, 100%);
  margin: 0 auto 38px;
  text-align: center;
}
.st-section-head h2,
.st-section h2 {
  margin: 0 0 18px;
  font-size: 52px;
}
.st-section-head p,
.st-section p {
  color: inherit;
}
.st-section-light .st-section-head p,
.st-section-light p,
.st-section-light .st-use-card p,
.st-section-light .st-step-card p {
  color: #29343A;
  color: var(--body);
}
.st-two-col {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-gap: 54px;
  gap: 54px;
  align-items: center;
}
.st-two-col > * { min-width: 0; }
.st-two-col p {
  max-width: 650px;
  font-size: 17px;
  line-height: 1.72;
}

.st-problem {
  padding-top: 70px;
  padding-bottom: 72px;
  background: #ECE8DE;
  background: var(--surface-muted);
  color: #091722;
  color: var(--ink);
}
.st-problem-grid {
  width: min(1120px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
.st-problem-item {
  min-height: 136px;
  padding: 20px;
  border: 1px solid rgba(9,23,34,.12);
  border-radius: 8px;
  background: #FFFFFF;
  background: var(--surface-strong);
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}
.st-problem-item svg { color: #F47A0F; color: var(--accent); }

.st-step-list {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}
.st-step-list-horizontal {
  width: min(1120px, 100%);
  margin: 0 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.st-step-card {
  padding: 24px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-gap: 16px;
  gap: 16px;
  align-items: start;
}
.st-section-light .st-step-card {
  border-color: rgba(9,23,34,.12);
  background: #FFFFFF;
  background: var(--surface-strong);
}
.st-step-card > span {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #F47A0F;
  background: var(--accent);
  color: #091722;
  color: var(--ink);
  font-weight: 900;
}
.st-step-card h3,
.st-use-card h3,
.st-shipping-card h3,
.st-pack-card h3 {
  margin: 0 0 8px;
  color: inherit;
  font-size: 20px;
  line-height: 1.2;
}
.st-step-card p,
.st-use-card p,
.st-pack-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.58;
}

.st-proof {
  background: #0B1B29;
  background: var(--navy);
}
.st-proof-layout { align-items: center; }
.st-photo-stack {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}
.st-photo-main,
.st-photo-pair img,
.st-order-image {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: #132C3E;
  background: var(--navy-mid);
}
.st-photo-main { aspect-ratio: 4 / 3; }
.st-photo-main img,
.st-photo-pair img,
.st-order-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.st-photo-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
.st-photo-pair img { aspect-ratio: 1.25; }
.st-img-product-clean {
  object-fit: contain !important;
  background: #fff;
  padding: 10px;
}
.st-product-hero-media img.st-img-product-hero-clean {
  object-fit: contain;
  background: #f8f8f6;
  padding: clamp(28px, 7vw, 96px);
}
.st-proof-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.st-proof-list span,
.st-feature-tile {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  color: rgba(247,245,239,.9);
  font-size: 13px;
  font-weight: 700;
}
.st-section-light .st-feature-tile {
  border-color: rgba(9,23,34,.12);
  background: #FFFFFF;
  background: var(--surface-strong);
  color: #091722;
  color: var(--ink);
}
.st-proof-list svg,
.st-feature-tile svg { color: #F47A0F; color: var(--accent); flex: 0 0 auto; }
.st-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}

.st-use-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-gap: 12px;
  gap: 12px;
}
.st-use-card {
  min-height: 128px;
  padding: 20px;
  border: 1px solid rgba(9,23,34,.12);
  border-radius: 8px;
  background: #FFFFFF;
  background: var(--surface-strong);
}
.st-use-card h3 {
  color: #091722;
  color: var(--ink);
  font-size: 17px;
}

.st-range-grid,
.st-guide-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 16px;
  gap: 16px;
}
.st-range-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-range-grid-large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-range-card,
.st-guide-card {
  overflow: hidden;
  border: 1px solid rgba(9,23,34,.12);
  border-radius: 8px;
  background: #FFFFFF;
  background: var(--surface-strong);
  color: #091722;
  color: var(--ink);
  text-decoration: none;
  box-shadow: 0 14px 30px rgba(9,23,34,.07);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.st-range-card:hover,
.st-guide-card:hover {
  transform: translateY(-4px);
  border-color: rgba(244,122,15,.55);
  box-shadow: 0 20px 40px rgba(9,23,34,.11);
}
.st-range-card:hover img,
.st-guide-card:hover img {
  transform: scale(1.04);
}
.st-range-card img,
.st-guide-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .7s ease;
}
.st-range-card > div,
.st-guide-card > div {
  padding: 22px;
}
.st-range-card span,
.st-guide-card span {
  display: inline-block;
  margin-bottom: 10px;
  color: #F47A0F;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.st-range-card h2,
.st-range-card h3,
.st-guide-card h2 {
  margin: 0 0 10px;
  color: #091722;
  color: var(--ink);
  font-family: "Bebas Neue", sans-serif;
  font-size: 30px;
  letter-spacing: 1px;
  line-height: 1;
}
.st-range-card p,
.st-guide-card p {
  margin: 0 0 18px;
  color: #29343A;
  color: var(--body);
  font-size: 14px;
  line-height: 1.6;
}
.st-range-card strong {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #091722;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
}
.st-range-card.is-featured {
  border-color: rgba(244,122,15,.45);
}
/* Buy-vs-quote status chip on range cards */
.st-range-chip {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px !important;
  letter-spacing: 1px !important;
}
.st-range-chip.is-buy {
  color: #0B1B29 !important;
  color: var(--navy) !important;
  background: #F47A0F;
  background: var(--accent);
}
.st-range-chip.is-quote {
  color: #29343A !important;
  color: var(--body) !important;
  background: rgba(9,23,34,.07);
  border: 1px solid rgba(9,23,34,.16);
}
.st-range-cta {
  color: #F47A0F !important;
  color: var(--accent) !important;
}
.st-guide-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.st-guide-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}
.st-guide-card > div {
  display: flex;
  flex: 1 1;
  flex-direction: column;
  align-items: flex-start;
}
.st-guide-card .btn-dark { margin-top: auto; }

.st-pack-section {
  background:
    linear-gradient(180deg, rgba(9,23,34,.96), rgba(19,44,62,.98));
}
.st-pack-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 14px;
  gap: 14px;
}
/* Five-tier ladder (10/20/30/40/50) — matches the bracket-page pricing */
.st-pack-grid-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.st-pack-grid-five .st-pack-card { min-height: 250px; padding: 22px 18px; }
@media (max-width: 1100px) {
  .st-pack-grid-five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.st-pack-grid-note {
  width: min(1180px, 100%);
  margin: 18px auto 0;
  text-align: center;
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 13px;
  font-weight: 600;
}
.st-pack-grid-note a { color: #F47A0F; color: var(--accent); font-weight: 700; }
.st-pack-grid-light .st-pack-card {
  color: #091722;
  color: var(--ink);
}
.st-pack-card {
  position: relative;
  min-height: 300px;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  background: rgba(255,255,255,.08);
  color: #FFFFFF;
  color: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.st-pack-card:hover {
  transform: translateY(-4px);
  border-color: #F47A0F;
  border-color: var(--accent);
  background: rgba(255,255,255,.12);
}
.st-pack-label {
  color: #F47A0F;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.st-pack-card strong {
  margin-top: 18px;
  color: #FFFFFF;
  color: var(--white);
  font-size: 28px;
  line-height: 1;
}
.st-pack-card small {
  color: #C8D1D5;
  color: var(--steel-lt);
  font-size: 13px;
}
.st-pack-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #F47A0F;
  background: var(--accent);
  color: #091722;
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.st-pack-card-dark {
  background: #F47A0F;
  background: var(--accent);
  color: #091722;
  color: var(--ink);
  border-color: #F47A0F;
  border-color: var(--accent);
}
.st-pack-card-dark .st-pack-label,
.st-pack-card-dark strong,
.st-pack-card-dark small { color: #091722; color: var(--ink); }
.st-pack-card-light {
  background: #FFFFFF;
  background: var(--surface-strong);
  color: #091722;
  color: var(--ink);
  border-color: rgba(9,23,34,.12);
  box-shadow: 0 14px 30px rgba(9,23,34,.07);
}
.st-pack-card-light h3,
.st-pack-card-light strong { color: #091722; color: var(--ink); }
.st-pack-card-light p,
.st-pack-card-light small { color: #29343A; color: var(--body); }
.st-pack-card-light:hover {
  border-color: rgba(244,122,15,.55);
  background: #FFFFFF;
  background: var(--white);
}

@keyframes stFadeRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@supports (animation-timeline: view()) {
  .st-problem-item,
  .st-step-card,
  .st-photo-stack,
  .st-use-card,
  .st-range-card,
  .st-pack-card,
  .st-guide-card,
  .st-shipping-card {
    animation: stFadeRise .7s ease both;
    animation-timeline: view();
    animation-range: entry 0% cover 24%;
  }
}

.st-order-panel {
  --white: var(--ink);
  --text: var(--ink);
  --grey-lt: var(--body);
  --border: rgba(9,23,34,.18);
  --border-strong: rgba(9,23,34,.28);
}
.st-order-layout {
  align-items: start;
}
.st-order-reassurance {
  margin-top: 18px;
}
.st-hero-proof-photo {
  max-width: 520px;
  justify-self: end;
}
.st-order-image {
  aspect-ratio: 4 / 3;
  border-color: rgba(9,23,34,.12);
}

.st-trust {
  background: #ECE8DE;
  background: var(--surface-muted);
  color: #091722;
  color: var(--ink);
}
.st-trust .st-proof-list span {
  background: #FFFFFF;
  background: var(--surface-strong);
  border-color: rgba(9,23,34,.12);
  color: #091722;
  color: var(--ink);
}
.st-shipping-card {
  padding: 30px;
  border: 1px solid rgba(9,23,34,.14);
  border-radius: 8px;
  background: #FFFFFF;
  background: var(--surface-strong);
  color: #091722;
  color: var(--ink);
}
.st-shipping-card ul {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
  margin: 18px 0 24px;
  padding: 0;
  list-style: none;
}
.st-shipping-card li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #29343A;
  color: var(--body);
  line-height: 1.55;
}
.st-shipping-card svg { color: #F47A0F; color: var(--accent); flex: 0 0 auto; margin-top: 3px; }

.st-faq-list {
  width: min(920px, 100%);
  margin: 0 auto;
}
.st-faq-item {
  border-top: 1px solid rgba(9,23,34,.16);
}
.st-faq-item:last-child { border-bottom: 1px solid rgba(9,23,34,.16); }
.st-faq-item summary {
  min-height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  color: #091722;
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
  list-style: none;
}
.st-faq-item summary::-webkit-details-marker { display: none; }
.st-faq-item summary svg {
  flex: 0 0 auto;
  transition: transform .18s ease;
}
.st-faq-item[open] summary svg { transform: rotate(180deg); }
.st-faq-item p {
  max-width: 760px;
  margin: -4px 0 22px;
  color: #29343A;
  color: var(--body);
  line-height: 1.68;
}

.st-final-cta {
  padding: 82px 64px;
  background: #091722;
  background: var(--ink);
  color: #FFFFFF;
  color: var(--white);
  text-align: center;
}
.st-final-cta h2 {
  margin: 0 auto 24px;
  max-width: 760px;
  font-size: 56px;
}

.st-product-hero {
  padding: 124px 64px 76px;
}
.st-product-hero-scrim {
  background:
    linear-gradient(90deg, rgba(9,23,34,.96) 0%, rgba(9,23,34,.86) 48%, rgba(9,23,34,.36) 100%),
    linear-gradient(0deg, rgba(9,23,34,.92) 0%, rgba(9,23,34,0) 46%);
}
.st-crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 30px;
  color: rgba(247,245,239,.68);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.st-crumbs a { color: rgba(247,245,239,.82); }
.st-product-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .55fr);
  grid-gap: 42px;
  gap: 42px;
  align-items: center;
}
.st-product-hero h1 {
  max-width: 820px;
  margin: 0 0 20px;
  font-size: 66px;
}
.st-product-hero p {
  max-width: 660px;
  color: rgba(247,245,239,.88);
  font-size: 18px;
  line-height: 1.68;
}
.st-buy-panel {
  padding: 26px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: rgba(9,23,34,.82);
  box-shadow: 0 22px 60px rgba(0,0,0,.28);
  -webkit-backdrop-filter: blur(18px);
          backdrop-filter: blur(18px);
}
.st-buy-label {
  color: #F47A0F;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.3px;
  text-transform: uppercase;
}
.st-buy-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 4px;
}
.st-buy-price strong {
  color: #FFFFFF;
  color: var(--white);
  font-size: 42px;
  line-height: 1;
}
.st-buy-price span {
  color: #B4C0C6;
  color: var(--grey-lt);
  text-decoration: line-through;
}
.st-buy-price small {
  flex-basis: 100%;
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 13px;
}
.st-wide-btn {
  width: 100%;
  margin-top: 18px;
}
.st-error {
  margin: 10px 0 0;
  color: #F7963F !important;
  color: var(--accent-lt) !important;
  font-size: 13px !important;
}
.st-shipping-band {
  background: #ECE8DE;
  background: var(--surface-muted);
}
.st-shipping-card-wide {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.st-shipping-card-wide h2 {
  margin: 0 0 10px;
  color: #091722;
  color: var(--ink);
  font-size: 44px;
}
.st-shipping-card-wide p {
  margin: 0;
  color: #29343A;
  color: var(--body);
}

.st-shop-hero {
  min-height: auto;
}
.st-shop-hero .st-product-hero-inner > h1 {
  max-width: 920px;
}

.st-article {
  width: min(860px, 100%);
  margin: 0 auto;
  color: #091722;
  color: var(--ink);
}
.st-article > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-bottom: 34px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid rgba(9,23,34,.12);
}
.st-article h2 {
  margin: 38px 0 14px;
  color: #091722;
  color: var(--ink);
  font-family: "Bebas Neue", sans-serif;
  font-size: 34px;
  letter-spacing: 1px;
  line-height: 1;
}
.st-article p,
.st-article ol {
  color: #29343A;
  color: var(--body);
  font-size: 17px;
  line-height: 1.8;
}
.st-article p { margin: 0 0 18px; }
.st-article ul,
.st-article ol {
  margin: 0 0 18px;
  padding: 0;
}
.st-article ol { padding-left: 24px; }
.st-article li {
  margin-bottom: 10px;
}
.st-article ul {
  display: grid;
  grid-gap: 10px;
  gap: 10px;
  list-style: none;
}
.st-article ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #29343A;
  color: var(--body);
  line-height: 1.65;
}
.st-article ul svg {
  flex: 0 0 auto;
  margin-top: 4px;
  color: #F47A0F;
  color: var(--accent);
}
.st-article-cta {
  margin-top: 44px;
  padding: 28px;
  border: 1px solid rgba(9,23,34,.14);
  border-radius: 8px;
  background: #ECE8DE;
  background: var(--surface-muted);
}

@media (max-width: 1180px) {
  nav.site-nav,
  nav.site-nav.scrolled { padding-left: 28px; padding-right: 28px; }
  .nav-links { gap: 16px; }
  .nav-links a { font-size: 11px; letter-spacing: .8px; }
  .st-stat-shell { grid-template-columns: 1fr; gap: 22px; }
  .st-stat-intro h2 { max-width: 620px; }
  .st-stat-grid { gap: 12px; }
  .st-stat-value { font-size: 42px; }
  .st-stat-label { letter-spacing: 3px; }
  .st-problem-grid,
  .st-use-grid,
  .st-range-grid,
  .st-guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .st-range-grid-large { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  nav.site-nav,
  nav.site-nav.scrolled {
    min-height: 68px;
    padding: 14px 22px;
  }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  /* SINGLE SOURCE for the mobile menu's action buttons. Both buttons share
     height, radius and type; only the fill differs, so Shop Brackets reads as
     the primary action and Cart as secondary. */
  .mobile-menu .m-cta {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    min-height: 54px; margin-top: 22px; padding: 0 18px;
    border: 0; border-radius: 8px;
    background: #F47A0F;
    background: var(--accent);
    color: #0B1B29 !important;
    color: var(--navy) !important;
    font-family: "Bebas Neue", sans-serif;
    font-size: 21px; letter-spacing: 2.5px; line-height: 1;
    text-align: center;
  }
  .mobile-menu .nav-cart-mobile {
    margin-top: 10px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.24);
    color: #FFFFFF !important;
    color: var(--white) !important;
  }
  .mobile-menu .nav-cart-mobile:hover { border-color: rgba(255,255,255,.45); }
  .st-hero,
  .st-section,
  .st-final-cta,
  .st-product-hero { padding-left: 24px; padding-right: 24px; }
  .st-hero {
    min-height: auto;
    padding-top: 128px;
    padding-bottom: 58px;
  }
  .st-hero h1 { font-size: 60px; }
  .st-product-hero h1 { font-size: 54px; }
  .st-section-head h2,
  .st-section h2,
  .st-final-cta h2 { font-size: 44px; }
  .st-stat-strip { padding-left: 24px; padding-right: 24px; }
  .st-stat-strip::after { left: 24px; right: 24px; }
  .st-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-two-col,
  .st-product-hero-grid,
  .st-contact-grid,
  .st-review-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .st-product-hero-grid { align-items: start; }
  .st-hero-proof-photo { justify-self: stretch; max-width: none; }
  .st-step-list-horizontal { grid-template-columns: 1fr; }
  .st-shipping-card-wide {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 760px) {
  [id] {
    scroll-margin-top: 98px;
  }

  html,
  body,
  #root,
  .App {
    max-width: 100%;
    overflow-x: hidden;
  }

  .st-hero,
  .st-section,
  .st-final-cta,
  .st-product-hero {
    padding-left: 20px;
    padding-right: 20px;
    overflow-x: hidden;
  }
  .st-hero { padding-top: 112px; }
  .st-hero-scrim,
  .st-product-hero-scrim {
    background:
      linear-gradient(90deg, rgba(9,23,34,.98), rgba(9,23,34,.92)),
      linear-gradient(0deg, rgba(9,23,34,.95), rgba(9,23,34,.38));
  }
  .st-hero-media img,
  .st-product-hero-media img {
    filter: saturate(.78) contrast(1.05) brightness(.58);
  }
  .st-hero h1 { font-size: 46px; }
  .st-product-hero h1 { font-size: 42px; }
  .st-hero-copy,
  .st-product-hero p,
  .st-two-col p {
    font-size: 16px;
  }
  .st-stat-strip { padding-top: 30px; padding-bottom: 30px; }
  .st-stat-intro h2 { font-size: 34px; }
  .st-stat-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .st-stat-card {
    min-height: 112px;
    padding: 18px;
  }
  .st-stat-value { font-size: 44px; }
  .st-stat-label {
    margin-top: 10px;
    letter-spacing: 2.6px;
  }
  .st-hero-actions a,
  .st-actions-row a,
  .st-actions-row button,
  .st-buy-panel .btn-accent {
    width: 100%;
  }
  .st-hero-proof span { width: 100%; }
  .st-section {
    padding-top: 62px;
    padding-bottom: 62px;
  }
  .st-section-head {
    margin-bottom: 28px;
    text-align: left;
  }
  .st-section-head h2,
  .st-section h2,
  .st-final-cta h2,
  .st-shipping-card-wide h2 {
    font-size: 36px;
  }
  .st-problem-grid,
  .st-use-grid,
  .st-range-grid,
  .st-range-grid-large,
  .st-guide-grid,
  .st-pack-grid,
  .st-feature-grid,
  .st-photo-pair {
    grid-template-columns: 1fr;
  }
  .st-photo-stack,
  .st-photo-main,
  .st-photo-pair,
  .st-photo-pair img,
  .st-order-image,
  .st-pack-grid,
  .st-pack-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
  .st-photo-stack {
    display: flex;
    flex-direction: column;
    gap: 14px;
    transform: none !important;
    animation: none !important;
  }
  .st-photo-pair {
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .st-photo-main {
    aspect-ratio: auto;
    height: auto;
    line-height: 0;
  }
  .st-photo-main,
  .st-photo-pair img {
    flex: 0 0 auto;
    display: block;
    min-height: 0;
  }
  .st-photo-main img,
  .st-photo-pair img,
  .st-order-image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  .st-img-product-clean {
    box-sizing: border-box;
    aspect-ratio: 4 / 3;
    object-fit: contain !important;
    padding: 16px;
  }
  .st-img-focus-center {
    object-position: center center;
  }
  [data-testid="home-product-proof"] .st-photo-stack { order: 2; }
  [data-testid="home-product-proof"] .st-proof-layout > div:not(.st-photo-stack) { order: 1; }
  .st-hero-proof-photo .st-photo-main {
    aspect-ratio: 4 / 3;
  }
  .st-hero-proof-photo .st-photo-pair {
    display: none;
  }
  .st-hero-proof-photo .st-img-product-clean {
    padding: 14px;
  }
  .st-problem-item,
  .st-use-card,
  .st-pack-card {
    min-height: 0;
    transform: none !important;
    animation: none !important;
  }
  .st-pack-grid { gap: 16px; }
  .st-pack-card {
    gap: 18px;
    overflow: visible;
  }
  .st-pack-card h3,
  .st-pack-card p,
  .st-pack-card strong,
  .st-pack-card small {
    overflow-wrap: anywhere;
  }
  .st-range-card,
  .st-guide-card {
    display: block;
    overflow: hidden;
  }
  .st-range-card img,
  .st-guide-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }
  [data-testid="home-product-proof"],
  [data-testid="brackets-proof"] {
    overflow: visible;
    padding-bottom: 72px;
  }
  [data-testid="home-product-proof"] + .st-pack-section,
  [data-testid="brackets-proof"] + .st-section-light {
    position: relative;
    z-index: 2;
  }
  .st-step-card,
  .st-range-card,
  .st-guide-card,
  .st-shipping-card {
    transform: none !important;
    animation: none !important;
  }
  .st-buy-panel { padding: 20px; }
  .st-buy-price strong { font-size: 34px; }
  .st-contact-panel { padding: 22px; }
  .st-contact-panel h2 { font-size: 36px; }
  .st-contact-card { padding: 16px; }
  .st-review-section { padding-top: 54px; }
  .st-review-actions {
    gap: 10px;
  }
  .st-review-callout {
    align-items: flex-start;
    padding: 14px;
  }
  .st-review-permission {
    font-size: 12px;
  }
  .st-faq-item summary {
    min-height: 62px;
    font-size: 16px;
  }
}

/* ============================================
   BRACKET PRODUCT PAGE (PDP) — above-the-fold
   ============================================ */
.st-pdp {
  padding: 118px 64px 70px;
}
.st-pdp .st-crumbs {
  margin-bottom: 26px;
}
.st-pdp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 540px);
  grid-gap: 48px;
  gap: 48px;
  align-items: start;
}
.st-pdp-media .st-photo-stack {
  width: 100%;
}
.st-pdp-trust {
  margin-top: 16px;
}
.st-pdp-buy h1 {
  max-width: none;
  margin: 0 0 10px;
  font-size: 52px;
}
.st-pdp-blurb {
  margin: 14px 0 0;
  max-width: none;
  color: rgba(247,245,239,.85);
  font-size: 16px;
  line-height: 1.62;
}

.st-star-row {
  display: inline-flex;
  gap: 2px;
}
.st-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: rgba(247,245,239,.88);
  font-size: 13.5px;
  font-weight: 700;
  text-decoration: none;
  transition: color .18s ease;
}
.st-rating-badge strong {
  color: #FFFFFF;
  color: var(--white);
}
.st-rating-badge .st-rating-count {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(247,245,239,.4);
}
.st-rating-badge:hover {
  color: #FFFFFF;
  color: var(--white);
}
.st-rating-badge:hover .st-rating-count {
  text-decoration-color: #F47A0F;
  text-decoration-color: var(--accent);
}

.st-pdp-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 20px 0 2px;
}
.st-pdp-price strong {
  color: #FFFFFF;
  color: var(--white);
  font-size: 40px;
  line-height: 1;
}
.st-pdp-price-full {
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 17px;
  text-decoration: line-through;
}
.st-pdp-price small {
  flex-basis: 100%;
  margin-top: 6px;
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 13.5px;
}
.st-pdp-save {
  font-style: normal;
  color: #F47A0F;
  color: var(--accent);
  font-weight: 700;
}

/* Pack selector — the single buying module */
.st-pack-selector {
  margin-top: 20px;
}
.st-pack-selector-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}
.st-pack-selector-label {
  color: #F47A0F;
  color: var(--accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}
.st-pack-selector-sub {
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 12.5px;
}
.st-pack-selector-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-gap: 9px;
  gap: 9px;
}
.st-pack-option {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 11px 11px;
  border: 1px solid rgba(143,166,178,0.32);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: #FFFFFF;
  color: var(--white);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.st-pack-option:hover {
  border-color: #F47A0F;
  border-color: var(--accent);
  transform: translateY(-1px);
}
.st-pack-option strong {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .2px;
}
.st-pack-option-total {
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
  color: var(--white);
}
.st-pack-option small {
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 11px;
  line-height: 1.35;
}
.st-pack-option small em {
  font-style: normal;
  color: #F47A0F;
  color: var(--accent);
  font-weight: 700;
}
.st-pack-option-note {
  color: #C8D1D5;
  color: var(--steel-lt);
}
.st-pack-option.is-selected {
  border-color: #F47A0F;
  border-color: var(--accent);
  background: rgba(244,122,15,.13);
  box-shadow: 0 0 0 1px #F47A0F;
  box-shadow: 0 0 0 1px var(--accent);
}
.st-pack-option-badge {
  position: absolute;
  top: -9px;
  left: 9px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #F47A0F;
  background: var(--accent);
  color: #091722;
  color: var(--ink);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
}
.st-pack-option-badge.is-value {
  background: #9BC5DE;
}
.st-pack-custom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 14px;
}
.st-pack-custom > span {
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 12.5px;
  font-weight: 600;
}
.st-pack-stepper {
  display: flex;
  align-items: center;
  height: 38px;
  border: 1px solid rgba(143,166,178,0.32);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  overflow: hidden;
}
.st-pack-stepper button {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #FFFFFF;
  color: var(--white);
  font-size: 17px;
  cursor: pointer;
}
.st-pack-stepper input {
  width: 52px;
  text-align: center;
  background: transparent;
  border: none;
  outline: none;
  color: #FFFFFF;
  color: var(--white);
  font-weight: 700;
  /* 16px minimum stops iOS Safari auto-zooming when the field is focused */
  font-size: 16px;
  -moz-appearance: textfield;
}

.st-pdp-nudge {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #F47A0F;
  color: var(--accent);
}

/* Compatibility note in the buy panel — visible before the buy button. */
.st-pdp-compat {
  margin: 14px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(143,166,178,0.14);
  border: 1px solid var(--border);
  border-left: 3px solid #F47A0F;
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.55;
}
.st-pdp-compat a { color: #F47A0F; color: var(--accent); font-weight: 700; }
/* Muted variant — informational notes (dispatch, kit matching) rather than
   the orange compatibility warning, so the two don't compete. */
.st-pdp-compat.is-muted { border-left-color: #778894; border-left-color: var(--steel); }

/* Icon bullet list used inside light cards (shipping band etc.) */
.st-plain-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  grid-gap: 10px;
  gap: 10px;
}
.st-plain-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 14px;
  line-height: 1.5;
}
.st-plain-list li svg { color: #F47A0F; color: var(--accent); flex: 0 0 auto; margin-top: 3px; }
.st-plain-list a { color: #F47A0F; color: var(--accent); font-weight: 700; }

/* Footer tagline — the official brand line, given room to breathe */
.footer-tagline {
  margin: 14px 0 12px;
  color: #FFFFFF;
  color: var(--white);
  font-family: "Bebas Neue", sans-serif;
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 2.5px;
  line-height: 1;
}
.footer-tagline span { color: #F47A0F; color: var(--accent); }

/* Installation demo video — portrait clip shown at phone size in a clean
   frame instead of stretching to full column width. */
.st-video-wrap { width: 100%; }
.st-video-phone {
  width: min(320px, 82vw);
  margin: 0 auto;
}
.st-video-preface {
  margin: 0 auto 18px;
  max-width: 500px;
  text-align: center;
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
}
.st-video-phone video {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  display: block;
  background: #000;
  border: 1px solid rgba(143,166,178,0.32);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  box-shadow: var(--shadow-lg);
}
.st-video-caption {
  margin-top: 12px;
  text-align: center;
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}
.st-video-caption-title {
  display: block;
  margin-bottom: 2px;
  color: #F47A0F;
  color: var(--accent);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

/* Steps + video side-by-side on the bracket page; stacks on mobile. */
.st-how-video-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-gap: 36px;
  gap: 36px;
  align-items: center;
  width: min(1180px, 100%);
  margin: 0 auto;
}
@media (max-width: 860px) {
  .st-how-video-grid { grid-template-columns: 1fr; }
}

/* Bracket comparison cards (light section) */
.st-compare-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 18px;
  gap: 18px;
  width: min(1180px, 100%);
  margin: 0 auto;
}
.st-compare-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 26px 24px;
  border: 1px solid rgba(9,23,34,.16);
  border-radius: 8px;
  background: #FFFFFF;
  background: var(--surface-strong, #fff);
}
.st-compare-card.is-hero { border-color: rgba(244,122,15,.55); border-width: 2px; }
.st-compare-tag {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #F47A0F;
  color: var(--accent);
}
.st-compare-card h3 {
  margin: 0;
  color: #091722;
  color: var(--ink);
  font-family: "Bebas Neue", sans-serif;
  font-size: 28px;
  letter-spacing: 1px;
}
.st-compare-card > p { margin: 0; color: #29343A; color: var(--body); font-size: 14px; line-height: 1.6; }
.st-compare-card ul { list-style: none; margin: 4px 0 14px; padding: 0; display: grid; grid-gap: 8px; gap: 8px; }
.st-compare-card li {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  color: #091722;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.45;
}
.st-compare-card li svg { color: #F47A0F; color: var(--accent); flex: 0 0 auto; margin-top: 2px; }
.st-compare-card .btn-dark,
.st-compare-card .btn-secondary { align-self: flex-start; margin-top: auto; }

/* Bulk-packs savings ladder */
.st-ladder {
  width: min(920px, 100%);
  margin: 0 auto;
  border: 1px solid rgba(143,166,178,0.32);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  overflow: hidden;
}
.st-ladder-head,
.st-ladder-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr 40px;
  align-items: center;
  grid-gap: 12px;
  gap: 12px;
  padding: 14px 20px;
}
.st-ladder-head {
  background: rgba(143,166,178,.10);
  border-bottom: 1px solid rgba(143,166,178,0.32);
  border-bottom: 1px solid var(--border-strong);
}
.st-ladder-head span {
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.st-ladder-row {
  border-top: 1px solid rgba(143,166,178,0.14);
  border-top: 1px solid var(--border);
  color: #FFFFFF;
  color: var(--white);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease;
}
.st-ladder-row:first-of-type { border-top: none; }
.st-ladder-row:hover { background: rgba(244,122,15,.08); }
.st-ladder-row.is-best { background: rgba(244,122,15,.10); }
.st-ladder-row.is-best:hover { background: rgba(244,122,15,.16); }
.st-ladder-pack {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}
.st-ladder-row strong { color: #FFFFFF; color: var(--white); font-weight: 700; }
.st-ladder-save { color: #F47A0F; color: var(--accent); font-weight: 700; }
.st-ladder-tag {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(143,166,178,.18);
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 9px;
  font-weight: 900;
  font-style: normal;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.st-ladder-tag.is-best { background: #F47A0F; background: var(--accent); color: #0B1B29; color: var(--navy); }
.st-ladder-go { color: #F47A0F; color: var(--accent); display: inline-flex; justify-content: flex-end; }
.st-ladder-note {
  width: min(920px, 100%);
  margin: 16px auto 0;
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 12.5px;
  text-align: center;
}
.st-pack-saveline { color: #F47A0F; color: var(--accent); font-style: normal; font-weight: 700; }
.st-cross-list {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  grid-gap: 9px;
  gap: 9px;
}
.st-cross-list li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #091722;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
}
.st-cross-list svg { color: #F47A0F; color: var(--accent); flex: 0 0 auto; }
.st-shipping-card h3 { display: inline-flex; align-items: center; gap: 9px; }
.st-shipping-card h3 svg { color: #F47A0F; color: var(--accent); }
@media (max-width: 620px) {
  .st-ladder-head { display: none; }
  .st-ladder-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "pack total" "per save";
    gap: 4px 12px;
    row-gap: 4px;
  }
  .st-ladder-row .st-ladder-pack { grid-area: pack; }
  .st-ladder-row > span:nth-child(2) { grid-area: total; text-align: right; }
  .st-ladder-row > span:nth-child(3) { grid-area: per; color: #B4C0C6; color: var(--grey-lt); font-size: 12.5px; }
  .st-ladder-row .st-ladder-save { grid-area: save; text-align: right; font-size: 12.5px; }
  .st-ladder-go { display: none; }
}

/* Range-card price line (Products page) */
.st-range-card-price {
  margin: -8px 0 14px !important;
  color: #F47A0F !important;
  color: var(--accent) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .3px;
}

/* Timber-support / product option cards — large selectable cards with a
   clear selected state, hover, keyboard focus and mobile-friendly tap size. */
.st-option-cards { margin-top: 18px; }
.st-option-cards-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  margin-bottom: 10px;
}
.st-option-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 10px;
  gap: 10px;
}
.st-option-card {
  position: relative;
  display: grid; grid-gap: 6px; gap: 6px;
  text-align: left;
  padding: 14px 14px 12px;
  min-height: 44px;
  background: transparent;
  border: 1px solid rgba(143,166,178,0.32);
  border: 1px solid var(--border-strong, var(--border));
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.st-option-card:hover { border-color: #778894; border-color: var(--steel); }
.st-option-card:focus-visible { outline: 2px solid #F47A0F; outline: 2px solid var(--accent); outline-offset: 2px; }
.st-option-card.is-selected {
  border-color: #F47A0F;
  border-color: var(--accent);
  background: rgba(244,122,15,.08);
}
.st-option-card strong { color: #FFFFFF; color: var(--white); font-size: 13.5px; line-height: 1.35; padding-right: 24px; }
.st-option-card-desc { color: #B4C0C6; color: var(--grey-lt); font-size: 12px; font-weight: 600; line-height: 1.5; }
.st-option-card small { font-size: 11px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; }
.st-option-card small.is-stocked { color: #7fc98a; }
.st-option-card small.is-leadtime { color: #B4C0C6; color: var(--grey-lt); }
.st-option-card-check {
  position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid rgba(143,166,178,0.32);
  border: 1.5px solid var(--border-strong, var(--border));
  color: transparent;
  transition: all .15s ease;
}
.st-option-card.is-selected .st-option-card-check {
  background: #F47A0F;
  background: var(--accent); border-color: #F47A0F; border-color: var(--accent); color: #0B1B29; color: var(--navy);
}

/* Combined order total (brackets + matched kit) shown before Add to Cart */
.st-order-combined {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 4px 14px;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(143,166,178,.08);
}
.st-order-combined span { color: #B4C0C6; color: var(--grey-lt); font-size: 12.5px; font-weight: 600; }
.st-order-combined strong { color: #FFFFFF; color: var(--white); font-size: 15px; font-weight: 700; }

/* Matched installation-kit add-on (bracket product pages) */
.st-kit-addon {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid rgba(143,166,178,0.14);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.st-kit-addon:hover { border-color: #778894; border-color: var(--steel); }
.st-kit-addon.is-checked {
  border-color: #F47A0F;
  border-color: var(--accent);
  background: rgba(244,122,15,.08);
}
.st-kit-addon input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: #F47A0F;
  accent-color: var(--accent);
  cursor: pointer;
}
.st-kit-addon input[type="checkbox"]:focus-visible { outline: 2px solid #F47A0F; outline: 2px solid var(--accent); outline-offset: 2px; }
.st-kit-addon-body { display: grid; grid-gap: 5px; gap: 5px; min-width: 0; }
.st-kit-addon-contents {
  color: #C8D1D5;
  color: var(--steel-lt, var(--steel));
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .3px;
}
.st-kit-addon-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: #FFFFFF;
  color: var(--white);
  font-size: 13.5px;
  font-weight: 700;
}
.st-kit-addon-title svg { color: #F47A0F; color: var(--accent); flex: 0 0 auto; }
.st-kit-addon-title strong { color: #F47A0F; color: var(--accent); font-weight: 700; }
.st-kit-addon-desc {
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.5;
}
.st-kit-addon-desc a { color: #F47A0F; color: var(--accent); font-weight: 700; }

/* Honest photo placeholder for products without real photography yet. */
.st-photo-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 280px;
  border: 1px dashed rgba(143,166,178,0.32);
  border: 1px dashed var(--border-strong, var(--border));
  border-radius: 8px;
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 24px;
}
.st-photo-placeholder svg { color: #778894; color: var(--steel); }
.st-pdp-shipline {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(143,166,178,0.14);
  border-top: 1px solid var(--border);
}
.st-pdp-shipline span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 12.5px;
  font-weight: 600;
}
.st-pdp-shipline svg {
  color: #F47A0F;
  color: var(--accent);
  flex: 0 0 auto;
}

/* Product-page review preview (light section) */
.st-review-preview-cards {
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}
.st-quote-card {
  margin: 0;
  padding: 20px;
  border: 1px solid rgba(9,23,34,.14);
  border-radius: 8px;
  background: #FFFFFF;
  background: var(--surface-strong);
}
.st-quote-card p {
  margin: 0;
  color: #091722;
  color: var(--ink);
  font-size: 15.5px;
  font-style: italic;
  line-height: 1.6;
}
.st-quote-card footer {
  margin-top: 10px;
  color: #29343A;
  color: var(--body);
  font-size: 12.5px;
  font-weight: 700;
}

/* ============================================
   REVIEWS HUB (/reviews)
   ============================================ */
.st-review-hub {
  padding-top: 64px;
  padding-bottom: 64px;
}
.st-review-hub-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-gap: 24px;
  gap: 24px;
}
.st-review-summary-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 20px 24px;
  border: 1px solid rgba(143,166,178,0.32);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 14px;
  line-height: 1.55;
}
.st-review-summary-card strong {
  color: #FFFFFF;
  color: var(--white);
  font-size: 22px;
  font-weight: 900;
}
.st-judgeme-card {
  padding: 26px;
  border: 1.5px dashed rgba(244,122,15,.45);
  border-radius: 8px;
  background: #FFF8EF;
}
.st-judgeme-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.st-judgeme-card-head svg {
  color: #F47A0F;
  flex: 0 0 auto;
}
.st-judgeme-card h3 {
  margin: 0;
  color: #0B1B29;
  font-size: 17px;
  font-weight: 900;
}
.st-judgeme-card p {
  margin: 0 0 10px;
  color: #4C5A66;
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 720px;
}
.st-judgeme-card-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #B06A2A !important;
  font-weight: 600;
}
.st-judgeme-card-note svg {
  color: #F47A0F;
  flex: 0 0 auto;
  margin-top: 3px;
}
.st-judgeme-live {
  border-radius: 8px;
  overflow: hidden;
}
.st-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-gap: 14px;
  gap: 14px;
}
.st-testimonial-card {
  margin: 0;
  padding: 20px;
  border: 1px solid rgba(143,166,178,0.14);
  border: 1px solid var(--border);
  border-radius: 8px;
  background: rgba(143,166,178,.06);
}
.st-testimonial-card p {
  margin: 0;
  color: #FFFFFF;
  color: var(--white);
  font-size: 15px;
  font-style: italic;
  line-height: 1.6;
}
.st-testimonial-card .st-star-row {
  margin-bottom: 10px;
}
.st-testimonial-card footer {
  margin-top: 10px;
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 12.5px;
  font-weight: 700;
}
.st-testimonial-verified {
  color: #F47A0F;
  color: var(--accent);
}

@media (max-width: 1024px) {
  .st-pdp {
    padding: 104px 24px 54px;
  }
  .st-pdp-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .st-pdp-buy h1 {
    font-size: 46px;
  }
}

@media (max-width: 760px) {
  .st-pdp {
    padding: 96px 20px 48px;
  }
  .st-pdp-buy h1 {
    font-size: 38px;
  }
  /* Mobile above-the-fold: one clean product image, then straight into
     title, rating, price and the pack selector. */
  .st-pdp-media .st-photo-pair,
  .st-pdp-trust {
    display: none;
  }
  .st-pdp-media .st-photo-main {
    aspect-ratio: 4 / 3;
  }
  .st-pdp-price strong {
    font-size: 34px;
  }
  .st-pack-selector-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .st-pack-option {
    min-height: 84px;
  }
  .st-review-summary-card {
    padding: 16px;
  }
  .st-judgeme-card {
    padding: 18px;
  }
}

/* ============================================
   STOCKIST CALLOUT — low-key band for stores/resellers
   ============================================ */
.st-stockist-section {
  padding: 40px 64px;
  background: #ECE8DE;
  background: var(--surface-muted);
}
.st-stockist {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 22px 24px;
  border: 1px solid rgba(9,23,34,.14);
  border-radius: 8px;
  background: #FFFFFF;
  background: var(--surface-strong);
}
.st-stockist-icon {
  flex: 0 0 auto;
  color: #F47A0F;
  color: var(--accent);
}
.st-stockist-copy {
  flex: 1 1 340px;
  min-width: 0;
}
.st-stockist-copy h3 {
  margin: 0 0 5px;
  color: #091722;
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}
.st-stockist-copy p {
  margin: 0;
  color: #29343A;
  color: var(--body);
  font-size: 14px;
  line-height: 1.6;
  max-width: 760px;
}
.st-stockist .btn-dark {
  flex: 0 0 auto;
}

@media (max-width: 760px) {
  .st-stockist-section {
    padding: 32px 20px;
  }
  .st-stockist {
    padding: 18px;
  }
  .st-stockist .btn-dark {
    width: 100%;
  }
}

/* ============================================
   SHIPPING ESTIMATE LINE (bracket buy column)
   ============================================ */
.st-pdp-shipest {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 0;
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 13px;
  line-height: 1.55;
  max-width: none;
}
.st-pdp-shipest svg {
  flex: 0 0 auto;
  margin-top: 3px;
  color: #F47A0F;
  color: var(--accent);
}
.st-pdp-shipest a {
  color: #F47A0F;
  color: var(--accent);
  font-weight: 700;
}

/* ============================================
   PICKUP "HOW IT WORKS" STEPS (contact page)
   ============================================ */
.st-pickup-steps ol {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pickup-step;
  display: grid;
  grid-gap: 14px;
  gap: 14px;
}
.st-pickup-steps li {
  counter-increment: pickup-step;
  position: relative;
  padding: 16px 18px 16px 58px;
  border: 1px solid rgba(143,166,178,0.32);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  background: rgba(255,255,255,.04);
  color: #B4C0C6;
  color: var(--grey-lt);
  font-size: 14.5px;
  line-height: 1.6;
}
.st-pickup-steps li::before {
  content: counter(pickup-step);
  position: absolute;
  left: 16px;
  top: 16px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #F47A0F;
  background: var(--accent);
  color: #091722;
  color: var(--ink);
  font-weight: 900;
  font-size: 14px;
}
.st-pickup-steps li strong {
  color: #FFFFFF;
  color: var(--white);
}
.st-pickup-steps li em {
  font-style: normal;
  color: #F47A0F;
  color: var(--accent);
  font-weight: 700;
}

/* ============================================
   SPEC TABLE (collapsed FAQ item, light section)
   ============================================ */
.st-spec-table {
  width: 100%;
  max-width: 760px;
  margin: -4px 0 22px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.st-spec-table th,
.st-spec-table td {
  padding: 10px 14px;
  border: 1px solid rgba(9,23,34,.14);
  text-align: left;
  vertical-align: top;
}
.st-spec-table th {
  width: 160px;
  background: #ECE8DE;
  background: var(--surface-muted);
  color: #091722;
  color: var(--ink);
  font-weight: 700;
  white-space: nowrap;
}
.st-spec-table td {
  color: #29343A;
  color: var(--body);
  line-height: 1.55;
}

@media (max-width: 760px) {
  .st-pickup-steps li {
    padding: 14px 14px 14px 52px;
  }
  .st-spec-table th {
    width: auto;
    white-space: normal;
  }
  .st-spec-table th,
  .st-spec-table td {
    padding: 8px 10px;
    font-size: 13.5px;
  }
}

/* ============================================
   SPLIT HERO (homepage) — full photo, no crop
   ============================================ */
.st-hero-split {
  background:
    radial-gradient(1100px 540px at 88% 8%, rgba(244,122,15,.10), transparent 62%),
    linear-gradient(160deg, #091722 0%, #132C3E 100%);
  background:
    radial-gradient(1100px 540px at 88% 8%, rgba(244,122,15,.10), transparent 62%),
    linear-gradient(160deg, var(--ink) 0%, var(--navy-mid) 100%);
}
.st-hero-split-inner {
  width: min(1280px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
  grid-gap: 56px;
  gap: 56px;
  align-items: center;
}
.st-hero-split h1 {
  max-width: none;
}
.st-hero-photo picture,
.st-hero-photo img {
  display: block;
  width: 100%;
}
.st-hero-photo img {
  height: auto;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 28px 70px rgba(0,0,0,.42);
}

@media (max-width: 1024px) {
  .st-hero-split-inner {
    grid-template-columns: 1fr;
    gap: 34px;
  }
}

@media (max-width: 760px) {
  .st-hero-split-inner {
    gap: 26px;
  }
  .st-hero-photo img {
    border-radius: 8px;
  }
}

/* Heavy-duty / trade note under the buy panel */
.st-pdp-heavy-note {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #B4C0C6;
  color: var(--grey-lt);
}
.st-pdp-heavy-note a { color: #F47A0F; color: var(--accent); font-weight: 700; }

/* Warranty section */
.st-warranty-layout { align-items: start; }
.st-warranty-exclusions {
  margin-top: 14px;
  font-size: 13.5px;
  line-height: 1.6;
  color: #B4C0C6;
  color: var(--grey-lt);
}
.st-warranty-points {
  display: grid;
  grid-gap: 12px;
  gap: 12px;
}

/* ============================================
   CART — NAV ICON + BADGE
   ============================================ */
.nav-cart-btn {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
  background: none; border: none; cursor: pointer;
  color: #B4C0C6;
  color: var(--grey-lt);
  padding: 8px;
  border-radius: 6px;
  border-radius: var(--radius-md);
  transition: color .2s ease, background .2s ease;
  line-height: 1;
}
.nav-cart-btn:hover { color: #FFFFFF; color: var(--white); background: rgba(143,166,178,.1); }
.nav-cart-badge {
  position: absolute; top: 1px; right: 1px;
  min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 8px;
  background: #F47A0F;
  background: var(--accent);
  color: #0B1B29;
  color: var(--navy);
  font-size: 10px; font-weight: 700; line-height: 17px;
  text-align: center;
  pointer-events: none;
}
.nav-cart-mobile {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  width: 100%;
  background: #132C3E;
  background: var(--navy-mid);
  border: 1px solid rgba(143,166,178,0.32);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  border-radius: var(--radius-md);
  color: #FFFFFF;
  color: var(--white);
  font-size: 14px; font-weight: 700;
  padding: 13px 18px;
  cursor: pointer;
}
.nav-cart-mobile svg { color: #F47A0F; color: var(--accent); }

/* ============================================
   CART DRAWER
   ============================================ */
.st-cart-backdrop {
  position: fixed; inset: 0; z-index: 1100;
  background: rgba(9,23,34,.6);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.st-cart-backdrop.is-open { opacity: 1; pointer-events: auto; }

.st-cart-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1101;
  width: min(420px, 100vw);
  background: #132C3E;
  background: var(--navy-mid);
  border-left: 1px solid rgba(143,166,178,0.32);
  border-left: 1px solid var(--border-strong);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.4,0,.2,1);
  overflow: hidden;
}
.st-cart-drawer.is-open { transform: translateX(0); }

.st-cart-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(143,166,178,0.14);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.st-cart-title {
  display: flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 700; color: #FFFFFF; color: var(--white);
  letter-spacing: .3px;
}
.st-cart-title svg { color: #F47A0F; color: var(--accent); }
.st-cart-count {
  font-size: 12px; font-weight: 700; color: #B4C0C6; color: var(--grey-lt);
  background: rgba(143,166,178,.1);
  border-radius: 999px; padding: 2px 8px;
}
.st-cart-close {
  background: none; border: none; cursor: pointer;
  color: #B4C0C6;
  color: var(--grey-lt);
  padding: 6px; border-radius: 4px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  transition: color .15s ease, background .15s ease;
}
.st-cart-close:hover { color: #FFFFFF; color: var(--white); background: rgba(143,166,178,.12); }

.st-cart-warning {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 14px 20px 0;
  padding: 12px 14px;
  background: rgba(244,122,15,.1);
  border: 1px solid rgba(244,122,15,.3);
  border-radius: 6px;
  border-radius: var(--radius-md);
  font-size: 12.5px; line-height: 1.5; color: #F7F5EF; color: var(--text);
  flex: 0 0 auto;
}
.st-cart-warning svg { color: #F47A0F; color: var(--accent); flex: 0 0 auto; margin-top: 1px; }
.st-cart-warning a { color: #F47A0F; color: var(--accent); font-weight: 700; text-decoration: underline; }

.st-cart-preorder {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 14px 20px 0;
  padding: 12px 14px;
  background: rgba(244,122,15,.1);
  border: 1px solid rgba(244,122,15,.3);
  border-radius: 6px;
  border-radius: var(--radius-md);
  font-size: 12.5px; line-height: 1.5; color: #F7F5EF; color: var(--text);
  flex: 0 0 auto;
}
.st-cart-preorder svg { color: #F47A0F; color: var(--accent); flex: 0 0 auto; margin-top: 1px; }
.st-cart-preorder strong { color: #FFFFFF; color: var(--white); }

.st-cart-lines {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 0;
  -webkit-overflow-scrolling: touch;
}

.st-cart-empty {
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
  padding: 60px 20px;
  color: #B4C0C6;
  color: var(--grey-lt);
  text-align: center;
}
.st-cart-empty svg { color: #778894; color: var(--steel); opacity: .5; }
.st-cart-empty p { font-size: 15px; }

.st-cart-line {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(143,166,178,0.14);
  border-bottom: 1px solid var(--border);
}
.st-cart-line:last-child { border-bottom: none; }

.st-cart-line-info {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.st-cart-line-title {
  font-size: 13.5px; font-weight: 700; color: #FFFFFF; color: var(--white);
  line-height: 1.35;
}
.st-cart-line-attrs {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.st-cart-line-attrs li { font-size: 12px; color: #B4C0C6; color: var(--grey-lt); }
.st-cart-attr-key { font-weight: 700; color: #C8D1D5; color: var(--steel-lt); }
.st-cart-line-price {
  font-size: 13px; font-weight: 700; color: #F47A0F; color: var(--accent);
  margin-top: 4px;
}

.st-cart-line-controls {
  display: flex; align-items: center; gap: 6px;
  flex: 0 0 auto;
}
.st-cart-qty-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: rgba(143,166,178,.1);
  border: 1px solid rgba(143,166,178,0.32);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  border-radius: var(--radius-sm);
  color: #FFFFFF;
  color: var(--white); cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.st-cart-qty-btn:hover:not(:disabled) { background: rgba(143,166,178,.2); }
.st-cart-qty-btn:disabled { opacity: .4; cursor: not-allowed; }
.st-cart-qty {
  min-width: 22px; text-align: center;
  font-size: 14px; font-weight: 700; color: #FFFFFF; color: var(--white);
}
input.st-cart-qty {
  width: 44px; padding: 4px 0;
  font-family: inherit; background: transparent;
  border: 1px solid transparent; border-radius: 4px; border-radius: var(--radius-sm);
}
input.st-cart-qty:hover, input.st-cart-qty:focus { border-color: currentColor; border-color: var(--pd-input, currentColor); outline: none; }
.st-cart-remove {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  background: none; border: none; cursor: pointer;
  color: #B4C0C6;
  color: var(--grey-lt); border-radius: 4px; border-radius: var(--radius-sm);
  transition: color .15s ease, background .15s ease;
  margin-left: 2px;
}
.st-cart-remove:hover:not(:disabled) { color: #e05252; background: rgba(224,82,82,.1); }
.st-cart-remove:disabled { opacity: .4; cursor: not-allowed; }

.st-cart-footer {
  flex: 0 0 auto;
  padding: 16px 20px 20px;
  border-top: 1px solid rgba(143,166,178,0.14);
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 10px;
}
.st-cart-subtotal {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px;
}
.st-cart-subtotal span { color: #B4C0C6; color: var(--grey-lt); font-weight: 600; }
.st-cart-subtotal strong { color: #FFFFFF; color: var(--white); font-size: 18px; font-weight: 700; }
.st-cart-footer-note {
  font-size: 11.5px; color: #B4C0C6; color: var(--grey-lt); text-align: center; line-height: 1.4;
}
.st-wide-btn {
  width: 100%; justify-content: center;
}

.st-cart-loading-overlay {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(11,27,41,.55);
  display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}
.st-cart-spinner {
  display: block;
  width: 28px; height: 28px;
  border: 3px solid rgba(244,122,15,.25);
  border-top-color: #F47A0F;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: st-spin .65s linear infinite;
}
@keyframes st-spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
  .st-cart-drawer { width: 100vw; border-left: none; }
  .st-cart-line { padding: 10px 14px; }
  .st-cart-header { padding: 14px 14px 12px; }
  .st-cart-footer { padding: 12px 14px 16px; }
  .st-cart-warning { margin: 10px 14px 0; }
  .st-cart-preorder { margin: 10px 14px 0; }
}

/* ==========================================================================
   HOMEPAGE 2.0 — v2 DESIGN SYSTEM
   July 2026 — appended below the existing 2026 redesign layer
   ========================================================================== */

/* --- Keyframes --- */
@keyframes v2PulseDot {
  0%,100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.7); opacity: .4; }
}
@keyframes v2Marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes v2SlideOn {
  0%,8%    { transform: translateX(-50%) translateY(-120px); opacity: 0; }
  22%      { opacity: 1; }
  42%,72%  { transform: translateX(-50%) translateY(0); opacity: 1; }
  84%      { transform: translateX(-50%) translateY(0); opacity: 1; }
  92%,100% { transform: translateX(-50%) translateY(-120px); opacity: 0; }
}
@keyframes v2TimberIn {
  0%,44%   { transform: translateX(70px); opacity: 0; }
  58%,86%  { transform: translateX(0); opacity: 1; }
  96%,100% { transform: translateX(70px); opacity: 0; }
}

/* --- Hero --- */
.v2-hero {
  background: linear-gradient(155deg, #08141F 0%, #0B1B29 45%, #123044 100%);
  position: relative;
  overflow: hidden;
  color: #fff;
}
.v2-hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .45;
  pointer-events: none;
}
.v2-hero-glow-a {
  position: absolute; top: -160px; right: -60px;
  width: 620px; height: 620px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244,122,15,.26), transparent 64%);
  pointer-events: none;
}
.v2-hero-glow-b {
  position: absolute; bottom: -200px; left: -140px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(58,120,180,.18), transparent 68%);
  pointer-events: none;
}
.v2-hero-bar {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 5px;
  background: linear-gradient(180deg, #F47A0F, transparent);
}
.v2-hero-inner {
  position: relative;
  display: grid; grid-template-columns: 1.04fr 1fr;
  grid-gap: 60px;
  gap: 60px;
  padding: 104px 64px 112px;
  align-items: center;
  max-width: 1440px; margin: 0 auto;
}
.v2-hero-left { display: flex; flex-direction: column; }
.v2-hero-eyebrow {
  display: flex; align-items: center; gap: 13px;
  margin-bottom: 30px;
}
.v2-hero-eyebrow-line { width: 32px; height: 2px; background: #F47A0F; flex-shrink: 0; }
.v2-hero-eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #F47A0F;
  box-shadow: 0 0 12px #F47A0F;
  flex-shrink: 0;
  animation: v2PulseDot 2.6s ease-in-out infinite;
}
.v2-hero-eyebrow-text {
  color: #F7A24E;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 3.5px;
  text-transform: uppercase;
}
.v2-hero-h1 {
  margin: 0 0 26px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(60px, 7.2vw, 100px);
  line-height: .92;
  letter-spacing: 1px;
  color: #fff;
}
.v2-hero-orange { color: #F47A0F; }
.v2-hero-body {
  margin: 0 0 32px;
  max-width: 530px;
  font-size: 18px; line-height: 1.65;
  color: #B4C2CE;
  font-weight: 400;
}
.v2-hero-actions {
  display: flex; gap: 14px;
  margin-bottom: 38px;
  flex-wrap: wrap;
}
.v2-btn-primary {
  display: inline-flex; align-items: center; gap: 9px;
  background: #F47A0F;
  color: #0B1B29;
  font-size: 16px; font-weight: 700;
  letter-spacing: .04em;
  padding: 20px 32px;
  border-radius: 8px;
  box-shadow: 0 14px 38px rgba(244,122,15,.4);
  text-decoration: none; border: none; cursor: pointer;
  transition: background .2s ease, transform .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.v2-btn-primary:hover {
  background: #F7963F; color: #0B1B29;
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(244,122,15,.48);
}
.v2-btn-outline {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1.5px solid rgba(255,255,255,.32);
  color: #fff;
  font-size: 16px; font-weight: 700;
  letter-spacing: .04em;
  padding: 18.5px 30px;
  border-radius: 8px;
  text-decoration: none; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .18s ease;
  white-space: nowrap;
}
.v2-btn-outline:hover {
  border-color: #fff;
  background: rgba(255,255,255,.06);
  color: #fff;
  transform: translateY(-2px);
}
.v2-hero-stats {
  display: flex;
  border-top: 1px solid rgba(255,255,255,.14);
  padding-top: 26px;
}
.v2-hero-stat { flex: 1 1; }
.v2-hero-stat + .v2-hero-stat {
  border-left: 1px solid rgba(255,255,255,.14);
  padding-left: 24px;
}
.v2-hero-stat-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px; font-weight: 600;
  color: #fff; line-height: 1;
}
.v2-hero-stat-label {
  font-size: 12.5px; font-weight: 500;
  color: #8194A2; line-height: 1.4;
  margin-top: 7px;
}
/* Right column — product card */
.v2-hero-right { position: relative; padding: 12px 0; }
.v2-hero-card-glow {
  position: absolute; left: 50%; top: 52%;
  transform: translate(-50%, -50%);
  width: 118%; height: 118%;
  background: radial-gradient(ellipse at center, rgba(244,122,15,.16), transparent 62%);
  pointer-events: none;
}
.v2-hero-fig-tag {
  position: absolute; right: -14px; top: -14px;
  background: #F47A0F; color: #0B1B29;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: 1.5px;
  padding: 9px 12px; border-radius: 4px;
  z-index: 3;
  box-shadow: 0 12px 28px rgba(244,122,15,.4);
}
.v2-hero-card {
  position: relative;
  background: radial-gradient(ellipse at 50% 40%, #fff 0%, #EAEEF1 64%, #CFD8DE 100%);
  border-radius: 12px;
  padding: 44px 44px 26px;
  box-shadow: 0 54px 110px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6);
}
.v2-hero-card-gauge {
  position: absolute; left: 22px; top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px;
  z-index: 2;
}
.v2-hero-card-gauge-bar { width: 2px; height: 150px; background: #F47A0F; }
.v2-hero-card-gauge-text {
  writing-mode: vertical-rl;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; font-weight: 600;
  letter-spacing: 2px; color: #B06A2A;
}
.v2-hero-card-img {
  display: block; width: 100%; height: 400px;
  object-fit: contain;
}
.v2-hero-card-badge {
  position: absolute; top: 26px; left: 26px;
  background: #0B1B29; color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 1.5px;
  padding: 9px 12px; border-radius: 4px;
  z-index: 2;
}
.v2-hero-card-specs {
  display: flex; justify-content: space-between;
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid #CBD3DA;
}
.v2-hero-spec-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 15px; font-weight: 600;
  color: #0B1B29; line-height: 1;
}
.v2-hero-spec-label {
  font-size: 10px; font-weight: 500;
  color: #5E6B76; letter-spacing: .1em;
  text-transform: uppercase; margin-top: 6px;
}
.v2-hero-spec-mid {
  text-align: center;
  border-left: 1px solid #DBE1E6; border-right: 1px solid #DBE1E6;
  padding: 0 28px;
}
.v2-hero-spec-right { text-align: right; }
/* Floating field-photo chip */
.v2-hero-field-chip {
  position: absolute; left: -26px; bottom: -30px;
  width: 190px;
  background: #0B1B29;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px; padding: 10px;
  box-shadow: 0 24px 50px rgba(0,0,0,.5);
  z-index: 3;
}
.v2-hero-field-chip-img {
  border-radius: 8px; overflow: hidden; height: 96px;
}
.v2-hero-field-chip-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.v2-hero-field-chip-text {
  font-size: 10px; font-weight: 600; line-height: 1.35;
  color: #C4D0DA; margin: 9px 2px 2px; padding: 0;
}
.v2-hero-field-chip-text span { color: #F7A24E; }

/* --- Trust strip --- */
.v2-trust-strip {
  background: #0B1B29;
  border-top: 1px solid rgba(255,255,255,.08);
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.v2-trust-item {
  padding: 20px 12px;
  text-align: center;
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .06em;
  color: #AEBCC9;
  text-transform: uppercase;
}
.v2-trust-item + .v2-trust-item { border-left: 1px solid rgba(255,255,255,.08); }

/* --- Marquee --- */
.v2-marquee {
  background: #F47A0F;
  overflow: hidden;
  padding: 13px 0;
  white-space: nowrap;
}
.v2-marquee-track {
  display: inline-flex;
  animation: v2Marquee 30s linear infinite;
  will-change: transform;
}
.v2-marquee-text {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 16px; letter-spacing: 2.5px;
  color: #0B1B29;
  white-space: nowrap;
}

/* --- Section wrappers --- */
.v2-section { padding: 88px 64px; }
.v2-section-warm  { background: #F6F4F0; }
.v2-section-white { background: #fff; }
.v2-section-dark  { background: #0B1B29; color: #fff; }
.v2-section-dark-grad { background: linear-gradient(120deg, #0B1B29, #123044); color: #fff; }
.v2-faq-section   { padding-top: 80px; padding-bottom: 80px; }

/* --- Label + heading helpers --- */
.v2-mono-label {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 14px;
}
.v2-mono-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #F47A0F; flex-shrink: 0;
}
.v2-mono-text {
  color: #B06A2A;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 3.5px; text-transform: uppercase;
}
.v2-mono-text-lt {
  color: #F7A24E;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 3.5px; text-transform: uppercase;
}
.v2-h2 {
  margin: 0 0 16px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(36px, 4vw, 56px);
  letter-spacing: 1px; line-height: 1;
  color: #0B1B29;
}
.v2-h2-white { color: #fff; }
.v2-body {
  margin: 0;
  font-size: 17px; line-height: 1.6;
  color: #4C5A66;
}
.v2-body-lt { color: #AEBCC9; }

/* --- What StakeTek Makes --- */
.v2-systems-intro { max-width: 800px; margin-bottom: 40px; }
.v2-systems-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 22px; gap: 22px; margin-bottom: 22px; }
.v2-system-card {
  background: #fff; border: 1px solid #E7E4DD;
  border-radius: 12px; padding: 32px;
}
.v2-system-header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.v2-system-badge {
  background: #0B1B29; color: #F47A0F;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: 1.5px; padding: 6px 9px; border-radius: 4px;
}
.v2-system-compat-a {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600; color: #2E7D46;
}
.v2-system-compat-b {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600; color: #5E6B76;
}
.v2-system-h3 {
  margin: 0 0 10px;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 32px; letter-spacing: .5px;
  color: #0B1B29; line-height: 1;
}
.v2-system-body {
  margin: 0 0 20px;
  font-size: 14.5px; line-height: 1.55; color: #5E6B76;
}
.v2-system-links { display: flex; flex-direction: column; gap: 10px; }
.v2-system-link {
  display: flex; justify-content: space-between; align-items: center;
  border: 1px solid #E7E4DD; border-radius: 8px; padding: 15px 18px;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.v2-system-link:hover { border-color: #F47A0F; background: #FFF8F1; }
.v2-system-link-name { font-size: 15px; font-weight: 700; color: #0B1B29; }
.v2-system-link-price {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px; font-weight: 600; color: #B06A2A;
  white-space: nowrap;
}
/* Compatibility strip */
.v2-compat-strip {
  background: #0B1B29; border-radius: 12px;
  padding: 26px 32px;
  display: flex; align-items: center; gap: 24px;
  position: relative; overflow: hidden;
  flex-wrap: wrap;
}
.v2-compat-strip-glow {
  position: absolute; top: -60px; right: 120px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244,122,15,.16), transparent 68%);
  pointer-events: none;
}
.v2-compat-icon {
  flex: none; width: 46px; height: 46px;
  border-radius: 12px; background: #F47A0F;
  display: grid; place-items: center;
  font-size: 22px; font-weight: 700; color: #0B1B29;
  position: relative;
}
.v2-compat-body { position: relative; flex: 1 1; min-width: 200px; }
.v2-compat-title { font-size: 16px; font-weight: 700; color: #fff; margin-bottom: 5px; line-height: 1.3; }
.v2-compat-text { font-size: 14px; line-height: 1.55; color: #AEBCC9; margin: 0; }
.v2-compat-cta {
  position: relative; flex: none;
  background: #F47A0F; color: #0B1B29;
  font-size: 14px; font-weight: 700;
  padding: 15px 20px; border-radius: 8px;
  text-decoration: none; white-space: nowrap;
  transition: background .2s ease;
}
.v2-compat-cta:hover { background: #F7963F; color: #0B1B29; }

/* --- How It Works --- */
.v2-how-grid { display: grid; grid-template-columns: .95fr 1.05fr; grid-gap: 56px; gap: 56px; align-items: center; }
.v2-steps { display: flex; flex-direction: column; }
.v2-step { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid #E7E4DD; }
.v2-step:last-child { border-bottom: 1px solid #E7E4DD; }
.v2-step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px; font-weight: 600; color: #F47A0F;
  width: 30px; flex-shrink: 0; line-height: 1; padding-top: 2px;
}
.v2-step-title { font-size: 15px; font-weight: 700; color: #0B1B29; margin-bottom: 5px; }
.v2-step-body { font-size: 13.5px; line-height: 1.5; color: #5E6B76; }
.v2-how-photo {
  border-radius: 12px;
  overflow: hidden;
  height: 440px;
  background: #0B1B29;
  box-shadow: 0 22px 44px -20px rgba(11,27,41,.25);
}
.v2-how-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* --- Old Way vs StakeTek --- */
.v2-compare-intro { text-align: center; max-width: 620px; margin: 0 auto 36px; }
.v2-compare-intro .v2-mono-text-lt { display: block; margin-bottom: 12px; }
.v2-compare-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 22px; gap: 22px; }
.v2-compare-old {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 32px;
}
.v2-compare-new {
  background: #F47A0F;
  border-radius: 12px; padding: 32px;
}
.v2-compare-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 2px; margin-bottom: 20px;
  text-transform: uppercase;
}
.v2-compare-old .v2-compare-label { color: #8A99A6; }
.v2-compare-new .v2-compare-label { color: rgba(11,27,41,.65); }
.v2-compare-list { display: flex; flex-direction: column; gap: 14px; }
.v2-compare-item { display: flex; gap: 10px; font-size: 15px; line-height: 1.4; }
.v2-compare-old .v2-compare-item { color: #C4D0DA; }
.v2-compare-new .v2-compare-item { color: #0B1B29; font-weight: 600; }
.v2-compare-x  { color: #B0403B; font-weight: 700; flex-shrink: 0; }
.v2-compare-check { font-weight: 700; flex-shrink: 0; }

/* --- Use Cases --- */
.v2-cases-header {
  display: flex; justify-content: space-between;
  align-items: flex-end; margin-bottom: 28px;
}
.v2-cases-link {
  font-size: 14px; font-weight: 700;
  color: #B06A2A; text-decoration: none;
}
.v2-cases-link:hover { color: #0B1B29; }
.v2-cases-grid {
  display: grid; grid-template-columns: 1.5fr 1fr 1fr;
  grid-template-rows: 420px;
  grid-gap: 12px;
  gap: 12px;
}
.v2-case-photo {
  position: relative; border-radius: 12px; overflow: hidden;
  background: #0B1B29;
  height: 100%; min-height: 0;
}
.v2-case-photo img,
.v2-case-photo video { width: 100%; height: 100%; object-fit: cover; display: block; background: #0B1B29; }
.v2-case-photo-fill { height: 100%; }
.v2-case-real-badge {
  position: absolute; top: 16px; left: 16px;
  background: #F47A0F; color: #0B1B29;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: 1.5px; padding: 7px 10px; border-radius: 4px;
}
.v2-case-caption {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(transparent, rgba(8,20,31,.9));
}
.v2-case-photo-main .v2-case-caption { padding: 28px 24px 20px; }
.v2-case-photo-sm  .v2-case-caption { padding: 20px 16px 14px; }
.v2-case-caption-title {
  font-family: 'Bebas Neue', sans-serif;
  letter-spacing: .5px; color: #fff;
}
.v2-case-photo-main .v2-case-caption-title { font-size: 30px; line-height: 1; }
.v2-case-photo-sm  .v2-case-caption-title { font-size: 21px; line-height: 1; }
.v2-case-caption-body { font-size: 13px; line-height: 1.4; color: #C8D4DE; margin: 4px 0 0; }
.v2-case-photo-sm .v2-case-caption-body { font-size: 11.5px; }
.v2-case-sub-col { display: grid; grid-template-rows: 1fr 1fr; grid-gap: 12px; gap: 12px; }

/* Caption cards (separate section below the photos) */
.v2-case-captions-section { padding-top: 44px; padding-bottom: 44px; }
.v2-case-captions-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 22px; gap: 22px; margin-bottom: 28px; }
.v2-case-caption-card { display: flex; flex-direction: column; gap: 8px; padding: 6px 0; border-top: 2px solid #0B1B29; }
.v2-case-caption-num { font: 600 11px/1 'JetBrains Mono', monospace; color: #B06A2A; letter-spacing: 2px; padding-top: 12px; }
.v2-case-caption-h3 { font: 400 26px/1 'Bebas Neue', sans-serif; letter-spacing: .5px; color: #0B1B29; margin: 0; }
.v2-case-caption-p { font: 400 14px/1.55 'DM Sans', sans-serif; color: #3A4550; margin: 0; }
.v2-case-tags {
  display: grid; grid-template-columns: repeat(6, 1fr);
  grid-gap: 10px;
  gap: 10px; margin-top: 16px;
}
.v2-case-tag {
  background: #fff; border: 1px solid #E7E4DD;
  border-radius: 8px; padding: 14px 10px;
  text-align: center; font-size: 13px; font-weight: 600;
  color: #39434C;
}

/* --- Trade Band --- */
.v2-trade-grid { display: grid; grid-template-columns: 1.2fr 1fr; grid-gap: 48px; gap: 48px; align-items: center; }
.v2-trade-actions { display: flex; flex-direction: column; gap: 12px; }
.v2-btn-full-primary {
  display: block; text-align: center;
  background: #F47A0F; color: #0B1B29;
  font-size: 16px; font-weight: 700;
  padding: 19px; border-radius: 8px;
  text-decoration: none;
  transition: background .2s ease, transform .18s ease;
}
.v2-btn-full-primary:hover { background: #F7963F; color: #0B1B29; transform: translateY(-1px); }
.v2-btn-full-outline {
  display: block; text-align: center;
  border: 1.5px solid rgba(255,255,255,.32);
  color: #fff; font-size: 16px; font-weight: 700;
  padding: 17px; border-radius: 8px;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.v2-btn-full-outline:hover { border-color: #fff; background: rgba(255,255,255,.04); }

/* --- Reviews --- */
.v2-reviews-header { text-align: center; margin-bottom: 36px; }
.v2-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 18px; gap: 18px; }
.v2-review-card {
  border: 1px solid #E7E4DD; border-radius: 12px; padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
}
.v2-review-stars { color: #F47A0F; font-size: 16px; line-height: 1; }
.v2-review-quote {
  font-size: 44px; line-height: 1; color: #E1DDD4;
  font-family: 'Bebas Neue', sans-serif;
}
.v2-review-text {
  font-size: 16px; line-height: 1.55; color: #39434C;
  flex: 1 1; margin: 0;
}
.v2-review-foot { margin-top: auto; }
.v2-review-author { font-size: 13.5px; font-weight: 700; color: #0B1B29; }
.v2-review-source { font-size: 12px; font-weight: 500; color: #98A4AE; margin-top: 2px; }

/* --- FAQ (v2) --- */
.v2-faq-header { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.v2-faq-h2 { text-align: center; }
.v2-faq-list { max-width: 840px; margin: 0 auto; }
.v2-faq-item { border-bottom: 1px solid #E7E4DD; }
.v2-faq-item summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0; cursor: pointer; gap: 16px; list-style: none;
  font-size: 16.5px; font-weight: 700; color: #0B1B29;
  transition: color .15s ease;
}
.v2-faq-item summary::-webkit-details-marker { display: none; }
.v2-faq-item summary:hover { color: #F47A0F; }
.v2-faq-chevron { flex-shrink: 0; }
.v2-faq-item[open] .v2-faq-chevron { transform: rotate(180deg); }
.v2-faq-item p { font-size: 15px; line-height: 1.7; color: #4C5A66; padding-bottom: 20px; margin: 0; }

/* --- Responsive — tablet --- */
@media (max-width: 1024px) {
  .v2-hero-inner {
    grid-template-columns: 1fr;
    gap: 0; padding: 96px 40px 72px;
  }
  /* Show the hero product photo and slot it between the copy and the buttons.
     display:contents lifts the hero-left children into the single-column grid
     so the photo (hero-right) can be ordered in amongst them. */
  .v2-hero-left { display: contents; }
  .v2-hero-eyebrow { order: 1; }
  .v2-hero-h1 { order: 2; }
  .v2-hero-body { order: 3; }
  .v2-hero-right { display: block; order: 4; margin: 4px auto 28px; max-width: 440px; width: 100%; }
  .v2-hero-actions { order: 5; }
  .v2-hero-stats { order: 6; }
  .v2-section { padding: 64px 40px; }
  .v2-faq-section { padding: 64px 40px; }
  .v2-systems-grid { grid-template-columns: 1fr; }
  .v2-how-grid { grid-template-columns: 1fr; gap: 36px; }
  .v2-how-diagram { height: 380px; }
  .v2-compare-grid { grid-template-columns: 1fr; }
  .v2-cases-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; height: auto; }
  .v2-case-photo-main { grid-column: 1 / -1; height: 280px; }
  .v2-case-sub-col { grid-template-rows: auto; }
  .v2-case-sub-col .v2-case-photo-sm { height: 200px; }
  .v2-case-photo-fill { height: 200px; }
  .v2-case-captions-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 22px; }
  .v2-case-tags { grid-template-columns: repeat(3, 1fr); }
  .v2-trade-grid { grid-template-columns: 1fr; gap: 28px; }
  .v2-reviews-grid { grid-template-columns: 1fr 1fr; }
  .v2-trust-strip { grid-template-columns: repeat(2, 1fr); }
  .v2-trust-item:nth-child(3) { border-left: none; border-top: 1px solid rgba(255,255,255,.08); }
  .v2-trust-item:nth-child(4) { border-top: 1px solid rgba(255,255,255,.08); }
  .v2-compat-cta { width: 100%; text-align: center; }
}

/* --- Responsive — mobile --- */
@media (max-width: 640px) {
  .v2-hero-inner { padding: 80px 20px 56px; }
  .v2-hero-h1 { font-size: clamp(52px, 14vw, 72px); }
  .v2-hero-body { font-size: 16px; }
  /* Keep the hero photo card visible but compact on phones. */
  .v2-hero-right { margin: 2px auto 22px; max-width: 100%; }
  .v2-hero-card { padding: 30px 26px 20px; }
  .v2-hero-card-img { height: 250px; }
  .v2-hero-card-gauge-bar { height: 104px; }
  .v2-hero-actions { flex-direction: column; }
  .v2-btn-primary, .v2-btn-outline { width: 100%; justify-content: center; }
  .v2-hero-stats { flex-direction: column; gap: 16px; }
  .v2-hero-stat + .v2-hero-stat {
    border-left: none; padding-left: 0;
    border-top: 1px solid rgba(255,255,255,.14); padding-top: 16px;
  }
  .v2-section { padding: 56px 20px; }
  .v2-faq-section { padding: 56px 20px; }
  .v2-cases-grid { grid-template-columns: 1fr; grid-template-rows: none; height: auto; }
  .v2-case-photo-main { grid-column: auto; height: 240px; }
  .v2-case-sub-col { grid-template-rows: auto; }
  .v2-case-sub-col .v2-case-photo-sm { height: 180px; }
  .v2-case-captions-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 18px; }
  .v2-case-tags { grid-template-columns: repeat(2, 1fr); }
  .v2-trust-strip { grid-template-columns: 1fr; }
  .v2-trust-item + .v2-trust-item { border-left: none; border-top: 1px solid rgba(255,255,255,.08); }
  .v2-compat-strip { flex-direction: column; }
  .v2-marquee-text { font-size: 13px; }
  .v2-reviews-grid { grid-template-columns: 1fr; }
  .v2-compare-grid { grid-template-columns: 1fr; }
  .v2-cases-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .v2-trade-grid { grid-template-columns: 1fr; }
  .v2-how-diagram { display: none; }
  .v2-how-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   SITE 2.0 — INNER PAGES (4b–4g)
   Appended July 2026 — v2p prefix = version-2 pages
   ========================================================================== */

/* --- Shared page primitives --- */
.v2p-page { font-family: 'IBM Plex Sans', sans-serif; }

.v2p-hero {
  background: linear-gradient(160deg, #1B1D1E, #202223);
  padding: 64px 52px 56px;
  position: relative; overflow: hidden;
}
.v2p-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: .5; pointer-events: none;
}
.v2p-hero-inner { position: relative; max-width: 780px; }
.v2p-breadcrumb {
  font: 500 12.5px/1 'IBM Plex Sans', sans-serif;
  color: #9DA0A1; letter-spacing: .04em; margin-bottom: 20px;
}
.v2p-breadcrumb a { color: inherit; text-decoration: none; }
.v2p-breadcrumb a:hover { color: #fff; }
.v2p-breadcrumb span { color: #fff; }
.v2p-kicker {
  color: #FF8A1E;
  font: 600 11px/1 'IBM Plex Sans', sans-serif;
  letter-spacing: 3.5px; margin-bottom: 16px;
  display: block;
}
.v2p-hero-h1 {
  font: 700 66px/.98 'Barlow Condensed', sans-serif; text-transform: uppercase;
  letter-spacing: 1px; color: #fff; margin: 0 0 16px;
}
.v2p-hero-body {
  font: 450 17px/1.65 'IBM Plex Sans', sans-serif;
  color: #CFD1D2; margin: 0;
  max-width: 640px;
}
.v2p-hero-body strong { color: #fff; font-weight: 700; }

.v2p-section { padding: 64px 52px; }
.v2p-section-sm { padding: 48px 52px; }
.v2p-section-parchment { background: #F5F2EC; }
.v2p-section-dark { background: #1B1D1E; }
.v2p-section-deepdark { background: #141516; }

.v2p-mono-label {
  font: 600 11px/1 'IBM Plex Sans', sans-serif;
  letter-spacing: 3.5px; margin-bottom: 12px; display: block;
  text-transform: uppercase;
}
.v2p-mono-label-orange { color: #BD4600; }
.v2p-mono-label-lt { color: #FF8A1E; }
.v2p-mono-label-muted { color: #9DA0A1; }

.v2p-h2 { font: 700 44px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #1B1D1E; margin: 0; }
.v2p-h2-lg { font: 700 46px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #1B1D1E; margin: 0; }
.v2p-h2-white { font: 700 46px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #fff; margin: 0; }
.v2p-body { font: 400 15.5px/1.7 'IBM Plex Sans', sans-serif; color: #3C3E3F; margin: 0; }
.v2p-body-lt { color: #D9D6CF; }
.v2p-body-md { color: #5B5E5F; }

.v2p-btn-orange {
  display: inline-flex; align-items: center; gap: 8px;
  background: #FF7500; color: #1B1D1E;
  font: 700 15px/1 'IBM Plex Sans', sans-serif;
  padding: 17px 24px; border-radius: 8px;
  text-decoration: none; border: none; cursor: pointer;
  transition: background .18s ease, transform .15s ease;
}
.v2p-btn-orange:hover { background: #FF8A1E; color: #1B1D1E; transform: translateY(-1px); }

.v2p-btn-outline-white {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid rgba(255,255,255,.32); color: #fff;
  font: 700 15px/1 'IBM Plex Sans', sans-serif;
  padding: 15px 22px; border-radius: 8px;
  text-decoration: none;
  transition: border-color .18s ease, background .15s ease;
}
.v2p-btn-outline-white:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.04); }

.v2p-card {
  border: 1px solid #D9D6CF; border-radius: 12px; overflow: hidden;
  display: block; text-decoration: none;
  transition: box-shadow .2s ease;
}
.v2p-card:hover { box-shadow: 0 20px 44px rgba(27,29,30,.14); }

/* --- Products / Range page (4d) --- */
.v2r-system-row { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.v2r-system-badge {
  background: #0B1B29; color: #F47A0F;
  font: 600 11px/1 'JetBrains Mono', monospace;
  letter-spacing: 1.5px; padding: 8px 11px; border-radius: 4px;
  flex: none; white-space: nowrap;
}
.v2r-system-h2 { font: 400 40px/1 'Bebas Neue', sans-serif; letter-spacing: .5px; color: #0B1B29; margin: 0; }
.v2r-system-status { margin-left: auto; font: 600 12.5px/1 'JetBrains Mono', monospace; white-space: nowrap; }
.v2r-cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; gap: 20px; }
.v2r-cards-2 { display: grid; grid-template-columns: 1.3fr 1fr; grid-gap: 20px; gap: 20px; }
.v2r-card-img-box {
  background: radial-gradient(ellipse at 50% 50%, #fff, #EDF0F2);
  padding: 26px; height: 180px; display: grid; place-items: center;
}
.v2r-card-img-box img { max-width: 100%; max-height: 150px; object-fit: contain; }
.v2r-card-cover { height: 180px; overflow: hidden; }
.v2r-card-cover img { width: 100%; height: 100%; object-fit: cover; }
.v2r-card-body { padding: 22px; }
.v2r-card-status { font: 600 11px/1 'JetBrains Mono', monospace; margin-bottom: 8px; display: block; }
.v2r-card-h3 { font: 400 26px/1 'Bebas Neue', sans-serif; letter-spacing: .5px; color: #0B1B29; margin: 0 0 8px; }
.v2r-card-desc { font: 400 14px/1.55 'DM Sans', sans-serif; color: #3A4550; margin: 0 0 14px; }
.v2r-card-footer { display: flex; justify-content: space-between; align-items: center; }
.v2r-card-price { font: 700 15px 'JetBrains Mono', monospace; color: #0B1B29; }
.v2r-card-action { font: 700 13px 'DM Sans', sans-serif; color: #B06A2A; }

.v2r-picket-card { background: #fff; border: 1px solid #E7E4DD; border-radius: 12px; overflow: hidden; display: flex; }
.v2r-picket-img { width: 220px; flex: none; background: #EDEEEA; overflow: hidden; }
.v2r-picket-img img { width: 100%; height: 100%; object-fit: cover; }
.v2r-picket-body { padding: 24px; flex: 1 1; }
.v2r-picket-h3 { font: 400 28px/1 'Bebas Neue', sans-serif; letter-spacing: .5px; color: #0B1B29; margin: 0 0 6px; }
.v2r-picket-desc { font: 400 14px/1.55 'DM Sans', sans-serif; color: #3A4550; margin: 0 0 14px; }
.v2r-size-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; gap: 8px; }
.v2r-size-cell { border: 1px solid #E7E4DD; border-radius: 8px; padding: 10px; text-align: center; }
.v2r-size-cell.is-featured { border: 2px solid #F47A0F; background: #FFF8F1; }
.v2r-size-mm { font: 700 15px 'JetBrains Mono', monospace; color: #0B1B29; }
.v2r-size-price { font: 600 11px 'DM Sans', sans-serif; color: #B06A2A; }
.v2r-size-note { font: 400 11.5px/1.4 'DM Sans', sans-serif; color: #98A4AE; margin-top: 12px; }
.v2r-size-note a { font-weight: 700; color: #0B1B29; text-decoration: none; }

.v2r-custom-band {
  margin-top: 20px; background: #0B1B29; border-radius: 12px;
  padding: 28px 32px; display: flex; align-items: center; gap: 24px;
}
.v2r-custom-body { flex: 1 1; }
.v2r-custom-kicker { color: #F7A24E; font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: 2.5px; margin-bottom: 8px; display: block; }
.v2r-custom-h3 { font: 400 30px/1 'Bebas Neue', sans-serif; letter-spacing: .5px; color: #fff; margin: 0 0 6px; }
.v2r-custom-desc { font: 400 14px/1.55 'DM Sans', sans-serif; color: #AEBCC9; max-width: 620px; margin: 0; }

.v2r-matrix-center { text-align: center; max-width: 620px; margin: 0 auto 34px; }
.v2r-matrix-kicker { color: #B06A2A; margin-bottom: 12px; }
.v2r-matrix-wrap { border: 1px solid #E7E4DD; border-radius: 12px; overflow: hidden; }
.v2r-matrix-head { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; background: #0B1B29; color: #fff; }
.v2r-matrix-head-cell { padding: 16px 22px; font: 600 11px/1.3 'JetBrains Mono', monospace; letter-spacing: .5px; text-align: center; }
.v2r-matrix-head-cell:first-child { text-align: left; color: #7E90A0; }
.v2r-matrix-head-cell + .v2r-matrix-head-cell { border-left: 1px solid rgba(255,255,255,.1); }
.v2r-matrix-row { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; font: 600 14px 'DM Sans', sans-serif; }
.v2r-matrix-row:not(:last-child) > * { border-bottom: 1px solid #EFEDE7; }
.v2r-matrix-cell { padding: 16px 22px; color: #0B1B29; }
.v2r-matrix-cell.is-val { padding: 16px; text-align: center; border-left: 1px solid #EFEDE7; }
.v2r-matrix-yes { color: #2E7D46; }
.v2r-matrix-no { color: #B0403B; }
.v2r-matrix-na { color: #98A4AE; }
.v2r-matrix-note { text-align: center; font: 400 12.5px/1.5 'DM Sans', sans-serif; color: #98A4AE; margin-top: 16px; }

/* --- Configurator / PDP (4b / 4c) --- */
.v2c-pdp { background: #fff; padding: 0 52px 80px; max-width: 1440px; margin: 0 auto; }
.v2c-breadcrumb { font: 500 12.5px/1 'IBM Plex Sans', sans-serif; color: #9DA0A1; letter-spacing: .04em; padding: 28px 0 0; }
.v2c-breadcrumb a { color: inherit; text-decoration: none; }
.v2c-breadcrumb a:hover { color: #1B1D1E; }
.v2c-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 48px; gap: 48px; align-items: start; padding-top: 28px; }
.v2c-gallery { position: sticky; top: 90px; }
.v2c-gallery-main {
  position: relative;
  background: radial-gradient(ellipse at 50% 45%, #fff, #D9D6CF);
  border-radius: 12px; padding: 22px;
  display: flex; align-items: center; justify-content: center;
  height: 500px; overflow: hidden;
}
.v2c-gallery-main img { width: 100%; height: 100%; object-fit: contain; }
/* Product PNGs have white padding baked in, so the part on white looks small.
   Zoom the contained studio shots to fill the frame (container clips the excess
   whitespace). Real on-site photos use object-fit:cover and are left untouched. */
.v2c-gallery-main img.v2c-img-zoom { transform: scale(1.4); transform-origin: 50% 47%; }
/* Prev / next arrows over the main product image (thumbnails still work). */
.v2c-gallery-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; z-index: 2;
  display: grid; place-items: center; padding: 0;
  background: rgba(255,255,255,.92); border: 1px solid #D9D6CF; color: #1B1D1E;
  cursor: pointer; box-shadow: 0 2px 8px rgba(27,29,30,.14);
  transition: background .15s ease, box-shadow .15s ease;
}
.v2c-gallery-nav:hover { background: #fff; box-shadow: 0 3px 12px rgba(27,29,30,.22); }
.v2c-gallery-nav-prev { left: 14px; }
.v2c-gallery-nav-next { right: 14px; }
.v2c-gallery-main-flush { padding: 0; background: #1B1D1E; }
.v2c-kit-hero { position: relative; }
.v2c-kit-hero-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  text-align: center; padding: 0 24px 40px;
  background: linear-gradient(to top, rgba(20,21,22,.88) 0%, rgba(20,21,22,.45) 40%, rgba(20,21,22,.12) 70%, transparent 100%);
}
.v2c-kit-hero-title { font: 700 46px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #fff; }
.v2c-kit-hero-sub {
  font: 600 13px/1 'IBM Plex Sans', sans-serif; letter-spacing: 4px;
  color: #FF8A1E; margin-top: 12px; text-transform: uppercase;
}
.v2c-gallery-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; gap: 10px; margin-top: 20px; }
.v2c-thumb {
  border: 1.5px solid #D9D6CF; border-radius: 8px;
  overflow: hidden; cursor: pointer; padding: 8px;
  display: grid; place-items: center; height: 72px;
  background: #F5F2EC; transition: border-color .15s ease;
}
.v2c-thumb.is-active { border-color: #1B1D1E; }
.v2c-thumb img { max-height: 52px; max-width: 100%; object-fit: contain; }
.v2c-gallery-spec { margin-top: 32px; border: 1px solid #D9D6CF; border-radius: 12px; overflow: hidden; }
/* Spec table as its own band under the two-column PDP. Two columns of rows on
   desktop so it reads compactly rather than as one long list. */
.v2c-spec-band { margin-top: 44px; }
.v2c-spec-band-title { font: 700 30px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #1B1D1E; margin: 0 0 14px; }
.v2c-spec-band .v2c-gallery-spec { margin-top: 0; display: grid; grid-template-columns: 1fr 1fr; }
/* Odd number of specs: the last one spans both columns so there is never a
   stray empty bordered cell. */
.v2c-spec-band .v2c-spec-row:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .v2c-spec-band { margin-top: 32px; }
  .v2c-spec-band .v2c-gallery-spec { grid-template-columns: 1fr; }
}
.v2c-spec-row { display: grid; grid-template-columns: 1fr 1.3fr; border-bottom: 1px solid #D9D6CF; }
.v2c-spec-row:last-child { border-bottom: none; }
.v2c-spec-label { padding: 11px 14px; font: 600 11px/1 'IBM Plex Sans', sans-serif; letter-spacing: 1px; color: #66696A; background: #F5F2EC; border-right: 1px solid #D9D6CF; }
.v2c-spec-value { padding: 11px 14px; font: 500 13px/1.35 'IBM Plex Sans', sans-serif; color: #1B1D1E; }

.v2c-config { padding-top: 0; }
.v2c-product-label { font: 600 11px/1 'IBM Plex Sans', sans-serif; color: #5B5E5F; letter-spacing: 2px; margin-bottom: 10px; display: block; }
.v2c-h1 { font: 700 52px/.98 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 1px; color: #1B1D1E; margin: 0 0 10px; }
.v2c-subtitle { font: 400 15.5px/1.65 'IBM Plex Sans', sans-serif; color: #3C3E3F; margin: 0 0 20px; }

/* Prominent star-rating strip */
.v2c-rating {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; margin: 2px 0 16px;
  padding: 8px 14px; border-radius: 999px;
  background: #FFF3E8; border: 1px solid #FFD0A3;
  transition: border-color .18s ease, background .18s ease;
}
.v2c-rating:hover { border-color: #FF7500; background: #FFE7D2; }
.v2c-rating-stars { display: inline-flex; gap: 2px; line-height: 0; }
.v2c-rating-score { font: 800 15px/1 'IBM Plex Sans', sans-serif; color: #1B1D1E; }
.v2c-rating-text { font: 600 12.5px/1 'IBM Plex Sans', sans-serif; color: #BD4600; }

/* Customer reviews band (bracket pages) */
.v2c-reviews-band { margin-top: 40px; background: #1B1D1E; border-radius: 12px; padding: 40px 44px; }
.v2c-reviews-head { display: grid; grid-template-columns: 220px 1fr; grid-gap: 36px; gap: 36px; align-items: start; }
.v2c-reviews-score { text-align: center; padding-right: 32px; border-right: 1px solid rgba(255,255,255,.1); }
.v2c-reviews-big { font: 700 68px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #fff; }
.v2c-reviews-stars-txt { font-size: 22px; color: #FF7500; letter-spacing: 3px; margin: 6px 0 10px; }
.v2c-reviews-sub { font: 500 12.5px/1.4 'IBM Plex Sans', sans-serif; color: #B4B7B8; }
.v2c-reviews-quotes { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; gap: 20px; }
.v2c-review-quote { display: flex; flex-direction: column; gap: 8px; }
.v2c-review-quote-stars { color: #FF7500; font-size: 14px; letter-spacing: 2px; line-height: 1; }
.v2c-review-quote-mark { font: 700 34px/.6 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #3C3E3F; }
.v2c-review-quote-text { font: 500 14px/1.5 'IBM Plex Sans', sans-serif; color: #EFEDE9; margin: 0; }
.v2c-review-quote-author { font: 600 12px/1.3 'IBM Plex Sans', sans-serif; color: #9DA0A1; margin-top: auto; }
.v2c-reviews-link { display: inline-block; margin-top: 28px; font: 700 14px/1 'IBM Plex Sans', sans-serif; color: #FF8A1E; text-decoration: none; }
.v2c-reviews-link:hover { color: #fff; }
@media (max-width: 860px) {
  .v2c-reviews-band { padding: 28px 22px; }
  .v2c-reviews-head { grid-template-columns: 1fr; gap: 24px; }
  .v2c-reviews-score {
    padding-right: 0; border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.1); padding-bottom: 22px;
  }
  .v2c-reviews-quotes { grid-template-columns: 1fr; }
}
.v2c-badge { display: inline-block; background: #F5F2EC; border: 1px solid #D9D6CF; border-radius: 4px; padding: 6px 12px; font: 600 11px/1 'IBM Plex Sans', sans-serif; color: #1B1D1E; letter-spacing: 1.5px; margin-bottom: 20px; }
.v2c-compare-table { border: 1px solid #D9D6CF; border-radius: 8px; overflow: hidden; margin-bottom: 24px; }
.v2c-compare-head { display: grid; grid-template-columns: 1.5fr 1fr 1fr; background: #1B1D1E; color: #9DA0A1; font: 600 11px/1 'IBM Plex Sans', sans-serif; letter-spacing: .5px; }
.v2c-compare-hcell { padding: 12px 16px; }
.v2c-compare-hcell + .v2c-compare-hcell { border-left: 1px solid rgba(255,255,255,.08); }
.v2c-compare-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; font: 600 13px 'IBM Plex Sans', sans-serif; border-top: 1px solid #D9D6CF; }
.v2c-compare-cell { padding: 12px 16px; color: #1B1D1E; }
.v2c-compare-cell + .v2c-compare-cell { border-left: 1px solid #D9D6CF; }
.v2c-compare-yes { color: #2F6B45; }
.v2c-compare-no { color: #B0403B; }

.v2c-step { margin-bottom: 22px; }
.v2c-step-label { font: 600 11px/1 'IBM Plex Sans', sans-serif; letter-spacing: 2px; color: #5B5E5F; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; text-transform: uppercase; }
.v2c-step-num { background: #1B1D1E; color: #FF7500; font: 700 10px/1 'IBM Plex Sans', sans-serif; padding: 4px 7px; border-radius: 4px; }
.v2c-price-display { margin-bottom: 24px; }
.v2c-price-main { font: 700 32px/1 'IBM Plex Sans', sans-serif; color: #1B1D1E; }
.v2c-price-unit { font-size: 15px; font-weight: 600; color: #9DA0A1; letter-spacing: .5px; }
.v2c-price-sub { font: 500 13px/1.4 'IBM Plex Sans', sans-serif; color: #5B5E5F; margin-top: 4px; display: block; }
.v2c-price-save { color: #2F6B45; font-weight: 700; }

.v2c-order-card { background: #1B1D1E; border-radius: 12px; padding: 24px; margin-bottom: 20px; }
.v2c-order-title { font: 600 11px/1 'IBM Plex Sans', sans-serif; letter-spacing: 2px; color: #FF8A1E; margin-bottom: 16px; }
.v2c-order-lines { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.v2c-order-line { display: flex; justify-content: space-between; align-items: center; }
.v2c-order-line-label { font: 500 14px 'IBM Plex Sans', sans-serif; color: #CBCDCE; }
.v2c-order-line-price { font: 700 14px 'IBM Plex Sans', sans-serif; color: #fff; }
.v2c-order-divider { border: none; border-top: 1px solid rgba(255,255,255,.12); margin: 4px 0; }
.v2c-order-total-row { display: flex; justify-content: space-between; align-items: center; }
.v2c-order-total-label { font: 700 14px 'IBM Plex Sans', sans-serif; color: #fff; }
.v2c-order-total-price { font: 700 20px 'IBM Plex Sans', sans-serif; color: #FF7500; }
.v2c-add-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; background: #FF7500; color: #1B1D1E;
  font: 700 17px/1 'IBM Plex Sans', sans-serif;
  padding: 20px; border-radius: 8px; border: none;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 8px 24px rgba(255,117,0,.28);
  transition: background .18s ease, transform .15s ease;
  margin-bottom: 10px;
}
.v2c-add-btn:hover { background: #FF8A1E; color: #1B1D1E; transform: translateY(-1px); }
.v2c-add-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.v2c-secondary-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; background: transparent;
  border: 1.5px solid #D9D6CF; color: #1B1D1E;
  font: 700 15px/1 'IBM Plex Sans', sans-serif;
  padding: 16px; border-radius: 8px; cursor: pointer;
  text-decoration: none; transition: border-color .15s ease, background .15s ease;
  margin-bottom: 12px;
}
.v2c-secondary-btn:hover { border-color: #1B1D1E; background: #F5F2EC; color: #1B1D1E; }

.v2c-compat-note { font: 400 13.5px/1.6 'IBM Plex Sans', sans-serif; color: #5B5E5F; margin: 0 0 8px; }

.v2c-delivery-note { font: 500 13px/1.5 'IBM Plex Sans', sans-serif; color: #66696A; background: #F5F2EC; border: 1px solid #D9D6CF; border-radius: 8px; padding: 12px 15px; margin: 14px 0 0; }
.v2c-delivery-note a { color: #BD4600; font-weight: 700; text-decoration: none; }
.v2c-delivery-note a:hover { color: #1B1D1E; }
.v2c-delivery-note.is-qualified { background: rgba(47,107,69,.08); border-color: rgba(47,107,69,.3); color: #2F6B45; font-weight: 600; }
.v2c-compat-note a { color: #1B1D1E; font-weight: 600; }
.v2c-ship-lines { display: flex; flex-direction: column; gap: 6px; font: 500 13px/1.4 'IBM Plex Sans', sans-serif; color: #9DA0A1; margin-top: 14px; }
.v2c-ship-lines span { display: flex; align-items: center; gap: 7px; }

/* Two post options (post page) */
.v2post { margin-top: 40px; }
.v2post-head { max-width: 680px; margin: 0 0 26px; }
.v2post-h2 { font: 700 40px/1.02 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #1B1D1E; margin: 8px 0 14px; }
.v2post-lead { font: 400 15.5px/1.65 'IBM Plex Sans', sans-serif; color: #3C3E3F; margin: 0; }
.v2post-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 22px; gap: 22px; }
.v2post-card { border: 1px solid #D9D6CF; border-radius: 12px; padding: 30px 32px; background: #fff; display: flex; flex-direction: column; }
.v2post-card-new { border-color: #FFD0A3; background: #FFFaF4; }
.v2post-badge { align-self: flex-start; font: 600 10px/1 'IBM Plex Sans', sans-serif; letter-spacing: 2px; padding: 6px 11px; border-radius: 4px; background: #FF7500; color: #1B1D1E; margin-bottom: 16px; }
.v2post-badge-alt { background: #1B1D1E; color: #FF8A1E; }
.v2post-card-h3 { font: 700 30px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #1B1D1E; margin: 0 0 8px; }
.v2post-tagline { font: 700 15px/1.3 'IBM Plex Sans', sans-serif; color: #BD4600; margin: 0 0 12px; }
.v2post-card:not(.v2post-card-new) .v2post-tagline { color: #66696A; }
.v2post-body { font: 400 14px/1.6 'IBM Plex Sans', sans-serif; color: #3C3E3F; margin: 0 0 16px; }
.v2post-list { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.v2post-list li { position: relative; padding-left: 22px; font: 500 13.5px/1.4 'IBM Plex Sans', sans-serif; color: #202223; }
.v2post-list li::before { content: '✓'; position: absolute; left: 0; color: #2F6B45; font-weight: 700; }
.v2post-bestfor { margin-top: auto; padding-top: 16px; border-top: 1px solid #D9D6CF; font: 600 12.5px/1.4 'IBM Plex Sans', sans-serif; color: #66696A; }
.v2post-card-new .v2post-bestfor { border-top-color: #F3DFC8; }
@media (max-width: 860px) { .v2post-grid { grid-template-columns: 1fr; } }

/* Fence Posts hub cards */
.v2fp-card { display: flex; flex-direction: column; border: 1px solid #D9D6CF; border-radius: 12px; overflow: hidden; background: #fff; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.v2fp-card:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(27,29,30,.1); border-color: #B3AEA4; }
.v2fp-card.v2post-card-new { border-color: #FFD0A3; }
.v2fp-card-img { position: relative; height: 240px; background: #1B1D1E; }
.v2fp-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v2fp-card-img .v2post-badge { position: absolute; top: 16px; left: 16px; margin: 0; }
.v2fp-card-body { padding: 26px 30px 28px; display: flex; flex-direction: column; flex: 1 1; }
.v2fp-card-foot { margin-top: auto; padding-top: 16px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #D9D6CF; }
.v2fp-card-price { font: 700 14px/1 'IBM Plex Sans', sans-serif; color: #1B1D1E; }
.v2fp-card-action { font: 700 13.5px/1 'IBM Plex Sans', sans-serif; color: #BD4600; }
.v2fp-card:hover .v2fp-card-action { color: #FF7500; }

/* Wire-fencing innovation (post page) */
.v2wire { margin-top: 40px; background: linear-gradient(135deg, #0B1B29, #123044); border-radius: 12px; padding: 48px 52px; }
.v2wire-intro { max-width: 720px; margin-bottom: 32px; }
.v2wire-h2 { font: 700 46px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #fff; margin: 8px 0 16px; }
.v2wire-lead { font: 400 15.5px/1.7 'IBM Plex Sans', sans-serif; color: #CFD1D2; margin: 0; }
.v2wire-compare { display: grid; grid-template-columns: 1fr auto 1fr; grid-gap: 24px; gap: 24px; align-items: center; }
.v2wire-card { border-radius: 12px; padding: 30px 30px 28px; }
.v2wire-card-old { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.v2wire-card-new { background: rgba(255,117,0,.1); border: 1px solid rgba(255,117,0,.45); }
.v2wire-tag { font: 600 11px/1 'IBM Plex Sans', sans-serif; letter-spacing: 2px; display: block; margin-bottom: 14px; }
.v2wire-card-old .v2wire-tag { color: #9DA0A1; }
.v2wire-card-new .v2wire-tag { color: #FF8A1E; }
.v2wire-big { font: 700 72px/.9 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #fff; }
.v2wire-card-new .v2wire-big { color: #FF8A1E; }
.v2wire-big-label { font: 600 12px/1 'IBM Plex Sans', sans-serif; letter-spacing: 1.5px; color: #B4B7B8; text-transform: uppercase; margin: 4px 0 16px; }
.v2wire-body { font: 400 14px/1.6 'IBM Plex Sans', sans-serif; color: #CBCDCE; margin: 0; }
.v2wire-arrow { font-size: 34px; color: #FF7500; font-weight: 700; }
.v2wire-benefits { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 12px 28px; gap: 12px 28px; margin-top: 30px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.1); }
.v2wire-benefit { display: flex; align-items: center; gap: 10px; font: 500 14px/1.4 'IBM Plex Sans', sans-serif; color: #EFEDE9; }
.v2wire-check { color: #4FBF77; font-weight: 700; flex: none; }
@media (max-width: 860px) {
  .v2wire { padding: 34px 22px; }
  .v2wire-compare { grid-template-columns: 1fr; }
  .v2wire-arrow { transform: rotate(90deg); text-align: center; }
  .v2wire-benefits { grid-template-columns: 1fr; }
}

.v2c-bottom { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 22px; gap: 22px; margin-top: 48px; }
.v2c-bottom-card { border: 1px solid #D9D6CF; border-radius: 12px; padding: 28px; }
.v2c-bottom-card-title { font: 700 28px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #1B1D1E; margin: 0 0 14px; }
.v2c-compat-row { display: flex; gap: 10px; margin-bottom: 10px; align-items: flex-start; }
.v2c-compat-mark { font-weight: 700; font-size: 15px; flex: none; width: 20px; }
.v2c-compat-mark-yes { color: #2F6B45; }
.v2c-compat-mark-no { color: #B0403B; }
.v2c-compat-mark-maybe { color: #A9ACAD; }
.v2c-compat-text { font: 500 14px/1.4 'IBM Plex Sans', sans-serif; color: #3C3E3F; }

.v2c-faq-item { border-bottom: 1px solid #D9D6CF; }
.v2c-faq-item summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; cursor: pointer; list-style: none; font: 700 14.5px/1.4 'IBM Plex Sans', sans-serif; color: #1B1D1E; transition: color .15s ease; }
.v2c-faq-item summary::-webkit-details-marker { display: none; }
.v2c-faq-item summary:hover { color: #FF7500; }
.v2c-faq-item p { font: 400 14px/1.65 'IBM Plex Sans', sans-serif; color: #5B5E5F; padding-bottom: 16px; margin: 0; }

.v2c-app-band { background: linear-gradient(120deg, #1B1D1E, #202223); padding: 48px 52px; margin-top: 48px; display: grid; grid-template-columns: 1.1fr 1fr; grid-gap: 32px; gap: 32px; align-items: center; border-radius: 12px; }
.v2c-app-body h3 { font: 700 36px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #fff; margin: 0 0 12px; }
.v2c-app-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.v2c-app-tag { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 7px 14px; font: 600 12px/1 'IBM Plex Sans', sans-serif; color: #CBCDCE; }
.v2c-app-photo { border-radius: 12px; overflow: hidden; height: 200px; }
.v2c-app-photo img { width: 100%; height: 100%; object-fit: cover; }
/* Studio (white-bg, portrait) product shots: show the whole part on a clean
   backdrop instead of cropping to a slice. */
.v2c-app-photo--studio { background: #F5F2EC; }
.v2c-app-photo--studio img { object-fit: contain; padding: 14px; }

/* --- Picket configurator additions --- */
.v2c-length-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; gap: 8px; }
.v2c-length-btn { background: #fff; border: 1.5px solid #D9D6CF; border-radius: 8px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; transition: all .18s ease; text-align: center; }
.v2c-length-btn:hover { border-color: #B3AEA4; }
.v2c-length-btn.is-active { border-color: #FF7500; background: #FFF3E8; box-shadow: inset 0 0 0 1px #FF7500; }
.v2c-length-btn strong { font: 700 14px/1 'IBM Plex Sans', sans-serif; color: #1B1D1E; }
.v2c-length-btn small { font: 600 12px/1 'IBM Plex Sans', sans-serif; color: #66696A; }
.v2c-length-btn.is-active small { color: #BD4600; }

.v2c-finish-row { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 8px; gap: 8px; }
.v2c-finish-btn { background: #fff; border: 1.5px solid #D9D6CF; border-radius: 8px; padding: 13px 12px; font: 700 14px/1 'IBM Plex Sans', sans-serif; color: #1B1D1E; cursor: pointer; transition: all .18s ease; }
.v2c-finish-btn:hover { border-color: #B3AEA4; }
.v2c-finish-btn.is-active { border-color: #FF7500; background: #FFF3E8; box-shadow: inset 0 0 0 1px #FF7500; color: #1B1D1E; }

.v2c-qty-wrap { display: flex; align-items: stretch; border: 1.5px solid #D9D6CF; border-radius: 8px; overflow: hidden; width: fit-content; }
/* 44px minimum on the steppers and the field: this is a primary buy control and
   most orders come from a phone. */
.v2c-qty-btn { width: 44px; min-height: 44px; background: #F5F2EC; border: none; font: 700 20px/1 'IBM Plex Sans', sans-serif; color: #1B1D1E; cursor: pointer; }
.v2c-qty-btn:hover { background: #EFEDE9; }
.v2c-qty-input { width: 90px; min-height: 44px; border: none; text-align: center; font: 700 16px/1 'IBM Plex Sans', sans-serif; color: #1B1D1E; background: #fff; padding: 0 10px; }
.v2c-qty-input::-webkit-outer-spin-button, .v2c-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.v2c-qty-input { -moz-appearance: textfield; }

.v2c-option-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 8px; gap: 8px; }
.v2c-option-card { background: #fff; border: 1.5px solid #D9D6CF; border-radius: 8px; padding: 12px 14px; cursor: pointer; text-align: left; transition: all .18s ease; display: flex; flex-direction: column; gap: 6px; }
.v2c-option-card:hover:not(:disabled) { border-color: #B3AEA4; }
.v2c-option-card.is-active { border-color: #FF7500; background: #FFF3E8; box-shadow: inset 0 0 0 1px #FF7500; }
.v2c-option-card.is-out { opacity: .55; cursor: not-allowed; background: #F5F2EC; }
.v2c-option-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.v2c-option-name { font: 700 14px/1.25 'IBM Plex Sans', sans-serif; color: #1B1D1E; }
.v2c-option-desc { font: 400 12.5px/1.5 'IBM Plex Sans', sans-serif; color: #5B5E5F; }
.v2c-option-price { font: 700 13px/1 'IBM Plex Sans', sans-serif; color: #BD4600; }
.v2c-option-stock { font: 600 10.5px/1 'IBM Plex Sans', sans-serif; letter-spacing: 1px; }
.v2c-option-stock.is-in { color: #2F6B45; }
.v2c-option-stock.is-out { color: #B0403B; }
.v2c-option-stock.is-preorder { color: #BD4600; }
.v2c-option-helper { font: 400 12.5px/1.55 'IBM Plex Sans', sans-serif; color: #5B5E5F; margin: 10px 0 0; }
.v2c-option-note { font: 400 11.5px/1.5 'IBM Plex Sans', sans-serif; color: #9DA0A1; margin: 6px 0 0; font-style: italic; }

/* Spec reinforcement sitting directly above the pack grid — makes clear which
   Australian-made angle (Standard 2.5 mm or Heavy Duty 3.0 mm) the quantity
   prices shown apply to. */
.v2c-premium-note { font: 500 12.5px/1.5 'IBM Plex Sans', sans-serif; color: #66696A; background: #FFF3E8; border: 1px solid #F5DCC2; border-left: 3px solid #FF7500; border-radius: 8px; padding: 9px 12px; margin: 0 0 12px; }
.v2c-premium-note strong { color: #1B1D1E; font-weight: 700; }

/* Pre-order notice — shown in the buy panel when the pre-order spec (2.5 mm
   supported / 3.0 mm flat) is selected. */
.v2c-preorder-notice {
  background: #FFF3E8; border: 1px solid #F5DCC2; border-left: 3px solid #FF7500;
  border-radius: 8px; padding: 12px 14px; margin: 0 0 12px;
}
.v2c-preorder-notice-title { font: 700 12px/1.2 'IBM Plex Sans', sans-serif; letter-spacing: 1px; color: #BD4600; margin-bottom: 6px; }
.v2c-preorder-notice-body { font: 400 13px/1.55 'IBM Plex Sans', sans-serif; color: #5B5E5F; margin: 0; }

/* Unavailable notice — retained styling; shown only if a support angle is ever
   taken offline (none currently unavailable). */
.v2c-unavailable-notice {
  background: #FBECEC; border: 1px solid #F0CFCE; border-left: 3px solid #B0403B;
  border-radius: 8px; padding: 12px 14px; margin: 0 0 12px;
}
.v2c-unavailable-notice-title { font: 700 12px/1.2 'IBM Plex Sans', sans-serif; letter-spacing: 1px; color: #B0403B; margin-bottom: 6px; }
.v2c-unavailable-notice-body { font: 400 13px/1.55 'IBM Plex Sans', sans-serif; color: #5B5E5F; margin: 0; }

.v2c-pack-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 8px; gap: 8px; margin-bottom: 12px; }
.v2c-pack-btn { position: relative; background: #fff; border: 1.5px solid #D9D6CF; border-radius: 8px; padding: 14px 8px 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; transition: all .18s ease; text-align: center; }
.v2c-pack-btn:hover { border-color: #B3AEA4; }
.v2c-pack-btn.is-active { border-color: #FF7500; background: #FFF3E8; box-shadow: inset 0 0 0 1px #FF7500; }
.v2c-pack-btn strong { font: 700 13px/1 'IBM Plex Sans', sans-serif; color: #1B1D1E; }
.v2c-pack-btn-total { font: 800 15px/1 'IBM Plex Sans', sans-serif; color: #1B1D1E; margin-top: 2px; }
.v2c-pack-btn small { font: 600 11px/1.4 'IBM Plex Sans', sans-serif; color: #66696A; }
.v2c-pack-btn small em { font-style: normal; color: #BD4600; font-weight: 700; }
.v2c-pack-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 2px 9px; border-radius: 999px; background: #FF7500; color: #1B1D1E; font: 800 9px/1.6 'IBM Plex Sans', sans-serif; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap; }
.v2c-pack-badge-value { background: #202223; color: #FF8A1E; }
.v2c-pack-custom { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.v2c-pack-custom > span { font: 600 12.5px/1 'IBM Plex Sans', sans-serif; color: #66696A; }

.v2c-addon-row { display: flex; gap: 12px; align-items: flex-start; background: #F5F2EC; border: 1.5px solid #D9D6CF; border-radius: 8px; padding: 14px 16px; cursor: pointer; transition: border-color .18s ease; }
.v2c-addon-row:hover { border-color: #B3AEA4; }
.v2c-addon-row input[type=checkbox] { margin-top: 3px; width: 16px; height: 16px; accent-color: #FF7500; }
.v2c-addon-title { font: 700 14px/1.2 'IBM Plex Sans', sans-serif; color: #1B1D1E; margin-bottom: 3px; }
.v2c-addon-body { font: 400 13px/1.5 'IBM Plex Sans', sans-serif; color: #5B5E5F; }

/* --- Trade / Partner page (4e) --- */
.v2t-pulse-dot { display: inline-flex; align-items: center; gap: 10px; background: rgba(46,125,70,.16); border: 1px solid rgba(46,125,70,.4); border-radius: 999px; padding: 9px 16px; margin-top: 24px; }
.v2t-pulse-dot-circle { width: 9px; height: 9px; border-radius: 50%; background: #4CC46E; animation: v2PulseDot 2.2s ease-in-out infinite; }
.v2t-pulse-text { font: 600 13px/1 'DM Sans', sans-serif; color: #B7E4C4; }

.v2t-creds { background: #08141F; padding: 0 52px; }
.v2t-creds-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid rgba(255,255,255,.08); border-right: 1px solid rgba(255,255,255,.08); }
.v2t-cred-item { padding: 30px 24px; border-right: 1px solid rgba(255,255,255,.08); }
.v2t-cred-item:last-child { border-right: none; }
.v2t-cred-title { font: 400 42px/1 'Bebas Neue', sans-serif; letter-spacing: .5px; color: #F47A0F; }
.v2t-cred-desc { font: 500 12.5px/1.45 'DM Sans', sans-serif; color: #8A99A6; margin-top: 8px; }

.v2t-paths-center { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.v2t-paths-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; gap: 20px; }
.v2t-path-card { border: 1px solid #E7E4DD; border-radius: 12px; padding: 30px; position: relative; }
.v2t-path-card.is-featured { border: 2px solid #F47A0F; background: #FFF8F1; }
.v2t-path-badge { position: absolute; top: -11px; left: 24px; background: #F47A0F; color: #0B1B29; font: 700 10px/1 'DM Sans', sans-serif; letter-spacing: .06em; padding: 5px 10px; border-radius: 3px; }
.v2t-path-num { font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: 1.5px; color: #B06A2A; margin-bottom: 14px; }
.v2t-path-h3 { font: 400 30px/1 'Bebas Neue', sans-serif; letter-spacing: .5px; color: #0B1B29; margin: 0 0 10px; }
.v2t-path-body { font: 400 14px/1.55 'DM Sans', sans-serif; color: #5E6B76; margin: 0 0 18px; }
.v2t-path-features { display: flex; flex-direction: column; gap: 9px; }
.v2t-path-feature { display: flex; gap: 9px; font: 500 13.5px 'DM Sans', sans-serif; color: #39434C; }
.v2t-path-feature-tick { color: #2E7D46; font-weight: 700; }

.v2t-form-section { background: #F6F4F0; padding: 56px 52px 72px; }
.v2t-form-grid { display: grid; grid-template-columns: 1.35fr 1fr; grid-gap: 36px; gap: 36px; align-items: start; }
.v2t-form-card { background: #fff; border: 1px solid #E7E4DD; border-radius: 12px; padding: 36px; }
.v2t-form-title { font: 400 40px/1 'Bebas Neue', sans-serif; letter-spacing: .5px; color: #0B1B29; margin: 0 0 6px; }
.v2t-form-intro { font: 400 14px/1.55 'DM Sans', sans-serif; color: #5E6B76; margin: 0 0 24px; }
.v2t-field-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 14px; gap: 14px; }
.v2t-field { display: flex; flex-direction: column; gap: 6px; }
.v2t-field label { font: 600 12px 'DM Sans', sans-serif; color: #0B1B29; }
.v2t-field input, .v2t-field select, .v2t-field textarea { border: 1px solid #DBD7CE; border-radius: 8px; background: #FCFBF9; padding: 0 14px; height: 48px; font: 500 14px 'DM Sans', sans-serif; color: #0B1B29; width: 100%; box-sizing: border-box; transition: border-color .15s ease; }
.v2t-field input:focus, .v2t-field select:focus, .v2t-field textarea:focus { outline: none; border-color: #0B1B29; }
.v2t-field textarea { height: 96px; padding: 12px 14px; resize: vertical; }
.v2t-field-full { grid-column: 1 / -1; }
.v2t-submit { display: block; width: 100%; text-align: center; background: #F47A0F; color: #0B1B29; font: 700 16px/1 'DM Sans', sans-serif; padding: 19px; border-radius: 8px; border: none; cursor: pointer; margin-top: 18px; box-shadow: 0 8px 24px rgba(244,122,15,.28); transition: background .18s ease; text-decoration: none; }
.v2t-submit:hover { background: #F7963F; }
.v2t-submit:disabled { opacity: .55; cursor: not-allowed; }

.v2t-sidebar { display: flex; flex-direction: column; gap: 18px; }
.v2t-contact-card { background: #0B1B29; border-radius: 12px; padding: 30px; }
.v2t-contact-kicker { color: #F7A24E; font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: 2.5px; margin-bottom: 16px; display: block; }
.v2t-contact-rows { display: flex; flex-direction: column; gap: 16px; }
.v2t-contact-row-label { font: 500 12px 'DM Sans', sans-serif; color: #7E90A0; margin-bottom: 3px; }
.v2t-contact-row-value { font: 600 19px 'DM Sans', sans-serif; color: #fff; text-decoration: none; display: block; }
.v2t-contact-row-value.is-sm { font-size: 16px; }
.v2t-contact-row-addr { font: 500 15px/1.5 'DM Sans', sans-serif; color: #C4D0DA; }
.v2t-why-card { background: #fff; border: 1px solid #E7E4DD; border-radius: 12px; padding: 30px; }
.v2t-why-kicker { color: #B06A2A; font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: 2.5px; margin-bottom: 14px; display: block; }
.v2t-why-rows { display: flex; flex-direction: column; gap: 13px; }
.v2t-why-row { display: flex; gap: 10px; font: 500 14px/1.4 'DM Sans', sans-serif; color: #39434C; }
.v2t-why-arrow { color: #F47A0F; font-weight: 700; }

.v2t-photo-band { height: 230px; display: grid; grid-template-columns: repeat(4, 1fr); }
.v2t-photo-band > div { overflow: hidden; position: relative; }
.v2t-photo-band img { width: 100%; height: 100%; object-fit: cover; }
.v2t-photo-text { display: flex; align-items: center; padding: 28px; background: #0B1B29; }
.v2t-photo-text-kicker { color: #F7A24E; font: 600 10px/1 'JetBrains Mono', monospace; letter-spacing: 2px; margin-bottom: 10px; display: block; }
.v2t-photo-text-body { font: 400 26px/1.05 'Bebas Neue', sans-serif; letter-spacing: .5px; color: #fff; }

.v2t-status { margin-top: 16px; padding: 14px 18px; border-radius: 8px; font: 500 14px 'DM Sans', sans-serif; }
.v2t-status-ok { background: rgba(46,125,70,.12); color: #2E7D46; border: 1px solid rgba(46,125,70,.3); }
.v2t-status-err { background: rgba(176,64,59,.1); color: #B0403B; border: 1px solid rgba(176,64,59,.3); }

/* --- Contact page --- */
.v2ct-email-card {
  background: linear-gradient(135deg, #0B1B29, #123044);
  border-radius: 12px; padding: 44px 48px; text-align: center;
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center;
}
.v2ct-email-icon {
  width: 60px; height: 60px; border-radius: 12px;
  background: #F47A0F; color: #fff;
  display: grid; place-items: center; margin-bottom: 20px;
}
.v2ct-email-card .v2ct-line-tag { color: #F7A24E; }
.v2ct-email-h2 { font: 400 40px/1 'Bebas Neue', sans-serif; letter-spacing: .5px; color: #fff; margin: 6px 0 14px; }
.v2ct-email-body { font: 400 15.5px/1.65 'DM Sans', sans-serif; color: #D5DEE6; margin: 0 0 26px; max-width: 560px; }
.v2ct-email-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: #F47A0F; color: #0B1B29;
  font: 700 16px/1 'DM Sans', sans-serif;
  padding: 16px 26px; border-radius: 8px; text-decoration: none;
  transition: background .18s ease, transform .18s ease;
  word-break: break-word;
}
.v2ct-email-btn:hover { background: #F7963F; transform: translateY(-1px); }
.v2ct-email-note { font: 500 13px/1.5 'DM Sans', sans-serif; color: #AEBCC9; margin-top: 16px; }

.v2ct-phone-head { text-align: center; max-width: 620px; margin: 0 auto 28px; }
.v2ct-phone-intro { font: 400 14.5px/1.6 'DM Sans', sans-serif; color: #4C5A66; margin: 10px 0 0; }

.v2ct-lines { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 24px; gap: 24px; max-width: 860px; margin: 0 auto; }
.v2ct-line-card {
  border: 1px solid #E7E4DD; border-radius: 12px; padding: 34px 36px;
  background: #fff; display: flex; flex-direction: column;
}
.v2ct-line-card-accent { border-color: #F7D2A6; background: #FFFaF4; }
.v2ct-line-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: #0B1B29; color: #F47A0F;
  display: grid; place-items: center; margin-bottom: 18px;
}
.v2ct-line-card-accent .v2ct-line-icon { background: #F47A0F; color: #fff; }
.v2ct-line-tag { font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: 2px; color: #B06A2A; margin-bottom: 10px; }
.v2ct-line-h2 { font: 400 30px/1 'Bebas Neue', sans-serif; letter-spacing: .5px; color: #0B1B29; margin: 0 0 12px; }
.v2ct-line-body { font: 400 14.5px/1.6 'DM Sans', sans-serif; color: #3A4550; margin: 0 0 22px; }
.v2ct-line-phone {
  font: 400 40px/1 'Bebas Neue', sans-serif; letter-spacing: 1px;
  color: #0B1B29; text-decoration: none; margin-top: auto;
  transition: color .18s ease;
}
.v2ct-line-phone:hover { color: #F47A0F; }
.v2ct-line-note { font: 500 12.5px/1.4 'DM Sans', sans-serif; color: #5E6B76; margin-top: 8px; }
.v2ct-line-inline { color: #B06A2A; font-weight: 700; text-decoration: none; }
.v2ct-line-inline:hover { color: #0B1B29; }

.v2ct-details { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 22px; gap: 22px; }
.v2ct-detail { background: #fff; border: 1px solid #E7E4DD; border-radius: 12px; padding: 26px 26px 24px; }
.v2ct-detail-icon {
  width: 40px; height: 40px; border-radius: 8px;
  background: #F6F4F0; color: #0B1B29;
  display: grid; place-items: center; margin-bottom: 16px;
}
.v2ct-detail-label { font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: 1.5px; color: #5E6B76; margin-bottom: 8px; }
.v2ct-detail-value { font: 700 17px/1.3 'DM Sans', sans-serif; color: #0B1B29; text-decoration: none; display: block; word-break: break-word; }
.v2ct-detail-value-sm { font-size: 15px; }
a.v2ct-detail-value:hover { color: #F47A0F; }
.v2ct-detail-note { font: 400 13px/1.5 'DM Sans', sans-serif; color: #4C5A66; margin: 10px 0 0; }

.v2ct-help-head { text-align: center; max-width: 620px; margin: 0 auto 36px; }
.v2ct-help-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; gap: 20px; max-width: 900px; margin: 0 auto; }
.v2ct-help-card { border: 1px solid #E7E4DD; border-radius: 12px; padding: 26px 28px; }
.v2ct-help-q { font: 700 16px/1.35 'DM Sans', sans-serif; color: #0B1B29; margin: 0 0 8px; }
.v2ct-help-a { font: 400 14px/1.6 'DM Sans', sans-serif; color: #3A4550; margin: 0 0 14px; }
.v2ct-help-link { font: 700 13.5px/1 'DM Sans', sans-serif; color: #B06A2A; text-decoration: none; }
.v2ct-help-link:hover { color: #0B1B29; }

@media (max-width: 860px) {
  .v2ct-lines { grid-template-columns: 1fr; }
  .v2ct-details { grid-template-columns: 1fr; }
  .v2ct-help-grid { grid-template-columns: 1fr; }
}

/* --- Reviews page --- */
.v2rev-hero-score { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 10px 20px; }
.v2rev-hero-score .st-star-row { display: inline-flex; }
.v2rev-hero-score strong { font: 800 16px/1 'DM Sans', sans-serif; color: #fff; }
.v2rev-hero-score span { font: 500 13px/1 'DM Sans', sans-serif; color: #AEBCC9; }
.v2rev-head { max-width: 620px; margin: 0 0 30px; }
.v2rev-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 20px; gap: 20px; }
.v2rev-card { border: 1px solid #E7E4DD; border-radius: 12px; padding: 26px; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.v2rev-card-stars { color: #F47A0F; font-size: 15px; letter-spacing: 2px; line-height: 1; }
.v2rev-card-mark { font: 400 40px/.5 'Bebas Neue', sans-serif; color: #E1DDD4; }
.v2rev-card-text { font: 500 15px/1.55 'DM Sans', sans-serif; color: #2A343E; margin: 0; }
.v2rev-card-author { font: 600 13px/1.4 'DM Sans', sans-serif; color: #5E6B76; margin-top: auto; }
.v2rev-card-verified { color: #2E7D46; }
.v2rev-leave-grid { display: grid; grid-template-columns: 1fr 1.1fr; grid-gap: 28px; gap: 28px; align-items: start; }
.v2rev-leave-card, .v2rev-form-card { background: #fff; border: 1px solid #E7E4DD; border-radius: 12px; padding: 34px 36px; }
.v2rev-leave-h2 { font: 400 32px/1 'Bebas Neue', sans-serif; letter-spacing: .5px; color: #0B1B29; margin: 6px 0 12px; }
.v2rev-leave-body { font: 400 14.5px/1.6 'DM Sans', sans-serif; color: #3A4550; margin: 0 0 22px; }
.v2rev-actions { display: flex; flex-direction: column; gap: 10px; }
.v2rev-actions .v2p-btn-orange { display: inline-flex; align-items: center; gap: 8px; justify-content: center; }
.v2rev-btn-line { display: inline-flex; align-items: center; gap: 10px; justify-content: center; border: 1.5px solid #E7E4DD; border-radius: 8px; padding: 14px 18px; font: 700 14px/1 'DM Sans', sans-serif; color: #0B1B29; text-decoration: none; transition: border-color .18s ease; }
.v2rev-btn-line:hover { border-color: #0B1B29; }
.v2rev-callout { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 14px 16px; background: #FFF4E7; border: 1px solid #F7D2A6; border-radius: 8px; font: 600 13px/1.4 'DM Sans', sans-serif; color: #B06A2A; }
.v2rev-callout svg { color: #F47A0F; flex: none; }
.v2rev-permission { display: flex; gap: 10px; align-items: flex-start; margin: 4px 0 18px; font: 400 13px/1.5 'DM Sans', sans-serif; color: #4C5A66; cursor: pointer; }
.v2rev-permission input { margin-top: 3px; width: 16px; height: 16px; accent-color: #F47A0F; flex: none; }
@media (max-width: 860px) {
  .v2rev-grid { grid-template-columns: 1fr; }
  .v2rev-leave-grid { grid-template-columns: 1fr; }
}

/* --- International shipping page --- */
.v2is-two-col { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 48px; gap: 48px; align-items: start; }
.v2is-note { display: flex; gap: 10px; align-items: flex-start; background: #F5F2EC; border: 1px solid #D9D6CF; border-radius: 8px; padding: 13px 16px; font: 500 13.5px/1.55 'IBM Plex Sans', sans-serif; color: #5B5E5F; }
.v2is-note svg { flex: none; color: #BD4600; margin-top: 1px; }
.v2is-includes { display: flex; flex-direction: column; gap: 10px; }
.v2is-include-item { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid #D9D6CF; border-radius: 8px; padding: 12px 14px; font: 500 14px/1.5 'IBM Plex Sans', sans-serif; color: #202223; }
.v2is-include-item svg { flex: none; color: #2F6B45; margin-top: 2px; }
.v2is-markets { display: flex; flex-wrap: wrap; gap: 10px; max-width: 900px; margin: 0 auto; }
.v2is-market-chip { display: flex; align-items: center; gap: 8px; background: #F5F2EC; border: 1px solid #D9D6CF; border-radius: 999px; padding: 9px 16px; font: 600 13px/1 'IBM Plex Sans', sans-serif; color: #1B1D1E; }
.v2is-market-chip svg { color: #BD4600; }
.v2is-plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.v2is-plain-list li { display: flex; gap: 10px; align-items: flex-start; font: 400 14px/1.55 'IBM Plex Sans', sans-serif; color: #3C3E3F; }
.v2is-plain-list li svg { flex: none; color: #BD4600; margin-top: 3px; }
.v2is-plain-list li strong { color: #1B1D1E; }

.v2is-country { background: #fff; border: 1px solid #D9D6CF; border-radius: 12px; padding: 30px 32px; }
.v2is-country-label { display: flex; align-items: center; gap: 8px; font: 700 13px/1 'IBM Plex Sans', sans-serif; color: #1B1D1E; margin-bottom: 12px; }
.v2is-country-select { width: 100%; background: #F5F2EC; border: 1.5px solid #D9D6CF; border-radius: 8px; padding: 13px 14px; font: 600 14px/1 'IBM Plex Sans', sans-serif; color: #1B1D1E; margin-bottom: 20px; }
.v2is-country-info { display: flex; flex-direction: column; gap: 12px; margin-bottom: 22px; }
.v2is-country-info-row { display: flex; gap: 10px; align-items: flex-start; font: 400 13.5px/1.5 'IBM Plex Sans', sans-serif; color: #3C3E3F; }
.v2is-country-info-row svg { flex: none; color: #BD4600; margin-top: 2px; }
.v2is-country-info-row strong { display: block; color: #1B1D1E; font-weight: 700; }
@media (max-width: 860px) {
  .v2is-two-col { grid-template-columns: 1fr; }
}

/* --- International quote page --- */
.v2iq-grid { display: grid; grid-template-columns: 1.3fr 1fr; grid-gap: 28px; gap: 28px; align-items: start; }
.v2iq-form-card { background: #fff; border: 1px solid #D9D6CF; border-radius: 12px; padding: 34px 36px; }
.v2iq-form-h2 { font: 700 32px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #1B1D1E; margin: 6px 0 14px; }
.v2iq-sidebar { display: flex; flex-direction: column; gap: 14px; }
.v2iq-info-card { display: flex; gap: 14px; background: #F5F2EC; border: 1px solid #D9D6CF; border-radius: 12px; padding: 20px 22px; }
.v2iq-info-icon { flex: none; width: 38px; height: 38px; border-radius: 8px; background: #1B1D1E; color: #FF7500; display: grid; place-items: center; }
.v2iq-info-h3 { font: 700 14.5px/1.3 'IBM Plex Sans', sans-serif; color: #1B1D1E; margin: 0 0 6px; }
.v2iq-info-body { font: 400 13px/1.55 'IBM Plex Sans', sans-serif; color: #5B5E5F; margin: 0; }
.v2iq-info-link { display: block; font: 700 14px/1.3 'IBM Plex Sans', sans-serif; color: #BD4600; text-decoration: none; margin-bottom: 4px; }
.v2iq-info-link:hover { color: #1B1D1E; }
@media (max-width: 900px) {
  .v2iq-grid { grid-template-columns: 1fr; }
}

/* --- Bulk packs page --- */
.v2bp-table-block { margin-bottom: 44px; }
.v2bp-table-block:last-child { margin-bottom: 0; }
.v2bp-table-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.v2bp-table-h2 { font: 400 30px/1 'Bebas Neue', sans-serif; letter-spacing: .5px; color: #0B1B29; margin: 0; }
.v2bp-table-link { font: 700 13.5px/1 'DM Sans', sans-serif; color: #B06A2A; text-decoration: none; }
.v2bp-table-link:hover { color: #0B1B29; }
.v2bp-grid { display: grid; grid-template-columns: repeat(6, 1fr); grid-gap: 10px; gap: 10px; }
.v2bp-pack-link { text-decoration: none; }
@media (max-width: 860px) {
  .v2bp-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .v2bp-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- Checkout result pages --- */
.v2ck { min-height: 62vh; display: grid; place-items: center; padding: 64px 24px; }
.v2ck-inner { width: 100%; max-width: 560px; }
.v2ck-card {
  background: #fff; border: 1px solid #D9D6CF; border-radius: 12px;
  padding: 44px 44px 40px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.v2ck-icon { width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 20px; }
.v2ck-icon-ok { background: rgba(47,107,69,.12); color: #2F6B45; }
.v2ck-icon-wait { background: #F5F2EC; color: #66696A; }
.v2ck-icon-warn { background: rgba(176,64,59,.1); color: #B0403B; }
.v2ck-icon-neutral { background: #F5F2EC; color: #9DA0A1; }
.v2ck-h1 { font: 700 44px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #1B1D1E; margin: 6px 0 14px; }
.v2ck-total { font: 700 56px/1 'Barlow Condensed', sans-serif; text-transform: uppercase; color: #1B1D1E; margin: 4px 0 16px; display: flex; align-items: baseline; gap: 8px; justify-content: center; }
.v2ck-total-cur { font: 600 14px/1 'IBM Plex Sans', sans-serif; color: #9DA0A1; letter-spacing: 1px; }
.v2ck-body { font: 400 15px/1.65 'IBM Plex Sans', sans-serif; color: #3C3E3F; margin: 0 0 12px; max-width: 440px; }
.v2ck-body strong { color: #1B1D1E; }
.v2ck-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.v2ck-btn-outline {
  display: inline-block; border: 1.5px solid #B3AEA4; color: #1B1D1E;
  font: 700 15px/1 'IBM Plex Sans', sans-serif; padding: 15px 22px; border-radius: 8px;
  text-decoration: none; transition: border-color .18s ease;
}
.v2ck-btn-outline:hover { border-color: #1B1D1E; }

/* --- About page (4f) --- */
/* min-height, not height: the hero carries an H1, body copy and the founder
   tag, so it has to be able to grow rather than clip. */
.v2a-hero { position: relative; min-height: 420px; overflow: hidden; }
.v2a-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2a-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,27,41,.94) 0%, rgba(11,27,41,.7) 45%, rgba(11,27,41,.25) 100%); }
/* In flow (not absolute) so the copy defines the hero's height and can never
   be clipped; the photo sits behind it. */
.v2a-hero-inner { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 420px; padding: 48px 52px; max-width: 760px; }
.v2a-hero-h1 { font: 400 62px/.98 'Bebas Neue', sans-serif; letter-spacing: 1px; color: #fff; margin: 0 0 14px; }
.v2a-hero-body { font: 400 17px/1.6 'DM Sans', sans-serif; color: #C8D4DE; max-width: 560px; margin: 0; }

/* ── FULL-SCREEN PHOTO VIEWER ──────────────────────────────────────────── */
.st-lightbox {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  background: rgba(7, 16, 26, .93);
  animation: st-lightbox-in .16s ease-out;
}
@keyframes st-lightbox-in { from { opacity: 0; } to { opacity: 1; } }
.st-lightbox-figure { margin: 0; display: flex; flex-direction: column; gap: 14px; max-width: 100%; max-height: 100%; }
/* Whole photo always visible — never cropped. */
.st-lightbox-figure img {
  display: block; margin: 0 auto;
  max-width: min(1200px, 92vw); max-height: 82vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: 4px; background: #fff;
}
.st-lightbox-figure figcaption {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  font: 400 13.5px/1.5 'DM Sans', sans-serif; color: #C8D4DE; text-align: center;
}
.st-lightbox-count { font: 600 11px 'JetBrains Mono', monospace; letter-spacing: 1px; color: #8FA6B2; }
.st-lightbox-close, .st-lightbox-nav {
  position: absolute; display: grid; place-items: center;
  min-width: 44px; min-height: 44px;
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  background: rgba(255,255,255,.08); color: #fff; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.st-lightbox-close:hover, .st-lightbox-nav:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.34); }
.st-lightbox-close { top: 20px; right: 20px; }
.st-lightbox-prev { left: 20px; }
.st-lightbox-next { right: 20px; }

/* Any image that opens the viewer. */
.st-zoomable { cursor: zoom-in; }

/* In-stock / dispatch tag — the positive counterpart to .v2c-preorder-notice,
   deliberately lighter so it reassures without shouting next to the buy button. */
.v2c-stock-tag {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 14px; padding: 12px 14px;
  border: 1px solid #CBE5D3; border-left: 3px solid #2F6B45; border-radius: 8px;
  background: #F1F8F3;
}
.v2c-stock-tag-dot {
  flex: none; width: 8px; height: 8px; margin-top: 5px;
  border-radius: 999px; background: #2F6B45;
}
.v2c-stock-tag-title {
  font: 600 11px/1.3 'IBM Plex Sans', sans-serif; letter-spacing: 1px;
  text-transform: uppercase; color: #2F6B45; margin-bottom: 4px;
}
.v2c-stock-tag-body { font: 400 12.5px/1.55 'IBM Plex Sans', sans-serif; color: #2F6B45; margin: 0; }

/* "Tap to enlarge" affordance on a product gallery. On mobile the thumbnail
   strip sits below the buy panel, so without this the other photos are easy to
   miss — this opens the full-screen viewer straight from the main image. */
.v2c-gallery-expand {
  position: absolute; bottom: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 8px 13px;
  border: 1px solid rgba(27,29,30,.14); border-radius: 999px;
  background: rgba(255,255,255,.94); color: #1B1D1E;
  font: 600 11px/1 'IBM Plex Sans', sans-serif; letter-spacing: .6px; text-transform: uppercase;
  cursor: zoom-in; transition: background .18s ease, border-color .18s ease;
}
.v2c-gallery-expand:hover { background: #fff; border-color: rgba(27,29,30,.3); }
@media (max-width: 640px) {
  .v2c-gallery-expand { min-height: 44px; bottom: 10px; right: 10px; }
}

/* ── TOUCH TARGETS ON THE BUY PATH ─────────────────────────────────────── */
/* Most orders come from a phone. The cart drawer's quantity, remove and close
   controls are 28-32px, which is fine for a mouse but too small for a thumb,
   so they go to 44px on touch-sized screens only — desktop stays compact. */
@media (max-width: 640px) {
  .st-cart-qty-btn, .st-cart-remove { width: 44px; height: 44px; }
  .st-cart-close { padding: 12px; }
  .st-cart-qty { min-width: 32px; font-size: 16px; }
  .st-lightbox { padding: 64px 12px 24px; }
  .st-lightbox-figure img { max-width: 96vw; max-height: 72vh; }
  .st-lightbox-close { top: 14px; right: 14px; }
  .st-lightbox-prev { left: 8px; }
  .st-lightbox-next { right: 8px; }
}

.v2a-hero-people { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; }
.v2a-hero-people span {
  display: flex; flex-direction: column; gap: 2px;
  font: 600 11.5px/1.3 'JetBrains Mono', monospace;
  letter-spacing: .5px; text-transform: uppercase; color: #F47A0F;
}
.v2a-hero-people strong {
  font: 700 14.5px 'DM Sans', sans-serif; letter-spacing: 0;
  text-transform: none; color: #fff;
}

.v2a-story { background: #fff; padding: 72px 52px; }
.v2a-story-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 56px; gap: 56px; align-items: center; }
.v2a-story-h2 { font: 400 46px/1 'Bebas Neue', sans-serif; letter-spacing: .5px; color: #0B1B29; margin: 0 0 20px; }
.v2a-story-p { font: 400 16.5px/1.65 'DM Sans', sans-serif; color: #4C5A66; margin: 0 0 16px; }
.v2a-story-p:last-child { margin-bottom: 0; }
.v2a-photo-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; gap: 12px; }
.v2a-photo-mosaic-wide { grid-column: 1 / -1; border-radius: 12px; overflow: hidden; height: 230px; }
.v2a-photo-mosaic-wide img { width: 100%; height: 100%; object-fit: cover; }
.v2a-photo-mosaic-sm { border-radius: 12px; overflow: hidden; height: 150px; }
.v2a-photo-mosaic-sm img { width: 100%; height: 100%; object-fit: cover; }

.v2a-values { background: #0B1B29; padding: 68px 52px; }
.v2a-values-center { text-align: center; max-width: 640px; margin: 0 auto 40px; }
.v2a-values-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 16px; gap: 16px; }
.v2a-value-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: 26px; }
.v2a-value-num { font: 600 12px/1 'JetBrains Mono', monospace; color: #F47A0F; margin-bottom: 12px; }
.v2a-value-h3 { font: 600 17px 'DM Sans', sans-serif; color: #fff; margin: 0 0 8px; }
.v2a-value-body { font: 400 13.5px/1.55 'DM Sans', sans-serif; color: #AEBCC9; margin: 0; }

.v2a-roadmap { background: #F6F4F0; padding: 68px 52px; }
.v2a-roadmap-grid { display: grid; grid-template-columns: .85fr 1.15fr; grid-gap: 48px; gap: 48px; align-items: center; }
.v2a-roadmap-h2 { font: 400 44px/1 'Bebas Neue', sans-serif; letter-spacing: .5px; color: #0B1B29; margin: 0 0 16px; }
.v2a-roadmap-body { font: 400 16px/1.65 'DM Sans', sans-serif; color: #4C5A66; margin: 0; }
.v2a-roadmap-list { display: flex; flex-direction: column; }
.v2a-roadmap-item { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid #E1DDD4; }
.v2a-roadmap-item:last-child { border-bottom: 1px solid #E1DDD4; }
.v2a-roadmap-era { flex: none; width: 40px; font: 600 13px 'JetBrains Mono', monospace; color: #F47A0F; }
.v2a-roadmap-item-h4 { font: 700 15px 'DM Sans', sans-serif; color: #0B1B29; margin: 0 0 4px; }
.v2a-roadmap-item-p { font: 400 13.5px/1.5 'DM Sans', sans-serif; color: #5E6B76; margin: 0; }

.v2a-cta { background: linear-gradient(120deg, #0B1B29, #123044); padding: 56px 52px; display: flex; align-items: center; gap: 36px; }
.v2a-cta-text { flex: 1 1; }
.v2a-cta-h2 { font: 400 40px/1 'Bebas Neue', sans-serif; letter-spacing: .5px; color: #fff; margin: 0 0 8px; }
.v2a-cta-body { font: 400 15px/1.5 'DM Sans', sans-serif; color: #AEBCC9; margin: 0; }
.v2a-cta-btns { display: flex; gap: 12px; }

/* --- Shipping & Warranty page (4g) --- */
.v2s-shipping { background: #fff; padding: 64px 52px 40px; }
.v2s-cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 18px; gap: 18px; margin-bottom: 18px; }
.v2s-card { border: 1px solid #E7E4DD; border-radius: 12px; padding: 28px; }
.v2s-card-h3 { font: 400 34px/1 'Bebas Neue', sans-serif; color: #0B1B29; margin: 0 0 8px; }
.v2s-card-body { font: 400 14px/1.55 'DM Sans', sans-serif; color: #5E6B76; margin: 0; }
.v2s-info-box { background: #F6F4F0; border: 1px solid #E7E4DD; border-radius: 12px; padding: 20px 24px; display: flex; gap: 14px; align-items: center; }
.v2s-info-icon { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 2px solid #B06A2A; display: grid; place-items: center; font: 700 16px 'JetBrains Mono', monospace; color: #B06A2A; }
.v2s-info-text { font: 400 14px/1.55 'DM Sans', sans-serif; color: #4C5A66; }

.v2s-dispatch { background: #F6F4F0; padding: 48px 52px; }
.v2s-dispatch-grid { display: grid; grid-template-columns: .8fr 1.2fr; grid-gap: 40px; gap: 40px; align-items: center; }
.v2s-dispatch-h2 { font: 400 42px/1 'Bebas Neue', sans-serif; letter-spacing: .5px; color: #0B1B29; margin: 0 0 12px; }
.v2s-dispatch-body { font: 400 15px/1.6 'DM Sans', sans-serif; color: #5E6B76; margin: 0; }
.v2s-dispatch-rows { display: flex; flex-direction: column; gap: 10px; }
.v2s-dispatch-row { background: #fff; border: 1px solid #E7E4DD; border-radius: 8px; padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; }
.v2s-dispatch-item { font: 700 15px 'DM Sans', sans-serif; color: #0B1B29; }
.v2s-dispatch-sub { font: 400 13px 'DM Sans', sans-serif; color: #5E6B76; }
.v2s-dispatch-time { font: 600 13px 'JetBrains Mono', monospace; }
.v2s-dispatch-time-fast { color: #2E7D46; }
.v2s-dispatch-time-slow { color: #B06A2A; }

.v2s-policy { background: #fff; padding: 64px 52px 80px; }
.v2s-policy-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 22px; gap: 22px; }
.v2s-policy-card { border: 1px solid #E7E4DD; border-radius: 12px; padding: 34px; }
.v2s-policy-dot { width: 8px; height: 8px; border-radius: 50%; background: #F47A0F; }
.v2s-policy-tag { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.v2s-policy-tag-text { color: #B06A2A; font: 600 11px/1 'JetBrains Mono', monospace; letter-spacing: 2.5px; }
.v2s-policy-h2 { font: 400 38px/1 'Bebas Neue', sans-serif; letter-spacing: .5px; color: #0B1B29; margin: 0 0 14px; }
.v2s-policy-body { font: 400 15px/1.6 'DM Sans', sans-serif; color: #4C5A66; margin: 0 0 14px; }
.v2s-excl-title { font: 700 12.5px 'DM Sans', sans-serif; color: #0B1B29; margin-bottom: 10px; }
.v2s-excl-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 8px; gap: 8px; }
.v2s-excl-item { background: #F6F4F0; border-radius: 8px; padding: 11px 14px; font: 500 13px 'DM Sans', sans-serif; color: #5E6B76; }
.v2s-raise-band { background: #0B1B29; border-radius: 8px; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 20px; }
.v2s-raise-text { font: 500 13.5px/1.4 'DM Sans', sans-serif; color: #C4D0DA; }
.v2s-raise-btn { flex: none; background: #F47A0F; color: #0B1B29; font: 700 13.5px/1 'DM Sans', sans-serif; padding: 14px 18px; border-radius: 8px; text-decoration: none; transition: background .18s ease; }
.v2s-raise-btn:hover { background: #F7963F; color: #0B1B29; }
.v2s-policy-note { text-align: center; font: 400 12.5px/1.6 'DM Sans', sans-serif; color: #98A4AE; margin-top: 24px; max-width: 760px; margin-left: auto; margin-right: auto; }

/* Responsive: pages 4b–4g */
@media (max-width: 1024px) {
  .v2p-hero { padding: 56px 32px 48px; }
  .v2p-section { padding: 56px 32px; }
  .v2p-section-sm { padding: 40px 32px; }
  .v2r-cards-3 { grid-template-columns: 1fr 1fr; }
  .v2r-cards-2 { grid-template-columns: 1fr; }
  .v2r-picket-card { flex-direction: column; }
  .v2r-picket-img { width: 100%; height: 180px; }
  .v2r-custom-band { flex-direction: column; align-items: flex-start; }
  .v2r-matrix-head, .v2r-matrix-row { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .v2c-pdp { padding: 0 32px 60px; }
  /* Mobile PDP order: one hero image, then the price + configurator, then the
     thumbnails and spec table. `display: contents` lifts the gallery's children
     into the same flex flow as the configurator so they can be interleaved —
     otherwise buyers land on a wall of photos with the price far below the fold.
     Any gallery child without an explicit order stays in the image block (1). */
  .v2c-grid { display: flex; flex-direction: column; gap: 0; padding-top: 20px; }
  .v2c-gallery { display: contents; }
  .v2c-gallery > * { order: 1; }
  .v2c-gallery-main { height: 340px; margin-bottom: 18px; }
  .v2c-config { order: 2; display: flex; flex-direction: column; }
  /* Lift the price above the description so it lands in the first screen.
     Equal order values keep source order, so the steps below stay untouched. */
  .v2c-config > * { order: 5; }
  .v2c-config > .v2c-product-label { order: 1; }
  .v2c-config > .v2c-h1 { order: 2; }
  .v2c-config > .v2c-rating { order: 3; }
  .v2c-config > .v2c-price-display { order: 4; margin-bottom: 18px; }
  .v2c-gallery-thumbs { order: 3; margin-top: 32px; }
  .v2c-gallery-spec { order: 4; margin-top: 20px; }
  .v2c-bottom { grid-template-columns: 1fr; }
  .v2c-app-band { grid-template-columns: 1fr; }
  .v2t-creds-grid { grid-template-columns: repeat(2, 1fr); }
  .v2t-paths-grid { grid-template-columns: 1fr; }
  .v2t-form-grid { grid-template-columns: 1fr; }
  .v2t-photo-band { grid-template-columns: 1fr 1fr; height: auto; }
  .v2a-story-grid { grid-template-columns: 1fr; gap: 36px; }
  .v2a-values-grid { grid-template-columns: repeat(2, 1fr); }
  .v2a-roadmap-grid { grid-template-columns: 1fr; }
  .v2a-cta { flex-direction: column; gap: 24px; }
  .v2s-cards-3 { grid-template-columns: 1fr; }
  .v2s-dispatch-grid { grid-template-columns: 1fr; gap: 24px; }
  .v2s-policy-grid { grid-template-columns: 1fr; }
  .v2t-form-section { padding: 48px 32px; }
}
@media (max-width: 640px) {
  .v2p-hero { padding: 48px 20px 40px; }
  .v2p-hero-h1 { font-size: clamp(44px, 12vw, 66px); }
  .v2p-section { padding: 48px 20px; }
  .v2p-section-sm { padding: 36px 20px; }
  .v2r-cards-3 { grid-template-columns: 1fr; }
  .v2r-system-row { flex-wrap: wrap; gap: 8px; }
  .v2r-system-status { margin-left: 0; }
  .v2r-matrix-head, .v2r-matrix-row { grid-template-columns: 1.4fr .8fr .8fr .8fr; }
  .v2c-pdp { padding: 0 20px 48px; }
  .v2c-h1 { font-size: 42px; }
  .v2c-gallery-main { height: 290px; padding: 16px; }
  .v2c-gallery-thumbs { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .v2c-thumb { height: 62px; }
  /* Two columns gives the MOST POPULAR / BEST VALUE badges room to sit above the
     card without clipping the border or crowding the price. */
  .v2c-pack-grid { grid-template-columns: repeat(2, 1fr); gap: 16px 10px; padding-top: 10px; }
  .v2c-pack-badge { font-size: 8.5px; padding: 2px 7px; max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; }
  .v2c-app-band { padding: 36px 20px; }
  .v2t-creds-grid { grid-template-columns: 1fr; }
  .v2t-field-grid { grid-template-columns: 1fr; }
  .v2t-creds { padding: 0 20px; }
  .v2t-photo-band { grid-template-columns: 1fr; }
  .v2a-hero-inner { padding: 0 20px; }
  .v2a-hero-h1 { font-size: 46px; }
  .v2a-values-grid { grid-template-columns: 1fr; }
  .v2a-cta { padding: 48px 20px; }
  .v2a-story { padding: 48px 20px; }
  .v2a-roadmap { padding: 48px 20px; }
  .v2s-shipping { padding: 48px 20px 32px; }
  .v2s-dispatch { padding: 36px 20px; }
  .v2s-policy { padding: 48px 20px 60px; }
  .v2t-form-section { padding: 40px 20px; }
}

/* ==========================================================================
   Fence Height Extensions (.fhe-*) — built on the v2 pd- design system
   (charcoal #141516, orange #FF7500, parchment, 0px corners, Barlow Condensed).
   Only holds the grids/cards the shared pd- classes don't already cover.
   ========================================================================== */

/* Honest "photo goes here" slot (no illustration, no fake product shot). */
.fhe-photoslot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; width: 100%; text-align: center;
  background: var(--pd-placeholder);
  border: 1.5px dashed var(--pd-input);
  color: var(--pd-muted);
  padding: 24px;
}
.fhe-photoslot-label {
  font: 500 13px/1.4 "DM Sans", sans-serif;
  letter-spacing: .01em;
}
.fhe-photoslot.is-compact { gap: 8px; padding: 18px; }

/* Generic card grids. */
.fhe-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 16px; gap: 16px; }
.fhe-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 16px; gap: 16px; }

/* Light card. */
.fhe-card { background: var(--pd-surface); border: 1px solid var(--pd-border); padding: 24px; }
.fhe-card h3 {
  margin: 0 0 9px;
  font: 600 18px/1.3 "DM Sans", sans-serif; letter-spacing: 0; color: var(--pd-ink);
}
.fhe-card p { margin: 0; font: 400 14.5px/1.6 "DM Sans", sans-serif; color: var(--pd-body); }

/* Dark method card. */
.fhe-card--dark { background: var(--pd-black); border-color: var(--pd-black); }
.fhe-card--dark h3 { color: #fff; }
.fhe-card--dark p { color: rgba(255,255,255,0.8); }
.fhe-card-tag {
  display: block; margin-bottom: 12px;
  font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .18em; color: var(--pd-orange);
}

/* Install-overview card with orange edge. */
.fhe-card--line { border-left: 3px solid var(--pd-orange); }

/* Related product link card. */
.fhe-card--link { display: flex; flex-direction: column; text-decoration: none; transition: border-color 160ms var(--pd-ease-ui); }
.fhe-card--link:hover { border-color: var(--pd-orange); }
.fhe-card--link p { flex: 1 1; margin-bottom: 14px; }
.fhe-card-action { font: 600 13.5px/1 "DM Sans", sans-serif; letter-spacing: 0; color: var(--pd-burnt); }

/* Install overview + photo split. */
.fhe-split-photo { display: grid; grid-template-columns: 1.2fr 1fr; grid-gap: 24px; gap: 24px; align-items: start; }

/* Cross-link band (dark). */
.fhe-crosslink {
  background: var(--pd-black); padding: 34px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}

/* Collection + Products-page cards. */
.fhe-collection-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 20px; gap: 20px; max-width: 900px; }
.fhe-col-card {
  display: flex; flex-direction: column;
  background: var(--pd-surface); border: 1px solid var(--pd-border);
  text-decoration: none; transition: border-color 160ms var(--pd-ease-ui);
}
.fhe-col-card:hover { border-color: var(--pd-orange); }
.fhe-col-card-visual { border-bottom: 1px solid var(--pd-border); padding: 16px; background: var(--pd-surface); }
.fhe-col-card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1 1; }
.fhe-col-card-badge { font: 600 10.5px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .18em; color: var(--pd-burnt); }
.fhe-col-card-body h3 {
  margin: 4px 0 8px;
  font: 600 21px/1.2 "DM Sans", sans-serif; letter-spacing: 0; color: var(--pd-ink);
}
.fhe-col-card-body > p { margin: 0 0 10px; flex: 1 1; font: 400 14.5px/1.55 "DM Sans", sans-serif; color: var(--pd-body); }
.fhe-col-card-lengths { margin: 0 0 16px; font: 400 13.5px/1.4 "DM Sans", sans-serif; color: var(--pd-muted); }
/* Lengths and fit stack as two of these; only the last keeps the 16px gap to the
   card foot, so a card without a fit line is unchanged. */
.fhe-col-card-lengths:not(:last-of-type) { margin-bottom: 5px; }
.fhe-col-card-foot { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--pd-border); padding-top: 14px; }
.fhe-col-card-price { font: 700 22px/1 "DM Sans", sans-serif; color: var(--pd-ink); letter-spacing: -0.01em; }
.fhe-col-card-action { font: 600 13.5px/1 "DM Sans", sans-serif; letter-spacing: 0; color: var(--pd-burnt); }

/* Collection explainer. */
.fhe-explainer { display: grid; grid-template-columns: 1.25fr 1fr; grid-gap: 40px; gap: 40px; align-items: center; }
.fhe-explainer-list { list-style: none; margin: 0; padding: 24px 26px; background: var(--pd-surface); border: 1px solid var(--pd-border); }
.fhe-explainer-list li { display: flex; gap: 11px; padding: 9px 0; font: 500 14.5px/1.5 "DM Sans", sans-serif; color: var(--pd-body); }
.fhe-explainer-list li span { color: var(--pd-orange); font-weight: 700; }

/* Products-page band. */
.fhe-products-band { margin-top: 64px; }
.fhe-products-head { max-width: 720px; margin: 0 0 28px; }
.fhe-products-head p { margin: 12px 0 0; font: 400 15px/1.65 "DM Sans", sans-serif; color: var(--pd-body); }
.fhe-products-head a { color: var(--pd-burnt); font-weight: 700; }

/* Responsive. */
@media (max-width: 900px) {
  .fhe-grid-3 { grid-template-columns: 1fr 1fr; }
  .fhe-split-photo { grid-template-columns: 1fr; }
  .fhe-explainer { grid-template-columns: 1fr; gap: 26px; }
}
@media (max-width: 620px) {
  .fhe-grid-3, .fhe-grid-2 { grid-template-columns: 1fr; }
  .fhe-collection-grid { grid-template-columns: 1fr; }
  .fhe-crosslink { flex-direction: column; align-items: flex-start; padding: 26px 22px; }
}

/* --------------------------------------------------------------------------
   Calmer typography scope — applies ONLY to the Fence Height Extension pages
   (wrapped in .fhe-page) and the Products extensions band. Softens the shared
   pd- display/button/label styles to sentence case + medium weight WITHOUT
   changing them anywhere else on the site.
   -------------------------------------------------------------------------- */
.fhe-page .pd-display {
  text-transform: none;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.06;
}
.fhe-page .pd-btn {
  text-transform: none;
  letter-spacing: .01em;
  font-weight: 600;
}
.fhe-page .pd-cfg-head span:first-child {
  text-transform: none;
  letter-spacing: .01em;
  font-weight: 600;
  font-size: 14px;
}
.fhe-page .pd-panel-head {
  text-transform: none;
  letter-spacing: .01em;
  font-size: 12.5px;
  font-weight: 600;
}
.fhe-page .pd-spectable-head > div {
  text-transform: none;
  letter-spacing: .01em;
  font-size: 12px;
}
/* Eyebrows stay uppercase (the one sanctioned small label) but quieter. */
.fhe-page .pd-eyebrow { letter-spacing: .14em; font-weight: 600; }
/* More air between the stacked sections. */
.fhe-page .pd-section { padding-top: clamp(64px, 6.4vw, 104px); padding-bottom: clamp(64px, 6.4vw, 104px); }
.fhe-page .pd-spec-chip { text-transform: none; letter-spacing: .01em; font-weight: 500; }

/* --------------------------------------------------------------------------
   Softer, less boxy UI on the extension pages: subtle 8px radius, lighter
   borders, gentler selected state. Big cards stay for the real choices; the
   repeated hard outlines relax into tinted panels. Scoped to .fhe-page only.
   -------------------------------------------------------------------------- */
.fhe-page .pd-cfg-btn { border-radius: 8px; border-color: var(--pd-border); }
.fhe-page .pd-cfg-btn:hover { border-color: var(--pd-border-2); }
.fhe-page .pd-cfg-btn.is-active { border-color: rgba(255,117,0,0.55); background: rgba(255,117,0,0.05); }
.fhe-page .pd-btn { border-radius: 8px; }
.fhe-page .fhe-card,
.fhe-page .pd-build,
.fhe-page .pd-price-panel,
.fhe-page .pd-spectable,
.fhe-page .pd-panel,
.fhe-page .pd-product-frame,
.fhe-page .fhe-photoslot,
.fhe-page .fhe-crosslink { border-radius: 8px; }
/* Benefit cards relax into soft tinted panels instead of repeated outlines. */
.fhe-page .fhe-card--soft { background: var(--pd-parchment); border-color: transparent; }
/* Product cards: rounded, clipped so the photo slot follows the corner. */
.fhe-page .fhe-col-card { border-radius: 8px; overflow: hidden; }

/* Homepage "Shop by category" tiles — the multi-product range band. */
.pd-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 14px; gap: 14px; }
.pd-cat-tile {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  padding: 24px 22px 20px; background: var(--pd-surface);
  border: 1px solid var(--pd-border); border-radius: 8px; text-decoration: none;
  transition: border-color 180ms var(--pd-ease-ui), transform 180ms var(--pd-ease-ui);
}
.pd-cat-tile:hover { border-color: var(--pd-orange); transform: translateY(-2px); }
.pd-cat-tile-name { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 26px; line-height: 1; color: var(--pd-ink); }
.pd-cat-tile-note { font-size: 13.5px; line-height: 1.5; color: var(--pd-muted); }
.pd-cat-tile-go { margin-top: 4px; font-size: 18px; font-weight: 700; color: var(--pd-burnt); }
@media (max-width: 900px) { .pd-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .pd-cat-grid { grid-template-columns: 1fr; } }

/* Order / shipping-quote form (.oq-*) on quote-to-order product pages. */
.oq-form { display: flex; flex-direction: column; gap: 12px; }
.oq-product { font: 500 13.5px/1.4 "DM Sans", sans-serif; color: var(--pd-body); padding: 11px 14px; background: var(--pd-parchment); border: 1px solid var(--pd-border); border-radius: 8px; }
.oq-product strong { color: var(--pd-ink); font-weight: 700; }
.oq-row { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; gap: 12px; }
.oq-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.oq-field label { font: 600 12px/1.3 "DM Sans", sans-serif; color: var(--pd-ink); }
.oq-field input, .oq-field select {
  box-sizing: border-box; width: 100%; height: 44px; padding: 0 12px;
  border: 1px solid var(--pd-input); border-radius: 8px; background: #fff;
  font: 400 14.5px/1 "DM Sans", sans-serif; color: var(--pd-ink);
}
.oq-field select { appearance: auto; }
.oq-field input:focus, .oq-field select:focus { outline: none; border-color: var(--pd-orange); }
.oq-error { font: 500 13px/1.5 "DM Sans", sans-serif; color: #B3401A; }
.oq-note { margin: 2px 0 0; font: 400 12.5px/1.5 "DM Sans", sans-serif; color: var(--pd-muted); }
.oq-success { display: flex; gap: 12px; align-items: flex-start; padding: 18px 20px; border: 1px solid rgba(47,107,69,0.4); background: rgba(47,107,69,0.06); border-radius: 8px; }
.oq-success strong { display: block; margin-bottom: 4px; font: 700 15px/1.3 "DM Sans", sans-serif; color: var(--pd-ink); }
.oq-success span { font: 400 14px/1.55 "DM Sans", sans-serif; color: var(--pd-body); }
@media (max-width: 480px) { .oq-row { grid-template-columns: 1fr; } }

/* Products page category grid — uniform, compact cards left-aligned. */
.fhe-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 288px)); grid-gap: 18px; gap: 18px; justify-content: start; }
@media (max-width: 560px) { .fhe-cat-grid { grid-template-columns: 1fr; } }

/* Cross-link band button: allow long labels to wrap and go full-width on mobile
   so they never exceed the viewport. */
.fhe-crosslink .pd-btn { white-space: normal; text-align: center; }
@media (max-width: 620px) {
  .fhe-crosslink .pd-btn { width: 100%; height: auto; min-height: 52px; padding-top: 14px; padding-bottom: 14px; line-height: 1.3; }
}

/* Homepage "extension system" feature cards — large photo + caption. */
.pd-feature-card { display: flex; flex-direction: column; background: var(--pd-surface); border: 1px solid var(--pd-border); border-radius: 8px; overflow: hidden; text-decoration: none; transition: border-color 180ms var(--pd-ease-ui), transform 180ms var(--pd-ease-ui), box-shadow 180ms var(--pd-ease-ui); }
.pd-feature-card:hover { border-color: var(--pd-orange); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(20,21,22,0.10); }
.pd-feature-media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--pd-placeholder); }
.pd-feature-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--pd-ease-out); }
.pd-feature-card:hover .pd-feature-media img { transform: scale(1.04); }
.pd-feature-body { display: block; padding: 22px 26px 26px; }
.pd-feature-tag { display: block; font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--pd-burnt); margin-bottom: 12px; }
.pd-feature-name { display: block; font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(24px,2.4vw,32px); line-height: 1; letter-spacing: .006em; color: var(--pd-ink); margin-bottom: 10px; }
.pd-feature-desc { display: block; font: 400 15px/1.55 "DM Sans", sans-serif; color: var(--pd-body); margin-bottom: 16px; }
.pd-feature-action { display: inline-flex; align-items: center; gap: 8px; font: 700 13px/1 "DM Sans", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--pd-burnt); }
.file\:border-0::file-selector-button {
  border-width: 0px;
}
.file\:bg-transparent::file-selector-button {
  background-color: transparent;
}
.file\:text-sm::file-selector-button {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.file\:font-medium::file-selector-button {
  font-weight: 500;
}
.file\:text-foreground::file-selector-button {
  color: hsl(210 30% 95%);
  color: hsl(var(--foreground));
}
.placeholder\:text-muted-foreground::placeholder {
  color: hsl(210 20% 70%);
  color: hsl(var(--muted-foreground));
}
.after\:absolute::after {
  content: var(--tw-content);
  position: absolute;
}
.after\:inset-y-0::after {
  content: var(--tw-content);
  top: 0px;
  bottom: 0px;
}
.after\:left-1\/2::after {
  content: var(--tw-content);
  left: 50%;
}
.after\:w-1::after {
  content: var(--tw-content);
  width: 0.25rem;
}
.after\:-translate-x-1\/2::after {
  content: var(--tw-content);
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.first\:rounded-l-md:first-child {
  border-top-left-radius: calc(6px - 2px);
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(6px - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.first\:border-l:first-child {
  border-left-width: 1px;
}
.last\:rounded-r-md:last-child {
  border-top-right-radius: calc(6px - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(6px - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.focus-within\:relative:focus-within {
  position: relative;
}
.focus-within\:z-20:focus-within {
  z-index: 20;
}
.hover\:bg-accent:hover {
  background-color: hsl(#F47A0F);
  background-color: hsl(var(--accent));
}
.hover\:bg-destructive\/80:hover {
  background-color: hsl(var(--destructive) / 0.8);
}
.hover\:bg-destructive\/90:hover {
  background-color: hsl(var(--destructive) / 0.9);
}
.hover\:bg-muted:hover {
  background-color: hsl(210 30% 25%);
  background-color: hsl(var(--muted));
}
.hover\:bg-muted\/50:hover {
  background-color: hsl(210 30% 25% / 0.5);
  background-color: hsl(var(--muted) / 0.5);
}
.hover\:bg-primary:hover {
  background-color: hsl(38 100% 47%);
  background-color: hsl(var(--primary));
}
.hover\:bg-primary\/80:hover {
  background-color: hsl(38 100% 47% / 0.8);
  background-color: hsl(var(--primary) / 0.8);
}
.hover\:bg-primary\/90:hover {
  background-color: hsl(38 100% 47% / 0.9);
  background-color: hsl(var(--primary) / 0.9);
}
.hover\:bg-secondary:hover {
  background-color: hsl(205 60% 60%);
  background-color: hsl(var(--secondary));
}
.hover\:bg-secondary\/80:hover {
  background-color: hsl(205 60% 60% / 0.8);
  background-color: hsl(var(--secondary) / 0.8);
}
.hover\:text-accent-foreground:hover {
  color: hsl(var(--accent-foreground));
}
.hover\:text-foreground:hover {
  color: hsl(210 30% 95%);
  color: hsl(var(--foreground));
}
.hover\:text-muted-foreground:hover {
  color: hsl(210 20% 70%);
  color: hsl(var(--muted-foreground));
}
.hover\:text-primary-foreground:hover {
  color: hsl(210 60% 8%);
  color: hsl(var(--primary-foreground));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:opacity-100:hover {
  opacity: 1;
}
.focus\:bg-accent:focus {
  background-color: hsl(#F47A0F);
  background-color: hsl(var(--accent));
}
.focus\:bg-primary:focus {
  background-color: hsl(38 100% 47%);
  background-color: hsl(var(--primary));
}
.focus\:text-accent-foreground:focus {
  color: hsl(var(--accent-foreground));
}
.focus\:text-primary-foreground:focus {
  color: hsl(210 60% 8%);
  color: hsl(var(--primary-foreground));
}
.focus\:opacity-100:focus {
  opacity: 1;
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-1:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-ring:focus {
  --tw-ring-color: hsl(var(--ring));
}
.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:outline-none:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus-visible\:ring-1:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), 0 0 #0000;
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus-visible\:ring-ring:focus-visible {
  --tw-ring-color: hsl(var(--ring));
}
.focus-visible\:ring-offset-1:focus-visible {
  --tw-ring-offset-width: 1px;
}
.focus-visible\:ring-offset-2:focus-visible {
  --tw-ring-offset-width: 2px;
}
.focus-visible\:ring-offset-background:focus-visible {
  --tw-ring-offset-color: hsl(var(--background));
}
.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}
.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
.group.destructive .group-\[\.destructive\]\:border-muted\/40 {
  border-color: hsl(210 30% 25% / 0.4);
  border-color: hsl(var(--muted) / 0.4);
}
.group.toaster .group-\[\.toaster\]\:border-border {
  border-color: hsl(rgba(143,166,178,0.14));
  border-color: hsl(var(--border));
}
.group.toast .group-\[\.toast\]\:bg-muted {
  background-color: hsl(210 30% 25%);
  background-color: hsl(var(--muted));
}
.group.toast .group-\[\.toast\]\:bg-primary {
  background-color: hsl(38 100% 47%);
  background-color: hsl(var(--primary));
}
.group.toaster .group-\[\.toaster\]\:bg-background {
  background-color: hsl(210 60% 8%);
  background-color: hsl(var(--background));
}
.group.destructive .group-\[\.destructive\]\:text-red-300 {
  --tw-text-opacity: 1;
  color: rgb(252 165 165 / 1);
  color: rgb(252 165 165 / var(--tw-text-opacity, 1));
}
.group.toast .group-\[\.toast\]\:text-muted-foreground {
  color: hsl(210 20% 70%);
  color: hsl(var(--muted-foreground));
}
.group.toast .group-\[\.toast\]\:text-primary-foreground {
  color: hsl(210 60% 8%);
  color: hsl(var(--primary-foreground));
}
.group.toaster .group-\[\.toaster\]\:text-foreground {
  color: hsl(210 30% 95%);
  color: hsl(var(--foreground));
}
.group.toaster .group-\[\.toaster\]\:shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.group.destructive .group-\[\.destructive\]\:hover\:border-destructive\/30:hover {
  border-color: hsl(var(--destructive) / 0.3);
}
.group.destructive .group-\[\.destructive\]\:hover\:bg-destructive:hover {
  background-color: hsl(var(--destructive));
}
.group.destructive .group-\[\.destructive\]\:hover\:text-destructive-foreground:hover {
  color: hsl(var(--destructive-foreground));
}
.group.destructive .group-\[\.destructive\]\:hover\:text-red-50:hover {
  --tw-text-opacity: 1;
  color: rgb(254 242 242 / 1);
  color: rgb(254 242 242 / var(--tw-text-opacity, 1));
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-destructive:focus {
  --tw-ring-color: hsl(var(--destructive));
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-red-400:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(248 113 113 / var(--tw-ring-opacity, 1));
}
.group.destructive .group-\[\.destructive\]\:focus\:ring-offset-red-600:focus {
  --tw-ring-offset-color: #dc2626;
}
.peer:disabled ~ .peer-disabled\:cursor-not-allowed {
  cursor: not-allowed;
}
.peer:disabled ~ .peer-disabled\:opacity-70 {
  opacity: 0.7;
}
.has-\[\:disabled\]\:opacity-50:has(:disabled) {
  opacity: 0.5;
}
.aria-selected\:bg-accent[aria-selected="true"] {
  background-color: hsl(#F47A0F);
  background-color: hsl(var(--accent));
}
.aria-selected\:bg-accent\/50[aria-selected="true"] {
  background-color: hsl(#F47A0F / 0.5);
  background-color: hsl(var(--accent) / 0.5);
}
.aria-selected\:text-accent-foreground[aria-selected="true"] {
  color: hsl(var(--accent-foreground));
}
.aria-selected\:text-muted-foreground[aria-selected="true"] {
  color: hsl(210 20% 70%);
  color: hsl(var(--muted-foreground));
}
.aria-selected\:opacity-100[aria-selected="true"] {
  opacity: 1;
}
.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
  pointer-events: none;
}
.data-\[disabled\]\:pointer-events-none[data-disabled] {
  pointer-events: none;
}
.data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"] {
  height: 1px;
}
.data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"] {
  width: 100%;
}
.data-\[side\=bottom\]\:translate-y-1[data-side="bottom"] {
  --tw-translate-y: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=left\]\:-translate-x-1[data-side="left"] {
  --tw-translate-x: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=right\]\:translate-x-1[data-side="right"] {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[side\=top\]\:-translate-y-1[data-side="top"] {
  --tw-translate-y: -0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=checked\]\:translate-x-4[data-state="checked"] {
  --tw-translate-x: 1rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[swipe\=cancel\]\:translate-x-0[data-swipe="cancel"] {
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[swipe\=end\]\:translate-x-\[var\(--radix-toast-swipe-end-x\)\][data-swipe="end"] {
  --tw-translate-x: var(--radix-toast-swipe-end-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[swipe\=move\]\:translate-x-\[var\(--radix-toast-swipe-move-x\)\][data-swipe="move"] {
  --tw-translate-x: var(--radix-toast-swipe-move-x);
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes accordion-up {

  from {
    height: var(--radix-accordion-content-height);
  }

  to {
    height: 0;
  }
}
.data-\[state\=closed\]\:animate-accordion-up[data-state="closed"] {
  animation: accordion-up 0.2s ease-out;
}
@keyframes accordion-down {

  from {
    height: 0;
  }

  to {
    height: var(--radix-accordion-content-height);
  }
}
.data-\[state\=open\]\:animate-accordion-down[data-state="open"] {
  animation: accordion-down 0.2s ease-out;
}
.data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"] {
  flex-direction: column;
}
.data-\[selected\=true\]\:bg-accent[data-selected="true"] {
  background-color: hsl(#F47A0F);
  background-color: hsl(var(--accent));
}
.data-\[state\=active\]\:bg-background[data-state="active"] {
  background-color: hsl(210 60% 8%);
  background-color: hsl(var(--background));
}
.data-\[state\=checked\]\:bg-primary[data-state="checked"] {
  background-color: hsl(38 100% 47%);
  background-color: hsl(var(--primary));
}
.data-\[state\=on\]\:bg-accent[data-state="on"] {
  background-color: hsl(#F47A0F);
  background-color: hsl(var(--accent));
}
.data-\[state\=open\]\:bg-accent[data-state="open"] {
  background-color: hsl(#F47A0F);
  background-color: hsl(var(--accent));
}
.data-\[state\=open\]\:bg-accent\/50[data-state="open"] {
  background-color: hsl(#F47A0F / 0.5);
  background-color: hsl(var(--accent) / 0.5);
}
.data-\[state\=open\]\:bg-secondary[data-state="open"] {
  background-color: hsl(205 60% 60%);
  background-color: hsl(var(--secondary));
}
.data-\[state\=selected\]\:bg-muted[data-state="selected"] {
  background-color: hsl(210 30% 25%);
  background-color: hsl(var(--muted));
}
.data-\[state\=unchecked\]\:bg-input[data-state="unchecked"] {
  background-color: hsl(210 50% 12%);
  background-color: hsl(var(--input));
}
.data-\[placeholder\]\:text-muted-foreground[data-placeholder] {
  color: hsl(210 20% 70%);
  color: hsl(var(--muted-foreground));
}
.data-\[selected\=true\]\:text-accent-foreground[data-selected="true"] {
  color: hsl(var(--accent-foreground));
}
.data-\[state\=active\]\:text-foreground[data-state="active"] {
  color: hsl(210 30% 95%);
  color: hsl(var(--foreground));
}
.data-\[state\=checked\]\:text-primary-foreground[data-state="checked"] {
  color: hsl(210 60% 8%);
  color: hsl(var(--primary-foreground));
}
.data-\[state\=on\]\:text-accent-foreground[data-state="on"] {
  color: hsl(var(--accent-foreground));
}
.data-\[state\=open\]\:text-accent-foreground[data-state="open"] {
  color: hsl(var(--accent-foreground));
}
.data-\[state\=open\]\:text-muted-foreground[data-state="open"] {
  color: hsl(210 20% 70%);
  color: hsl(var(--muted-foreground));
}
.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
  opacity: 0.5;
}
.data-\[disabled\]\:opacity-50[data-disabled] {
  opacity: 0.5;
}
.data-\[state\=active\]\:shadow[data-state="active"] {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: 0 0 #0000, 0 0 #0000, var(--tw-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.data-\[swipe\=move\]\:transition-none[data-swipe="move"] {
  transition-property: none;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  transition-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  transition-duration: 500ms;
}
.data-\[motion\^\=from-\]\:animate-in[data-motion^="from-"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=open\]\:animate-in[data-state="open"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[state\=visible\]\:animate-in[data-state="visible"] {
  animation-name: enter;
  animation-duration: 150ms;
  --tw-enter-opacity: initial;
  --tw-enter-scale: initial;
  --tw-enter-rotate: initial;
  --tw-enter-translate-x: initial;
  --tw-enter-translate-y: initial;
}
.data-\[motion\^\=to-\]\:animate-out[data-motion^="to-"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=closed\]\:animate-out[data-state="closed"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[state\=hidden\]\:animate-out[data-state="hidden"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[swipe\=end\]\:animate-out[data-swipe="end"] {
  animation-name: exit;
  animation-duration: 150ms;
  --tw-exit-opacity: initial;
  --tw-exit-scale: initial;
  --tw-exit-rotate: initial;
  --tw-exit-translate-x: initial;
  --tw-exit-translate-y: initial;
}
.data-\[motion\^\=from-\]\:fade-in[data-motion^="from-"] {
  --tw-enter-opacity: 0;
}
.data-\[motion\^\=to-\]\:fade-out[data-motion^="to-"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=closed\]\:fade-out-0[data-state="closed"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=closed\]\:fade-out-80[data-state="closed"] {
  --tw-exit-opacity: 0.8;
}
.data-\[state\=hidden\]\:fade-out[data-state="hidden"] {
  --tw-exit-opacity: 0;
}
.data-\[state\=open\]\:fade-in-0[data-state="open"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=visible\]\:fade-in[data-state="visible"] {
  --tw-enter-opacity: 0;
}
.data-\[state\=closed\]\:zoom-out-95[data-state="closed"] {
  --tw-exit-scale: .95;
}
.data-\[state\=open\]\:zoom-in-90[data-state="open"] {
  --tw-enter-scale: .9;
}
.data-\[state\=open\]\:zoom-in-95[data-state="open"] {
  --tw-enter-scale: .95;
}
.data-\[motion\=from-end\]\:slide-in-from-right-52[data-motion="from-end"] {
  --tw-enter-translate-x: 13rem;
}
.data-\[motion\=from-start\]\:slide-in-from-left-52[data-motion="from-start"] {
  --tw-enter-translate-x: -13rem;
}
.data-\[motion\=to-end\]\:slide-out-to-right-52[data-motion="to-end"] {
  --tw-exit-translate-x: 13rem;
}
.data-\[motion\=to-start\]\:slide-out-to-left-52[data-motion="to-start"] {
  --tw-exit-translate-x: -13rem;
}
.data-\[side\=bottom\]\:slide-in-from-top-2[data-side="bottom"] {
  --tw-enter-translate-y: -0.5rem;
}
.data-\[side\=left\]\:slide-in-from-right-2[data-side="left"] {
  --tw-enter-translate-x: 0.5rem;
}
.data-\[side\=right\]\:slide-in-from-left-2[data-side="right"] {
  --tw-enter-translate-x: -0.5rem;
}
.data-\[side\=top\]\:slide-in-from-bottom-2[data-side="top"] {
  --tw-enter-translate-y: 0.5rem;
}
.data-\[state\=closed\]\:slide-out-to-bottom[data-state="closed"] {
  --tw-exit-translate-y: 100%;
}
.data-\[state\=closed\]\:slide-out-to-left[data-state="closed"] {
  --tw-exit-translate-x: -100%;
}
.data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state="closed"] {
  --tw-exit-translate-x: -50%;
}
.data-\[state\=closed\]\:slide-out-to-right[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}
.data-\[state\=closed\]\:slide-out-to-right-full[data-state="closed"] {
  --tw-exit-translate-x: 100%;
}
.data-\[state\=closed\]\:slide-out-to-top[data-state="closed"] {
  --tw-exit-translate-y: -100%;
}
.data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state="closed"] {
  --tw-exit-translate-y: -48%;
}
.data-\[state\=open\]\:slide-in-from-bottom[data-state="open"] {
  --tw-enter-translate-y: 100%;
}
.data-\[state\=open\]\:slide-in-from-left[data-state="open"] {
  --tw-enter-translate-x: -100%;
}
.data-\[state\=open\]\:slide-in-from-left-1\/2[data-state="open"] {
  --tw-enter-translate-x: -50%;
}
.data-\[state\=open\]\:slide-in-from-right[data-state="open"] {
  --tw-enter-translate-x: 100%;
}
.data-\[state\=open\]\:slide-in-from-top[data-state="open"] {
  --tw-enter-translate-y: -100%;
}
.data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state="open"] {
  --tw-enter-translate-y: -48%;
}
.data-\[state\=open\]\:slide-in-from-top-full[data-state="open"] {
  --tw-enter-translate-y: -100%;
}
.data-\[state\=closed\]\:duration-300[data-state="closed"] {
  animation-duration: 300ms;
}
.data-\[state\=open\]\:duration-500[data-state="open"] {
  animation-duration: 500ms;
}
.data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  left: 0px;
}
.data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  height: 0.25rem;
}
.data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  width: 100%;
}
.data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after {
  content: var(--tw-content);
  --tw-translate-x: 0px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"] {
  background-color: hsl(#F47A0F);
  background-color: hsl(var(--accent));
}
.data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"] {
  background-color: hsl(#F47A0F);
  background-color: hsl(var(--accent));
}
.group[data-state="open"] .group-data-\[state\=open\]\:rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.dark\:border-destructive:is(.dark *) {
  border-color: hsl(var(--destructive));
}
@media (min-width: 640px) {

  .sm\:bottom-0 {
    bottom: 0px;
  }

  .sm\:right-0 {
    right: 0px;
  }

  .sm\:top-auto {
    top: auto;
  }

  .sm\:mt-0 {
    margin-top: 0px;
  }

  .sm\:max-w-sm {
    max-width: 24rem;
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:flex-col {
    flex-direction: column;
  }

  .sm\:justify-end {
    justify-content: flex-end;
  }

  .sm\:gap-2\.5 {
    gap: 0.625rem;
  }

  .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(0.5rem * var(--tw-space-x-reverse));
    margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-x-reverse: 0;
    margin-right: calc(1rem * var(--tw-space-x-reverse));
    margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
  }

  .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-space-y-reverse: 0;
    margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
    margin-bottom: calc(0px * var(--tw-space-y-reverse));
  }

  .sm\:rounded-lg {
    border-radius: 6px;
    border-radius: var(--radius);
  }

  .sm\:text-left {
    text-align: left;
  }

  .data-\[state\=open\]\:sm\:slide-in-from-bottom-full[data-state="open"] {
    --tw-enter-translate-y: 100%;
  }
}
@media (min-width: 768px) {

  .md\:absolute {
    position: absolute;
  }

  .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\] {
    width: var(--radix-navigation-menu-viewport-width);
  }

  .md\:w-auto {
    width: auto;
  }

  .md\:max-w-\[420px\] {
    max-width: 420px;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}
.\[\&\+div\]\:text-xs+div {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&\:has\(\>\.day-range-end\)\]\:rounded-r-md:has(>.day-range-end) {
  border-top-right-radius: calc(6px - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(6px - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\>\.day-range-start\)\]\:rounded-l-md:has(>.day-range-start) {
  border-top-left-radius: calc(6px - 2px);
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(6px - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[aria-selected\]\)\]\:rounded-md:has([aria-selected]) {
  border-radius: calc(6px - 2px);
  border-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[aria-selected\]\)\]\:bg-accent:has([aria-selected]) {
  background-color: hsl(#F47A0F);
  background-color: hsl(var(--accent));
}
.first\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-l-md:has([aria-selected]):first-child {
  border-top-left-radius: calc(6px - 2px);
  border-top-left-radius: calc(var(--radius) - 2px);
  border-bottom-left-radius: calc(6px - 2px);
  border-bottom-left-radius: calc(var(--radius) - 2px);
}
.last\:\[\&\:has\(\[aria-selected\]\)\]\:rounded-r-md:has([aria-selected]):last-child {
  border-top-right-radius: calc(6px - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(6px - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[aria-selected\]\.day-outside\)\]\:bg-accent\/50:has([aria-selected].day-outside) {
  background-color: hsl(#F47A0F / 0.5);
  background-color: hsl(var(--accent) / 0.5);
}
.\[\&\:has\(\[aria-selected\]\.day-range-end\)\]\:rounded-r-md:has([aria-selected].day-range-end) {
  border-top-right-radius: calc(6px - 2px);
  border-top-right-radius: calc(var(--radius) - 2px);
  border-bottom-right-radius: calc(6px - 2px);
  border-bottom-right-radius: calc(var(--radius) - 2px);
}
.\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]) {
  padding-right: 0px;
}
.\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox] {
  --tw-translate-y: 2px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\>span\]\:line-clamp-1>span {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.\[\&\>svg\+div\]\:translate-y-\[-3px\]>svg+div {
  --tw-translate-y: -3px;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\>svg\]\:absolute>svg {
  position: absolute;
}
.\[\&\>svg\]\:left-4>svg {
  left: 1rem;
}
.\[\&\>svg\]\:top-4>svg {
  top: 1rem;
}
.\[\&\>svg\]\:size-4>svg {
  width: 1rem;
  height: 1rem;
}
.\[\&\>svg\]\:h-3\.5>svg {
  height: 0.875rem;
}
.\[\&\>svg\]\:w-3\.5>svg {
  width: 0.875rem;
}
.\[\&\>svg\]\:shrink-0>svg {
  flex-shrink: 0;
}
.\[\&\>svg\]\:text-destructive>svg {
  color: hsl(var(--destructive));
}
.\[\&\>svg\]\:text-foreground>svg {
  color: hsl(210 30% 95%);
  color: hsl(var(--foreground));
}
.\[\&\>svg\~\*\]\:pl-7>svg~* {
  padding-left: 1.75rem;
}
.\[\&\>tr\]\:last\:border-b-0:last-child>tr {
  border-bottom-width: 0px;
}
.\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&\[data-state\=open\]\>svg\]\:rotate-180[data-state=open]>svg {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
  font-size: 0.75rem;
  line-height: 1rem;
}
.\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
  font-weight: 500;
}
.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] {
  color: hsl(210 20% 70%);
  color: hsl(var(--muted-foreground));
}
.\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] {
  padding-top: 0px;
}
.\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg {
  height: 1.25rem;
}
.\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg {
  width: 1.25rem;
}
.\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] {
  height: 3rem;
}
.\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg {
  height: 1.25rem;
}
.\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg {
  width: 1.25rem;
}
.\[\&_p\]\:leading-relaxed p {
  line-height: 1.625;
}
.\[\&_svg\]\:pointer-events-none svg {
  pointer-events: none;
}
.\[\&_svg\]\:size-4 svg {
  width: 1rem;
  height: 1rem;
}
.\[\&_svg\]\:shrink-0 svg {
  flex-shrink: 0;
}
.\[\&_tr\:last-child\]\:border-0 tr:last-child {
  border-width: 0px;
}
.\[\&_tr\]\:border-b tr {
  border-bottom-width: 1px;
}

/* ============================================
   INTERNATIONAL SHIPPING
   ============================================ */

/* Country selector (International Shipping page). Renders on a light section. */
.st-country-selector {
  width: min(560px, 100%);
  padding: 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
  box-shadow: 0 16px 40px rgba(9, 23, 34, .08);
}
.st-country-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
}
.st-country-label svg { color: var(--accent); }
.st-country-selector select {
  width: 100%;
  padding: 13px 14px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
}
.st-country-info { margin: 18px 0; display: grid; grid-gap: 12px; gap: 12px; }
.st-country-info-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--body);
}
.st-country-info-row svg { color: var(--accent); flex: 0 0 auto; margin-top: 1px; }
.st-country-info-row strong { display: block; color: var(--ink); font-size: 12px; letter-spacing: .4px; text-transform: uppercase; }
.st-country-selector .btn-accent { width: 100%; justify-content: center; }

/* Product-page "International Orders" band (dark section, accent card). */
.st-intl-band { background: var(--navy); }
.st-intl-card {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  padding: 34px 38px;
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  background: rgba(20, 42, 66, .45);
}
.st-intl-card-body { flex: 1 1 440px; }
.st-intl-card-body .st-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.st-intl-card-body h2 { margin: 0 0 14px; font-size: 34px; }
.st-intl-card-body p { margin: 0 0 10px; color: var(--grey-lt); max-width: 660px; }
.st-intl-note {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0 0 !important;
  color: var(--white) !important;
  font-size: 13.5px;
  line-height: 1.55;
}
.st-intl-note svg { color: var(--accent); flex: 0 0 auto; margin-top: 2px; }
.st-intl-card-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
}
.st-intl-markets { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Homepage subtle "International Orders Welcome" strip. */
.st-intl-strip-section {
  background: var(--navy);
  padding: 26px 64px;
  border-top: 1px solid var(--border);
}
.st-intl-strip {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.st-intl-strip-copy {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  flex: 1 1 500px;
}
.st-intl-strip-copy p { margin: 0; color: var(--grey-lt); font-size: 14px; max-width: 640px; line-height: 1.55; }
.st-intl-strip-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(244, 122, 15, .14);
  border: 1px solid rgba(244, 122, 15, .40);
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Pre-checkout shipping-destination check next to Buy Now. */
.st-ship-check {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: rgba(20, 42, 66, .40);
  transition: border-color .2s ease, background .2s ease;
}
.st-ship-check.is-intl {
  border-color: rgba(244, 122, 15, .55);
  background: rgba(244, 122, 15, .08);
}
.st-ship-check-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.st-ship-check-row label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--grey-lt);
  font-weight: 700;
  white-space: nowrap;
}
.st-ship-check-row label svg { color: var(--accent); }
.st-ship-check-row select {
  flex: 1 1 auto;
  min-width: 150px;
  background: rgba(9, 23, 34, .72);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  color: var(--white);
  font-size: 15px;
  font-family: inherit;
}
.st-ship-check-row select:focus { outline: none; border-color: var(--accent); }
.st-ship-check-row select option { color: var(--ink); background: var(--white); }
.st-ship-check-au {
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--grey-lt);
  font-size: 13px;
  line-height: 1.5;
}
.st-ship-check-au svg { color: var(--accent); flex: 0 0 auto; margin-top: 2px; }
.st-ship-check-intl { display: flex; flex-direction: column; gap: 12px; }
.st-ship-check-intl p { margin: 0; color: var(--white); font-size: 13.5px; line-height: 1.55; }
.st-ship-check-intl .btn-accent { align-self: flex-start; }

@media (max-width: 900px) {
  .st-intl-card { padding: 26px 22px; }
  .st-intl-card-body h2 { font-size: 30px; }
  .st-intl-card-actions { width: 100%; }
  .st-intl-card-actions .btn-accent,
  .st-intl-card-actions .btn-secondary { width: 100%; justify-content: center; }
  .st-intl-strip-section { padding: 22px 22px; }
  .st-ship-check-intl .btn-accent { align-self: stretch; justify-content: center; }
}

/* ============================================
   PHASE 4 — STAR PICKETS + ANIMAL EXTENSION
   Buy panels render on the dark PDP background.
   ============================================ */

/* Live stock indicator */
.st-stock {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 2px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--grey-lt);
}
.st-stock-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--grey-lt);
  flex: 0 0 auto;
}
.st-stock-in { color: var(--success-lt); }
.st-stock-in .st-stock-dot { background: var(--success-lt); box-shadow: 0 0 0 3px rgba(94, 168, 120, .18); }
.st-stock-out { color: var(--grey-lt); }
.st-stock-out .st-stock-dot { background: #b45c4a; }
.st-stock-fallback { color: var(--accent); }
.st-stock-fallback .st-stock-dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(244, 122, 15, .18); }

/* Picket buy fields */
.st-picket-field { margin-top: 20px; }
.st-picket-label {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--grey-lt);
  font-weight: 700;
}

.st-length-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 8px;
  gap: 8px;
}
.st-length-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: rgba(20, 42, 66, .40);
  color: var(--white);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.st-length-btn strong { font-size: 15px; }
.st-length-btn small { font-size: 12px; color: var(--grey-lt); }
.st-length-btn:hover { border-color: var(--accent); }
.st-length-btn.is-active {
  border-color: var(--accent);
  background: rgba(244, 122, 15, .12);
}
.st-length-btn.is-active small { color: var(--accent); }

.st-finish-row { display: flex; gap: 8px; flex-wrap: wrap; }
.st-finish-btn {
  padding: 9px 18px;
  border: 1px solid var(--border-strong);
  border-radius: 40px;
  background: rgba(20, 42, 66, .40);
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.st-finish-btn:hover { border-color: var(--accent); }
.st-finish-btn.is-active { border-color: var(--accent); background: var(--accent); color: var(--navy); }

.st-pointer-addon {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 20px;
  padding: 13px 15px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: rgba(20, 42, 66, .35);
  cursor: pointer;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--grey-lt);
}
.st-pointer-addon input { margin-top: 3px; flex: 0 0 auto; accent-color: var(--accent); width: 16px; height: 16px; }
.st-pointer-addon strong { color: var(--white); }

/* Extend Your Fencing System — Animal Extension add-on (dark section) */
.st-extend-layout { align-items: center; }
.st-extend-media img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-strong);
}
.st-extend-layout .st-kicker { display: inline-flex; align-items: center; gap: 7px; }

.st-addon-buy {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--border-strong);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-md);
  background: rgba(20, 42, 66, .40);
}
.st-addon-price strong { font-size: 24px; color: var(--white); font-weight: 700; }
.st-addon-price small { color: var(--grey-lt); font-size: 12.5px; }
.st-addon-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: 40px;
  overflow: hidden;
}
.st-addon-qty button {
  width: 34px;
  height: 34px;
  background: transparent;
  border: none;
  color: var(--white);
  font-size: 17px;
  cursor: pointer;
}
.st-addon-qty span { min-width: 30px; text-align: center; font-weight: 700; color: var(--white); }
.st-addon-note { margin: 12px 0 0; font-size: 12.5px; color: var(--grey-lt); }
.st-addon-note a { color: var(--accent); font-weight: 700; }

/* Section reveal-on-scroll (added by useScrollReveal). Hidden state is only ever
   set by JS after mount, so no-JS users always see content. */
.st-reveal { opacity: 0; transform: translateY(20px); will-change: opacity, transform; }
.st-reveal-in {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .st-reveal,
  .st-reveal-in { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Australian-flag credibility badge */
.st-au-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .3px;
  line-height: 1;
  white-space: nowrap;
}
.st-au-badge-text { padding-top: 1px; }
/* On light surfaces the pill keeps contrast */
.st-section-light .st-au-badge,
.st-trust-strip .st-au-badge,
.st-trade-band .st-au-badge {
  background: #fff;
  border-color: var(--border);
  color: var(--ink);
}

/* Trust strip (manufacturer & supplier / checkout / delivery / reviews) */
.st-trust-strip {
  background: var(--surface-muted);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 16px 24px;
}
.st-trust-strip-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
}
.st-trust-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--ink);
}
.st-trust-item svg { color: var(--accent); flex: 0 0 auto; }
.st-trust-link { text-decoration: none; }
.st-trust-link:hover { color: var(--accent); }

/* Even out homepage range cards: content fills the card, CTA pins to the bottom
   so every "View product" lines up regardless of copy length. */
.st-range-card { display: flex; flex-direction: column; }
.st-range-card > div:last-child { display: flex; flex-direction: column; flex: 1 1 auto; }
.st-range-card .st-range-cta { margin-top: auto; padding-top: 10px; }

/* Contrast fix: .st-proof-list is white-on-dark by default; make it readable
   when it sits on a light section (e.g. Bulk Packs cross-sell). */
.st-section-light .st-proof-list span {
  background: var(--surface-strong);
  border-color: rgba(9, 23, 34, .12);
  color: var(--ink);
}

/* Homepage range card price + stock meta.
   NB: `.st-range-card span` (index.css) forces every span to accent + inline
   block + margin-bottom, so these rules are scoped tightly enough to win. */
.st-range-card .st-range-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 12px 0 0;
}
.st-range-card .st-range-meta > .st-range-price {
  display: inline-block;
  margin: 0;
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
}
.st-range-card .st-range-meta .st-stock {
  display: inline-flex;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
}
.st-range-card .st-range-meta .st-stock-in { color: var(--success-lt); }
.st-range-card .st-range-meta .st-stock-out { color: var(--grey-lt); }
.st-range-card .st-range-meta .st-stock-fallback { color: var(--accent); }

/* "One product, two configurations" subtitle under the bracket title */
.st-pdp-config-sub {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--grey-lt);
}

/* Support Angle Thickness selector (bracket pages, dark buy panel) */
.st-angle-grid { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; gap: 10px; }
.st-angle-btn {
  display: flex;
  flex-direction: column;
  gap: 9px;
  align-items: flex-start;
  text-align: left;
  padding: 13px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: rgba(20, 42, 66, .40);
  color: var(--white);
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, background .15s ease;
}
.st-angle-btn:hover:not(.is-out) { border-color: var(--accent); }
.st-angle-btn.is-active { border-color: var(--accent); background: rgba(244, 122, 15, .12); }
.st-angle-btn.is-out { opacity: .5; cursor: not-allowed; }
.st-angle-name { font-size: 13.5px; font-weight: 700; line-height: 1.25; }
.st-angle-row { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.st-angle-price { font-size: 12.5px; color: var(--grey-lt); font-weight: 700; }
.st-angle-btn.is-active .st-angle-price { color: var(--accent); }
.st-angle-stock { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; }
.st-angle-stock.is-in { color: var(--success-lt); }
.st-angle-stock.is-in .st-stock-dot { background: var(--success-lt); }
.st-angle-stock.is-out { color: var(--grey-lt); }
.st-angle-stock.is-out .st-stock-dot { background: #b45c4a; }
.st-angle-helper { margin: 12px 0 0; font-size: 13px; color: var(--grey-lt); line-height: 1.5; }
.st-angle-note { margin: 6px 0 0; font-size: 12px; color: var(--grey-lt); font-style: italic; }
@media (max-width: 480px) { .st-angle-grid { grid-template-columns: 1fr; } }

/* Larger & repeat orders band */
.st-trade-band { background: var(--surface-muted); }
.st-trade-card {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.st-trade-card > div:first-child { flex: 1 1 460px; }
.st-trade-card .st-kicker { display: inline-flex; align-items: center; gap: 7px; color: var(--accent); }
.st-trade-card h2 { margin: 0 0 12px; color: var(--ink); font-size: 34px; }
.st-trade-card p { margin: 0; color: var(--body); max-width: 680px; }
.st-trade-actions { flex: 0 0 auto; }

@media (max-width: 640px) {
  .st-length-grid { grid-template-columns: repeat(2, 1fr); }
  .st-addon-buy { gap: 10px; }
  .st-addon-buy .btn-accent { width: 100%; justify-content: center; }
  .st-trade-card h2 { font-size: 27px; }
  .st-trade-actions,
  .st-trade-actions .btn-accent { width: 100%; justify-content: center; }
}

/* ============================================================================
   STAKETEK — PREMIUM REDESIGN v2 · DESIGN SYSTEM
   Dark industrial (Milwaukee / Stihl tier). Near-black base, single orange
   accent, condensed bold display type, hard 0px corners everywhere.

   Loaded AFTER index.css so it retunes the legacy theme site-wide, and supplies
   the `pd-` component layer the rebuilt screens are written against.

   Every value here comes from the v2 design handoff and is the intended
   production value — don't round the hexes or soften the corners.
   ============================================================================ */

:root {
  /* Dark surfaces — CHARCOAL ramp. The original near-black (#0C0D0E) read flat
     and cheap, so the whole dark ramp is lifted to the warmer charcoal Tanner
     approved on the review test. --pd-ink doubles as heading text on light,
     where a charcoal still reads as black. */
  --pd-black:        #141516;   /* primary dark section background (charcoal) */
  --pd-ink:          #1B1D1E;   /* raised dark surface / secondary buttons / headings on light */
  --pd-ink-raised:   #202223;   /* top raised dark panel */

  /* Accent */
  --pd-orange:       #FF7500;
  --pd-orange-hover: #FF8A1E;
  --pd-burnt:        #BD4600;   /* small labels/links on light */

  /* Light surfaces */
  --pd-parchment:    #F5F2EC;   /* light section background */
  --pd-surface:      #FFFFFF;
  --pd-placeholder:  #E4E1DA;   /* image placeholder bg */

  /* Lines */
  --pd-border:       #D9D6CF;   /* hairline on light */
  --pd-border-2:     #CBCDCE;   /* slightly darker */
  --pd-input:        #B3AEA4;   /* input border */

  /* Text on light */
  --pd-body:         #3C3E3F;
  --pd-muted:        #66696A;
  --pd-muted-2:      #5B5E5F;

  /* Greys */
  --pd-grey:         #9DA0A1;
  --pd-grey-2:       #A9ACAD;
  --pd-grey-3:       #B4B7B8;

  /* Success */
  --pd-green:        #2F6B45;

  /* Motion */
  --pd-ease-ui:      cubic-bezier(0.4, 0, 0.2, 1);
  --pd-ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --pd-ease-pop:     cubic-bezier(0.34, 1.4, 0.44, 1);

  /* Layout. Section spacing was 72–116px; phones now get 52px top and bottom
     so a section's content, not its padding, fills the screen. */
  --pd-max: 1520px;
  --pd-gutter: clamp(20px, 4vw, 72px);
  --pd-section-y: clamp(52px, 6.8vw, 104px);

  /* One small radius for every button, so primary and secondary actions read
     as the same family wherever they appear. */
  --pd-btn-radius: 6px;
}

/* ── Legacy token remap ───────────────────────────────────────────────────────
   Pages not covered by the v2 redesign (Fence Posts, Post product, Pack pages,
   International quote, Blog article, Checkout cancel, 404) still use the legacy
   `--navy / --accent / --surface` design tokens from index.css. Because this
   file loads last, remapping those tokens here repaints every one of those pages
   into the v2 dark/parchment/orange palette WITHOUT touching their markup — the
   "apply the palette to the uncovered pages" pass. Their structure is unchanged;
   only the colours move onto the new brand.
   ------------------------------------------------------------------------- */
:root {
  --ink: #141516;
  --navy: #141516;
  --navy-mid: #1B1D1E;
  --navy-light: #202223;
  --charcoal: #1B1D1E;
  --surface: #F5F2EC;
  --surface-strong: #FFFFFF;
  --surface-muted: #E4E1DA;
  --accent: #FF7500;
  --accent-lt: #FF8A1E;
  --text: #F1F0ED;
  --white: #FFFFFF;
  --steel: #9DA0A1;
  --steel-lt: #C9CBCC;
  --grey: #66696A;
  --grey-lt: #A9ACAD;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */

html { scroll-behavior: smooth; }

body {
  background: #F5F2EC;
  background: var(--pd-parchment);
  color: #1B1D1E;
  color: var(--pd-ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}

body a { color: inherit; text-decoration: none; }
body a:hover { color: #FF7500; color: var(--pd-orange); }
body ::selection { background: #FF7500; background: var(--pd-orange); color: #141516; color: var(--pd-black); }
body *:focus-visible { outline: 2px solid #FF7500; outline: 2px solid var(--pd-orange); outline-offset: 3px; }
summary::-webkit-details-marker { display: none; }

body::-webkit-scrollbar { width: 10px; height: 10px; }
body::-webkit-scrollbar-track { background: #141516; background: var(--pd-black); }
body::-webkit-scrollbar-thumb { background: #2A2C2E; border: 2px solid #141516; border: 2px solid var(--pd-black); }
body::-webkit-scrollbar-thumb:hover { background: #3A3D3F; }

/* ── Layout helpers ───────────────────────────────────────────────────────── */

.pd-wrap { max-width: 1520px; max-width: var(--pd-max); margin: 0 auto; }

.pd-section { padding: clamp(52px, 6.8vw, 104px) clamp(20px, 4vw, 72px); padding: var(--pd-section-y) var(--pd-gutter); }
.pd-section--black     { background: #141516; background: var(--pd-black); color: #fff; }
.pd-section--parchment { background: #F5F2EC; background: var(--pd-parchment); color: #1B1D1E; color: var(--pd-ink); }
.pd-section--white     { background: #FFFFFF; background: var(--pd-surface); color: #1B1D1E; color: var(--pd-ink); }

.pd-rule-top    { border-top: 1px solid #D9D6CF; border-top: 1px solid var(--pd-border); }
.pd-rule-bottom { border-bottom: 1px solid #D9D6CF; border-bottom: 1px solid var(--pd-border); }

/* Dark page header used by every inner page. */
.pd-pagehead { background: #141516; background: var(--pd-black); padding: clamp(28px,3vw,44px) clamp(20px, 4vw, 72px) clamp(26px,2.8vw,40px); padding: clamp(28px,3vw,44px) var(--pd-gutter) clamp(26px,2.8vw,40px); }
.pd-pagehead h1 {
  margin: 0; max-width: 26ch;
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700; text-transform: uppercase;
  font-size: clamp(30px, 3.4vw, 48px); line-height: 1; letter-spacing: 0.01em;
  color: #fff;
}
.pd-pagehead p { margin: 12px 0 0; max-width: 62ch; font-size: clamp(15px,1vw,16.5px); line-height: 1.6; color: rgba(255,255,255,0.82); }
.pd-pagebody { box-sizing: border-box; max-width: 1520px; max-width: var(--pd-max); margin: 0 auto; padding: clamp(48px,5vw,78px) clamp(20px, 4vw, 72px) clamp(52px, 6.8vw, 104px); padding: clamp(48px,5vw,78px) var(--pd-gutter) var(--pd-section-y); }

/* ── Eyebrow (orange rule + mono-ish label) ──────────────────────────────── */

.pd-eyebrow-row { display: flex; align-items: center; gap: 13px; margin-bottom: 22px; }
.pd-eyebrow-row::before { content: ""; width: 30px; height: 2px; background: #FF7500; background: var(--pd-orange); flex: none; }
.pd-eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: #BD4600; color: var(--pd-burnt);
}
.pd-eyebrow--onblack { color: #fff; }
.pd-eyebrow--orange  { color: #FF7500; color: var(--pd-orange); }

/* ── Typography ───────────────────────────────────────────────────────────── */

.pd-display {
  font-family: "Barlow Condensed", sans-serif;
  font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.01em; line-height: 0.96; margin: 0;
}
.pd-h1 { font-size: clamp(44px, 6vw, 96px); line-height: 0.88; }
/* Section headings. 30px on a phone so each section's heading sits clearly
   under the hero headline instead of competing with it. */
.pd-h2 { font-size: clamp(30px, 4.2vw, 62px); line-height: 0.96; text-wrap: balance; }
.pd-h2-sm { font-size: clamp(34px, 3.4vw, 50px); line-height: 0.94; }
.pd-h3 { font-size: clamp(24px, 2vw, 30px); line-height: 1; }

.pd-lead { font-size: clamp(16px,1.15vw,18px); line-height: 1.62; margin: 0; }
.pd-text { font-size: 16.5px; line-height: 1.65; color: #3C3E3F; color: var(--pd-body); margin: 0; }
.pd-text-sm { font-size: 15px; line-height: 1.6; color: #3C3E3F; color: var(--pd-body); margin: 0; }
.pd-mono { font-feature-settings: "tnum"; font-variant-numeric: tabular-nums; }

/* ── Buttons — sentence case, one small radius, 56px primary ─────────────── */

.pd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-sizing: border-box;
  height: 56px; padding: 0 26px;
  border: 1px solid transparent; border-radius: 6px; border-radius: var(--pd-btn-radius);
  font-family: "IBM Plex Sans", sans-serif;
  font-size: clamp(14.5px, 1.1vw, 16px); font-weight: 600;
  letter-spacing: 0.02em; text-transform: none;
  line-height: 1; white-space: nowrap; cursor: pointer;
  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1), border-color 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: background 180ms var(--pd-ease-ui), border-color 180ms var(--pd-ease-ui), color 180ms var(--pd-ease-ui);
}
.pd-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pd-btn--sm { height: 46px; padding: 0 20px; font-size: 14px; }
.pd-btn--block { width: 100%; }

.pd-btn--orange { background: #FF7500; background: var(--pd-orange); color: #1B1D1E; color: var(--pd-ink); }
.pd-btn--orange:hover { background: #FF8A1E; background: var(--pd-orange-hover); color: #1B1D1E; color: var(--pd-ink); }

.pd-btn--dark { background: #1B1D1E; background: var(--pd-ink); color: #fff; }
.pd-btn--dark:hover { background: #141516; background: var(--pd-black); color: #fff; }

/* Outline on light */
.pd-btn--outline { background: transparent; color: #1B1D1E; color: var(--pd-ink); border-color: #9C9E9F; }
.pd-btn--outline:hover { background: #F5F2EC; background: var(--pd-parchment); border-color: #1B1D1E; border-color: var(--pd-ink); color: #1B1D1E; color: var(--pd-ink); }

/* Outline on dark */
.pd-btn--ghost { background: transparent; color: #fff; border-color: rgba(203,205,206,0.45); }
.pd-btn--ghost:hover { background: rgba(255,255,255,0.07); border-color: #fff; color: #fff; }

/* Underline text link — the quiet third level after primary and secondary
   buttons. Padded to a 44px tap height without looking like a button. */
.pd-tlink {
  display: inline-block; padding: 12px 0;
  font-size: 15px; font-weight: 600; line-height: 20px; letter-spacing: 0.01em;
  color: #1B1D1E;
  color: var(--pd-ink); white-space: nowrap;
  text-decoration: underline; text-decoration-color: #FF7500; text-decoration-color: var(--pd-orange);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.pd-tlink span[aria-hidden] { color: #BD4600; color: var(--pd-burnt); }
.pd-tlink:hover { color: #BD4600; color: var(--pd-burnt); }

/* Button row: wraps on narrow screens without the buttons touching. */
.pd-btnrow { display: flex; flex-wrap: wrap; gap: 10px; }

/* Card action label (range, build and guide cards). */
.pd-card-cta { display: inline-flex; align-items: center; gap: 2px; font-size: 14px; font-weight: 700; color: #BD4600; color: var(--pd-burnt); white-space: nowrap; }

/* Section header: heading on the left, a text link on the right. On a phone
   the link drops under the heading. */
.pd-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px 32px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 40px); }
.pd-sechead .pd-eyebrow-row { margin-bottom: 14px; }
.pd-sechead .pd-h2 { max-width: 28ch; }

/* ── Cards & grids ────────────────────────────────────────────────────────── */

.pd-card {
  display: flex; flex-direction: column;
  border: 1px solid #D9D6CF;
  border: 1px solid var(--pd-border);
  border-radius: 8px;
  background: #FFFFFF;
  background: var(--pd-surface);
  overflow: hidden;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: border-color 200ms var(--pd-ease-ui);
}
/* Hover is a border change only; the old drop shadow was decoration. */
.pd-card:hover { border-color: #1B1D1E; border-color: var(--pd-ink); color: #1B1D1E; color: var(--pd-ink); }

.pd-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 12px; gap: 12px; }
.pd-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 12px; gap: 12px; }

/* Two-column blocks drive their columns through --pd-cols so pages can set an
   asymmetric desktop ratio inline (e.g. style={{ "--pd-cols": "1.05fr 1fr" }})
   while the mobile media queries below still force a single-column stack —
   which an inline `grid-template-columns` would otherwise block. */
.pd-split,
.pd-2col,
.pd-faq-group { display: grid; grid-template-columns: 1fr 1fr; grid-template-columns: var(--pd-cols, 1fr 1fr); grid-gap: clamp(40px, 5vw, 64px); gap: clamp(40px, 5vw, 64px); }

/* Hairline-divided grid: the 2px gap shows the border colour through. */
.pd-hairgrid { display: grid; grid-gap: 2px; gap: 2px; background: #D9D6CF; background: var(--pd-border); border: 1px solid #D9D6CF; border: 1px solid var(--pd-border); }
.pd-hairgrid > * { background: #F5F2EC; background: var(--pd-parchment); }
.pd-hairgrid--white > * { background: #FFFFFF; background: var(--pd-surface); }
.pd-hairgrid--hover > * { transition: background 320ms cubic-bezier(0.4, 0, 0.2, 1); transition: background 320ms var(--pd-ease-ui); }
.pd-hairgrid--hover > *:hover { background: #FFFFFF; background: var(--pd-surface); }

/* Image zoom on hover — container clips. */
.pd-zoom { overflow: hidden; }
.pd-zoom img { transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1); transition: transform 800ms var(--pd-ease-out); }
.pd-zoom:hover img { transform: scale(1.045); }

/* Pill / chip tags (square) */
.pd-chip {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid #D9D6CF;
  border: 1px solid var(--pd-border); background: #FFFFFF; background: var(--pd-surface);
  padding: 8px 15px; font-size: 13px; color: #3C3E3F; color: var(--pd-body);
  transition: border-color 240ms cubic-bezier(0.4, 0, 0.2, 1), color 240ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: border-color 240ms var(--pd-ease-ui), color 240ms var(--pd-ease-ui);
}
.pd-chip:hover { border-color: #FF7500; border-color: var(--pd-orange); color: #BD4600; color: var(--pd-burnt); }

/* ── Stars ───────────────────────────────────────────────────────────────── */
/* Solid orange. The old animated light sweep passed through near-white, so at
   any moment a 5.0 rating could look like three stars and two empty ones. */

.pd-stars {
  color: #FF7500;
  color: var(--pd-orange);
  letter-spacing: 2px;
}

/* ── Accordion (native details) ──────────────────────────────────────────── */

.pd-details { border-bottom: 1px solid #D9D6CF; border-bottom: 1px solid var(--pd-border); }
.pd-details > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 15.5px; font-weight: 600; color: #1B1D1E; color: var(--pd-ink);
}
.pd-details > summary::after { content: "▾"; color: #FF7500; color: var(--pd-orange); font-size: 11px; flex: none; transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1); transition: transform 240ms var(--pd-ease-out); }
.pd-details[open] > summary::after { transform: rotate(180deg); }
.pd-details-body { margin: 0 0 22px; font-size: 14.5px; line-height: 1.68; color: #3C3E3F; color: var(--pd-body); max-width: 680px; }

/* ── Ladder (band cells) ──────────────────────────────────────────────────── */

.pd-ladder { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 1px; gap: 1px; background: #D9D6CF; background: var(--pd-border); border: 1px solid #D9D6CF; border: 1px solid var(--pd-border); }
.pd-ladder > div { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 10px; background: #FFFFFF; background: var(--pd-surface); }
.pd-ladder .pd-ladder-q { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: #5B5E5F; color: var(--pd-muted-2); white-space: nowrap; }
.pd-ladder .pd-ladder-p { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 26px; line-height: 1; color: #1B1D1E; color: var(--pd-ink); }

/* ── Scroll reveal removed ───────────────────────────────────────────────── */
/* The fade/slide-up was dropped for performance — elements render in place.
   Selectors kept as a no-op so the data-reveal markup can stay. */
[data-reveal], [data-reveal].pd-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ============================================================================
   CHROME — announcement, nav, footer, cart
   ============================================================================ */

/* ── Announcement bar ─────────────────────────────────────────────────────── */
.pd-announce { background: #141516; background: var(--pd-black); border-bottom: 1px solid rgba(203,205,206,0.14); display: flex; align-items: center; padding: 0 clamp(20px, 4vw, 72px); padding: 0 var(--pd-gutter); }
.pd-announce-inner {
  max-width: 1520px;
  max-width: var(--pd-max); margin: 0 auto; width: 100%; min-height: 38px;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 3px 16px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: #B4B7B8; color: var(--pd-grey-3);
}
.pd-announce-inner .pd-announce-strong { color: #fff; white-space: nowrap; }
.pd-announce-inner .pd-announce-sep { width: 1px; height: 12px; background: rgba(203,205,206,0.3); flex: none; }
/* Phone: one line at a time, sliding vertically through the same four facts the
   desktop row shows. The track moves by whole rows, so nothing ever half-shows. */
.pd-announce-rotator { --pd-announce-row: 18px; width: 100%; height: var(--pd-announce-row); overflow: hidden; }
.pd-announce-track { display: flex; flex-direction: column; transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1); transition: transform 520ms var(--pd-ease-out); }
.pd-announce-track > span { display: flex; align-items: center; justify-content: center; height: var(--pd-announce-row); flex: none; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .pd-announce-track { transition: none; } }
.pd-announce-inner span:not(.pd-announce-sep) { white-space: nowrap; }

/* ── Nav ──────────────────────────────────────────────────────────────────── */
.pd-nav { position: sticky; top: 0; z-index: 400; background: #141516; background: var(--pd-black); border-bottom: 1px solid rgba(203,205,206,0.16); transition: box-shadow 320ms cubic-bezier(0.4, 0, 0.2, 1); transition: box-shadow 320ms var(--pd-ease-ui); }
.pd-nav--scrolled { box-shadow: 0 14px 34px -18px rgba(0,0,0,0.7); }
.pd-nav-inner { max-width: 1520px; max-width: var(--pd-max); margin: 0 auto; padding: 0 clamp(20px, 4vw, 72px); padding: 0 var(--pd-gutter); height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.pd-nav-logo { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.pd-nav-logo img { height: 40px; width: auto; flex: none; }

.pd-nav-links { display: flex; align-items: center; gap: 2px; }
.pd-nav-link {
  position: relative;
  font-size: 15px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255,255,255,0.84); height: 88px; padding: 0 14px;
  display: inline-flex; align-items: center; gap: 7px;
  transition: color 180ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: color 180ms var(--pd-ease-ui), box-shadow 180ms var(--pd-ease-ui);
}
.pd-nav-link:hover { color: #fff; box-shadow: inset 0 -3px 0 rgba(255,117,0,0.55); }
.pd-nav-link.is-active { color: #FF7500; color: var(--pd-orange); box-shadow: inset 0 -3px 0 #FF7500; box-shadow: inset 0 -3px 0 var(--pd-orange); }
.pd-nav-link.is-active:hover { color: #FF8A1E; color: var(--pd-orange-hover); }
.pd-nav-caret { font-size: 8px; opacity: 0.55; transform: translateY(1px); }

.pd-nav-menu { position: relative; }
.pd-nav-panel {
  position: absolute; top: 100%; left: 0;
  background: #FFFFFF;
  background: var(--pd-surface); border: 1px solid #D9D6CF; border: 1px solid var(--pd-border); border-top: 3px solid #FF7500; border-top: 3px solid var(--pd-orange);
  box-shadow: 0 30px 70px -18px rgba(7,23,35,0.45);
  padding: 8px; display: grid; grid-gap: 6px; gap: 6px;
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.985); transform-origin: top left;
  transition: opacity 260ms cubic-bezier(0.16, 1, 0.3, 1), transform 260ms cubic-bezier(0.16, 1, 0.3, 1), visibility 260ms;
  transition: opacity 260ms var(--pd-ease-out), transform 260ms var(--pd-ease-out), visibility 260ms;
}
.pd-nav-panel.is-open { opacity: 1; visibility: visible; transform: none; }
.pd-nav-row { display: flex; gap: 14px; align-items: center; padding: 10px; transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: background 200ms var(--pd-ease-ui); }
.pd-nav-row:hover { background: #F5F2EC; background: var(--pd-parchment); }
.pd-nav-row img { width: 48px; height: 48px; background: #FFFFFF; background: var(--pd-surface); border: 1px solid #D9D6CF; border: 1px solid var(--pd-border); flex: none; }
.pd-nav-row-name { display: block; font-size: 14px; font-weight: 600; color: #1B1D1E; color: var(--pd-ink); margin-bottom: 2px; }
.pd-nav-row-note { display: block; font-size: 12.5px; color: #66696A; color: var(--pd-muted); line-height: 1.4; }

/* Category-led grouped mega-menu (Products) */
.pd-nav-panel--groups { padding: 18px 14px 14px; gap: 20px; }
.pd-nav-group { display: flex; flex-direction: column; gap: 2px; }
.pd-nav-group-head {
  display: block; padding: 0 10px 8px; margin-bottom: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: #BD4600;
  color: var(--pd-burnt); border-bottom: 1px solid #D9D6CF; border-bottom: 1px solid var(--pd-border);
}
.pd-nav-grouplink { display: block; padding: 8px 10px; border-radius: 6px; transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: background 200ms var(--pd-ease-ui); }
.pd-nav-grouplink:hover { background: #F5F2EC; background: var(--pd-parchment); }

.pd-nav-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.pd-nav-cta {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; letter-spacing: 0.02em; text-transform: none;
  color: #1B1D1E;
  color: var(--pd-ink); background: #FF7500; background: var(--pd-orange); padding: 0 22px; height: 48px;
  border-radius: 6px;
  border-radius: var(--pd-btn-radius);
  transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: background 180ms var(--pd-ease-ui);
}
.pd-nav-cta:hover { background: #FF8A1E; background: var(--pd-orange-hover); color: #1B1D1E; color: var(--pd-ink); }
.pd-nav-icon-btn {
  position: relative; width: 52px; height: 52px; display: grid; place-items: center;
  background: transparent; border: 1px solid rgba(203,205,206,0.38); color: #fff; cursor: pointer; font-family: inherit;
  transition: border-color 180ms cubic-bezier(0.4, 0, 0.2, 1), background 180ms cubic-bezier(0.4, 0, 0.2, 1);
  transition: border-color 180ms var(--pd-ease-ui), background 180ms var(--pd-ease-ui);
}
.pd-nav-icon-btn:hover { border-color: #FF7500; border-color: var(--pd-orange); background: rgba(255,117,0,0.1); }
.pd-nav-badge {
  position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px;
  background: #FF7500;
  background: var(--pd-orange); color: #141516; color: var(--pd-black);
  font-size: 10px; font-weight: 600; display: grid; place-items: center;
  animation: pdBadge 420ms cubic-bezier(0.34, 1.4, 0.44, 1);
  animation: pdBadge 420ms var(--pd-ease-pop);
}
@keyframes pdBadge { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.pd-nav-toggle { display: none; width: 52px; height: 52px; place-items: center; background: transparent; border: 1px solid rgba(203,205,206,0.38); color: #fff; cursor: pointer; font-family: inherit; }

/* Mobile drawer. Grouped like the desktop Products menu, with compact 46px
   rows (the old 24px capitals ran 59px a row and pushed half the range below
   the fold). Closed, it is visibility:hidden as well as off-screen, so its
   links drop out of the tab order and the accessibility tree. */
.pd-nav-scrim { position: fixed; inset: 0; z-index: 500; background: rgba(6,7,8,0.6); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1), visibility 300ms; transition: opacity 300ms var(--pd-ease-ui), visibility 300ms; }
.pd-nav-scrim.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.pd-nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 501; width: min(88vw, 380px);
  background: #141516;
  background: var(--pd-black); border-left: 1px solid rgba(203,205,206,0.16);
  display: flex; flex-direction: column;
  transform: translateX(100%); visibility: hidden;
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 320ms;
  transition: transform 320ms var(--pd-ease-out), visibility 0s linear 320ms;
}
.pd-nav-drawer.is-open { transform: translateX(0); visibility: visible; transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; transition: transform 320ms var(--pd-ease-out), visibility 0s; }
.pd-nav-drawer-head { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 12px 0 22px; border-bottom: 1px solid rgba(203,205,206,0.16); flex: none; }
.pd-nav-drawer-head span { font-size: 11.5px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase; color: #9DA0A1; color: var(--pd-grey); }
.pd-nav-drawer-close { width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 1px solid rgba(203,205,206,0.38); border-radius: 6px; border-radius: var(--pd-btn-radius); color: #fff; cursor: pointer; font-family: inherit; }
.pd-nav-drawer-list { flex: 1 1; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px 0 calc(24px + env(safe-area-inset-bottom)); }
.pd-nav-dgroup { padding: 10px 0 4px; }
.pd-nav-dgroup + .pd-nav-dgroup { border-top: 1px solid rgba(203,205,206,0.12); }
.pd-nav-dgroup-head { display: block; margin: 0; padding: 6px 22px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #FF7500; color: var(--pd-orange); }
.pd-nav-drawer-list .pd-nav-dlink {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 46px; padding: 0 22px;
  font-size: 16px; font-weight: 500; line-height: 1.25; color: #fff;
}
.pd-nav-drawer-list .pd-nav-dlink::after { content: "›"; flex: none; font-size: 20px; line-height: 1; color: rgba(255,255,255,0.35); }
.pd-nav-drawer-list .pd-nav-dlink:hover,
.pd-nav-drawer-list .pd-nav-dlink.is-active { color: #FF7500; color: var(--pd-orange); }
.pd-nav-dlink-note { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #9DA0A1; color: var(--pd-grey); }
.pd-nav-dlink--all { font-weight: 600; }
/* Help & company links: a quieter two-column block under the products. */
.pd-nav-dgrid { display: grid; grid-template-columns: 1fr 1fr; padding: 0 10px; }
.pd-nav-drawer-list .pd-nav-dgrid a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px;
  font-size: 14.5px; font-weight: 500; color: #B4B7B8; color: var(--pd-grey-3);
}
.pd-nav-drawer-list .pd-nav-dgrid a:hover,
.pd-nav-drawer-list .pd-nav-dgrid a.is-active { color: #FF7500; color: var(--pd-orange); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.pd-footer { background: #141516; background: var(--pd-black); border-top: 3px solid #FF7500; border-top: 3px solid var(--pd-orange); padding: clamp(40px,5vw,80px) clamp(20px, 4vw, 72px) 32px; padding: clamp(40px,5vw,80px) var(--pd-gutter) 32px; }
.pd-footer-grid { max-width: 1520px; max-width: var(--pd-max); margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; grid-gap: 48px; gap: 48px; margin-bottom: 44px; }
.pd-footer-logo { width: 290px; max-width: 100%; height: auto; margin-bottom: 20px; }
.pd-footer-blurb { margin: 0 0 18px; max-width: 340px; font-size: 14.5px; line-height: 1.6; color: #A9ACAD; color: var(--pd-grey-2); }
.pd-footer-badges { display: flex; flex-wrap: wrap; gap: 7px; }
.pd-footer-badge { display: inline-flex; align-items: center; height: 28px; padding: 0 11px; border: 1px solid rgba(203,205,206,0.28); font-size: 11px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: #A9ACAD; color: var(--pd-grey-2); }
.pd-footer-social { display: flex; gap: 8px; margin-top: 20px; }
.pd-footer-social a { display: inline-flex; align-items: center; gap: 9px; height: 44px; padding: 0 15px; border: 1px solid rgba(203,205,206,0.28); border-radius: 6px; border-radius: var(--pd-btn-radius); font-size: 12px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: #A9ACAD; color: var(--pd-grey-2); transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms, background 200ms; transition: border-color 200ms var(--pd-ease-ui), color 200ms, background 200ms; }
.pd-footer-social a:hover { background: #FF7500; background: var(--pd-orange); border-color: #FF7500; border-color: var(--pd-orange); color: #1B1D1E; color: var(--pd-ink); }
.pd-footer-col-head { font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #FF7500; color: var(--pd-orange); margin: 0 0 16px; }
/* The toggle only exists on phones; on desktop the heading is plain text. */
.pd-footer-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; padding: 0; background: none; border: 0; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; text-align: left; }
.pd-footer-chev { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: transform 200ms var(--pd-ease-ui); }
.pd-footer-toggle[aria-expanded="true"] .pd-footer-chev { transform: translateY(2px) rotate(-135deg); }
.pd-footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pd-footer-col ul[hidden] { display: none; }
.pd-footer-col a { display: inline-flex; align-items: center; min-height: 32px; font-size: 14px; color: #A9ACAD; color: var(--pd-grey-2); transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: color 200ms var(--pd-ease-ui); }
.pd-footer-col a:hover { color: #fff; }
.pd-footer-legal { max-width: 1520px; max-width: var(--pd-max); margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.08); padding-top: 22px; display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; font-size: 13px; color: #B4B7B8; color: var(--pd-grey-3); }
.pd-footer-policies { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 0; padding: 0; list-style: none; }
.pd-footer-policies a, .pd-footer-contact a { display: inline-flex; align-items: center; min-height: 36px; color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,0.3); text-underline-offset: 4px; }
.pd-footer-policies a:hover, .pd-footer-contact a:hover { color: #FF7500; color: var(--pd-orange); text-decoration-color: #FF7500; text-decoration-color: var(--pd-orange); }
.pd-footer-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; }

/* ── Cart drawer (re-skin of legacy .st-cart-*) ──────────────────────────── */
.st-cart-backdrop { background: rgba(0,0,0,0.35); visibility: hidden; transition: opacity 250ms ease, visibility 0s linear 250ms; }
.st-cart-backdrop.is-open { visibility: visible; transition: opacity 250ms ease, visibility 0s; }
/* The closed drawer parks just off the right edge. Its drop shadow used to fall
   back across the viewport and shade the right side of every page, so the
   shadow only exists while it is open, and the closed drawer is hidden (which
   also keeps its buttons out of the tab order). */
.st-cart-drawer { background: #FFFFFF; background: var(--pd-surface); border-left: none; box-shadow: none; color: #1B1D1E; color: var(--pd-ink); visibility: hidden; transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 480ms; transition: transform 480ms var(--pd-ease-out), visibility 0s linear 480ms; width: min(440px, 100vw); }
.st-cart-drawer.is-open { visibility: visible; box-shadow: -24px 0 60px -30px rgba(0,0,0,0.35); transition: transform 480ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s; transition: transform 480ms var(--pd-ease-out), visibility 0s; }
.st-cart-header { background: #141516; background: var(--pd-black); border-bottom: none; height: 72px; }
.st-cart-title { color: #fff; font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.01em; }
.st-cart-title svg { color: #FF7500; color: var(--pd-orange); }
.st-cart-count { background: rgba(255,255,255,0.12); border: none; color: #fff; }
.st-cart-close { color: #fff; border: 1px solid rgba(255,255,255,0.28); }
.st-cart-close:hover { background: #FF7500; background: var(--pd-orange); border-color: #FF7500; border-color: var(--pd-orange); color: #1B1D1E; color: var(--pd-ink); }
.st-cart-warning, .st-cart-preorder { background: #FDF3E7; border: 1px solid #EFD4B2; color: #3C3E3F; color: var(--pd-body); }
.st-cart-warning svg, .st-cart-preorder svg { color: #BD4600; color: var(--pd-burnt); }
.st-cart-warning a { color: #BD4600; color: var(--pd-burnt); }
.st-cart-preorder strong { color: #1B1D1E; color: var(--pd-ink); }
.st-cart-empty { color: #5B5E5F; color: var(--pd-muted-2); }
.st-cart-empty svg { color: #CBCDCE; color: var(--pd-border-2); opacity: 1; }
.st-cart-line { border-bottom: 1px solid #E4E1DA; border-bottom: 1px solid var(--pd-placeholder); }
.st-cart-line-title { color: #1B1D1E; color: var(--pd-ink); font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 18px; }
.st-cart-line-attrs li { color: #5B5E5F; color: var(--pd-muted-2); }
.st-cart-attr-key { color: #3C3E3F; color: var(--pd-body); }
.st-cart-line-price { color: #1B1D1E; color: var(--pd-ink); font-family: "Barlow Condensed", sans-serif; font-weight: 700; }
.st-cart-qty-btn { background: #F5F2EC; background: var(--pd-parchment); border: 1px solid #B3AEA4; border: 1px solid var(--pd-input); color: #1B1D1E; color: var(--pd-ink); }
.st-cart-qty-btn:hover:not(:disabled) { background: #E6E1D8; }
.st-cart-qty { color: #1B1D1E; color: var(--pd-ink); }
.st-cart-remove { color: #5B5E5F; color: var(--pd-muted-2); }
.st-cart-remove:hover:not(:disabled) { color: #B3401A; background: rgba(179,64,26,0.08); }
.st-cart-footer { background: #F5F2EC; background: var(--pd-parchment); border-top: 1px solid #E4E1DA; border-top: 1px solid var(--pd-placeholder); }
.st-cart-subtotal span { color: #5B5E5F; color: var(--pd-muted-2); }
.st-cart-subtotal strong { color: #1B1D1E; color: var(--pd-ink); font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 34px; }
.st-cart-footer-note { color: #5B5E5F; color: var(--pd-muted-2); }
.st-cart-drawer .btn-accent, .st-cart-drawer .btn-secondary, .st-cart-empty .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; height: 56px; padding: 0 24px;
  border-radius: 6px;
  border-radius: var(--pd-btn-radius); font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: 0.02em;
  text-transform: none; box-shadow: none; cursor: pointer; transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1), border-color 180ms; transition: background 180ms var(--pd-ease-ui), border-color 180ms;
}
.st-cart-drawer .btn-accent { background: #FF7500; background: var(--pd-orange); color: #1B1D1E; color: var(--pd-ink); border: 1px solid transparent; }
.st-cart-drawer .btn-accent:hover:not(:disabled) { background: #FF8A1E; background: var(--pd-orange-hover); transform: none; box-shadow: none; }
.st-cart-drawer .btn-secondary, .st-cart-empty .btn-secondary { background: transparent; color: #1B1D1E; color: var(--pd-ink); border: 1px solid #9C9E9F; }
.st-cart-drawer .btn-secondary:hover, .st-cart-empty .btn-secondary:hover { background: #F5F2EC; background: var(--pd-parchment); border-color: #1B1D1E; border-color: var(--pd-ink); }
.st-cart-loading-overlay { background: rgba(245,242,236,0.7); }
.st-cart-spinner { border-color: #D9D6CF; border-color: var(--pd-border); border-top-color: #FF7500; border-top-color: var(--pd-orange); }

/* ============================================================================
   HOME
   ============================================================================ */

/* ── Hero ── */
.pd-hero { position: relative; background: #141516; background: var(--pd-black); overflow: hidden; padding: 0 clamp(20px, 4vw, 72px); padding: 0 var(--pd-gutter); min-height: clamp(540px, calc(79svh - 88px), 820px); display: flex; flex-direction: column; }
.pd-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: opacity 1400ms cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 1400ms var(--pd-ease-ui); }
/* Scrims keep the headline readable. The left-to-right one now fades out
   instead of darkening again at the right edge (that was a vignette, not
   readability), and phones get an even wash because text runs full width. */
.pd-hero-scrim-a { position: absolute; inset: 0; background: linear-gradient(94deg, rgba(12,13,14,0.95) 0%, rgba(12,13,14,0.86) 26%, rgba(12,13,14,0.5) 52%, rgba(12,13,14,0.26) 74%, rgba(12,13,14,0.26) 100%); }
.pd-hero-scrim-b { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,13,14,0.6) 0%, rgba(12,13,14,0.1) 22%, rgba(12,13,14,0.42) 54%, rgba(12,13,14,0.88) 100%); }
.pd-hero-grid { position: relative; z-index: 2; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; gap: clamp(24px,2.4vh,40px); width: 100%; max-width: 1520px; max-width: var(--pd-max); margin: 0 auto; padding: clamp(28px,2.6vw,42px) 0 clamp(30px,2.6vw,44px); }
.pd-hero-arrows { display: flex; justify-content: flex-end; gap: 1px; }
.pd-hero-arrow { width: 44px; height: 38px; display: grid; place-items: center; border: 0; background: rgba(255,255,255,0.14); color: #fff; font-size: 18px; line-height: 1; cursor: pointer; transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms; transition: background 180ms var(--pd-ease-ui), color 180ms; }
.pd-hero-arrow:hover { background: #FF7500; background: var(--pd-orange); color: #1B1D1E; color: var(--pd-ink); }
.pd-hero h1 { margin: 0 0 clamp(18px,1.6vw,24px); font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(44px,6.6vw,124px); line-height: 0.88; letter-spacing: 0.002em; color: #fff; text-wrap: balance; }
.pd-hero-line { display: block; }
.pd-hero-line--accent { color: #FF7500; color: var(--pd-orange); }
.pd-hero-bottom { display: grid; grid-template-columns: minmax(0,1fr) minmax(460px,0.86fr); grid-gap: clamp(28px,3vw,52px); gap: clamp(28px,3vw,52px); align-items: end; padding-top: clamp(16px,1.6vw,24px); min-width: 0; }
.pd-hero-bottom > div { min-width: 0; }
.pd-hero-sub p { margin: 0 0 clamp(20px,2vw,28px); max-width: 440px; font-size: clamp(16px,1.1vw,18px); line-height: 1.55; color: rgba(255,255,255,0.9); }
.pd-hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; }

/* Featured bracket: the product photo gets close to half the card so the
   bracket itself is readable at a glance, not a thumbnail beside a paragraph. */
.pd-hero-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); background: #FFFFFF; background: var(--pd-surface); border-radius: 8px 8px 0 0; overflow: hidden; }
.pd-hero-card-media { display: grid; place-items: center; padding: clamp(10px,1.2vw,18px); background: #fff; border-right: 1px solid #E7E3DB; }
.pd-hero-card-media img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; transition: transform 500ms cubic-bezier(0.16, 1, 0.3, 1); transition: transform 500ms var(--pd-ease-out); }
.pd-hero-card:hover .pd-hero-card-media img { transform: scale(1.04); }
.pd-hero-card-body { display: flex; flex-direction: column; min-width: 0; padding: clamp(16px,1.5vw,22px) clamp(16px,1.6vw,24px); }
.pd-hero-card-spec { font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #BD4600; color: var(--pd-burnt); }
.pd-hero-card-name { margin-top: 8px; font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(26px,2.1vw,34px); line-height: 0.95; color: #1B1D1E; color: var(--pd-ink); }
.pd-hero-card-price { display: block; margin-top: auto; padding-top: 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #5B5E5F; color: var(--pd-muted-2); }
.pd-hero-card-price strong { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: clamp(30px,2.4vw,38px); line-height: 1; letter-spacing: 0; color: #1B1D1E; color: var(--pd-ink); margin-right: 4px; }
.pd-hero-card-best { display: block; margin-top: 4px; font-size: 12px; letter-spacing: 0.02em; text-transform: none; font-weight: 500; color: #66696A; color: var(--pd-muted); }
.pd-hero-cardcta { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; margin-top: 14px; border-radius: 6px; border-radius: var(--pd-btn-radius); background: #1B1D1E; background: var(--pd-ink); color: #fff; font-size: 14.5px; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; transition: background 180ms cubic-bezier(0.4, 0, 0.2, 1), color 180ms; transition: background 180ms var(--pd-ease-ui), color 180ms; }
.pd-hero-card:hover .pd-hero-cardcta { background: #FF7500; background: var(--pd-orange); color: #1B1D1E; color: var(--pd-ink); }
.pd-hero-card:hover { color: inherit; }
.pd-hero-proof { display: flex; align-items: center; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; padding: 11px clamp(16px,1.5vw,22px); background: #1B1D1E; background: var(--pd-ink); border-radius: 0 0 8px 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.7); }
.pd-hero-proof a { display: inline-flex; align-items: center; gap: 9px; min-height: 28px; color: #fff; white-space: nowrap; }
.pd-hero-proof-stars { font-size: 12px; letter-spacing: 2px; color: #FF7500; color: var(--pd-orange); }

/* ── Range grid (Home + Brackets hub) ── */
.pd-range-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 12px; gap: 12px; }
.pd-rangecard-media { display: block; position: relative; aspect-ratio: 4/3; overflow: hidden; }
.pd-rangecard-media img { width: 100%; height: 100%; }
.pd-rangecard-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; color: rgba(255,255,255,0.5); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.pd-rangecard-body { display: flex; flex-direction: column; flex: 1 1; padding: 22px 22px 0; }
.pd-rangecard-tag { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #BD4600; color: var(--pd-burnt); }
.pd-rangecard-name { display: block; margin-bottom: 10px; font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 28px; line-height: 1; color: #1B1D1E; color: var(--pd-ink); }
.pd-rangecard-note { display: block; flex: 1 1; margin-bottom: 18px; font-size: 14.5px; line-height: 1.55; color: #3C3E3F; color: var(--pd-body); }
.pd-rangecard-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin: 0 22px; padding: 16px 0 18px; border-top: 1px solid #D9D6CF; border-top: 1px solid var(--pd-border); }
.pd-rangecard-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; min-width: 0; }
.pd-rangecard-price strong { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 26px; line-height: 1; color: #1B1D1E; color: var(--pd-ink); white-space: nowrap; }
.pd-rangecard-price span { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #66696A; color: var(--pd-muted); }

.pd-note-bar { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; background: #1B1D1E; background: var(--pd-ink); padding: 22px 26px; }
.pd-note-bar > span:first-child { width: 9px; height: 9px; background: #FF7500; background: var(--pd-orange); flex: none; }
.pd-note-bar p { font-size: 15px; font-weight: 500; line-height: 1.55; color: #fff; flex: 1 1; min-width: 300px; margin: 0; }
.pd-note-bar a { display: inline-flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #FF7500; color: var(--pd-orange); white-space: nowrap; }
.pd-note-bar a:hover { color: #FF8A1E; color: var(--pd-orange-hover); }

/* ── Install video ── */
.pd-videogrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "intro video" "cta video"; grid-column-gap: clamp(32px, 5vw, 80px); column-gap: clamp(32px, 5vw, 80px); align-items: start; }
.pd-videogrid-intro { grid-area: intro; align-self: end; max-width: 520px; }
.pd-videogrid-intro .pd-h2 { margin-bottom: 16px; }
.pd-videogrid-media { grid-area: video; }
.pd-videogrid-cta { grid-area: cta; margin-top: 26px; }
/* The frame takes the footage's own 9:16 shape. Width is derived from a
   height cap so the player never runs taller than about two thirds of the
   screen, and the whole clip stays in view without letterboxing or cropping. */
.pd-video-portrait { width: min(100%, calc(min(64vh, 640px) * 0.5625)); aspect-ratio: 9 / 16; margin: 0 auto; border-radius: 8px; overflow: hidden; background: #000; }
@supports (height: 1svh) { .pd-video-portrait { width: min(100%, calc(min(64svh, 640px) * 0.5625)); } }
.pd-video-portrait video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }

/* ── Made for DIY band ── */
.pd-diy-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-gap: clamp(24px, 4vw, 64px); gap: clamp(24px, 4vw, 64px); align-items: end; margin-bottom: clamp(28px, 3vw, 44px); }
.pd-diy-head .pd-h2 { max-width: 18ch; color: #fff; }
.pd-diy-lead { margin: 0; max-width: 50ch; font-size: clamp(16px, 1.1vw, 17.5px); line-height: 1.6; color: rgba(255,255,255,0.84); }
.pd-diy-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1px; gap: 1px; margin: 0; padding: 0; list-style: none; background: rgba(203,205,206,0.2); border: 1px solid rgba(203,205,206,0.2); border-radius: 8px; overflow: hidden; }
.pd-diy-grid li { display: flex; flex-direction: column; gap: 9px; padding: clamp(18px, 2vw, 28px); background: #141516; background: var(--pd-black); }
.pd-diy-rule { width: 22px; height: 2px; background: #FF7500; background: var(--pd-orange); }
.pd-diy-grid h3 { margin: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(20px, 1.7vw, 26px); line-height: 1; color: #fff; }
.pd-diy-grid p { margin: 0; font-size: 14px; line-height: 1.55; color: #B4B7B8; color: var(--pd-grey-3); }
.pd-diy-foot { margin-top: 18px; }
.pd-tlink--ondark { color: #fff; }
.pd-tlink--ondark:hover { color: #FF7500; color: var(--pd-orange); }

/* ── Build photos ── */
.pd-builds { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 12px; gap: 12px; }
.pd-build-card { display: flex; flex-direction: column; background: #FFFFFF; background: var(--pd-surface); border: 1px solid #D9D6CF; border: 1px solid var(--pd-border); border-radius: 8px; overflow: hidden; transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: border-color 200ms var(--pd-ease-ui); }
.pd-build-card:hover { border-color: #1B1D1E; border-color: var(--pd-ink); color: inherit; }
.pd-build-card-media { display: block; aspect-ratio: 4 / 5; background: #E4E1DA; background: var(--pd-placeholder); }
.pd-build-card-media img { width: 100%; height: 100%; object-fit: cover; }
.pd-build-card-body { display: flex; flex-direction: column; flex: 1 1; gap: 8px; padding: 16px 18px 18px; }
.pd-build-card-title { font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 22px; line-height: 1; color: #1B1D1E; color: var(--pd-ink); }
.pd-build-card-caption { flex: 1 1; font-size: 14px; line-height: 1.5; color: #3C3E3F; color: var(--pd-body); }

/* Uses row under the build photos: a quiet list, not a wall of boxed labels. */
.pd-uses { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; margin-top: clamp(18px, 2vw, 26px); }
.pd-uses-label { font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #BD4600; color: var(--pd-burnt); }
.pd-uses ul { display: flex; flex-wrap: wrap; gap: 8px 10px; margin: 0; padding: 0; list-style: none; }
.pd-uses li { padding: 7px 13px; border: 1px solid #D9D6CF; border: 1px solid var(--pd-border); border-radius: 999px; background: #FFFFFF; background: var(--pd-surface); font-size: 13.5px; color: #3C3E3F; color: var(--pd-body); }

/* ── Bulk pricing band ── */
.pd-parallax-band { position: relative; overflow: hidden; background: #141516; background: var(--pd-black); }
.pd-parallax-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* One even wash for readable text. The old version ran dark down the right
   edge only, which on a phone read as a shadow rather than an overlay. */
.pd-parallax-scrim { position: absolute; inset: 0; background: rgba(12,13,14,0.8); }
.pd-bulk-grid { position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); grid-gap: clamp(32px, 5vw, 80px); gap: clamp(32px, 5vw, 80px); align-items: center; }
.pd-bulk-grid .pd-h2 { margin-bottom: 16px; }
.pd-bulk-lead { margin: 0 0 26px; max-width: 42ch; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.86); }
.pd-bulk-table { background: #1B1D1E; background: var(--pd-ink); border-top: 3px solid #FF7500; border-top: 3px solid var(--pd-orange); border-radius: 0 0 8px 8px; padding: clamp(18px, 2.2vw, 30px); }
.pd-bulk-table table { width: 100%; border-collapse: collapse; }
.pd-bulk-table caption { caption-side: top; text-align: left; padding-bottom: 12px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #FF7500; color: var(--pd-orange); }
.pd-bulk-table th, .pd-bulk-table td { padding: 11px 0; border-bottom: 1px solid rgba(203,205,206,0.14); text-align: right; }
.pd-bulk-table thead th { padding-top: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #9DA0A1; color: var(--pd-grey); }
.pd-bulk-table th:first-child { text-align: left; }
.pd-bulk-table tbody th { font-size: 14px; font-weight: 600; color: #B4B7B8; color: var(--pd-grey-3); }
.pd-bulk-table tbody td { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 24px; line-height: 1; color: #fff; }
.pd-bulk-table tbody tr.is-best td, .pd-bulk-table tbody tr.is-best th { color: #FF7500; color: var(--pd-orange); }
.pd-bulk-table tbody tr:last-child th, .pd-bulk-table tbody tr:last-child td { border-bottom: 0; }
.pd-bulk-table p { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: #B4B7B8; color: var(--pd-grey-3); }

/* ── Reviews ── */
.pd-reviews { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 12px; gap: 12px; margin: 0; padding: 0; list-style: none; }
.pd-review-card { border: 1px solid #D9D6CF; border: 1px solid var(--pd-border); border-radius: 8px; padding: 20px; background: #FFFFFF; background: var(--pd-surface); display: flex; flex-direction: column; gap: 10px; }
.pd-review-text { margin: 0; flex: 1 1; font-size: 15.5px; line-height: 1.55; color: #3C3E3F; color: var(--pd-body); }
.pd-review-text.is-empty { color: #66696A; color: var(--pd-muted); font-style: italic; }
.pd-review-by { display: flex; flex-direction: column; gap: 2px; }
.pd-review-name { font-size: 14px; font-weight: 600; color: #1B1D1E; color: var(--pd-ink); }
.pd-review-meta { font-size: 12px; font-weight: 500; color: #66696A; color: var(--pd-muted); }
/* Customer's own job photo on a review card (components/ReviewPhoto.jsx). */
.pd-review-photo { display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 6px; overflow: hidden; background: #E4E1DA; background: var(--pd-placeholder, #e9e6df); cursor: zoom-in; }
.pd-review-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1); transition: transform 400ms var(--pd-ease-out); }
/* Wide job photos (photo.fit "contain" in data/reviews.js): a 16/9 cover crop
   cuts the outer corners off a panoramic shot, so those render whole. */
.pd-review-photo.is-contain img { object-fit: contain; }
.pd-review-photo:hover img { transform: scale(1.03); }
.pd-reviews-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-top: 18px; }
/* Reviews summary (stars over the "5.0 · N reviews" line). Right-aligned beside
   the heading on desktop; left-aligned under it on mobile. */
.pd-review-summary { text-align: right; }
.pd-review-summary .pd-stars { display: block; }
.pd-review-summary a { display: inline-block; margin-top: 6px; font-size: 13.5px; color: #66696A; color: var(--pd-muted); }

/* ── Learn more (guides) ── */
.pd-guides { display: grid; grid-template-columns: repeat(3, 1fr); grid-gap: 12px; gap: 12px; }
.pd-guide-card { display: flex; flex-direction: column; background: #FFFFFF; background: var(--pd-surface); border: 1px solid #D9D6CF; border: 1px solid var(--pd-border); border-radius: 8px; overflow: hidden; transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: border-color 200ms var(--pd-ease-ui); }
.pd-guide-card:hover { border-color: #1B1D1E; border-color: var(--pd-ink); color: inherit; }
.pd-guide-card-media { position: relative; display: block; aspect-ratio: 16 / 10; background: #E4E1DA; background: var(--pd-placeholder); overflow: hidden; }
.pd-guide-card-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1); transition: transform 800ms var(--pd-ease-out); }
.pd-guide-card:hover .pd-guide-card-media > img { transform: scale(1.04); }
.pd-guide-card-media.is-pair { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 1px; gap: 1px; background: #D9D6CF; background: var(--pd-border); }
.pd-guide-card-media.is-pair > img { object-fit: contain; background: #fff; padding: 8%; }
.pd-guide-card-badge { position: absolute; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 4px; background: #1B1D1E; background: var(--pd-ink); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.pd-guide-card-badge::before { content: ""; width: 0; height: 0; border-left: 7px solid #FF7500; border-left: 7px solid var(--pd-orange); border-top: 4.5px solid transparent; border-bottom: 4.5px solid transparent; }
.pd-guide-card-body { display: flex; flex-direction: column; flex: 1 1; gap: 8px; padding: 20px 22px 22px; }
.pd-guide-card-title { font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; font-size: 26px; line-height: 1; color: #1B1D1E; color: var(--pd-ink); }
.pd-guide-card-text { flex: 1 1; font-size: 14.5px; line-height: 1.55; color: #3C3E3F; color: var(--pd-body); }

/* ── Closer (orange brand surface) ── */
.pd-closer { position: relative; background: #FF7500; background: var(--pd-orange); overflow: hidden; }
.pd-closer-lines { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(90deg, rgba(17,19,21,0.07) 0 1px, transparent 1px 8.3333%); }
/* The site-wide focus ring is orange, which vanishes on this background. */
.pd-closer *:focus-visible { outline-color: #1B1D1E; outline-color: var(--pd-ink); }
.pd-closer-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); grid-gap: clamp(28px, 5vw, 80px); gap: clamp(28px, 5vw, 80px); align-items: end; }
.pd-closer-eyebrow { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #1B1D1E; color: var(--pd-ink); }
.pd-closer-eyebrow span { width: 30px; height: 2px; background: #1B1D1E; background: var(--pd-ink); flex: none; }
.pd-closer-title { margin: 0 0 18px; font-size: clamp(38px, 5vw, 80px); line-height: 0.92; color: #1B1D1E; color: var(--pd-ink); }
.pd-closer-lead { margin: 0; max-width: 46ch; font-size: clamp(16px, 1.2vw, 19px); line-height: 1.55; color: rgba(17,19,21,0.86); }
.pd-closer-actions { display: flex; flex-direction: column; gap: 14px; }
.pd-closer-actions .pd-btn { justify-content: space-between; }
.pd-closer-note { margin: 0; font-size: 13.5px; line-height: 1.5; color: rgba(17,19,21,0.76); }
.pd-closer-links { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.pd-closer-links a, .pd-closer-proof a { display: inline-flex; align-items: center; min-height: 40px; font-size: 14.5px; font-weight: 600; color: #1B1D1E; color: var(--pd-ink); text-decoration: underline; text-decoration-color: rgba(17,19,21,0.4); text-underline-offset: 5px; }
.pd-closer-links a:hover, .pd-closer-proof a:hover { color: #1B1D1E; color: var(--pd-ink); text-decoration-color: #1B1D1E; text-decoration-color: var(--pd-ink); }
.pd-closer-proof { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 1px; gap: 1px; margin-top: clamp(36px, 4.4vw, 64px); padding: 0; list-style: none; background: rgba(17,19,21,0.32); border: 1px solid rgba(17,19,21,0.32); }
.pd-closer-proof li { display: flex; flex-direction: column; gap: 8px; padding: clamp(18px, 2vw, 28px); background: #FF7500; background: var(--pd-orange); }
.pd-closer-proof-rule { width: 22px; height: 2px; background: #1B1D1E; background: var(--pd-ink); }
.pd-closer-proof h3 { margin: 0; font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(22px, 1.9vw, 30px); line-height: 0.98; color: #1B1D1E; color: var(--pd-ink); }
.pd-closer-proof p { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(17,19,21,0.82); }
.pd-closer-proof a { min-height: 32px; font-size: 13.5px; margin-top: auto; }

/* ============================================================================
   PRODUCT / CONFIGURATOR
   ============================================================================ */

.pd-breadcrumb { background: #141516; background: var(--pd-black); }
.pd-breadcrumb-inner { max-width: 1520px; max-width: var(--pd-max); margin: 0 auto; padding: 0 clamp(20px, 4vw, 72px); padding: 0 var(--pd-gutter); height: 56px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.pd-breadcrumb-trail { font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #9DA0A1; color: var(--pd-grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-breadcrumb-trail a { color: #A9ACAD; color: var(--pd-grey-2); }
.pd-breadcrumb-trail a:hover { color: #FF7500; color: var(--pd-orange); }
.pd-breadcrumb-trail .sep { padding: 0 8px; color: #3B3D3E; }
.pd-breadcrumb-code { display: inline-flex; align-items: center; gap: 9px; flex: none; font-size: 11.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #FF7500; color: var(--pd-orange); }
.pd-breadcrumb-code span:first-child { width: 7px; height: 7px; background: #FF7500; background: var(--pd-orange); }

.pd-product-grid { max-width: 1520px; max-width: var(--pd-max); margin: 0 auto; padding: clamp(32px,4vw,56px) clamp(20px, 4vw, 72px) clamp(56px,6vw,88px); padding: clamp(32px,4vw,56px) var(--pd-gutter) clamp(56px,6vw,88px); display: grid; grid-template-columns: 1.08fr 1fr; grid-gap: clamp(40px,4.5vw,76px); gap: clamp(40px,4.5vw,76px); align-items: start; }
/* min-width:0 so wide inner content (the scrollable thumb strip) can never
   drive the grid column past the viewport — it scrolls inside instead. */
.pd-product-grid > * { min-width: 0; }
.pd-product-sticky { position: sticky; top: 112px; }
.pd-product-frame { position: relative; background: #FFFFFF; background: var(--pd-surface); border: 1px solid #D9D6CF; border: 1px solid var(--pd-border); border-radius: 8px; }
.pd-product-frame-inner { border-radius: 8px; overflow: hidden; position: relative; display: grid; place-items: center; aspect-ratio: 1/1; padding: clamp(20px,2.4vw,40px); }
.pd-product-frame-inner img { width: 100%; height: 100%; object-fit: contain; transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1); transition: opacity 200ms var(--pd-ease-ui), transform 200ms var(--pd-ease-ui); }
.pd-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); grid-gap: 8px; gap: 8px; margin-top: 8px; }
.pd-thumb { padding: 0; border: 1.5px solid #D9D6CF; border: 1.5px solid var(--pd-border); border-radius: 6px; background: #FFFFFF; background: var(--pd-surface); overflow: hidden; aspect-ratio: 1/1; cursor: pointer; transition: border-color 160ms cubic-bezier(0.4, 0, 0.2, 1); transition: border-color 160ms var(--pd-ease-ui); }
.pd-thumb.is-active { border-color: #FF7500; border-color: var(--pd-orange); }
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb:hover { border-color: #B3AEA4; border-color: var(--pd-input); }
/* Last tile in the strip: the next photo dimmed behind a "+N" count, opening
   the lightbox so buyers scroll the rest there instead of down three rows. */
.pd-thumb-more { position: relative; }
.pd-thumb-more img { opacity: .35; }
.pd-thumb-more span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 600; color: #1B1D1E; color: var(--pd-ink); letter-spacing: .01em; }

/* Gallery controls — hover arrows, photo counter and an enlarge affordance so
   buyers can open any shot full-screen in the shared Lightbox. */
.pd-frame-img { cursor: zoom-in; }
/* Real job-site photos fill the frame edge to edge; studio shots keep the
   default contained padding. */
.pd-product-frame-inner.is-cover { padding: 0; }
.pd-product-frame-inner.is-cover img { object-fit: cover; }
.pd-frame-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid #D9D6CF;
  border: 1px solid var(--pd-border); border-radius: 999px;
  background: rgba(255,255,255,0.9); color: #1B1D1E; color: var(--pd-ink);
  cursor: pointer; opacity: 0; transition: opacity 160ms cubic-bezier(0.4, 0, 0.2, 1), background 160ms, border-color 160ms; transition: opacity 160ms var(--pd-ease-ui), background 160ms, border-color 160ms;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.pd-frame-prev { left: 12px; }
.pd-frame-next { right: 12px; }
.pd-product-frame:hover .pd-frame-nav { opacity: 1; }
.pd-frame-nav:hover { background: #fff; border-color: #B3AEA4; border-color: var(--pd-input); }
.pd-frame-count {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  padding: 5px 10px; border-radius: 999px;
  background: rgba(17,19,21,0.72); color: #fff;
  font: 600 11px/1 "JetBrains Mono", monospace; letter-spacing: 0.06em;
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.pd-frame-expand {
  position: absolute; bottom: 12px; right: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 8px 13px;
  border: 1px solid #D9D6CF;
  border: 1px solid var(--pd-border); border-radius: 999px;
  background: rgba(255,255,255,0.94); color: #1B1D1E; color: var(--pd-ink);
  font: 600 11px/1 "JetBrains Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase;
  cursor: zoom-in; transition: background 160ms cubic-bezier(0.4, 0, 0.2, 1), border-color 160ms; transition: background 160ms var(--pd-ease-ui), border-color 160ms;
}
.pd-frame-expand:hover { background: #fff; border-color: #B3AEA4; border-color: var(--pd-input); }
@media (hover: none) { .pd-frame-nav { opacity: 1; } }
@media (max-width: 640px) { .pd-frame-expand { min-height: 44px; } }

.pd-spec-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.pd-spec-chip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid #CBCDCE; border: 1px solid var(--pd-border-2); background: #F5F2EC; background: var(--pd-parchment); font-size: 11.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: #3C3E3F; color: var(--pd-body); }

.pd-cfg-section { margin-bottom: 30px; }
.pd-cfg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.pd-cfg-head span:first-child { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #1B1D1E; color: var(--pd-ink); }
.pd-cfg-head .pd-cfg-rule { flex: 1 1; height: 1px; background: #D9D6CF; background: var(--pd-border); }
.pd-cfg-btn { border: 1px solid #CBCDCE; border: 1px solid var(--pd-border-2); border-radius: 8px; background: transparent; color: #1B1D1E; color: var(--pd-ink); cursor: pointer; font-family: inherit; text-align: left; transition: border-color 160ms cubic-bezier(0.4, 0, 0.2, 1), background 160ms; transition: border-color 160ms var(--pd-ease-ui), background 160ms; }
.pd-cfg-btn:hover { border-color: #B3AEA4; border-color: var(--pd-input); }
.pd-cfg-btn.is-active { border-color: rgba(255,117,0,0.6); background: rgba(255,117,0,0.06); }

.pd-price-panel { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; background: #F5F2EC; background: var(--pd-parchment); border-left: 3px solid #FF7500; border-left: 3px solid var(--pd-orange); border-radius: 8px; padding: 20px 24px; margin-bottom: 34px; }
.pd-price-figure { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 56px; line-height: 0.85; color: #1B1D1E; color: var(--pd-ink); }

.pd-build { background: #F5F2EC; background: var(--pd-parchment); border: 1px solid #D9D6CF; border: 1px solid var(--pd-border); border-radius: 8px; padding: 22px 24px; margin-bottom: 10px; }
.pd-build-total { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 38px; line-height: 1; color: #1B1D1E; color: var(--pd-ink); }

.pd-stickybuy { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 450; background: #141516; background: var(--pd-black); border-top: 1px solid rgba(203,205,206,0.2); padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); align-items: center; gap: 12px; }

/* Spec table */
.pd-spectable { border: 1px solid #D9D6CF; border: 1px solid var(--pd-border); border-radius: 8px; overflow: hidden; background: #FFFFFF; background: var(--pd-surface); }
/* Light header — a quiet label row over a strong rule, not a black slab. */
.pd-spectable-head { display: grid; grid-template-columns: 170px 1fr; background: #FFFFFF; background: var(--pd-surface); }
.pd-spectable-head > div { padding: 14px 20px 11px; font-weight: 600; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; }
.pd-spectable-head > div:first-child { color: #BD4600; color: var(--pd-burnt); }
.pd-spectable-head > div:last-child { color: #66696A; color: var(--pd-muted); }
.pd-spectable-row { display: grid; grid-template-columns: 170px 1fr; border-top: 1px solid #E4E1DA; border-top: 1px solid var(--pd-placeholder); }
/* The row straight under the header carries the strong divider. */
.pd-spectable-head + .pd-spectable-row { border-top: 2px solid #1B1D1E; border-top: 2px solid var(--pd-ink); }
.pd-spectable-row > div:first-child { padding: 14px 20px; font-weight: 600; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: #3C3E3F; color: var(--pd-body); line-height: 1.5; }
.pd-spectable-row > div:last-child { padding: 14px 20px; font-size: 14.5px; font-weight: 500; color: #1B1D1E; color: var(--pd-ink); line-height: 1.5; }

.pd-panel { border: 1px solid #D9D6CF; border: 1px solid var(--pd-border); border-radius: 8px; overflow: hidden; background: #FFFFFF; background: var(--pd-surface); }
.pd-panel-head { padding: 14px 20px 11px; background: #FFFFFF; background: var(--pd-surface); border-bottom: 2px solid #1B1D1E; border-bottom: 2px solid var(--pd-ink); font-weight: 600; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #BD4600; color: var(--pd-burnt); }

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 1180px) {
  .pd-hero-bottom { grid-template-columns: 1fr; gap: 32px; }
  .pd-hero-feature { max-width: 620px; }
  .pd-builds { grid-template-columns: repeat(2, 1fr); }
}

/* Inline `repeat(N,1fr)` ladders/rows carry the same override problem as the
   two-column blocks, so their responsive stepping lives here as a class the
   media queries can beat. */
.pd-mini-ladder { display: grid; grid-template-columns: repeat(5, 1fr); }
.pd-form-pair { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; gap: 12px; }
.pd-kv { display: grid; grid-template-columns: 150px 1fr; grid-gap: 20px; gap: 20px; }
@media (max-width: 480px) { .pd-kv { grid-template-columns: 100px 1fr; gap: 12px; } }

@media (max-width: 1024px) {
  /* A shorter bar on tablets and phones leaves more of the first screen for
     the page. The two icon buttons stay a full 46px tap target. */
  .pd-nav-inner { flex-wrap: nowrap; height: 64px; padding: 0 14px 0 20px; gap: 10px; }
  .pd-nav-links { display: none; }
  .pd-nav-cta { display: none; }
  .pd-nav-toggle { display: grid; }
  .pd-nav-logo img { height: 30px; }
  .pd-nav-icon-btn, .pd-nav-toggle { width: 46px; height: 46px; border-radius: 6px; border-radius: var(--pd-btn-radius); }

  .pd-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .pd-grid-3 { grid-template-columns: repeat(2, 1fr); }
  .pd-range-grid, .pd-guides { grid-template-columns: repeat(2, 1fr); }
  .pd-diy-grid { grid-template-columns: repeat(2, 1fr); }
  .pd-split { gap: 40px; }
  .pd-product-grid { grid-template-columns: 1fr; }
  .pd-product-sticky { position: static; }
  .pd-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .pd-closer-grid { grid-template-columns: 1fr; align-items: start; }
  .pd-closer-proof { grid-template-columns: repeat(2, 1fr); }
  .pd-closer-actions { max-width: 460px; }
  .pd-bulk-grid { grid-template-columns: 1fr; }
  .pd-bulk-table { max-width: 560px; }
}

@media (max-width: 900px) {
  .pd-stickybuy { display: flex; }
  /* The sticky buy bar already shows the unit price + total at the bottom of
     the screen here, so the big headline price block up top is redundant. */
  .pd-price-panel { display: none; }
  .pd-ladder { grid-template-columns: repeat(5, 1fr); }
  .pd-mini-ladder { grid-template-columns: repeat(5, 1fr); }
  .pd-reviews { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  /* All two-column blocks collapse to one, regardless of their inline desktop
     ratio (they set --pd-cols, which this rule ignores). */
  .pd-grid-3, .pd-grid-4 { grid-template-columns: 1fr; }
  .pd-split, .pd-2col, .pd-faq-group { grid-template-columns: 1fr; gap: 28px; }
  .pd-ladder, .pd-mini-ladder { grid-template-columns: repeat(3, 1fr); }
  /* One horizontally-scrollable thumb row on mobile — a tall thumbnail wall
     was pushing the title and price several screens down the page. */
  .pd-thumbs { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; }
  .pd-thumbs::-webkit-scrollbar { display: none; }
  /* Shrink to fit rather than scroll, so the "+N" tile is never half cut off. */
  .pd-thumbs > * { flex: 0 1 72px; min-width: 0; }
  .pd-spectable-head, .pd-spectable-row { grid-template-columns: 100px 1fr; }
  /* Product FAQ two-column split stacks and drops its big gap. */
  .pd-faq-group { gap: 14px; }

  /* Hero: sized to content (not ~79svh) so the featured bracket sits with the
     headline. Text runs the full width here, so the photo gets an even wash
     instead of the desktop left-to-right fade. */
  .pd-hero { min-height: 0; }
  .pd-hero-grid { gap: 16px; padding-top: 24px; padding-bottom: 24px; }
  .pd-hero-scrim-a { background: rgba(12,13,14,0.55); }
  .pd-hero-bottom { gap: 22px; padding-top: 2px; }

  .pd-range-grid, .pd-guides { grid-template-columns: 1fr; }
  .pd-note-bar { padding: 18px; gap: 10px 14px; }
  .pd-note-bar p { min-width: 0; flex-basis: calc(100% - 30px); font-size: 14.5px; }

  /* Homepage range: two-up on phones. Photo, name, price and the action; the
     tag line and description wait for the product page. */
  .pd-range-grid--compact { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pd-range-grid--compact .pd-rangecard-body { padding: 12px 12px 0; }
  .pd-range-grid--compact .pd-rangecard-tag,
  .pd-range-grid--compact .pd-rangecard-note { display: none; }
  .pd-range-grid--compact .pd-rangecard-name { margin-bottom: 4px; font-size: 19px; line-height: 1.02; }
  .pd-range-grid--compact .pd-rangecard-foot { flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 12px; padding: 6px 0 14px; border-top: 0; }
  .pd-range-grid--compact .pd-rangecard-price { flex-direction: column; gap: 3px; }
  .pd-range-grid--compact .pd-rangecard-price strong { font-size: 22px; }
  .pd-range-grid--compact .pd-rangecard-price span { font-size: 10.5px; letter-spacing: 0.03em; }
  .pd-range-grid--compact .pd-card-cta { font-size: 13.5px; }

  /* Video: introduction, then the player, then the button. */
  .pd-videogrid { grid-template-columns: 1fr; grid-template-areas: "intro" "video" "cta"; }
  .pd-videogrid-intro { max-width: none; margin-bottom: 22px; }
  .pd-videogrid-cta { margin-top: 20px; }
  .pd-videogrid-cta .pd-btn { width: 100%; }

  /* Build photos stay two-up; captions shrink rather than the photos. */
  .pd-builds { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .pd-build-card-body { gap: 6px; padding: 12px 12px 14px; }
  .pd-build-card-title { font-size: 18px; }
  .pd-build-card-caption { font-size: 13px; line-height: 1.45; }
  .pd-builds .pd-card-cta { font-size: 13px; white-space: normal; }

  .pd-diy-head { grid-template-columns: 1fr; align-items: start; gap: 16px; }
  .pd-diy-head .pd-h2 { max-width: none; }
  .pd-diy-grid h3 { font-size: 19px; }
  .pd-diy-grid p { font-size: 13px; }
  .pd-uses li { padding: 6px 11px; font-size: 12.5px; }
  .pd-bulk-lead { margin-bottom: 20px; font-size: 16px; }
  /* Stacked, equal-width buttons read as a clear first and second choice. */
  .pd-btnrow > .pd-btn { flex: 1 1 100%; }
  .pd-review-card { padding: 18px; }
  .pd-review-summary { text-align: left; width: 100%; }
  .pd-review-summary .pd-stars { display: inline-block; margin-right: 10px; }
  .pd-review-summary a { margin-top: 0; }

  .pd-guide-card-media { aspect-ratio: 16 / 9; }
  .pd-guide-card-body { padding: 16px 18px 18px; }
  .pd-guide-card-title { font-size: 23px; }

  .pd-closer-proof { grid-template-columns: 1fr; }
  .pd-closer-actions .pd-btn { width: 100%; }

  /* Footer: brand block, then Shop / Help / Company as tap-to-open rows, then
     the policy links and company line, always visible. */
  .pd-footer-grid { grid-template-columns: 1fr; gap: 0; margin-bottom: 18px; }
  .pd-footer-brand { padding-bottom: 22px; }
  .pd-footer-logo { width: 210px; margin-bottom: 14px; }
  .pd-footer-blurb { margin-bottom: 14px; font-size: 14px; }
  /* Three labelled pills measured 393px against a 375px phone, so the last one
     clipped off the right edge. Google drops to an icon here and the other two
     keep their labels. aria-label carries the name for screen readers, and
     wrap is a safety net below ~320px. */
  .pd-footer-social { margin-top: 14px; flex-wrap: wrap; }
  .pd-footer-social-google span { display: none; }
  .pd-footer-social-google { width: 44px; padding: 0; justify-content: center; }
  .pd-footer-col { border-top: 1px solid rgba(255,255,255,0.1); }
  .pd-footer-col:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
  .pd-footer-col-head { margin: 0; }
  .pd-footer-col ul { padding: 0 0 12px; }
  .pd-footer-col a { min-height: 40px; font-size: 15px; }
  .pd-footer-legal { flex-direction: column; align-items: flex-start; gap: 8px; padding-top: 4px; border-top: 0; }
}

@media (max-width: 480px) {
  .pd-ladder, .pd-mini-ladder { grid-template-columns: repeat(2, 1fr); }
  .pd-form-pair { grid-template-columns: 1fr; }

  /* Headline flows as one sentence with the orange line on its own row. */
  .pd-hero h1 { font-size: clamp(36px, 10.6vw, 52px); margin-bottom: 14px; }
  .pd-hero-line { display: inline; }
  .pd-hero-line--accent { display: block; margin-top: 6px; }
  .pd-hero-sub p { margin-bottom: 18px; font-size: 16.5px; line-height: 1.5; }
  .pd-hero-ctas { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 8px; gap: 8px; }
  .pd-hero-ctas .pd-btn { height: 52px; padding: 0 10px; font-size: 15px; }
  .pd-hero-card { grid-template-columns: 46% minmax(0, 1fr); }
  .pd-hero-card-media { padding: 6px; }
  .pd-hero-card-body { padding: 12px 14px 14px; }
  .pd-hero-card-spec { font-size: 9.5px; letter-spacing: 0.07em; }
  .pd-hero-card-name { margin-top: 6px; font-size: 22px; }
  .pd-hero-card-price { padding-top: 10px; }
  .pd-hero-card-price strong { font-size: 28px; }
  .pd-hero-card-best { font-size: 11.5px; }
  .pd-hero-cardcta { height: 42px; margin-top: 10px; font-size: 14px; }
  .pd-hero-proof { font-size: 11px; letter-spacing: 0.07em; }

  /* Spec table: label above value so neither column is starved on a phone. */
  .pd-spectable-head { display: none; }
  .pd-spectable-row { grid-template-columns: 1fr; gap: 2px; padding: 12px 16px; }
  .pd-spectable-row > div:first-child { padding: 0; font-size: 10px; }
  .pd-spectable-row > div:last-child { padding: 0; }

  .pd-closer-title { font-size: clamp(34px, 10vw, 44px); }
}

/* ============================================================================
   GUIDE ARTICLES (blocks used by pages/BlogPost.jsx)
   ============================================================================ */

.pd-guide-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 26px; border: 1px solid #D9D6CF; border: 1px solid var(--pd-border); border-radius: 8px; background: #fff; }
.pd-guide-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.pd-guide-table caption { caption-side: top; text-align: left; padding: 14px 16px 0; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #BD4600; color: var(--pd-burnt); }
.pd-guide-table th, .pd-guide-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-top: 1px solid #E4E1DA; border-top: 1px solid var(--pd-placeholder); }
.pd-guide-table thead th { border-top: 0; border-bottom: 2px solid #1B1D1E; border-bottom: 2px solid var(--pd-ink); font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 18px; text-transform: uppercase; color: #1B1D1E; color: var(--pd-ink); }
.pd-guide-table tbody th { width: 28%; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #3C3E3F; color: var(--pd-body); }
.pd-guide-table tbody td { color: #2C2E2F; }
.pd-guide-table tbody tr:first-child th, .pd-guide-table tbody tr:first-child td { border-top: 0; }

.pd-guide-figures { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 12px; gap: 12px; margin: 4px 0 30px; }
.pd-guide-figures figure { margin: 0; }
.pd-guide-figures img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: 6%; background: #fff; border: 1px solid #D9D6CF; border: 1px solid var(--pd-border); border-radius: 8px; }
.pd-guide-figures figcaption { margin-top: 8px; font-size: 14px; line-height: 1.45; color: #3C3E3F; color: var(--pd-body); }

.pd-guide-video { margin: 6px 0 30px; }
.pd-guide-video figcaption { margin-top: 10px; text-align: center; font-size: 14px; color: #66696A; color: var(--pd-muted); }

.pd-guide-links { margin: 34px 0 0; padding: 20px 22px; background: #F5F2EC; background: var(--pd-parchment); border-left: 3px solid #FF7500; border-left: 3px solid var(--pd-orange); border-radius: 0 8px 8px 0; }
.pd-guide-links-title { margin: 0 0 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: #BD4600; color: var(--pd-burnt); }
.pd-guide-links ul { margin: 0; padding: 0; list-style: none; }
.pd-guide-links a { display: inline-flex; align-items: center; min-height: 40px; font-size: 16px; font-weight: 600; color: #1B1D1E; color: var(--pd-ink); text-decoration: underline; text-decoration-color: #FF7500; text-decoration-color: var(--pd-orange); text-underline-offset: 5px; }
.pd-guide-links a span { color: #BD4600; color: var(--pd-burnt); }

@media (max-width: 480px) {
  .pd-guide-figures { gap: 8px; }
  .pd-guide-figures figcaption { font-size: 13px; }
  .pd-guide-table { font-size: 14px; }
  .pd-guide-table th, .pd-guide-table td { padding: 10px 10px; }
  .pd-guide-table thead th { font-size: 16px; }
  .pd-guide-table tbody th { font-size: 10px; letter-spacing: 0.08em; }
}

.App { min-height: 100vh; }

/* Quantity field: hide native number spinners so the custom +/- steppers are the only controls */
input[data-testid="qty-input"]::-webkit-outer-spin-button,
input[data-testid="qty-input"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.announcement-mobile { display: none; }

.trade-supply-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-gap: 1px; gap: 1px; margin: 24px 0; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 6px; background: var(--border-strong); }
.trade-supply-strip > span { display: flex; min-width: 0; gap: 9px; align-items: center; padding: 13px; background: rgba(14,30,51,.96); }
.trade-supply-strip > span > svg { flex: 0 0 auto; color: var(--accent); }
.trade-supply-strip > span > span { display: flex; min-width: 0; flex-direction: column; }
.trade-supply-strip strong { color: var(--white); font-size: 12px; line-height: 1.3; }
.trade-supply-strip small { color: var(--grey-lt); font-size: 10px; line-height: 1.4; }

.local-pickup-section { padding: 34px 64px; background: #f1f5f2; color: var(--navy); border-block: 1px solid rgba(14,30,51,.16); }
.local-pickup-section.product-pickup { background: var(--navy-light); color: var(--white); border-color: var(--border-strong); }
.local-pickup-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; grid-gap: 24px; gap: 24px; align-items: center; }
.local-pickup-icon { width: 54px; height: 54px; border-radius: 8px; display: grid; place-items: center; background: var(--accent); color: var(--navy); }
.local-pickup-copy h2, .trade-buyer-panel h2 { font-family: "Bebas Neue", sans-serif; font-size: 34px; letter-spacing: 1.5px; line-height: 1; margin: 5px 0 8px; }
.local-pickup-copy p { max-width: 820px; line-height: 1.6; }
.local-pickup-copy small { display: block; margin-top: 8px; opacity: .76; }
.pickup-locations { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 12px; font-size: 13px; font-weight: 700; }
.pickup-locations span { display: inline-flex; align-items: center; gap: 6px; }
.pickup-supply-line { margin-top: 8px; font-size: 13px; font-weight: 700; }
.pickup-badges { display: flex; flex-wrap: wrap; gap: 9px; margin: 20px 0; }
.pickup-badges span { display: inline-flex; align-items: center; gap: 7px; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: 4px; color: var(--steel-lt); background: rgba(143,166,178,.07); font-size: 12px; font-weight: 700; }
.pickup-badges span:first-child { border-color: var(--success-border); color: #a9dfbb; background: var(--success-bg); }
.pickup-badges.compact { margin: 16px 0 6px; }
.trade-buyer-panel { display: flex; justify-content: space-between; align-items: center; gap: 36px; padding: 34px; border: 1px solid var(--border-strong); border-left: 4px solid var(--accent); background: var(--navy-mid); border-radius: 6px; }
.trade-buyer-panel p { color: var(--grey-lt); max-width: 760px; line-height: 1.7; }
.trade-buyer-actions { display: flex; gap: 10px; flex-wrap: wrap; flex-shrink: 0; }
.pickup-inline-note { margin: 0; padding: 12px 14px; border-left: 3px solid var(--success-lt); background: var(--success-bg); color: var(--grey-lt); font-size: 13px; line-height: 1.55; }
.pickup-inline-note strong { color: var(--white); }

@media (max-width: 768px) {
  .announcement-desktop { display: none; }
  .announcement-mobile {
    display: inline-block;
    max-width: calc(100vw - 74px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
  .trade-supply-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .local-pickup-section { padding: 30px 20px; }
  .local-pickup-inner { grid-template-columns: 1fr; gap: 16px; }
  .local-pickup-icon { width: 46px; height: 46px; }
  .local-pickup-inner .btn-accent { width: 100%; justify-content: center; }
  .local-pickup-copy h2, .trade-buyer-panel h2 { font-size: 30px; }
  .pickup-locations { flex-direction: column; gap: 7px; }
  .trade-buyer-panel { align-items: flex-start; flex-direction: column; padding: 26px 20px; gap: 22px; }
  .trade-buyer-actions, .trade-buyer-actions a { width: 100%; }
  .trade-buyer-actions a { justify-content: center; }
}

@media (max-width: 480px) {
  .trade-supply-strip { grid-template-columns: 1fr; }
}


/*# sourceMappingURL=main.c113e3dc.css.map*/