.hero { min-height:690px; display:grid; grid-template-columns:46fr 54fr; align-items:center; gap:25px; padding:40px 0; }
.hero h1 { font-weight:900; font-size:clamp(2.8125rem,5.1vw,4.375rem); letter-spacing:-.075em; line-height:1.23; margin:27px 0 20px; }
.hero h1 em { font-style:normal; color:#b95035; }
.hero-copy { position:relative; z-index:2; }
.hero-copy p { color:#5e6259; font-size:1rem; line-height:2.05; max-width:475px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin:32px 0; }
.mini-proof { display:flex; gap:24px; color:#5e6259; font-size:.8125rem; align-items:center; flex-wrap:wrap; margin-top:42px; }
.mini-proof b { color:#333; }
.visual-desk {
  position:relative; min-height:590px; border-radius:46% 46% 32% 38%; overflow:hidden; isolation:isolate;
  background:radial-gradient(ellipse at 35% 20%,#fff 0 5%,transparent 50%), linear-gradient(145deg,#e9d1b1,#dfc1a0 55%,#d0aa83);
  box-shadow:0 35px 60px #9e6b3222;
}
.visual-desk::before { content:""; position:absolute; inset:0; opacity:.58; background:repeating-linear-gradient(4deg,transparent 0 15px,#ad7d5637 16px 17px,transparent 18px 40px); }
.paper-sheet { position:absolute; width:44%; height:56%; left:8%; top:10%; transform:rotate(-13deg); background:#faf5ed; box-shadow:9px 20px 30px #7f5a4033; border:1px solid #f7f0e8; }
.paper-sheet::after { content:"PRINT / PACKAGING"; font-size:.6875rem; letter-spacing:.16em; color:#716960; position:absolute; bottom:25px; left:16px; }
.swatches { position:absolute; top:10%; right:10%; width:150px; height:64px; transform:rotate(23deg); display:flex; gap:5px; }
.swatches i { flex:1; border-radius:8px; box-shadow:0 8px 10px #3332; }
.swatches i:nth-child(1) { background:#20b6d3; }
.swatches i:nth-child(2) { background:#e95091; }
.swatches i:nth-child(3) { background:#f4d84c; }
.swatches i:nth-child(4) { background:#343633; }
.ruler { height:25px; width:42%; background:#ded1af; position:absolute; left:-2%; bottom:16%; transform:rotate(27deg); border:1px solid #bdad8b; background-image:repeating-linear-gradient(90deg,#ab9c80 0 1px,transparent 1px 10px); }
.pencil { height:12px; width:37%; position:absolute; right:-10px; bottom:16%; transform:rotate(-35deg); background:linear-gradient(180deg,#d9854b 0 28%,#f3bd78 29% 70%,#b96637 71%); border-radius:9px; }
.pencil::before { content:""; position:absolute; left:-30px; border-top:6px solid transparent; border-bottom:6px solid transparent; border-right:30px solid #d9c2a2; }
.pencil::after { content:""; position:absolute; left:-31px; top:4px; border-top:2px solid transparent; border-bottom:2px solid transparent; border-right:10px solid #49433f; }
.box-stage { position:absolute; inset:12% 10% 4% 11%; display:grid; place-items:center; perspective:900px; filter:drop-shadow(5px 30px 19px #6a453c50); }
.hero-box { position:relative; width:265px; height:230px; transform-style:preserve-3d; transform:rotate(-11deg) rotateX(var(--hero-x,0deg)) rotateY(var(--hero-y,-17deg)); animation:drift 6s ease-in-out infinite; }
.visual-desk.still .hero-box { animation:none; transition:transform 220ms ease-out; }
.hero-box .front { position:absolute; inset:36px 0 0; background:#f3a6a9; border-radius:3px; box-shadow:inset -28px -10px #d88290; display:grid; place-items:center; }
.hero-box .front strong { font-size:1.5625rem; letter-spacing:-.08em; color:#713944; }
.hero-box .front strong::after { content:"make it yours."; display:block; letter-spacing:.05em; font-size:.625rem; text-align:center; margin-top:5px; }
.hero-box .lid { position:absolute; width:100%; height:85px; background:#f5c1bd; top:0; left:0; transform-origin:bottom; transform:skewX(18deg) translate(7px,-16px); border:1px solid #e9aaa8; box-shadow:inset -16px -9px #e9a09f; }
.hero-box .side { position:absolute; right:-43px; top:36px; width:44px; height:194px; background:#cf7b88; transform:skewY(-22deg); transform-origin:left; }
.hero-box .tape { position:absolute; top:55px; left:115px; width:35px; height:165px; background:#e7c7c04a; transform:rotate(3deg); }
.hero-box .spark { position:absolute; right:-45px; top:-22px; font-size:3.1875rem; color:#fff8e3; }
.desk-sticker { position:absolute; bottom:10%; right:8%; background:white; border-radius:12px; padding:11px 16px; transform:rotate(9deg); box-shadow:0 12px 15px #73583822; font-size:.6875rem; font-weight:900; }
.desk-sticker b { font-size:1.3125rem; color:#ad503a; }
@keyframes drift {
  0%,100% { transform:rotate(-11deg) rotateY(-17deg) translateY(0); }
  50% { transform:rotate(-8deg) rotateY(-4deg) translateY(-18px); }
}
.process, .cases, .brand-section { background:#fff; }
.process-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:18px; padding:0; margin:0; list-style:none; counter-reset:process; }
.process-card { border:1px solid var(--line); padding:25px 19px; border-radius:22px; background:linear-gradient(180deg,#fafaf7,white); transition:transform 280ms,box-shadow 280ms; counter-increment:process; }
.process-card::before { content:"STEP 0" counter(process); font-size:.6875rem; color:#64665d; font-weight:700; }
.process-card:hover { transform:translateY(-7px) scale(1.025); box-shadow:var(--shadow); }
.process-icon { width:70px; height:70px; display:grid; place-items:center; margin:18px auto 22px; border-radius:22px; transition:transform 300ms; }
.process-icon svg { fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.process-card:hover .process-icon { transform:rotate(-9deg) scale(1.1); }
.process-card:nth-child(1) .process-icon { background:var(--yellow); }
.process-card:nth-child(2) .process-icon { background:var(--blue); }
.process-card:nth-child(3) .process-icon { background:var(--pink); }
.process-card:nth-child(4) .process-icon { background:var(--mint); }
.process-card:nth-child(5) .process-icon { background:#f7dfd1; }
.process-card h3 { font-size:1.0625rem; margin:0 0 8px; }
.process-card p { font-size:.875rem; line-height:1.85; color:#5e6259; margin:0; }

.explorer { background:#f2f4ed; }
.explorer-panel { display:grid; grid-template-columns:35fr 65fr; background:white; border-radius:30px; box-shadow:var(--shadow); }
.ex-sidebar { padding:40px 34px; border-right:1px solid var(--line); }
.ex-sidebar h3 { font-size:1.4375rem; margin:0 0 14px; }
.ex-sidebar p, .ex-description { color:#5e6259; font-size:.875rem; line-height:1.85; }
.box-tabs { display:grid; gap:9px; margin-top:25px; }
.box-tab { text-align:left; border:1px solid transparent; border-radius:15px; padding:14px 16px; background:#f8f8f4; color:#57594f; font-weight:700; transition:background 250ms,transform 250ms; }
.box-tab:is(:hover,[aria-selected="true"]) { border-color:#e4ab91; background:#fff2ec; color:#963c22; }
.box-tab[aria-selected="true"] { transform:translateX(4px); }
.box-tab span { float:right; margin-left:8px; }
.explore-main { min-width:0; padding:25px 32px 28px; }
.explore-main .text-link { display:inline-flex; align-items:center; min-height:44px; font-size:.875rem; }
.stage { min-height:355px; position:relative; display:grid; place-items:center; overflow:hidden; isolation:isolate; background:radial-gradient(ellipse at center,#fff 12%,#f4f0e9 80%); border-radius:22px; touch-action:pan-y; }
.stage::after { content:""; width:220px; height:36px; background:#40362e2b; filter:blur(16px); border-radius:50%; position:absolute; bottom:16%; z-index:-1; }
.gridfloor { position:absolute; inset:0; background-image:linear-gradient(#b6a5902f 1px,transparent 1px),linear-gradient(90deg,#b6a5902f 1px,transparent 1px); background-size:34px 34px; mask-image:linear-gradient(transparent,#000); z-index:-1; }
.stage-badge, .stage-hint { position:absolute; font-size:.75rem; color:#5b544b; z-index:3; pointer-events:none; }
.stage-badge { top:14px; left:15px; background:white; border-radius:99px; padding:8px 12px; }
.stage-hint { bottom:12px; inset-inline:0; text-align:center; }
.view-controls { display:flex; justify-content:center; gap:8px; padding:15px 0 3px; flex-wrap:wrap; }
.view-controls button { border:1px solid #dedbd3; border-radius:100px; background:#fff; padding:8px 12px; min-height:44px; color:var(--ink); font-size:.8125rem; font-weight:700; }
.view-controls button[aria-pressed="true"] { background:var(--ink); color:#fff; }
.ex-description { margin:10px 0 0; }
.model-view, .box-net { grid-area:1 / 1; }
.model-view { display:grid; place-items:center; width:100%; height:100%; perspective:760px; cursor:grab; }
.model-view:active { cursor:grabbing; }
.box-model {
  position:relative; width:var(--w); height:var(--h);
  transform:rotateX(var(--box-x,-24deg)) rotateY(var(--box-y,-32deg));
  transition:translate var(--move);
}
.box-model, .box-model div, .box-model i { transform-style:preserve-3d; }
.box-model {
  --w:170px; --d:120px; --h:56px; --move:950ms cubic-bezier(.38,.02,.21,1) 70ms;
  --light:color-mix(in srgb,var(--box-color),white 20%);
  --dark:color-mix(in srgb,var(--box-color),#413731 20%);
  --inner:color-mix(in srgb,var(--box-color),#7c6e60 32%);
}
.box-tuck { --w:110px; --d:80px; --h:116px; }
.box-lid { --w:170px; --d:116px; --h:49px; }
.box-sleeve { --w:146px; --d:110px; --h:50px; }
.box-book { --w:152px; --d:106px; --h:47px; }
.box-model div, .plane { position:absolute; inset:50% auto auto 50%; }
.plane { display:block; width:var(--w); height:var(--h); border:1px solid #fff7; background:var(--box-color); }
.tray, .carton-walls, .lift-lid, .drawer, .sleeve { inset:0 !important; }
.front-wall { transform:translate(-50%,-50%) translateZ(calc(var(--d) / 2)); background:linear-gradient(160deg,var(--box-color),var(--dark)); }
.rear-wall { transform:translate(-50%,-50%) translateZ(calc(var(--d) / -2)); background:var(--inner); }
.left-wall,.right-wall { width:var(--d); background:var(--dark); }
.left-wall { transform:translate(-50%,-50%) translateX(calc(var(--w) / -2)) rotateY(90deg); }
.right-wall { transform:translate(-50%,-50%) translateX(calc(var(--w) / 2)) rotateY(90deg); }
.floor, .ceiling, .book-base { height:var(--d); }
.floor { transform:translate(-50%,-50%) translateY(calc(var(--h) / 2)) rotateX(90deg); background:var(--inner); }
.ceiling { transform:translate(-50%,-50%) translateY(calc(var(--h) / -2)) rotateX(90deg); background:linear-gradient(160deg,var(--light),var(--box-color)); }
.box-model .hinge { transform:translate3d(0,calc(var(--h) / -2),calc(var(--d) / -2)) rotateX(var(--open-angle,0deg)); transition:transform var(--move); }
.box-model .lower-hinge { transform:translate3d(0,calc(var(--h) / 2),calc(var(--d) / -2)) rotateX(var(--lower-angle,0deg)); }
.hinge .flap, .spine .flap { height:var(--d); transform-origin:top center; transform:translateX(-50%) rotateX(90deg); background:linear-gradient(160deg,var(--light),var(--box-color)); }
.front-tab, .tuck-tab { position:absolute; left:8%; right:8%; bottom:-19px; height:19px; background:var(--dark); transform-origin:top; transform:rotateX(-90deg); clip-path:polygon(0 0,100% 0,94% 100%,6% 100%); transition:transform var(--move); }
.tuck-tab { bottom:-17px; height:17px; }
.lower-hinge .tuck-tab { transform:rotateX(90deg); }
.dust { height:var(--d); width:27px; transform-origin:left center; background:var(--inner); transition:transform var(--move); }
.left-dust { transform:translate3d(calc(var(--w) / -2),calc((var(--h) + var(--d)) / -2),0) rotateX(90deg) rotateY(var(--dust-angle,0deg)); }
.right-dust { transform:translate3d(calc(var(--w) / 2),calc((var(--h) + var(--d)) / -2),0) rotateX(90deg) rotateY(var(--dust-angle,180deg)); }
.lift-lid { --w:179px; --d:124px; --h:23px; transform:translateY(-26px); transition:transform var(--move); }
.drawer { --w:139px; --d:100px; --h:44px; transform:translateY(2px); transition:transform var(--move); }
.sleeve { --w:135px; --d:112px; --h:50px; }
.box-book .spine { transform:translate3d(calc(var(--w) / -2),calc(var(--h) / -2),calc(var(--d) / -2)) rotateZ(var(--book-angle,0deg)); transition:transform var(--move); }
.spine .flap { width:calc(var(--w) + 10px); height:calc(var(--d) + 8px); transform:translateZ(-4px) rotateX(90deg); }
.book-base { width:calc(var(--w) + 10px); height:calc(var(--d) + 8px); transform:translate(-50%,-50%) translateY(calc(var(--h) / 2 + 2px)) rotateX(90deg); background:var(--dark); }
[data-view="open"] .box-mailer { --open-angle:109deg; }
[data-view="open"] .box-tuck { --open-angle:115deg; --lower-angle:-92deg; }
[data-view="open"] .front-tab, [data-view="open"] .tuck-tab { transform:rotateX(-10deg); }
[data-view="open"] .lower-hinge .tuck-tab { transform:rotateX(10deg); }
[data-view="open"] .left-dust { --dust-angle:75deg; }
[data-view="open"] .right-dust { --dust-angle:104deg; }
[data-view="open"] .lift-lid { transform:translate3d(35px,-88px,-15px) rotateZ(-10deg); }
[data-view="open"] .drawer { transform:translate3d(79px,2px,0); }
[data-view="open"] .box-book { --book-angle:-115deg; }
[data-view="open"] :is(.box-mailer,.box-book) { translate:0 42px; }
[data-view="flat"] .model-view { visibility:hidden; }
.box-net { width:min(84%,330px); height:auto; display:none; overflow:visible; }
[data-view="flat"] .box-net { display:block; animation:unfold 1300ms cubic-bezier(.33,.05,.2,1) both; }
.net-cut { fill:var(--box-color); stroke:#514946; stroke-width:1.6; stroke-linejoin:round; }
.net-fold { fill:none; stroke:#514946; stroke-width:1.35; stroke-dasharray:4 4; }
@keyframes unfold {
  0%,8% { opacity:0; transform:perspective(400px) rotateX(57deg) scale(.52); }
  35% { opacity:1; }
  100% { transform:perspective(400px) rotateX(0) scale(1); }
}

.case-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.flip-card { position:relative; height:360px; perspective:1200px; }
.flip-tilt, .flip-inner { width:100%; height:100%; transform-style:preserve-3d; }
.flip-tilt { transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform 240ms ease-out; }
.flip-inner { transition:transform 550ms cubic-bezier(.2,.7,.2,1); }
.flip-card.flipped .flip-inner { transform:rotateY(180deg); }
.flip-front,.flip-back { position:absolute; inset:0; backface-visibility:hidden; border-radius:24px; overflow:hidden; border:1px solid var(--line); }
.flip-front { display:flex; flex-direction:column; background:#f3f2ed; }
.case-art { flex:1; min-height:0; position:relative; }
.case-art img { width:100%; height:100%; object-fit:cover; }
.case-art::after { content:""; position:absolute; inset:0; opacity:0; background:radial-gradient(ellipse at var(--glow-x,50%) var(--glow-y,50%),#ffffff60,transparent 65%); transition:opacity 240ms; pointer-events:none; }
.flip-card:hover .case-art::after { opacity:1; }
.case-caption { padding:18px 22px; background:white; }
.case-caption h3 { margin:0 0 6px; font-size:1.125rem; }
.case-caption p { margin:0; font-size:.875rem; color:#5e6259; }
.flip-back { transform:rotateY(180deg); padding:30px 24px 22px; background:#303530; color:white; display:flex; flex-direction:column; justify-content:space-between; }
.flip-title { margin:0 38px 14px 0; font-weight:900; font-size:1.375rem; }
.tags { display:flex; flex-wrap:wrap; gap:7px; padding:0; list-style:none; }
.tags li { border:1px solid #889487; border-radius:100px; padding:6px 10px; font-size:.8125rem; }
.flip-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.flip-actions .btn { padding-inline:12px; font-size:.8125rem; }
.flip-actions .text-link { color:#ffb49b; flex-basis:100%; display:flex; min-height:44px; align-items:center; }
.flip-button { position:absolute; top:14px; right:14px; width:44px; height:44px; color:var(--ink); border:1px solid var(--line); border-radius:100px; background:#fff; font-size:1.25rem; }
.flip-card.flipped .flip-button { color:#fff; background:#303530; }
@media (hover:none) { .flip-front { cursor:pointer; } }
.tabs-section { background:#f7f4ee; }
.tab-bar { display:flex; position:relative; gap:8px; margin:24px 0; overflow-x:auto; padding:5px; scrollbar-width:thin; }
.material-tab { position:relative; z-index:1; padding:10px 17px; min-height:44px; border:1px solid #dfdbd1; border-radius:100px; background:white; color:#5e6259; font-weight:700; white-space:nowrap; }
.material-tab[aria-selected="true"] { background:#292c27; color:white; }
.tab-bar.has-indicator .material-tab[aria-selected="true"] { background:transparent; border-color:transparent; }
.tab-indicator { position:absolute; z-index:1; top:5px; left:0; width:var(--tab-width,0); height:44px; transform:translateX(var(--tab-left,0)); transition:transform 280ms,width 280ms; border-radius:100px; background:#292c27; }
.material-panel { display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,55px); align-items:center; background:white; border-radius:28px; padding:36px; box-shadow:var(--shadow); }
.material-panel.fade-in { animation:fade-panel 280ms ease-out; }
@keyframes fade-panel { from { opacity:.15; transform:translateY(5px); } }
.material-image, .material-photo { border-radius:22px; min-height:295px; position:relative; overflow:hidden; display:grid; place-items:center; }
.material-image { background:var(--materialcolor,#efe9db); }
.material-image::before { content:""; position:absolute; width:56%; max-width:220px; aspect-ratio:1; background:#ffffff9c; border-radius:5px; transform:rotate(-14deg); box-shadow:20px 22px 0 #ffffff77,25px 27px 24px #554c4322; outline:1px solid #dddddb; }
.material-image::after { content:attr(data-label); position:relative; font-size:clamp(.875rem,2vw,1.375rem); font-weight:900; color:#4d5049; letter-spacing:.12em; transform:rotate(-14deg); }
.material-photo img { width:100%; height:100%; max-height:360px; object-fit:contain; }
.material-copy h3 { font-size:1.75rem; margin:4px 0 10px; }
.material-copy p, .material-copy ul { color:#5e6259; line-height:1.9; font-size:.875rem; }
.material-copy ul { padding-left:22px; }
.brand-panel { background:#f6f6f0; border-radius:32px; display:grid; grid-template-columns:1fr 1fr; align-items:center; overflow:hidden; }
.brand-copy { padding:50px; }
.brand-copy p { line-height:2; color:#5e6259; }
.cmyk-scene { height:365px; position:relative; display:grid; place-items:center; }
.fusion { width:240px; max-width:75vw; display:grid; justify-items:center; isolation:isolate; }
.fusion svg { display:block; width:100%; height:auto; overflow:visible; }
.fusion-name { font-size:1.375rem; font-weight:900; letter-spacing:.08em; color:#000; }
.fusion-orbit { display:none; isolation:isolate; }
.fusion.playing .fusion-orbit { display:inline; }
.fusion-orbit circle { mix-blend-mode:multiply; }
.replay { position:absolute; bottom:18px; right:18px; font-size:.8125rem; }
.intro { position:fixed; inset:0; width:100%; height:100%; max-width:none; max-height:none; padding:0; margin:0; border:0; background:white; color:var(--ink); }
.intro::backdrop { background:white; }
.intro.outro, .intro.outro::backdrop { opacity:0; transition:opacity 270ms ease-out; }
.intro-content { min-height:100%; display:grid; place-items:center; }
.intro .fusion { width:300px; }
.intro-skip { position:absolute; bottom:max(20px,env(safe-area-inset-bottom)); right:20px; }
.line-float { transition:transform 200ms, opacity 260ms ease-out; }
body:has(.intro[open]) .line-float { visibility:hidden; opacity:0; transition:none; }

.quote-section { background:#e6eee6; }
.quote-wrap { display:grid; grid-template-columns:43fr 57fr; gap:34px; align-items:center; }
.quote-wrap h2 { font-size:clamp(1.875rem,3.4vw,2.875rem); line-height:1.35; margin:13px 0; font-weight:900; }
.quote-wrap p { line-height:1.9; color:#536358; }
.quote-form { background:white; border-radius:25px; padding:28px; box-shadow:var(--shadow); min-width:0; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.field { display:flex; flex-direction:column; gap:7px; min-width:0; }
.form-grid .full { grid-column:1/-1; }
.field label { font-size:.875rem; font-weight:700; }
.field :is(input,select,textarea) { width:100%; min-height:44px; border:1px solid #aaa99e; background:#fafbf8; border-radius:11px; padding:9px 12px; color:var(--ink); }
.field :is(input,textarea)::placeholder { color:#62665d; }
.field textarea { min-height:96px; resize:vertical; }
.field [aria-invalid="true"] { border-color:#a22e23; }
.quote-form .form-note, .quote-form .contact-hint { font-size:.8125rem; margin:0; }
.quote-form .form-note { margin:12px 0; }
.quote-form .field-error, .quote-form .contact-hint.invalid { color:#96291f; font-size:.8125rem; margin:0; }
.quote-form .form-result { background:#eff8ef; border:1px solid #bee0c6; border-radius:12px; padding:12px 14px; font-size:.875rem; color:#225c34; margin:14px 0 0; }
.quote-form .form-result.error { background:#fff2ef; border-color:#e7bbb1; color:#752820; }
.reveal.arrive { animation:arrive 480ms ease-out both; }
@keyframes arrive { from { opacity:.62; translate:0 11px; } }

@media (max-width:920px) {
  .hero { grid-template-columns:1fr; min-height:0; padding:55px 0; }
  .hero-copy { text-align:center; }
  .hero-copy p { margin:auto; }
  .hero-actions,.mini-proof { justify-content:center; }
  .visual-desk { min-height:465px; max-width:660px; width:100%; margin:auto; }
  .process-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .explorer-panel { grid-template-columns:minmax(0,1fr); }
  .ex-sidebar { border:0; border-bottom:1px solid var(--line); }
  .box-tabs { display:flex; overflow-x:auto; padding:5px; margin-inline:-5px; scrollbar-width:thin; }
  .box-tab { white-space:nowrap; flex-shrink:0; }
  .box-tab[aria-selected="true"] { transform:none; }
  .case-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .quote-wrap { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:650px) {
  .hero { padding:40px 0 26px; }
  .hero h1 { font-size:clamp(2rem,10.3vw,2.6875rem); }
  .hero-copy { text-align:left; }
  .hero-copy p { margin:0; }
  .hero-copy p br { display:none; }
  .hero-actions,.mini-proof { justify-content:flex-start; gap:9px; }
  .hero-actions .btn { padding-inline:13px; font-size:.875rem; }
  .mini-proof { margin-top:24px; }
  .visual-desk { min-height:365px; border-radius:32px; }
  .hero-box { scale:.72; animation:none; }
  .swatches { right:2%; top:7%; transform:rotate(23deg) scale(.65); }
  .process-grid { grid-template-columns:1fr; gap:11px; }
  .process-card { display:grid; grid-template-columns:56px 1fr; align-items:center; column-gap:14px; padding:16px; }
  .process-card::before { grid-column:2; }
  .process-icon { grid-column:1; grid-row:1 / span 3; width:54px; height:54px; margin:0; border-radius:16px; }
  .process-card h3 { margin:1px 0 4px; }
  .ex-sidebar { padding:24px 16px; }
  .box-tab { font-size:.875rem; padding:10px 13px; min-height:44px; }
  .explore-main { padding:16px; }
  .stage { min-height:300px; }
  .box-model { scale:.76; }
  [data-view="open"] :is(.box-mailer,.box-book) { translate:0 28px; }
  .view-controls button { padding-inline:9px; font-size:.75rem; }
  .case-grid { grid-template-columns:1fr; }
  .flip-card { height:330px; }
  .material-panel,.brand-panel { grid-template-columns:minmax(0,1fr); }
  .material-panel { padding:19px; gap:22px; }
  .material-image,.material-photo { min-height:214px; }
  .brand-copy { padding:30px 24px 0; }
  .cmyk-scene { height:285px; }
  .fusion { width:185px; }
  .form-grid { grid-template-columns:1fr; }
  .quote-form { padding:20px; }
}