/* SOBE WORKS — 2026 / Brand system and Creative Agency 02. Pure CSS, no web dependencies. */
:root{--sobe-orange:#e4572e;--sobe-blue:#0047ff;--sobe-silver:#b7b7b9;--sobe-white:#f2efe8;--sobe-dark:#1a1a1a;--paper:#f2efe8;--ink:#1a1a1a;--muted:#777572;}
html,body{background:var(--sobe-white);color:var(--sobe-dark)}
.brand{color:#111;gap:0;z-index:120}.brand__wordmark{font-family:Arial,'Helvetica Neue',sans-serif;font-size:clamp(25px,2.35vw,36px);line-height:.77;font-weight:900;letter-spacing:-.105em;display:inline-block;max-width:165px;white-space:normal;word-spacing:999px;transform:scaleX(1.02);transform-origin:left}
.brand__wordmark::after{content:'CREATIVE COLLECTIVE';display:block;font-size:7px;letter-spacing:.42em;font-weight:700;margin-top:13px;line-height:1.2;white-space:nowrap;word-spacing:normal}
.is-loading .brand__wordmark{max-width:none;word-spacing:normal;font-size:clamp(44px,8vw,85px)}
.intro__line span{background:var(--sobe-orange)}
.header__note{color:#666;font-weight:700;letter-spacing:.21em}.header__note span{color:var(--sobe-orange)}
.area--one{background:#e4e5e3}.area--two{background:var(--sobe-blue);color:#f2efe8}.area--three{background:#e8e6e2}
.area--one:hover,.area--one.is-active{background:#d7dcdf}.area--two:hover,.area--two.is-active{background:#073ec7}.area--three:hover,.area--three.is-active{background:#dad9d3}
.area--two .area__micro,.area--two .area__number,.area--two .area__number span,.area--two .area__cta{color:rgba(255,255,255,.78)}
.area--two .area__visual{inset:18% 0 23%}.area--two .area__visual img{width:clamp(320px,39vw,680px);height:100%;object-fit:cover;filter:none!important;box-shadow:0 15px 70px #001c5655}
.area--two:hover .area__arrow{background:var(--sobe-orange);border-color:var(--sobe-orange)}
.area--two .area__arrow{border-color:#ffffff66}.area--two .area__heading{font-weight:800;letter-spacing:-.08em}.site__footer{color:#71716e}
.detail__brand{font-weight:900;letter-spacing:-.08em}.detail__brand span{color:var(--sobe-orange)}
.a1-topbar__brand{font-weight:900;letter-spacing:-.05em;font-size:20px}.a3-wordmark{font-weight:900;letter-spacing:-.05em}.a3-wordmark>span:last-child{letter-spacing:-.07em;font-weight:900;font-size:clamp(15px,1.5vw,24px)}

/* Area 02 — clean two-chapter editorial service index */
.area02,.a2-app,.a2-workspace,.a2-services{background:var(--sobe-white);color:var(--sobe-dark)}
.a2-app{isolation:isolate}.a2-sidebar{width:min(640px,52vw);min-width:0;max-width:none;padding:clamp(27px,4vw,58px) clamp(26px,4vw,64px) clamp(22px,3vw,38px);background:var(--sobe-white);color:var(--sobe-dark);border-right:1px solid #c9c8c5;box-shadow:15px 0 50px #060f281c}
.a2-app.is-menu-open .a2-workspace{left:min(640px,52vw)}
.a2-sidebar-head{gap:20px}.a2-sidebar-identity{gap:18px}.a2-sidebar-overline{color:#5a5956;font-family:Arial,Helvetica,sans-serif;font-size:10px;font-weight:750;letter-spacing:.19em}
.a2-sidebar-overline i{color:var(--sobe-orange);font-weight:850;margin:0 9px}.a2-sidebar-headline{font-size:clamp(39px,4.1vw,67px);line-height:.97;font-family:Arial,'Helvetica Neue',sans-serif;font-weight:900;letter-spacing:-.086em;color:#1a1a1a}
.a2-sidebar-headline em{font-style:normal;color:var(--sobe-orange);font-weight:900}
.a2-sidebar-head button{border:1px solid #c7c5c0;color:#171717;width:43px;height:43px;flex-basis:43px;border-radius:50%;background:transparent}
.a2-sidebar-head button:hover{background:var(--sobe-orange);color:white;border-color:var(--sobe-orange)}
.a2-sidebar-meta{margin:clamp(30px,5vh,65px) 0 0;padding:0 0 19px;border-bottom:1px solid #c6c5c1;color:#4f4e4a;font-weight:750;font-size:10px;letter-spacing:.15em}
.a2-nav{margin:0;min-height:0;flex:1;grid-template-columns:1fr;gap:clamp(17px,2.6vh,26px);padding:clamp(24px,4vh,45px) 12px 26px 0;scrollbar-color:#b5b4b1 transparent;align-content:start}
.a2-nav-section{width:100%}.a2-nav-group{font:800 10px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.15em;color:#4c4b49;gap:17px;margin:0 0 13px}.a2-nav-group span{font-size:10px;color:var(--sobe-orange);font-weight:800}
.a2-nav-item{min-height:clamp(62px,8vh,85px);grid-template-columns:30px minmax(0,1fr) 24px;gap:9px;border:0;border-bottom:1px solid #ceccc7;padding:14px 2px 14px 0;transition:padding-left .24s,background-color .3s}
.a2-nav-item:first-of-type{border-top:1px solid #ceccc7}
.a2-nav-index{font:700 10px/1.4 Arial,Helvetica,sans-serif;color:#8a8987;padding:6px 0 0;align-self:start}
.a2-nav-name{font:400 clamp(26px,2.8vw,41px)/1.08 Georgia,'Times New Roman',serif;letter-spacing:-.05em;color:#171717;overflow-wrap:normal}
.a2-nav-arrow{font-size:21px;color:#8f918c;opacity:.8;transform:translate(-3px,2px)}
.a2-nav-item:hover,.a2-nav-item[aria-current=true]{background:#eae6df;padding-left:10px}.a2-nav-item:hover .a2-nav-arrow,.a2-nav-item[aria-current=true] .a2-nav-arrow{color:var(--sobe-orange)}
.a2-nav-item[aria-current=true] .a2-nav-index{color:var(--sobe-orange)}.a2-nav-item:focus-visible{outline:2px solid var(--sobe-blue)}
.a2-sidebar-foot{padding-top:19px;min-height:64px;border-top:1px solid #c6c5c1}.a2-sidebar-foot button{font-weight:700}.a2-sidebar-foot>span{color:#85817b;max-width:190px;line-height:1.5;font-size:9px;font-weight:700;letter-spacing:.13em}
.a2-topbar{height:88px;margin-bottom:-88px;padding:0 clamp(25px,3.2vw,56px);color:#fff}.a2-wordmark{font:900 clamp(17px,1.5vw,23px)/1 Arial,sans-serif;letter-spacing:-.075em;white-space:nowrap}.a2-wordmark span{padding:0 2px;opacity:1}
.a2-menubutton,.a2-exit{font-weight:800;font-size:10px;letter-spacing:.16em}.a2-hamburger i{height:2px}.a2-app.is-service .a2-topbar{background:var(--sobe-white);color:#1a1a1a;border-bottom:1px solid #ceccc7}

/* The opening image is an original offline vector study of chrome, fabric and electric blue. */
.a2-home{height:100dvh;min-height:490px}.a2-opening{background:var(--sobe-white);color:#111;isolation:isolate;overflow:hidden}
.a2-home-image{left:36%;background:#0047ff url('sobe-hero.svg') 52% 49%/cover no-repeat;transform:none;animation:a2-push 27s ease-in-out infinite alternate;transform-origin:center;will-change:transform}
.a2-home-left{position:absolute;inset:0 64% 0 0;z-index:1;display:flex;flex-direction:column;text-align:left;padding:clamp(120px,16vh,190px) 35px 38px clamp(26px,4vw,70px);background:var(--sobe-white)}
.a2-home-edition{font:800 10px/1.5 Arial,sans-serif;letter-spacing:.17em;color:#1a1a1a}.a2-home-edition b{color:var(--sobe-orange);font-weight:800}
.a2-home-left-title{font:900 clamp(26px,3.3vw,59px)/.94 Arial,sans-serif;letter-spacing:-.075em;color:#1a1a1a;margin:auto 0;display:block}.a2-dot{color:var(--sobe-orange)}
.a2-home-left-bottom{display:flex;align-items:end;justify-content:space-between;gap:14px;border-top:1px solid #bab8b2;padding-top:18px;font:800 10px/1.45 Arial,sans-serif;letter-spacing:.13em}
.a2-color-stripes{display:flex;gap:5px;align-items:end}.a2-color-stripes i{height:37px;width:13px;display:block;background:var(--sobe-orange)}.a2-color-stripes i:nth-child(2){background:var(--sobe-blue)}.a2-color-stripes i:nth-child(3){background:var(--sobe-silver)}
.a2-home-name{position:absolute;z-index:2;left:40%;top:31%;transform:none;display:flex;align-items:start;flex-direction:column;font:900 clamp(88px,13vw,210px)/.76 Arial,'Helvetica Neue',sans-serif;letter-spacing:-.115em;color:var(--sobe-white);text-shadow:0 10px 40px #001e5355;text-align:left;white-space:nowrap}
.a2-home-name span{display:block}.a2-opening:hover .a2-home-name{transform:translateY(-7px)}
.a2-home-sidecopy{position:absolute;z-index:2;right:3.6%;top:20%;color:#fff;font:850 clamp(10px,1vw,14px)/1.14 Arial,Helvetica,sans-serif;letter-spacing:-.03em;text-align:left}
.a2-home-cue{z-index:4;left:auto;right:clamp(25px,3vw,48px);bottom:clamp(24px,4vh,45px);transform:none;display:inline-flex;align-items:center;gap:22px;color:#fff;font:850 10px/1 Arial,sans-serif;letter-spacing:.18em}
.a2-home-cue b{display:grid;place-items:center;height:52px;width:52px;border:1px solid #f2efe8a8;border-radius:50%;font:400 25px/1 Arial,sans-serif;transition:background .35s,color .35s,transform .35s}.a2-opening:hover .a2-home-cue b{background:#f2efe8;color:var(--sobe-orange);transform:rotate(45deg)}
.a2-menu-preview{z-index:8;right:clamp(30px,4vw,70px);bottom:clamp(65px,12vh,160px);width:clamp(190px,25vw,390px);background:#f2efe8;padding:11px 11px 16px;box-shadow:0 25px 60px #001c6570;color:#1a1a1a}
.a2-menu-preview img{height:clamp(190px,24vw,340px);object-fit:cover}.a2-menu-preview__label,.a2-menu-preview__number{font-weight:750;letter-spacing:.16em;color:#4c4b4b}
.a2-app.is-menu-open:not(.is-service) .a2-menu-preview{opacity:1}

/* Five complete service detail pages, each with its own authored artwork. */
.a2-services{padding-top:88px}.a2-service{max-width:1800px;margin:0 auto}.a2-service-masthead{padding:clamp(35px,4vw,70px) clamp(29px,4.7vw,82px) 0;color:#62605b;font:750 10px/1.6 Arial,sans-serif;letter-spacing:.16em}
.a2-service-intro-layout{display:grid;grid-template-columns:clamp(52px,11vw,150px) minmax(0,1fr);gap:clamp(12px,2vw,40px);align-items:start;padding:clamp(40px,6vw,93px) clamp(29px,4.7vw,82px) clamp(70px,8vw,140px)}
.a2-service-label{font:900 clamp(35px,5vw,75px)/.9 Arial,sans-serif;letter-spacing:-.09em;color:var(--sobe-orange);display:flex;flex-direction:column;gap:25px}.a2-service-label i{font-size:24px;font-weight:400;font-style:normal;color:#aaa69d}
.a2-service-intro-layout h1{font:900 clamp(56px,7.7vw,133px)/.89 Arial,'Helvetica Neue',sans-serif;letter-spacing:-.088em;margin:0 0 clamp(31px,4vw,60px);color:#151515}
.a2-service-desc{font:400 clamp(21px,2.3vw,36px)/1.23 Georgia,'Times New Roman',serif;letter-spacing:-.026em;max-width:920px;margin:0;color:#3e3c39;text-wrap:pretty}
.a2-feature{width:100%;height:clamp(420px,52vw,800px);overflow:hidden;background:var(--sobe-blue);isolation:isolate}
.a2-feature img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 1.5s cubic-bezier(.16,1,.3,1)}.a2-feature:hover img{transform:scale(1.035)}
.a2-feature-giant{z-index:1;position:absolute;left:clamp(34px,5vw,80px);top:clamp(110px,17vw,210px);color:var(--sobe-white);font:900 clamp(95px,17vw,270px)/.73 Arial,Helvetica,sans-serif;letter-spacing:-.12em;text-shadow:0 7px 40px #112f7070;pointer-events:none}
.a2-feature-index{left:clamp(29px,4.7vw,82px);bottom:clamp(24px,3vw,48px);border:1px solid #ffffff7a;color:#fff!important;background:#11182740!important;text-shadow:none!important;font:800 10px/1.2 Arial,sans-serif;letter-spacing:.16em;padding:15px 17px}
.a2-feature-stamp{position:absolute;right:clamp(30px,4vw,72px);bottom:clamp(27px,4vw,62px);color:#fff;font:800 13px/1.03 Arial,sans-serif;letter-spacing:.06em;text-align:right}
.a2-capabilities{display:grid;grid-template-columns:28% minmax(0,1fr);gap:24px;padding:clamp(70px,9vw,150px) clamp(29px,4.7vw,82px) clamp(40px,7vw,90px)}
.a2-capabilities-eyebrow{font:800 10px/1.5 Arial,sans-serif;letter-spacing:.18em;color:#5e5b57}.a2-capabilities-eyebrow b{color:var(--sobe-orange);padding:0 9px}
.a2-capabilities>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,3vw,45px)}.a2-capability{display:flex;flex-direction:column;border-top:1px solid #bfbcb6;padding-top:23px;font:400 clamp(18px,2vw,31px)/1.12 Georgia,serif;letter-spacing:-.035em;min-width:0}.a2-capability small{font:750 10px/1.3 Arial,sans-serif;letter-spacing:.08em;color:var(--sobe-orange);margin-bottom:35px}
.a2-bottom-next{margin:clamp(65px,6vw,110px) clamp(29px,4.7vw,82px) 0;padding:28px 0 80px;border-top:1px solid #bfbcb6}.a2-bottom-next>span{display:flex;gap:14px;font:750 10px/1.5 Arial,sans-serif;letter-spacing:.15em;color:#5f5b56}.a2-bottom-next>span b{color:var(--sobe-orange)}
.a2-bottom-next button{font:900 clamp(34px,5.5vw,85px)/.94 Arial,sans-serif;letter-spacing:-.075em;color:#171717}.a2-bottom-next button>span:last-child{color:var(--sobe-orange);font:400 clamp(35px,5vw,80px)/.9 Arial,sans-serif}
.a2-bottom-next button:hover>span:last-child{transform:translate(6px,-6px);transition:transform .4s}

/* Laptops: service index stays open but never strangles its detail layout. */
@media (min-width:721px) and (max-width:1199px){
 .a2-sidebar{width:min(500px,48vw);padding:32px 30px}.a2-app.is-menu-open .a2-workspace{left:min(500px,48vw)}
 .a2-sidebar-headline{font-size:clamp(36px,4vw,49px)}.a2-nav{gap:16px}.a2-nav-name{font-size:clamp(25px,2.7vw,34px)}.a2-nav-item{min-height:63px}
 .a2-home-name{font-size:clamp(90px,12vw,170px)}
 .a2-app.is-menu-open .a2-service-intro-layout{display:block}.a2-app.is-menu-open .a2-service-label{font-size:28px;margin-bottom:32px}.a2-app.is-menu-open .a2-service-label i{display:none}
 .a2-app.is-menu-open .a2-service-intro-layout h1{font-size:clamp(43px,5.4vw,67px)}.a2-app.is-menu-open .a2-service-desc{font-size:22px}
 .a2-app.is-menu-open .a2-feature-giant{font-size:clamp(65px,9vw,130px)}.a2-app.is-menu-open .a2-capabilities{display:block}.a2-app.is-menu-open .a2-capabilities>div{margin-top:25px;grid-template-columns:1fr}
}
@media (max-width:720px){
 .brand__wordmark{font-size:26px;max-width:130px}.brand__wordmark::after{font-size:5.5px;margin-top:10px}
 .header__note{font-size:8px;max-width:175px;line-height:1.7;text-align:right;white-space:normal}
 .area--two .area__visual img{width:116vw;height:75%;object-fit:cover}.area--two .area__visual{inset:23% 4% 27%}
 .a2-sidebar{width:100%;min-width:0;max-width:none;padding:calc(28px + env(safe-area-inset-top,0px)) 25px calc(20px + env(safe-area-inset-bottom,0px))}
 .a2-app.is-menu-open .a2-workspace{left:0}.a2-sidebar-headline{font-size:clamp(38px,11vw,62px)}.a2-sidebar-meta{margin-top:29px}
 .a2-nav{grid-template-columns:1fr;gap:22px;overflow-y:auto;padding:28px 0 18px}.a2-nav-group{margin-bottom:9px}.a2-nav-item{min-height:57px;padding:13px 0}.a2-nav-name{font-size:clamp(26px,7vw,34px)}
 .a2-sidebar-foot>span{font-size:8px;max-width:136px}
 .a2-topbar{height:75px;margin-bottom:-75px;padding:0 20px}.a2-wordmark{font-size:17px}.a2-menubutton,.a2-exit{font-size:9px}.a2-menubutton{gap:9px}
 .a2-home{min-height:560px}.a2-home-image{inset:0 0 0 0;background-position:center;background-size:cover;animation:none}
 .a2-opening{background:var(--sobe-blue)}.a2-home-left{inset:0 0 auto 0;height:31%;padding:95px 23px 14px;background:var(--sobe-white)}.a2-home-edition{font-size:8px}
 .a2-home-left-title{font-size:clamp(28px,8vw,43px);margin:14px 0 0}.a2-home-left-bottom{display:none}
 .a2-home-image{top:31%}.a2-home-name{left:5%;top:51%;font-size:clamp(76px,21vw,150px);letter-spacing:-.11em}
 .a2-home-sidecopy{right:5%;top:35%;font-size:9px}.a2-home-cue{bottom:35px;right:23px;font-size:9px;gap:12px}.a2-home-cue b{width:44px;height:44px}
 .a2-menu-preview{display:none}.a2-services{padding-top:75px}.a2-service-masthead{padding:28px 23px 0;font-size:9px;gap:14px;flex-wrap:wrap}
 .a2-service-intro-layout{display:block;padding:32px 23px 55px}.a2-service-label{font-size:37px;gap:8px;margin-bottom:29px}.a2-service-label i{display:none}
 .a2-service-intro-layout h1{font-size:clamp(48px,12.5vw,77px);margin-bottom:31px;overflow-wrap:normal;letter-spacing:-.075em}
 .a2-service-desc{font-size:clamp(22px,5.2vw,30px);line-height:1.32}
 .a2-feature{height:58vh;min-height:350px}.a2-feature-giant{top:29%;left:17px;font-size:clamp(79px,20vw,147px)}.a2-feature-index{left:18px;bottom:20px;font-size:8px;padding:10px}.a2-feature-stamp{right:20px;bottom:23px;font-size:10px}
 .a2-capabilities{display:block;padding:60px 23px 20px}.a2-capabilities>div{grid-template-columns:1fr;gap:25px;margin-top:30px}.a2-capability{padding-top:16px;font-size:24px}.a2-capability small{margin-bottom:15px}
 .a2-bottom-next{margin:65px 23px 0;padding:25px 0 65px}.a2-bottom-next button{font-size:clamp(37px,9vw,56px)}
}
@media(max-width:390px){.a2-home-name{font-size:21vw}.a2-service-intro-layout h1{font-size:11.8vw}.a2-sidebar{padding-left:20px;padding-right:20px}.a2-nav-name{font-size:24px}}
@media(prefers-reduced-motion:reduce){.a2-home-image{animation:none!important}.a2-feature img{transition:none!important}}

/* Explicit two-line logotype, matching the approved visual reference. */
.brand__wordmark{display:flex;flex-direction:column;align-items:flex-start;max-width:none;white-space:nowrap;word-spacing:normal;line-height:.77}
.brand__wordmark>span{display:block;white-space:nowrap}
.brand__wordmark::after{line-height:1.2}
.is-loading .brand__wordmark{display:flex;align-items:center;word-spacing:normal}