/* SiteHub eCommerce Atelier 2026 — isolated to .ec26; mobile first; reduced motion. */
.ec26{--ec-ink:#F5F5F5;--ec-muted:#949494;--ec-blue:#B2B2B2;--ec-edge:#141414;--ec-soft:#141414;--ec-navy:#0F0F0F;color:var(--ec-ink);font-family:inherit;background:transparent;overflow:clip}
.ec26 *{box-sizing:border-box}.ec26-wrap{max-width:1272px;margin:0 auto;padding:0 26px 82px}.ec26 .breadcrumb{margin:18px 0 16px!important}.ec26 h1,.ec26 h2,.ec26 h3{font-family:inherit;letter-spacing:-.045em;color:inherit;margin:0;text-wrap:balance}.ec26 h1{font-size:clamp(2.6rem,4.15vw,4.45rem);font-weight:790;line-height:1.04}.ec26 h2{font-size:clamp(1.68rem,2.7vw,2.7rem);line-height:1.13;font-weight:760}.ec26 h3{font-size:1.06rem;line-height:1.3;font-weight:750}.ec26 p{margin:0;color:var(--ec-muted);line-height:1.62}.ec26 a{text-decoration:none}.ec26 svg{display:block;flex:none}.ec26 svg *{vector-effect:non-scaling-stroke}
.ec26-hero{padding:clamp(26px,4.3vw,62px);background:linear-gradient(118deg,#0F0F0F 1%,#101010 100%);border-radius:32px;display:grid;grid-template-columns:minmax(0,1.07fr) minmax(0,.93fr);gap:clamp(24px,4vw,56px);align-items:center;box-shadow:0 28px 60px rgba(0,0,0,0.24);color:#fff;min-height:500px}.ec26-hero-copy{min-width:0}.ec26-kicker{display:inline-flex;align-items:center;gap:10px;color:#FF8A00;letter-spacing:.075em;font-size:.72rem;font-weight:750;margin-bottom:22px}.ec26-kicker svg{width:18px;height:18px}.ec26-hero h1{color:#fff;max-width:700px}.ec26-hero-copy>p{color:#D1D1D1;max-width:565px;margin:20px 0 26px;font-size:1rem}.ec26-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.ec26-btn{min-height:48px;padding:12px 19px;border-radius:13px;display:inline-flex;align-items:center;justify-content:center;gap:12px;font:inherit;font-size:.88rem;font-weight:740;cursor:pointer;transition:transform .22s ease,box-shadow .22s ease,background .22s ease;border:1px solid transparent;white-space:normal}.ec26-btn:hover{transform:translateY(-2px)}.ec26-btn:focus-visible,.ec26-tab:focus-visible,.ec26 a:focus-visible,.ec26 summary:focus-visible{outline:3px solid rgba(255,110,40,0.55);outline-offset:4px}.ec26-btn svg{width:17px;height:17px}.ec26-btn-primary{background:#E8421C;color:#fff!important;box-shadow:0 12px 32px rgba(0,0,0,0.448)}.ec26-btn-primary:hover{background:#E8421C}.ec26-btn-secondary{color:#D1D1D1!important;border-color:rgba(255,255,255,0.1);background:rgba(255,255,255,0.055)}.ec26-btn-secondary:hover{background:rgba(255,255,255,0.06)}.ec26-evidence{display:flex;gap:12px 18px;flex-wrap:wrap;margin-top:31px}.ec26-evidence span{display:inline-flex;gap:6px;align-items:center;color:#D1D1D1;font-size:.74rem;font-weight:650}.ec26-evidence svg{width:14px;height:14px;color:#B2B2B2}
.ec26-hero-visual{position:relative;min-width:0;margin:0;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,0.018);background:#141414;box-shadow:0 30px 65px rgba(0,0,0,0.448)}.ec26-hero-visual img{display:block;width:100%;aspect-ratio:16/11;object-fit:cover;object-position:top}.ec26-hero-visual figcaption{display:grid;gap:3px;padding:15px 18px;background:#141414;color:#F5F5F5}.ec26-hero-visual figcaption strong{font-size:.83rem}.ec26-hero-visual figcaption span{color:#949494;line-height:1.45;font-size:.74rem}
.ec26-section-intro{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:end;margin-bottom:27px}.ec26-section-intro p{font-size:.91rem;max-width:420px;justify-self:end}.ec26-section-id{display:block;color:#B2B2B2;font-size:.71rem;font-weight:760;letter-spacing:.095em;text-transform:uppercase;margin-bottom:14px}.ec26-flow,.ec26-scope,.ec26-cases,.ec26-bottom,.ec26-faq{margin-top:clamp(56px,6.5vw,90px)}
.ec26-flow-layout{display:grid;grid-template-columns: minmax(260px,.8fr) minmax(0,1.2fr);gap:14px;align-items:stretch}.ec26-tablist{display:grid;gap:10px;grid-auto-rows:minmax(75px,1fr)}.ec26-tab{width:100%;text-align:left;display:grid;grid-template-columns:46px minmax(0,1fr) auto;align-items:center;gap:14px;border:1px solid var(--ec-edge);background:#141414;border-radius:18px;padding:12px 16px;font:inherit;cursor:pointer;color:#F5F5F5;transition:background .23s,border-color .23s,transform .23s,box-shadow .23s}.ec26-tab>span:nth-child(2){font-size:1rem;font-weight:750}.ec26-tab-index{font-weight:720;color:#B2B2B2;font-size:.73rem}.ec26-tab-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#141414;color:#FF8A00}.ec26-tab-icon svg{width:21px;height:21px}.ec26-tab:is(:hover,.is-active){border-color:rgba(255,110,40,0.55);background:#141414;box-shadow:0 10px 28px rgba(0,0,0,0.128);transform:translateX(3px)}.ec26-tab.is-active{box-shadow:inset 3px 0 0 rgba(0,0,0,0.6),0 8px 22px rgba(0,0,0,0.096)}.ec26-tabpanels{position:relative;min-height:335px}.ec26-panel{height:100%;border-radius:24px;background:#121212;border:1px solid rgba(255,255,255,0.1);padding:clamp(25px,4vw,50px);display:flex;flex-direction:column;align-items:flex-start}.ec26-panel[hidden]{display:none}.ec26-panel-ordinal{display:inline-block;font-size:.76rem;color:#B2B2B2;font-weight:760;letter-spacing:.12em}.ec26-panel-icon{margin-top:32px;width:50px;height:50px;display:grid;place-items:center;background:#141414;border-radius:15px;color:#FF8A00;box-shadow:0 9px 23px rgba(0,0,0,0.113)}.ec26-panel-icon svg{width:23px;height:23px}.ec26-panel h3{font-size:clamp(1.55rem,2.35vw,2.6rem);margin-top:17px}.ec26-panel>p{max-width:620px;font-size:.98rem;margin-top:12px}.ec26-panel-note{margin-top:auto;padding-top:26px;display:flex;align-items:flex-start;gap:9px;color:#F5F5F5;line-height:1.5;font-size:.82rem;font-weight:600}.ec26-panel-note svg{width:16px;height:16px;color:#B2B2B2;margin-top:1px}
.ec26-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.ec26-feature{background:#141414;border:1px solid var(--ec-edge);border-radius:19px;padding:24px 22px;min-width:0;transition:transform .22s ease,box-shadow .22s ease}.ec26-feature:hover{transform:translateY(-3px);box-shadow:0 14px 40px rgba(0,0,0,0.113)}.ec26-feature-icon{width:43px;height:43px;border-radius:13px;background:#121212;color:#FF8A00;display:grid;place-items:center;margin-bottom:17px}.ec26-feature-icon svg{width:21px;height:21px}.ec26-feature h3{margin-bottom:7px}.ec26-feature p{font-size:.86rem}
.ec26-case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}.ec26-case{display:block;overflow:hidden;min-width:0;border-radius:23px;background:#141414;border:1px solid var(--ec-edge);color:var(--ec-ink);transition:transform .23s,box-shadow .23s}.ec26-case:hover{transform:translateY(-4px);box-shadow:0 24px 48px rgba(0,0,0,0.138)}.ec26-case>img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;object-position:top;transition:transform .55s ease}.ec26-case:hover>img{transform:scale(1.025)}.ec26-case-meta{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;padding:20px 21px 8px}.ec26-case-meta>span:first-child{min-width:0;display:grid;gap:4px}.ec26-case-meta strong{font-size:1.23rem;line-height:1.2;letter-spacing:-.025em}.ec26-case-meta small{color:#949494;line-height:1.5;font-size:.8rem}.ec26-case-external{width:35px;height:35px;flex:none;border-radius:12px;background:#121212;color:#B2B2B2;display:grid;place-items:center}.ec26-case-external svg{width:18px;height:18px}.ec26-case-link{display:block;padding:0 21px 20px;color:#FF8A00;font-weight:700;font-size:.77rem}
.ec26-bottom{display:grid;grid-template-columns:1.05fr .95fr;gap:17px;align-items:stretch}.ec26-steps,.ec26-price{border-radius:25px;padding:clamp(24px,3.1vw,36px)}.ec26-steps{background:#121212;border:1px solid var(--ec-edge)}.ec26-step-grid{display:grid;gap:10px;margin-top:22px}.ec26-step{background:#141414;border-radius:13px;padding:13px 15px;display:flex;gap:14px;border:1px solid rgba(255,255,255,0.1)}.ec26-step>span{color:#FF8A00;font-weight:780;font-size:.75rem;padding-top:3px}.ec26-step h3{font-size:.95rem}.ec26-step p{font-size:.78rem;margin-top:4px}.ec26-price{background:#101010;color:#fff;display:flex;align-items:flex-start;flex-direction:column}.ec26-price h2{color:#fff;margin-bottom:23px}.ec26-price .ec26-section-id{color:#FF8A00}.ec26-price-label{font-size:.85rem;font-weight:720;color:#FF8A00}.ec26-price-amount{display:block;font-size:clamp(2.5rem,4vw,4.7rem);line-height:1.07;letter-spacing:-.065em;margin:6px 0;color:#fff;font-weight:800}.ec26-price-once{font-size:.77rem;color:#B2B2B2}.ec26-price p{color:#D1D1D1;font-size:.91rem;margin:27px 0 24px}.ec26-price small{font-size:.73rem;line-height:1.55;color:#B2B2B2;margin-top:18px}
.ec26-faq{display:grid;grid-template-columns:.7fr 1.3fr;gap:30px}.ec26-faq-list{display:grid;gap:9px}.ec26-faq-list details{background:#141414;border:1px solid var(--ec-edge);border-radius:14px;overflow:hidden}.ec26-faq-list summary{display:flex;gap:18px;align-items:center;justify-content:space-between;padding:18px 20px;list-style:none;cursor:pointer;font-size:.9rem;font-weight:740}.ec26-faq-list summary::-webkit-details-marker{display:none}.ec26-faq-list summary svg{width:17px;height:17px;transition:transform .2s;color:#B2B2B2}.ec26-faq-list details[open] summary svg{transform:rotate(90deg)}.ec26-faq-list details p{padding:0 20px 20px;font-size:.84rem}.ec26-cta{background:linear-gradient(125deg,#111111,#0F0F0F);border-radius:27px;padding:clamp(26px,3.6vw,46px);display:flex;gap:30px;align-items:center;justify-content:space-between;margin-top:72px}.ec26-cta h2{color:#fff;max-width:530px}.ec26-cta p{color:#D1D1D1;font-size:.89rem;max-width:540px;margin-top:12px}.ec26-cta .ec26-actions{justify-content:flex-end}.ec26-btn-light{background:#141414;color:#F5F5F5}.ec26-btn-light:hover{background:#121212}.ec26-cta-secondary{color:#FF8A00;font-size:.85rem;font-weight:680;white-space:nowrap}
@media(max-width:1000px){.ec26-hero{grid-template-columns:1fr;min-height:auto}.ec26-hero-visual{max-width:750px}.ec26-hero h1{max-width:720px}.ec26 .ec26-faq{grid-template-columns:1fr}.ec26 .ec26-cta{flex-direction:column;align-items:flex-start}.ec26 .ec26-cta .ec26-actions{justify-content:flex-start}}
@media(max-width:720px){.ec26-wrap{padding:0 16px 55px}.ec26-hero{padding:29px 22px;border-radius:24px;gap:26px}.ec26-hero h1{font-size:clamp(2.05rem,7.8vw,3.3rem)}.ec26-hero-copy>p{font-size:.9rem;margin:15px 0 24px}.ec26-evidence{margin-top:25px}.ec26-hero-visual{border-radius:17px}.ec26-hero-visual figcaption{padding:13px}.ec26-section-intro{grid-template-columns:1fr;gap:10px}.ec26-section-intro p{justify-self:start}.ec26-flow-layout{grid-template-columns:1fr;gap:11px}.ec26-tablist{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:8px}.ec26-tab{grid-template-columns:29px 1fr;gap:8px;min-width:0;padding:11px;border-radius:14px}.ec26-tab>span:nth-child(2){font-size:.82rem}.ec26-tab-icon{width:29px;height:29px;border-radius:9px}.ec26-tab-icon svg{width:17px;height:17px}.ec26-tab-index{display:none}.ec26-tab:hover{transform:none}.ec26-panel{min-height:290px;border-radius:18px;padding:23px}.ec26-panel-icon{margin-top:18px}.ec26-features{grid-template-columns:repeat(2,minmax(0,1fr))}.ec26-feature{padding:17px;border-radius:15px}.ec26-case-grid,.ec26-bottom{grid-template-columns:1fr}.ec26-cta{padding:28px 23px;border-radius:22px;margin-top:55px}.ec26-cta .ec26-actions{width:100%}}
@media(max-width:430px){.ec26-wrap{padding:0 12px 48px}.ec26-hero{padding:24px 18px}.ec26-kicker{font-size:.66rem}.ec26 h2{font-size:1.66rem}.ec26-features{grid-template-columns:1fr}.ec26-actions{width:100%}.ec26-actions .ec26-btn{flex:1 1 auto}.ec26-evidence{gap:10px 13px}.ec26-panel{min-height:325px}.ec26-bottom{gap:10px}.ec26-steps,.ec26-price{padding:22px}.ec26-price-amount{font-size:2.7rem}.ec26-faq-list summary{padding:15px 16px}.ec26-faq-list details p{padding:0 16px 16px}}
@media(prefers-reduced-motion:reduce){.ec26 *,.ec26 *::before,.ec26 *::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* SiteHub — eCommerce wide-composition correction, 2026-10-28
   Only .ec26 affected; content, routes, pricing and JS untouched.
   Preserve complete real-project screenshots rather than cropping their sides. */
/* Escape the older 1220px page-shell only on this specific service page. */
.ec26 {
  width: min(1480px, calc(100vw - 32px));
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
.ec26-wrap {
  max-width: 1480px;
  padding-inline: clamp(18px, 2.35vw, 36px);
}
.ec26-hero {
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(26px, 3.2vw, 52px);
  padding: clamp(27px, 3.4vw, 52px);
  min-height: 0;
  align-items: center;
}
.ec26-hero h1 {
  max-width: 580px;
  font-size: clamp(2.3rem, 2.8vw, 3.2rem);
  line-height: 1.075;
  letter-spacing: -.045em;
  text-wrap: pretty;
  overflow-wrap: normal;
}
.ec26-hero-copy>p {
  max-width: 520px;
  margin: 18px 0 24px;
  line-height: 1.58;
}
.ec26-evidence { margin-top: 24px; }
.ec26-hero-visual {
  max-width: none;
  width: 100%;
  min-width: 0;
  border-radius: 24px;
}
.ec26-hero-visual img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: contain;
  object-position: center top;
  background: #141414;
}
.ec26-hero-visual figcaption { padding: 15px 19px; }
/* Two full-width photographic studies; no center-cut or portrait squeeze. */
.ec26-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.75vw, 24px); }
.ec26-case { min-width: 0; border-radius: 25px; }
.ec26-case>img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1.85 / 1;
  object-fit: contain;
  object-position: center top;
  background: #141414;
}
.ec26-case-meta { padding: 17px 20px 7px; }
.ec26-case-link { padding: 0 20px 19px; }
/* At tablet sizes the media gets its own full-width row. */
@media (max-width: 1150px) {
  .ec26-hero {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    min-height: 0;
  }
  .ec26-hero h1 {
    max-width: 890px;
    font-size: clamp(2.3rem, 4.2vw, 3.35rem);
  }
  .ec26-hero-visual { max-width: none; width: 100%; }
}
@media (max-width: 720px) {
  .ec26-wrap { padding: 0 16px 55px; }
  .ec26-hero { padding: 28px 22px; border-radius: 24px; gap: 24px; }
  .ec26-hero h1 { font-size: clamp(2.05rem, 7.6vw, 3.1rem); line-height: 1.075; }
  .ec26-hero-visual { border-radius: 17px; }
  .ec26-hero-visual img { aspect-ratio: 2 / 1; }
  .ec26-case-grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .ec26-case>img { aspect-ratio: 1.85 / 1; }
}
@media (max-width: 430px) {
  .ec26-wrap { padding: 0 12px 48px; }
  .ec26-hero { padding: 24px 18px; }
  .ec26-hero h1 { font-size: clamp(2rem, 7.6vw, 2.55rem); }
  .ec26-hero-visual figcaption { padding: 12px 14px; }
  .ec26-case-meta { padding: 15px 16px 7px; }
  .ec26-case-link { padding: 0 16px 16px; }
}