/* ==========================================================================
   SAIRAM ALUMINIUM – "Clean Corporate" design (white base, built around the company logo)
   Logo colours: orange #D96300 and mint green #B0F0D8. Colours live in :root.
   ========================================================================== */
/* @font-face { font-family: 'Source Serif Variable'; src: url('../fonts/source-serif-4-latin-wght-normal.woff2') format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Figtree Variable'; src: url('../fonts/figtree-latin-wght-normal.woff2') format('woff2'); font-weight: 300 900; font-display: swap; } */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

:root {
  --white: #ffffff;
  --paper: #f6f8f7;
  --ink: #14211f;
  --ink-soft: #506260;
  --line: #e3e9e6;
  --orange: #d96300;
  --orange-ink: #b34f00;
  --orange-hover: #c25700;
  --teal: #0e8f6e;
  --teal-ink: #0a6f55;
  --mint: #e3f7ee;
  --mint-2: #b0f0d8;
  --deep: #0f2a28;
  --error: #c4301c;
--serif: "Roboto Condensed", sans-serif;
--sans: "Roboto Condensed", sans-serif;
  --r: 12px;
  --sh-1: 0 1px 2px rgba(20, 33, 31, .05), 0 10px 30px -14px rgba(20, 33, 31, .18);
  --sh-2: 0 24px 50px -22px rgba(20, 33, 31, .3);
  --container: 1240px;
  --gutter: clamp(18px, 4vw, 40px);
  --section-y: clamp(64px, 8vw, 112px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --focus: var(--teal);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 1.0625rem/1.7 var(--sans); overflow-x: clip; -webkit-font-smoothing: antialiased; animation: pageIn .6s ease both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1em; /*! max-width: 66ch; */ }
address { margin: 0; font-style: normal; }
dl { margin: 1em 0; }
button { font: inherit; color: inherit; cursor: pointer; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 700; letter-spacing: -0.015em; line-height: 1.12; text-wrap: balance; }
h2 { font-size: clamp(2rem, 1.2rem + 2.6vw, 2.8rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + .5vw, 1.4rem); line-height: 1.25; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
.on-deep { --focus: #7fe3c0; }
.container { --bs-gutter-x: calc(var(--gutter) * 2); max-width: calc(var(--container) + var(--gutter) * 2); padding-inline: var(--gutter); }
.narrow { max-width: calc(880px + var(--gutter) * 2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 12px; top: -80px; z-index: 120; padding: 10px 18px; background: var(--orange); color: #fff; border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 12px; }
.fine-print { margin-top: 16px; font-size: .875rem; color: var(--ink-soft); }
.sa-progress { position: fixed; left: 0; top: 0; z-index: 120; height: 3px; width: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* ---------- buttons ---------- */
.sa-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border: 2px solid var(--orange); border-radius: 8px; background: var(--orange); color: #fff; font-weight: 600; font-size: 1rem; line-height: 1; text-decoration: none; white-space: nowrap; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s, color .25s, border-color .25s; }
.sa-btn::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-20deg); transition: left .7s var(--ease); }
.sa-btn:hover::after { left: 130%; }
.sa-btn:hover { background: var(--orange-hover); border-color: var(--orange-hover); transform: translateY(-2px); box-shadow: 0 14px 26px -12px rgba(217, 99, 0, .6); }
.sa-btn:active { transform: none; }
.sa-btn svg { transition: transform .35s var(--ease); }
.sa-btn:hover svg { transform: translateX(4px); }
.sa-btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.sa-btn--line:hover { background: var(--ink); border-color: var(--ink); color: #fff; box-shadow: 0 14px 26px -12px rgba(20, 33, 31, .5); }
.sa-btn--teal { background: var(--teal); border-color: var(--teal); }
.sa-btn--teal:hover { background: var(--teal-ink); border-color: var(--teal-ink); box-shadow: 0 14px 26px -12px rgba(14, 143, 110, .6); }
.sa-btn--white { background: #fff; border-color: #fff; color: var(--ink); }
.sa-btn--white:hover { background: var(--mint); border-color: var(--mint); box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .35); }
.sa-btn--white-line { background: transparent; border-color: #fff; color: #fff; }
.sa-btn--white-line:hover { background: #fff; color: var(--orange-ink); border-color: #fff; }
.sa-btn--lg { height: 58px; padding: 0 32px; font-size: 1.05rem; }
.sa-btn--block { width: 100%; margin-top: 22px; }
.sa-btn[disabled] { opacity: .6; cursor: progress; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ---------- topbar + header ---------- */
.topbar { background: var(--mint); font-size: .9rem; border-bottom: 1px solid #cfeadf; }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; }
.topbar__list { display: flex; flex-wrap: wrap; gap: 4px 26px; }
.topbar a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: color .25s; }
.topbar a:hover { color: var(--teal-ink); text-decoration: underline; text-underline-offset: 3px; }
.topbar svg { color: var(--teal); flex: none; }
.topbar__addr { display: none; }
.topbar__quote { font-weight: 600; color: var(--orange-ink); }
.site-header { position: sticky; top: 0; z-index: 60; background: #fff; border-bottom: 1px solid var(--line); transition: box-shadow .3s; }
.site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(20, 33, 31, .35); }
.site-header__bar { display: flex; align-items: center; gap: 20px; min-height: 84px; transition: min-height .35s var(--ease); }
.site-header.is-scrolled .site-header__bar { min-height: 66px; }
.logo { display: inline-flex; align-items: center; flex: none; text-decoration: none; }
.logo__img { /*! height: 58px; */ width: auto; transition: height .35s var(--ease); }
.site-header.is-scrolled .logo__img { height: 46px; }
.primary-nav { display: none; margin-left: auto; }
.primary-nav > ul { display: flex; align-items: center; gap: 4px; }
.has-dropdown { position: relative; }
.sa-nav-link { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 12px 16px; border: 0; background: none; font-weight: 600; font-size: 1.2rem; text-decoration: none; transition: color .25s; }
.sa-nav-link::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease); }
.sa-nav-link:hover, .sa-nav-link.is-active { color: var(--orange-ink); }
.sa-nav-link:hover::after, .sa-nav-link.is-active::after { transform: scaleX(1); }
.sa-nav-link svg { transition: transform .3s var(--ease); }
.sa-nav-link svg.is-flipped { transform: rotate(180deg); }
.sa-dropdown { position: absolute; top: calc(100% + 10px); left: 0; min-width: 330px; padding: 8px; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--orange); border-radius: 0 0 var(--r) var(--r); box-shadow: var(--sh-2); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, transform .35s var(--ease), visibility 0s .25s; }
.sa-dropdown::before { content: ''; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.sa-dropdown.is-open { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.sa-dropdown__link { display: block; padding: 13px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: background-color .2s, color .2s, padding .25s; }
.sa-dropdown__link:hover, .sa-dropdown__link.active { background: var(--mint); color: var(--teal-ink); padding-left: 22px; }
.site-header__cta { display: none; }
.menu-toggle { margin-left: auto; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 90; width: min(90vw, 400px); padding: 90px 26px 34px; overflow-y: auto; background: #fff; box-shadow: -30px 0 60px -30px rgba(0, 0, 0, .35); transform: translateX(105%); visibility: hidden; transition: transform .5s var(--ease), visibility 0s .5s; }
.drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.drawer__list > li { border-bottom: 1px solid var(--line); }
.drawer__link { display: block; padding: 15px 0; font-family: var(--serif); font-weight: 700; font-size: 1.4rem; text-decoration: none; }
.drawer__link.active { color: var(--orange-ink); }
.drawer__link--sub { font-family: var(--sans); font-size: 1.02rem; font-weight: 600; padding: 11px 0 11px 14px; color: var(--ink-soft); }
.drawer__group-title { display: block; padding-top: 14px; color: var(--ink-soft); font-size: .85rem; }
.drawer-backdrop { position: fixed; inset: 0; z-index: 80; border: 0; background: rgba(15, 42, 40, .55); }
.menu-close { position: fixed; top: 18px; right: 18px; z-index: 95; display: none; }

/* ---------- hero slider ---------- */
.hero4 { position: relative; background: #fff; overflow: hidden; }
.hero4__slides::after { content: ''; display: block; clear: both; }
.s4 { float: left; width: 100%; margin-right: -100%; position: relative; display: flex; align-items: center; min-height: clamp(540px, 80vh, 720px); visibility: hidden; z-index: 1; clip-path: inset(0 0 0 100%); transition: clip-path 1.15s cubic-bezier(.77, 0, .18, 1), visibility 0s 1.15s; }
.s4.is-prev { visibility: visible; z-index: 2; clip-path: inset(0); transition: none; }
.s4.is-active { visibility: visible; z-index: 3; clip-path: inset(0); transition-delay: 0s; }
.s4__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% center; transform: scale(1.12) translateX(6%); }
.s4.is-active .s4__img { animation: settle 9s var(--ease) both; }
@keyframes settle { from { transform: scale(1.14) translateX(6%); } to { transform: scale(1.02) translateX(0); } }
.s4__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .86) 55%, rgba(255, 255, 255, .55) 100%); }
.s4__lines { position: absolute; inset: 0; opacity: .5; background: linear-gradient(rgba(14, 143, 110, .08) 1px, transparent 1px) 0 0 / 56px 56px, linear-gradient(90deg, rgba(14, 143, 110, .08) 1px, transparent 1px) 0 0 / 56px 56px; -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%); mask-image: linear-gradient(90deg, #000, transparent 70%); }
.s4__content { position: relative; z-index: 2; padding-block: 56px 130px; }
.s4__bar { display: block; width: 0; height: 4px; margin-bottom: 22px; background: var(--orange); border-radius: 2px; }
.s4.is-active .s4__bar { animation: barGrow .9s var(--ease) .5s both; }
@keyframes barGrow { to { width: 84px; } }
.s4__title { font-size: clamp(2.4rem, 1rem + 4.6vw, 4.6rem); line-height: 1.04; letter-spacing: -0.025em; max-width: 14ch; }
.word { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .14em 0; margin-bottom: -.14em; }
.word > span { display: inline-block; transform: translateY(115%); }
.s4.is-active .word > span, .ph4 .word > span { animation: wordUp 1s var(--ease) both; animation-delay: calc(var(--w) * 75ms + 600ms); }
.ph4 .word > span { animation-delay: calc(var(--w) * 70ms + 150ms); }
@keyframes wordUp { from { transform: translateY(115%); } to { transform: none; } }
.s4__lead { margin-top: 22px; max-width: 46ch; font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--ink-soft); opacity: 0; }
.s4__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; opacity: 0; }
.s4.is-active .s4__lead { animation: fadeUp 1s var(--ease) 1.1s both; }
.s4.is-active .s4__actions { animation: fadeUp 1s var(--ease) 1.25s both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero4__ctrl { position: absolute; z-index: 6; left: 0; right: 0; bottom: 34px; }
.hero4__ctrl-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.hprog { display: flex; align-items: center; gap: 16px; min-width: 0; }
.hprog__count { font-family: var(--serif); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.hprog__count span { color: var(--ink-soft); font-weight: 400; }
.hprog__line { position: relative; width: clamp(80px, 18vw, 200px); height: 3px; background: #d6dedb; border-radius: 2px; overflow: hidden; }
.hprog__bar { position: absolute; inset: 0; background: var(--orange); transform: scaleX(0); transform-origin: left; }
.hprog__bar.is-running { animation: hbar linear forwards; }
.hprog__bar.is-paused { animation-play-state: paused; }
@keyframes hbar { to { transform: scaleX(1); } }
.hero4__btns { display: flex; align-items: center; gap: 10px; }
.round { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; padding: 0; border: 1.5px solid #cdd7d3; border-radius: 50%; background: #fff; transition: transform .35s var(--ease), background-color .25s, color .25s, border-color .25s; }
.round:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: scale(1.06); }
.preview { display: none; align-items: center; gap: 14px; padding: 8px 18px 8px 8px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: var(--sh-1); text-align: left; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.preview:hover { transform: translateY(-3px); box-shadow: var(--sh-2); }
.preview img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; }
.preview small { display: block; font-size: .75rem; color: var(--ink-soft); line-height: 1.2; }
.preview strong { display: block; font-family: var(--serif); font-size: .98rem; line-height: 1.2; max-width: 20ch; }

/* ---------- feature bar ---------- */
.fbar { position: relative; z-index: 7; margin-top: -54px; }
.fbar__card { border-radius: var(--r); background: #fff; box-shadow: var(--sh-2); border-top: 4px solid var(--orange); }
.fbar__item { display: flex; align-items: center; gap: 18px; padding: 24px 26px; border-bottom: 1px solid var(--line); transition: background-color .3s; }
.fbar__item:last-child { border-bottom: 0; }
.fbar__item:hover { background: var(--mint); }
.fbar__icon { display: flex; align-items: center; justify-content: center; flex: none; width: 64px; height: 64px; border-radius: 50%; background: var(--mint); transition: background-color .3s, transform .5s var(--ease); }
.fbar__item:hover .fbar__icon { background: #fff; transform: scale(1.08); }
.fbar__item strong { display: block; font-family: var(--serif); font-size: 1.1rem; line-height: 1.2; }
.fbar__item span.t { display: block; margin-top: 3px; font-size: .9rem; color: var(--ink-soft); line-height: 1.35; }

/* ---------- sections ---------- */
.section { padding-block: var(--section-y); }
.section--paper, .section--tint { background: var(--paper); }
.section--white { background: #fff; }
.section--mint { background: var(--mint); }
.section--deep { background: var(--deep); color: #c2d4d0; --focus: #7fe3c0; }
.section--deep p { color: #c2d4d0; }
.sh { margin-bottom: clamp(32px, 4.5vw, 58px); }
.sh__orn { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--orange); }
.sh__orn::before { content: ''; width: 46px; height: 3px; border-radius: 2px; background: var(--orange); }
.sh__orn svg { animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.sh h2 { /*! max-width: 20ch; */ }
.sh .lede { margin: 16px 0 0; font-size: 1.15rem; color: var(--ink-soft); max-width: 58ch; }
.sh.is-light h2 { color: #fff; }
.sh.is-light .lede { color: #b6cbc6; }
.sh.is-light .sh__orn { color: #7fe3c0; }
.sh.is-light .sh__orn::before { background: #7fe3c0; }
.sh.is-center { text-align: center; }
.sh.is-center .sh__orn { justify-content: center; }
.sh.is-center .sh__orn::before { display: none; }
.sh.is-center h2, .sh.is-center .lede { margin-inline: auto; }
.split { --bs-gutter-x: clamp(36px, 5vw, 88px); --bs-gutter-y: clamp(36px, 5vw, 88px); }
.split .sh { margin-bottom: 24px; }
.split .sh h2 { max-width: 16ch; }
.mini-title { margin: 34px 0 12px; font-size: 1.3rem; }
.on-deep-text { color: #c2d4d0; }
.check-list li { display: flex; gap: 12px; margin: 0 0 11px; line-height: 1.5; }
.check-list svg { flex: none; margin-top: 2px; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--mint-2); color: var(--teal-ink); }
.section--deep .check-list svg, .check-list--light svg { background: rgba(127, 227, 192, .2); color: #7fe3c0; }
.check-list--light li, .section--deep .check-list li { color: #d5e4e0; }
.check-list--cols { columns: 1; }

/* about collage */
.collage { position: relative; padding: 0 0 56px 0; }
.collage__main { position: relative; z-index: 1; width: 82%; aspect-ratio: 4 / 4.4; object-fit: cover; border-radius: var(--r); box-shadow: var(--sh-1); }
.collage__frame { position: absolute; z-index: 0; left: 18px; top: 18px; width: 82%; aspect-ratio: 4 / 4.4; border: 3px solid var(--orange); border-radius: var(--r); transform: translate(-18px, -18px); }
.collage__small { position: absolute; z-index: 2; right: 0; bottom: 0; width: 52%; aspect-ratio: 4 / 3; object-fit: cover; border: 8px solid #fff; border-radius: var(--r); box-shadow: var(--sh-2); }
.sa-badge { position: absolute; z-index: 3; left: -10px; top: 40%; width: 124px; height: 124px; border-radius: 50%; background: var(--mint); box-shadow: var(--sh-1); display: flex; align-items: center; justify-content: center; }
.sa-badge__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 24s linear infinite; }
.sa-badge__ring text { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: 2.4px; fill: var(--teal-ink); }
.sa-badge strong { position: relative; font-family: var(--serif); font-size: 1.7rem; color: var(--orange-ink); line-height: 1; }
.gear-orn { position: absolute; z-index: 0; right: 2%; top: -26px; width: 96px; height: 96px; color: var(--mint-2); animation: spin 30s linear infinite reverse; }

.spec { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--orange); border-radius: var(--r); box-shadow: var(--sh-1); padding: 6px 26px 10px; }
.spec3__title, .spec__title { margin: 16px 0 6px; font-size: 1.2rem; }
.spec3 { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--orange); border-radius: var(--r); box-shadow: var(--sh-1); padding: 6px 26px 10px; }
.spec3__row { --bs-gutter-x: 0; --bs-gutter-y: 0; padding: 13px 0; border-top: 1px solid var(--line); }
.spec3__title + dl .spec3__row:first-child { border-top: 0; }
.spec3 dt { font-size: .85rem; font-weight: 400; color: var(--ink-soft); }
.spec3 dd { margin: 2px 0 0; font-weight: 600; }
.section--deep .spec3 { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); border-top-color: var(--orange); box-shadow: none; }
.section--deep .spec3 dd, .section--deep .spec3__title { color: #fff; }
.section--deep .spec3 dt { color: #9fc0b8; }
.section--deep .spec3__row { border-color: rgba(255, 255, 255, .14); }

/* services (capabilities) */
.svc-row { --bs-gutter-x: 18px; --bs-gutter-y: 18px; }
.svc { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 32px 28px 28px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
.svc::before { content: ''; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); }
.svc:hover { transform: translateY(-8px); box-shadow: var(--sh-2); border-color: transparent; }
.svc:hover::before { transform: scaleX(1); }
.svc__icon { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; margin-bottom: 22px; border-radius: 22px; background: var(--mint); transition: background-color .35s, transform .6s var(--ease); }
.svc:hover .svc__icon { background: var(--mint-2); transform: rotate(-6deg) scale(1.06); }
.svc h3 { margin-bottom: 10px; }
.svc p { margin: 0; color: var(--ink-soft); }
.svc__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 600; color: var(--orange-ink); text-decoration: none; }
.svc__more svg { transition: transform .35s var(--ease); }
.svc:hover .svc__more svg { transform: translateX(5px); }

/* products */
.pcards { --bs-gutter-x: 26px; --bs-gutter-y: 26px; }
.pcard { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.pcard:hover { transform: translateY(-8px); box-shadow: var(--sh-2); }
.pcard__media { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 10; background: var(--paper); }
.pcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.pcard:hover .pcard__media img { transform: scale(1.06); }
.pcard__tag { position: absolute; left: 16px; top: 16px; padding: 7px 14px; border-radius: 999px; background: #fff; font-size: .85rem; font-weight: 600; color: var(--teal-ink); box-shadow: var(--sh-1); }
.pcard__body { display: flex; flex-direction: column; flex: 1; padding: 28px 28px 30px; }
.pcard h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); margin-bottom: 12px; }
.pcard .check-list { margin: 14px 0 0; }
.pcard .btn-row { margin-top: auto; padding-top: 26px; }

/* applications (custom SVG icons) */
.apps { border-top: 1px solid var(--line); border-left: 1px solid var(--line); background: #fff; }
.app { --stroke: var(--ink); --fillc: var(--orange); position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 16px 26px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background-color .35s, transform .5s var(--ease), box-shadow .5s var(--ease); }
.app:hover { --stroke: var(--teal-ink); background: var(--mint); z-index: 2; transform: translateY(-4px); box-shadow: var(--sh-2); }
.app__icon { display: flex; align-items: center; justify-content: center; width: 88px; height: 88px; margin-bottom: 14px; border-radius: 50%; background: var(--paper); transition: background-color .35s, transform .6s var(--ease); }
.app:hover .app__icon { background: #fff; transform: scale(1.08); }
.app h3 { font-family: var(--sans); font-weight: 700; font-size: 1rem; letter-spacing: 0; margin-bottom: 4px; }
.app p { margin: 0; font-size: .85rem; color: var(--ink-soft); line-height: 1.4; }
.ico { width: 56px; height: 56px; overflow: visible; fill: none; stroke: var(--stroke, var(--ink)); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ico .s { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ico .a { fill: var(--fillc, var(--orange)); stroke: none; transform-box: fill-box; transform-origin: center; }
.js .draw:not(.is-in) .ico .s { stroke-dashoffset: 1; }
.js .draw:not(.is-in) .ico .a { opacity: 0; transform: scale(.3); }
.draw.is-in .ico .s { animation: draw 1.5s var(--ease) both; animation-delay: calc(var(--n, 0) * 70ms + var(--k, 0) * 90ms); }
.draw.is-in .ico .a { animation: pop .8s var(--ease) both; animation-delay: calc(var(--n, 0) * 70ms + 500ms); }
.app:hover .ico .s, .fbar__item:hover .ico .s, .svc:hover .ico .s { animation: redraw 1s var(--ease) both; animation-delay: calc(var(--k, 0) * 60ms); }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes redraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.ico .s:nth-child(2) { --k: 1; } .ico .s:nth-child(3) { --k: 2; } .ico .s:nth-child(4) { --k: 3; } .ico .s:nth-child(5) { --k: 4; } .ico .s:nth-child(6) { --k: 5; }
.apps--compact .app { padding: 22px 14px; }
.apps--compact .app__icon { width: 76px; height: 76px; }
.apps--compact .ico { width: 48px; height: 48px; }
.section--deep .apps { background: transparent; border-color: rgba(255, 255, 255, .14); }
.section--deep .app { --stroke: #fff; --fillc: #7fe3c0; border-color: rgba(255, 255, 255, .14); color: #fff; }
.section--deep .app__icon { background: rgba(255, 255, 255, .08); }
.section--deep .app p { color: #9fc0b8; }
.section--deep .app:hover { --stroke: var(--ink); --fillc: var(--orange); background: #fff; color: var(--ink); }
.section--deep .app:hover p { color: var(--ink-soft); }
.section--deep .app:hover .app__icon { background: var(--mint); }

/* process */
.proc { --p: 0; position: relative; counter-reset: s; }
.proc::before, .proc::after { content: ''; position: absolute; left: 41px; top: 42px; bottom: 42px; width: 3px; border-radius: 2px; }
.proc::before { background: #d6dedb; }
.proc::after { background: var(--orange); transform: scaleY(var(--p)); transform-origin: top; }
.proc__step { position: relative; display: flex; align-items: center; gap: 22px; padding-bottom: 34px; }
.proc__step:last-child { padding-bottom: 0; }
.proc__icon { flex: none; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; background: #fff; border: 3px solid #d6dedb; transition: border-color .5s, background-color .5s, transform .6s var(--ease), box-shadow .6s; }
.proc__step.is-lit .proc__icon { border-color: var(--orange); background: #fff; transform: scale(1.06); box-shadow: 0 0 0 8px rgba(217, 99, 0, .12); }
.proc__no { position: absolute; right: -4px; top: -4px; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--teal); color: #fff; font-size: .8rem; font-weight: 700; }
.proc__step h3 { margin-bottom: 6px; font-size: 1.12rem; }
.proc__step p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.proc .ico { width: 46px; height: 46px; }

/* why */
.why { gap: 14px; margin-top: 8px; }
.why__item { gap: 18px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .3s; }
.why__item:hover { transform: translateX(8px); box-shadow: var(--sh-1); border-color: var(--mint-2); }
.why__icon { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; background: var(--mint); color: var(--teal-ink); transition: background-color .3s, color .3s, transform .5s var(--ease); }
.why__item:hover .why__icon { background: var(--teal); color: #fff; transform: rotate(-8deg); }
.why__item h3 { margin-bottom: 6px; font-size: 1.1rem; }
.why__item p { margin: 0; color: var(--ink-soft); font-size: .95rem; }
.frame { position: relative; }
.frame__img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; border-radius: var(--r); box-shadow: var(--sh-2); }
.frame::before { content: ''; position: absolute; z-index: 0; inset: 16px -12px -16px 16px; border-radius: var(--r); background: repeating-linear-gradient(135deg, var(--mint-2) 0 2px, transparent 2px 12px); }

/* gallery (Bootstrap row / col; picture height is --gh, the big picture is two rows tall) */
.gallery { --gh: 150px; }
.gallery, .gallery .row { --bs-gutter-x: 12px; --bs-gutter-y: 12px; }
.gallery__item { position: relative; overflow: hidden; height: var(--gh); border-radius: var(--r); background: var(--paper); margin: 0; }
.gallery__item--tall { height: calc(var(--gh) * 2 + var(--bs-gutter-y)); }
@media (max-width: 575.98px) { .gallery__side, .gallery__side > .row { display: contents; } }
.gallery__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.gallery__item:hover img { transform: scale(1.08); }
.gallery__item figcaption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 10px; padding: 34px 16px 14px; background: linear-gradient(0deg, rgba(15, 42, 40, .85), transparent); color: #fff; font-weight: 600; font-size: .95rem; transform: translateY(40%); opacity: 0; transition: transform .5s var(--ease), opacity .4s; }
.gallery__item:hover figcaption, .gallery__item:focus-within figcaption { transform: none; opacity: 1; }

/* CTA */
.cta4 { position: relative; overflow: hidden; background: var(--orange); color: #fff; padding-block: clamp(56px, 8vw, 100px); --focus: #fff; }
.cta4__pattern { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .12; pointer-events: none; }
.cta4__gear { position: absolute; right: -60px; top: -60px; width: 300px; height: 300px; color: #fff; opacity: .14; animation: spin 40s linear infinite; }
.cta4__inner { position: relative; z-index: 2; --bs-gutter-x: 28px; --bs-gutter-y: 28px; }
.cta4 h2 { color: #fff; font-size: clamp(2.2rem, 1.2rem + 3.6vw, 3rem); max-width: 14ch; }
.cta4 p { margin: 0 0 26px; color: #ffeedd; font-size: 1.15rem; max-width: 46ch; }
.cta4__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* inner page hero */
.ph4 { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--mint), #fff); border-bottom: 1px solid var(--line); }
.ph4__pattern { position: absolute; right: -40px; top: -40px; width: 300px; height: 340px; color: var(--mint-2); opacity: .8; animation: spin 50s linear infinite; pointer-events: none; }
.ph4__row { position: relative; --bs-gutter-x: 36px; --bs-gutter-y: 36px; padding-block: clamp(40px, 6vw, 84px); }
.ph4 h1 { font-size: clamp(2.3rem, 1rem + 4vw, 2.5rem); letter-spacing: -0.025em; line-height: 1.06; /*! max-width: 16ch; */ }
.ph4__lead { margin: 20px 0 0; /*! max-width: 46ch; */ font-size: clamp(1.05rem, 1rem + .3vw, 1.25rem); color: var(--ink-soft); opacity: 0; animation: fadeUp 1s var(--ease) .8s both; }
.ph4__actions { margin-top: 28px; opacity: 0; animation: fadeUp 1s var(--ease) 1s both; }
.ph4__art { position: relative; }
.ph4__art img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); box-shadow: var(--sh-2); animation: fadeUp 1.1s var(--ease) .3s both; }
.ph4__art::before { content: ''; position: absolute; z-index: 0; inset: -16px 16px 16px -16px; border: 3px solid var(--orange); border-radius: var(--r); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; font-size: .92rem; color: var(--ink-soft); }
.crumbs li { display: inline-flex; align-items: center; gap: 6px; }
.crumbs li + li::before { content: '›'; opacity: .6; }
.crumbs a { color: var(--teal-ink); text-underline-offset: 3px; }
.crumbs [aria-current] { font-weight: 600; color: var(--ink); }

/* feature cards, groups, media, misc (inner pages) */
.fcards { --bs-gutter-x: 16px; --bs-gutter-y: 16px; }
.fcard, .gcard { padding: 28px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
.fcard:hover { transform: translateY(-6px); box-shadow: var(--sh-2); border-color: transparent; }
.fcard__icon { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 20px; border-radius: 16px; background: var(--mint); color: var(--teal-ink); transition: transform .5s var(--ease), background-color .3s, color .3s; }
.fcard:hover .fcard__icon { transform: rotate(-8deg) scale(1.08); background: var(--teal); color: #fff; }
.fcard h3 { margin-bottom: 8px; }
.fcard p { margin: 0; color: var(--ink-soft); }
.gcard h3 { margin-bottom: 14px; }
.media3 { position: relative; overflow: hidden; border-radius: var(--r); box-shadow: var(--sh-1);  background: var(--paper); }
/* aspect-ratio: 4 / 3; */
.media3 img { /*! width: 100%; */ /*! height: 100%; */ object-fit: cover; transition: transform 1s var(--ease); }
.media3:hover img { transform: scale(1.04); }
.media3--short { aspect-ratio: 16 / 8; margin-top: 28px; }
.two3 { --bs-gutter-x: 28px; --bs-gutter-y: 28px; }
.two3__card { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding-bottom: 28px; }
.two3__card img { width: 100%; aspect-ratio: 20 / 9; object-fit: cover; margin-bottom: 24px; }
.two3__card h2 { font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.3rem); margin: 0 26px 10px; }
.two3__card p { margin: 0 26px; color: var(--ink-soft); }
.infoblock { padding: clamp(24px, 3vw, 36px); border: 1px solid var(--line); border-radius: var(--r); background: #fff; }
.infoblock h3 { margin-bottom: 16px; }
.infoblock--deep { margin-top: 22px; background: var(--deep); border-color: var(--deep); border-left: 6px solid var(--orange); color: #c2d4d0; }
.infoblock--deep h3 { color: #fff; }
.note3 { padding: 26px 28px; border-radius: var(--r); background: var(--mint); border-left: 5px solid var(--teal); }
.note3 p:last-child { margin-bottom: 0; }
.note3 a { color: var(--teal-ink); font-weight: 600; text-underline-offset: 3px; }
.diagram3 { margin: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--r); background: linear-gradient(140deg, var(--mint), #fff); box-shadow: var(--sh-1); }
.diagram3 .forge { width: 100%; height: auto; }
.diagram3 figcaption { padding: 4px 12px 8px; font-size: .85rem; color: var(--ink-soft); }
.forge text { font-family: var(--sans); font-size: 13px; fill: var(--ink-soft); }
.forge__ladle { transform-box: view-box; transform-origin: 120px 130px; animation: ladle 10s ease-in-out infinite; }
.forge__stream { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: stream 10s ease-in-out infinite; }
.forge__fill { animation: fill 10s ease-in-out infinite; }
.forge__glow { opacity: .15; animation: glow 10s ease-in-out infinite; }
.forge__spark { opacity: 0; transform-box: fill-box; animation: spark 3.2s ease-out infinite; animation-delay: var(--sd); }
@keyframes ladle { 0%, 8% { transform: rotate(0); } 22%, 70% { transform: rotate(28deg); } 84%, 100% { transform: rotate(0); } }
@keyframes stream { 0%, 20% { stroke-dashoffset: 1; } 30%, 62% { stroke-dashoffset: 0; } 72%, 100% { stroke-dashoffset: -1; } }
@keyframes fill { 0%, 26% { transform: translateY(215px); opacity: 1; } 62%, 86% { transform: translateY(0); opacity: 1; } 94% { transform: translateY(0); opacity: 0; } 94.1%, 100% { transform: translateY(215px); opacity: 0; } }
@keyframes glow { 0%, 24% { opacity: .12; } 62%, 84% { opacity: .85; } 100% { opacity: .12; } }
@keyframes spark { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -90px) scale(.3); } }
.purpose__row { --bs-gutter-x: 14px; --bs-gutter-y: 14px; margin-top: calc(16px - var(--bs-gutter-y)); }
.purpose__card { display: flex; flex-direction: column; gap: 6px; padding: 24px 26px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; text-decoration: none; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.purpose__card strong { font-family: var(--serif); font-size: 1.25rem; }
.purpose__card span { color: var(--ink-soft); }
a.purpose__card:hover { transform: translateY(-5px); box-shadow: var(--sh-2); }
.purpose__card.is-current { background: var(--teal); border-color: var(--teal); }
.purpose__card.is-current strong { color: #fff; }
.purpose__card.is-current span { color: #dcf5ec; }
.purpose { margin-top: clamp(40px, 5vw, 64px); }
.num-list { counter-reset: n; }
.num-list li { counter-increment: n; display: flex; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.num-list li::before { content: counter(n); flex: none; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--mint-2); color: var(--teal-ink); font-weight: 700; font-size: .9rem; }
.num-list li:last-child { border-bottom: 1px solid var(--line); }
.tl3 { --bs-gutter-x: 14px; --bs-gutter-y: 14px; }
.tl3__step { gap: 18px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.tl3__step:hover { transform: translateY(-4px); box-shadow: var(--sh-1); }
.tl3__icon { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 14px; background: var(--mint); color: var(--teal-ink); }
.tl3__step h3 { margin-bottom: 6px; }
.tl3__step p { margin: 0; color: var(--ink-soft); }

.faq { gap: 12px; }
.faq__item { border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: box-shadow .35s, border-color .35s; }
.faq__item.is-open { border-color: var(--mint-2); box-shadow: var(--sh-1); }
.faq__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; padding: 20px 24px; text-align: left; background: none; border: 0; border-radius: var(--r); font-family: var(--serif); font-weight: 700; font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); line-height: 1.3; }
.faq__icon { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 50%; background: var(--mint); color: var(--teal-ink); transition: transform .45s var(--ease), background-color .3s, color .3s; }
.faq__item.is-open .faq__icon { transform: rotate(135deg); background: var(--orange); color: #fff; }
.faq__panel p { margin: 0; padding: 0 24px 22px; color: var(--ink-soft); }

/* footer */
.footer4 { background: var(--paper); border-top: 4px solid var(--orange); }
.footer-row { --bs-gutter-x: 0; --bs-gutter-y: 40px; padding-block: clamp(48px, 6vw, 60px); }
.footer-brand img { height: 64px; width: auto; mix-blend-mode: multiply; }
.footer-brand p { margin: 18px 0 22px; max-width: 34ch; color: var(--ink-soft); }
.footer-title { margin-bottom: 18px; font-size: 1.2rem; }
.footer4 li { margin-bottom: 10px; }
.footer4 a { text-decoration: none; transition: color .25s; }
.footer4 a:not(.sa-btn):hover { color: var(--orange-ink); text-decoration: underline; text-underline-offset: 4px; }
.footer-contact p { display: flex; gap: 12px; margin: 0 0 14px; }
.footer-contact svg { flex: none; margin-top: 4px; color: var(--teal); }
.footer-bottom { border-top: 1px solid var(--line); font-size: .9rem; color: var(--ink-soft); }
.footer-bottom__inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-block: 20px; }
.footer-bottom p { margin: 0; max-width: none; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-bottom li { margin: 0; }
.totop { position: fixed; right: 20px; bottom: 20px; z-index: 70; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: var(--sh-2); opacity: 0; transform: translateY(20px) scale(.8); visibility: hidden; transition: opacity .4s, transform .5s var(--ease), visibility 0s .4s, background-color .25s; }
.totop.is-on { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.totop:hover { background: var(--orange); color: #fff; }
.totop svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.totop .ring-bg { fill: none; stroke: #e1e8e5; stroke-width: 3; }
.totop .ring-fg { fill: none; stroke: var(--orange); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 150.8; stroke-dashoffset: 150.8; transform: rotate(-90deg); transform-origin: center; }
.totop .arrow { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.totop .arrow svg { position: static; width: 22px; height: 22px; }

/* contact + forms */
.contact-row { --bs-gutter-x: 0; --bs-gutter-y: 40px; }
.contact-cards { gap: 12px; }
.contact-cards li { display: flex; gap: 18px; align-items: flex-start; padding: 22px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.contact-cards li:hover { transform: translateX(6px); box-shadow: var(--sh-1); }
.contact-cards .ci { display: flex; align-items: center; justify-content: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--mint); color: var(--teal-ink); }
.contact-cards h3 { margin-bottom: 4px; font-size: 1.1rem; }
.contact-cards a { font-weight: 600; text-underline-offset: 3px; overflow-wrap: anywhere; }
.map-panel { margin-top: 18px; border: 1px solid var(--line); border-radius: var(--r); background: #fff; overflow: hidden; }
.map-panel__art { position: relative; height: 220px; background:
  linear-gradient(30deg, transparent 47%, #fff 47%, #fff 49%, transparent 49%),
  linear-gradient(120deg, transparent 60%, #fff 60%, #fff 62%, transparent 62%),
  linear-gradient(#cfe0d9 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, #cfe0d9 1px, transparent 1px) 0 0 / 40px 40px, var(--mint); }
.map-panel__pin { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin: -50px 0 0 -29px; border-radius: 50% 50% 50% 6px; rotate: -45deg; background: var(--orange); color: #fff; box-shadow: 0 14px 26px -8px rgba(217, 99, 0, .7); animation: pinbob 2.4s ease-in-out infinite alternate; }
.map-panel__pin svg { rotate: 45deg; }
@keyframes pinbob { from { transform: translateY(0); } to { transform: translateY(-10px); } }
.map-panel__body { padding: 22px 24px 26px; }
.map-panel__body p { margin: 0; overflow-wrap: anywhere; }
.map-panel__body .btn-row { margin-top: 16px; }
.formcard { padding: clamp(24px, 4vw, 42px); border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: var(--r); background: #fff; box-shadow: var(--sh-2); }
.formcard h2 { font-size: clamp(1.8rem, 1.2rem + 1.5vw, 2.5rem); }
.formcard__intro { margin: 10px 0 26px; color: var(--ink-soft); }
.contact-line { margin: 0 0 8px; font-family: var(--serif); font-weight: 700; font-size: 1.25rem; }
.contact-line a { text-underline-offset: 4px; overflow-wrap: anywhere; }
.field { margin-bottom: 20px; }
.field label { display: block; margin-bottom: 8px; font-weight: 600; font-size: .95rem; }
.req { color: var(--error); }
.ctl { position: relative; }
.ctl > svg { position: absolute; left: 15px; top: 16px; width: 20px; height: 20px; color: var(--teal); pointer-events: none; transition: color .25s; }
.ctl:focus-within > svg { color: var(--orange); }
.ctl--area > svg { top: 17px; }
.field input:not([type='file']), .field select, .field textarea { width: 100%; min-height: 54px; padding: 14px 16px 14px 46px; font: inherit; font-size: 1rem; color: var(--ink); background: #fff; border: 1.5px solid #cdd7d3; border-radius: 8px; transition: border-color .25s, box-shadow .25s; }
.field textarea { resize: vertical; min-height: 140px; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--teal); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 4px rgba(217, 99, 0, .15); }
.field.has-error input:not([type='file']), .field.has-error select, .field.has-error textarea { border-color: var(--error); background: #fff7f5; }
.field__hint { margin: 6px 0 0; font-size: .85rem; color: var(--ink-soft); }
.field__error { margin: 6px 0 0; font-size: .9rem; font-weight: 600; color: var(--error); max-width: none; }
.file-input { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1.5px dashed #9fb7af; border-radius: 8px; background: var(--paper); color: var(--teal); }
.file-input input { flex: 1; min-width: 0; line-height: normal; font-size: .95rem; color: var(--ink); }
.form__row { --bs-gutter-x: 20px; --bs-gutter-y: 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { gap: 12px; margin: 4px 0 26px; font-size: .95rem; color: var(--ink-soft); }
.consent input { flex: none; width: 24px; height: 24px; margin: 2px 2px 0 0; accent-color: var(--teal); }
.consent label { flex: 1 1 0; min-width: 0; }
.consent a { color: var(--teal-ink); text-underline-offset: 3px; }
.consent .field__error { flex: 0 0 100%; padding-left: 38px; margin-top: 0; }
.form-alert { margin-bottom: 24px; padding: 16px 20px; border: 1.5px solid #f0b8ae; border-left-width: 6px; border-radius: 8px; background: #fff5f2; color: #5a150b; }
.form-alert ul { margin: 6px 0 0; padding-left: 18px; list-style: disc; }
.form-alert p { margin: 4px 0 0; }
.form-alert a { color: #8f1f10; text-underline-offset: 3px; }
.form-result { padding: clamp(14px, 3vw, 30px) 0; }
.form-result h3 { margin-bottom: 14px; font-size: 1.8rem; }
.form-result__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 20px; }
.prose h1 { margin-bottom: 24px; font-size: clamp(2.4rem, 1.4rem + 3.4vw, 3.8rem); }
.prose p, .prose ul { margin-bottom: 1.2em; }
.prose ul { list-style: disc; padding-left: 1.3em; }
.prose a { color: var(--teal-ink); text-underline-offset: 3px; }

/* reveal */
.js .reveal { opacity: 0; translate: 0 30px; transition: opacity .9s var(--ease) var(--d, 0ms), translate 1.1s var(--ease) var(--d, 0ms); }
.js .reveal.is-visible { opacity: 1; translate: 0 0; }
.js .svc.reveal, .js .pcard.reveal, .js .fcard.reveal, .js .app.reveal, .js .why__item.reveal, .js .contact-cards li.reveal, .js .tl3__step.reveal { transition: opacity .9s var(--ease) var(--d, 0ms), translate 1.1s var(--ease) var(--d, 0ms), transform .5s var(--ease), box-shadow .5s var(--ease), background-color .35s, border-color .3s; }

/* overflow safety */
.footer-contact a, .footer-contact span, .contact-line a, .contact-cards a, .form-result a, .form-alert a, .topbar a { overflow-wrap: anywhere; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width: 576px) {
  .fbar__item { border-bottom: 1px solid var(--line); }
  .fbar__item:nth-child(odd) { border-right: 1px solid var(--line); }
  .fbar__item:nth-last-child(-n+2) { border-bottom: 0; }
  .spec3__row { --bs-gutter-y: 0; }
  .spec3 dt { width: 150px; }
  .spec3 dd { margin-top: 0; padding-left: 16px; }
  .gallery { --gh: 170px; }
}
@media (min-width: 640px) {
  .site-header__cta { display: inline-flex; margin-left: auto; height: 46px; }
  .menu-toggle { margin-left: 0; }
  .check-list--cols { columns: 2; column-gap: 32px; }
  .topbar__addr { display: inline-flex; }
  .hero4__ctrl-inner { gap: 28px; }
}
@media (min-width: 992px) {
  .pcards { --bs-gutter-x: 28px; --bs-gutter-y: 28px; }
  .two3 { --bs-gutter-x: 32px; --bs-gutter-y: 32px; }
  .cta4__inner { --bs-gutter-x: 56px; }
  .footer-row { --bs-gutter-x: 0px; --bs-gutter-y: 0px; }
  .contact-row { --bs-gutter-x: 56px; }
  .ph4__row { --bs-gutter-x: 64px; }
}
@media (min-width: 900px) {
  .preview { display: flex; }
  .why { margin-top: 0; }
  .s4__shade { background: linear-gradient(90deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .9) 38%, rgba(255, 255, 255, 0) 72%); }
}
@media (min-width: 1024px) {
  .primary-nav { display: block; }
  .menu-toggle, .drawer, .drawer-backdrop { display: none; }
  .site-header__cta { margin-left: 8px; }
}
@media (min-width: 1200px) {
  .fbar__item { border-bottom: 0 !important; border-right: 1px solid var(--line) !important; padding: 24px 20px; gap: 14px; }
  .fbar__item:last-child { border-right: 0 !important; }
  .fbar__icon { width: 58px; height: 58px; }
  .proc::before, .proc::after { left: 42px; right: calc(100% / 6 - 42px); top: 42px; bottom: auto; width: auto; height: 3px; }
  .proc::after { transform: scaleX(var(--p)); transform-origin: left; }
  .proc__step { display: block; text-align: center; padding: 0 11px; }
  .proc__icon { margin: 0 auto 18px; }
  .proc__step h3 { margin-bottom: 0; font-size: 1.05rem; }
  .proc__step p { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; }
  .word > span, .s4.is-active .word > span { transform: none; animation: none; }
  .s4__lead, .s4__actions, .ph4__lead, .ph4__actions { opacity: 1; animation: none !important; }
  .s4__bar { width: 84px; animation: none !important; }
  .s4.is-active .s4__img, .ph4__art img { animation: none; transform: none; }
  .sh__orn svg, .sa-badge__ring, .gear-orn, .cta4__gear, .ph4__pattern, .map-panel__pin { animation: none; }
  .forge__ladle { animation: none; transform: rotate(28deg); }
  .forge__stream { animation: none; stroke-dashoffset: 0; }
  .forge__fill { animation: none; transform: none; }
  .forge__glow { animation: none; opacity: .7; }
  .forge__spark { animation: none; opacity: 0; }
  .js .reveal { opacity: 1; translate: none; }
  .js .draw:not(.is-in) .ico .s { stroke-dashoffset: 0; }
  .js .draw:not(.is-in) .ico .a { opacity: 1; transform: none; }
  .draw.is-in .ico .s, .draw.is-in .ico .a, .app:hover .ico .s, .fbar__item:hover .ico .s, .svc:hover .ico .s { animation: none; }
  .proc::after { transform: none; }
}
.legal-top { padding-top: clamp(48px, 6vw, 80px); }
.drawer-close { position: absolute; top: 18px; right: 18px; }
.topbar__addr { display: none; }
@media (min-width: 640px) { .topbar__addr { display: list-item; } }

.topbar__mail { display: none; }
@media (min-width: 640px) { .topbar__mail { display: list-item; } }
@media (min-width: 900px) { .frame::before { inset: 22px -22px -22px 22px; } }























































.steel-section {
            background: #e8edf1;
            padding: 45px 0;
            overflow: hidden;
            position: relative;
            font-family: Arial, sans-serif;
        }

        .steel-section .steel-row {
            min-height: 350px;
            align-items: center;
        }

        /* Left Image */
        .steel-image-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .steel-image {
            width: 100%;
            /* max-width: 390px; */
            height: auto;
            display: block;
            object-fit: contain;
        }

        /* Right Content */
        .steel-content {
            position: relative;
            z-index: 2;
            padding: 20px 15px 20px 25px;
        }

        .steel-title {
            font-size: clamp(32px, 3.2vw, 42px);
            line-height: 0.98;
            font-weight: 400;
            color: #080808;
            text-transform: uppercase;
            margin: 0 0 16px;
            letter-spacing: 0.5px;
        }

        .steel-description {
            font-family: Georgia, serif;
            font-size: 17px;
            line-height: 1.4;
            color: #333;
            /*! max-width: 330px; */
            margin-bottom: 15px;
        }

        .steel-btn {
            display: inline-block;
            background: #711c1d;
            color: #fff;
            text-decoration: none;
            padding: 8px 13px;
            border-radius: 5px;
            font-size: 10px;
            line-height: 1;
            font-weight: 700;
            transition: all 0.3s ease;
        }

        .steel-btn:hover {
            background: #a32225;
            color: #fff;
            transform: translateY(-2px);
        }

        /* Decorative Industry Text */
        .steel-watermark {
            position: absolute;
            right: -5px;
            bottom: 30px;
            font-size: clamp(55px, 9vw, 105px);
            line-height: 1;
            font-weight: 700;
            letter-spacing: 2px;
            color: rgba(255, 255, 255, 0.30);
            white-space: nowrap;
            pointer-events: none;
            z-index: 1;
        }

        /* Tablet */
        @media (max-width: 991.98px) {
            .steel-section {
                padding: 35px 0;
            }

            .steel-image {
                max-width: 340px;
            }

            .steel-content {
                padding-left: 15px;
            }

            .steel-title {
                font-size: 35px;
            }

            .steel-watermark {
                font-size: 70px;
            }
        }

        /* Mobile */
        @media (max-width: 767.98px) {
            .steel-section {
                padding: 30px 0 40px;
            }

            .steel-section .steel-row {
                min-height: auto;
            }

            .steel-image {
                max-width: 310px;
                width: 90%;
            }

            .steel-content {
                padding: 25px 20px 10px;
                text-align: center;
            }

            .steel-title {
                font-size: 34px;
                line-height: 1.05;
                margin-bottom: 15px;
            }

            .steel-description {
                font-size: 12px;
                line-height: 1.6;
                max-width: 420px;
                margin: 0 auto 18px;
            }

            .steel-watermark {
                right: 0;
                bottom: 10px;
                font-size: 48px;
                opacity: 0.5;
            }
        }

        @media (max-width: 400px) {
            .steel-image {
                max-width: 270px;
            }

            .steel-title {
                font-size: 30px;
            }
        }




























         /* Section */
        .aluminium-slider {
            width: 100%;
            padding: 35px 0;
            /*! background: #f1f5f9; */
            overflow: hidden;
        }

        .aluminium-stage {
            position: relative;
            width: 100%;
            max-width: 1000px;
            aspect-ratio: 800 / 709;
            margin: 0 auto;
            overflow: hidden;
            isolation: isolate;
        }

        /* All image layers share the same canvas */
        .aluminium-stage img {
            position: absolute;
            inset: 0;
            display: block;
            width: 100%;
            height: 100%;
            object-fit: contain;
            user-select: none;
            -webkit-user-drag: none;
        }

        .aluminium-bg {
            z-index: 0;
        }

        /* Six layers: hidden until scrolled into view */
        .aluminium-layer {
            z-index: 1;
            opacity: 0;
            transform: scale(.94);
            transform-origin: center;
            will-change: transform, opacity;
            animation: none;
        }

        /* Reveal sequence */
        .aluminium-stage.is-visible .layer-1 {
            animation: sectionReveal .8s ease-out .10s forwards;
        }

        .aluminium-stage.is-visible .layer-2 {
            animation: sectionReveal .8s ease-out .30s forwards;
        }

        .aluminium-stage.is-visible .layer-3 {
            animation: sectionReveal .8s ease-out .50s forwards;
        }

        .aluminium-stage.is-visible .layer-4 {
            animation: sectionReveal .8s ease-out .70s forwards;
        }

        .aluminium-stage.is-visible .layer-5 {
            animation: sectionReveal .8s ease-out .90s forwards;
        }

        .aluminium-stage.is-visible .layer-6 {
            animation: sectionReveal .8s ease-out 1.10s forwards;
        }

        @keyframes sectionReveal {
            from {
                opacity: 0;
                transform: scale(.94);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        /* Centre casting */
        .aluminium-centre {
            z-index: 3;
            opacity: 0;
            transform: scale(.86);
            transform-origin: center;
            animation: none;
        }

        .aluminium-stage.is-visible .aluminium-centre {
            animation:
                centreReveal 1s ease-out 1.35s forwards,
                centreBreathing 5s ease-in-out 2.35s infinite;
        }

        @keyframes centreReveal {
            from {
                opacity: 0;
                transform: scale(.86);
            }

            to {
                opacity: 1;
                transform: scale(1);
            }
        }

        @keyframes centreBreathing {
            0%, 100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.018);
            }
        }

        /* Molten aluminium glow */
        .aluminium-glow {
            position: absolute;
            z-index: 4;
            width: 34%;
            aspect-ratio: 1;
            left: 50%;
            top: 47.7%;
            border-radius: 50%;
            transform: translate(-50%, -50%);
            pointer-events: none;

            background: radial-gradient(
                circle,
                rgba(255, 190, 40, .30) 0%,
                rgba(255, 112, 0, .24) 30%,
                rgba(255, 65, 0, .12) 53%,
                transparent 74%
            );

            filter: blur(12px);
            opacity: 0;
            animation: none;
        }

        .aluminium-stage.is-visible .aluminium-glow {
            animation:
                glowAppear .8s ease-out 1.6s forwards,
                moltenGlow 2.2s ease-in-out 2.4s infinite;
        }

        @keyframes glowAppear {
            to {
                opacity: .65;
            }
        }

        @keyframes moltenGlow {
            0%, 100% {
                opacity: .35;
                scale: .94;
            }

            50% {
                opacity: .9;
                scale: 1.08;
            }
        }

        /* Tablet */
        @media (max-width: 991.98px) {
            .aluminium-slider {
                padding: 25px 0;
            }

            .aluminium-stage {
                max-width: 760px;
            }

            .aluminium-glow {
                filter: blur(9px);
            }
        }

        /* Mobile */
        @media (max-width: 575.98px) {
            .aluminium-slider {
                padding: 12px 0;
            }

            .aluminium-stage {
                width: 100%;
            }

            .aluminium-glow {
                width: 35%;
                filter: blur(6px);
            }
        }

        /* Respect reduced-motion preference */
        @media (prefers-reduced-motion: reduce) {
            .aluminium-layer,
            .aluminium-centre,
            .aluminium-glow {
                animation: none !important;
            }

            .aluminium-layer,
            .aluminium-centre {
                opacity: 1;
                transform: none;
            }

            .aluminium-glow {
                opacity: .4;
            }
        }
















        
/* Steel Content Section */
.steel-content {
    position: relative;
    z-index: 2;
    padding: 35px 20px;
    color: #111;
}

/* Heading */
.steel-title {
    font-family: "Roboto Condensed", sans-serif;
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 400;
    line-height: 1.12;
    color: #111;
    text-transform: uppercase;
    margin: 0 0 20px;
    letter-spacing: 0;
}

/* Description */
.steel-description {
    font-family: "Roboto Condensed", sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.55;
    color: #252525;
    margin: 0 0 22px;
    text-align: justify;
}

/* Read More Button */
.steel-btn {
    display: inline-block;
    padding: 9px 14px;
    background-color: #7b1e20;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    border-radius: 4px;
    transition: background-color 0.3s ease,
                transform 0.3s ease;
}

.steel-btn:hover {
    background-color: #a52a2c;
    color: #fff;
    transform: translateY(-2px);
}

/* Tablet */
@media (max-width: 991.98px) {
    .steel-content {
        padding: 25px 15px;
    }

    .steel-title {
        font-size: 30px;
    }

    .steel-description {
        font-size: 15px;
        line-height: 1.6;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    .steel-content {
        padding: 25px 12px;
    }

    .steel-title {
        font-size: 27px;
        line-height: 1.15;
        margin-bottom: 16px;
    }

    .steel-description {
        font-size: 14px;
        line-height: 1.65;
        margin-bottom: 20px;
    }
}













/* Experience Highlight */
.experience-highlight {
    display: inline;
    color: #7b1e20;
    font-weight: 700;
    background: linear-gradient(
        to bottom,
        transparent 62%,
        rgba(123, 30, 32, 0.13) 62%
    );
    padding: 0 2px 2px;
    border-radius: 2px;
}

/* Mobile */
@media (max-width: 575.98px) {
    .experience-highlight {
        font-weight: 700;
    }
}



.mp-top{
    margin-top: 0 !important;
  padding-top: 0 !important;
}


.font15{
font-size: 30px;
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.12;
text-wrap: balance;
}