:root{
  --text:#202534; --muted:#5e6977; --line:#e9edf2; --soft:#f6f8fb;
  --brand:#d4af37; --teal:#0aa3ad; --teal-d:#098f98;
  --max:1240px; --shadow:0 10px 26px rgba(17,22,30,.08); --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:var(--text);font:15px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Arial}
html{scroll-behavior:smooth}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:var(--max);margin:0 auto;padding:0 16px}
.btn{display:inline-block;background:var(--brand);color:#111;border:1px solid #c6a23a;padding:10px 16px;border-radius:999px;font-weight:700;transition:transform .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn--ghost{background:#fff;border-color:var(--line)}
.center{text-align:center}
.links{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.bullets{margin:.4em 0 0;padding-left:18px}
.small{font-size:13px}

/* Utility bar */
.util{position:relative;border-bottom:1px solid var(--line);background:#fff;z-index:45}
.util__row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0;min-height:30px;flex-wrap:wrap}
.util__left,.util__right{display:flex;gap:14px;flex-wrap:wrap}
.util__link{color:#6b7484;font-size:13px;line-height:1.5}
.util__link:hover{color:#2b3240}

/* Header (sticky + shrink on scroll) */
.header{position:sticky;top:var(--utilH,34px);background:#fff;border-bottom:1px solid var(--line);z-index:50;transition:box-shadow .2s,height .2s,transform .2s}
.header.scrolled{box-shadow:0 10px 24px rgba(0,0,0,.06);transform:translateY(-2px)}
.header__row{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;height:70px}
.brand{display:flex;align-items:center;gap:12px}
.brand__logo{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--brand),#ffefb2 55%,var(--brand));box-shadow:inset 0 0 0 2px rgba(0,0,0,.06)}
.brand__name{letter-spacing:.2px}
.brand__tag{color:#7b8593;font-size:12px}
.nav{display:flex;gap:22px;align-items:center;justify-content:flex-end}
.nav a{color:#3c4555}
.nav a:hover{color:#151a24}
.menu{display:none;border:1px solid var(--line);background:#fff;padding:8px 12px;border-radius:10px}
.mobile{display:none;border-top:1px solid var(--line)}
.mobile a{display:block;padding:12px 16px;border-bottom:1px solid var(--line);color:#3c4555}
@media (max-width:980px){.nav{display:none}.menu{display:inline-block}}

/* Hero */
.hero{background:#fff;border-bottom:1px solid var(--line)}
.hero__row{display:grid;grid-template-columns:1.2fr .8fr;gap:28px;align-items:center;padding:26px 0}
.eyebrow{color:#8a95a6;text-transform:uppercase;letter-spacing:.12em;font-size:12px;margin:0 0 2px}
.hero h1{margin:.1em 0 .2em;font-size:clamp(26px,3vw,40px);color:#161b26}
.lede{color:#546173}
.ticklist{margin:10px 0 14px;padding-left:18px;color:#364154}
.hero__art{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.hero__art img{aspect-ratio:5/3;object-fit:cover;transform:translateY(var(--par,0));will-change:transform}
@media (max-width:980px){.hero__row{grid-template-columns:1fr}}

/* Sections */
.section{padding:20px 0}
.section--tight{padding-top:10px}
.section__title{font-size:18px;letter-spacing:.08em;text-transform:uppercase;color:#6b7484;margin:6px 0 12px}
.section__title span{background:#fff;padding:0 6px}

/* Grid (cards) */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;perspective:1000px}
@media (max-width:1180px){.grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}

.card{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
  will-change: transform;
}
/* Default hover lift (disabled when tilt is active) */
.card:not([data-tilt="on"]):hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(0,0,0,.12)}
.card__thumb{position:relative;overflow:hidden}
.card__thumb img{width:100%;aspect-ratio:3/4;object-fit:cover;background:#f0f3f7;transition:filter .35s ease, transform .5s ease;will-change:filter,transform}
.badge{position:absolute;top:8px;left:8px;background:#111;color:#fff;font-size:12px;border-radius:999px;padding:5px 9px;transition:transform .25s ease, opacity .25s ease}
.badge--area{left:auto;right:8px;background:rgba(255,255,255,.92);color:#111}
.card__body{padding:8px 10px}
.card__row{display:flex;justify-content:space-between;gap:8px;align-items:center}
.card__name{font-weight:700}
.card__meta{color:#6a7483;font-size:13px}
.card__tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.chip{display:inline-block;border:1px solid var(--line);background:#f7fafc;color:#3f4756;border-radius:999px;padding:5px 9px;font-size:12px}
.price{color:#141925;font-weight:800}

/* Hover effects: zoom + black & white */
.card:hover .card__thumb img{filter:grayscale(100%) contrast(1.05);transform:scale(1.05)}
.card:hover .badge{transform:translateY(-2px);opacity:1}

/* Optional: enable 3D compose when tilt is on (JS sets data-tilt="on") */
.card[data-tilt="on"]{transform-style:preserve-3d}

/* Agency block */
.agency{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.agency__row{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;padding:24px 0}
.agency__art{border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow)}
.agency__art img{aspect-ratio:3/4;object-fit:cover}
.agency__copy h2{margin:.2em 0 .4em}
@media (max-width:980px){.agency__row{grid-template-columns:1fr}}

/* USP band */
.usp{background:var(--teal);color:#fff}
.usp__row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:18px 0}
.usp__item h4{margin:.2em 0 .2em}
.usp__item p{margin:0}
@media (max-width:980px){.usp__row{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.usp__row{grid-template-columns:1fr}}

/* Content slices */
.content-slice{border-top:1px solid var(--line);background:#fff}
.content-slice .container{padding:18px 0}
.content-slice h2{margin:.2em 0 .4em}
.content-slice p{margin:.6em 0;color:#2a3342}
.content-cta{margin-top:8px}

/* Long text cards */
.longtext{background:var(--soft);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.longtext__wrap{padding:20px 0}
.longtext__wrap h2{margin:.2em 0 .6em}
.longtext__grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}
.longtext__col{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;box-shadow:var(--shadow)}
.longtext .muted{color:var(--muted)}
@media (max-width:980px){.longtext__grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.longtext__grid{grid-template-columns:1fr}}

/* Journal */
.journal{background:#fff}
.journal__title{text-align:center;margin:18px 0 12px}
.journal__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.post{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--shadow);display:grid;gap:10px;padding:10px;transition:transform .18s ease, box-shadow .18s ease}
.post:hover{transform:translateY(-3px);box-shadow:0 16px 32px rgba(0,0,0,.12)}
.post img{aspect-ratio:4/3;object-fit:cover;border-radius:10px;transition:filter .35s ease, transform .5s ease}
.post:hover img{filter:grayscale(100%) contrast(1.05);transform:scale(1.03)}
.post h3{font-size:15px;margin:0}
@media (max-width:1180px){.journal__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:820px){.journal__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.journal__grid{grid-template-columns:1fr}}

/* Footer */
.footer{background:#fff;border-top:1px solid var(--line)}
.footer__top{padding:18px 0}
.footer__cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:18px}
.footer .brand--light .brand__logo{box-shadow:inset 0 0 0 2px rgba(0,0,0,.06)}
.footer__bottom{background:#f7fafc;border-top:1px solid var(--line)}
.footer__legal{padding:14px 0;text-align:center;color:#6a7483;font-size:13px}
@media (max-width:980px){.footer__cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.footer__cols{grid-template-columns:1fr}}

/* Dark two-up content */
.duo{background:#3a3e43;color:#e9edf2;padding:42px 0}
.duo__accent{color:#d4af37}
.duo__row{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:center;margin:26px 0}
.duo__copy h2{margin:.2em 0 .5em;font-size:clamp(22px,2.8vw,34px);line-height:1.25;color:#fff}
.duo__copy p{margin:.6em 0;color:#cfd5db}
.duo__art{margin:0;border-radius:12px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.06)}
.duo__art img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.duo--flip{grid-template-columns:.9fr 1.1fr}
@media (max-width:980px){
  .duo__row,.duo--flip{grid-template-columns:1fr}
  .duo__art{order:2}
  .duo--flip .duo__art{order:1}
}

/* Reveal-on-scroll (single definition) */
.reveal{
  opacity:0;
  transform:translateY(18px) scale(.98);
  transition:opacity .6s ease, transform .6s ease;
  transition-delay:var(--delay,0ms);
}
.reveal.in{opacity:1;transform:none}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none}
  .header,.card,.post,.btn,.card__thumb img,.post img{transition:none}
}