:root{--cream:#f7f2ec;--ink:#2d2722;--rose:#a56c62;--muted:#6b625b}
*{box-sizing:border-box}body{margin:0;font-family:"Trebuchet MS",sans-serif;background:var(--cream);color:var(--ink);line-height:1.6}
.container{width:min(1140px,92%);margin:auto}a{text-decoration:none;color:inherit}
header{position:sticky;top:0;background:rgba(247,242,236,.92);backdrop-filter:blur(6px);border-bottom:1px solid #e7dbcf;z-index:9}.nav{display:flex;justify-content:space-between;align-items:center;padding:.9rem 0}
.logo{font-weight:800;letter-spacing:1px}nav{display:flex;gap:1rem}nav a{color:#5c534c;font-weight:600}nav a.active,nav a:hover{color:var(--rose)}.toggle{display:none;border:0;background:none;font-size:1.3rem}
.hero{padding:5rem 0;background:linear-gradient(rgba(248,239,229,.78),rgba(241,228,217,.8)),url('../images/hero.jpg') center/cover no-repeat}h1{font-size:clamp(2.1rem,5vw,3.5rem);line-height:1.12;margin:.3rem 0}.lead{max-width:620px;color:#554b44}
.btn{display:inline-block;background:var(--ink);color:#fff;padding:.78rem 1.05rem;border-radius:999px;font-weight:700;margin-top:1rem;transition:transform .25s ease,box-shadow .25s ease}
.section{padding:3rem 0}.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:.8rem}.tile{border-radius:12px;min-height:170px;background-size:cover;background-position:center;position:relative;overflow:hidden}.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 45%,rgba(0,0,0,.28));}
.t1{grid-column:span 7;background-image:url('https://images.unsplash.com/photo-1519741497674-611481863552?auto=format&fit=crop&w=1000&q=80')}
.t2{grid-column:span 5;background-image:url('https://images.unsplash.com/photo-1522673607200-164d1b6ce486?auto=format&fit=crop&w=1000&q=80')}
.t3{grid-column:span 4;background-image:url('https://images.unsplash.com/photo-1470167290877-7d5d3446de4c?auto=format&fit=crop&w=1000&q=80')}
.t4{grid-column:span 4;background-image:url('https://images.unsplash.com/photo-1606800052052-a08af7148866?auto=format&fit=crop&w=1000&q=80')}
.t5{grid-column:span 4;background-image:url('https://images.unsplash.com/photo-1507504031003-b417219a0fde?auto=format&fit=crop&w=1000&q=80')}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.card{background:#fff;border:1px solid #eadfd2;border-radius:12px;padding:1rem;transition:transform .25s ease,box-shadow .25s ease}
.split{display:grid;grid-template-columns:1.2fr 1fr;gap:1rem}.form input,.form textarea,.form select{width:100%;padding:.7rem;border:1px solid #dccfc2;border-radius:8px;margin:.25rem 0 .7rem}
footer{border-top:1px solid #e2d6c9;padding:1.6rem 0;color:#695f57}
.reel-strip{padding-top:.6rem}.reel-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:.8rem}.reel-grid img{width:100%;display:block;border-radius:12px;border:1px solid #e5d8cc}.reel-photo{min-height:280px;object-fit:cover;box-shadow:0 14px 30px rgba(77,58,44,.2)}.reel-gif{min-height:280px;object-fit:cover}
.card{position:relative;overflow:hidden}.card::after{content:"";position:absolute;top:-120%;left:-35%;width:55%;height:240%;background:linear-gradient(110deg,transparent,rgba(165,108,98,.18),transparent);transform:translateX(-20%) rotate(18deg);opacity:0;transition:transform .7s ease,opacity .7s ease;pointer-events:none}.card:hover::after{opacity:1;transform:translateX(220%) rotate(18deg)}
@keyframes fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.hero h1,.hero .lead,.hero .btn{animation:fadeUp .8s ease both}.hero .lead{animation-delay:.1s}.hero .btn{animation-delay:.2s}
@keyframes frameIn{from{opacity:0;transform:scale(1.035) translateY(16px);filter:blur(5px)}to{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}}
.reveal-frame{opacity:0;transform:scale(1.03) translateY(16px);filter:blur(4px);transition:opacity .85s ease,transform .85s ease,filter .85s ease;will-change:opacity,transform,filter}.reveal-frame.is-visible{opacity:1;transform:scale(1) translateY(0);filter:blur(0)}.reveal-delay-1{transition-delay:.12s}.reveal-delay-2{transition-delay:.24s}.reveal-delay-3{transition-delay:.36s}
.reel-gif{animation:floatY 6s ease-in-out infinite}.tile{transition:transform .55s ease,filter .55s ease}.tile:hover{transform:translateY(-4px) scale(1.02);filter:saturate(1.05)}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}.reveal-frame{opacity:1;transform:none;filter:none}}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(63,48,39,.24)}.card:hover{transform:translateY(-4px);box-shadow:0 14px 26px rgba(77,58,44,.16)}
@media(max-width:780px){.toggle{display:block}nav{display:none;position:absolute;right:4%;top:58px;background:#fff;border:1px solid #e4d7ca;padding:.7rem;border-radius:10px;flex-direction:column}nav.open{display:flex}.gallery{grid-template-columns:1fr}.tile{grid-column:span 1}.split{grid-template-columns:1fr}}

/* Premium differentiation: editorial portfolio flow + film-like drift */
.hero{position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:-12%;background:radial-gradient(circle at 72% 18%,rgba(255,255,255,.26),transparent 40%),radial-gradient(circle at 18% 75%,rgba(165,108,98,.15),transparent 44%);mix-blend-mode:screen;pointer-events:none;animation:reelDrift 14s ease-in-out infinite alternate}
.hero > .container{position:relative;z-index:1}
.section:nth-of-type(odd){padding-block:3.6rem}.section:nth-of-type(even){padding-block:2.6rem}
.card.is-hovered{transform:translateY(-6px) rotate(.25deg);box-shadow:0 18px 32px rgba(77,58,44,.18)}
.tile.is-hovered{transform:translateY(-6px) scale(1.025);filter:saturate(1.08) contrast(1.03)}
.reel-grid img.parallax{transition:transform .28s ease}
@keyframes reelDrift{0%{transform:translate3d(-1.2%,-.5%,0)}100%{transform:translate3d(1.2%,1%,0)}}
@media (prefers-reduced-motion: reduce){.hero::after{display:none}.card.is-hovered,.tile.is-hovered{transform:none;box-shadow:none;filter:none}.reel-grid img.parallax{transition:none}}

/* Feature add-ons: rotating headline + highlighted story card */
.hero h1{transition:opacity .32s ease,transform .32s ease}
.hero h1.is-swapping{opacity:.35;transform:translateY(-2px)}
.cards .card.story-focus{border-color:#cfad9f;box-shadow:0 0 0 1px rgba(165,108,98,.28),0 16px 28px rgba(77,58,44,.18);transform:translateY(-3px)}
@media (prefers-reduced-motion: reduce){.hero h1{transition:none}}