/* ============================================================
   Sai Energy Systems — implementation of the Claude Design
   Brand: navy #14243A + flame #F05A1E on warm paper #F4F1EB
   Type: Archivo (display) · IBM Plex Sans (body) · IBM Plex Mono
   ============================================================ */

:root{
  --navy:#14243A; --navy-2:#1b3050; --navy-line:#2a4266;
  --flame:#F05A1E; --flame-hover:#d84c14;
  --paper:#F4F1EB; --paper-2:#EEE9DE; --card:#fff; --card-line:#e0dcd2;
  --ink:#14243A; --slate:#5a6472; --slate-2:#33404f; --muted:#8a8577;
  --blue-soft:#7FA8CC; --blue-txt:#b8c4d2; --green:#1F8A5B; --field:#FDFCFA; --field-line:#d8d4c8;
  --wrap:1140px;
  --disp:'Archivo',system-ui,sans-serif;
  --body:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --ta:'Noto Sans Tamil',sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);font-family:var(--body);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{text-decoration:none;color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

.disp{font-family:var(--disp)}
.mono{font-family:var(--mono)}
.ta{font-family:var(--ta)}
.eyebrow{font:600 11px var(--disp);letter-spacing:.26em;color:var(--flame);margin-bottom:12px}
h2.sec{font:800 clamp(27px,4vw,34px)/1.15 var(--disp);color:var(--navy);margin:0 0 10px;text-wrap:balance}
.sec-intro{font-size:15px;line-height:1.6;color:var(--slate);margin:0 0 36px;max-width:40em}
.section-pad{padding:84px 24px 0}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font:700 15px var(--disp);padding:15px 26px;border-radius:8px;cursor:pointer;border:none;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.btn:active{transform:translateY(1px)}
.btn--flame{background:var(--flame);color:#fff}
.btn--flame:hover{background:var(--flame-hover)}
.btn--outline{background:transparent;color:#fff;border:1.5px solid #3a4d66}
.btn--outline:hover{border-color:var(--flame)}

/* ---- Header ---- */
.header{position:sticky;top:0;z-index:50;background:#F4F1EBee;backdrop-filter:blur(8px);border-bottom:1px solid var(--card-line)}
.header__in{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brand svg{width:26px;height:29px}
.brand span{font:800 14px var(--disp);color:var(--navy);letter-spacing:.02em}
.nav{display:flex;align-items:center;gap:26px}
.nav a{font:500 13px var(--body);color:var(--slate-2);transition:color .2s}
.nav a:hover{color:var(--flame)}
.nav a.quote{font:600 13px var(--disp);color:#fff;background:var(--flame);padding:10px 18px;border-radius:6px}
.nav a.quote:hover{background:var(--flame-hover)}
.burger{display:none;width:42px;height:42px;border:1px solid var(--card-line);background:#fff;border-radius:8px;position:relative;cursor:pointer}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--navy);border-radius:2px;transition:transform .35s ease,opacity .2s}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:20px}.burger span:nth-child(3){top:25px}
body.menu-open .burger span:nth-child(1){top:20px;transform:rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){top:20px;transform:rotate(-45deg)}
@media(max-width:820px){.nav{display:none}.burger{display:block}}

.mobile-menu{position:fixed;inset:68px 0 auto 0;z-index:49;background:var(--paper);border-bottom:1px solid var(--card-line);display:flex;flex-direction:column;padding:8px 24px 20px;transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
body.menu-open .mobile-menu{opacity:1;transform:none;pointer-events:auto}
.mobile-menu a{padding:14px 0;font:600 16px var(--disp);color:var(--navy);border-bottom:1px solid var(--card-line)}
.mobile-menu a.quote{color:var(--flame)}

/* ---- Hero ---- */
.hero{background:var(--navy)}
.hero__in{max-width:var(--wrap);margin:0 auto;padding:88px 24px 76px;display:grid;grid-template-columns:1.2fr 1fr;gap:56px;align-items:center}
.hero .kicker{font:600 11px var(--disp);letter-spacing:.24em;color:var(--flame);margin-bottom:22px}
.hero h1{font:900 clamp(34px,6vw,52px)/1.08 var(--disp);color:#fff;letter-spacing:-.01em;text-wrap:balance}
.hero p.sub{font:400 17px/1.65 var(--body);color:var(--blue-txt);margin:20px 0 0;max-width:32em}
.hero p.ta{font:400 15px/1.6 var(--ta);color:var(--blue-soft);margin:14px 0 0}
.hero__cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.stats{display:flex;flex-direction:column;gap:12px}
.stat{background:var(--navy-2);border:1px solid var(--navy-line);border-radius:10px;padding:20px 22px;display:flex;align-items:center;gap:16px}
.stat b{font:800 30px var(--disp);color:var(--flame);flex:0 0 auto}
.stat span{font-size:13px;line-height:1.5;color:var(--blue-txt)}
@media(max-width:860px){.hero__in{grid-template-columns:1fr;gap:36px;padding:64px 24px 56px}}

/* ---- Services ---- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.svc{background:var(--card);border:1px solid var(--card-line);border-radius:10px;padding:26px;transition:border-color .2s,transform .2s}
.svc:hover{border-color:var(--flame);transform:translateY(-3px)}
.svc .code{font:500 10px var(--mono);color:var(--flame);margin-bottom:12px}
.svc h3{font:700 17px var(--disp);color:var(--navy)}
.svc p{font-size:13.5px;line-height:1.65;color:var(--slate);margin:10px 0 0}
.svc--emergency{background:var(--navy);display:flex;flex-direction:column;justify-content:space-between}
.svc--emergency h3{color:#fff}.svc--emergency p{color:var(--blue-txt)}
.svc--emergency a{font:700 16px var(--disp);color:var(--flame);margin-top:16px}
@media(max-width:820px){.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.grid-3{grid-template-columns:1fr}}

/* ---- Spares ---- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.prod{background:var(--card);border:1px solid var(--card-line);border-radius:10px;overflow:hidden;transition:border-color .2s}
.prod:hover{border-color:var(--flame)}
.prod .ph{aspect-ratio:4/3;background:#eae5d9;display:flex;align-items:center;justify-content:center;font:500 9px var(--mono);color:var(--muted)}
.prod .body{padding:16px 18px}
.prod .body b{font:700 14px var(--disp);color:var(--navy)}
.prod .body .tags{font:500 10.5px var(--mono);color:var(--slate);margin-top:5px}
@media(max-width:820px){.grid-4{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.grid-4{grid-template-columns:1fr}}

/* ---- Our work gallery ---- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.shot{margin:0;background:var(--card);border:1px solid var(--card-line);border-radius:10px;overflow:hidden;transition:border-color .2s,transform .2s}
.shot:hover{border-color:var(--flame);transform:translateY(-3px)}
.shot img{width:100%;height:210px;object-fit:cover;display:block}
.shot--wide{grid-column:span 2}
.shot--wide img{height:280px}
.shot figcaption{padding:12px 16px;font:500 12px var(--mono);color:var(--slate);letter-spacing:.01em}
@media(max-width:900px){.gallery{grid-template-columns:repeat(2,1fr)}.shot--wide{grid-column:span 2}.shot img{height:180px}.shot--wide img{height:220px}}
@media(max-width:560px){.gallery{grid-template-columns:1fr}.shot--wide{grid-column:span 1}.shot img,.shot--wide img{height:220px}}

/* ---- Industries ---- */
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.chip{background:var(--card);border:1px solid var(--card-line);border-radius:8px;padding:18px 20px;font:600 14px var(--disp);color:var(--navy);transition:border-color .2s,color .2s}
.chip:hover{border-color:var(--flame);color:var(--flame)}
@media(max-width:820px){.chips{grid-template-columns:1fr 1fr}}

/* ---- About ---- */
.about{background:var(--navy);margin-top:84px}
.about__in{max-width:var(--wrap);margin:0 auto;padding:76px 24px;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about h2{font:800 clamp(27px,4vw,34px)/1.15 var(--disp);color:#fff;margin:0 0 18px;text-wrap:balance}
.about p{font-size:15px;line-height:1.7;color:var(--blue-txt);margin:0 0 14px}
.about__cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.about__cards .c{background:var(--navy-2);border:1px solid var(--navy-line);border-radius:10px;padding:20px}
.about__cards .c b{font:700 14px var(--disp);color:#fff}
.about__cards .c span{font-size:12.5px;color:var(--blue-soft);margin-top:6px;display:block}
@media(max-width:860px){.about__in{grid-template-columns:1fr;gap:36px}}

/* ---- Contact ---- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px}
.cinfo{display:flex;flex-direction:column;gap:14px;font-size:14.5px;color:var(--slate-2)}
.cinfo strong{font:700 12px var(--disp);color:var(--slate);display:block;margin-bottom:3px}
.cinfo a{color:var(--navy);font:600 17px var(--disp)}
.mapframe{width:100%;aspect-ratio:16/8;border:0;border-radius:10px;margin-top:24px}
.form{background:var(--card);border:1px solid var(--card-line);border-radius:12px;padding:32px}
.form h3{font:700 19px var(--disp);color:var(--navy);margin-bottom:20px}
.form .fields{display:flex;flex-direction:column;gap:14px}
.form input,.form select,.form textarea{font:400 14px var(--body);padding:13px 14px;border:1px solid var(--field-line);border-radius:7px;background:var(--field);color:var(--navy);outline:none;transition:border-color .2s}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--flame)}
.form textarea{resize:vertical}
.form .note{font-size:12px;color:var(--muted);text-align:center}
.ph-badge{background:#FFF2CE;border-bottom:2px dotted #D9A400;padding:0 3px;border-radius:3px}
@media(max-width:860px){.contact-grid{grid-template-columns:1fr;gap:36px}}

/* ---- Footer ---- */
.footer{background:var(--navy);border-top:3px solid var(--flame)}
.footer__in{max-width:var(--wrap);margin:0 auto;padding:36px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
.footer .fb{display:flex;align-items:center;gap:10px}
.footer .fb span{font:700 12px var(--disp);color:#fff}
.footer .tag{font:400 12px var(--ta);color:var(--blue-soft)}
.footer .cr{font:500 11px var(--mono);color:#5E7A99}

/* ---- Floating WhatsApp ---- */
.fab{position:fixed;right:20px;bottom:20px;z-index:60;width:58px;height:58px;border-radius:50%;background:#1FA855;display:grid;place-items:center;box-shadow:0 12px 30px -8px rgba(31,168,85,.6);transition:transform .3s ease}
.fab:hover{transform:scale(1.08)}
.fab svg{width:30px;height:30px}