/* Shared inner pages — New Web 2 */
.inner-page { background:#080b0e; }
.inner-page main { overflow:hidden; }
.inner-nav .desktop-nav { gap:clamp(18px,2vw,30px); }
.inner-nav .desktop-nav a[aria-current="page"] { color:var(--accent); }

.page-hero {
  min-height:min(780px,88svh);
  display:grid;
  align-items:end;
  padding:170px 0 78px;
  border-bottom:1px solid var(--line);
  background:radial-gradient(circle at 76% 28%,rgba(255,138,0,.14),transparent 28%),linear-gradient(145deg,#080b0e 28%,#10171c);
}
.page-hero__grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); gap:72px; align-items:end; }
.page-kicker { margin:0 0 18px; color:var(--accent); font:700 .68rem Manrope,sans-serif; letter-spacing:.17em; }
.page-title { max-width:900px; margin:0; font-size:clamp(3.4rem,6.4vw,7rem); line-height:.94; letter-spacing:-.06em; }
.page-lead { max-width:660px; margin:30px 0 0; color:var(--muted); font-size:clamp(1rem,1.35vw,1.22rem); line-height:1.75; }
.page-hero__media { position:relative; min-height:460px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--panel); }
.page-hero__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.72) contrast(1.05) brightness(.68); }
.page-hero__media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,rgba(5,8,10,.74)); }
.page-hero__caption { position:absolute; z-index:2; right:28px; bottom:25px; left:28px; display:flex; justify-content:space-between; gap:20px; color:#fff; font:700 .68rem Manrope,sans-serif; letter-spacing:.12em; }

.page-section { padding:clamp(76px,9vh,120px) 0; }

.article-hero { min-height:620px; }
.article-hero .page-title { max-width:1060px; font-size:clamp(3.1rem,6vw,6.5rem); }
.article-meta { display:flex; flex-wrap:wrap; gap:12px 26px; margin-top:28px; color:var(--muted); font-size:.86rem; }
.article-shell { display:grid; grid-template-columns:250px minmax(0,760px); gap:80px; justify-content:center; align-items:start; }
.article-aside { position:sticky; top:120px; padding:24px; border:1px solid var(--line); border-radius:16px; background:var(--panel); }
.article-aside strong { display:block; margin-bottom:14px; color:var(--accent); font:700 .66rem Manrope,sans-serif; letter-spacing:.12em; }
.article-aside a { display:block; padding:10px 0; border-top:1px solid var(--line); color:var(--muted); font-size:.86rem; }
.article-body { font-size:1.03rem; line-height:1.9; }
.article-body h2 { scroll-margin-top:120px; margin:64px 0 18px; font-size:clamp(2rem,3.5vw,3.2rem); line-height:1.1; letter-spacing:-.035em; }
.article-body h2:first-child { margin-top:0; }
.article-body h3 { margin:36px 0 12px; font-size:1.35rem; }
.article-body p,.article-body li { color:var(--muted); }
.article-body ul { padding-left:22px; }
.article-callout { margin:40px 0; padding:28px; border:1px solid rgba(255,138,0,.3); border-radius:16px; background:var(--accent-soft); }
.article-callout strong { color:var(--accent); }

.page-faq { border-top:1px solid var(--line); }
.page-faq__item { border-bottom:1px solid var(--line); }
.page-faq__question { width:100%; display:flex; justify-content:space-between; gap:20px; padding:26px 0; border:0; color:#fff; background:transparent; text-align:left; font-size:1.05rem; font-weight:600; cursor:pointer; }
.page-faq__question b { color:var(--accent); font-size:1.35rem; transition:transform .3s; }
.page-faq__answer { display:grid; grid-template-rows:0fr; transition:grid-template-rows .35s var(--ease); }
.page-faq__answer > div { overflow:hidden; }
.page-faq__answer p { margin:0; padding:0 48px 0 0; color:var(--muted); }
.page-faq__item.is-open .page-faq__answer { grid-template-rows:1fr; }
.page-faq__item.is-open .page-faq__answer p { padding-bottom:26px; }
.page-faq__item.is-open .page-faq__question b { transform:rotate(45deg); }

@media (max-width:1020px) {
  .page-hero__grid { grid-template-columns:1fr; }
  .page-hero__media { min-height:420px; }
  .article-shell { grid-template-columns:1fr; }
  .article-aside { position:static; }
}

@media (max-width:820px) {
  .page-hero { min-height:auto; padding:130px 0 64px; }
  .page-hero__grid { gap:44px; }
  .page-title { font-size:clamp(3rem,13vw,5rem); }
}

@media (max-width:540px) {
  .page-hero__media { min-height:340px; }
  .page-hero__caption { right:18px; bottom:18px; left:18px; }
}

@media (prefers-reduced-motion:reduce) {
  .page-faq__answer,.page-faq__question b { transition:none; }
}

/* Core pages — aligned with the final Home design system */
.core-page .site-header { background:rgba(8,11,14,.86); }
.core-page .nav-quote-button { box-shadow:0 0 26px rgba(255,138,0,.16); }
.core-page .nav-quote-button:hover,.core-page .nav-quote-button:focus-visible { box-shadow:0 0 34px rgba(255,138,0,.48),0 12px 32px rgba(255,138,0,.18); }

/* Products and shared service page */
#metal-deck,#shear-stud,#shear-stud-sizes,#stud-welding-accessories,#stud-welding-gun,#stud-machine,#accessories,#services,#consult-design,#manufacturing,#delivery-installation,#gallery { scroll-margin-top:96px; }

/* Project portfolio */
.project-portfolio-hero { position:relative; min-height:min(780px,88svh); display:flex; align-items:flex-end; isolation:isolate; overflow:hidden; border-bottom:1px solid rgba(255,138,0,.24); }
.project-portfolio-hero__image { position:absolute; z-index:-3; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 42%; filter:saturate(.72) contrast(1.06) brightness(.7); }
.project-portfolio-hero::before { content:""; position:absolute; z-index:-2; inset:0; background:linear-gradient(90deg,rgba(4,8,11,.97) 0%,rgba(4,8,11,.82) 35%,rgba(4,8,11,.25) 72%,rgba(4,8,11,.1)),linear-gradient(0deg,rgba(4,8,11,.72),transparent 46%); }
.project-portfolio-hero::after { content:""; position:absolute; z-index:-1; inset:0; box-shadow:inset 0 -140px 160px rgba(3,7,10,.7),inset 0 80px 110px rgba(3,7,10,.44); pointer-events:none; }
.project-portfolio-hero__grid { position:absolute; z-index:-1; inset:0; opacity:.18; background-image:linear-gradient(rgba(121,166,194,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(121,166,194,.16) 1px,transparent 1px); background-size:82px 82px; mask-image:linear-gradient(90deg,#000,transparent 70%); }
.project-portfolio-hero__content { position:relative; z-index:2; padding-top:150px; padding-bottom:clamp(64px,8vh,96px); }
.project-portfolio-hero__decoration { position:relative; width:max-content; }
.project-portfolio-hero__decoration::after { content:""; position:absolute; top:-32px; left:-38px; width:160px; height:160px; border-top:1px solid rgba(255,138,0,.34); border-left:1px solid rgba(255,138,0,.34); pointer-events:none; }
.project-portfolio-hero__accent { display:block; width:48px; height:3px; margin-bottom:26px; background:var(--accent); box-shadow:0 0 18px rgba(255,138,0,.5); }
.project-portfolio-hero h1 { max-width:760px; margin:12px 0 0; color:#fff; font-size:clamp(4.4rem,8.2vw,9rem); line-height:.84; letter-spacing:-.065em; text-shadow:0 12px 48px rgba(0,0,0,.72); }
.project-portfolio-stats { width:min(830px,100%); display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:clamp(42px,7vh,76px); border-top:1px solid rgba(255,255,255,.22); }
.project-portfolio-stats > div { min-height:118px; display:flex; flex-direction:column; justify-content:flex-end; padding:24px 30px 0 0; border-right:1px solid rgba(255,255,255,.22); }
.project-portfolio-stats > div + div { padding-left:30px; }
.project-portfolio-stats > div:last-child { border-right:0; }
.project-portfolio-stats strong { color:#fff; font:800 clamp(2rem,3.4vw,3.8rem)/.95 Manrope,"IBM Plex Sans Thai",sans-serif; letter-spacing:-.045em; }
.project-portfolio-stats > div:last-child strong { color:var(--accent); }
.project-portfolio-stats span { margin-top:10px; color:#d2d8db; font-size:.9rem; }

.project-gallery-section { position:relative; isolation:isolate; overflow:hidden; padding:clamp(84px,10vh,130px) 0; background:linear-gradient(180deg,#091116 0%,#071015 55%,#080d11 100%); }
.project-gallery-section::before { content:""; position:absolute; z-index:-1; inset:0; opacity:.16; background-image:linear-gradient(rgba(121,166,194,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(121,166,194,.12) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 85%,transparent); }
.project-gallery-section::after { content:""; position:absolute; z-index:-1; width:680px; aspect-ratio:1; right:-260px; top:8%; border-radius:50%; background:rgba(255,138,0,.06); filter:blur(100px); }
.project-gallery-heading { display:flex; align-items:end; justify-content:space-between; gap:40px; margin-bottom:42px; }
.project-gallery-heading h2 { margin:8px 0 0; color:#fff; font-size:clamp(3rem,5.4vw,6rem); line-height:.95; letter-spacing:-.055em; }
.project-gallery-heading > p { margin:0 0 7px; color:var(--muted); }
.project-portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.project-portfolio-card { position:relative; isolation:isolate; min-width:0; aspect-ratio:1.08; overflow:hidden; padding:0; border:1px solid rgba(121,166,194,.23); border-radius:18px; color:#fff; background:#0a1116; text-align:left; cursor:pointer; box-shadow:0 18px 48px rgba(0,0,0,.24); transition:transform .38s var(--ease),border-color .3s,box-shadow .3s; }
.project-portfolio-card::before,.project-portfolio-card::after { content:""; position:absolute; z-index:5; width:32px; height:32px; border-color:rgba(255,138,0,.66); opacity:0; transition:opacity .3s; pointer-events:none; }
.project-portfolio-card::before { left:10px; top:10px; border-left:1px solid; border-top:1px solid; }
.project-portfolio-card::after { right:10px; bottom:10px; border-right:1px solid; border-bottom:1px solid; }
.project-portfolio-card > img { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.72) contrast(1.04) brightness(.76); transition:transform .8s var(--ease),filter .4s; }
.project-portfolio-card__shade { position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,rgba(3,7,10,.05) 22%,rgba(3,7,10,.92) 83%,#03070a 100%); }
.project-portfolio-card__index { position:absolute; z-index:2; top:18px; left:18px; width:36px; height:36px; display:grid; place-items:center; border:1px solid rgba(255,138,0,.48); border-radius:50%; color:#111; background:var(--accent); font:800 .66rem Manrope,sans-serif; box-shadow:0 0 24px rgba(255,138,0,.2); }
.project-portfolio-card__content { position:absolute; z-index:2; right:22px; bottom:22px; left:22px; display:flex; flex-direction:column; }
.project-portfolio-card__content > small { color:#9dcbe4; font:700 .62rem Manrope,"IBM Plex Sans Thai",sans-serif; letter-spacing:.1em; }
.project-portfolio-card__content > strong { margin-top:8px; color:#fff; font-size:clamp(1.2rem,1.7vw,1.65rem); line-height:1.18; }
.project-portfolio-card__meta { display:flex; justify-content:space-between; gap:12px; margin-top:16px; color:#d5dadd; font-size:.78rem; }
.project-portfolio-card__meta em { font-style:normal; }
.project-portfolio-card:hover,.project-portfolio-card:focus-visible { transform:translateY(-6px); border-color:rgba(255,138,0,.7); box-shadow:0 24px 60px rgba(0,0,0,.38),0 0 30px rgba(255,138,0,.1); outline:none; }
.project-portfolio-card:hover::before,.project-portfolio-card:hover::after,.project-portfolio-card:focus-visible::before,.project-portfolio-card:focus-visible::after { opacity:1; }
.project-portfolio-card:hover > img,.project-portfolio-card:focus-visible > img { transform:scale(1.055); filter:saturate(.88) contrast(1.05) brightness(.82); }

.project-portfolio-cta { position:relative; min-height:470px; display:flex; align-items:center; isolation:isolate; overflow:hidden; }
.project-portfolio-cta > img { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 52%; filter:saturate(.65) brightness(.52); }
.project-portfolio-cta::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(4,8,11,.96),rgba(4,8,11,.7) 48%,rgba(4,8,11,.22)); }
.project-portfolio-cta h2 { margin:10px 0 32px; color:#fff; font-size:clamp(3.1rem,6vw,6.4rem); line-height:.91; letter-spacing:-.055em; }

.project-lightbox-open { overflow:hidden; }
.project-lightbox[hidden] { display:none; }
.project-lightbox { position:fixed; z-index:1000; inset:0; display:grid; place-items:center; padding:clamp(14px,3vw,44px); opacity:0; visibility:hidden; transition:opacity .24s,visibility 0s linear .24s; }
.project-lightbox.is-open { opacity:1; visibility:visible; transition-delay:0s; }
.project-lightbox__backdrop { position:absolute; inset:0; background:rgba(2,5,7,.92); backdrop-filter:blur(14px); }
.project-lightbox__dialog { position:relative; width:min(1380px,100%); max-height:calc(100svh - clamp(28px,6vw,88px)); display:grid; grid-template-rows:auto minmax(250px,1fr) auto; overflow:hidden; border:1px solid rgba(121,166,194,.28); border-radius:22px; background:linear-gradient(145deg,rgba(17,26,32,.98),rgba(5,10,14,.99)); box-shadow:0 38px 110px rgba(0,0,0,.72); transform:translateY(14px) scale(.985); transition:transform .3s var(--ease); }
.project-lightbox.is-open .project-lightbox__dialog { transform:none; }
.project-lightbox__header { display:flex; align-items:start; justify-content:space-between; gap:30px; padding:22px 26px 18px; border-bottom:1px solid rgba(121,166,194,.16); }
.project-lightbox__count { grid-row:1/4; color:var(--accent); font:800 .68rem Manrope,sans-serif; letter-spacing:.12em; }
.project-lightbox__type { margin:0; color:#89bfdc; font:700 .6rem Manrope,"IBM Plex Sans Thai",sans-serif; letter-spacing:.1em; }
.project-lightbox__header h2 { margin:4px 0 0; color:#fff; font-size:clamp(1.4rem,2.2vw,2.2rem); line-height:1.08; }
.project-lightbox__header p:last-child { margin:6px 0 0; color:var(--muted); font-size:.8rem; }
.project-lightbox__close { flex:0 0 auto; width:46px; height:46px; border:1px solid rgba(255,255,255,.2); border-radius:50%; color:#fff; background:rgba(255,255,255,.035); font-size:1.8rem; cursor:pointer; }
.project-lightbox__stage { min-height:0; display:grid; grid-template-columns:64px minmax(0,1fr) 64px; align-items:center; gap:18px; padding:22px 24px 14px; touch-action:pan-y; }
.project-lightbox__media { height:100%; min-height:310px; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle,rgba(38,76,97,.2),rgba(2,6,9,.7) 68%); }
.project-lightbox__media img { max-width:100%; width:auto; max-height:min(62svh,720px); height:auto; display:block; object-fit:contain; box-shadow:0 22px 64px rgba(0,0,0,.38); }
.project-lightbox__arrow { width:52px; height:52px; border:1px solid rgba(121,166,194,.34); border-radius:50%; color:#fff; background:rgba(5,11,15,.82); font-size:1.3rem; cursor:pointer; transition:border-color .25s,background .25s; }
.project-lightbox__arrow:hover,.project-lightbox__arrow:focus-visible,.project-lightbox__close:hover,.project-lightbox__close:focus-visible { border-color:var(--accent); background:rgba(255,138,0,.12); outline:none; }
.project-lightbox__thumbs { display:flex; gap:10px; overflow-x:auto; padding:10px 24px 22px; scrollbar-width:thin; scrollbar-color:var(--accent) transparent; }
.project-lightbox__thumb { flex:0 0 112px; height:72px; overflow:hidden; padding:0; border:1px solid rgba(121,166,194,.24); border-radius:7px; background:#080d11; cursor:pointer; opacity:.62; transition:opacity .25s,border-color .25s,transform .25s; }
.project-lightbox__thumb img { width:100%; height:100%; object-fit:cover; }
.project-lightbox__thumb.is-active { opacity:1; border-color:var(--accent); transform:translateY(-2px); box-shadow:0 0 18px rgba(255,138,0,.18); }

@media (max-width:1020px) {
  .project-portfolio-card { aspect-ratio:1.15; }
  .project-lightbox__dialog { max-height:calc(100svh - 28px); }
}
@media (max-width:680px) {
  .project-portfolio-hero { min-height:0; }
  .project-portfolio-hero::before { background:linear-gradient(180deg,rgba(4,8,11,.78),rgba(4,8,11,.4) 44%,rgba(4,8,11,.93)); }
  .project-portfolio-hero__content { padding-top:100px; padding-bottom:36px; }
  .project-portfolio-hero__decoration::after { display:none; }
  .project-portfolio-stats { grid-template-columns:1fr 1fr; }
  .project-portfolio-stats > div { min-height:72px; padding:14px 16px 0 0; }
  .project-portfolio-stats > div + div { padding-left:16px; }
  .project-portfolio-stats > div:nth-child(2) { border-right:0; }
  .project-portfolio-stats > div:last-child { grid-column:1/-1; padding-left:0; border-top:1px solid rgba(255,255,255,.22); }
  .project-gallery-heading { display:block; }
  .project-gallery-heading > p { margin-top:16px; }
  .project-portfolio-card { aspect-ratio:1.45; }
  .project-lightbox { padding:0; }
  .project-lightbox__dialog { width:100%; height:100svh; max-height:none; border:0; border-radius:0; }
  .project-lightbox__header > div { column-gap:10px; }
  .project-lightbox__close { width:42px; height:42px; }
  .project-lightbox__stage { grid-template-columns:44px minmax(0,1fr) 44px; gap:5px; padding:10px 6px; }
  .project-lightbox__media { min-height:240px; }
  .project-lightbox__media img { max-height:58svh; }
  .project-lightbox__arrow { width:40px; height:40px; }
  .project-lightbox__thumbs { padding:10px 14px 18px; }
  .project-lightbox__thumb { flex-basis:86px; height:58px; }
}

@media (prefers-reduced-motion:reduce) {
  .project-portfolio-card,.project-portfolio-card > img,.project-lightbox,.project-lightbox__dialog,.project-lightbox__thumb { transition:none; }
}

/* Project portfolio motion and editorial refinement */
.project-hero-slideshow { position:absolute; z-index:-3; inset:0; overflow:hidden; }
.project-portfolio-hero__image { z-index:auto; opacity:0; object-position:var(--project-position,center); transform:scale(1); transition:opacity .9s ease; will-change:opacity,transform; }
.project-portfolio-hero__image.is-active { opacity:1; animation:projectHeroZoom 5s linear both; }
.project-portfolio-hero__image.is-active.is-leaving { z-index:1; opacity:0; }
.project-portfolio-hero__image.is-active.is-entering { z-index:2; }
@keyframes projectHeroZoom { from { transform:scale(1); } to { transform:scale(1.065); } }
.project-reveal { opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease),transform .8s var(--ease); }
.project-reveal.is-visible { opacity:1; transform:none; }
.project-reveal--delay-1 { transition-delay:.08s; }
.project-reveal--delay-2 { transition-delay:.16s; }
.project-reveal--delay-3 { transition-delay:.24s; }
.project-reveal--delay-4 { transition-delay:.32s; }
.project-portfolio-hero h1 { display:flex; max-width:1050px; flex-direction:column; gap:clamp(8px,1.2vh,15px); font-size:clamp(3.8rem,6.4vw,7rem); }
.project-portfolio-hero h1 span { display:block; }
.project-portfolio-hero h1 > span { color:var(--accent); }
.project-portfolio-hero h1 small { display:block; font-size:.56em; font-weight:700; line-height:.95; letter-spacing:-.04em; }
.project-portfolio-stats { width:min(960px,100%); }
.project-portfolio-stats > div { justify-content:flex-end; gap:11px; }
.project-portfolio-stats span { order:0; margin:0; color:#d2d8db; font-size:.9rem; }
.project-portfolio-stats strong { order:1; display:flex; align-items:baseline; gap:10px; color:var(--accent); }
.project-portfolio-stats strong b { color:inherit; font:inherit; }
.project-portfolio-stats strong em { color:#d2d8db; font:600 .9rem Manrope,"IBM Plex Sans Thai",sans-serif; letter-spacing:0; }
.project-portfolio-stats > div:last-child strong { font-size:clamp(2rem,3.4vw,3.8rem); }

.project-gallery-heading { align-items:end; justify-content:flex-start; }
.project-portfolio-grid { display:block; }
.project-portfolio-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.project-portfolio-row + .project-portfolio-row { margin-top:22px; }
.project-portfolio-row.is-single .project-portfolio-card { grid-column:2; }
.project-portfolio-row .project-portfolio-card { opacity:0; transform:translateY(38px); transition:opacity .72s var(--ease),transform .72s var(--ease),border-color .3s,box-shadow .3s; transition-delay:calc(var(--card-order) * .11s); }
.project-portfolio-row.is-visible .project-portfolio-card { opacity:1; transform:none; }
.project-portfolio-row.is-visible .project-portfolio-card:hover,.project-portfolio-row.is-visible .project-portfolio-card:focus-visible { transform:translateY(-6px); }
.project-gallery-pagination { display:flex; align-items:center; justify-content:center; gap:22px; margin-top:42px; }
.project-gallery-pagination button { width:58px; height:58px; border:1px solid rgba(121,166,194,.34); border-radius:50%; color:#fff; background:rgba(8,17,23,.82); font-size:1.35rem; cursor:pointer; transition:border-color .25s,background .25s,transform .25s; }
.project-gallery-pagination button:hover,.project-gallery-pagination button:focus-visible { border-color:var(--accent); background:rgba(255,138,0,.12); transform:translateY(-2px); outline:none; }
.project-gallery-pagination span { color:#9aa8b0; font:700 .68rem Manrope,sans-serif; letter-spacing:.12em; }

.project-lightbox__header { position:relative; justify-content:center; padding:27px 82px 22px; text-align:center; }
.project-lightbox__header > div { display:block; width:100%; }
.project-lightbox__header h2 { margin:0; font-size:clamp(2rem,4vw,4.5rem); line-height:.96; letter-spacing:-.045em; }
.project-lightbox__details { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:13px; }
.project-lightbox__details p { margin:0 !important; color:#9dcbe4 !important; font:700 .65rem Manrope,"IBM Plex Sans Thai",sans-serif !important; letter-spacing:.08em; }
.project-lightbox__details i { width:42px; height:1px; background:var(--accent); }
.project-lightbox__close { position:absolute; top:20px; right:22px; }
.project-lightbox__header h2,.project-lightbox__details,.project-lightbox__stage,.project-lightbox__thumbs { opacity:0; transform:translateY(18px); transition:opacity .52s var(--ease),transform .52s var(--ease); }
.project-lightbox.is-open .project-lightbox__header h2,.project-lightbox.is-open .project-lightbox__details,.project-lightbox.is-open .project-lightbox__stage,.project-lightbox.is-open .project-lightbox__thumbs { opacity:1; transform:none; }
.project-lightbox.is-open .project-lightbox__details { transition-delay:.06s; }
.project-lightbox.is-open .project-lightbox__stage { transition-delay:.12s; }
.project-lightbox.is-open .project-lightbox__thumbs { transition-delay:.2s; }
.project-lightbox__thumbs { justify-content:center; }

.project-portfolio-cta { min-height:560px; border-block:1px solid rgba(255,138,0,.22); }
.project-portfolio-cta > img { object-position:center 58%; filter:saturate(.72) contrast(1.04) brightness(.5); transform:scale(1.02); }
.project-portfolio-cta::before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(3,8,12,.97) 0%,rgba(4,12,19,.85) 48%,rgba(4,12,19,.48) 72%,rgba(3,8,12,.7)); }
.project-portfolio-cta::after { background:linear-gradient(0deg,rgba(3,8,12,.8),transparent 52%),radial-gradient(circle at 80% 25%,rgba(255,138,0,.13),transparent 30%); }
.project-portfolio-cta__grid { position:absolute; z-index:-1; inset:0; opacity:.2; background-image:linear-gradient(rgba(121,166,194,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(121,166,194,.13) 1px,transparent 1px); background-size:76px 76px; mask-image:linear-gradient(90deg,#000,transparent 78%); }
.project-portfolio-cta__content { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(350px,390px); align-items:center; gap:clamp(50px,8vw,130px); padding-block:clamp(70px,9vh,100px); }
.project-portfolio-cta__message > p { margin:0 0 22px; color:var(--accent); font:800 clamp(2.05rem,4vw,4.35rem)/.9 Manrope,sans-serif; letter-spacing:-.055em; white-space:nowrap; }
.project-portfolio-cta h2 { margin:0; font-size:clamp(3rem,5vw,5.5rem); }
.project-portfolio-cta h2 span { display:block; margin-top:12px; font-size:.62em; line-height:1; letter-spacing:-.035em; }
.project-portfolio-cta h2 em { color:var(--accent); font-style:normal; }
.project-cta-contact-card { height:500px; justify-self:end; }

@media (max-width:1020px) {
  .project-portfolio-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .project-portfolio-row.is-single .project-portfolio-card { grid-column:1/-1; width:min(50%,520px); justify-self:center; }
  .project-portfolio-cta__content { grid-template-columns:1fr 1fr; gap:36px; }
  .project-cta-contact-card { width:100%; }
}
@media (max-width:680px) {
  .project-portfolio-hero__image { object-position:var(--project-mobile-position,var(--project-position,center)); }
  .project-portfolio-hero h1 { gap:9px; font-size:clamp(3rem,14vw,4.35rem); }
  .project-portfolio-hero h1 small { font-size:.57em; }
  .project-portfolio-stats strong { gap:7px; }
  .project-portfolio-row { grid-template-columns:1fr; }
  .project-portfolio-row.is-single .project-portfolio-card { grid-column:auto; width:100%; }
  .project-lightbox__header { padding:22px 62px 17px; }
  .project-lightbox__header h2 { font-size:clamp(1.65rem,8vw,2.4rem); }
  .project-lightbox__details { flex-wrap:wrap; gap:9px; margin-top:9px; }
  .project-lightbox__details i { width:24px; }
  .project-lightbox__close { top:14px; right:13px; }
  .project-lightbox__thumbs { justify-content:flex-start; }
  .project-portfolio-cta { min-height:0; }
  .project-portfolio-cta__content { grid-template-columns:1fr; align-items:start; gap:34px; padding-block:74px; }
  .project-portfolio-cta__message > p { font-size:clamp(1.75rem,9vw,2.7rem); white-space:nowrap; }
  .project-cta-contact-card { width:min(100%,390px); height:480px; justify-self:center; }
}
@media (prefers-reduced-motion:reduce) {
  .project-portfolio-hero__image { opacity:0; animation:none !important; transition:none; transform:none; }
  .project-portfolio-hero__image.is-active { opacity:1; }
  .project-reveal,.project-portfolio-row .project-portfolio-card,.project-lightbox__header h2,.project-lightbox__details,.project-lightbox__stage,.project-lightbox__thumbs { opacity:1; transform:none; transition:none; }
}

/* Blog library — dark editorial */
.blog-index-page { overflow:clip; color:var(--ink); background:var(--bg); }
.blog-index-hero { position:relative; min-height:clamp(480px,56svh,540px); display:flex; align-items:center; overflow:hidden; padding:128px 0 48px; isolation:isolate; border-bottom:1px solid rgba(255,138,0,.28); background:#0b1014; }
.blog-index-hero::before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(180deg,rgba(5,9,12,.38),rgba(5,9,12,.64)),radial-gradient(circle at 50% 25%,rgba(255,138,0,.08),transparent 35%); }
.blog-index-hero::after { content:""; position:absolute; z-index:1; right:0; bottom:0; left:0; height:1px; background:linear-gradient(90deg,transparent 12%,rgba(255,138,0,.78),transparent 88%); }
.blog-index-hero__image { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter:saturate(.82) contrast(1.04) brightness(.86); }
.blog-index-hero__content { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; color:#fff; text-align:center; }
.blog-index-hero__accent { display:block; width:48px; height:3px; margin-bottom:21px; background:var(--accent); box-shadow:0 0 18px rgba(255,138,0,.5); }
.blog-index-hero .page-kicker { margin-bottom:17px; }
.blog-index-hero h1 { margin:0; color:#fff; font-size:clamp(3.7rem,6.7vw,6.8rem); line-height:.94; letter-spacing:-.062em; }
.blog-index-hero__content > p:last-child { max-width:700px; margin:24px auto 0; color:rgba(244,245,242,.72); font-size:clamp(.98rem,1.25vw,1.14rem); line-height:1.75; }
.blog-library { padding:clamp(84px,9vw,126px) 0 clamp(94px,11vw,144px); background:radial-gradient(circle at 88% 14%,rgba(255,138,0,.055),transparent 26%),linear-gradient(180deg,#0b0f12 0%,#080b0e 100%); }
.blog-featured { position:relative; display:grid; grid-template-columns:minmax(0,7fr) minmax(390px,5fr); min-height:540px; border-block:1px solid var(--line); background:var(--panel); box-shadow:var(--shadow); }
.blog-featured-wrap { margin:0; }
.blog-featured:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
.blog-featured::before { content:""; position:absolute; z-index:3; top:-1px; left:0; width:94px; height:2px; background:var(--accent); box-shadow:0 0 20px rgba(255,138,0,.36); }
.blog-featured__media { position:relative; min-height:540px; overflow:hidden; border-right:1px solid var(--line); background:#0b141b; }
.blog-featured__media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent 56%,rgba(7,11,14,.38)),linear-gradient(180deg,transparent 68%,rgba(4,8,11,.5)); }
.blog-featured__media img { width:100%; height:100%; object-fit:cover; filter:saturate(.64) contrast(1.06) brightness(.78); transition:transform .8s var(--ease),filter .45s; }
.blog-featured__media > span { position:absolute; z-index:2; top:25px; left:25px; padding:7px 12px; border:1px solid rgba(255,138,0,.46); color:#ffc275; background:rgba(8,11,14,.78); backdrop-filter:blur(10px); font:.8rem/1.3 "IBM Plex Sans Thai",sans-serif; font-weight:700; }
.blog-featured__copy { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; overflow:hidden; padding:clamp(42px,5vw,70px); background:linear-gradient(145deg,rgba(255,255,255,.025),transparent 54%),var(--panel); }
.blog-featured__copy::after { content:""; position:absolute; right:-90px; bottom:-120px; width:300px; height:300px; border:1px solid rgba(255,138,0,.1); border-radius:50%; }
.blog-category { position:relative; z-index:1; margin:0; color:var(--accent); font:800 .68rem Manrope,sans-serif; letter-spacing:.15em; }
.blog-featured h2 { position:relative; z-index:1; margin:0 0 23px; color:#fff; font-size:clamp(2.45rem,4vw,4.45rem); line-height:1.02; letter-spacing:-.052em; }
.blog-featured__copy > p:not(.blog-category) { position:relative; z-index:1; margin:0; color:var(--muted); font-size:.98rem; line-height:1.78; }
.blog-latest-heading { display:flex; justify-content:space-between; gap:30px; align-items:flex-end; margin:clamp(82px,10vw,124px) 0 34px; scroll-margin-top:120px; }
.blog-latest-heading .page-kicker { margin-bottom:12px; color:var(--accent); }
.blog-latest-heading h2 { margin:0; color:#fff; font-size:clamp(2.5rem,4.2vw,4.5rem); line-height:1; letter-spacing:-.05em; }
.blog-carousel-controls { display:flex; gap:11px; }
.blog-carousel-controls button { width:52px; height:52px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:50%; color:#fff; background:rgba(255,255,255,.018); font-size:1.35rem; cursor:pointer; transition:border-color .25s,background .25s,color .25s,opacity .25s; }
.blog-carousel-controls button:hover:not(:disabled),.blog-carousel-controls button:focus-visible { border-color:var(--accent); color:#111; background:var(--accent); }
.blog-carousel-controls button:disabled { opacity:.25; cursor:default; }
.blog-carousel { min-width:0; }
.blog-carousel__viewport { overflow-x:auto; padding:3px 3px 22px; scroll-behavior:smooth; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-inline:contain; }
.blog-carousel__viewport::-webkit-scrollbar { display:none; }
.blog-carousel__track { display:flex; gap:22px; }
.blog-carousel-card { position:relative; flex:0 0 calc((100% - 66px)/3.12); min-width:0; min-height:460px; display:flex; flex-direction:column; overflow:hidden; opacity:1; transform:none; border:1px solid var(--line); background:var(--panel); scroll-snap-align:start; box-shadow:0 18px 42px rgba(0,0,0,.22); transition:border-color .3s,box-shadow .3s; transition-delay:var(--blog-card-delay,0ms); }
.blog-carousel-card__link { flex:1; min-height:100%; display:flex; flex-direction:column; color:inherit; }
.blog-carousel-card:hover,.blog-carousel-card:focus-within { border-color:rgba(255,138,0,.58); box-shadow:0 22px 54px rgba(0,0,0,.34); }
.blog-carousel-card:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
.blog-carousel-card::before { content:""; position:absolute; z-index:2; top:230px; left:25px; width:42px; height:2px; background:var(--accent); box-shadow:0 0 14px rgba(255,138,0,.34); }
.blog-carousel.is-visible .blog-carousel-card { opacity:1; transform:none; }
.blog-carousel-card__media { position:relative; height:230px; flex:none; overflow:hidden; background:#0c151c; }
.blog-carousel-card__media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(4,8,11,.54)); }
.blog-carousel-card__media img { width:100%; height:100%; object-fit:cover; filter:saturate(.58) contrast(1.06) brightness(.73); transition:transform .7s var(--ease),filter .35s; }
.blog-carousel-card__body { flex:1; display:flex; flex-direction:column; align-items:flex-start; padding:29px 26px 27px; }
.blog-carousel-card h3 { margin:12px 0 12px; color:#fff; font-size:clamp(1.3rem,1.75vw,1.72rem); line-height:1.24; letter-spacing:-.025em; }
.blog-carousel-card p { margin:0; color:var(--muted); font-size:.91rem; line-height:1.67; }
.blog-reveal { opacity:1; transform:none; transition:none; }
.blog-reveal.is-visible { opacity:1; transform:none; }

.blog-archive { padding-top:clamp(20px,3vh,40px); }
.blog-archive__head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:32px; }
.blog-archive__head .page-kicker { margin-bottom:12px; color:var(--accent); }
.blog-archive__head h2 { margin:0; color:#fff; font-size:clamp(2rem,3.2vw,3.2rem); line-height:1; letter-spacing:-.04em; }
.blog-search { position:relative; width:min(320px,100%); }
.blog-search input { width:100%; height:48px; padding:0 44px 0 18px; border:1px solid var(--line); border-radius:999px; background:rgba(255,255,255,.03); color:#fff; font:500 .92rem/1 "IBM Plex Sans Thai",sans-serif; }
.blog-search input::placeholder { color:var(--muted); }
.blog-search input:focus { outline:none; border-color:var(--accent); }
.blog-search::after { content:"⌕"; position:absolute; right:17px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:1.15rem; pointer-events:none; }
.blog-archive__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.blog-archive-card { display:flex; flex-direction:column; border:1px solid var(--line); background:var(--panel); overflow:hidden; transition:border-color .3s,box-shadow .3s; }
.blog-archive-card:hover,.blog-archive-card:focus-within { border-color:rgba(255,138,0,.55); box-shadow:0 14px 30px rgba(0,0,0,.28); }
.blog-archive-card:focus-within { outline:2px solid var(--accent); outline-offset:3px; }
.blog-archive-card__link { flex:1; display:flex; flex-direction:column; color:inherit; }
.blog-archive-card__media { position:relative; height:140px; flex:none; overflow:hidden; background:#0c151c; }
.blog-archive-card__media img { width:100%; height:100%; object-fit:cover; filter:saturate(.58) contrast(1.06) brightness(.73); }
.blog-archive-card__body { flex:1; display:flex; flex-direction:column; align-items:flex-start; padding:16px 16px 18px; }
.blog-archive-card .blog-category { font-size:.62rem; }
.blog-archive-card h3 { margin:8px 0 8px; color:#fff; font-size:1.02rem; line-height:1.32; letter-spacing:-.01em; }
.blog-archive-card p { margin:0; color:var(--muted); font-size:.83rem; line-height:1.6; }
.blog-archive__empty { padding:56px 0; text-align:center; color:var(--muted); }
.blog-archive__pagination { display:flex; align-items:center; justify-content:center; gap:18px; margin-top:36px; }
.blog-archive__pagination button { width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.22); border-radius:50%; color:#fff; background:rgba(255,255,255,.018); font-size:1.15rem; cursor:pointer; transition:border-color .25s,background .25s,color .25s,opacity .25s; }
.blog-archive__pagination button:hover:not(:disabled),.blog-archive__pagination button:focus-visible { border-color:var(--accent); color:#111; background:var(--accent); }
.blog-archive__pagination button:disabled { opacity:.25; cursor:default; }
.blog-archive__pagination span { color:var(--muted); font-size:.88rem; }

@media (max-width:1020px) {
  .blog-featured { grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr); }
  .blog-featured__media { min-height:500px; }
  .blog-carousel-card { flex-basis:calc((100% - 44px)/2.13); }
  .blog-archive__grid { grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px) {
  .blog-index-hero { min-height:480px; padding:116px 0 44px; }
  .blog-index-hero h1 { font-size:clamp(3.3rem,14vw,5rem); }
  .blog-index-hero__content > p:last-child br { display:none; }
  .blog-featured { grid-template-columns:1fr; }
  .blog-featured__media { min-height:350px; border-right:0; border-bottom:1px solid var(--line); }
  .blog-featured__copy { padding:39px 27px 43px; }
  .blog-featured h2 br { display:none; }
  .blog-latest-heading { align-items:center; }
  .blog-carousel-card { flex-basis:min(82vw,360px); }
  .blog-archive__grid { grid-template-columns:repeat(2,1fr); }
  .blog-archive__head { align-items:flex-start; }
}
@media (max-width:470px) {
  .blog-latest-heading { align-items:flex-end; }
  .blog-latest-heading .page-kicker { display:none; }
  .blog-carousel-controls button { width:45px; height:45px; }
  .blog-carousel-card { flex-basis:84vw; }
  .blog-carousel-card__media { height:210px; }
  .blog-carousel-card::before { top:210px; }
  .blog-archive__grid { grid-template-columns:1fr; }
  .blog-search { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  .blog-reveal { opacity:1; transform:none; transition:none; }
  .blog-carousel-card { opacity:1; transform:none; transition:none; }
  .blog-carousel__viewport { scroll-behavior:auto; }
  .blog-featured__media img,.blog-carousel-card,.blog-carousel-card__media img { transition:none; }
}

/* Contact showcase — dark TSS */
.contact-showcase-page { overflow:clip; color:#f4f5f2; background:#080b0e; }
.contact-showcase-hero { position:relative; min-height:min(720px,82svh); display:flex; align-items:center; isolation:isolate; overflow:hidden; border-bottom:1px solid rgba(255,138,0,.24); background:#080d11; }
.contact-showcase-hero::before { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(270deg,rgba(3,7,10,.58) 0%,rgba(3,7,10,.46) 31%,rgba(3,7,10,.14) 66%,rgba(3,7,10,.08)),linear-gradient(0deg,rgba(3,7,10,.39),transparent 52%),linear-gradient(180deg,rgba(3,7,10,.22),transparent 35%); }
.contact-showcase-hero::after { content:""; position:absolute; z-index:0; inset:0; box-shadow:inset 0 -120px 150px rgba(3,7,10,.36),inset 0 80px 110px rgba(3,7,10,.18); pointer-events:none; }
.contact-showcase-hero__image { position:absolute; z-index:-2; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 48%; filter:saturate(.86) contrast(1.03) brightness(.9); }
.contact-showcase-hero__grid { position:absolute; z-index:-1; inset:0; opacity:.1; background-image:linear-gradient(rgba(121,166,194,.18) 1px,transparent 1px),linear-gradient(90deg,rgba(121,166,194,.18) 1px,transparent 1px); background-size:82px 82px; mask-image:linear-gradient(270deg,#000 0%,rgba(0,0,0,.7) 30%,transparent 68%); }
.contact-showcase-hero__content { position:relative; z-index:2; display:grid; justify-items:end; padding-top:120px; text-align:right; }
.contact-showcase-accent { display:block; width:50px; height:3px; margin:0 0 24px auto; background:var(--accent); box-shadow:0 0 18px rgba(255,138,0,.32); }
.contact-showcase-hero .page-kicker { margin-bottom:16px; }
.contact-showcase-hero h1 { margin:0; color:#fff; font-size:clamp(5rem,9.6vw,10rem); line-height:.85; letter-spacing:-.07em; text-shadow:0 16px 55px rgba(0,0,0,.72); }
.contact-showcase-hero__content > p:last-child { max-width:580px; margin:32px 0 0 auto; padding-right:24px; border-right:2px solid var(--accent); color:rgba(244,245,242,.94); font-size:clamp(1.2rem,2vw,1.8rem); font-weight:600; line-height:1.52; text-shadow:0 4px 22px rgba(0,0,0,.62); }
.contact-showcase-section { position:relative; padding:clamp(86px,9vw,132px) 0; }
.contact-showcase-channels { background:radial-gradient(circle at 10% 20%,rgba(255,138,0,.06),transparent 25%),linear-gradient(180deg,#0b0f12,#080b0e); }
.contact-showcase-heading { display:grid; justify-items:center; margin-bottom:clamp(44px,5vw,70px); text-align:center; }
.contact-showcase-heading .page-kicker { margin-bottom:10px; }
.contact-showcase-heading h2 { margin:0; color:#fff; font-size:clamp(2.8rem,5vw,5.2rem); line-height:1; letter-spacing:-.055em; }
.contact-showcase-heading > span { width:52px; height:2px; margin-top:20px; background:var(--accent); box-shadow:0 0 15px rgba(255,138,0,.46); }
.contact-showcase-channel-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.contact-showcase-card { position:relative; min-width:0; min-height:500px; overflow:hidden; border:1px solid rgba(121,166,194,.2); border-radius:24px; background:linear-gradient(145deg,rgba(255,255,255,.035),transparent 42%),rgba(13,20,25,.92); box-shadow:0 24px 65px rgba(0,0,0,.28); transition:transform .38s var(--ease),border-color .3s,box-shadow .3s; }
.contact-showcase-card::before { content:""; position:absolute; width:260px; height:260px; right:-110px; top:-110px; border:1px solid rgba(255,138,0,.12); border-radius:50%; box-shadow:0 0 0 34px rgba(255,138,0,.025),0 0 0 68px rgba(255,138,0,.018); }
.contact-showcase-card:hover { transform:translateY(-5px); border-color:rgba(255,138,0,.46); box-shadow:0 30px 75px rgba(0,0,0,.38),0 0 35px rgba(255,138,0,.045); }
.contact-showcase-line-card { display:block; }
.contact-showcase-card__content.contact-showcase-line-content { min-height:680px; align-items:center; justify-content:flex-start; text-align:center; }
.contact-showcase-card__content.contact-showcase-line-content > h3 { margin-bottom:26px; }
.contact-showcase-qr-wrap { display:grid; place-items:center; width:100%; padding:0; background:radial-gradient(circle,rgba(255,138,0,.1),transparent 66%); }
.contact-showcase-qr { width:clamp(260px,25vw,340px); max-width:100%; display:grid; gap:10px; padding:16px; border:1px solid rgba(255,138,0,.6); border-radius:20px; color:#111; background:#f5f1e9; text-align:center; box-shadow:0 18px 45px rgba(0,0,0,.32); transition:transform .3s,box-shadow .3s; }
.contact-showcase-qr:hover,.contact-showcase-qr:focus-visible { transform:scale(1.025); box-shadow:0 22px 52px rgba(0,0,0,.42),0 0 22px rgba(255,138,0,.14); }
.contact-showcase-qr img { display:block; width:100%; aspect-ratio:1; border:12px solid #fff; border-radius:9px; object-fit:contain; background:#fff; box-shadow:0 0 0 1px rgba(8,11,14,.08); }
.contact-showcase-qr__meta { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:2px 4px 0; text-align:left; }
.contact-showcase-qr__meta strong { font-size:.88rem; }
.contact-showcase-qr__meta b { font:800 .82rem Manrope,sans-serif; }
.contact-showcase-qr small { color:#30383d; font:800 .7rem "IBM Plex Sans Thai",sans-serif; letter-spacing:.02em; }
.contact-hint-mobile { display:none; }
.contact-showcase-line-options { width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; }
.contact-showcase-line-options button { min-width:0; min-height:72px; display:grid; align-content:center; gap:4px; padding:12px 14px; border:1px solid rgba(255,255,255,.11); border-radius:14px; color:#fff; background:rgba(255,255,255,.025); cursor:pointer; transition:transform .25s,border-color .25s,background .25s; }
.contact-showcase-line-options button:hover,.contact-showcase-line-options button:focus-visible { transform:translateY(-2px); border-color:rgba(255,138,0,.55); background:rgba(255,138,0,.07); }
.contact-showcase-line-options button.is-active { border-color:var(--accent); background:rgba(255,138,0,.13); box-shadow:inset 0 -3px var(--accent); }
.contact-showcase-line-options small { color:var(--muted); font:800 .7rem Manrope,sans-serif; letter-spacing:.08em; }
.contact-showcase-line-options button.is-active small { color:var(--accent); }
.contact-showcase-line-options strong { min-width:0; overflow-wrap:anywhere; font:800 clamp(.9rem,1.15vw,1.05rem) Manrope,sans-serif; }
.contact-actions-mobile .contact-hint-desktop { display:none; }
.contact-actions-mobile .contact-hint-mobile { display:inline; }
.contact-actions-static .contact-showcase-qr:hover,
.contact-actions-static .contact-showcase-qr:focus-visible { transform:none; box-shadow:0 18px 45px rgba(0,0,0,.32); }
.contact-actions-static .contact-showcase-phone-main:hover span,
.contact-actions-static .contact-showcase-phone-main:focus-visible span { transform:none; }
.contact-actions-static .contact-showcase-phone-list a:hover,
.contact-actions-static .contact-showcase-phone-list a:focus-visible { border-color:rgba(255,255,255,.1); background:rgba(255,255,255,.018); }
.contact-showcase-card__content { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; min-width:0; padding:clamp(30px,3.5vw,48px); }
.contact-showcase-card__content > h3 { margin:11px 0 28px; color:#fff; font-size:clamp(2rem,3vw,3.4rem); line-height:1.04; letter-spacing:-.045em; }
.contact-showcase-email i { color:var(--accent); font-style:normal; }
.contact-showcase-phone-card::after { content:"☎"; position:absolute; right:25px; bottom:-70px; color:rgba(255,138,0,.035); font:700 17rem/1 Arial,sans-serif; transform:rotate(-18deg); }
.contact-showcase-phone-main { position:relative; z-index:1; display:grid; grid-template-columns:1fr auto; gap:4px 16px; align-items:center; padding:20px 22px; border:1px solid rgba(255,138,0,.48); border-radius:16px; color:#fff; background:linear-gradient(90deg,rgba(255,138,0,.13),rgba(255,138,0,.025)); }
.contact-showcase-phone-main small { color:var(--accent); font:800 .62rem Manrope,sans-serif; letter-spacing:.14em; }
.contact-showcase-phone-main strong { font:800 clamp(2rem,3.3vw,3.35rem)/1 Manrope,sans-serif; letter-spacing:-.04em; }
.contact-showcase-phone-main span { grid-row:1/3; grid-column:2; width:58px; height:58px; display:grid; place-items:center; border-radius:50%; color:#111; background:var(--accent); font-size:1.55rem; transition:transform .3s; }
.contact-showcase-phone-main:hover span,.contact-showcase-phone-main:focus-visible span { transform:rotate(-10deg) scale(1.08); }
.contact-showcase-phone-list { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
.contact-showcase-phone-list a { display:grid; gap:5px; padding:15px 16px; border:1px solid rgba(255,255,255,.1); border-radius:12px; color:#fff; background:rgba(255,255,255,.018); transition:border-color .25s,background .25s; }
.contact-showcase-phone-list a:hover,.contact-showcase-phone-list a:focus-visible { border-color:rgba(255,138,0,.46); background:rgba(255,138,0,.06); }
.contact-showcase-phone-list small { color:var(--muted); font-size:.7rem; }
.contact-showcase-phone-list strong { font:800 clamp(.94rem,1.4vw,1.15rem) Manrope,sans-serif; }
.contact-showcase-email { position:relative; z-index:1; min-height:88px; display:grid; grid-template-columns:auto minmax(0,1fr) 42px; grid-template-rows:auto auto; align-items:center; gap:3px 15px; margin-top:12px; padding:17px 18px; border:1px solid rgba(255,138,0,.26); border-radius:14px; color:#fff; background:linear-gradient(90deg,rgba(255,138,0,.075),rgba(255,255,255,.018)); transition:transform .25s,border-color .25s,background .25s; }
.contact-showcase-email:hover,.contact-showcase-email:focus-visible { transform:translateX(3px); border-color:rgba(255,138,0,.58); background:linear-gradient(90deg,rgba(255,138,0,.12),rgba(255,255,255,.025)); }
.contact-showcase-phone-card .contact-showcase-email span { grid-column:1/3; color:var(--accent); font:800 .7rem Manrope,sans-serif; letter-spacing:.13em; }
.contact-showcase-phone-card .contact-showcase-email strong { grid-column:1/3; min-width:0; overflow-wrap:anywhere; font-size:clamp(.95rem,1.2vw,1.08rem); line-height:1.35; }
.contact-showcase-email i { grid-column:3; grid-row:1/3; width:42px; height:42px; display:grid; place-items:center; border:1px solid rgba(255,138,0,.42); border-radius:50%; background:rgba(255,138,0,.08); font-size:1.05rem; }
.contact-showcase-location { border-block:1px solid rgba(121,166,194,.16); background:radial-gradient(circle at 80% 40%,rgba(45,101,137,.1),transparent 30%),#0a0f13; }
.contact-showcase-location-grid { display:grid; grid-template-columns:minmax(0,7fr) minmax(360px,5fr); min-height:520px; overflow:hidden; border:1px solid rgba(121,166,194,.22); border-radius:24px; background:#0d1419; box-shadow:0 25px 70px rgba(0,0,0,.3); }
.contact-showcase-map { position:relative; min-height:520px; overflow:hidden; border-right:1px solid rgba(255,255,255,.1); background:#111a20; }
.contact-showcase-map::after { content:""; position:absolute; z-index:3; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent 86%,rgba(8,13,17,.12)); }
.contact-showcase-map iframe { position:absolute; z-index:2; inset:0; width:100%; height:100%; border:0; filter:none; }
.contact-showcase-map__fallback { position:absolute; z-index:1; inset:0; display:grid; place-items:center; align-content:center; gap:14px; padding:40px; color:var(--muted); text-align:center; }
.contact-showcase-map__fallback span { color:var(--accent); font-size:3rem; }
.contact-showcase-address { position:relative; display:flex; flex-direction:column; justify-content:center; padding:clamp(36px,5vw,70px); background:linear-gradient(145deg,rgba(255,138,0,.07),transparent 40%),#0d1419; }
.contact-showcase-address__icon { width:58px; height:58px; display:grid; place-items:center; margin-bottom:23px; border:1px solid rgba(255,138,0,.55); border-radius:50%; color:var(--accent); font-size:1.75rem; }
.contact-showcase-address h3 { margin:11px 0 22px; color:#fff; font-size:clamp(1.65rem,2.7vw,2.65rem); line-height:1.14; letter-spacing:-.035em; }
.contact-showcase-address address { color:var(--muted); font-style:normal; line-height:1.8; }
.contact-showcase-hours { display:grid; grid-template-columns:auto 1fr; gap:4px 18px; margin-top:24px; padding:17px 0; border-block:1px solid rgba(255,255,255,.1); }
.contact-showcase-hours small { grid-row:1/3; align-self:center; color:var(--accent); font-weight:700; }
.contact-showcase-hours strong { color:#fff; }
.contact-showcase-hours span { color:var(--muted); font-size:.82rem; }
.contact-showcase-map-link { align-self:flex-start; display:flex; align-items:center; gap:24px; margin-top:25px; padding:13px 0 9px; border-bottom:1px solid var(--accent); color:#fff; font-weight:800; }
.contact-showcase-map-link span { color:var(--accent); }
.contact-showcase-gallery { padding:0 0 clamp(72px,8vw,116px); background:#0a0f13; }
.contact-showcase-gallery__shell { display:grid; gap:14px; }
.contact-showcase-gallery__stage { display:grid; place-items:center; height:clamp(430px,54vw,720px); min-width:0; overflow:hidden; margin:0; border:1px solid rgba(121,166,194,.18); border-radius:18px; background:#060b0f; }
.contact-showcase-gallery__stage img { width:100%; height:100%; object-fit:contain; opacity:1; transform:scale(1); transition:opacity .2s ease,transform .3s var(--ease); }
.contact-showcase-gallery__stage img.is-switching { opacity:.2; transform:scale(.995); }
.contact-showcase-gallery__thumbs { max-width:100%; overflow-x:auto; padding:2px 2px 8px; scrollbar-width:thin; scrollbar-color:rgba(255,143,0,.75) rgba(255,255,255,.06); }
.contact-showcase-gallery__thumb-track { display:flex; justify-content:center; width:max-content; min-width:100%; gap:10px; }
.contact-showcase-gallery__thumb { position:relative; flex:0 0 clamp(112px,14vw,178px); aspect-ratio:16/10; overflow:hidden; padding:0; border:1px solid rgba(121,166,194,.22); border-radius:11px; background:#111a20; opacity:.58; cursor:pointer; transition:border-color .2s ease,box-shadow .2s ease,opacity .2s ease,transform .2s var(--ease); }
.contact-showcase-gallery__thumb::after { content:""; position:absolute; inset:auto 10px 0; height:3px; border-radius:3px 3px 0 0; background:var(--accent); opacity:0; transform:scaleX(.35); transition:opacity .2s ease,transform .2s var(--ease); }
.contact-showcase-gallery__thumb img { width:100%; height:100%; object-fit:cover; transition:transform .35s var(--ease); }
.contact-showcase-gallery__thumb:hover { opacity:.86; border-color:rgba(255,143,0,.55); transform:translateY(-2px); }
.contact-showcase-gallery__thumb:hover img { transform:scale(1.035); }
.contact-showcase-gallery__thumb.is-active { opacity:1; border-color:var(--accent); box-shadow:0 0 0 1px rgba(255,143,0,.18),0 8px 24px rgba(0,0,0,.25); }
.contact-showcase-gallery__thumb.is-active::after { opacity:1; transform:scaleX(1); }
.contact-showcase-gallery__thumb:focus-visible { outline:2px solid #fff; outline-offset:3px; opacity:1; }
.contact-showcase-reveal { opacity:0; transform:translateY(32px); transition:opacity .7s var(--ease),transform .78s var(--ease); transition-delay:var(--contact-delay,0ms); }
.contact-showcase-reveal.is-visible { opacity:1; transform:none; }

@media (max-width:1100px) {
  .contact-showcase-channel-grid { grid-template-columns:1fr; }
  .contact-showcase-card { min-height:430px; }
  .contact-showcase-card__content.contact-showcase-line-content { min-height:650px; }
  .contact-showcase-location-grid { grid-template-columns:1fr; }
  .contact-showcase-map { min-height:470px; border-right:0; border-bottom:1px solid rgba(255,255,255,.1); }
}
@media (max-width:760px) {
  .contact-showcase-hero { min-height:640px; align-items:flex-end; }
  .contact-showcase-hero__image { object-position:32% center; }
  .contact-showcase-hero::before { background:linear-gradient(0deg,rgba(3,7,10,.7),rgba(3,7,10,.2) 72%),linear-gradient(270deg,rgba(3,7,10,.4),rgba(3,7,10,.08)); }
  .contact-showcase-hero__content { padding-top:130px; padding-bottom:62px; }
  .contact-showcase-hero h1 { font-size:clamp(4.2rem,22vw,7rem); }
  .contact-showcase-hero__content > p:last-child { font-size:1.12rem; }
  .contact-showcase-section { padding-block:78px; }
  .contact-showcase-card__content.contact-showcase-line-content { min-height:0; }
  .contact-showcase-qr { width:min(100%,290px); }
  .contact-showcase-card__content { padding:29px 24px 34px; }
  .contact-showcase-phone-main strong { font-size:clamp(1.65rem,8.8vw,2.35rem); }
  .contact-showcase-phone-list { grid-template-columns:1fr; }
  .contact-showcase-location-grid { min-height:0; }
  .contact-showcase-map { min-height:390px; }
  .contact-showcase-address { padding:36px 27px 42px; }
  .contact-showcase-gallery { padding-bottom:72px; }
  .contact-showcase-gallery__shell { gap:10px; }
  .contact-showcase-gallery__stage { height:clamp(310px,92vw,440px); border-radius:14px; }
  .contact-showcase-gallery__thumb-track { justify-content:flex-start; }
  .contact-showcase-gallery__thumb { flex-basis:clamp(92px,27vw,118px); border-radius:9px; }
}
@media (max-width:420px) {
  .contact-showcase-line-content { padding-inline:18px; }
  .contact-showcase-qr { width:min(100%,278px); padding:13px; }
  .contact-showcase-line-options { gap:7px; }
  .contact-showcase-line-options button { min-height:66px; padding:9px 7px; }
  .contact-showcase-line-options small { font-size:.62rem; letter-spacing:.04em; }
  .contact-showcase-line-options strong { font-size:.84rem; }
  .contact-showcase-email { grid-template-columns:1fr auto; }
  .contact-showcase-email span { grid-column:1; }
  .contact-showcase-email strong { grid-column:1; }
  .contact-showcase-email i { grid-column:2; grid-row:1/3; }
}
@media (prefers-reduced-motion:reduce) {
  .contact-showcase-reveal { opacity:1; transform:none; transition:none; }
  .contact-showcase-card,.contact-showcase-qr,.contact-showcase-phone-main span,.contact-showcase-gallery__stage img,.contact-showcase-gallery__thumb,.contact-showcase-gallery__thumb::after,.contact-showcase-gallery__thumb img { transition:none; }
}

/* Products: long-form, CMS-ready system showcase. */
.product-system-hero { position:relative; isolation:isolate; min-height:clamp(680px,84svh,900px); overflow:hidden; display:flex; align-items:center; border-bottom:1px solid rgba(127,166,190,.18); background:radial-gradient(circle at 72% 48%,rgba(34,93,126,.25),transparent 35%),linear-gradient(115deg,#05090c 0%,#09141b 58%,#101b22 100%); }
.product-system-hero::after { content:""; position:absolute; z-index:-1; inset:0; background:linear-gradient(90deg,rgba(3,7,10,.98) 0%,rgba(3,8,11,.76) 43%,rgba(4,9,13,.06) 74%),linear-gradient(0deg,rgba(3,7,10,.62),transparent 44%); }
.product-system-hero__grid { position:absolute; z-index:-1; inset:0; opacity:.22; background-image:linear-gradient(rgba(111,157,184,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(111,157,184,.12) 1px,transparent 1px); background-size:84px 84px; mask-image:linear-gradient(90deg,transparent,black 30%,black 85%,transparent); }
.product-system-hero__layout { width:var(--container); margin-inline:auto; display:grid; grid-template-columns:minmax(420px,.88fr) minmax(520px,1.12fr); gap:clamp(42px,6vw,100px); align-items:center; padding-block:clamp(120px,15vh,170px) clamp(76px,10vh,110px); }
.product-system-hero__copy { position:relative; z-index:2; }
.product-system-hero__copy h1 { margin:18px 0 26px; color:#fff; font-size:clamp(5rem,8.5vw,9.2rem); line-height:.76; letter-spacing:-.075em; }
.product-system-hero__copy h1 span { color:var(--accent); font-size:.68em; }
.product-system-hero__copy > p:last-of-type { max-width:630px; margin:0; color:#b8c3c9; font-size:clamp(1rem,1.3vw,1.17rem); line-height:1.85; }
.product-system-hero__actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.product-system-hero__visual { position:relative; min-height:580px; margin:0 -7vw 0 -5vw; display:grid; place-items:center; }
.product-system-hero__visual::before { content:""; position:absolute; width:72%; aspect-ratio:1; border:1px solid rgba(124,177,205,.15); border-radius:50%; box-shadow:0 0 100px rgba(44,111,148,.13); }
.product-system-hero__visual img { position:relative; z-index:1; width:100%; height:100%; max-height:660px; object-fit:contain; filter:drop-shadow(0 38px 40px rgba(0,0,0,.55)); }
.product-system-shell { display:grid; grid-template-columns:238px minmax(0,1fr); gap:clamp(58px,7vw,110px); align-items:start; }
.product-system-index { position:sticky; z-index:20; top:106px; display:grid; gap:0; margin-top:clamp(96px,12vh,140px); padding:22px 0; border-block:1px solid var(--line); }
.product-system-index p { margin:0 0 13px; color:var(--accent); font:700 .64rem Manrope,sans-serif; letter-spacing:.15em; }
.product-system-index__pills { display:contents; }
.product-system-index a { position:relative; display:grid; grid-template-columns:32px 1fr; gap:10px; align-items:center; min-height:48px; padding:0 13px; color:#84939c; font-size:.82rem; border-left:1px solid transparent; transition:color .25s,background .25s,border-color .25s; }
.product-system-index a span { color:#53646e; font:600 .58rem Manrope,sans-serif; }
.product-system-index a:hover,.product-system-index a:focus-visible,.product-system-index a.is-active { color:#fff; border-color:var(--accent); background:linear-gradient(90deg,rgba(255,138,0,.12),transparent); }
.product-system-index a.is-active span { color:var(--accent); }
.product-system-content { min-width:0; }
.product-system-section { scroll-margin-top:104px; }
.product-system-primary { padding-block:clamp(96px,12vh,140px); }
.product-system-section__head { display:grid; grid-template-columns:1fr auto; gap:8px 30px; padding-bottom:32px; border-bottom:1px solid var(--line); }
.product-system-section__head .page-kicker { grid-column:1; }
.product-system-section__head > span { grid-column:2; grid-row:1/3; color:rgba(255,138,0,.22); font:800 clamp(4rem,8vw,8rem)/.75 Manrope,sans-serif; }
.product-system-section__head h2 { margin:0; color:#fff; font-size:clamp(4.2rem,7vw,7.8rem); line-height:.9; letter-spacing:-.065em; }
.product-system-section__head > p:last-child { grid-column:1/-1; max-width:730px; margin:12px 0 0; color:#aebac1; font-size:1.04rem; line-height:1.7; }
.product-system-primary__visual { height:clamp(470px,47vw,700px); margin:0; display:grid; place-items:center; overflow:hidden; }
.product-system-primary__visual img { width:94%; height:94%; object-fit:contain; filter:drop-shadow(0 35px 40px rgba(0,0,0,.48)); }
.product-system-primary__copy { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(32px,5vw,70px); padding-top:34px; border-top:1px solid var(--line); }
.product-system-primary__copy > p { margin:0; color:#aebac1; line-height:1.85; }
.product-system-primary__copy aside { grid-column:1/-1; display:grid; grid-template-columns:220px 1fr; gap:24px; padding:22px 26px; border-left:2px solid var(--accent); background:linear-gradient(90deg,rgba(255,138,0,.1),transparent); }
.product-system-primary__copy aside strong { color:#fff; }.product-system-primary__copy aside span { color:#9fadb5; }
.product-system-item { min-height:clamp(680px,82vh,820px); display:grid; grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr); gap:clamp(46px,7vw,94px); align-items:center; padding-block:clamp(90px,11vh,126px); border-top:1px solid var(--line); }
.product-system-item--reverse .product-system-item__visual { order:2; }.product-system-item--reverse .product-system-item__copy { order:1; }
.product-system-item__visual { min-height:520px; margin:0; display:grid; place-items:center; }
.product-system-item__visual img { width:100%; height:520px; object-fit:contain; filter:drop-shadow(0 30px 36px rgba(0,0,0,.5)); transition:transform .7s var(--ease); }
.product-system-item:hover .product-system-item__visual img { transform:scale(1.025); }
.product-system-item__copy { position:relative; }
.product-system-number { position:absolute; right:0; top:-54px; color:rgba(255,138,0,.18); font:800 clamp(4.5rem,7vw,7.5rem)/1 Manrope,sans-serif; }
.product-system-item__copy h2,.product-system-machine__copy h2,.product-system-series__head h2 { margin:15px 0 25px; color:#fff; font-size:clamp(3.6rem,5.8vw,6.3rem); line-height:.92; letter-spacing:-.06em; }
.product-system-item__copy > p:not(.page-kicker),.product-system-machine__copy > p:not(.page-kicker),.product-system-series__head > p:not(.page-kicker) { margin:0; color:#aebac1; font-size:1.01rem; line-height:1.85; }
.product-system-item__copy ul { display:grid; gap:0; margin:34px 0 0; padding:0; list-style:none; border-top:1px solid var(--line); }
.product-system-item__copy li { position:relative; padding:15px 0 15px 25px; border-bottom:1px solid var(--line); color:#d7dde0; }.product-system-item__copy li::before { content:""; position:absolute; left:0; top:23px; width:8px; height:2px; background:var(--accent); }
.product-system-machine { position:relative; min-height:clamp(680px,82vh,820px); display:grid; grid-template-columns:minmax(390px,.95fr) minmax(0,1.05fr); gap:clamp(46px,7vw,94px); align-items:center; margin-inline:0; padding-block:clamp(90px,11vh,126px); overflow:visible; border-block:0; border-top:1px solid var(--line); background:transparent; }
.product-system-machine::before { display:none; }
.product-system-machine > * { position:relative; z-index:1; }
.product-system-machine__copy { max-width:570px; }
.product-system-machine__modes { display:grid; grid-template-columns:1fr 1fr; margin:34px 0; border-block:1px solid var(--line); }
.product-system-machine__modes span { padding:20px 20px 20px 0; color:#aebac1; line-height:1.55; }.product-system-machine__modes span + span { padding-left:24px; border-left:1px solid var(--line); }.product-system-machine__modes b { display:block; margin-bottom:5px; color:var(--accent); font:700 .7rem Manrope,sans-serif; letter-spacing:.15em; }
.product-system-machine__visual { min-height:520px; margin:0; display:grid; place-items:center; }.product-system-machine__visual img { width:100%; height:520px; object-fit:contain; filter:drop-shadow(0 30px 36px rgba(0,0,0,.5)); }
.product-system-series { padding-block:clamp(110px,14vh,160px); }
.product-system-series__head { position:relative; max-width:860px; margin-bottom:58px; }.product-system-series__head .product-system-number { right:0; top:-20px; }
.product-system-series__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.product-system-series__card { min-width:0; border:1px solid rgba(142,180,202,.18); background:linear-gradient(150deg,rgba(15,27,35,.9),rgba(7,14,19,.92)); transition:transform .35s var(--ease),border-color .3s; }
.product-system-series__card:hover { transform:translateY(-5px); border-color:rgba(255,138,0,.48); }
.product-system-series__card figure { height:360px; margin:0; display:grid; place-items:center; overflow:hidden; background:radial-gradient(circle,rgba(45,105,139,.17),transparent 65%); }
.product-system-series__card img { width:94%; height:94%; object-fit:contain; filter:drop-shadow(0 28px 34px rgba(0,0,0,.48)); }
.product-system-series__card > div { padding:30px 32px 34px; border-top:1px solid var(--line); }
.product-system-series__card > div > span { color:var(--accent); font:700 .62rem Manrope,sans-serif; letter-spacing:.15em; }
.product-system-series__card h3 { margin:10px 0 13px; color:#fff; font-size:clamp(2.8rem,4vw,4.6rem); line-height:.9; }
.product-system-series__card p { min-height:92px; margin:0; color:#aebac1; line-height:1.7; }
.product-system-series__card a { display:flex; justify-content:space-between; margin-top:24px; padding-top:18px; border-top:1px solid var(--line); color:#fff; font-weight:700; }.product-system-series__card a b { color:var(--accent); }
.product-system-cta { position:relative; overflow:hidden; border-top:1px solid rgba(255,138,0,.3); background:linear-gradient(110deg,#070c10,#10202a); }
.product-system-cta::before { content:""; position:absolute; inset:0; opacity:.12; background:url("assets/home/product-ecosystem/background.webp") center/cover no-repeat; }
.product-system-cta__inner { position:relative; z-index:1; min-height:440px; display:grid; grid-template-columns:1fr auto; gap:60px; align-items:center; }
.product-system-cta h2 { margin:12px 0 18px; color:#fff; font-size:clamp(3.2rem,5.4vw,6rem); line-height:.95; letter-spacing:-.055em; }.product-system-cta p:not(.page-kicker) { max-width:680px; margin:0; color:#aebac1; line-height:1.75; }
.product-system-reveal { opacity:0; transform:translateY(30px); transition:opacity .75s ease,transform .85s var(--ease); }.product-system-reveal.is-visible { opacity:1; transform:none; }.product-system-delay-1 { transition-delay:.1s; }.product-system-delay-2 { transition-delay:.2s; }
.service-link-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.service-link-card { position:relative; min-height:430px; overflow:hidden; border:1px solid var(--line); border-radius:22px; background:var(--panel); }
.service-link-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 28%,rgba(4,7,9,.96)); }
.service-link-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:saturate(.66) brightness(.62); transition:transform .7s var(--ease),filter .35s; }
.service-link-card > span { position:absolute; z-index:2; inset:auto 26px 25px; display:grid; grid-template-columns:1fr auto; gap:8px 20px; align-items:end; }
.service-link-card small { grid-column:1/-1; color:var(--accent); font:700 .6rem Manrope,sans-serif; letter-spacing:.12em; }
.service-link-card strong { color:#fff; font-size:clamp(1.35rem,2vw,2rem); line-height:1.2; }
.service-link-card b { color:var(--accent); font-size:1.3rem; }
.service-link-card:hover,.service-link-card:focus-visible { border-color:rgba(255,138,0,.58); }
.service-link-card:hover img,.service-link-card:focus-visible img { transform:scale(1.055); filter:saturate(.92) brightness(.72); }
.service-page-hero .page-title { font-size:clamp(3.8rem,7vw,7.8rem); }
.service-detail-grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr); gap:clamp(54px,8vw,110px); align-items:center; }
.service-detail-grid--reverse .service-detail-copy { order:2; }
.service-detail-grid--reverse .service-detail-media { order:1; }
.service-detail-copy h2 { margin:0; font-size:clamp(2.8rem,5vw,5.4rem); line-height:.98; letter-spacing:-.055em; }
.service-detail-copy > p:not(.page-kicker) { margin:28px 0 0; color:var(--muted); font-size:1.03rem; line-height:1.82; }
.service-detail-copy ul { display:grid; gap:0; margin:34px 0; padding:0; list-style:none; border-top:1px solid var(--line); }
.service-detail-copy li { padding:15px 0; border-bottom:1px solid var(--line); color:#d9dddf; }
.text-link { display:flex; justify-content:space-between; gap:20px; max-width:360px; padding:16px 0; border-bottom:1px solid rgba(255,138,0,.48); color:#fff; font-weight:700; }
.text-link span { color:var(--accent); }
.service-detail-media { min-height:560px; overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); }
.service-detail-media img { width:100%; height:100%; min-height:560px; object-fit:cover; filter:saturate(.72) brightness(.7); }
@media (max-width:1020px) {
  .product-system-hero__layout { grid-template-columns:1fr; padding-top:150px; }.product-system-hero__visual { display:none; }
  .product-system-shell { grid-template-columns:minmax(0,1fr); }
  .product-system-index { z-index:10; top:74px; display:block; margin:0 calc(50% - 50vw); padding:12px 0; border-top:0; background:rgba(7,13,17,.94); backdrop-filter:blur(14px); }
  .product-system-index p { display:none; }
  .product-system-index__pills { display:flex; gap:7px; padding:0 4vw; overflow-x:auto; scroll-snap-type:x proximity; scrollbar-width:none; }
  .product-system-index__pills::-webkit-scrollbar { display:none; }
  .product-system-index a { flex:0 0 clamp(108px,31vw,144px); min-height:46px; padding-inline:13px; display:flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:999px; color:#fff; text-align:center; white-space:normal; line-height:1.2; font-weight:700; scroll-snap-align:start; }
  .product-system-index a span { display:none; }
  .product-system-index a.is-active { border-color:var(--accent); background:var(--accent); color:#111; }
  .product-system-index__pills a:first-child { animation:productIndexSwipeHint 1.1s .6s ease-in-out 1; }
  .product-system-index__contact { display:flex; width:calc(100% - 8vw); margin:12px 4vw 0; }
  .product-system-primary { padding-top:82px; }.product-system-item { grid-template-columns:1fr; gap:25px; min-height:0; }.product-system-item--reverse .product-system-item__visual,.product-system-item--reverse .product-system-item__copy { order:initial; }.product-system-item__visual { min-height:420px; }.product-system-item__visual img { height:420px; }.product-system-item__copy { max-width:760px; }
  .product-system-machine { grid-template-columns:1fr; margin-inline:0; padding-inline:0; }.product-system-machine__copy { max-width:760px; }.product-system-machine__visual { min-height:480px; }.product-system-machine__visual img { width:100%; height:480px; }
  .service-link-grid { grid-template-columns:1fr; }
  .service-link-card { min-height:360px; }
  .service-detail-grid { grid-template-columns:1fr; gap:40px; }
  .service-detail-grid--reverse .service-detail-copy,.service-detail-grid--reverse .service-detail-media { order:initial; }
  .service-detail-media,.service-detail-media img { min-height:480px; }
}
@keyframes productIndexSwipeHint {
  0%,100% { transform:translateX(0); }
  40% { transform:translateX(-16px); }
  70% { transform:translateX(-3px); }
}
@media (max-width:640px) {
  .product-system-hero { min-height:0; }.product-system-hero__layout { padding-top:126px; padding-bottom:40px; gap:10px; }.product-system-hero__copy h1 { font-size:clamp(4.35rem,20vw,6.4rem); }.product-system-hero__actions { display:grid; }.product-system-hero__visual { display:none; }
  .product-system-section__head { grid-template-columns:1fr; }.product-system-section__head > span { display:none; }.product-system-section__head h2 { font-size:clamp(3.6rem,18vw,5.2rem); }.product-system-primary__visual { height:350px; display:flex; align-items:stretch; justify-content:center; }.product-system-primary__visual img { width:100%; height:100%; }.product-system-primary__copy { grid-template-columns:1fr; gap:24px; }.product-system-primary__copy aside { grid-template-columns:1fr; gap:7px; }
  .product-system-item { padding-block:74px; }.product-system-item__visual { min-height:320px; }.product-system-item__visual img { height:320px; }.product-system-number { top:-36px; font-size:4.2rem; }.product-system-item__copy h2,.product-system-machine__copy h2,.product-system-series__head h2 { font-size:clamp(3.25rem,16vw,4.7rem); }
  .product-system-machine { padding-block:80px; }.product-system-machine__modes { grid-template-columns:1fr; }.product-system-machine__modes span + span { padding-left:0; border-left:0; border-top:1px solid var(--line); }.product-system-machine__visual,.product-system-machine__visual img { min-height:0; height:350px; }
  .product-system-series { padding-block:86px; }.product-system-series__grid { grid-template-columns:1fr; }.product-system-series__card figure { height:300px; display:flex; align-items:stretch; justify-content:center; }.product-system-series__card p { min-height:0; }
  .product-system-cta__inner { min-height:520px; grid-template-columns:1fr; gap:30px; padding-block:76px; }.product-system-cta__inner .button { width:100%; }
  .service-link-card { min-height:390px; }
  .service-detail-media,.service-detail-media img { min-height:380px; }
}
@media (prefers-reduced-motion:reduce) {
  .product-system-reveal { opacity:1; transform:none; transition:none; }
  .product-system-item__visual img,.product-system-series__card { transition:none; }
}

/* Products page refinements: viewport sticky index and one contact entry point. */
.products-page { overflow-x:clip; overflow-y:visible; }
.products-page main { overflow:visible; }
@media (min-width:1021px) {
  .products-page .product-system-hero__copy { left:clamp(32px,4vw,70px); top:clamp(-24px,-1.5vw,-10px); }
  .products-page .product-system-primary .product-system-section__head { position:relative; z-index:3; top:clamp(52px,5.6vw,78px); }
}
.product-system-index .product-system-index__contact {
  grid-template-columns:1fr auto;
  gap:12px;
  min-height:52px;
  margin-top:16px;
  border:1px solid var(--accent);
  border-radius:4px;
  color:#111;
  background:linear-gradient(135deg,#ffb11b,var(--accent));
  box-shadow:0 12px 28px rgba(255,138,0,.16);
  font-weight:800;
}
.product-system-index .product-system-index__contact b { color:#111; font-size:1rem; }
.product-system-index .product-system-index__contact:hover,
.product-system-index .product-system-index__contact:focus-visible {
  color:#111;
  border-color:#ffbd45;
  background:linear-gradient(135deg,#ffc04b,#ff951c);
  box-shadow:0 16px 34px rgba(255,138,0,.27);
}
.product-system-machine__modes { margin-bottom:0; }
.product-system-series__card > div { padding-bottom:38px; }

@media (max-width:1020px) {
  .product-system-index .product-system-index__contact { min-height:40px; border-radius:999px; }
}

/* ============================================================
   ACTIVE PAGE TYPOGRAPHY READABILITY PASS
   Products, Projects, Blog and Contact only.
   ============================================================ */
.page-kicker { font-size:var(--type-meta); }

/* Products */
.product-system-hero__copy > p:last-of-type,
.product-system-section__head > p:last-child,
.product-system-primary__copy > p,
.product-system-item__copy > p:not(.page-kicker),
.product-system-machine__copy > p:not(.page-kicker),
.product-system-series__head > p:not(.page-kicker),
.product-system-series__card p,
.product-system-cta p:not(.page-kicker) {
  font-size:var(--type-body);
}
.product-system-item__copy li,
.product-system-primary__copy aside span,
.product-system-machine__modes span,
.product-system-series__card a { font-size:var(--type-body-compact); }
.product-system-index a { font-size:var(--type-ui); }
.product-system-index p,
.product-system-index a span,
.product-system-machine__modes b,
.product-system-series__card > div > span { font-size:var(--type-micro); }

/* Projects */
.project-gallery-heading > p,
.project-lightbox__header p:last-child,
.project-portfolio-stats span,
.project-portfolio-card__meta { font-size:var(--type-ui); }
.project-portfolio-card__content > small,
.project-lightbox__type,
.project-lightbox__count { font-size:var(--type-meta); }
.project-gallery-pagination span { font-size:var(--type-ui); }

/* Blog */
.blog-index-hero__content > p:last-child,
.blog-featured__copy > p:not(.blog-category),
.blog-carousel-card p { font-size:var(--type-body); }
.blog-category,
.blog-featured__media > span { font-size:var(--type-meta); }

/* Contact */
.contact-showcase-map__fallback p,
.contact-showcase-address address { font-size:var(--type-body); }
.contact-showcase-phone-list strong,
.contact-showcase-email strong,
.contact-showcase-hours span,
.contact-showcase-map-link { font-size:var(--type-ui); }
.contact-showcase-qr small,
.contact-showcase-phone-main small,
.contact-showcase-phone-list small,
.contact-showcase-email span,
.contact-showcase-hours small { font-size:var(--type-meta); }

/* Blog Article Template V1 */
.article-v1-page { background:#080d11; }
.article-v1 { overflow:hidden; background:linear-gradient(180deg,#0b1116 0,#080d11 100%); }
.article-v1-hero { position:relative; padding:clamp(122px,10vw,150px) 0 clamp(42px,4.5vw,62px); border-bottom:1px solid rgba(121,166,194,.15); }
.article-v1-hero::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,rgba(255,138,0,.08),transparent 32%),radial-gradient(circle at 82% 28%,rgba(56,104,132,.15),transparent 30%); }
.article-v1-hero__inner { position:relative; z-index:1; text-align:center; }
.article-v1-hero__inner::before,.article-v1-hero__inner::after { content:""; display:block; height:1px; margin-inline:auto; background:linear-gradient(90deg,transparent,var(--accent),transparent); }
.article-v1-hero__inner::before { width:46px; margin-bottom:20px; }
.article-v1-hero__inner::after { width:76px; margin-top:24px; }
.article-v1-tags { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin-bottom:20px; }
.article-v1-tag { display:inline-flex; align-items:center; min-height:30px; padding:6px 12px; border:1px solid rgba(255,138,0,.5); border-radius:999px; color:var(--accent); font:700 12px/1 Manrope,sans-serif; letter-spacing:.08em; }
.article-v1-title { max-width:920px; margin:0 auto; color:#fff; font-size:clamp(2.8rem,4.7vw,5.2rem); line-height:1; letter-spacing:-.05em; text-wrap:balance; }
.article-v1-story { padding:clamp(58px,6vw,88px) 0; }
.article-v1-story__inner { display:grid; gap:clamp(72px,8vw,112px); }
.article-v1-story-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(42px,5vw,76px); align-items:center; }
.article-v1-story-row--details { grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.article-v1-story-copy { min-width:0; }
.article-v1-gallery-panel { min-width:0; align-self:center; }
.article-v1-main-media-wrap { max-width:1000px; padding-top:clamp(22px,3vw,38px); }
.article-v1-main-media { aspect-ratio:4/3; height:auto; overflow:hidden; margin:0; border:0; border-radius:0; background:transparent; }
.article-v1-main-media img { width:100%; height:100%; object-fit:contain; }
.article-v1-content { padding:clamp(58px,6vw,86px) 0; }
.article-v1-sections { max-width:760px; margin:0 auto; }
.article-v1-section + .article-v1-section { margin-top:clamp(42px,4.5vw,60px); }
.article-v1-section h2 { margin:0 0 20px; color:#fff; font-size:clamp(1.8rem,2.7vw,2.7rem); line-height:1.14; letter-spacing:-.03em; }
.article-v1-section p,.article-v1-section li { color:#bbc4ca; font-size:clamp(1rem,1.25vw,1.1rem); line-height:1.9; }
.article-v1-section p { margin:0 0 18px; }
.article-v1-section ul { display:grid; gap:8px; margin:20px 0 24px; padding-left:1.4em; }
.article-v1-section li::marker { color:var(--accent); }
.article-floor-story .article-v1-story__inner { grid-template-columns:minmax(0,1fr); gap:clamp(64px,7vw,100px); }
.article-floor-story .article-v1-story__inner > * { min-width:0; max-width:100%; }
.article-floor-media { padding:clamp(14px,2vw,24px); background:#f5f5f3; }
.article-floor-media img { object-fit:contain; }
.article-floor-system { padding-top:clamp(42px,5vw,68px); border-top:1px solid rgba(121,166,194,.18); }
.article-floor-wide { width:100%; max-width:920px; margin-inline:auto; }
.article-floor-table-wrap { width:100%; min-width:0; max-width:100%; overflow-x:auto; margin-top:28px; border:1px solid rgba(121,166,194,.2); overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; }
.article-floor-table { width:100%; min-width:760px; border-collapse:collapse; color:#bbc4ca; background:rgba(255,255,255,.018); }
.article-floor-table th,.article-floor-table td { padding:18px 20px; border-right:1px solid rgba(121,166,194,.14); border-bottom:1px solid rgba(121,166,194,.14); text-align:left; vertical-align:top; line-height:1.65; }
.article-floor-table thead th { color:#111; background:var(--accent); font-weight:800; }
.article-floor-table tbody th { width:22%; color:#fff; font-weight:700; }
.article-floor-table tr:last-child > * { border-bottom:0; }
.article-floor-table tr > *:last-child { border-right:0; }
.article-floor-conclusion { align-items:start; padding-top:clamp(42px,5vw,68px); border-top:1px solid rgba(121,166,194,.18); }
.article-v1-callout { margin:34px 0 0; padding:24px 26px; border-left:3px solid var(--accent); background:rgba(255,138,0,.075); }
.article-v1-callout strong { display:block; margin-bottom:8px; color:#fff; font-size:1rem; }
.article-v1-callout p { margin:0; color:#d1d7da; }
.article-v1-gallery-section { padding:clamp(48px,5vw,68px) 0; border-top:1px solid rgba(121,166,194,.15); background:#0a0f13; }
.article-v1-gallery-heading { margin-bottom:30px; }
.article-v1-gallery-heading .page-kicker { margin-bottom:12px; }
.article-v1-gallery-heading h2 { margin:0; color:#fff; font-size:clamp(2.25rem,4vw,4.5rem); line-height:1.02; letter-spacing:-.045em; }
.media-gallery { display:grid; gap:12px; max-width:none; margin-inline:auto; }
.media-gallery__stage { position:relative; aspect-ratio:4/3; height:auto; min-width:0; overflow:hidden; margin:0; border:1px solid transparent; border-radius:0; background:transparent; }
.media-gallery__stage img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; opacity:1; transform:scale(1); transition:opacity .2s ease,transform .3s var(--ease); }
.media-gallery__stage img.is-switching { opacity:.2; transform:scale(.995); }
.media-gallery__thumbs { max-width:100%; overflow-x:auto; overflow-y:hidden; padding:2px 2px 8px; scrollbar-width:thin; scrollbar-color:rgba(255,138,0,.5) transparent; }
.media-gallery__thumb-track { display:flex; justify-content:center; gap:10px; min-width:max-content; }
.media-gallery__thumb { flex:0 0 clamp(92px,10vw,130px); aspect-ratio:16/10; overflow:hidden; padding:0 0 4px; border:1px solid transparent; border-radius:0; background:transparent; cursor:pointer; opacity:.52; transition:opacity .2s ease,transform .2s ease; }
.media-gallery__thumb img { display:block; width:auto; height:auto; max-width:100%; max-height:100%; margin:auto; object-fit:contain; pointer-events:none; }
.media-gallery__thumb:hover,.media-gallery__thumb:focus-visible { opacity:1; border-color:transparent; transform:translateY(-2px); }
.media-gallery__thumb.is-active { opacity:1; border-color:transparent; box-shadow:inset 0 -2px var(--accent); }
.article-v1-actions { padding:clamp(32px,4vw,48px) 0; border-top:1px solid rgba(121,166,194,.15); background:transparent; }
.article-v1-actions__inner { display:flex; justify-content:space-between; gap:14px; }
.article-v1-actions .button { min-width:220px; }

@media (max-width:700px) {
  .article-v1-hero { padding:104px 0 40px; }
  .article-v1-hero__inner::before { margin-bottom:16px; }
  .article-v1-hero__inner::after { margin-top:20px; }
  .article-v1-title { font-size:clamp(2.35rem,10.5vw,3.1rem); }
  .article-v1-main-media-wrap { width:100%; padding-inline:0; padding-top:0; }
  .article-v1-story { padding-block:44px; }
  .article-v1-story__inner { gap:58px; }
  .article-v1-story-row,.article-v1-story-row--details { min-width:0; grid-template-columns:minmax(0,1fr); gap:34px; }
  .article-v1-main-media { width:100%; height:auto; border-inline:0; border-radius:0; }
  .article-v1-content { padding-block:52px; }
  .article-v1-section + .article-v1-section { margin-top:42px; }
  .article-v1-callout { padding:21px 20px; }
  .article-floor-system--reverse .article-v1-section { order:2; }
  .article-floor-system--reverse .article-floor-media { order:1; }
  .article-floor-table th,.article-floor-table td { padding:15px 16px; }
  .article-floor-table-wrap::after { content:"เลื่อนตารางไปด้านข้างเพื่อดูข้อมูลเพิ่มเติม →"; position:sticky; left:0; display:block; width:max-content; padding:9px 14px; color:var(--muted); font-size:.75rem; }
  .article-v1-gallery-section { padding-block:44px; }
  .media-gallery { gap:10px; }
  .media-gallery__stage { aspect-ratio:4/3; height:auto; border-radius:0; }
  .media-gallery__thumbs { padding-bottom:0; scrollbar-width:none; }
  .media-gallery__thumbs::-webkit-scrollbar { display:none; }
  .media-gallery__thumb-track { justify-content:flex-start; width:100%; min-width:100%; gap:8px; }
  .media-gallery__thumb { flex:1 1 0; min-width:72px; max-width:none; border-radius:0; }
  .article-v1-actions__inner { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); justify-content:stretch; gap:8px; }
  .article-v1-actions .button { width:100%; min-width:0; min-height:52px; padding-inline:12px; font-size:14px; }
}

@media (min-width:900px) {
  .article-v1-section h2 { margin-left:0; }
}

@media (prefers-reduced-motion:reduce) {
  .media-gallery__stage img,.media-gallery__thumb { transition:none; }
}

/* Blog Article Layout B — comparison / decision */
.article-decision-story { padding:clamp(52px,6vw,84px) 0; }
.article-decision-story__inner { display:grid; gap:clamp(56px,7vw,92px); }
.article-decision-hero-media { width:min(100%,1080px); aspect-ratio:16/8; overflow:hidden; margin:0 auto; background:transparent; }
.article-decision-hero-media img { width:100%; height:100%; object-fit:contain; }
.article-decision-answer { width:min(100%,920px); margin-inline:auto; padding:0 0 0 clamp(22px,3vw,38px); border-left:2px solid var(--accent); }
.article-decision-answer .page-kicker,.article-decision-fit .page-kicker,.article-decision-ready .page-kicker,.article-process-steps .page-kicker,.article-process-details .page-kicker { margin:0 0 12px; color:var(--accent); }
.article-decision-answer h2,.article-decision-fit h2,.article-decision-ready h2,.article-process-steps > header h2 { margin:0; color:#fff; font-size:clamp(2rem,3.7vw,4rem); line-height:1.08; letter-spacing:-.04em; }
.article-decision-answer p,.article-decision-panel li,.article-decision-fit p,.article-decision-ready p { color:#bbc4ca; font-size:clamp(1rem,1.25vw,1.1rem); line-height:1.82; }
.article-decision-answer p { margin:20px 0 0; }
.article-decision-columns { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(28px,4vw,58px); }
.article-decision-panel { position:relative; padding:32px 0 0; border-top:1px solid rgba(121,166,194,.28); }
.article-decision-panel--benefit { border-top-color:var(--accent); }
.article-decision-panel__number { display:block; margin-bottom:22px; color:var(--accent); font:800 12px/1 Manrope,sans-serif; letter-spacing:.14em; }
.article-decision-panel h2 { margin:0 0 20px; color:#fff; font-size:clamp(1.8rem,2.6vw,2.7rem); line-height:1.12; }
.article-decision-panel ul { display:grid; gap:14px; margin:0; padding-left:1.25em; }
.article-decision-panel li::marker { color:var(--accent); }
.article-decision-fit { display:grid; grid-template-columns:minmax(240px,.62fr) minmax(0,1.38fr); gap:clamp(34px,6vw,86px); align-items:start; padding:clamp(38px,5vw,62px) 0; border-block:1px solid rgba(121,166,194,.18); }
.article-decision-fit__grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:30px; }
.article-decision-fit__grid > div { padding-left:20px; border-left:1px solid rgba(255,138,0,.5); }
.article-decision-fit strong { display:block; margin-bottom:10px; color:#fff; font-size:1.08rem; }
.article-decision-fit p { margin:0; }
.article-decision-gallery { width:min(100%,920px); margin-inline:auto; }
.article-decision-gallery .media-gallery__stage { aspect-ratio:16/9; }
.article-decision-ready { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr); gap:clamp(32px,6vw,86px); align-items:start; }
.article-decision-ready p { margin:0; }
.article-v1 a:not(.button) { color:var(--accent); text-decoration-color:rgba(255,138,0,.42); text-underline-offset:4px; }
.article-v1 a:not(.button):hover,.article-v1 a:not(.button):focus-visible { color:#fff; text-decoration-color:var(--accent); }

/* Blog Article Layout C — technical process */
.article-process-steps { padding:clamp(36px,4.5vw,58px) 0; border-block:1px solid rgba(121,166,194,.18); }
.article-process-steps > header { display:grid; grid-template-columns:minmax(240px,.65fr) minmax(0,1.35fr); gap:40px; align-items:end; margin-bottom:clamp(40px,5vw,64px); }
.article-process-steps > header .page-kicker { align-self:start; }
.article-process-steps__list { display:grid; }
.article-process-step { position:relative; display:grid; grid-template-columns:90px minmax(0,1fr); gap:24px; padding:0 0 38px; }
.article-process-step:last-child { padding-bottom:0; }
.article-process-step::before { content:""; position:absolute; top:28px; bottom:0; left:28px; width:1px; background:linear-gradient(var(--accent),rgba(121,166,194,.18)); }
.article-process-step:last-child::before { display:none; }
.article-process-step > span { position:relative; z-index:1; width:58px; height:58px; display:grid; place-items:center; border:1px solid rgba(255,138,0,.72); border-radius:50%; color:var(--accent); background:#080d11; font:800 12px/1 Manrope,sans-serif; }
.article-process-step h3 { margin:2px 0 9px; color:#fff; font-size:clamp(1.35rem,2vw,1.9rem); }
.article-process-step p { max-width:820px; margin:0; color:#bbc4ca; font-size:clamp(1rem,1.25vw,1.1rem); line-height:1.82; }
.article-process-details { align-items:start; }
.article-process-details .article-v1-gallery-panel { position:sticky; top:120px; }

@media (max-width:760px) {
  .article-decision-story { padding-block:44px; }
  .article-decision-story__inner { gap:52px; }
  .article-decision-hero-media { aspect-ratio:4/3; }
  .article-decision-answer { padding-left:18px; }
  .article-decision-columns,.article-decision-fit,.article-decision-ready { grid-template-columns:1fr; }
  .article-decision-fit { gap:30px; }
  .article-decision-fit__grid { grid-template-columns:1fr; gap:24px; }
  .article-decision-gallery { width:100%; }
  .article-decision-gallery .media-gallery__stage { aspect-ratio:4/3; }
  .article-process-steps { padding-block:34px; }
  .article-process-steps > header { grid-template-columns:1fr; gap:8px; }
  .article-process-step { grid-template-columns:58px minmax(0,1fr); gap:16px; padding-bottom:30px; }
  .article-process-step > span { width:46px; height:46px; }
  .article-process-step::before { top:22px; left:22px; }
  .article-process-details .article-v1-gallery-panel { position:static; }
}