/* ===== Light theme overrides (same palette, light backgrounds) ===== */
:root{--dn2:#0F2A44;--dn5:#1F4E79;--gold:linear-gradient(120deg,#8A6D43,#B8935F)}

/* Nav */
nav{color:var(--ink)}
nav .logo{color:var(--navy);--mk-bg:#0F2A44;--mk-w:#FAF7F2}nav .logo small{color:var(--sandd)}
nav .l a:not(.btn){color:var(--mut);opacity:1}nav .l a:not(.btn):hover{color:var(--navy)}
nav.sc{background:rgba(250,247,242,.9)}

/* Hero */
#hero{background:var(--bg);color:var(--ink)}
.hbg div{background:
  linear-gradient(90deg,rgba(250,247,242,.22) 0%,rgba(250,247,242,.08) 50%,rgba(250,247,242,0) 80%),
  linear-gradient(180deg,rgba(250,247,242,.85) 0%,rgba(250,247,242,.45) 8%,rgba(250,247,242,0) 20%),
  url(../assets/images/hero-blue-hour.webp) center 56%/cover}
#hero h1{color:var(--navy);text-shadow:none}
#hero em,.band h2 em{background:var(--gold);-webkit-background-clip:text;background-clip:text}
#hero .tag{color:var(--sandd)}
#hero .hp{color:var(--mut);text-shadow:none}
.btn.o{border-color:var(--navy);color:var(--navy)}
.btn.o:hover{background:var(--navy);color:#fff}
.gl{background:rgba(255,255,255,.72);border:1px solid rgba(15,42,68,.12);box-shadow:0 24px 60px rgba(15,42,68,.14)}
.gl b{background:var(--gold);-webkit-background-clip:text;background-clip:text}
.gl span{color:var(--ink)}
.badge{background:#fff;box-shadow:0 18px 44px rgba(15,42,68,.18)}
.wv:not(.b):not(.wc) path{fill:#1F4E79;opacity:.18}
@media(max-width:900px){.hbg div{background:linear-gradient(180deg,rgba(250,247,242,.92),rgba(250,247,242,.8) 55%,rgba(250,247,242,.9)),url(../assets/images/hero-blue-hour.webp) center 56%/cover}}

/* Ticker */
.tick{background:var(--bg2);color:var(--navy);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tick span{color:var(--coral)}

/* Opportunity */
#why{background:radial-gradient(900px 420px at 50% 0,rgba(31,78,121,.08),transparent),radial-gradient(700px 420px at 95% 100%,rgba(200,169,126,.22),transparent),var(--bg);color:var(--ink)}
#why .sub{color:var(--mut)}#why .k{color:var(--sandd)}
#why .c{background:#fff;border:1px solid var(--line);backdrop-filter:none;box-shadow:0 10px 30px rgba(15,42,68,.06)}
#why .c p{color:var(--mut)}
#why .n{background:var(--gold);-webkit-background-clip:text;background-clip:text}
#why .w>p:last-child{color:var(--mut)!important}
#why h2 em,.dk h2 em{background:var(--gold);-webkit-background-clip:text;background-clip:text}

/* Formerly dark sections */
.dk{--bg:#F1EADF;--bg2:#FAF7F2;--ink:#14233A;--mut:#5B6677;--line:#DDD3C3;--card:#fff;
  background:radial-gradient(800px 380px at 8% 0,rgba(31,78,121,.07),transparent),radial-gradient(600px 360px at 100% 100%,rgba(200,169,126,.25),transparent),var(--bg);color:var(--ink)}
.dk .k,.dk .tag{color:var(--sandd)}
.dk .ph b{color:var(--sandd)}
.dk td:last-child{color:var(--teal)}
.dk .big{background:linear-gradient(135deg,#0F2A44,#1F4E79);color:#fff}
.dk .big .n,.dk .big h3{color:#fff}

/* Quote band */
.band{color:var(--navy);background:linear-gradient(rgba(250,247,242,.84),rgba(250,247,242,.92)),url(../assets/images/hero.jpg) center 78%/cover fixed,linear-gradient(135deg,#F1EADF,#FAF7F2)}
.band .mk.bigmk{--mk-bg:#0F2A44;--mk-w:#FAF7F2}
.band p{color:var(--sandd)}
@media(max-width:900px){.band{background-attachment:scroll}}

/* CTA + footer */
#cta{background:radial-gradient(700px 360px at 90% 0,rgba(200,169,126,.28),transparent 70%),linear-gradient(135deg,#F1EADF,#FAF7F2);color:var(--ink)}
.logo.xl{--mk-bg:#0F2A44;--mk-w:#FAF7F2;color:var(--navy)}.logo.xl .wm small{color:var(--sandd)}
footer{background:var(--bg2);color:var(--mut);border-top:1px solid var(--line)}
footer .logo{--mk-bg:#0F2A44;--mk-w:#FAF7F2;color:var(--navy)}footer .wm small{color:var(--sandd)}

/* Theme toggle */
.tg{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;padding:0;transition:background .25s,transform .3s,border-color .25s}
.tg:hover{background:rgba(15,42,68,.07);transform:rotate(-12deg)}
.tg .i-sun{display:none}
body{transition:background-color .4s,color .4s}

/* ===== Photo gallery ===== */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.gal figure{margin:0;position:relative;overflow:hidden;border-radius:28px;aspect-ratio:3/4.2;background:#1F4E79 center/cover;background-position:var(--p,center);box-shadow:0 14px 40px rgba(15,42,68,.14);transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.gal figure:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(10,29,49,.78))}
.gal figure:hover{transform:translateY(-6px);box-shadow:0 28px 56px rgba(15,42,68,.24)}
.gal figure:nth-child(2){margin-top:34px}
.gal figcaption{position:absolute;left:24px;right:24px;bottom:22px;z-index:2;color:#fff}
.gal figcaption b{display:block;font:800 22px var(--hd);letter-spacing:-.01em}
.gal figcaption span{display:block;margin-top:4px;font-size:14.5px;color:#E8EDF3}
.img.a{background-position:center 40%}
@media(max-width:900px){.gal{grid-template-columns:1fr}.gal figure{aspect-ratio:4/3.6}.gal figure:nth-child(2){margin-top:0}}
@media(max-width:900px){.gal{grid-auto-rows:auto}}
@media(max-width:620px){nav .btn{white-space:nowrap;padding:8px 14px;font-size:13px}nav .w{gap:8px}.tg{width:36px;height:36px;flex:none}nav .l{gap:10px}}

/* ===== "Our solution": photo background ===== */
#solution{position:relative;background:url(../assets/images/solution.jpg) center/cover no-repeat,#1F4E79;isolation:isolate}
#solution:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(250,247,242,.96) 0%,rgba(250,247,242,.9) 38%,rgba(250,247,242,.45) 68%,rgba(250,247,242,.12) 100%)}
#solution .img.a{background:none;box-shadow:none;visibility:hidden}
#solution .c{background:rgba(255,255,255,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-color:rgba(15,42,68,.1)}
@media(max-width:900px){#solution:before{background:rgba(250,247,242,.9)}#solution .img.a{display:none}}
nav .l a:not(.btn){color:var(--ink);font-weight:500}
html[data-theme="dark"] nav .l a:not(.btn){color:#fff}
#hero .hp{color:#33455C}
@media(max-width:900px){html[data-theme="light"] .hbg div,html:not([data-theme="dark"]) .hbg div{background:linear-gradient(180deg,rgba(250,247,242,.9) 0%,rgba(250,247,242,.78) 50%,rgba(250,247,242,.45) 100%),url(../assets/images/hero-blue-hour.webp) 62% 56%/cover}}

/* Light hero: full photo, no white behind the text. White text over a soft navy tint. */
html:not([data-theme="dark"]) #hero{background:#0F2A44;color:#fff}
html:not([data-theme="dark"]) .hbg div{background:
  linear-gradient(90deg,rgba(9,26,46,.74) 0%,rgba(9,26,46,.5) 34%,rgba(9,26,46,.12) 64%,rgba(9,26,46,0) 85%),
  linear-gradient(180deg,rgba(9,26,46,.4) 0%,rgba(9,26,46,0) 20%),
  url(../assets/images/hero-blue-hour.webp) center 56%/cover}
html:not([data-theme="dark"]) #hero h1{color:#fff;font-size:clamp(44px,6.1vw,88px);letter-spacing:-.035em;text-shadow:none;filter:drop-shadow(0 4px 26px rgba(9,26,46,.5))}
html:not([data-theme="dark"]) #hero h1 em{background:linear-gradient(120deg,#E3CFA6,#F6E9CB);-webkit-background-clip:text;background-clip:text;text-shadow:none}
html:not([data-theme="dark"]) #hero .tag{color:#EBD8B0;text-shadow:0 2px 14px rgba(9,26,46,.6)}
html:not([data-theme="dark"]) #hero .hp{color:#fff;font-weight:400;font-size:20px;line-height:1.6;max-width:500px;text-shadow:0 2px 18px rgba(9,26,46,.6)}
html:not([data-theme="dark"]) #hero .hl{padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
html:not([data-theme="dark"]) #hero .btn.o{border-color:rgba(255,255,255,.9);color:#fff}
html:not([data-theme="dark"]) #hero .btn.o:hover{background:#fff;color:var(--navy)}
html:not([data-theme="dark"]) .wv:not(.b):not(.wc) path{fill:#0F2A44;opacity:.3}
html:not([data-theme="dark"]) nav:not(.sc) .l a:not(.btn){color:#fff;text-shadow:0 1px 10px rgba(9,26,46,.55)}
html:not([data-theme="dark"]) nav:not(.sc) .tg{color:#fff;border-color:rgba(255,255,255,.5);background:rgba(9,26,46,.25)}
#hero .w{width:100%}
@media(max-width:900px){
 html:not([data-theme="dark"]) .hbg div{background:linear-gradient(180deg,rgba(9,26,46,.72) 0%,rgba(9,26,46,.55) 50%,rgba(9,26,46,.25) 100%),url(../assets/images/hero-blue-hour.webp) 62% 56%/cover}
}
@media(max-width:620px){
 html:not([data-theme="dark"]) .hbg div{
  background:
    linear-gradient(180deg,rgba(7,20,36,.88) 0%,rgba(7,20,36,.68) 42%,rgba(7,20,36,.54) 100%),
    linear-gradient(90deg,rgba(7,20,36,.8) 0%,rgba(7,20,36,.38) 58%,rgba(7,20,36,.18) 100%),
    url(../assets/images/hero-blue-hour.webp) 72% 50%/cover}
}

/* Same hero type scale in light and dark */
#hero h1{font-size:clamp(44px,6.1vw,88px);letter-spacing:-.035em;line-height:.94}
#hero .tag{font-size:13px;letter-spacing:.14em;margin-bottom:22px}
#hero .hp{font-size:20px;line-height:1.6;font-weight:400;max-width:500px;margin:24px 0 34px}