.hero-carousel{min-width:0;border:1px solid #d6c4b1;background:#efe2d2;box-shadow:0 20px 55px #5b39200c;position:relative;border-radius:4px;overflow:hidden}
.hc-topline{display:flex;justify-content:space-between;gap:20px;padding:19px 24px;font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:#745d4a}.hc-topline>span:first-child{display:flex;align-items:center;gap:9px}.hc-topline i{width:5px;height:5px;border-radius:50%;background:var(--accent)}.hc-count{font-variant-numeric:tabular-nums;letter-spacing:.1em}
.hc-stage{display:grid;overflow:hidden;touch-action:pan-y}.hc-slide{grid-area:1/1;min-width:0;opacity:0;visibility:hidden;transform:translateX(28px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.2,1),visibility .65s;pointer-events:none}.hc-slide.is-active{opacity:1;visibility:visible;transform:translateX(0);pointer-events:auto;z-index:1}.hc-project{display:block}.hc-art{position:relative;height:350px;display:flex;align-items:center;justify-content:center;padding:24px 26px 45px;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 75% 15%,#fff4e5 0,transparent 63%),#e8d6bf}.hc-art::before,.hc-art::after{content:'';position:absolute;z-index:-1;width:340px;height:340px;border:1px solid #b58f6a40;border-radius:50%;right:-100px;top:-170px}.hc-art::after{width:440px;height:440px;right:-150px;top:-220px}.hc-watermark{position:absolute;left:20px;bottom:5px;font:180px/.9 var(--serif);letter-spacing:-.09em;color:#af805328;z-index:-1}.hc-device{width:100%;position:relative;box-shadow:8px 19px 22px #4d30212e;transform:rotate(-3deg);transition:transform .6s;border:1px solid #b99b7d;border-radius:5px;overflow:hidden;background:var(--paper)}.hc-web .hc-device{transform:perspective(900px) rotateY(-7deg) rotateZ(-2deg)}.hc-device img{display:block;width:100%;height:auto}.hc-browser{display:flex;justify-content:space-between;align-items:center;background:#fffaf2;color:#937861;height:23px;padding:0 10px;font-size:7px}.hc-browser>span:first-child{font-size:5px;letter-spacing:2px}.hc-project:hover .hc-device{transform:rotate(0)}.hc-art-note{position:absolute;bottom:15px;right:23px;font-size:8px;letter-spacing:.13em;text-transform:uppercase;color:#785b43}.hc-art-note span{padding:0 6px;color:#a28369}.hc-phone{background:radial-gradient(ellipse at 65% 20%,#efd4bb 0,transparent 65%),#d5ac94}.hc-phone .hc-device{height:260px;width:auto;max-width:75%;border:4px solid #43342b;border-radius:18px;transform:rotate(6deg)}.hc-phone .hc-device img{height:100%;width:auto;max-width:100%;object-fit:contain}.hc-phone .hc-watermark{color:#935c412b}.hc-caption{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:23px 25px 20px;background:#faf5ed}.hc-caption small{display:block;font-size:8px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:8px}.hero .hc-caption h2{font-size:32px;line-height:1.1;letter-spacing:-.04em}.hc-open{display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border:1px solid #cdb9a4;border-radius:50%;font-size:21px;color:var(--accent);transition:background .2s,color .2s}.hc-project:hover .hc-open{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.hc-controls{display:flex;align-items:center;gap:10px;padding:5px 16px 9px;background:#faf5ed;border-top:1px solid #e5d9cb}.hc-controls button{background:none;border:0;min-width:40px;min-height:44px;padding:0;color:#70503d}.hc-play{font-size:17px;flex-shrink:0}.hc-pagination{display:flex;flex:1;align-items:center;gap:3px}.hc-pagination .hc-dot{min-width:0;flex:1;position:relative}.hc-dot>span{display:block;height:2px;background:#decebd;position:relative;overflow:hidden}.hc-dot.is-current>span{background:#b57957}.hc-dot.is-current>span::after{content:'';position:absolute;inset:0;background:var(--accent);transform:scaleX(0);transform-origin:left}.hero-carousel[data-running=true] .hc-dot.is-current>span::after{animation:hc-progress 6.5s linear forwards}.hc-arrows{display:flex;gap:0;margin-left:4px}.hc-arrows button{font-size:21px}.hc-controls button:hover{color:var(--accent);background:#eee0d1}.hc-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.hc-project:focus-visible{outline-offset:-4px}
@keyframes hc-progress{to{transform:scaleX(1)}}
@media(min-width:1600px){.hc-art{height:350px}.hc-phone .hc-device{height:285px}}
@media(max-width:1100px) and (min-width:761px){.hc-art{height:290px;padding-inline:18px}.hc-phone .hc-device{height:235px}.hc-topline{padding-inline:18px}.hc-caption{padding:21px 19px}.hero .hc-caption h2{font-size:27px}.hc-controls{padding-inline:9px;gap:4px}.hc-controls button{min-width:35px}.hc-pagination .hc-dot{min-width:0}}
@media(max-width:760px){.hero-carousel{max-width:600px;width:100%}.hc-art{height:320px}.hc-phone .hc-device{height:260px}.hc-caption{padding:21px 23px}.hc-topline{padding:17px 22px}.hero .hc-caption h2{font-size:31px}}
@media(max-width:420px){.hc-art{height:270px;padding:24px 20px 40px}.hc-phone .hc-device{height:223px}.hc-topline{padding:16px 18px;font-size:8px}.hc-caption{padding:19px}.hero .hc-caption h2{font-size:28px}.hc-controls{padding-inline:8px;gap:3px}.hc-controls button{min-width:38px}.hc-pagination .hc-dot{min-width:0}.hc-watermark{font-size:150px}.hc-art-note{font-size:7px;right:18px}.hc-arrows{margin-left:2px}}
/* Smaller showcase, keeping the original visual staging and no top banner. */
.hero-carousel{max-width:510px;width:100%;justify-self:end}
.hc-art{height:300px}
.hc-phone .hc-device{height:245px}
@media(max-width:1100px) and (min-width:761px){.hc-art{height:280px}.hc-phone .hc-device{height:230px}}
@media(max-width:760px){.hero-carousel{justify-self:start;max-width:490px}.hc-art{height:280px}.hc-phone .hc-device{height:235px}}
@media(max-width:420px){.hc-art{height:250px}.hc-phone .hc-device{height:205px}}
/* A compact caption row; playback stays with the controls below. */
.hc-caption{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:16px;align-items:center;padding-block:18px}
.hc-title-link{min-width:0}.hc-title-link:hover h2{color:var(--accent)}
.hc-caption .hc-play{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid #cdb9a4;border-radius:50%;background:transparent;color:var(--accent);font-size:18px}
.hc-caption .hc-play:hover{background:var(--accent);border-color:var(--accent);color:var(--paper)}
/* Fluid hero proportions, with a stacked layout before either column gets tight. */
.hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(30px,4.5vw,65px);padding-block:clamp(38px,5vw,72px)}
.hero-copy{min-width:0}.hero h1{font-size:clamp(52px,5.7vw,86px)}
.hero-carousel{width:100%;max-width:510px;min-width:0}
.hc-art{height:auto;aspect-ratio:1.7;padding:clamp(16px,1.8vw,26px) clamp(18px,1.8vw,26px) 38px}
.hc-phone .hc-device{height:100%;max-height:250px;flex-shrink:0}
.hero .hc-caption h2{font-size:clamp(25px,2.2vw,32px);overflow-wrap:break-word}
@media(min-width:761px) and (max-width:1000px){.hero{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:25px}.hero h1{font-size:clamp(44px,5.7vw,57px)}.hero-copy>p{font-size:14px}.hero-copy .actions{gap:16px}.hero-copy .button{padding-inline:16px;gap:17px}.hc-art{aspect-ratio:1.5;padding:18px 15px 34px}.hc-art-note{font-size:7px;right:15px}.hc-caption{padding:17px 16px}.hc-caption small{font-size:7px;letter-spacing:.1em}}
@media(max-width:760px){.hero{grid-template-columns:minmax(0,1fr);gap:30px}.hero h1{font-size:clamp(44px,8.2vw,62px)}.hero-carousel{max-width:490px;justify-self:start}.hc-art{aspect-ratio:1.7;padding:20px 22px 37px}.hc-phone .hc-device{max-height:235px}.hero .hc-caption h2{font-size:28px}}
@media(max-width:420px){.hero h1{font-size:clamp(40px,11.9vw,49px)}.hero{gap:27px;padding-block:32px}.hero h1{margin-block:21px}.hero-copy .actions{gap:16px}.hero-copy .button{padding-inline:17px;gap:20px}.hero-copy .text-link{font-size:11px;gap:10px}.hc-art{aspect-ratio:1.5;padding:18px 18px 34px}.hc-caption{padding:16px}.hero .hc-caption h2{font-size:26px}.hc-caption small{font-size:7px;letter-spacing:.1em}.hc-art-note{font-size:7px;right:16px}.hc-browser{height:19px;font-size:6px;padding-inline:8px}}
@media(max-height:700px) and (min-width:1001px){.hero{padding-block:32px}.hero h1{font-size:clamp(54px,5.1vw,74px);margin-block:22px}.hero-carousel{max-width:450px}.hc-art{aspect-ratio:1.85}.hero-copy .actions{margin-top:25px}}
/* Keep the whole website preview visible in short and landscape viewports. */
.hc-web .hc-device{height:100%;display:flex;flex-direction:column}
.hc-web .hc-browser{flex-shrink:0}
.hc-web .hc-device img{min-height:0;flex:1;width:100%;height:0;object-fit:contain}

/* Give the three website previews more room inside their existing stage. */
.hc-art.hc-web{padding:12px 9px 27px}
.hc-web .hc-browser{height:19px}
@media(max-width:420px){.hc-art.hc-web{padding:10px 7px 25px}.hc-web .hc-browser{height:17px}}

/* Edge-to-edge website artwork; retain the staged, tilted browser. */
.hc-art.hc-web{padding:8px 0 24px}
.hc-web .hc-device{height:auto;width:100%;max-width:none;flex-shrink:0;transform:rotate(-2deg) scale(1.035)}
.hc-web .hc-device img{display:block;flex:none;width:100%;height:auto;object-fit:initial}
.hc-project:hover .hc-web .hc-device{transform:rotate(0) scale(1.035)}
.hc-caption{padding-block:13px}.hc-caption small{margin-bottom:5px}
.hero .hc-caption h2{font-size:clamp(24px,2vw,28px)}
.hc-controls{padding-block:0}.hc-controls button{min-height:44px}

/* Smaller floating browser; the screenshot itself stays flush with its frame. */
.hc-art.hc-web{padding:12px 0}
.hc-web .hc-device{width:88%;height:auto;transform:perspective(900px) rotateY(-7deg) rotateZ(-2deg)}
.hc-project:hover .hc-web .hc-device{transform:rotate(0)}
.hc-web .hc-device img{width:100%;height:auto;flex:none;object-fit:initial}
.hc-web .hc-art-note{bottom:7px;font-size:7px}
@media(max-height:700px) and (min-width:1001px){.hc-web .hc-device{width:82%}}