/* Shared visual finish: engineering clarity across services, catalogue and forms. */
:root {
  --studio-ink: #14243a;
  --studio-canvas: #f1f4f4;
  --studio-panel: #eaf0f2;
  --studio-line: #cbd5dc;
  --studio-accent: #ee6230;
}

/* The same measured spacing and interaction language runs through every route. */
.site-header { border-bottom-color: #dce3e7; }
.header-inner { min-width: 0; }
.site-header .brand > span { font-weight: 800; }
.primary-nav > a { font-weight: 650; }
.btn, .icon-btn, .menu-toggle, .cart-button, .catalog-more > summary {
  transition-duration: .2s;
}
.btn-primary { background: #cf4a21; border-color: #cf4a21; color: #fff; }
.btn-primary:hover { background: #b9431e; border-color: #b9431e; color: #fff; }
.btn-ghost { border-color: #cbd5dc; background: #fff; }
.btn-ghost:hover { border-color: #71869a; background: var(--studio-canvas); }
.btn:focus-visible, .icon-btn:focus-visible, .text-link:focus-visible { outline: 3px solid #17335a; outline-offset: 3px; }
.section-heading h2, .page-hero h1, .product-detail-intro h1 { color: var(--studio-ink); }
.page-hero { border-bottom-color: #dce3e7; }
.page-hero .breadcrumbs { margin-bottom: clamp(24px, 3vw, 42px); }
.product-page { padding-top: 26px; }
.product-page .breadcrumbs [aria-current="page"] { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The real impeller belongs to the hero surface, without a separate grid or panel. */
.is-home .hero {
  background: #f7f9fa;
}
.is-home .hero h1 { letter-spacing: -.055em; }
.is-home .hero-presence { font-weight: 600; }
.is-home .impeller-showcase { isolation: isolate; }

/* The engineering offer becomes the site's strongest contrasting chapter. */
.is-home .services-section {
  color: #f3f7fa;
  background: #14243a;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.is-home .services-section::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
  background-image: linear-gradient(#7890a01f 1px, transparent 1px), linear-gradient(90deg, #7890a01f 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, transparent, #000 25%, #000 80%, transparent);
}
.is-home .services-section .section-heading h2 { color: #f3f7fa; }
.is-home .services-section .heading-aside p { color: #c0ced9; }
.is-home .services-section .text-link { color: #f3f7fa; }
.is-home .services-section .text-link .icon { color: #ff9967; }
.services-grid {
  gap: 1px;
  border-radius: 16px;
  border-color: #b8c6cf;
  background: #b8c6cf;
}
.services-grid .service-card {
  display: flex;
  flex-direction: column;
  min-height: 330px;
  padding: clamp(24px, 2.4vw, 36px);
  background: #f3f6f6;
  border: 0;
  border-radius: 0;
  color: var(--studio-ink);
}
.services-grid .service-card:first-child { border-radius: 15px 0 0 15px; }
.services-grid .service-card:last-child { border-radius: 0 15px 15px 0; }
.services-grid .service-card:hover { background: #e9f0f1; }
.services-grid .service-card-top { color: var(--studio-ink); }
.services-grid .service-card-top .mono { color: #34506a; font-size: 13px; font-weight: 750; }
.services-grid .service-art {
  height: clamp(132px, 13vw, 186px);
  margin: 11px -12px 12px;
  display: grid;
  place-items: center;
}
.services-grid .service-art svg { width: min(100%, 250px); height: 100%; }
.services-grid .service-card h3 { margin: auto 0 9px; font-size: clamp(20px, 1.7vw, 26px); font-weight: 750; }
.services-grid .service-card p { max-width: 32ch; margin: 0; color: #50657a; font-size: 13px; line-height: 1.6; }
.services-grid .service-card:focus-visible { outline: 3px solid #ff986c; outline-offset: -4px; }

/* Catalogue controls and media use the same precise surfaces as the studio. */
.catalog-section { background: #eef2f3; }
.catalog-page .catalog-toolbar {
  gap: 12px;
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #d8e1e5;
  border-radius: 13px;
  background: #f5f8f8;
}
.catalog-page .catalog-toolbar .search-field,
.catalog-page .catalog-toolbar select,
.catalog-page .catalog-toolbar .catalog-more > summary { border-color: #bac8d1; background: #fff; }
.catalog-page .catalog-toolbar .search-field:focus-within,
.catalog-page .catalog-toolbar select:focus-visible { border-color: #17335a; }
.catalog-page .catalog-results { margin-top: 4px; }
.product-card {
  position: relative;
  border-color: #d6dfe3;
  border-radius: 13px;
  transition: transform .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.product-card:hover { transform: translateY(-3px); border-color: #9cb0bd; box-shadow: 0 14px 32px #14243a12; }
.product-card:focus-within { border-color: #34506a; }
.product-card-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.product-card-link:focus-visible { outline: 3px solid #17335a; outline-offset: -4px; }
.product-card:hover .product-visual > img,
.product-card:focus-within .product-visual > img { transform: scale(1.04); }
.product-card [data-product-add],
.product-card .product-cart-link { position: relative; z-index: 2; }
.product-view-label { display: inline-flex; align-items: center; gap: 8px; }
.product-open-icon { position: absolute; z-index: 1; top: 14px; right: 14px; display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #d8e2e5; border-radius: 8px; background: #f8fbfbe8; color: #20354b; pointer-events: none; }
.product-open-icon .icon { width: 17px; height: 17px; }
.product-card .product-visual { background: #ebf0f1; }
.product-card .product-visual img { mix-blend-mode: multiply; }
.product-card .product-badge { top: 14px; left: 14px; padding: 7px 10px; color: #20354b; border-color: #d8e2e5; background: #f8fbfbe8; font-weight: 650; pointer-events: none; }
.product-card .product-meta { color: #50657a; }
.product-card .product-card-body h3 { color: var(--studio-ink); font-weight: 750; }
.product-card .product-specs span { border-radius: 4px; background: #edf2f3; color: #41566c; }
.product-card .product-bottom { border-top-color: #dce4e8; }
.product-card .price { color: var(--studio-ink); font-weight: 800; }
.product-card .add-cart { background: #cf4a21; color: #fff; }
.product-card .add-cart:hover { background: #b9431e; color: #fff; }
.product-card .product-bottom { gap: 8px; }
.product-card .product-price-stack { flex: 1; min-width: 0; }
.product-card [data-product-add] { position: relative; z-index: 2; flex: none; }
.product-card .add-cart {
  --cart-size: 52px;
  position: relative;
  display: block;
  width: var(--cart-size);
  min-width: var(--cart-size);
  height: var(--cart-size);
  min-height: var(--cart-size);
  padding: 0;
  overflow: hidden;
  border-radius: 13px;
  font-size: 12px;
  font-weight: 750;
  white-space: nowrap;
  box-shadow: 0 5px 13px #14243a13;
  transition: width .34s cubic-bezier(.22, 1, .36, 1), background-color .2s, box-shadow .2s;
}
.product-card .add-cart:is(:focus-visible, [data-feedback]) { width: 146px; }
.product-card .add-cart-glyph { position: absolute; top: 0; right: 0; display: grid; place-items: center; width: var(--cart-size); height: var(--cart-size); }
.product-card .add-cart-glyph > span { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .2s, transform .25s cubic-bezier(.22, 1, .36, 1); }
.product-card .add-cart-glyph .icon { width: 20px; height: 20px; }
.product-card .add-cart-check { opacity: 0; transform: translateY(5px) scale(.7); }
.product-card .add-cart[data-feedback="added"] .add-cart-plus { opacity: 0; transform: translateY(-5px) scale(.7); }
.product-card .add-cart[data-feedback="added"] .add-cart-check { opacity: 1; transform: none; }
.product-card .add-cart-copy { position: absolute; top: 50%; right: var(--cart-size); opacity: 0; transform: translate(8px, -50%); transition: opacity .12s, transform .25s cubic-bezier(.22, 1, .36, 1); pointer-events: none; }
.product-card .add-cart:is(:focus-visible, [data-feedback]) .add-cart-copy { opacity: 1; transform: translate(0, -50%); transition-delay: .05s; }
.product-card .add-cart[data-feedback="checking"] .add-cart-plus { opacity: 0; }
.product-card .add-cart[data-feedback="checking"] .add-cart-glyph::after { content: ''; width: 17px; height: 17px; border: 2px solid #ffffff77; border-top-color: #fff; border-radius: 50%; animation: cart-button-spin .7s linear infinite; }
.product-card .add-cart[data-feedback="checking"]:disabled { opacity: 1; }
.product-card .add-cart.is-in-cart:hover { background: #1b395f; }
.product-card .product-action-followup { min-height: 42px; justify-content: flex-end; }
.product-card .product-cart-link { padding: 5px 0; border: 0; border-radius: 0; background: transparent; text-decoration: none; transition: color .2s; }
.product-card .product-cart-link:hover { color: #c64a21; text-decoration: underline; text-underline-offset: 4px; }
.product-card .product-cart-link:not([hidden]) { animation: cart-link-enter .34s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes cart-button-spin { to { transform: rotate(360deg); } }
@keyframes cart-link-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (hover: hover) and (pointer: fine) {
  .product-card .add-cart:hover:not(:disabled) { width: 146px; box-shadow: 0 9px 22px #14243a25; }
  .product-card .add-cart:hover:not(:disabled) .add-cart-copy { opacity: 1; transform: translate(0, -50%); transition-delay: .05s; }
}
@media (max-width: 640px) {
  .product-card .product-action-followup { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .product-card .add-cart, .product-card .add-cart-glyph > span, .product-card .add-cart-copy, .product-card .product-cart-link { transition: none; animation: none; }
  .product-card .add-cart[data-feedback="checking"] .add-cart-glyph::after { animation: none; }
}

/* Product image, purchase and specifications read as one working surface. */
.product-page .product-detail-layout { gap: clamp(24px, 4vw, 64px); }
.product-page .product-detail-intro h1 { font-weight: 750; }
.product-page .product-detail-visual {
  border: 1px solid #d6e0e5;
  border-radius: 18px;
  background: #edf2f3;
  overflow: hidden;
}
.product-page .product-detail-visual img { padding: clamp(16px, 3vw, 38px); mix-blend-mode: multiply; }
.product-page .product-detail-purchase {
  padding: clamp(22px, 2.5vw, 34px);
  border: 1px solid #d6e0e5;
  border-radius: 18px;
  background: #f6f8f8;
}
.product-page .product-detail-purchase .detail-price { color: var(--studio-ink); font-weight: 800; }
.product-page .product-detail-purchase .spec-list { border-top-color: #cbd6dd; }
.product-page .product-detail-purchase .spec-list > div { border-bottom-color: #dce4e8; }
.product-page .product-info-grid { border-top-color: #cbd6dd; }
.product-page .product-detail-layout--no-photo {
  display: block;
  max-width: 900px;
}
.product-page .product-detail-layout--no-photo .product-detail-intro { margin-bottom: 26px; }
.product-page .product-detail-layout--no-photo .product-detail-purchase { width: 100%; }

/* The model workspace keeps the same material and border vocabulary. */
.calculator-section .upload-box { border-color: #bacbd4; border-radius: 18px; background: #f1f6f7; }
.calculator-section .calc-panel { border-color: #d6e0e5; border-radius: 18px; background: #f7f9f9; }
.calculator-section .upload-icon { color: var(--studio-accent); }
.calculator-section .upload-box > p,
.calculator-section .upload-constraints { color: #52677a; }
.calculator-section .upload-constraints { font-size: 11px; }

/* Form routes receive a distinct but calm workspace. */
.request-layout .contact-form-card {
  padding: clamp(24px, 3.6vw, 48px);
  border: 1px solid #d7e0e5;
  border-radius: 18px;
  background: #f3f6f6;
}
.request-layout .contact-form-card h2 { color: var(--studio-ink); font-weight: 750; }
.request-layout .field > input,
.request-layout .field > textarea,
.request-layout .field > select { border-color: #bac8d1; background: #fff; }
.request-layout .field > input:focus-visible,
.request-layout .field > textarea:focus-visible,
.request-layout .field > select:focus-visible { border-color: #17335a; }
body[data-page="/request"] .request-layout .contact-details {
  align-self: start;
  padding: clamp(24px, 3vw, 38px);
  border-radius: 18px;
  background: #14243a;
  color: #f3f7fa;
}
body[data-page="/request"] .request-layout .contact-details h2 { color: #f3f7fa; }
body[data-page="/request"] .request-layout .contact-details p { color: #c0ced9; }

@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .services-grid .service-card:first-child { border-radius: 15px 0 0 0; }
  .services-grid .service-card:nth-child(2) { border-radius: 0 15px 0 0; }
  .services-grid .service-card:nth-child(3) { border-radius: 0 0 0 15px; }
  .services-grid .service-card:last-child { border-radius: 0 0 15px 0; }
}
@media (max-width: 760px) {
  .page-hero.service-index-heading,
  .page-hero.service-heading,
  .page-hero.delivery-heading,
  .page-hero.commerce-heading { padding-top: 23px; }
  .is-home .hero { background-image: none; }
  .site-header .primary-nav.is-open {
    padding: 16px var(--gutter) 24px;
    border-bottom: 3px solid #fa7845;
    background: #14243a;
    box-shadow: 0 24px 44px #10182730;
    max-height: calc(100vh - 72px);
    max-height: calc(100dvh - 72px - env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-header .primary-nav > a {
    position: relative;
    min-height: 67px;
    padding: 18px 38px 18px 2px;
    border-bottom: 1px solid #526b825c;
    color: #f3f7fa;
    font-size: 19px;
    font-weight: 700;
  }
  .site-header .primary-nav > a:last-child { border-bottom: 0; }
  .site-header .primary-nav > a:hover,
  .site-header .primary-nav > a[aria-current="page"] { color: #ff9c70; }
  .site-header .primary-nav > a::after {
    display: block;
    position: absolute;
    right: 8px;
    left: auto;
    top: 50%;
    bottom: auto;
    width: 10px;
    height: 10px;
    background: none;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: translateY(-50%) rotate(45deg);
  }
  .site-header .primary-nav > a:focus-visible { outline: 2px solid #ff9c70; outline-offset: -2px; }
  .site-header .menu-toggle[aria-expanded="true"] { position: relative; }
  .site-header .menu-toggle[aria-expanded="true"] .icon { opacity: 0; }
  .site-header .menu-toggle[aria-expanded="true"]::before,
  .site-header .menu-toggle[aria-expanded="true"]::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 19px;
    height: 2px;
    border-radius: 2px;
    background: #e55a2b;
  }
  .site-header .menu-toggle[aria-expanded="true"]::before { transform: translate(-50%, -50%) rotate(45deg); }
  .site-header .menu-toggle[aria-expanded="true"]::after { transform: translate(-50%, -50%) rotate(-45deg); }
  .catalog-page .catalog-toolbar { padding: 12px; }
  .product-page { padding-top: 23px; }
  .product-page .product-detail-layout { gap: 18px; }
  .product-page .product-detail-purchase { padding: 20px; }
  .product-page .product-detail-layout--no-photo .product-detail-intro { margin-bottom: 18px; }
  .request-layout .contact-form-card { padding: 22px 20px; }
}
@media (max-width: 600px) {
  .services-grid { grid-template-columns: minmax(0, 1fr); }
  .services-grid .service-card { min-height: 0; padding: 24px; }
  .services-grid .service-card:first-child { border-radius: 15px 15px 0 0; }
  .services-grid .service-card:nth-child(2),
  .services-grid .service-card:nth-child(3) { border-radius: 0; }
  .services-grid .service-card:last-child { border-radius: 0 0 15px 15px; }
  .services-grid .service-art { height: 140px; margin: 5px -8px 12px; }
  .services-grid .service-card h3 { margin: 0 0 8px; }
  .catalog-page .catalog-toolbar { gap: 9px; }
  .product-page .product-detail-visual { max-height: 310px; }
  .product-page .product-detail-visual img { padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .product-card, .services-grid .service-card { transition: none; }
  .product-card:hover, .services-grid .service-card:hover { transform: none; }
}

/* Magnetic navigation mark. Its fixed frame never changes the hit area. */
.btn:has(.icon--magnetic) { transform: none !important; }
.icon.icon--magnetic {
  overflow: visible;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: none !important;
  transition: none !important;
}
.icon--magnetic .magnetic-mark {
  transform: translate(var(--magnetic-x, 0px), var(--magnetic-y, 0px));
  transition: transform 300ms cubic-bezier(.22, 1, .36, 1);
}
.icon--magnetic .magnetic-ring { opacity: .25; transition: opacity 160ms ease; }
.is-magnetic-active .icon--magnetic .magnetic-ring,
a:focus-visible .icon--magnetic .magnetic-ring,
button:focus-visible .icon--magnetic .magnetic-ring { opacity: .7; }
@media (prefers-reduced-motion: reduce) {
  .icon--magnetic .magnetic-mark { transform: none; transition: none; }
  .icon--magnetic .magnetic-ring { transition: none; }
}
.generator-art:hover .round-arrow { transform: none; }