@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ============================================================
   SHER ENERGY SYSTEMS — v10
   One family: Instrument Sans. One background. Navy + gold.
   RULE: classes that control vertical rhythm use padding-top /
   padding-bottom longhand ONLY. .wrap owns horizontal padding.
   ============================================================ */

:root{
  --bg:#F4F0E7;
  --surface:#FFFFFF;
  --navy:#14263F;
  --navy-2:#1C3452;
  --gold:#B8935B;
  --gold-light:#D9BD8E;
  --ink:#262A31;
  --rule:#E2DBC9;
  --rule-dark:#2C4562;
  --dim:#9DAEC2;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Instrument Sans',-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-size:17px; line-height:1.65;
}
a{color:inherit; text-decoration:none;}
img,svg{max-width:100%; display:block;}

.wrap{max-width:1060px; margin:0 auto; padding-left:24px; padding-right:24px;}
@media(min-width:720px){ .wrap{padding-left:40px; padding-right:40px;} }

.label{
  font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
}

/* ---------- HEADER ---------- */
header{
  padding-top:18px; padding-bottom:18px;
  border-bottom:1px solid var(--rule); position:sticky; top:0; z-index:50;
  background:rgba(244,240,231,0.94); backdrop-filter:blur(10px);
}
nav{display:flex; justify-content:space-between; align-items:center; gap:20px;}
.logo{font-weight:700; font-size:15px; letter-spacing:0.07em; display:flex; align-items:center; gap:10px; white-space:nowrap;}
.logo img{height:28px; width:auto;}
.nav-right{display:flex; align-items:center; gap:32px;}
.navlinks{display:flex; gap:28px; font-size:14px; font-weight:500; color:var(--ink);}
.navlinks a{position:relative; padding-bottom:3px; opacity:0.7; transition:opacity .25s ease;}
.navlinks a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--gold); transition:width .3s ease;}
.navlinks a:hover{opacity:1;}
.navlinks a:hover::after{width:100%;}
.navlinks a.active{opacity:1;}
.navlinks a.active::after{width:100%; background:var(--navy);}
.nav-cta{
  border:1px solid var(--navy); border-radius:3px; padding:9px 18px;
  font-size:13px; font-weight:600; white-space:nowrap; transition:all .3s ease;
}
.nav-cta:hover{background:var(--navy); color:#fff;}

.menu-btn{
  display:none; background:none; border:none; cursor:pointer; padding:6px;
  width:40px; height:36px; flex-direction:column; justify-content:center; gap:6px;
}
.menu-btn span{display:block; height:2px; width:24px; background:var(--navy); transition:transform .3s ease, opacity .3s ease; margin-left:auto; margin-right:auto;}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg);}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

@media(max-width:820px){
  .menu-btn{display:flex;}
  .nav-right{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--bg); border-bottom:1px solid var(--rule);
    flex-direction:column; align-items:stretch; gap:0;
    padding-top:8px; padding-bottom:20px;
    box-shadow:0 20px 30px -20px rgba(20,38,63,0.25);
  }
  .nav-right.open{display:flex;}
  .navlinks{flex-direction:column; gap:0;}
  .navlinks a{padding:14px 24px; font-size:16px; border-bottom:1px solid var(--rule); opacity:0.85;}
  .navlinks a::after{display:none;}
  .navlinks a.active{color:var(--navy); font-weight:600;}
  .nav-cta{margin:16px 24px 0; text-align:center; padding:13px 18px;}
}

/* ---------- DARK BANDS ---------- */
.dark-band{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);
  color:var(--bg); position:relative; overflow:hidden;
}
.dark-band::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 900px 460px at 50% -10%, rgba(184,147,91,0.14), transparent 70%);
}
.dark-band > .wrap{position:relative; z-index:1;}

/* ---------- HERO (home) ---------- */
.hero{padding-top:84px; padding-bottom:72px; text-align:center;}
.kicker{color:var(--gold-light); margin-bottom:22px;}
.hero h1{
  font-weight:600; font-size:clamp(32px,6.2vw,66px); line-height:1.08;
  letter-spacing:-0.02em; max-width:17ch; margin-left:auto; margin-right:auto;
}
.hero h1 em{font-style:normal; color:var(--gold-light);}
.hero-sub{max-width:52ch; margin:24px auto 0; font-size:clamp(16px,2vw,19px); color:var(--dim);}
.hero-cta{margin-top:38px; display:flex; gap:18px; justify-content:center; flex-wrap:wrap;}

.chart-underline{margin:46px auto 0; max-width:620px;}
.chart-line{stroke-dasharray:1100; stroke-dashoffset:1100; animation:draw 2.2s ease-out .3s forwards;}
@keyframes draw{to{stroke-dashoffset:0;}}
.legend{display:flex; gap:24px; justify-content:center; margin-top:14px; font-size:11px; font-weight:600; letter-spacing:0.1em; color:var(--dim);}
.legend span{display:inline-flex; align-items:center; gap:8px;}
.swatch{width:16px; height:2px; display:inline-block;}

/* ---------- PAGE HERO (interior) ---------- */
.page-hero{padding-top:72px; padding-bottom:64px;}
.page-hero .kicker{display:flex; align-items:center; gap:12px;}
.page-hero .kicker::before{content:''; width:28px; height:1px; background:var(--gold);}
.page-hero h1{font-weight:600; font-size:clamp(28px,4.6vw,50px); line-height:1.12; letter-spacing:-0.015em; max-width:20ch;}
.page-hero p.lead{max-width:54ch; margin-top:20px; font-size:17px; color:var(--dim);}
@media(max-width:640px){
  .page-hero{text-align:center;}
  .page-hero .kicker{justify-content:center;}
  .page-hero h1, .page-hero p.lead{margin-left:auto; margin-right:auto;}
}

/* ---------- BUTTONS ---------- */
.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  background:var(--navy); color:#fff; border-radius:3px;
  padding:15px 28px; font-size:14px; font-weight:600; letter-spacing:0.02em;
  transition:all .3s ease; box-shadow:0 4px 14px -6px rgba(20,38,63,0.35);
}
.btn-primary:hover{background:var(--gold); color:var(--navy); transform:translateY(-1px);}
.dark-band .btn-primary{background:var(--gold); color:var(--navy);}
.dark-band .btn-primary:hover{background:var(--gold-light);}
.btn-ghost{
  display:inline-flex; align-items:center; font-size:14px; font-weight:600;
  border-bottom:1px solid currentColor; padding-bottom:2px;
  opacity:0.75; transition:opacity .25s ease;
}
.btn-ghost:hover{opacity:1;}

/* ---------- SECTIONS ---------- */
.section{padding-top:88px; padding-bottom:88px;}
.section.bordered{border-top:1px solid var(--rule);}
.section.tight{padding-top:64px; padding-bottom:64px;}
h3.head{font-weight:600; font-size:clamp(24px,3.4vw,32px); letter-spacing:-0.01em; margin-bottom:12px;}
p.section-sub{color:var(--ink); opacity:0.6; max-width:52ch; margin-bottom:48px; font-size:16px;}

/* ---------- CARDS ---------- */
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.card-grid.two{grid-template-columns:repeat(2,1fr);}
.card{
  background:var(--surface); border:1px solid var(--rule); border-radius:6px;
  padding:34px 30px;
  box-shadow:0 2px 4px rgba(20,38,63,0.03), 0 14px 30px -22px rgba(20,38,63,0.18);
}
.card .icon{margin-bottom:20px; color:var(--navy);}
.card .icon svg{width:44px; height:44px;}
.card h4{font-weight:600; font-size:19px; line-height:1.3; margin-bottom:10px; color:var(--navy);}
.card p{font-size:15px; opacity:0.7; line-height:1.6;}
.card .pill{margin-top:18px;}
@media(max-width:820px){.card-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:540px){.card-grid, .card-grid.two{grid-template-columns:1fr;}}

.pill{
  display:inline-block; font-size:10px; font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--navy); background:rgba(20,38,63,0.06);
  border:1px solid rgba(20,38,63,0.12); border-radius:99px; padding:5px 12px;
}

/* ---------- SERVICE LIST ---------- */
.svc{border-top:1px solid var(--rule);}
.svc-row{
  display:grid; grid-template-columns:56px 1fr auto; gap:24px; align-items:start;
  padding-top:30px; padding-bottom:30px; border-bottom:1px solid var(--rule);
  transition:background .3s ease;
}
.svc-row:hover{background:rgba(184,147,91,0.05);}
.svc-row .icon{color:var(--navy); padding-top:4px;}
.svc-row .icon svg{width:40px; height:40px;}
.svc-row h4{font-weight:600; font-size:20px; color:var(--navy); line-height:1.3;}
.svc-row h4 .gloss{font-weight:400; font-size:14px; opacity:0.45;}
.svc-row p{font-size:15px; opacity:0.7; max-width:60ch; margin-top:6px;}
.svc-row .pill{margin-top:4px;}
@media(max-width:640px){
  .svc-row{grid-template-columns:44px 1fr;}
  .svc-row .icon svg{width:34px; height:34px;}
  .svc-row .pill{grid-column:2;}
}

/* ---------- FIELD NOTE ---------- */
.note{padding-top:88px; padding-bottom:88px; border-top:1px solid var(--rule);}
.note-inner{display:grid; grid-template-columns:1fr 1.6fr; gap:60px;}
.note .label{color:var(--gold); }
.note h2{font-weight:600; font-size:clamp(22px,3vw,30px); line-height:1.25; margin-top:14px;}
.note .body p{margin-bottom:18px; opacity:0.8;}
.note .body p.pull{
  font-size:clamp(18px,2.4vw,22px); font-weight:500; color:var(--navy); opacity:1; line-height:1.45;
  border-left:2px solid var(--gold); padding-left:20px;
}
@media(max-width:800px){.note-inner{grid-template-columns:1fr; gap:28px;}}

/* ---------- STAT STRIP ---------- */
.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.stat{padding-top:28px; padding-bottom:28px; padding-left:8px; padding-right:8px; text-align:center;}
.stat + .stat{border-left:1px solid var(--rule);}
.stat .num{font-weight:600; font-size:clamp(18px,2.4vw,26px); color:var(--navy); letter-spacing:-0.01em;}
.stat .lbl{font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; opacity:0.5; margin-top:8px;}
@media(max-width:700px){
  .stat-strip{grid-template-columns:1fr 1fr;}
  .stat:nth-child(3){border-left:none;}
  .stat:nth-child(1), .stat:nth-child(2){border-bottom:1px solid var(--rule);}
}

/* ---------- QUOTE ---------- */
.proof{padding-top:96px; padding-bottom:96px; text-align:center; border-top:1px solid var(--rule);}
.proof blockquote{
  font-weight:500; font-size:clamp(21px,3.2vw,32px); line-height:1.4;
  max-width:26ch; margin-left:auto; margin-right:auto; color:var(--navy); letter-spacing:-0.01em;
}
.proof blockquote::before{
  content:''; display:block; width:34px; height:2px; background:var(--gold);
  margin:0 auto 30px;
}
.proof cite{display:block; margin-top:26px; font-style:normal; font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; opacity:0.5;}

/* ---------- PROCESS (dark band on Services) ---------- */
.process-band{padding-top:88px; padding-bottom:88px;}
.process-band h3.head{color:#fff;}
.process-band p.section-sub{color:var(--dim); opacity:1;}
.process{list-style:none; counter-reset:step; border-top:1px solid var(--rule-dark);}
.process li{
  counter-increment:step; display:grid; grid-template-columns:56px 1fr; gap:20px;
  align-items:baseline; padding-top:26px; padding-bottom:26px; border-bottom:1px solid var(--rule-dark);
}
.process li::before{
  content:counter(step,decimal-leading-zero);
  font-weight:600; font-size:20px; color:var(--gold-light); line-height:1.3;
}
.process h4{font-weight:600; font-size:19px; color:#fff; margin-bottom:6px; line-height:1.3;}
.process p{color:var(--dim); font-size:15px; max-width:62ch;}
@media(max-width:640px){
  .process li{grid-template-columns:40px 1fr; gap:14px;}
  .process li::before{font-size:17px;}
}

/* ---------- ABOUT ---------- */
.about-grid{display:grid; grid-template-columns:0.8fr 1.4fr; gap:60px; align-items:start;}
.about-grid h2{font-weight:600; font-size:clamp(24px,3vw,32px); line-height:1.2; color:var(--navy);}
.about-grid .role{margin-top:10px; color:var(--gold); }
.about-grid .body p{opacity:0.8; margin-bottom:18px;}
@media(max-width:800px){.about-grid{grid-template-columns:1fr; gap:24px;}}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid; grid-template-columns:1.2fr 0.8fr; gap:70px;}
@media(max-width:820px){.contact-grid{grid-template-columns:1fr; gap:48px;}}
.field{margin-bottom:22px;}
.field label{display:block; font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; opacity:0.55; margin-bottom:8px;}
.field input, .field textarea, .field select{
  width:100%; background:var(--surface); border:1px solid var(--rule); border-radius:4px;
  font-family:inherit; font-size:16px; color:var(--navy);
  padding:13px 16px; outline:none; transition:border-color .25s ease, box-shadow .25s ease;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,147,91,0.15);
}
.field textarea{resize:vertical; min-height:110px;}
.submit-note{font-size:13px; opacity:0.55; margin-top:14px;}
.contact-details{font-size:15px; line-height:1.9;}
.contact-details .h{display:block; font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--navy); opacity:0.5; margin-top:26px; margin-bottom:6px;}
.contact-details .h:first-child{margin-top:0;}
.contact-details a{border-bottom:1px solid var(--rule); transition:border-color .25s ease;}
.contact-details a:hover{border-color:var(--gold);}

/* ---------- FOOTER (identical on all pages) ---------- */
footer{padding-top:72px; padding-bottom:36px;}
.foot-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; align-items:start;
  padding-bottom:52px; border-bottom:1px solid var(--rule-dark);
}
.foot-brand .logo{font-size:14px; color:#fff;}
.foot-brand p{margin-top:14px; font-size:14px; color:var(--dim); max-width:30ch;}
.foot-col .label{color:var(--gold-light); margin-bottom:16px; display:block;}
.foot-col a, .foot-col span{display:block; font-size:14px; color:var(--dim); padding-top:5px; padding-bottom:5px; transition:color .25s ease;}
.foot-col a:hover{color:#fff;}
.copyright{
  padding-top:26px; font-size:12px; color:var(--dim); opacity:0.75;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
@media(max-width:700px){
  .foot-grid{grid-template-columns:1fr; gap:36px; text-align:center;}
  .foot-brand p{margin-left:auto; margin-right:auto;}
  .foot-brand .logo{justify-content:center;}
  .copyright{justify-content:center; text-align:center;}
}

/* ---------- MODAL ---------- */
.modal-overlay{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(20,38,63,0.6); backdrop-filter:blur(4px);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.modal-overlay.open{opacity:1; pointer-events:auto;}
.modal-box{
  background:var(--surface); max-width:430px; width:100%;
  padding:46px 38px 38px; border-radius:8px;
  position:relative; text-align:center; box-shadow:0 30px 70px -20px rgba(20,38,63,0.5);
  transform:translateY(14px) scale(0.97); opacity:0;
  transition:transform .4s cubic-bezier(.2,.7,.3,1), opacity .4s ease;
}
.modal-overlay.open .modal-box{transform:translateY(0) scale(1); opacity:1;}
.modal-icon{
  width:54px; height:54px; margin:0 auto 22px; border-radius:50%;
  background:linear-gradient(160deg,var(--navy),var(--navy-2));
  display:flex; align-items:center; justify-content:center;
}
.modal-icon svg{width:24px; height:24px;}
.modal-box h3{font-weight:600; font-size:22px; color:var(--navy); margin-bottom:12px;}
.modal-box p{opacity:0.7; font-size:15px; line-height:1.55; max-width:34ch; margin-left:auto; margin-right:auto;}
.modal-close{
  position:absolute; top:16px; right:16px; width:30px; height:30px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; opacity:0.5; font-size:16px;
  border:none; background:none; cursor:pointer; font-family:inherit; transition:opacity .2s ease;
}
.modal-close:hover{opacity:1;}
.modal-dismiss{
  display:inline-block; margin-top:26px; font-size:14px; font-weight:600; font-family:inherit;
  color:var(--navy); border:none; border-bottom:1px solid var(--navy); padding-bottom:2px;
  cursor:pointer; background:none;
}

/* ---------- MISC ---------- */
::selection{background:var(--gold); color:var(--navy);}
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--gold); outline-offset:3px;
}
.reveal{animation:fadeUp .7s cubic-bezier(.2,.6,.2,1) both;}
@keyframes fadeUp{from{opacity:0; transform:translateY(16px);} to{opacity:1; transform:none;}}

@media(max-width:640px){
  .hero{padding-top:56px; padding-bottom:48px;}
  .page-hero{padding-top:52px; padding-bottom:44px;}
  .section{padding-top:60px; padding-bottom:60px;}
  .section.tight{padding-top:48px; padding-bottom:48px;}
  .note{padding-top:60px; padding-bottom:60px;}
  .proof{padding-top:64px; padding-bottom:64px;}
  .process-band{padding-top:60px; padding-bottom:60px;}
  footer{padding-top:56px;}
  .hero-cta{flex-direction:column; align-items:stretch;}
  .card{padding:28px 24px;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal, .chart-line{animation:none; opacity:1; transform:none; stroke-dashoffset:0;}
  .modal-overlay, .modal-box{transition:none;}
}

/* ============================================================
   v11 ADDITIONS: hero scene, calculator, about subnav,
   values grid, counters, FAQ accordion
   ============================================================ */

/* ---------- ANIMATED HERO SCENE ---------- */
.hero-scene{margin:44px auto 0; max-width:680px;}
.sun-core{animation:sunpulse 5s ease-in-out infinite;}
@keyframes sunpulse{0%,100%{opacity:0.9;} 50%{opacity:0.55;}}
.sun-ray{stroke-dasharray:3 7; animation:raydrift 20s linear infinite;}
@keyframes raydrift{to{stroke-dashoffset:-100;}}
.scene-draw{stroke-dasharray:1400; stroke-dashoffset:1400; animation:draw 2.6s ease-out .2s forwards;}
.scene-draw2{stroke-dasharray:900; stroke-dashoffset:900; animation:draw 2.2s ease-out .9s forwards;}
.panel-glint{animation:glint 6s ease-in-out infinite;}
@keyframes glint{0%,88%,100%{opacity:0;} 92%,96%{opacity:0.55;}}

/* ---------- CALCULATOR ---------- */
.calc-band{padding-top:88px; padding-bottom:88px;}
.calc-band h3.head{color:#fff;}
.calc-band p.section-sub{color:var(--dim); opacity:1;}
.calc-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:44px; align-items:start;}
@media(max-width:820px){.calc-grid{grid-template-columns:1fr; gap:32px;}}
.calc-inputs .field label{color:var(--dim); opacity:1;}
.calc-inputs .field input, .calc-inputs .field select{
  background:rgba(255,255,255,0.06); border:1px solid var(--rule-dark); color:#fff;
}
.calc-inputs .field input:focus, .calc-inputs .field select:focus{
  border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,147,91,0.2);
}
.calc-inputs .field select option{color:var(--navy);}
.range-row{display:flex; align-items:center; gap:14px;}
.range-row input[type=range]{flex:1; accent-color:var(--gold); background:transparent; border:none; padding:0;}
.range-val{min-width:84px; text-align:right; font-weight:600; color:var(--gold-light); font-size:15px;}
.calc-results{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media(max-width:480px){.calc-results{grid-template-columns:1fr;}}
.calc-card{
  background:rgba(255,255,255,0.05); border:1px solid var(--rule-dark); border-radius:6px;
  padding:22px 20px;
}
.calc-card .cv{font-weight:600; font-size:clamp(20px,2.6vw,27px); color:var(--gold-light); letter-spacing:-0.01em;}
.calc-card .cl{font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--dim); margin-top:8px;}
.calc-card.wide{grid-column:1/-1;}
.calc-note{margin-top:18px; font-size:13px; color:var(--dim); line-height:1.6;}
.calc-note a{color:var(--gold-light); border-bottom:1px solid currentColor;}

/* ---------- COUNTERS ---------- */
.stat .num[data-count]{font-variant-numeric:tabular-nums;}

/* ---------- ABOUT SUBNAV ---------- */
.subnav{
  position:sticky; top:73px; z-index:40;
  background:rgba(244,240,231,0.95); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--rule);
}
.subnav .wrap{display:flex; gap:6px; overflow-x:auto; padding-top:0; padding-bottom:0;}
.subnav a{
  font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  padding:14px 14px; white-space:nowrap; opacity:0.55; border-bottom:2px solid transparent;
  transition:opacity .25s ease, border-color .25s ease;
}
.subnav a:hover{opacity:1; border-color:var(--gold);}
@media(max-width:820px){.subnav{top:69px;}}

/* ---------- VISION / MISSION / VALUES ---------- */
.vm-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
@media(max-width:700px){.vm-grid{grid-template-columns:1fr;}}
.vm{
  background:linear-gradient(160deg,var(--navy),var(--navy-2)); color:var(--bg);
  border-radius:6px; padding:38px 34px; position:relative; overflow:hidden;
}
.vm::after{content:''; position:absolute; inset:0; background:radial-gradient(ellipse 420px 220px at 85% -10%, rgba(184,147,91,0.22), transparent 70%); pointer-events:none;}
.vm .label{color:var(--gold-light);}
.vm p{margin-top:14px; font-size:clamp(17px,2.2vw,21px); font-weight:500; line-height:1.5; position:relative; z-index:1;}
.values-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:22px;}
@media(max-width:820px){.values-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:540px){.values-grid{grid-template-columns:1fr;}}

/* ---------- FAQ ACCORDION ---------- */
.faq{border-top:1px solid var(--rule);}
.faq details{border-bottom:1px solid var(--rule);}
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:20px;
  padding-top:22px; padding-bottom:22px;
  font-weight:600; font-size:17px; color:var(--navy); transition:color .25s ease;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+'; font-size:22px; font-weight:400; color:var(--gold); transition:transform .3s ease; flex:none;}
.faq details[open] summary::after{transform:rotate(45deg);}
.faq summary:hover{color:var(--gold);}
.faq details p{padding-bottom:24px; font-size:15px; opacity:0.75; max-width:66ch;}

/* ============================================================
   v12: real field photography, photo bands, gallery lightbox
   ============================================================ */
.photo-band{position:relative; overflow:hidden;}
.photo-band img{width:100%; height:clamp(320px,46vw,560px); object-fit:cover; display:block;}
.photo-band .scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,38,63,0.18) 0%, rgba(20,38,63,0) 40%, rgba(20,38,63,0.72) 100%);
}
.photo-band .caption{
  position:absolute; left:0; right:0; bottom:0; padding-bottom:28px; color:var(--bg);
}
.photo-band .caption h3{font-weight:600; font-size:clamp(20px,3vw,28px); letter-spacing:-0.01em; max-width:24ch;}
.photo-band .caption .credit{
  margin-top:8px; font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--gold-light);
}

.photo-hero{position:relative; overflow:hidden; color:var(--bg);}
.photo-hero img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.photo-hero .scrim{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(20,38,63,0.9) 0%, rgba(20,38,63,0.68) 45%, rgba(20,38,63,0.32) 100%);
}
.photo-hero .wrap{position:relative; z-index:1; padding-top:88px; padding-bottom:88px;}
@media(max-width:640px){.photo-hero .wrap{padding-top:60px; padding-bottom:60px;}}

.gallery{display:grid; grid-template-columns:1.5fr 1fr; gap:22px;}
@media(max-width:700px){.gallery{grid-template-columns:1fr;}}
.shot{
  position:relative; border-radius:6px; overflow:hidden; cursor:zoom-in; border:1px solid var(--rule);
  box-shadow:0 2px 4px rgba(20,38,63,0.03), 0 14px 30px -22px rgba(20,38,63,0.18);
  padding:0; background:none; display:block; width:100%;
}
.shot img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s cubic-bezier(.2,.6,.2,1);}
.shot:hover img{transform:scale(1.03);}
.shot .tag{
  position:absolute; left:14px; bottom:14px; z-index:1;
  font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  color:var(--bg); background:rgba(20,38,63,0.75); border-radius:99px; padding:6px 12px;
}
.lightbox{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  background:rgba(12,20,33,0.92); padding:4vw;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.lightbox.open{opacity:1; pointer-events:auto;}
.lightbox img{max-width:100%; max-height:88vh; border-radius:4px; box-shadow:0 30px 80px rgba(0,0,0,0.5);}
.lightbox .lb-close{
  position:absolute; top:20px; right:24px; color:var(--bg); background:none; border:none;
  font-size:26px; cursor:pointer; opacity:0.7; font-family:inherit;
}
.lightbox .lb-close:hover{opacity:1;}
.lightbox .lb-credit{
  position:absolute; bottom:18px; left:0; right:0; text-align:center;
  font-size:11px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:var(--dim);
}

/* ---------- v13: WhatsApp floating CTA ---------- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:150;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 20px rgba(18,60,40,0.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.wa-float:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 10px 26px rgba(18,60,40,0.45);}
.wa-float svg{width:30px; height:30px; fill:#fff;}
.wa-float .wa-tip{
  position:absolute; right:66px; top:50%; transform:translateY(-50%);
  background:var(--navy); color:var(--bg); font-size:12px; font-weight:600;
  padding:8px 14px; border-radius:4px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.wa-float:hover .wa-tip{opacity:1;}
@media(max-width:640px){
  .wa-float{right:16px; bottom:16px; width:52px; height:52px;}
  .wa-float .wa-tip{display:none;}
}