/* REVISION 13 — calmer hero, richer selected work, and purposeful menu motion */
:root{--ws-orange:#d85f3c;--ws-cream:#f4efe5;--ws-paper:#f4efe5;--ws-forest:#26372e}
.ws-hero{height:min(760px,82svh);min-height:610px;max-height:780px}
.ws-hero-image img{object-position:center 54%;filter:brightness(.62) saturate(.88);transform:scale(1.025)}
.ws-hero-shade{background:linear-gradient(90deg,rgba(21,29,24,.86) 0%,rgba(21,29,24,.66) 39%,rgba(21,29,24,.12) 78%),linear-gradient(0deg,rgba(16,24,19,.38),transparent 24%)}
.ws-hero-content{left:clamp(28px,8vw,120px);width:min(780px,74vw)}
.ws-kicker{margin-bottom:25px;color:#f0c9ae;letter-spacing:.16em}
.ws-hero h1{font-size:clamp(60px,8vw,116px);line-height:.88;max-width:820px;letter-spacing:-.09em}
.ws-hero-content>p{max-width:440px;margin:25px 0 23px;font-size:15px;line-height:1.7;color:#f3eee5}
.ws-hero-bottom{bottom:22px;left:5%;right:5%;padding-top:12px;font-size:8px;opacity:.82}
.ws-hero-stamp{display:none!important}
.ws-hero-actions{gap:22px}
.ws-button{transition:transform .35s cubic-bezier(.2,.75,.2,1),background .35s,box-shadow .35s}
.ws-button:hover{transform:translateY(-3px);box-shadow:0 12px 30px #0002}
.ws-marquee{background:#d85f3c;color:#fff4e9}
.ws-marquee div{animation-duration:32s}

/* The intro now has a clear three-step visual instead of a giant decorative mark. */
.ws-intro{grid-template-columns:.16fr 1fr;padding:105px 8.5% 95px;background:#f4efe5}
.ws-intro h2{font-size:clamp(50px,6.5vw,88px)}
.ws-intro h2 em{color:#c75c3d}
.ws-intro-bottom{margin:28px 0 0 14vw;align-items:flex-start}
.ws-intro-bottom p{max-width:470px;color:#555d53}
.ws-intro-mark{right:4%;top:12%;bottom:auto;font-size:clamp(110px,15vw,210px);color:#26372e08}
.ws-intro-steps{grid-column:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:42px 0 0 14vw;max-width:820px;position:relative;z-index:1}
.ws-intro-steps>div{display:grid;grid-template-columns:32px 1fr;column-gap:10px;align-items:center;padding:15px 14px;border-top:1px solid #c8c0b2;border-bottom:1px solid #c8c0b2;transition:background .3s,transform .3s}
.ws-intro-steps>div:hover{background:#e9e1d3;transform:translateY(-4px)}
.ws-intro-steps span{grid-row:span 2;color:#c75c3d;font:10px var(--ws-mono)}
.ws-intro-steps b{font:600 14px var(--ws-sans);letter-spacing:-.03em}
.ws-intro-steps small{font:11px var(--ws-sans);color:#73776d;margin-top:3px}

/* Selected Worlds: make the concepts feel like three distinct places, not a text list. */
.ws-work{padding:105px 8.5% 100px;background:#252d28;color:#f4efe5;overflow:hidden}
.ws-work .ws-section-index{color:#e59a78}
.ws-work .ws-section-head{align-items:flex-end;margin-bottom:42px}
.ws-work .ws-section-head h2{color:#f4efe5}
.ws-work .ws-section-head h2 em{color:#e49a79}
.ws-work .ws-section-head>p{color:#c4c7bc}
.ws-work-grid{gap:16px;perspective:1000px}
.ws-work-card{position:relative;background:#f2ede3;color:#252d28;overflow:hidden;transform:translateY(0);transition:transform .45s cubic-bezier(.2,.75,.2,1),box-shadow .45s}
.ws-work-card:hover{transform:translateY(-9px);box-shadow:0 22px 48px #0005}
.ws-work-image{height:clamp(250px,27vw,360px);background:#3c433b}
.ws-work-image:after{background:linear-gradient(180deg,#151a1640,transparent 38%,#151a1670)}
.ws-work-image img{filter:saturate(.96) contrast(1.02);transition:transform 1.1s cubic-bezier(.2,.75,.2,1),filter .7s}
.ws-work-card:hover .ws-work-image img{transform:scale(1.09);filter:saturate(1.12) contrast(1.04)}
.ws-work-image>span{top:16px;left:16px;padding:8px 10px;background:#202720b8;color:#fff;border:1px solid #ffffff44;backdrop-filter:blur(8px);font-size:8px}
.ws-work-image>b{right:16px;bottom:14px;width:38px;height:38px;display:grid;place-items:center;border:1px solid #ffffffb0;border-radius:50%;background:#20272066;backdrop-filter:blur(6px)}
.ws-work-info{padding:18px 17px 19px;border:0;align-items:flex-start;min-height:112px}
.ws-work-info h3{font:600 clamp(24px,2.3vw,32px)/1.05 var(--ws-serif);letter-spacing:-.04em}
.ws-work-info p{max-width:260px;color:#66695f;font-size:12px}
.ws-work-info>span{color:#b65437;align-self:flex-end;font-size:8px}
.ws-concept-note{color:#b9c0b4;margin-top:24px}

/* Navigation panels: purposeful hover, keyboard focus, and pricing menu motion. */
.navitem.has-panel .nav-panel{border-radius:4px;background:linear-gradient(145deg,#20382d,#172820);border:1px solid #6b826f88;backdrop-filter:blur(18px);overflow:hidden}
.navitem.has-panel:hover>a i,.navitem.has-panel:focus-within>a i{transform:rotate(45deg)}
.nav-panel>a{transition:padding .25s,color .25s,background .25s}
.nav-panel>a:hover{background:#ffffff0a;padding-left:10px}
.nav-panel>a img{width:28px;height:28px;object-fit:cover;border-radius:3px;transition:transform .35s}
.nav-panel>a:hover img{transform:scale(1.12) rotate(-3deg)}
.nav-panel-pricing{width:350px!important}
.nav-panel>a:nth-of-type(1){transition-delay:0ms}
.nav-panel>a:nth-of-type(2){transition-delay:35ms}
.nav-panel>a:nth-of-type(3){transition-delay:70ms}
.navitem.has-panel:focus-within .nav-panel>a,.navitem.has-panel:hover .nav-panel>a{animation:ws-menu-in .32s both}
@keyframes ws-menu-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}

/* Home navigation has its own compact dropdowns. */
.ws-nav-item{position:relative;display:flex;align-items:center}
.ws-nav-item>a{display:flex;align-items:center;gap:7px}
.ws-nav-item>a i{font-style:normal;color:var(--ws-orange);font-size:13px;transition:transform .3s}
.ws-nav-item:hover>a i,.ws-nav-item:focus-within>a i{transform:rotate(45deg)}
.ws-nav-drop{position:absolute;z-index:80;top:calc(100% + 15px);left:-22px;width:270px;padding:14px 16px 12px;background:#26372ef2;color:#f4efe5;border:1px solid #81908077;box-shadow:0 22px 50px #101a1440;backdrop-filter:blur(18px);opacity:0;visibility:hidden;transform:translateY(12px) scale(.98);transform-origin:top left;transition:opacity .25s,transform .35s,visibility .25s}
.ws-nav-item:hover .ws-nav-drop,.ws-nav-item:focus-within .ws-nav-drop{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.ws-nav-drop>span{display:block;padding:5px 4px 10px;color:#e49a79;font:8px var(--ws-mono);letter-spacing:.15em}
.ws-nav-drop>a{display:flex;justify-content:space-between;gap:15px;padding:11px 4px;border-top:1px solid #ffffff24;color:#f4efe5;font-size:11px;transition:padding .25s,color .25s}
.ws-nav-drop>a:after{display:none}
.ws-nav-drop>a b{font-weight:400;color:#e49a79;transition:transform .25s}
.ws-nav-drop>a:hover{padding-left:10px;color:#f1b38f}
.ws-nav-drop>a:hover b{transform:translate(3px,-3px)}
.ws-nav-drop-pricing{width:290px}

/* Better image failure states and restrained reveal transitions. */
.ws-work-card.ws-reveal{clip-path:inset(0 0 8% 0);transition:clip-path .8s cubic-bezier(.2,.75,.2,1),transform .45s,box-shadow .45s}
.ws-work-card.ws-reveal.ws-revealed{clip-path:inset(0)}
.ws-image-failed{opacity:0!important}
@media(max-width:900px){
 .ws-hero{height:720px;min-height:620px}
 .ws-hero-content{width:82vw}
 .ws-intro{grid-template-columns:1fr;padding:78px 7%}
 .ws-intro>.ws-section-index{margin-bottom:25px}
 .ws-intro-bottom,.ws-intro-steps{margin-left:0}
 .ws-intro-steps{grid-column:1}
 .ws-intro-mark{font-size:130px;right:3%;top:8%}
 .ws-work-grid{grid-template-columns:1fr 1fr}
 .ws-work-card:last-child{grid-column:1/-1}
 .ws-work-card:last-child .ws-work-image{height:320px}
}
@media(max-width:640px){
 .ws-hero{height:690px;min-height:600px}
 .ws-hero-content{left:7%;width:86%}
 .ws-hero h1{font-size:clamp(52px,13vw,76px)}
 .ws-kicker{font-size:8px}
 .ws-hero-content>p{font-size:14px;max-width:340px}
 .ws-hero-bottom{font-size:7px}
 .ws-hero-bottom span:first-child{max-width:65%}
 .ws-intro{padding:65px 7%}
 .ws-intro h2{font-size:clamp(46px,12vw,66px)}
 .ws-intro-bottom{display:block;margin-top:25px}
 .ws-intro-bottom p{font-size:14px}
 .ws-intro-steps{grid-template-columns:1fr;gap:0;margin-top:28px}
 .ws-intro-steps>div{padding:12px 5px}
 .ws-work{padding:72px 7%}
 .ws-work .ws-section-head{display:block}
 .ws-work .ws-section-head>p{margin-top:18px}
 .ws-work-grid{grid-template-columns:1fr;gap:24px}
 .ws-work-card:last-child{grid-column:auto}
 .ws-work-image,.ws-work-card:last-child .ws-work-image{height:300px}
 .ws-work-info{min-height:0}
 .ws-nav-drop{position:static;display:none;width:100%;margin:8px 0 10px;opacity:1;visibility:visible;transform:none;box-shadow:none}
 .ws-nav-item:focus-within .ws-nav-drop,.ws-nav-item:hover .ws-nav-drop{display:block}
}
@media(prefers-reduced-motion:reduce){.ws-work-card,.ws-work-image img,.nav-panel,.ws-nav-drop{transition:none!important;animation:none!important}}

@media(max-width:760px){
 .navlinks.open .navitem.has-panel .nav-panel{
  display:block!important;position:relative!important;left:auto!important;top:auto!important;
  width:min(100%,430px)!important;margin:2px 0 12px;padding:10px 14px!important;
  opacity:1!important;visibility:visible!important;transform:none!important;
  box-shadow:none!important;border-radius:3px;background:#1d3429!important;
 }
 .navlinks.open .nav-panel-kicker,.navlinks.open .nav-panel-foot{font-size:7px}
 .navlinks.open .nav-panel>a{display:grid;grid-template-columns:24px 1fr 16px;padding:10px 0;font-size:12px}
 .navlinks.open .nav-panel>a img{width:24px;height:24px}
 .navlinks.open .nav-panel>a span{font-size:12px}
 .navlinks.open .nav-panel>a small{font-size:9px}
 .navlinks.open .navitem>a{font-size:clamp(22px,6vw,32px)}
}