/* UNICUS Catering 2026 — atelier editorial redesign / 21st.dev UI skill-guided */
:root {
  --atelier-bg:#eee9df;
  --atelier-ink:#20241e;
  --atelier-deep:#111815;
  --atelier-gold:#cbb58e;
  --atelier-soft:#d7d3c9;
  --atelier-serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --atelier-ease:cubic-bezier(.22,1,.36,1);
}
body{background:var(--atelier-bg)}
.header{position:sticky;top:0;z-index:40;min-height:82px;background:rgba(17,24,21,.98);border-bottom:1px solid rgba(228,203,158,.17);backdrop-filter:blur(16px)}
.header-inner{height:82px}
.header .brand img{max-width:120px;height:52px}
.header .main-nav a{font-size:12px;letter-spacing:.025em;color:#efeee6;opacity:.79}
.header .main-nav a:hover,.header .main-nav a[aria-current]{color:var(--atelier-gold);opacity:1}
.header .btn-solid{background:transparent;color:#e5d5b9;border-color:#cbb58e77;padding:15px 19px}
.header .btn-solid:hover{background:var(--atelier-gold);color:#101511}
.display,.hero-title{font-family:var(--atelier-serif);font-weight:400;letter-spacing:-.038em}
.display em,.hero-title em{font-weight:400}
.eyebrow{font-size:11px;letter-spacing:.19em}
.btn-solid{border-radius:0}
.btn-text,.btn-solid{transition:transform .3s var(--atelier-ease),color .3s var(--atelier-ease),background-color .3s var(--atelier-ease),border-color .3s var(--atelier-ease)}
/* A true editorial composition, not a split SaaS hero */
.hero.hero-v3{position:relative;isolation:isolate;display:block;min-height:790px;background:var(--atelier-deep);color:#f4efe4;overflow:hidden}
.hero-v3 .hero-ambience{position:absolute;inset:-12%;background-size:cover;background-position:center;opacity:.27;filter:blur(13px) saturate(.56);z-index:-2;transform:scale(1.03)}
.hero-v3::after{content:"";position:absolute;inset:0;background:linear-gradient(92deg,rgba(14,20,17,.98),rgba(14,20,17,.80) 45%,rgba(14,20,17,.46)),linear-gradient(0deg,rgba(9,14,11,.66),transparent 25%);z-index:-1;pointer-events:none}
.hero-v3-grid{max-width:1750px;margin:auto;min-height:min(860px,calc(100svh - 80px));padding:83px var(--pad) 90px;display:grid;grid-template-columns:minmax(0,1.38fr) minmax(320px,.72fr);gap:clamp(22px,4vw,92px);align-items:center;position:relative}
.hero-v3-copy{position:relative;z-index:3;max-width:1010px}
.hero-v3-topline{display:flex;align-items:center;gap:22px;margin-bottom:42px;color:var(--atelier-gold);font-size:10px;font-weight:600;letter-spacing:.25em;text-transform:uppercase}
.hero-v3-line{width:64px;height:1px;background:var(--atelier-gold)}
.hero-v3-index{display:flex;gap:28px;align-items:center;color:#f5efe5bd;letter-spacing:.21em;font-size:10px}
.hero-v3-index span:first-child{font-weight:700}
.hero-v3-index span:last-child{color:#c8b489}
.hero-v3 .hero-title{max-width:850px;color:#f4eee1;font-size:clamp(82px,8.3vw,150px);line-height:.85;letter-spacing:-.047em;margin:33px -100px 29px 0;text-wrap:balance}
.hero-v3 .hero-title em{color:var(--atelier-gold);font-weight:300}
.hero-v3-divider{width:80px;height:1px;background:var(--atelier-gold);opacity:.75;margin:45px 0 27px}
.hero-v3 .hero-intro{max-width:530px;color:#e1dbcdcc;font-size:clamp(15px,1.18vw,18px);line-height:1.85}
.hero-v3 .hero-actions{margin-top:39px;gap:30px}
.hero-v3 .btn-solid{background:var(--atelier-gold);color:#161b16;border-color:var(--atelier-gold);font-size:12px;min-height:56px;padding:17px 25px;gap:48px}
.hero-v3 .btn-solid:hover{background:#eee1c9;border-color:#eee1c9}
.hero-v3 .btn-text{color:#eee2cf;min-height:55px}
.hero-v3 .btn-text:hover{color:var(--atelier-gold)}
.hero-v3-media{align-self:center;position:relative;margin:0 1vw 0 0;z-index:2;min-width:0;padding:6px 0 8px}
.hero-v3-photo-wrap{height:clamp(480px,50vw,660px);width:100%;position:relative;overflow:hidden;background:#29281e;border:1px solid rgba(225,201,158,.32);box-shadow:18px 25px 65px rgba(0,0,0,.23);clip-path:inset(0 0 0 0)}
.hero-v3-photo-wrap:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,rgba(9,13,9,.36),transparent 35%),linear-gradient(90deg,rgba(15,16,13,.10),transparent 20%)}
.hero-v3-photo-wrap img{width:100%;height:100%;object-fit:cover;object-position:54% 60%;filter:saturate(.82) contrast(1.06);transform:scale(1.005)}
.hero-v3-photo-caption{margin-top:21px;color:#e3d5bd;font-size:9px;letter-spacing:.18em;display:flex;align-items:center;gap:11px}
.hero-v3-caption-dot{width:5px;height:5px;border-radius:50%;background:#cbb58e}
.hero-v3-caption-sep{opacity:.5}
.hero-v3-seal{position:absolute;top:-35px;right:-24px;width:102px;height:102px;border:1px solid rgba(209,187,150,.75);border-radius:50%;background:#171d18;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--atelier-gold);transform:rotate(10deg)}
.hero-v3-seal>span{font:400 51px/.9 var(--atelier-serif)}
.hero-v3-seal small{font-size:7px;letter-spacing:.12em;margin-top:6px}
.hero-v3-bottom{position:relative;max-width:1750px;margin:-10px auto 0;min-height:75px;padding:16px var(--pad) 26px;display:flex;justify-content:space-between;align-items:center;gap:30px;border-top:1px solid rgba(231,215,190,.20);font-size:10px;letter-spacing:.2em;color:#dbd1bc;text-transform:uppercase}
.hero-v3-bottom a{display:flex;align-items:center;gap:25px;color:#eee4d0}
.hero-v3-bottom a:hover{color:var(--atelier-gold)}
.hero-v3-bottom a span{font-size:22px;font-weight:300}
.hero-v3-bottom>span:last-child{color:#bcad91}
@media (prefers-reduced-motion:no-preference) {
 .hero-v3 .hero-title{animation:atelier-title 1.1s var(--atelier-ease) both}
 .hero-v3-topline{animation:atelier-up .7s var(--atelier-ease) .08s both}
 .hero-v3-index{animation:atelier-up .72s var(--atelier-ease) .17s both}
 .hero-v3-divider,.hero-v3 .hero-intro,.hero-v3 .hero-actions{animation:atelier-up .8s var(--atelier-ease) .33s both}
 .hero-v3-photo-wrap{animation:atelier-photo 1.35s var(--atelier-ease) .15s both}
 .hero-v3-photo-wrap img{animation:atelier-photo-scale 1.9s var(--atelier-ease) .15s both}
 .hero-v3-photo-caption,.hero-v3-seal{animation:atelier-up .82s var(--atelier-ease) .57s both}
}
@keyframes atelier-title{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}
@keyframes atelier-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes atelier-photo{from{opacity:0;clip-path:inset(13% 0 13% 0)}to{opacity:1;clip-path:inset(0 0 0 0)}}
@keyframes atelier-photo-scale{from{transform:scale(1.13);filter:saturate(.5) contrast(.95)}to{transform:scale(1.005);filter:saturate(.82) contrast(1.06)}}
/* Make all interior routes immersive rather than beige/photo split */
.inner-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(590px,65vh,800px);background:#171c17;color:#f5efe3;overflow:hidden}
.inner-hero::after{position:absolute;inset:0;content:"";z-index:-1;background:linear-gradient(90deg,rgba(13,18,15,.92),rgba(13,18,15,.76) 52%,rgba(13,18,15,.24)),linear-gradient(0deg,rgba(10,14,11,.34),transparent)}
.inner-hero .inner-photo{position:absolute;inset:0;min-height:0;width:100%;height:100%;z-index:-2}
.inner-hero .inner-photo img{filter:brightness(.68) saturate(.65);object-position:center}
.inner-hero .inner-photo::after{display:none}
.inner-hero .inner-text{position:relative;align-self:auto;z-index:2;max-width:1120px;padding:100px var(--pad) 130px}
.inner-hero .inner-text .eyebrow{color:#ddc49e;letter-spacing:.2em}
.inner-hero .inner-text .display{max-width:1000px;color:#f2e9d8;font-size:clamp(83px,9vw,148px);line-height:.86;letter-spacing:-.046em;margin:42px 0}
.inner-hero .inner-text .display em{color:#d0ba96}
.inner-hero .inner-text>p{max-width:650px;color:#eee6d8;line-height:1.85;font-size:18px}
@media(prefers-reduced-motion:no-preference) {
 .inner-hero .inner-text .display{animation:atelier-title .9s var(--atelier-ease) both}
 .inner-hero .inner-text p{animation:atelier-up .8s var(--atelier-ease) .3s both}
}
/* Editorial sections */
.intro-v3{background:#ece7dc;padding:clamp(105px,12vw,200px) 0}
.intro-v3 .index-label{color:#827960}
.intro-v3 .display{font-size:clamp(75px,6.5vw,108px);max-width:930px;line-height:.91}
.intro-v3 .paragraph-large{max-width:660px;margin:38px 0 28px;font-size:19px}
.feature-v3{grid-template-columns:53% 47%;background:#1e261f}
.feature-v3 .feature-band-image img{filter:saturate(.65) brightness(.87)}
.feature-v3 .feature-band-text{padding:clamp(80px,9vw,155px)}
.feature-v3 .feature-band-text .display{font-size:clamp(68px,5.8vw,98px);line-height:.97}
.services-v3{background:#f4efe6}
.services-v3 .section-heading{margin-bottom:78px}
.services-v3 .section-heading .display{font-size:clamp(73px,6vw,100px);line-height:.95}
.services-v3 .service-tiles{gap:28px}
.services-v3 .service-tile{height:clamp(500px,45vw,740px)}
.services-v3 .service-tile:nth-child(2){margin-top:85px}
.services-v3 .service-tile .full-image{filter:saturate(.7) contrast(1.03)}
.services-v3 .tile-text h3{font-family:var(--atelier-serif);font-size:clamp(46px,4.6vw,76px);font-weight:400;line-height:.96}
.services-v3 .tile-shade{background:linear-gradient(0deg,rgba(8,12,9,.83),transparent 75%)}
.manifesto-v3{background:#e1d8ca}
.manifesto-v3 blockquote{font-size:clamp(65px,6vw,106px);max-width:1080px;line-height:.95;letter-spacing:-.045em}
.cta{background:#18221b}
.cta .display{font-size:clamp(72px,7vw,119px);line-height:.92}
.cta .btn-solid{background:var(--atelier-gold);color:#152016;border-color:var(--atelier-gold)}
.footer{background:#101813}
.feature-band-text .display,.editorial-text .display,.service-row h3,.point h3,.contact-form-container h2{font-family:var(--atelier-serif)}
.editorial-split,.feature-band{overflow:hidden}
.feature-band-image,.editorial-photo,.service-tile,.gallery-card{overflow:hidden}
.feature-band-image img,.editorial-photo img{transition:transform 1.2s var(--atelier-ease)}
@media(prefers-reduced-motion:no-preference) {
 .feature-band-image.is-revealed img,.editorial-photo.is-revealed img{transform:scale(1)}
 .feature-band-image:not(.is-revealed) img,.editorial-photo:not(.is-revealed) img{transform:scale(1.045)}
}
/* Cross-page transition: progressive enhancement; no router/framework dependency */
@view-transition{navigation:auto}
::view-transition-old(root){animation:atelier-page-out .23s ease-in both}
::view-transition-new(root){animation:atelier-page-in .42s var(--atelier-ease) both}
@keyframes atelier-page-out{to{opacity:0;transform:translateY(-7px)}}
@keyframes atelier-page-in{from{opacity:0;transform:translateY(11px)}to{opacity:1;transform:translateY(0)}}
body.page-leaving main{opacity:0;transform:translateY(-7px);transition:opacity .22s ease-in,transform .22s ease-in}
body main{transition:opacity .26s ease,transform .26s ease}
.site-progress{position:fixed;top:0;left:0;height:2px;width:100%;background:#cbb58e;transform-origin:0 50%;transform:scaleX(0);z-index:100;pointer-events:none}
/* Respect the visual hierarchy on laptop & mobile */
@media(max-width:1280px){
 .hero-v3-grid{grid-template-columns:minmax(0,1fr) minmax(315px,.82fr);gap:28px}
 .hero-v3 .hero-title{font-size:clamp(75px,8.4vw,125px);margin-right:-80px}
 .hero-v3-media{margin-right:0}
 .hero-v3-photo-wrap{height:590px}
 .inner-hero .inner-text .display{font-size:clamp(70px,9vw,120px)}
}
@media(max-width:900px){
 .hero-v3-grid{grid-template-columns:minmax(0,1fr) minmax(240px,.79fr);gap:17px;padding-top:95px;padding-bottom:80px}
 .hero-v3 .hero-title{font-size:clamp(67px,9.1vw,97px)}
 .hero-v3-photo-wrap{height:560px}
 .hero-v3-seal{right:-12px;width:80px;height:80px}
 .hero-v3-seal>span{font-size:39px}
 .hero-v3-bottom>span:last-child{display:none}
 .inner-hero .inner-text .display{font-size:clamp(67px,9vw,105px)}
}
@media(max-width:760px){
 .header{min-height:76px}
 .header-inner{height:76px}
 .hero.hero-v3{min-height:0}
 .hero-v3-grid{display:flex;flex-direction:column;gap:0;align-items:stretch;min-height:0;padding:56px var(--pad) 25px}
 .hero-v3-copy{width:100%}
 .hero-v3-topline{font-size:9px;letter-spacing:.16em;gap:13px;margin-bottom:29px}
 .hero-v3-line{width:32px}
 .hero-v3-index{font-size:9px}
 .hero-v3 .hero-title{font-size:clamp(73px,13.7vw,100px);line-height:.85;margin:29px 0 27px;max-width:100%}
 .hero-v3-divider{margin:28px 0 19px}
 .hero-v3 .hero-intro{font-size:16px;line-height:1.72;max-width:550px}
 .hero-v3 .hero-actions{flex-direction:row;align-items:center;gap:25px;margin-top:26px}
 .hero-v3 .btn-solid{min-height:51px}
 .hero-v3-media{width:min(100%,540px);align-self:center;margin:60px 0 30px;padding:0}
 .hero-v3-photo-wrap{height:clamp(380px,95vw,550px)}
 .hero-v3-seal{top:-31px;right:-8px}
 .hero-v3-bottom{margin:0 20px;min-height:62px;padding:22px 0 32px}
 .inner-hero{min-height:600px;display:flex}
 .inner-hero .inner-text{padding:100px var(--pad)}
 .inner-hero .inner-text .display{font-size:clamp(68px,12vw,100px);margin:30px 0}
 .inner-hero .inner-text>p{font-size:16px}
 .intro-v3 .display{font-size:clamp(58px,10vw,79px)}
 .feature-v3 .feature-band-text .display{font-size:69px}
 .services-v3 .section-heading .display{font-size:clamp(57px,10vw,80px)}
 .services-v3 .service-tile:nth-child(2){margin-top:0}
 .services-v3 .service-tiles{gap:22px}
 .services-v3 .tile-text h3{font-size:58px}
 .manifesto-v3 blockquote{font-size:clamp(55px,9vw,84px)}
 .cta .display{font-size:clamp(64px,10vw,87px)}
}
@media(max-width:480px){
 .hero-v3-grid{padding-top:41px}
 .hero-v3 .hero-title{font-size:clamp(67px,15vw,79px);line-height:.85}
 .hero-v3-topline span:last-child{max-width:255px;line-height:1.55}
 .hero-v3 .hero-actions{flex-wrap:wrap;gap:10px 20px}
 .hero-v3 .btn-solid{padding:13px 17px;gap:18px}
 .hero-v3 .btn-text{min-height:46px}
 .hero-v3-photo-wrap{height:415px}
 .hero-v3-media{margin-top:54px}
 .hero-v3-seal{width:72px;height:72px;right:-6px;top:-28px}
 .hero-v3-seal>span{font-size:35px}
 .hero-v3-seal small{font-size:6px}
 .hero-v3-photo-caption{font-size:8px;letter-spacing:.08em}
 .hero-v3-bottom{font-size:8px;letter-spacing:.11em;gap:15px}
 .hero-v3-bottom a{gap:8px}
 .inner-hero .inner-text .display{font-size:clamp(59px,13vw,78px)}
 .intro-v3 .display{font-size:clamp(52px,12vw,70px)}
 .feature-v3 .feature-band-text .display{font-size:57px}
 .services-v3 .section-heading .display{font-size:clamp(50px,12vw,70px)}
 .services-v3 .tile-text h3{font-size:49px}
 .manifesto-v3 blockquote{font-size:50px}
 .cta .display{font-size:clamp(58px,12vw,79px)}
}
@media(prefers-reduced-motion:reduce){
 ::view-transition-old(root),::view-transition-new(root){animation-duration:.01ms!important}
 body.page-leaving main{opacity:1;transform:none}
 .hero-v3-photo-wrap,.hero-v3-photo-wrap img{animation:none!important}
 .hero-v3 .hero-title,.hero-v3-topline,.hero-v3-index,.hero-v3 .hero-intro,.hero-v3 .hero-actions,.hero-v3-divider,.hero-v3-photo-caption,.hero-v3-seal{animation:none!important;opacity:1!important;transform:none!important}
 .feature-band-image img,.editorial-photo img{transform:none!important}
}