:root{
--charcoal-950:#051411;
--charcoal-900:#0B1E19;
--charcoal-800:#143029;
--charcoal-line: rgba(255,250,240,0.09);
--cream:#FBF9F4;
--stone:#F3EDE3;
--stone-2:#E8E0D2;
--ink:#0B1512;
--ink-soft:#3A4A43;
--brass:#C9920E;
--brass-text:#7A5208;
--brass-bright:#E8B83A;
--accent-mint:#2A9B7A;
--line-light: rgba(11,21,18,0.09);
--glass-bg: rgba(255,255,255,0.07);
--glass-border: rgba(255,255,255,0.14);
--glass-blur: 24px;
--radius-sm:12px;
--radius-md:18px;
--radius-lg:26px;
--radius-xl:34px;
--maxw:1220px;
--safe-t: env(safe-area-inset-top,0px);
--safe-b: env(safe-area-inset-bottom,0px);
--font-display: 'Bricolage Grotesque', system-ui, -apple-system, "Segoe UI", sans-serif;
--font-body: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
--shadow-sm: 0 4px 14px rgba(5,20,17,0.07);
--shadow-md: 0 12px 36px rgba(5,20,17,0.11);
--shadow-lg: 0 24px 56px rgba(5,20,17,0.16);
--shadow-glow: 0 14px 44px rgba(201,146,14,0.35);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth; scroll-padding-top:100px; overflow-x:hidden;}
body{
margin:0; background:var(--cream); color:var(--ink);
font-family:var(--font-body);
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
padding-top:var(--safe-t); padding-bottom:calc(72px + var(--safe-b));
line-height:1.55;
}
h1,h2,h3,h4,
.hero-h, .hero-full h1, .section-h, .div-lead h3, .div-card h3,
.founder-text h3, .insight-card h4, .feature-card h4, .vcard-body h4,
.process-item h4, .why-item h4, .contact-card h4, .cta-band h2,
.case-card h3, .brand, .bento-card h3{
font-family: var(--font-display);
letter-spacing:-0.025em;
}
@media (min-width:768px){ body{padding-bottom:var(--safe-b);} }
img{max-width:100%; display:block; height:auto;}
a{color:inherit;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 20px;}
@media (min-width:768px){ .wrap{padding:0 32px;} }
@media (min-width:1100px){ .wrap{padding:0 48px;} }
.wrap-narrow{max-width:780px; margin:0 auto; padding:0 20px;}
@media (min-width:768px){ .wrap-narrow{padding:0 32px;} }
.grain{position:relative;}
.grain::before{
content:''; position:absolute; inset:0; pointer-events:none; opacity:0.035; mix-blend-mode:overlay; z-index:0;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain > *{position:relative; z-index:1;}
.glass{
background:var(--glass-bg);
backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(1.5);
border:1px solid var(--glass-border);
box-shadow:0 8px 32px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.08);
}
.glass-strong{
background:rgba(255,255,255,0.12);
backdrop-filter:blur(32px) saturate(1.6);
-webkit-backdrop-filter:blur(32px) saturate(1.6);
border:1px solid rgba(255,255,255,0.18);
box-shadow:0 12px 40px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.12);
}
.glass-light{
background:rgba(255,255,255,0.55);
backdrop-filter:blur(20px) saturate(1.3);
-webkit-backdrop-filter:blur(20px) saturate(1.3);
border:1px solid rgba(255,255,255,0.5);
box-shadow:var(--shadow-sm), inset 0 1px 0 rgba(255,255,255,0.6);
}
.glass-dark{
background:rgba(7,15,13,0.55);
backdrop-filter:blur(28px) saturate(1.4);
-webkit-backdrop-filter:blur(28px) saturate(1.4);
border:1px solid rgba(250,246,236,0.1);
box-shadow:0 16px 48px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}
header.site{
position:sticky; top:0; z-index:100;
background:rgba(7,15,13,0.72);
backdrop-filter:blur(28px) saturate(1.6);
-webkit-backdrop-filter:blur(28px) saturate(1.6);
border-bottom:1px solid var(--charcoal-line);
padding-top:var(--safe-t);
transition:box-shadow .35s var(--ease-out), background .35s ease;
}
header.site.scrolled{
background:rgba(7,15,13,0.88);
box-shadow:0 12px 40px rgba(0,0,0,0.35);
}
.nav-row{
display:flex; align-items:center; justify-content:space-between; gap:16px;
height:72px; max-width:var(--maxw); margin:0 auto; padding:0 20px;
transition:height .3s var(--ease-out);
}
@media (min-width:768px){ .nav-row{padding:0 32px; height:82px;} }
@media (min-width:1100px){ .nav-row{padding:0 48px;} }
header.site.scrolled .nav-row{height:64px;}


/* Brand logo — responsive across breakpoints */
.brand{
  display:flex;
  align-items:center;
  text-decoration:none;
  flex-shrink:0;
  line-height:0;
  margin-right:auto;
}
.brand-logo{
  display:block;
  width:auto;
  height:36px;
  max-width:min(130px, 48vw);
  object-fit:contain;
  object-position:left center;
  transition: height .25s ease, max-width .25s ease;
}
@media (min-width:480px){
  .brand-logo{ height:40px; max-width:150px; }
}
@media (min-width:768px){
  .brand-logo{ height:46px; max-width:170px; }
}
@media (min-width:1100px){
  .brand-logo{ height:50px; max-width:190px; }
}
@media (min-width:1280px){
  .brand-logo{ height:54px; max-width:210px; }
}
/* Compact when header scrolls */
header.site.scrolled .brand-logo{
  height:32px;
  max-width:120px;
}
@media (min-width:768px){
  header.site.scrolled .brand-logo{ height:38px; max-width:150px; }
}
@media (min-width:1100px){
  header.site.scrolled .brand-logo{ height:40px; max-width:160px; }
}

nav.primary{display:none; gap:2px; align-items:center; flex-wrap:nowrap;}
nav.primary a{
color:rgba(250,246,236,0.7); text-decoration:none; font-size:0.84rem; font-weight:500;
padding:9px 13px; position:relative; white-space:nowrap; border-radius:10px;
transition:color .2s ease, background .2s ease;
}
nav.primary a:hover, nav.primary a[aria-current="page"]{
color:var(--cream); background:rgba(250,246,236,0.08);
}
@media (min-width:1100px){ nav.primary{display:flex;} }
@media (min-width:1100px) and (max-width:1280px){
nav.primary a, .nav-drop-toggle{font-size:0.8rem; padding:8px 10px;}
}
.nav-drop{position:relative;}
.nav-drop-toggle{
background:none; border:none; color:rgba(250,246,236,0.7); font:inherit; font-size:0.84rem; font-weight:500;
cursor:pointer; display:flex; align-items:center; gap:5px; padding:9px 13px;
transition:color .2s, background .2s; white-space:nowrap; border-radius:10px;
}
.nav-drop-toggle .caret{font-size:0.55rem; color:var(--brass-bright); transition:transform .25s var(--ease-out);}
.nav-drop-toggle:hover, .nav-drop.open .nav-drop-toggle, .nav-drop-toggle[data-active="true"]{
color:var(--cream); background:rgba(250,246,236,0.08);
}
.nav-drop:hover .nav-drop-toggle .caret, .nav-drop.open .nav-drop-toggle .caret{transform:rotate(180deg);}
.nav-drop-menu{
position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(-8px) scale(0.96);
background:rgba(14,31,26,0.92);
backdrop-filter:blur(24px) saturate(1.5);
-webkit-backdrop-filter:blur(24px) saturate(1.5);
border:1px solid var(--charcoal-line); border-radius:var(--radius-md);
min-width:248px; padding:10px; opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .25s var(--ease-out), transform .25s var(--ease-out);
box-shadow:0 28px 56px rgba(0,0,0,0.45); z-index:110;
}
.nav-drop:hover .nav-drop-menu, .nav-drop.open .nav-drop-menu{
opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0) scale(1);
}
.nav-drop-menu a{
display:block; padding:12px 14px; border-radius:12px; font-size:0.88rem; color:rgba(250,246,236,0.75);
text-decoration:none; white-space:nowrap; transition:background .15s, color .15s, transform .15s;
}
.nav-drop-menu a:hover, .nav-drop-menu a[aria-current="page"]{
background:rgba(250,246,236,0.08); color:var(--cream); transform:translateX(4px);
}
.nav-cta{display:flex; gap:10px; align-items:center; flex-shrink:0;}
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
font-family:inherit; font-weight:600; font-size:0.88rem; text-decoration:none;
padding:12px 24px; min-height:48px; border-radius:999px; border:1.5px solid transparent;
cursor:pointer; white-space:nowrap;
transition:transform .25s var(--ease-out), background .2s, border-color .2s, color .2s, box-shadow .3s, filter .2s;
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(0.98);}
.btn-brass{
background:linear-gradient(135deg, #D49520 0%, var(--brass-bright) 55%, #F5D078 100%);
color:#070F0D; border-color:transparent;
box-shadow:0 6px 20px rgba(224,165,38,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-brass:hover{
box-shadow:var(--shadow-glow), inset 0 1px 0 rgba(255,255,255,0.3);
filter:brightness(1.06);
}
.btn-ghost-dark{
border-color:rgba(250,246,236,0.2); color:var(--cream);
background:rgba(250,246,236,0.04);
backdrop-filter:blur(8px);
}
.btn-ghost-dark:hover{
border-color:rgba(250,246,236,0.45); background:rgba(250,246,236,0.1);
box-shadow:0 10px 28px rgba(0,0,0,0.25);
}
.btn-ghost-light{
border-color:var(--line-light); color:var(--ink); background:rgba(255,255,255,0.4);
backdrop-filter:blur(8px);
}
.btn-ghost-light:hover{
border-color:rgba(10,20,17,0.2); background:rgba(255,255,255,0.7);
box-shadow:var(--shadow-sm);
}
.btn-lg{padding:16px 30px; font-size:0.96rem; min-height:54px;}
.navcta-desktop{display:none;}
@media (min-width:1100px){ .navcta-desktop{display:flex;} }


/* Header phone — aligned with logo & menu */
.nav-phone{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--brass-bright);
  text-decoration:none;
  font-weight:600;
  font-size:0.82rem;
  letter-spacing:0.01em;
  white-space:nowrap;
  padding:0 12px;
  height:40px;
  border-radius:10px;
  border:1px solid transparent;
  transition:color .2s, background .2s, border-color .2s;
  flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
  box-sizing:border-box;
}
.nav-phone svg{
  flex-shrink:0;
  width:16px;
  height:16px;
}
.nav-phone:hover{
  color:var(--cream);
  background:rgba(250,246,236,0.06);
  border-color:rgba(250,246,236,0.12);
}
.nav-phone-desktop{ display:none; }
@media (min-width:1100px){
  .nav-phone-desktop{
    display:inline-flex;
    margin-right:6px;
    height:40px;
  }
  .nav-row > .nav-phone:not(.nav-phone-desktop){ display:none; }
}
/* Mobile/tablet: icon button aligned with hamburger */
@media (max-width:1099px){
  .nav-phone-num{ display:none; }
  .nav-row > .nav-phone{
    width:42px;
    height:42px;
    min-width:42px;
    padding:0;
    justify-content:center;
    align-items:center;
    border:1px solid rgba(250,246,236,0.18);
    background:rgba(250,246,236,0.06);
    border-radius:12px;
  }
  .nav-row > .nav-phone svg{ width:18px; height:18px; }
  .nav-row > .nav-phone:hover,
  .nav-row > .nav-phone:active{
    background:rgba(250,246,236,0.12);
  }
  /* Keep logo + phone + menu on one clean row */
  .nav-row{
    gap:10px;
  }
  
  .menu-toggle{
    width:42px;
    height:42px;
  }
}
#mobile-panel .mob-phone{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--brass-bright);
  font-weight:700;
  font-size:1.05rem;
  text-decoration:none;
  padding:14px 16px;
  margin:0 0 12px;
  border:1px solid rgba(240,190,78,0.28);
  border-radius:12px;
  background:rgba(240,190,78,0.08);
  min-height:48px;
}
#mobile-panel .mob-phone:hover{
  background:rgba(240,190,78,0.14);
  color:var(--cream);
}


.menu-toggle{
display:flex; background:rgba(250,246,236,0.06); border:1px solid rgba(250,246,236,0.16);
border-radius:14px; width:46px; height:46px; align-items:center; justify-content:center;
cursor:pointer; flex-shrink:0; transition:background .2s, border-color .2s;
}
.menu-toggle:hover{background:rgba(250,246,236,0.12); border-color:rgba(250,246,236,0.28);}
@media (min-width:1100px){ .menu-toggle{display:none;} }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after{
content:''; display:block; width:18px; height:1.5px; background:var(--cream); position:relative;
transition:transform .3s var(--ease-out), opacity .2s;
}
.menu-toggle span::before{position:absolute; top:-6px;}
.menu-toggle span::after{position:absolute; top:6px;}
.menu-toggle[aria-expanded="true"] span{background:transparent;}
.menu-toggle[aria-expanded="true"] span::before{transform:rotate(45deg); top:0;}
.menu-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg); top:0;}
#mobile-panel{
display:block; position:fixed; inset:0; top:0; z-index:200;
background:rgba(7,15,13,0.96);
backdrop-filter:blur(40px) saturate(1.4);
-webkit-backdrop-filter:blur(40px) saturate(1.4);
padding:calc(24px + var(--safe-t)) 24px calc(36px + var(--safe-b));
max-height:100dvh; overflow-y:auto; overscroll-behavior:contain;
opacity:0; visibility:hidden; pointer-events:none;
transform:translateY(-12px);
transition:opacity .35s var(--ease-out), visibility .35s, transform .35s var(--ease-out);
}
#mobile-panel.open{
opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.mob-panel-top{display:flex; align-items:center; justify-content:flex-end; margin-bottom:16px;}
.mob-close{
display:flex; align-items:center; justify-content:center;
width:44px; height:44px; border-radius:14px;
background:rgba(250,246,236,0.06); border:1px solid rgba(250,246,236,0.14);
color:var(--cream); cursor:pointer; flex-shrink:0;
transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.mob-close:hover{background:rgba(250,246,236,0.12); border-color:rgba(250,246,236,0.28);}
.mob-close:active{transform:scale(0.92);}
.mob-close svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round;}
#mobile-panel .mob-group-label{
display:block; padding:20px 12px 8px; font-size:0.68rem; font-weight:700;
letter-spacing:0.12em; color:var(--brass-bright); text-transform:uppercase;
}
#mobile-panel .mob-group-label:first-of-type{padding-top:4px;}
#mobile-panel .mob-link{
display:flex; align-items:center; gap:14px;
padding:13px 12px; margin:0 -12px; border-radius:14px;
color:var(--cream); text-decoration:none; font-size:1rem; font-weight:500;
transition:background .2s ease, transform .2s var(--ease-out), color .2s ease;
}
#mobile-panel .mob-link .mob-icon{
width:20px; height:20px; flex-shrink:0; color:var(--brass-bright);
stroke:currentColor; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
#mobile-panel .mob-link span{flex:1;}
#mobile-panel .mob-link .mob-chevron{
width:16px; height:16px; flex-shrink:0; color:rgba(250,246,236,0.28);
stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
transition:transform .2s var(--ease-out), color .2s ease;
}
#mobile-panel .mob-link:hover, #mobile-panel .mob-link:active{
background:rgba(250,246,236,0.06); transform:translateX(4px);
}
#mobile-panel .mob-link:hover .mob-chevron{transform:translateX(3px); color:var(--brass-bright);}
#mobile-panel .mob-link[aria-current="page"]{
background:rgba(240,190,78,0.1); color:var(--brass-bright);
}
#mobile-panel .mob-link[aria-current="page"] .mob-icon{color:var(--brass-bright);}
#mobile-panel .mob-cta{display:flex; gap:12px; margin-top:28px; flex-wrap:wrap;}
#mobile-panel .mob-cta .btn{flex:1; min-width:140px; justify-content:center;}
/* staggered entrance for each row as the panel opens */
#mobile-panel.open > *{animation:mobItemIn .5s var(--ease-out) both;}
#mobile-panel.open > *:nth-child(1){animation-delay:.02s;}
#mobile-panel.open > *:nth-child(2){animation-delay:.05s;}
#mobile-panel.open > *:nth-child(3){animation-delay:.08s;}
#mobile-panel.open > *:nth-child(4){animation-delay:.11s;}
#mobile-panel.open > *:nth-child(5){animation-delay:.14s;}
#mobile-panel.open > *:nth-child(6){animation-delay:.17s;}
#mobile-panel.open > *:nth-child(7){animation-delay:.20s;}
#mobile-panel.open > *:nth-child(8){animation-delay:.23s;}
#mobile-panel.open > *:nth-child(9){animation-delay:.26s;}
#mobile-panel.open > *:nth-child(10){animation-delay:.29s;}
#mobile-panel.open > *:nth-child(11){animation-delay:.32s;}
#mobile-panel.open > *:nth-child(12){animation-delay:.35s;}
#mobile-panel.open > *:nth-child(13){animation-delay:.38s;}
#mobile-panel.open > *:nth-child(14){animation-delay:.41s;}
#mobile-panel.open > *:nth-child(15){animation-delay:.44s;}
#mobile-panel.open > *:nth-child(16){animation-delay:.47s;}
#mobile-panel.open > *:nth-child(17){animation-delay:.50s;}
@keyframes mobItemIn{from{opacity:0; transform:translateX(-14px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion: reduce){
#mobile-panel.open > *{animation:none;}
}
.marquee{
background:var(--charcoal-950); border-bottom:1px solid var(--charcoal-line);
overflow:hidden; white-space:nowrap; padding:13px 0;
-webkit-mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
mask-image:linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}
.marquee-track{display:inline-flex; gap:0; animation:scroll 40s linear infinite;}
.marquee span{
color:#5A7068; font-size:0.72rem; font-weight:600; letter-spacing:0.08em;
padding:0 28px; display:inline-flex; align-items:center; gap:28px; text-transform:uppercase;
}
.marquee span::after{content:'◆'; color:var(--brass); font-size:0.4rem; opacity:0.8;}
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
@media (prefers-reduced-motion: reduce){ .marquee-track{animation:none;} }
.hero{
background:
radial-gradient(ellipse 100% 80% at 85% -15%, rgba(26,58,50,0.9) 0%, transparent 55%),
radial-gradient(ellipse 60% 50% at 10% 80%, rgba(224,165,38,0.08) 0%, transparent 50%),
linear-gradient(165deg, var(--charcoal-900) 0%, var(--charcoal-950) 100%);
color:var(--cream); position:relative; overflow:hidden;
}
.hero-grid{
display:grid; grid-template-columns:1fr; gap:28px; padding:36px 0 48px;
}
@media (min-width:960px){
.hero-grid{
grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);
align-items:center; gap:56px; padding:96px 0 108px;
}
}
.eyebrow-line{
display:inline-flex; align-items:center; gap:12px; color:var(--brass-bright);
font-size:0.76rem; font-weight:600; margin-bottom:20px; letter-spacing:0.06em;
padding:6px 14px 6px 10px; border-radius:999px;
background:rgba(240,190,78,0.1); border:1px solid rgba(240,190,78,0.2);
}
.eyebrow-line::before{content:''; width:8px; height:8px; border-radius:50%; background:var(--brass-bright); box-shadow:0 0 12px var(--brass-bright);}
h1.hero-h{
font-size:clamp(1.85rem, 7vw, 3.75rem); font-weight:800; line-height:1.08;
letter-spacing:-0.03em; margin:0 0 16px; max-width:100%;
}
.hero-sub{
font-size:1rem; line-height:1.65; color:rgba(210,220,214,0.95);
max-width:100%; margin:0 0 22px; font-weight:400;
}
.hero-ctas{display:flex; flex-direction:column; flex-wrap:wrap; gap:10px; margin-bottom:24px; width:100%;}
.hero-ctas .btn{width:100%; justify-content:center;}
@media (min-width:480px){
.hero-ctas{flex-direction:row;}
.hero-ctas .btn{width:auto; min-width:140px;}
}
@media (min-width:960px){
h1.hero-h{max-width:14ch; margin:0 0 22px; line-height:1.04;}
.hero-sub{max-width:44ch; font-size:1.06rem; margin:0 0 30px; color:rgba(196,207,198,0.9);}
.hero-ctas{margin-bottom:36px; width:auto;}
.hero-ctas .btn{width:auto;}
}
.trust-strip{
display:flex; flex-direction:column; flex-wrap:wrap; gap:10px; padding-top:20px;
border-top:1px solid var(--charcoal-line); width:100%;
}
@media (min-width:480px){
.trust-strip{flex-direction:row; gap:10px 24px; padding-top:28px;}
}
.trust-strip span{
font-size:0.74rem; color:#6B8078; font-weight:500;
display:inline-flex; align-items:center; gap:8px;
}
.trust-strip b{color:var(--brass-bright); font-weight:600;}
.trust-strip span::before{
content:''; width:5px; height:5px; border-radius:50%; background:var(--brass); opacity:0.7;
}
.hero-art{
position:relative;
width:100%;
display:flex;
align-items:center;
justify-content:center;
}
.hero-art-frame{
position:relative;
width:100%;
max-width:520px;
margin:0 auto;
padding:12px;
border-radius:var(--radius-xl);
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.1);
box-shadow:0 20px 56px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}
.hero-art-frame .hub-diagram,
.hero-art svg{
width:100%;
height:auto;
display:block;
max-width:100%;
filter:drop-shadow(0 12px 32px rgba(0,0,0,0.25));
}
@media (max-width:959px){
.hero-art{
order:-1;
width:100%;
max-width:100%;
margin:0 auto 8px;
}
.hero-art-frame{
max-width:100%;
padding:8px;
border-radius:var(--radius-lg);
}
}
@media (max-width:479px){
.hero-art-frame{padding:4px; border-radius:var(--radius-md);}
}
.hero-full{background:var(--charcoal-950); color:var(--cream); padding:60px 0 72px;}
.hero-full .kicker{color:var(--brass-bright);}
.hero-full h1{
font-size:clamp(2.05rem,5vw,3.4rem); font-weight:800; line-height:1.05;
max-width:16ch; margin:0 0 22px; letter-spacing:-0.03em;
}
.hero-full p{font-size:1.06rem; color:rgba(196,207,198,0.88); max-width:56ch; line-height:1.68;}
.hero-stats{display:grid; gap:16px; margin-top:40px;}
@media (min-width:640px){ .hero-stats{grid-template-columns:repeat(3,1fr); gap:20px;} }
.hero-stats .stat{
padding:18px 20px; border-radius:var(--radius-md);
background:rgba(255,255,255,0.04); border:1px solid var(--charcoal-line);
}
.hero-stats .stat b{display:block; font-size:1.4rem; color:var(--brass-bright); font-weight:800; margin-bottom:4px;}
.hero-stats .stat span{font-size:0.84rem; color:#6B8078;}
.crumbs{background:var(--stone); border-bottom:1px solid var(--line-light);}
.crumbs .wrap{padding-top:14px; padding-bottom:14px; font-size:0.8rem; color:var(--ink-soft);}
.crumbs a{color:var(--ink-soft); text-decoration:none; transition:color .15s;}
.crumbs a:hover{color:var(--ink);}
.crumbs span.sep{margin:0 8px; opacity:0.4;}
.crumbs span.current{color:var(--ink); font-weight:600;}
section{padding:72px 0;}
@media (min-width:900px){ section{padding:108px 0;} }
.section-head{max-width:640px; margin-bottom:48px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
.kicker{
display:inline-flex; align-items:center; gap:10px; color:var(--brass-text);
font-size:0.76rem; font-weight:700; margin-bottom:14px; letter-spacing:0.05em;
}
.section-head.center .kicker{justify-content:center;}
.kicker::before{content:''; width:18px; height:1.5px; background:var(--brass); border-radius:1px;}
h2.section-h{
font-size:clamp(1.6rem, 3.5vw, 2.45rem); font-weight:800;
letter-spacing:-0.025em; margin:0 0 14px; line-height:1.1;
}
.section-p{font-size:1.04rem; line-height:1.68; color:var(--ink-soft); max-width:54ch; margin:0;}
.section-head.center .section-p{margin-left:auto; margin-right:auto;}
.quick-answer{
background:rgba(255,255,255,0.5);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,0.6);
border-left:3px solid var(--brass);
border-radius:0 var(--radius-md) var(--radius-md) 0;
padding:24px 28px; margin:0 0 44px; max-width:760px;
box-shadow:var(--shadow-sm);
}
.quick-answer .qa-label{
font-size:0.68rem; font-weight:700; letter-spacing:0.1em; color:var(--brass-text);
margin-bottom:8px; display:block; text-transform:uppercase;
}
.quick-answer p{margin:0; font-size:0.98rem; line-height:1.65; color:var(--ink);}
.prose{max-width:720px;}
.prose h2{font-size:1.5rem; font-weight:800; margin:44px 0 14px; letter-spacing:-0.02em;}
.prose h3{font-size:1.15rem; font-weight:700; margin:28px 0 10px;}
.prose p{font-size:1.02rem; line-height:1.72; color:var(--ink-soft); margin:0 0 18px;}
.prose ul, .prose ol{color:var(--ink-soft); line-height:1.7; padding-left:22px; margin:0 0 18px;}
.prose li{margin-bottom:6px;}
.prose a{color:var(--brass-text); text-decoration:underline; text-underline-offset:3px;}
.bento{
display:grid;
grid-template-columns:1fr;
gap:16px;
}
@media (min-width:640px){
.bento{grid-template-columns:repeat(2, 1fr); gap:18px;}
}
@media (min-width:960px){
.bento{
grid-template-columns:repeat(12, 1fr);
grid-auto-rows:minmax(160px, auto);
gap:20px;
}
.bento-span-8{grid-column:span 8;}
.bento-span-6{grid-column:span 6;}
.bento-span-4{grid-column:span 4;}
.bento-span-5{grid-column:span 5;}
.bento-span-7{grid-column:span 7;}
.bento-span-12{grid-column:span 12;}
.bento-row-2{grid-row:span 2;}
}
.bento-card{
position:relative; overflow:hidden;
border-radius:var(--radius-lg);
padding:28px 26px;
display:flex; flex-direction:column;
min-height:200px;
transition:transform .4s var(--ease-out), box-shadow .4s ease, border-color .3s;
}
.bento-card:hover{transform:translateY(-6px) scale(1.01);}
.bento-card.dark{
background:linear-gradient(155deg, rgba(21,43,36,0.95) 0%, rgba(7,15,13,0.98) 100%);
color:var(--cream);
border:1px solid rgba(250,246,236,0.08);
box-shadow:var(--shadow-md);
}
.bento-card.dark:hover{
box-shadow:0 32px 64px rgba(0,0,0,0.45), 0 0 0 1px rgba(240,190,78,0.15);
border-color:rgba(240,190,78,0.2);
}
.bento-card.light{
background:rgba(255,255,255,0.45);
backdrop-filter:blur(20px) saturate(1.2);
-webkit-backdrop-filter:blur(20px) saturate(1.2);
border:1px solid rgba(255,255,255,0.55);
box-shadow:var(--shadow-sm);
color:var(--ink);
}
.bento-card.light:hover{
box-shadow:var(--shadow-lg);
border-color:rgba(224,165,38,0.25);
background:rgba(255,255,255,0.65);
}
.bento-card.featured{
background:
radial-gradient(ellipse 80% 60% at 100% 0%, rgba(224,165,38,0.12) 0%, transparent 50%),
linear-gradient(155deg, rgba(21,43,36,0.98) 0%, rgba(7,15,13,0.99) 100%);
color:var(--cream);
border:1px solid rgba(240,190,78,0.18);
box-shadow:0 20px 56px rgba(0,0,0,0.35);
min-height:280px;
}
.bento-card.featured:hover{
box-shadow:0 36px 72px rgba(0,0,0,0.5), 0 0 40px rgba(224,165,38,0.12);
}
.bento-card .div-tag,
.bento-card .bento-tag{
font-size:0.72rem; font-weight:700; letter-spacing:0.04em; margin-bottom:12px;
}
.bento-card.dark .div-tag, .bento-card.featured .div-tag,
.bento-card.dark .bento-tag, .bento-card.featured .bento-tag{color:var(--brass-bright);}
.bento-card.light .div-tag, .bento-card.light .bento-tag{color:var(--brass-text);}
.bento-card h3{
font-size:clamp(1.2rem, 2vw, 1.5rem); font-weight:800; margin:0 0 12px; line-height:1.15;
}
.bento-card p{
font-size:0.94rem; line-height:1.6; margin:0 0 20px; max-width:42ch; flex:1;
}
.bento-card.dark p, .bento-card.featured p{color:rgba(196,207,198,0.88);}
.bento-card.light p{color:var(--ink-soft);}
.bento-card .spacer{flex:1;}
.bento-card .brand-mark{font-size:0.7rem; letter-spacing:0.03em; opacity:0.55; margin-top:auto; padding-top:16px;}
.bento-card .bento-icon{
width:48px; height:48px; border-radius:14px; margin-bottom:16px;
display:grid; place-items:center;
background:rgba(240,190,78,0.12); border:1px solid rgba(240,190,78,0.2);
color:var(--brass-bright); font-size:1.3rem;
}
.bento-card.light .bento-icon{
background:rgba(224,165,38,0.1); border-color:rgba(224,165,38,0.25); color:var(--brass-text);
}
.bento-lottie{
position:absolute; right:-10%; bottom:-15%; width:55%; height:55%; opacity:0.35; pointer-events:none;
}
.bento-card.featured .bento-lottie{opacity:0.45; width:50%; height:50%; right:-5%; bottom:-10%;}
.div-lead{
border-radius:var(--radius-lg); padding:32px 26px; display:grid; gap:28px; margin-bottom:20px;
background:rgba(255,255,255,0.4);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,0.5);
box-shadow:var(--shadow-sm);
transition:transform .35s var(--ease-out), box-shadow .35s ease;
}
.div-lead:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
@media (min-width:840px){
.div-lead{grid-template-columns:1.15fr 1fr; align-items:center; padding:48px 44px; gap:40px;}
}
.div-tag{font-size:0.74rem; font-weight:700; color:var(--brass-text); letter-spacing:0.03em; margin-bottom:12px;}
.div-lead h3{font-size:clamp(1.35rem,2.8vw,1.95rem); margin:0 0 14px; font-weight:800; line-height:1.15;}
.div-lead p{font-size:0.98rem; color:var(--ink-soft); line-height:1.62; margin:0 0 22px; max-width:48ch;}
.div-lead-art{
aspect-ratio:16/10; border-radius:var(--radius-md); overflow:hidden;
background:linear-gradient(145deg, var(--charcoal-900), var(--charcoal-950));
display:flex; align-items:center; justify-content:center;
box-shadow:inset 0 0 48px rgba(0,0,0,0.25);
}
.div-pair{display:grid; gap:18px;}
@media (min-width:840px){ .div-pair{grid-template-columns:1fr 1fr; gap:20px;} }
.div-card{
border-radius:var(--radius-lg); padding:32px 28px; position:relative; overflow:hidden;
display:flex; flex-direction:column; min-height:300px;
transition:transform .35s var(--ease-out), box-shadow .35s ease;
}
.div-card.dark{
background:linear-gradient(160deg, var(--charcoal-900) 0%, var(--charcoal-950) 100%);
color:var(--cream); border:1px solid rgba(250,246,236,0.08); box-shadow:var(--shadow-md);
}
.div-card.light{
background:rgba(255,255,255,0.45);
backdrop-filter:blur(16px);
-webkit-backdrop-filter:blur(16px);
border:1px solid rgba(255,255,255,0.55); box-shadow:var(--shadow-sm);
}
.div-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg);}
.div-card.dark:hover{box-shadow:0 28px 56px rgba(0,0,0,0.45);}
.div-card .div-tag.on-dark{color:var(--brass-bright);}
.div-card h3{font-size:1.35rem; font-weight:800; margin:0 0 12px; line-height:1.15;}
.div-card p{font-size:0.94rem; line-height:1.6; margin:0 0 20px; max-width:38ch;}
.div-card.dark p{color:rgba(196,207,198,0.88);}
.div-card.light p{color:var(--ink-soft);}
.div-card .spacer{flex:1;}
.card-link{
display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:0.88rem;
text-decoration:none; padding-bottom:2px; border-bottom:1.5px solid currentColor; width:fit-content;
transition:transform .25s var(--ease-out), gap .25s ease;
}
.card-link:hover{transform:translateX(5px); gap:12px;}
.div-card .brand-mark{font-size:0.72rem; letter-spacing:0.03em; opacity:0.55; margin-top:16px;}
.feature-grid{display:grid; gap:16px;}
@media (min-width:640px){ .feature-grid.cols-2{grid-template-columns:1fr 1fr;} }
@media (min-width:840px){
.feature-grid.cols-3{grid-template-columns:repeat(3,1fr);}
.feature-grid.cols-4{grid-template-columns:repeat(4,1fr);}
}
.feature-card{
border-radius:var(--radius-md); padding:26px;
background:rgba(255,255,255,0.5);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
border:1px solid rgba(255,255,255,0.55);
box-shadow:var(--shadow-sm);
transition:transform .35s var(--ease-out), box-shadow .35s ease, border-color .25s;
}
.feature-card:hover{
transform:translateY(-5px); box-shadow:var(--shadow-md);
border-color:rgba(224,165,38,0.3);
}
.feature-card.on-stone{background:rgba(242,235,224,0.7);}
.feature-card h4{font-size:1.02rem; font-weight:700; margin:0 0 10px;}
.feature-card p{font-size:0.92rem; color:var(--ink-soft); line-height:1.58; margin:0;}
.feature-num{font-size:0.74rem; font-weight:700; color:var(--brass-text); margin-bottom:12px; display:block;}
.structure{background:var(--charcoal-950); color:var(--cream);}
.struct-tree{display:grid; border:1px solid var(--charcoal-line); border-radius:var(--radius-lg); overflow:hidden;}
.struct-row{display:grid; grid-template-columns:1fr; border-bottom:1px solid var(--charcoal-line);}
.struct-row:last-child{border-bottom:none;}
@media (min-width:760px){ .struct-row{grid-template-columns:1fr 1px 1fr 1px 1fr;} }
.struct-cell{padding:24px 26px;}
.struct-div{background:var(--charcoal-line);}
@media (max-width:759px){ .struct-div{display:none;} }
.struct-parent{background:var(--charcoal-900); font-weight:700; display:flex; align-items:center; font-size:1rem;}
.struct-child b{display:block; font-size:1rem; font-weight:700; margin-bottom:4px;}
.struct-child span{font-size:0.84rem; color:#6B8078;}
.struct-child .badge{
display:inline-block; margin-top:10px; font-size:0.7rem; font-weight:600;
color:var(--brass-bright); border:1px solid rgba(240,190,78,0.35);
border-radius:999px; padding:4px 12px;
}
.why-list{display:grid; border-top:1px solid var(--line-light);}
.why-item{
display:grid; gap:6px; padding:28px 0; border-bottom:1px solid var(--line-light);
transition:padding-left .25s var(--ease-out);
}
.why-item:hover{padding-left:8px;}
@media (min-width:760px){ .why-item{grid-template-columns:260px 1fr; align-items:baseline; gap:32px;} }
.why-item h4{margin:0; font-size:1.08rem; font-weight:700;}
.why-item p{margin:0; color:var(--ink-soft); font-size:0.96rem; line-height:1.65; max-width:56ch;}
.process{counter-reset:step;}
.process-item{
position:relative; padding:0 0 40px 56px; border-left:1.5px solid var(--line-light); margin-left:16px;
}
.process-item:last-child{border-color:transparent; padding-bottom:0;}
.process-item::before{
counter-increment:step; content:counter(step); position:absolute; left:-17px; top:0;
width:34px; height:34px; border-radius:50%; background:var(--charcoal-950); color:var(--brass-bright);
font-weight:700; font-size:0.88rem; display:flex; align-items:center; justify-content:center;
box-shadow:0 0 0 4px var(--cream);
}
.process-item h4{margin:2px 0 8px; font-size:1.05rem; font-weight:700;}
.process-item p{margin:0; color:var(--ink-soft); font-size:0.95rem; line-height:1.62; max-width:56ch;}
.faq-item{border-bottom:1px solid var(--line-light);}
.faq-item summary{
cursor:pointer; padding:22px 0; font-weight:700; font-size:1.02rem; list-style:none;
display:flex; justify-content:space-between; align-items:center; gap:16px;
transition:color .15s;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
content:'+'; font-size:1.4rem; color:var(--brass-text); font-weight:400; flex-shrink:0;
width:34px; height:34px; display:flex; align-items:center; justify-content:center;
border-radius:50%; background:var(--stone); transition:transform .3s var(--ease-out), background .2s, color .2s;
}
.faq-item[open] summary::after{content:'–'; background:var(--brass); color:var(--charcoal-950);}
.faq-item summary:hover{color:var(--brass-text);}
.faq-item p{margin:0 0 22px; color:var(--ink-soft); font-size:0.96rem; line-height:1.65; max-width:64ch;}
.founder-grid{display:grid; gap:32px; max-width:760px;}
.founder-monogram{
width:72px; height:72px; border-radius:50%;
background:linear-gradient(155deg, var(--charcoal-900), var(--charcoal-950));
border:1.5px solid rgba(224,165,38,0.4); display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-weight:800; font-size:1.3rem; color:var(--brass-bright);
margin-bottom:20px; flex-shrink:0; box-shadow:0 12px 32px rgba(0,0,0,0.2);
}
.founder-text h3{font-size:1.75rem; font-weight:800; margin:0 0 4px; letter-spacing:-0.02em;}
.founder-role{font-size:0.92rem; color:var(--brass-text); font-weight:600; margin-bottom:20px;}
.founder-text p{font-size:1.02rem; line-height:1.68; color:var(--ink-soft); max-width:62ch; margin:0 0 16px;}
.founder-affil{
margin-top:24px; padding:18px 22px; border-left:3px solid var(--brass);
background:rgba(255,255,255,0.5); backdrop-filter:blur(12px);
border-radius:0 var(--radius-sm) var(--radius-sm) 0;
font-size:0.92rem; color:var(--ink-soft); line-height:1.55; max-width:62ch;
box-shadow:var(--shadow-sm);
}
.insight-scroll{display:grid; gap:16px;}
@media (min-width:760px){ .insight-scroll{grid-template-columns:repeat(3,1fr); gap:20px;} }
.insight-card{
background:rgba(255,255,255,0.5);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,0.55); border-radius:var(--radius-md);
padding:26px; display:flex; flex-direction:column; min-height:200px;
box-shadow:var(--shadow-sm); transition:transform .35s var(--ease-out), box-shadow .35s ease;
}
.insight-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
.insight-cat{font-size:0.68rem; font-weight:700; color:var(--brass-text); letter-spacing:0.05em; margin-bottom:12px; text-transform:uppercase;}
.insight-card h4{font-size:1.05rem; font-weight:700; margin:0 0 12px; line-height:1.3;}
.insight-card .spacer{flex:1;}
.insight-card .meta{font-size:0.78rem; color:var(--ink-soft); margin-top:14px;}
.form-card{
background:rgba(255,255,255,0.6);
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,0.6); border-radius:var(--radius-lg);
padding:32px 28px; box-shadow:var(--shadow-md);
}
@media (min-width:640px){ .form-card{padding:40px 36px;} }
.form-row{display:grid; gap:16px; margin-bottom:16px;}
@media (min-width:640px){ .form-row.cols-2{grid-template-columns:1fr 1fr;} }
label{display:block; font-size:0.82rem; font-weight:600; margin-bottom:7px; color:var(--ink);}
input, select, textarea{
width:100%; padding:14px 16px; border:1.5px solid var(--line-light); border-radius:var(--radius-sm);
font-family:inherit; font-size:1rem; background:rgba(255,255,255,0.8); color:var(--ink);
transition:border-color .2s, box-shadow .2s, background .2s;
}
input:focus, select:focus, textarea:focus{
outline:none; border-color:var(--brass); box-shadow:0 0 0 4px rgba(224,165,38,0.15);
background:#fff;
}
textarea{resize:vertical; min-height:120px;}
.enquiry-tags{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:18px;}
.enquiry-tags label{
display:flex; align-items:center; gap:8px; border:1.5px solid var(--line-light);
border-radius:999px; padding:10px 16px; font-size:0.86rem; font-weight:500;
cursor:pointer; margin:0; transition:border-color .2s, background .2s;
background:rgba(255,255,255,0.4);
}
.enquiry-tags label:has(input:checked){
border-color:var(--brass); background:rgba(224,165,38,0.1);
}
.enquiry-tags input{width:18px; height:18px; margin:0; flex-shrink:0; accent-color:var(--brass);}
.contact-cards{display:grid; gap:16px;}
@media (min-width:760px){ .contact-cards{grid-template-columns:repeat(3,1fr); gap:20px;} }
.contact-card{
border-radius:var(--radius-md); padding:26px;
background:rgba(255,255,255,0.45);
backdrop-filter:blur(14px);
border:1px solid rgba(255,255,255,0.5);
box-shadow:var(--shadow-sm);
transition:transform .35s var(--ease-out), box-shadow .35s ease;
}
.contact-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.contact-card h4{margin:0 0 6px; font-size:1.02rem; font-weight:700;}
.contact-card p{margin:0 0 14px; font-size:0.86rem; color:var(--ink-soft);}
.contact-card a.line{
display:block; font-size:0.92rem; font-weight:600; color:var(--ink);
text-decoration:none; padding:5px 0; transition:color .15s;
}
.contact-card a.line:hover{color:var(--brass-text);}
.cta-band{
background:
radial-gradient(ellipse 70% 80% at 90% 50%, rgba(224,165,38,0.1) 0%, transparent 50%),
linear-gradient(135deg, var(--charcoal-950) 0%, #15302A 55%, #1A3A32 100%);
color:var(--cream);
}
.cta-band-inner{display:flex; flex-direction:column; gap:28px; align-items:flex-start;}
@media (min-width:840px){
.cta-band-inner{flex-direction:row; align-items:center; justify-content:space-between; gap:40px;}
}
.cta-band h2{font-size:clamp(1.5rem,3.2vw,2.2rem); font-weight:800; margin:0 0 10px; max-width:22ch; letter-spacing:-0.025em;}
.cta-band p{color:rgba(196,207,198,0.88); margin:0; font-size:1rem; max-width:44ch; line-height:1.65;}
.cta-band-btns{display:flex; gap:12px; flex-wrap:wrap;}
footer{background:var(--charcoal-950); color:rgba(196,207,198,0.82); padding:72px 0 28px;}
.footer-grid{display:grid; gap:36px; grid-template-columns:1fr; margin-bottom:52px;}
@media (min-width:560px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:900px){ .footer-grid{grid-template-columns:1.4fr repeat(4,1fr); gap:28px;} }
.footer-col h5{color:var(--cream); font-size:0.82rem; font-weight:700; margin:0 0 16px; letter-spacing:0.02em;}
.footer-col a{
display:block; color:#5A7068; text-decoration:none; font-size:0.86rem; padding:5px 0;
transition:color .15s, transform .15s var(--ease-out);
}
.footer-col a:hover{color:var(--cream); transform:translateX(4px);}
.footer-brand{color:var(--cream); font-weight:800; font-size:1.1rem; margin-bottom:10px; letter-spacing:-0.015em;}
.footer-brand-sub{font-size:0.86rem; color:#5A7068; max-width:32ch; line-height:1.55; margin-bottom:18px;}
.footer-social{display:flex; gap:12px;}
.footer-social a{
padding:0; font-size:0.78rem; border:1px solid var(--charcoal-line); border-radius:50%;
width:38px; height:38px; display:flex; align-items:center; justify-content:center;
transition:border-color .2s, background .2s, transform .2s;
}
.footer-social a:hover{border-color:var(--brass); background:rgba(224,165,38,0.12); transform:translateY(-3px);}
.footer-bottom{
border-top:1px solid var(--charcoal-line); padding-top:24px;
display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px;
font-size:0.78rem; color:#4A6058;
}
.footer-bottom a{color:#4A6058; text-decoration:none; transition:color .15s;}
.footer-bottom a:hover{color:var(--cream);}
.mobile-sticky{
position:fixed; left:0; right:0; bottom:0; z-index:80;
display:flex;
background:rgba(5,20,17,0.94);
backdrop-filter:blur(20px) saturate(1.4);
-webkit-backdrop-filter:blur(20px) saturate(1.4);
border-top:1px solid var(--charcoal-line);
padding:10px 12px calc(10px + var(--safe-b)); gap:10px;
}
@media (min-width:768px){ .mobile-sticky{display:none;} }
.mobile-sticky a{
flex:1; display:flex; align-items:center; justify-content:center;
min-height:48px; text-align:center; padding:12px 10px;
border-radius:999px; font-size:0.84rem; font-weight:600; text-decoration:none;
transition:transform .2s, box-shadow .2s, background .2s;
-webkit-tap-highlight-color:transparent;
}
.mobile-sticky a:active{transform:scale(0.97);}
.mobile-sticky a[href*="wa.me"]{ display:none; }
.case-grid{display:grid; gap:20px;}
@media (min-width:840px){ .case-grid{grid-template-columns:repeat(2,1fr);} }
.case-card{
border-radius:var(--radius-lg); background:rgba(255,255,255,0.5);
backdrop-filter:blur(14px); border:1px solid rgba(255,255,255,0.55);
padding:32px; display:flex; flex-direction:column;
box-shadow:var(--shadow-sm); transition:transform .35s var(--ease-out), box-shadow .35s ease;
}
.case-card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
.case-card .case-tag{font-size:0.68rem; font-weight:700; color:var(--brass-text); letter-spacing:0.05em; margin-bottom:12px; text-transform:uppercase;}
.case-card h3{font-size:1.2rem; font-weight:700; margin:0 0 14px; letter-spacing:-0.015em;}
.case-row{display:grid; grid-template-columns:96px 1fr; gap:4px 14px; font-size:0.9rem; margin-bottom:10px;}
.case-row b{color:var(--ink); font-weight:700;}
.case-row span{color:var(--ink-soft); line-height:1.55;}
.case-placeholder{
margin-top:16px; padding:14px 16px; border-radius:var(--radius-sm); background:var(--stone);
font-size:0.84rem; color:var(--ink-soft); border-left:3px solid var(--brass);
}
.vcard{
border-radius:var(--radius-lg); background:rgba(255,255,255,0.5);
backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,0.55);
overflow:hidden; box-shadow:var(--shadow-sm);
transition:transform .35s var(--ease-out), box-shadow .35s ease;
}
.vcard:hover{transform:translateY(-5px); box-shadow:var(--shadow-md);}
.vcard-body{padding:22px 24px;}
.vcard-body h4{font-size:1.08rem; font-weight:700; margin:0 0 8px;}
@keyframes pageFadeIn{ from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:none;} }
body{ animation:pageFadeIn .6s var(--ease-out) both; }
body.leaving{ opacity:0; transform:translateY(-8px); transition:opacity .2s ease, transform .2s ease; }
#scroll-progress{
position:fixed; top:0; left:0; height:2.5px; width:0%; z-index:120;
background:linear-gradient(90deg, var(--brass), var(--brass-bright));
transition:width .1s linear; pointer-events:none;
box-shadow:0 0 12px rgba(224,165,38,0.55);
}
@keyframes heroFadeUp{ from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:none;} }
.hero-h, .hero-full h1{ animation:heroFadeUp .85s var(--ease-out) both; }
.hero-sub, .hero-full p{ animation:heroFadeUp .85s var(--ease-out) .1s both; }
.hero-ctas{ animation:heroFadeUp .85s var(--ease-out) .2s both; }
.trust-strip, .hero-stats{ animation:heroFadeUp .85s var(--ease-out) .3s both; }
.hero-art{ animation:heroFadeUp 1s var(--ease-out) .15s both; will-change:transform; }
@media (prefers-reduced-motion: reduce){
body{ animation:none; }
body.leaving{ transition:none; opacity:1; transform:none; }
.hero-h, .hero-full h1, .hero-sub, .hero-full p, .hero-ctas, .trust-strip, .hero-stats, .hero-art{ animation:none; }
}
.card-link{ transition:transform .25s var(--ease-out), gap .25s ease, color .2s; }
.footer-col a{ transition:color .15s ease, transform .15s var(--ease-out); }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
outline:2px solid var(--brass); outline-offset:3px; border-radius:8px;
}
.wa-float{
position: fixed !important;
right: 16px;
bottom: 90px;
z-index: 9999 !important;
width: 56px;
height: 56px;
border-radius: 50%;
background: #25D366;
display: flex !important;
align-items: center;
justify-content: center;
text-decoration: none;
box-shadow: 0 6px 24px rgba(37, 211, 102, 0.45);
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
-webkit-tap-highlight-color: transparent;
}
@media (min-width: 768px){
.wa-float{
right: 24px;
bottom: 24px;
width: 60px;
height: 60px;
}
}
.wa-float:hover{ transform: scale(1.06); box-shadow: 0 10px 32px rgba(37, 211, 102, 0.55); }
.wa-float:active{ transform: scale(0.96); }
.wa-float svg{ width: 28px; height: 28px; display: block; }
.wa-float-tip{
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%);
background: var(--charcoal-950);
color: var(--cream);
padding: 8px 12px;
border-radius: 8px;
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .2s;
}
@media (hover: hover){
.wa-float:hover .wa-float-tip{ opacity: 1; visibility: visible; }
}
.orbit-rings{ transform-box:fill-box; transform-origin:50% 50%; animation:orbitSpin 120s linear infinite; }
@keyframes orbitSpin{ to{ transform:rotate(360deg); } }
.spoke{ stroke-dasharray:5 8; animation:spokeFlow 2.4s linear infinite; }
@keyframes spokeFlow{ to{ stroke-dashoffset:-28; } }
.hub-pulse{ transform-box:fill-box; transform-origin:50% 50%; animation:hubPulse 3.6s ease-in-out infinite; }
@keyframes hubPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } }
.hub-node{ transform-box:fill-box; transform-origin:50% 50%; animation:nodePulse 3.8s ease-in-out infinite; }
@keyframes nodePulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.09); } }
@media (prefers-reduced-motion: reduce){
.orbit-rings, .spoke, .hub-pulse, .hub-node{ animation:none; }
}
@media (max-width:600px){
.node-label{ font-size:9px; letter-spacing:0.2px; }
}
@media (max-width:380px){
.node-label{ display:none; } 
}
.reveal{opacity:0; transform:translateY(22px); transition:opacity .75s var(--ease-out), transform .75s var(--ease-out);}
.reveal.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){ .reveal{opacity:1; transform:none; transition:none;} }
@media (max-width:359px){

.btn{padding:11px 16px; font-size:0.82rem;}
}
.section-stone{background:var(--stone);}
.section-cream{background:var(--cream);}
.hero-grid{
display:grid;
grid-template-columns:1fr;
gap:28px;
padding:36px 0 48px;
text-align:left;
}
.hero-grid > div:first-child{
display:flex;
flex-direction:column;
align-items:flex-start;
width:100%;
}
h1.hero-h{
font-size:clamp(1.85rem, 7.5vw, 2.5rem);
line-height:1.08;
max-width:100%;
margin:0 0 16px;
text-wrap:balance;
}
.hero-sub{
font-size:0.98rem;
line-height:1.65;
max-width:100%;
margin:0 0 22px;
color:rgba(210,220,214,0.95);
}
.hero-ctas{
display:flex;
flex-direction:column;
width:100%;
gap:10px;
margin-bottom:24px;
}
.hero-ctas .btn{
width:100%;
justify-content:center;
min-height:50px;
}
.trust-strip{
width:100%;
display:flex;
flex-direction:column;
gap:10px;
padding-top:20px;
border-top:1px solid var(--charcoal-line);
}
.trust-strip span{
font-size:0.78rem;
line-height:1.4;
}
.eyebrow-line{
margin-bottom:14px;
font-size:0.72rem;
max-width:100%;
}
@media (min-width:480px){
.hero-ctas{
flex-direction:row;
flex-wrap:wrap;
}
.hero-ctas .btn{
width:auto;
flex:1 1 auto;
min-width:140px;
}
.trust-strip{
flex-direction:row;
flex-wrap:wrap;
gap:10px 20px;
}
}
@media (min-width:960px){
.hero-grid{
grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);
align-items:center;
gap:56px;
padding:96px 0 108px;
text-align:left;
}
.hero-ctas{
flex-direction:row;
width:auto;
}
.hero-ctas .btn{ width:auto; }
h1.hero-h{
font-size:clamp(2.2rem, 5.8vw, 3.75rem);
max-width:14ch;
}
.hero-sub{
font-size:1.06rem;
max-width:44ch;
}
.trust-strip{ flex-direction:row; }
}
@media (max-width:767px){
html{scroll-padding-top:80px;}
body{font-size:16px;}
.wrap{padding:0 16px;}
section{padding:48px 0;}
.section-head{margin-bottom:28px; max-width:100%;}
h2.section-h{font-size:clamp(1.4rem, 5.5vw, 1.85rem); max-width:100%;}
.section-p{font-size:1rem; max-width:100%; line-height:1.65;}
.nav-row{height:64px; padding:0 16px;}
header.site.scrolled .nav-row{height:56px;}
.btn{min-height:48px; padding:12px 20px; font-size:0.9rem;}
.btn-lg{min-height:50px; padding:14px 22px;}
.bento{gap:12px;}
.bento-card{padding:20px 18px; min-height:0;}
.bento-card.featured{min-height:0;}
.bento-card h3{font-size:1.15rem;}
.bento-card p{font-size:0.92rem; max-width:100%;}
.quick-answer{padding:16px 16px; margin-bottom:24px; max-width:100%;}
.div-lead{padding:22px 18px; gap:20px;}
.div-lead h3{max-width:100%;}
.div-lead p{max-width:100%;}
.insight-card, .feature-card, .contact-card, .case-card{padding:18px;}
.insight-card h4, .feature-card h4{font-size:1rem;}
.why-item{padding:20px 0;}
.why-item h4{font-size:1rem;}
.why-item p{font-size:0.95rem; max-width:100%;}
.cta-band h2{font-size:1.35rem; max-width:100%;}
.cta-band p{max-width:100%;}
.cta-band-btns{width:100%;}
.cta-band-btns .btn{width:100%; justify-content:center;}
footer{padding:44px 0 24px;}
.footer-grid{gap:24px; margin-bottom:32px;}
.footer-col a{padding:6px 0;}
.form-card{padding:22px 18px;}
.prose p{font-size:1rem; line-height:1.7;}
img, svg, video{max-width:100%; height:auto;}
}
@media (max-width:379px){
h1.hero-h{font-size:1.7rem;}

.btn{padding:11px 14px; font-size:0.84rem;}
.wrap{padding:0 14px;}
}
#mobile-panel a{
min-height:48px;
display:flex;
align-items:center;
}

/* ============================================================
   PREMIUM ELEVATION LAYER — stunning polish (2026-10)
   ============================================================ */

:root{
  --brass:#D4A017;
  --brass-bright:#F0C14D;
  --brass-deep:#8B6914;
  --brass-glow: rgba(240, 193, 77, 0.45);
  --charcoal-950:#030F0C;
  --charcoal-900:#0A1A16;
  --cream:#FDFBF7;
  --stone:#F5EFE6;
  --shadow-premium: 0 25px 60px -12px rgba(3,15,12,0.35);
  --shadow-brass: 0 12px 40px -8px rgba(212,160,23,0.45);
  --ease-luxury: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Selection & scrollbar */
::selection{ background: rgba(212,160,23,0.28); color: var(--ink); }
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--charcoal-950); }
::-webkit-scrollbar-thumb{ background: linear-gradient(180deg, var(--brass), var(--brass-deep)); border-radius:999px; border:2px solid var(--charcoal-950); }
::-webkit-scrollbar-thumb:hover{ background: var(--brass-bright); }

/* Focus rings — premium accessibility */
:focus-visible{
  outline: 2px solid var(--brass-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Premium buttons ---------- */
.btn{
  position: relative;
  overflow: hidden;
  letter-spacing: 0.02em;
  transition: transform .35s var(--ease-luxury), box-shadow .4s var(--ease-luxury), filter .3s, background .3s, border-color .3s, color .3s;
}
.btn::after{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.35) 50%, transparent 60%);
  transform: translateX(-120%) skewX(-12deg);
  transition: transform .6s var(--ease-luxury);
  pointer-events:none;
}
.btn:hover::after{ transform: translateX(120%) skewX(-12deg); }
.btn:hover{ transform: translateY(-3px); }
.btn:active{ transform: translateY(0) scale(0.97); }

.btn-brass{
  background: linear-gradient(145deg, #E8B83A 0%, #D4A017 40%, #F5D078 100%);
  color: #06110E;
  font-weight: 700;
  box-shadow:
    0 4px 16px rgba(212,160,23,0.35),
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 -1px 0 rgba(0,0,0,0.12) inset;
  border: 1px solid rgba(255,220,120,0.5);
}
.btn-brass:hover{
  box-shadow: var(--shadow-brass), 0 1px 0 rgba(255,255,255,0.4) inset;
  filter: brightness(1.08) saturate(1.05);
}
.btn-ghost-dark{
  border: 1.5px solid rgba(250,246,236,0.22);
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
}
.btn-ghost-dark:hover{
  border-color: rgba(240,193,77,0.55);
  background: rgba(240,193,77,0.08);
  box-shadow: 0 12px 32px rgba(0,0,0,0.28), 0 0 0 1px rgba(240,193,77,0.15);
  color: #fff;
}
.btn-ghost-light:hover{
  border-color: rgba(212,160,23,0.4);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(212,160,23,0.12);
}

/* ---------- Hero atmosphere ---------- */
.hero{
  background:
    radial-gradient(ellipse 90% 70% at 88% -10%, rgba(42,90,72,0.55) 0%, transparent 55%),
    radial-gradient(ellipse 50% 45% at 8% 90%, rgba(212,160,23,0.12) 0%, transparent 50%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(15,40,32,0.4) 0%, transparent 70%),
    linear-gradient(168deg, #0A1A16 0%, #030F0C 55%, #051411 100%);
}
.hero::after{
  content:'';
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 70% 20%, rgba(240,193,77,0.06) 0%, transparent 40%);
  animation: heroGlow 8s ease-in-out infinite alternate;
}
@keyframes heroGlow{
  0%{ opacity:0.6; transform: scale(1); }
  100%{ opacity:1; transform: scale(1.08); }
}
.hero-full{
  background:
    radial-gradient(ellipse 80% 60% at 90% 0%, rgba(42,90,72,0.4) 0%, transparent 50%),
    radial-gradient(ellipse 40% 40% at 10% 100%, rgba(212,160,23,0.08) 0%, transparent 45%),
    linear-gradient(165deg, #0A1A16 0%, #030F0C 100%);
  position:relative; overflow:hidden;
}
.hero-art-frame{
  background: linear-gradient(145deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.02) 100%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.4),
    0 0 0 1px rgba(240,193,77,0.08),
    inset 0 1px 0 rgba(255,255,255,0.1);
  backdrop-filter: blur(8px);
}
.eyebrow-line{
  background: linear-gradient(90deg, rgba(240,190,78,0.14), rgba(240,190,78,0.06));
  border: 1px solid rgba(240,190,78,0.28);
  box-shadow: 0 0 20px rgba(240,190,78,0.12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.7rem;
}
h1.hero-h, .hero-full h1{
  text-shadow: 0 2px 40px rgba(0,0,0,0.3);
  background: linear-gradient(180deg, #FFFEF9 0%, #E8E4D8 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* fallback */
  color: var(--cream);
}
@supports (-webkit-background-clip: text) or (background-clip: text){
  h1.hero-h, .hero-full h1{
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.trust-strip span{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 0.75rem;
}
.trust-strip b{ color: var(--brass-bright); }

/* ---------- Header glass elevation ---------- */
header.site{
  background: rgba(5,20,17,0.82) !important;
  backdrop-filter: blur(20px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
nav.primary a{
  position: relative;
  transition: color .25s var(--ease-luxury);
}
nav.primary a::after{
  content:'';
  position:absolute; left:50%; bottom:-2px;
  width:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--brass-bright), transparent);
  transition: width .35s var(--ease-luxury), left .35s var(--ease-luxury);
  border-radius:2px;
}
nav.primary a:hover::after,
nav.primary a[aria-current="page"]::after{
  width:100%; left:0;
}
nav.primary a:hover{ color: var(--brass-bright); }
.nav-drop-menu{
  background: rgba(10,26,22,0.95) !important;
  backdrop-filter: blur(24px) saturate(1.5);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(240,193,77,0.08);
  border-radius: 16px !important;
  padding: 8px !important;
}
.nav-drop-menu a{
  border-radius: 10px !important;
  transition: background .2s, color .2s, transform .2s;
}
.nav-drop-menu a:hover{
  background: rgba(240,193,77,0.12) !important;
  color: var(--brass-bright) !important;
  transform: translateX(3px);
}

/* ---------- Marquee refinement ---------- */
.marquee{
  background: linear-gradient(90deg, #030F0C, #0A1A16, #030F0C);
  border-top: 1px solid rgba(240,193,77,0.12);
  border-bottom: 1px solid rgba(240,193,77,0.08);
}
.marquee span{
  color: rgba(250,246,236,0.7);
  letter-spacing: 0.04em;
}
.marquee span::after{ color: var(--brass-bright); opacity: 0.9; }

/* ---------- Section headers & typography ---------- */
h2.section-h{
  font-size: clamp(1.75rem, 4vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  background: linear-gradient(135deg, var(--ink) 0%, #2A3D36 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.kicker{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brass-deep);
  margin-bottom: 12px;
}
.kicker::before{
  content:'';
  width: 18px; height: 2px;
  background: linear-gradient(90deg, var(--brass), transparent);
  border-radius: 2px;
}

/* ---------- Quick answer premium callout ---------- */
.quick-answer{
  background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, var(--stone) 100%);
  border: 1px solid rgba(212,160,23,0.2);
  border-left: 4px solid var(--brass);
  border-radius: var(--radius-md);
  padding: 22px 26px;
  box-shadow: 0 8px 30px rgba(5,20,17,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
  position: relative;
  overflow: hidden;
}
.quick-answer::before{
  content:'';
  position:absolute; top:0; right:0;
  width:120px; height:120px;
  background: radial-gradient(circle, rgba(212,160,23,0.08) 0%, transparent 70%);
  pointer-events:none;
}
.quick-answer .qa-label{
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brass-deep);
  background: rgba(212,160,23,0.12);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}

/* ---------- Bento / cards elevation ---------- */
.bento-card, .feature-card, .insight-card, .case-card, .vcard, .contact-card, .div-card, .why-item, .process-item{
  transition: transform .4s var(--ease-luxury), box-shadow .4s var(--ease-luxury), border-color .3s;
}
.bento-card:hover, .feature-card:hover, .insight-card:hover, .case-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--shadow-premium);
}
.bento-card.dark, .bento-card.featured{
  box-shadow: 0 16px 48px rgba(0,0,0,0.25);
}
.bento-card.dark:hover, .bento-card.featured:hover{
  box-shadow: 0 28px 64px rgba(0,0,0,0.35), 0 0 0 1px rgba(240,193,77,0.15);
}

/* ---------- Prose polish ---------- */
.prose h2{
  position: relative;
  padding-bottom: 8px;
}
.prose h2::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:48px; height:3px;
  background: linear-gradient(90deg, var(--brass), transparent);
  border-radius: 2px;
}
.prose a{
  color: var(--brass-deep);
  text-decoration-color: rgba(212,160,23,0.4);
  transition: color .2s, text-decoration-color .2s;
}
.prose a:hover{
  color: var(--brass);
  text-decoration-color: var(--brass);
}
.prose details.faq-item,
details.faq-item{
  background: var(--cream);
  border: 1px solid rgba(11,21,18,0.08);
  border-radius: 14px;
  padding: 4px 18px;
  margin-bottom: 12px;
  transition: border-color .25s, box-shadow .25s;
}
details.faq-item[open]{
  border-color: rgba(212,160,23,0.35);
  box-shadow: 0 8px 28px rgba(5,20,17,0.06);
}
details.faq-item summary{
  cursor: pointer;
  font-weight: 600;
  padding: 14px 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
details.faq-item summary::-webkit-details-marker{ display:none; }
details.faq-item summary::after{
  content: '+';
  font-size: 1.25rem;
  color: var(--brass);
  font-weight: 400;
  transition: transform .3s var(--ease-luxury);
}
details.faq-item[open] summary::after{
  content: '−';
  transform: rotate(0deg);
}

/* ---------- CTA bands ---------- */
.cta-band{
  background:
    radial-gradient(ellipse 70% 80% at 80% 50%, rgba(212,160,23,0.15) 0%, transparent 55%),
    linear-gradient(135deg, #0A1A16 0%, #030F0C 100%) !important;
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}
.cta-band::before{
  content:'';
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent, rgba(240,193,77,0.04), transparent);
  animation: ctaShimmer 6s ease-in-out infinite;
}
@keyframes ctaShimmer{
  0%,100%{ transform: translateX(-30%); opacity:0.5; }
  50%{ transform: translateX(30%); opacity:1; }
}

/* ---------- Footer premium ---------- */
footer{
  background: linear-gradient(180deg, #0A1A16 0%, #030F0C 100%) !important;
  border-top: 1px solid rgba(240,193,77,0.1);
  position: relative;
}
footer::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, rgba(240,193,77,0.35), transparent);
}
.footer-brand{
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #FFFEF9, var(--brass-bright));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.footer-bottom{
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 20px;
  margin-top: 32px;
  font-size: 0.8rem;
  color: rgba(250,246,236,0.5);
}
.footer-bottom a{
  color: var(--brass-bright);
  text-decoration: none;
  transition: color .2s;
}
.footer-bottom a:hover{ color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-col a{
  transition: color .2s, transform .2s;
  display: inline-block;
}
.footer-col a:hover{
  color: var(--brass-bright) !important;
  transform: translateX(4px);
}
.footer-social a{
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  transition: background .25s, border-color .25s, transform .25s, color .25s;
}
.footer-social a:hover{
  background: rgba(240,193,77,0.15);
  border-color: rgba(240,193,77,0.4);
  color: var(--brass-bright);
  transform: translateY(-3px);
}

/* ---------- WhatsApp float & mobile sticky ---------- */
.wa-float{
  box-shadow: 0 8px 28px rgba(37,211,102,0.45), 0 0 0 0 rgba(37,211,102,0.4);
  animation: waPulse 2.5s ease-in-out infinite;
  transition: transform .3s var(--ease-luxury), box-shadow .3s;
}
.wa-float:hover{
  transform: scale(1.08);
  box-shadow: 0 12px 36px rgba(37,211,102,0.55);
}
@keyframes waPulse{
  0%,100%{ box-shadow: 0 8px 28px rgba(37,211,102,0.4), 0 0 0 0 rgba(37,211,102,0.35); }
  50%{ box-shadow: 0 8px 28px rgba(37,211,102,0.5), 0 0 0 12px rgba(37,211,102,0); }
}
.mobile-sticky{
  background: rgba(5,20,17,0.92) !important;
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  border-top: 1px solid rgba(240,193,77,0.15);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.25);
}
.mobile-sticky a{
  transition: background .2s, color .2s, transform .2s;
}
.mobile-sticky a:active{ transform: scale(0.96); }

/* ---------- Reveal polish ---------- */
.reveal{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .85s var(--ease-luxury), transform .85s var(--ease-luxury);
}
.reveal.in{
  opacity: 1;
  transform: none;
}

/* ---------- Crumbs ---------- */
.crumbs{
  background: rgba(5,20,17,0.04);
  border-bottom: 1px solid rgba(11,21,18,0.06);
  font-size: 0.82rem;
  padding: 12px 0;
}
.crumbs a{ color: var(--brass-deep); transition: color .2s; }
.crumbs a:hover{ color: var(--brass); }
.crumbs .current{ color: var(--ink-soft); }

/* ---------- Grain subtlety ---------- */
.grain::before{ opacity: 0.028; }

/* ---------- Section spacing rhythm ---------- */
section{ position: relative; }
@media (min-width:960px){
  section{ padding: 72px 0; }
}

/* ---------- Forms (contact) ---------- */
input, textarea, select{
  transition: border-color .25s, box-shadow .25s, background .25s;
}
input:focus, textarea:focus, select:focus{
  border-color: var(--brass) !important;
  box-shadow: 0 0 0 3px rgba(212,160,23,0.18) !important;
  outline: none;
}

/* ---------- Smooth image treatment ---------- */
img{ transition: opacity .4s var(--ease-luxury); }
.brand-logo{ transition: transform .4s var(--ease-luxury), filter .3s; }
.brand:hover .brand-logo{ transform: scale(1.03); filter: brightness(1.05); }

/* ---------- Reduced motion safety ---------- */
@media (prefers-reduced-motion: reduce){
  .btn::after, .hero::after, .cta-band::before, .wa-float{ animation: none !important; }
  .btn:hover::after{ transform: none; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* Scroll progress — premium brass line */
#scroll-progress{
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  z-index: 9999;
  background: linear-gradient(90deg, var(--brass-deep), var(--brass-bright), #F5D078);
  box-shadow: 0 0 12px rgba(240,193,77,0.5);
  transition: width 0.08s linear;
  pointer-events: none;
}
header.site.scrolled{
  background: rgba(3,15,12,0.92) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
  border-bottom-color: rgba(240,193,77,0.12);
}

/* Subtle page load fade */
body{
  animation: pageIn 0.6s var(--ease-luxury) both;
}
@keyframes pageIn{
  from{ opacity: 0.92; }
  to{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  body{ animation: none; }
  #scroll-progress{ transition: none; }
}