:root{
  --color-bg:#fff; --color-surface:#F5F7FB; --color-surface-2:#EEF2F9;
  --color-text:#0B1220; --color-text-muted:#4A5568;
  --primary-700:#0F2E72; --primary-400:#2C63D6;
  --font-display:"Sora",ui-sans-serif; --font-sans:"Plus Jakarta Sans",ui-sans-serif;
  --fs-md:16px; --fs-h1:clamp(2rem,3vw,3.2rem);
  --container-max:1200px; --gutter:1.25rem;
  --radius-lg:20px; --radius-md:14px;
  --shadow-sm:0 2px 10px rgba(10,22,52,.06); --shadow-md:0 8px 30px rgba(10,22,52,.10);
  --section-y:clamp(3rem,4vw,5rem); --tile-gap:clamp(.8rem,1.2vw,1.4rem); --tile-pad:clamp(1rem,1.6vw,1.8rem);
  --easing:cubic-bezier(.2,.7,.2,1); --dur-base:280ms; --reveal-shift:18px;
}
*{box-sizing:border-box} body{margin:0;color:var(--color-text);font-family:var(--font-sans);background:#fff}
a{color:var(--primary-700);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:var(--container-max);margin:0 auto;padding:0 var(--gutter)}
.section{padding:var(--section-y) 0}
.page-header{padding:2rem 0 1rem}
.site-header{position:sticky;top:0;background:#fff;border-bottom:1px solid #e5e8ee;z-index:50}
.main-nav .menu.root{display:flex;gap:1rem;list-style:none;margin:0;padding:.75rem 0}
.main-nav .has-sub{position:relative}
.main-nav .has-sub:hover .submenu{display:block}
.submenu{position:absolute;display:none;left:0;top:100%;background:#fff;border:1px solid #e5e8ee;border-radius:10px;box-shadow:var(--shadow-md);padding:.5rem;list-style:none;min-width:240px}
.submenu a{display:block;padding:.5rem .6rem;border-radius:8px} .submenu a:hover{background:var(--color-surface);text-decoration:none}
.nav-toggle{display:none}
@media (max-width:900px){.main-nav .menu.root{display:none}.nav-toggle{display:block;border:1px solid #e5e8ee;padding:.5rem .75rem;border-radius:8px;background:#fff} .mobile-menu{background:#fff;border-top:1px solid #e5e8ee;padding:1rem}}
.site-footer{background:var(--color-surface);padding:2rem 0;border-top:1px solid #e5e8ee}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:1rem} @media (max-width:768px){.footer-grid{grid-template-columns:1fr}}

.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.1rem;border-radius:12px;border:1px solid transparent;font-weight:600;cursor:pointer}
.btn-primary{background:var(--primary-700);color:#fff}
.btn-outline{background:transparent;border-color:var(--primary-700);color:var(--primary-700)}

.card{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--tile-pad);box-shadow:var(--shadow-sm)}
.grid{display:grid;gap:var(--tile-gap)} .grid-2{grid-template-columns:repeat(2,minmax(0,1fr))} @media(max-width:768px){.grid-2{grid-template-columns:1fr}}

.media{display:grid;gap:var(--tile-gap);align-items:center;grid-template-columns:1fr 1fr}
.media .media-visual{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);background:var(--color-surface-2)}
.media .media-body{padding:.25rem}
@media (max-width:900px){.media{grid-template-columns:1fr}}
.img-16x9{aspect-ratio:16/9;object-fit:cover}
.reveal-up{opacity:0;transform:translateY(var(--reveal-shift));transition:opacity var(--dur-base) var(--easing), transform var(--dur-base) var(--easing)}
.reveal-up.is-visible{opacity:1;transform:translateY(0)}
/* basic extras used by pages */
.masonry{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--tile-gap)} .tile{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--tile-pad);box-shadow:var(--shadow-sm)} .tile.image{padding:0;overflow:hidden}
@media (max-width:1024px){.masonry{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:768px){.masonry{grid-template-columns:1fr}}
/* v6.1 helpers for /branze */
.hero-slim{position:relative; padding: calc(var(--section-y) * 1.4) 0; overflow:hidden;}
.hero-slim .hero-bg{position:absolute; inset:0; overflow:hidden;}
.hero-slim .hero-bg img{width:100%; height:100%; object-fit:cover; filter:saturate(.9); transform:scale(1.02)}
.hero-slim .hero-overlay{position:absolute; inset:0; background: linear-gradient(180deg, rgba(7,14,34,.00), rgba(7,14,34,.30));}
.hero-slim .hero-inner{position:relative; text-align:center; color:#fff;}
.hero-slim h1{font-size:var(--fs-h1); text-shadow:0 2px 22px rgba(0,0,0,.28)}
.btn-outline-dark{background:transparent; color:#0B1220; border:1.5px solid #0B1220}
.btn-outline-dark:hover{background:#F5F7FB; text-decoration:none; box-shadow:var(--shadow-sm)}
.hover-zoom{transition: transform var(--dur-base) var(--easing); will-change: transform}
.hover-zoom:hover{transform: scale(1.03)}
.media .media-body{position:relative}
.media .corner-cta{position:absolute; bottom: var(--tile-pad)}
.media.right-cta .corner-cta{ right: var(--tile-pad) }
.media.left-cta .corner-cta{ left: var(--tile-pad) }
@media(max-width:900px){ .media .corner-cta{position:static; margin-top:.75rem; width:100%; display:inline-flex; justify-content:flex-start;} }
.outset-right .media-visual{ margin-right:-5vw } .outset-left .media-visual{ margin-left:-5vw }
@media (max-width:1200px){ .outset-right .media-visual, .outset-left .media-visual{ margin:0 } }
.media .media-body p{word-wrap:break-word; overflow-wrap:anywhere}

.hero-slim .hero-label{display:inline-block; background: rgba(255,255,255,.28); backdrop-filter: blur(3px); padding:.35em .8em; border-radius: 14px;}
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){
  .hero-slim .hero-label{background: rgba(255,255,255,.34);} /* fallback */
}

.max-720{max-width:720px}

/* === /branze (v7) — hero-cover, bleed, hover, CTA corner === */
.hero-cover { position: relative; padding: calc(var(--section-y)*1.4) 0; color:#fff; }
.hero-cover .hero-bg { position:absolute; inset:0; overflow:hidden; }
.hero-cover .hero-bg img { width:100%; height:100%; object-fit:cover; filter:saturate(.9); }
.hero-cover .title-wrap { position:relative; display:flex; justify-content:center; }
.hero-cover h1 {
  display:inline-block; padding:.6rem 1rem; border-radius:16px;
  background:rgba(15, 18, 32, .32); backdrop-filter:saturate(140%) blur(6px);
  text-shadow:0 1px 14px rgba(0,0,0,.35); color:#fff;
}

/* Bleed/outset (desktop only) */
@media (min-width:1024px){
  .outset-left  .media-visual{ margin-left: -5vw; }
  .outset-right .media-visual{ margin-right:-5vw; }
}

/* Hover zoom */
.hover-zoom { transition: transform var(--dur-base) var(--easing); will-change: transform; }
.hover-zoom:hover { transform: scale(1.03); }

/* Dark outline button */
.btn-outline-dark{
  background:transparent; color:var(--color-text);
  border:1.5px solid var(--color-text); border-radius:12px; padding:.8rem 1.2rem; display:inline-flex;
  align-items:center; justify-content:center; gap:.5rem; font-weight:600;
}
.btn-outline-dark:hover{ background:var(--color-surface-2); text-decoration:none; }

/* Corner CTA positioning */
.media .media-body{ position:relative; }
.media .corner-cta{ position:absolute; bottom:var(--tile-pad); }
.corner-cta.right{ right:var(--tile-pad); }
.corner-cta.left{  left: var(--tile-pad); }

@media (max-width:768px){
  .media .corner-cta{ position:static; display:block; width:100%; margin-top:1rem; text-align:center; }
}

/* Utility for clickable image wrapper */
a.stretched{ display:block; }