/*
Theme Name: Invara Technologies
Theme URI: https://invara.co.za
Author: Invara Technologies
Author URI: https://invara.co.za
Description: Custom WordPress theme for Invara Technologies — a South African digital solutions and software development company. Built to preserve the original Invara design (navy/electric-blue premium SaaS aesthetic) while adding a dynamic Projects system, SEO-friendly service landing pages, and full Elementor compatibility.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: invara-technologies
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, one-column, two-columns, right-sidebar

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Invara Technologies WordPress Theme is based on the original static
Invara Technologies website design. All layout, spacing, typography,
colours and components below are preserved from that design and wired
up to render dynamically through WordPress templates.
*/

/* ==========================================================================
   Table of Contents
   1.0  WordPress core / accessibility helpers
   2.0  Original Invara Technologies site styles (preserved as-is)
   3.0  WordPress-specific additions (admin bar, alignment, editor, menus)
   ========================================================================== */

/* -----------------------------------------------------------------------
   1.0 WordPress core / accessibility helpers
   ----------------------------------------------------------------------- */
.skip-link.screen-reader-text{
  position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;
}
.skip-link.screen-reader-text:focus{
  position:fixed!important;left:12px;top:12px;width:auto;height:auto;
  background:#008CFF;color:#fff;padding:12px 18px;z-index:100000;
  border-radius:0 0 8px 0;font-weight:600;font-size:14px;text-decoration:none;
}
.screen-reader-text{
  border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;
  overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;
}

/* -----------------------------------------------------------------------
   2.0 Original Invara Technologies site styles (preserved)
   ----------------------------------------------------------------------- */
/* ==========================================================================
   Invara Technologies — shared stylesheet
   Navy / electric-blue premium SaaS aesthetic
   ========================================================================== */
:root{
  --navy-950:#061B33;
  --navy-800:#0A2E52;
  --navy-700:#0F3A66;
  --blue-500:#008CFF;
  --blue-600:#0072D6;
  --blue-100:#E7F2FF;
  --bg-light:#F7FAFD;
  --bg-strip:#EFF4F9;
  --white:#FFFFFF;
  --ink:#101826;
  --ink-soft:#5B6B7E;
  --line:#E4EAF1;
  --radius:14px;
  --wrap:1200px;
  --header-h:78px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--ink);
  background:var(--white);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Manrope',sans-serif;
  color:var(--navy-950);
  margin:0;
  line-height:1.15;
  letter-spacing:-0.012em;
}
p{margin:0;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
ul{margin:0;padding:0;}
li{list-style:none;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px;}
section{padding:100px 0;}
main{display:block;}
@media (max-width:820px){
  section{padding:60px 0;}
  .wrap{padding:0 22px;}
}

/* Skip link (accessibility) */
.skip-link{
  position:absolute;left:-999px;top:auto;
  background:var(--blue-500);color:#fff;padding:12px 18px;
  border-radius:0 0 8px 0;z-index:1000;font-weight:600;font-size:14px;
}
.skip-link:focus{left:0;top:0;}

/* Focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:2.5px solid var(--blue-500);outline-offset:2px;border-radius:4px;
}

.eyebrow{
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  color:var(--blue-600);
  margin-bottom:14px;
  display:block;
  text-transform:uppercase;
}
.lede{
  font-size:16px;
  color:var(--ink-soft);
  max-width:560px;
  margin-top:14px;
}

.btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:13px 24px;
  border-radius:9px;
  font-weight:600;
  font-size:14.5px;
  font-family:'Inter',sans-serif;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--blue-500);color:#fff;box-shadow:0 10px 22px -10px rgba(0,140,255,.6);}
.btn-primary:hover{background:var(--blue-600);}
.btn-ghost-dark{background:transparent;color:#fff;border-color:rgba(255,255,255,.4);}
.btn-ghost-dark:hover{border-color:#fff;background:rgba(255,255,255,.06);}
.btn-outline-blue{background:transparent;color:var(--blue-600);border-color:var(--blue-500);}
.btn-outline-blue:hover{background:var(--blue-100);}

/* ---------- NAV ---------- */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
  height:var(--header-h);
}
.nav{
  max-width:var(--wrap);margin:0 auto;padding:0 32px;
  height:var(--header-h);display:flex;align-items:center;justify-content:space-between;
}
.logo{display:flex;align-items:center;}
.logo img{height:38px;width:auto;}
.nav-links{display:flex;align-items:center;gap:30px;}
.nav-links > li{position:relative;}
.nav-links a{font-size:14.5px;font-weight:500;color:var(--navy-950);padding:6px 0;position:relative;display:inline-flex;align-items:center;gap:5px;}
.nav-links a.active{color:var(--blue-600);}
.nav-links > li > a::after{
  content:"";position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--blue-500);
  transition:width .18s ease;
}
.nav-links > li > a:hover::after,.nav-links a.active::after{width:100%;}
.nav-cta{display:flex;align-items:center;gap:18px;}
.burger{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.burger span{display:block;width:22px;height:2px;background:var(--navy-950);margin:5px 0;border-radius:2px;}

/* dropdown */
.has-dropdown .caret{width:9px;height:9px;transition:transform .18s ease;}
.has-dropdown:hover .caret,.has-dropdown:focus-within .caret{transform:rotate(180deg);}
.dropdown{
  position:absolute;top:100%;left:-16px;min-width:280px;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  box-shadow:0 24px 44px -20px rgba(6,27,51,.28);
  padding:10px;margin-top:14px;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.has-dropdown:hover .dropdown,.has-dropdown:focus-within .dropdown{opacity:1;visibility:visible;transform:translateY(0);}
.dropdown a{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border-radius:8px;width:100%;}
.dropdown a::after{display:none;}
.dropdown a:hover{background:var(--blue-100);}
.dropdown a .dd-title{font-weight:600;font-size:14px;color:var(--navy-950);}
.dropdown a .dd-desc{font-weight:400;font-size:12.5px;color:var(--ink-soft);}
.dropdown .dd-all{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;}

@media (max-width:940px){
  .logo img{height:30px;}
  .nav-links{
    position:fixed;top:var(--header-h);left:0;right:0;bottom:0;overflow-y:auto;
    background:#fff;border-bottom:1px solid var(--line);
    flex-direction:column;align-items:flex-start;gap:0;
    padding:8px 22px 18px;
    transform:translateY(-8px);
    opacity:0;visibility:hidden;
    transition:opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav-links.open{opacity:1;visibility:visible;transform:translateY(0);}
  .nav-links > li{width:100%;}
  .nav-links > li > a{width:100%;padding:12px 0;border-bottom:1px solid var(--line);justify-content:space-between;}
  .burger{display:block;}
  .nav-cta .btn-primary{padding:10px 16px;font-size:13.5px;}
  .dropdown{
    position:static;box-shadow:none;border:none;opacity:1;visibility:visible;transform:none;
    display:none;margin-top:0;padding:4px 0 8px 12px;
  }
  .has-dropdown.mobile-open .dropdown{display:block;}
  .has-dropdown.mobile-open .caret{transform:rotate(180deg);}
  .dropdown a{padding:10px 6px;border-bottom:none;}
}

/* ---------- HERO (home — fills the viewport) ---------- */
.hero{
  position:relative;
  background:linear-gradient(180deg, var(--navy-950) 0%, #081F3B 100%);
  color:#fff;
  overflow:hidden;
  min-height:calc(100svh - var(--header-h));
  min-height:calc(100vh - var(--header-h));
  display:flex;
  align-items:center;
  padding:48px 0;
}
.hero-net{
  position:absolute;inset:0;
  background-image:url('assets/images/net-dark-wide.webp');
  background-size:cover;background-position:center;
  opacity:.6;mix-blend-mode:screen;
  pointer-events:none;
}
.hero-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
  align-items:center;
  width:100%;
}
.hero-kicker{font-size:13px;font-weight:700;letter-spacing:.06em;color:#5FB2FF;margin-bottom:16px;}
.hero h1{font-size:clamp(32px,4vw,48px);font-weight:800;color:#fff;}
.hero h1 .accent{color:#2E9BFF;}
.hero p.desc{color:#B9CCE2;font-size:16px;max-width:480px;margin-top:20px;}
.hero p.tagline-sub{color:#5FB2FF;font-size:14px;font-weight:600;margin-top:18px;letter-spacing:.02em;}
.hero-ctas{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}
.hero-scroll{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  color:#7FAEDD;font-size:11.5px;letter-spacing:.08em;z-index:2;
  animation:bob 2.2s ease-in-out infinite;
}
@keyframes bob{0%,100%{transform:translate(-50%,0);}50%{transform:translate(-50%,6px);}}

/* hero dashboard visual */
.hero-visual{position:relative;min-height:360px;}
.panel{
  position:absolute;
  background:rgba(10,32,58,.92);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:16px 18px;
  box-shadow:0 20px 44px -18px rgba(0,0,0,.55);
}
.panel .lab{font-size:11px;color:#8FB3DA;margin-bottom:4px;display:flex;justify-content:space-between;gap:10px;}
.panel .lab .up{color:#3DD68C;font-weight:600;}
.panel .big{font-family:'Manrope',sans-serif;font-size:20px;font-weight:800;color:#fff;}
.panel-revenue{top:0;left:8%;width:230px;}
.panel-revenue svg{margin-top:10px;display:block;}
.panel-users{top:150px;left:0;width:190px;}
.panel-list{top:0;right:0;width:190px;}
.panel-list .row{display:flex;align-items:center;gap:8px;font-size:12px;color:#D8E6F5;padding:5px 0;}
.panel-list .row .ic{width:16px;height:16px;color:#5FB2FF;flex-shrink:0;}
.panel-status{bottom:0;left:6%;width:170px;}
.panel-status .row{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#D8E6F5;padding:3px 0;}
.panel-status .dot{width:6px;height:6px;border-radius:50%;background:#3DD68C;flex-shrink:0;}
.panel-flow{bottom:-6px;right:2%;width:180px;}
.panel-flow .row{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#D8E6F5;padding:3px 0;}
.side-icons{
  position:absolute;top:36%;right:-46px;
  display:flex;flex-direction:column;gap:10px;
}
.side-icons .chip{
  width:46px;height:46px;border-radius:11px;
  background:rgba(10,32,58,.92);border:1px solid rgba(255,255,255,.14);
  display:flex;align-items:center;justify-content:center;color:#5FB2FF;
  box-shadow:0 10px 20px -10px rgba(0,0,0,.5);
  padding:5px;
}
@media (max-width:980px){
  .hero{min-height:0;padding:52px 0 60px;}
  .hero-inner{grid-template-columns:1fr;padding-bottom:8px;}
  .hero-visual{margin-top:30px;min-height:320px;}
  .side-icons{display:none;}
  .hero-scroll{display:none;}
}
@media (max-width:560px){
  .panel{position:static;width:100% !important;margin-bottom:12px;}
  .hero-visual{min-height:0;}
}

/* ---------- INTERIOR PAGE HERO (service / about / projects / contact / resources) ---------- */
.page-hero{
  position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(180deg, var(--navy-950) 0%, #081F3B 100%);
  padding:64px 0 68px;
}
.page-hero .hero-net{background-image:url('assets/images/net-dark-corner.webp');opacity:.5;}
.page-hero-inner{position:relative;z-index:2;max-width:760px;}
.page-hero h1{font-size:clamp(30px,4vw,44px);color:#fff;font-weight:800;}
.page-hero p.desc{color:#B9CCE2;font-size:16.5px;max-width:640px;margin-top:18px;}
.page-hero .hero-ctas{margin-top:28px;}

/* breadcrumbs */
.breadcrumb{
  position:relative;z-index:2;display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  font-size:12.5px;color:#9FB9D6;margin-bottom:22px;
}
.breadcrumb a{color:#9FB9D6;}
.breadcrumb a:hover{color:#fff;}
.breadcrumb .sep{color:#4C6E93;}
.breadcrumb .cur{color:#fff;font-weight:600;}

/* ---------- ICON STRIP ---------- */
.icon-strip{background:var(--bg-strip);padding:0;}
.strip-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  max-width:var(--wrap);margin:0 auto;padding:26px 32px;
}
.strip-item{
  display:flex;align-items:center;gap:12px;justify-content:center;
  padding:0 18px;border-right:1px solid var(--line);
  font-size:14.5px;font-weight:600;color:var(--navy-950);
}
.strip-item:last-child{border-right:none;}
.strip-item .ic{
  width:34px;height:34px;border-radius:50%;
  background:var(--blue-100);color:var(--blue-600);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
@media (max-width:760px){
  .strip-row{grid-template-columns:1fr 1fr;gap:16px;}
  .strip-item{border-right:none;justify-content:flex-start;}
}

/* ---------- WHAT WE BUILD ---------- */
.build-grid-outer{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center;}
.build-copy h2{font-size:clamp(28px,3.2vw,36px);max-width:400px;}
.build-link-main{display:inline-flex;align-items:center;gap:7px;margin-top:22px;font-size:14.5px;font-weight:600;color:var(--blue-600);}
.build-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.build-card{
  border:1px solid var(--line);
  border-radius:12px;
  padding:26px;
  background:#fff;
  transition:border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.build-card:hover{border-color:var(--blue-500);transform:translateY(-3px);box-shadow:0 20px 36px -26px rgba(0,140,255,.4);}
.build-top{display:flex;justify-content:space-between;align-items:flex-start;}
.build-icon{
  width:38px;height:38px;border-radius:9px;
  background:var(--blue-100);color:var(--blue-600);
  display:flex;align-items:center;justify-content:center;
}
.build-num{font-family:'Manrope',sans-serif;font-weight:700;font-size:13px;color:#B7C4D3;}
.build-card h3{font-size:16.5px;margin:16px 0 8px;}
.build-card p{font-size:13.5px;color:var(--ink-soft);}
.build-arrow{display:inline-block;margin-top:14px;color:var(--blue-600);font-size:14px;}
@media (max-width:900px){.build-grid-outer{grid-template-columns:1fr;}.build-copy h2{max-width:100%;}}
@media (max-width:560px){.build-grid{grid-template-columns:1fr;}}

/* ---------- PROBLEM / STATEMENT BLOCK ---------- */
.problem-block{background:var(--bg-light);}
.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.problem-copy h2{font-size:clamp(26px,3.2vw,34px);max-width:460px;}
.problem-copy p{margin-top:16px;}
.problem-list{display:flex;flex-direction:column;gap:14px;margin-top:22px;}
.problem-list li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink-soft);}
.problem-list .x{
  width:22px;height:22px;border-radius:50%;background:#FDE8E8;color:#D8434A;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;margin-top:1px;
}
.problem-fix{background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px;}
.problem-fix h3{font-size:17px;margin-bottom:14px;}
.problem-fix .check-list{display:flex;flex-direction:column;gap:12px;}
.problem-fix .check-list li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--ink);}
.problem-fix .check{
  width:22px;height:22px;border-radius:50%;background:var(--blue-100);color:var(--blue-600);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;
}
@media (max-width:900px){.problem-grid{grid-template-columns:1fr;}}

/* ---------- TRUSTED BAND ---------- */
.trusted{
  position:relative;color:#fff;overflow:hidden;
  background:linear-gradient(100deg, rgba(6,20,38,.94) 30%, rgba(6,20,38,.55) 75%), url('assets/images/office-night.webp');
  background-size:cover;background-position:center;
  padding-bottom:0;
  border-top:1px solid rgba(255,255,255,.1);
}
.trusted-top{padding-top:8px;padding-bottom:56px;max-width:520px;}
.trusted-top .eyebrow{color:#7FC0FF;}
.trusted-top h2{color:#fff;font-size:clamp(26px,3vw,34px);}
.trusted-top p{color:#C7D6E8;margin-top:14px;font-size:15.5px;}
.trusted-top .btn{margin-top:22px;}
.trusted-stats{
  border-top:1px solid rgba(255,255,255,.16);
  display:grid;grid-template-columns:repeat(3,1fr);
}
.stat{padding:30px 32px;border-right:1px solid rgba(255,255,255,.16);}
.stat:last-child{border-right:none;}
.stat .val{font-family:'Manrope',sans-serif;font-weight:800;font-size:26px;color:#4FB6FF;}
.stat .lab{font-size:13.5px;color:#C7D6E8;margin-top:4px;}
@media (max-width:760px){.trusted-stats{grid-template-columns:1fr;}.stat{border-right:none;border-bottom:1px solid rgba(255,255,255,.16);}.stat:last-child{border-bottom:none;}}

/* ---------- SECTION HEAD ---------- */
.section-head{max-width:600px;margin-bottom:48px;}
.section-head h2{font-size:clamp(27px,3.2vw,36px);}
.section-head.center{max-width:640px;margin-left:auto;margin-right:auto;text-align:center;}

/* ---------- SERVICES GRID (overview cards) ---------- */
.services-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.svc-card{
  border:1px solid var(--line);border-radius:12px;
  padding:22px 16px;text-align:left;
}
.svc-icon{
  width:36px;height:36px;border-radius:9px;
  background:var(--blue-100);color:var(--blue-600);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;
}
.svc-card h4{font-size:14px;margin-bottom:6px;}
.svc-card p{font-size:12.5px;color:var(--ink-soft);}
@media (max-width:980px){.services-row{grid-template-columns:repeat(3,1fr);}}
@media (max-width:600px){.services-row{grid-template-columns:1fr 1fr;}}

/* full service cards (services overview page) */
.services-full-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
.svc-full-card{border:1px solid var(--line);border-radius:16px;padding:30px;transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease;}
.svc-full-card:hover{border-color:var(--blue-500);transform:translateY(-3px);box-shadow:0 20px 40px -28px rgba(0,140,255,.35);}
.svc-full-card .svc-icon{width:44px;height:44px;border-radius:11px;margin-bottom:18px;}
.svc-full-card h3{font-size:19px;margin-bottom:10px;}
.svc-full-card p{font-size:14.5px;color:var(--ink-soft);margin-bottom:16px;}
.svc-full-card .tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;}
.svc-full-card .tag-list span{font-size:12px;font-weight:600;color:var(--blue-600);background:var(--blue-100);padding:5px 10px;border-radius:100px;}
.svc-full-card .svc-link{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:var(--blue-600);}
@media (max-width:900px){.services-full-grid{grid-template-columns:1fr;}}

/* ---------- FEATURED WORK ---------- */
.work-outer{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;}
.work-copy h2{font-size:clamp(26px,3.2vw,34px);max-width:340px;}
.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.work-card{border-radius:12px;overflow:hidden;background:var(--navy-950);position:relative;}
.work-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;opacity:.92;}
.work-tag{
  position:absolute;bottom:0;left:0;right:0;
  background:linear-gradient(0deg, rgba(6,20,38,.92), transparent);
  padding:28px 12px 12px;color:#fff;
}
.work-tag h5{font-size:13px;font-weight:700;margin-bottom:2px;}
.work-tag span{font-size:11px;color:#AEC5DD;}
@media (max-width:900px){.work-outer{grid-template-columns:1fr;}.work-copy h2{max-width:100%;}}
@media (max-width:560px){.work-grid{grid-template-columns:1fr 1fr;}}

/* ---------- STATEMENT BAND ---------- */
.statement{position:relative;color:#fff;background:var(--navy-950);overflow:hidden;border-top:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1);}
.statement-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center;}
.statement blockquote{
  font-family:'Manrope',sans-serif;font-weight:700;
  font-size:clamp(22px,2.6vw,30px);color:#fff;margin:0;line-height:1.3;
}
.statement .eyebrow{color:#7FC0FF;}
.statement-attr{display:flex;align-items:center;gap:12px;margin-top:26px;}
.statement-attr .n{font-size:14px;font-weight:700;color:#fff;}
.statement-attr .r{font-size:12.5px;color:#9FB9D6;}
.statement-photo{border-radius:14px;overflow:hidden;}
.statement-photo img{width:100%;height:100%;object-fit:cover;}
@media (max-width:900px){.statement-grid{grid-template-columns:1fr;}.statement-photo{order:-1;}}

/* ---------- CARD GRIDS (why / features / use-cases / suitability) ---------- */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.why-card{border:1px solid var(--line);border-radius:12px;padding:26px;}
.why-card h4{font-size:15.5px;margin-bottom:8px;display:flex;align-items:center;gap:10px;}
.why-card h4 .ic{width:30px;height:30px;border-radius:8px;background:var(--blue-100);color:var(--blue-600);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.why-card p{font-size:13.5px;color:var(--ink-soft);}
@media (max-width:900px){.why-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.why-grid{grid-template-columns:1fr;}}

.solutions-list{display:flex;flex-direction:column;}
.solution-row{
  display:grid;grid-template-columns:1.4fr auto 1fr;align-items:center;gap:22px;
  padding:20px 0;border-bottom:1px solid var(--line);
}
.solution-row:first-child{border-top:1px solid var(--line);}
.solution-q{font-size:15.5px;font-weight:500;color:var(--navy-950);font-family:'Manrope',sans-serif;}
.solution-arrow{color:var(--blue-500);font-size:16px;}
.solution-a{
  justify-self:start;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:100px;
  background:var(--blue-100);color:var(--blue-600);
  font-size:13px;font-weight:600;
}
@media (max-width:760px){
  .solution-row{grid-template-columns:1fr;gap:8px;padding:16px 0;}
  .solution-arrow{display:none;}
}

.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;}
.timeline::before{content:"";position:absolute;top:19px;left:5%;right:5%;height:1px;background:var(--line);}
.timeline.t4{grid-template-columns:repeat(4,1fr);}
.t-step{position:relative;padding:0 18px 0 0;}
.t-num{
  width:38px;height:38px;border-radius:50%;
  background:var(--white);border:1.5px solid var(--blue-500);color:var(--blue-600);
  display:flex;align-items:center;justify-content:center;
  font-family:'Manrope',sans-serif;font-weight:700;font-size:14px;
  position:relative;z-index:1;margin-bottom:20px;
}
.t-step h4{font-size:16px;margin-bottom:8px;}
.t-step p{font-size:13.5px;color:var(--ink-soft);}
@media (max-width:820px){.timeline{grid-template-columns:1fr;gap:26px;}.timeline::before{display:none;}}

/* suitability checklist (two-column) */
.suit-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.suit-item{
  display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:18px 20px;
}
.suit-item .check{
  width:26px;height:26px;border-radius:50%;background:var(--blue-100);color:var(--blue-600);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.suit-item p{font-size:14.5px;color:var(--navy-950);font-weight:500;}
@media (max-width:760px){.suit-grid{grid-template-columns:1fr;}}

/* ---------- ABOUT ---------- */
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.about-copy p{color:var(--ink-soft);font-size:15px;margin-bottom:14px;}
.mission-vision{display:flex;flex-direction:column;gap:16px;margin-top:24px;}
.mv-card{border-left:2px solid var(--blue-500);padding:2px 0 2px 16px;}
.mv-card h4{font-size:13.5px;color:var(--blue-600);margin-bottom:5px;}
.mv-card p{font-size:14px;color:var(--ink-soft);}
.about-photo{border-radius:14px;overflow:hidden;}
.approach-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:14px;}
.approach-card-sm{border:1px solid var(--line);border-radius:12px;padding:18px;}
.approach-card-sm h4{font-size:14px;margin-bottom:5px;}
.approach-card-sm p{font-size:12.5px;color:var(--ink-soft);}
@media (max-width:900px){.about-grid{grid-template-columns:1fr;}.about-photo{order:-1;}}

/* ---------- PROJECTS ---------- */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.proj-card{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .18s ease, box-shadow .18s ease;}
.proj-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -28px rgba(6,27,51,.35);}
.proj-thumb{aspect-ratio:16/11;overflow:hidden;background:var(--navy-950);position:relative;}
.proj-thumb img{width:100%;height:100%;max-height:none;object-fit:cover;}
.proj-tag{position:absolute;top:12px;left:12px;background:rgba(6,27,51,.85);color:#fff;font-size:11px;font-weight:600;padding:5px 10px;border-radius:100px;}
.proj-body{padding:18px 20px;}
.proj-body h4{font-size:15.5px;margin-bottom:5px;}
.proj-body p{font-size:13px;color:var(--ink-soft);}
.proj-body ul.feat{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;}
.proj-body ul.feat li{font-size:11px;font-weight:600;color:var(--blue-600);background:var(--blue-100);padding:4px 9px;border-radius:100px;}
@media (max-width:900px){.proj-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:600px){.proj-grid{grid-template-columns:1fr;}}

.note-box{border:1px dashed var(--line);background:var(--bg-light);border-radius:12px;padding:20px 22px;font-size:13.5px;color:var(--ink-soft);margin-top:36px;}
.note-box strong{color:var(--navy-950);}

/* ---------- FAQ ---------- */
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:820px;}
.faq-item{border:1px solid var(--line);border-radius:12px;padding:6px 22px;background:#fff;}
.faq-item summary{
  cursor:pointer;list-style:none;padding:16px 0;font-weight:600;font-size:15px;color:var(--navy-950);
  display:flex;justify-content:space-between;align-items:center;gap:16px;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary .plus{
  width:24px;height:24px;border-radius:50%;background:var(--blue-100);color:var(--blue-600);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px;transition:transform .18s ease;
}
.faq-item[open] summary .plus{transform:rotate(45deg);}
.faq-item p{padding:0 0 18px;color:var(--ink-soft);font-size:14.5px;}

/* ---------- RESOURCES ---------- */
.resource-grid{display:grid;grid-template-columns:1fr;gap:28px;}
.resource-card{border:1px solid var(--line);border-radius:14px;padding:30px;}
.resource-card h3{font-size:19px;margin-bottom:10px;}
.resource-card p{font-size:14.5px;color:var(--ink-soft);}
.resource-card .r-eyebrow{font-size:12px;font-weight:700;color:var(--blue-600);letter-spacing:.05em;text-transform:uppercase;margin-bottom:10px;display:block;}

/* ---------- CTA BAND ---------- */
.cta-band{background:linear-gradient(180deg,#EAF3FC,#F7FAFD);text-align:center;}
.cta-inner{max-width:560px;margin:0 auto;}
.cta-inner .eyebrow{display:block;}
.cta-inner h2{font-size:clamp(26px,3.2vw,34px);}
.cta-inner p{color:var(--ink-soft);margin-top:12px;font-size:15.5px;}
.cta-inner .btn{margin-top:24px;}
.cta-band.dark{background:var(--navy-800);border-top:1px solid rgba(255,255,255,.1);position:relative;}
.cta-band.dark h2{color:#fff;}
.cta-band.dark .eyebrow{color:#7FC0FF;}
.cta-band.dark p{color:#C7D6E8;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;}
.contact-info{display:flex;flex-direction:column;gap:22px;}
.contact-info h3{font-size:18px;margin-bottom:8px;}
.contact-info p{font-size:14.5px;color:var(--ink-soft);}
.info-row{display:flex;gap:14px;align-items:flex-start;}
.info-icon{width:36px;height:36px;border-radius:9px;flex-shrink:0;background:var(--blue-100);color:var(--blue-600);display:flex;align-items:center;justify-content:center;}
.info-row h4{font-size:13.5px;margin-bottom:3px;}
.info-row p{font-size:14px;color:var(--ink-soft);}
.contact-social{display:flex;gap:12px;margin-top:6px;}
form{display:flex;flex-direction:column;gap:16px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{display:flex;flex-direction:column;gap:7px;}
.field label{font-size:12.5px;font-weight:600;color:var(--navy-950);}
.field input,.field select,.field textarea{
  border:1px solid var(--line);border-radius:9px;
  padding:12px 14px;font-size:14px;font-family:'Inter',sans-serif;
  color:var(--ink);background:#fff;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 3px rgba(0,140,255,.15);}
.field textarea{resize:vertical;min-height:110px;}
.form-note{font-size:12px;color:#9AA6B4;margin-top:4px;}
.form-status{font-size:13.5px;font-weight:600;display:none;padding:12px 14px;border-radius:9px;}
.form-status.ok{display:block;background:#E9F9F0;color:#1C8A54;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}.form-row{grid-template-columns:1fr;}}

/* ---------- FOOTER ---------- */
footer{background:var(--navy-950);color:#B9CEE6;padding:64px 0 26px;border-top:1px solid rgba(255,255,255,.14);box-shadow:0 -24px 40px -32px rgba(0,0,0,.35);}
.footer-top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12);}
.footer-brand img{height:34px;width:auto;margin-bottom:14px;}
.footer-brand p.tag{margin-top:0;color:#8FA6C2;font-size:13.5px;max-width:280px;}
.footer-col h4{color:#fff;font-size:13.5px;margin-bottom:16px;}
.footer-col a{display:block;color:#AFC5DE;font-size:13.5px;padding:6px 0;}
.footer-col a:hover{color:#fff;}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding-top:22px;flex-wrap:wrap;gap:14px;font-size:12.5px;color:#7E96B4;}
.footer-bottom .legal{display:flex;gap:20px;}
.footer-bottom .legal a:hover{color:#fff;}

.social{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.social a{
  width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.2);
  display:flex;align-items:center;justify-content:center;color:#B9CEE6;
  transition:border-color .2s ease, color .2s ease, box-shadow .3s ease, transform .2s ease, background .2s ease;
}
.social a:hover,.social a:focus-visible{
  border-color:var(--blue-500);
  color:#fff;
  background:rgba(0,140,255,.12);
  box-shadow:0 0 0 4px rgba(0,140,255,.16), 0 0 22px 2px rgba(46,155,255,.75);
  transform:translateY(-2px);
}
@media (max-width:820px){.footer-top{grid-template-columns:1fr 1fr;}}
@media (max-width:500px){.footer-top{grid-template-columns:1fr;}}

/* All content is visible immediately in the HTML/CSS — for crawlers,
   no-JS users, and anyone who follows a direct link straight to a
   section. Where JS runs, elements already in view on load get a very
   quick, subtle fade-in only; nothing is ever hidden waiting to be
   scrolled to. */
.reveal{opacity:1;transform:none;}
.reveal.pre{opacity:0;transform:translateY(14px);}
.reveal.in{opacity:1;transform:none;transition:opacity .5s ease, transform .5s ease;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .reveal.pre{opacity:1;transform:none;}
  .hero-scroll{animation:none;}
}

/* -----------------------------------------------------------------------
   3.0 WordPress-specific additions
   ----------------------------------------------------------------------- */
img{height:auto;max-width:100%;}
.alignwide{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:1400px;width:auto;}
.alignfull{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);max-width:none;width:auto;}
.aligncenter{margin-left:auto;margin-right:auto;display:block;}
.alignleft{float:left;margin:0 24px 12px 0;}
.alignright{float:right;margin:0 0 12px 24px;}
.wp-caption,figure.wp-block-image{max-width:100%;}
.wp-caption-text,figcaption{font-size:12.5px;color:var(--ink-soft);margin-top:8px;text-align:center;}

/* Admin bar offset so the sticky header isn't hidden behind it */
body.admin-bar header{top:32px;}
@media screen and (max-width:782px){
  body.admin-bar header{top:46px;}
}

/* Generic entry-content wrapper used by page.php / single.php fallback
   templates (non-Elementor pages, blog posts, legal pages, 404 body copy) */
.entry-content{max-width:760px;margin:0 auto;padding:64px 32px;}
.entry-content h1,.entry-content h2,.entry-content h3{margin-top:1.4em;margin-bottom:.5em;}
.entry-content h1:first-child,.entry-content h2:first-child{margin-top:0;}
.entry-content p{margin-bottom:1em;color:var(--ink-soft);font-size:15.5px;}
.entry-content ul,.entry-content ol{margin:0 0 1em 1.3em;color:var(--ink-soft);}
.entry-content a{color:var(--blue-600);text-decoration:underline;}
.entry-title{font-size:clamp(28px,3.4vw,40px);margin-bottom:.6em;}

/* WordPress default gallery grid (safe minimal styling) */
.gallery{display:grid;grid-template-columns:repeat(var(--gallery-columns,3),1fr);gap:12px;margin:24px 0;}
.gallery-item img{border-radius:10px;}

/* Search form (used nowhere by default in this one-page theme, kept for
   template-hierarchy completeness / plugin compatibility) */
.search-form{display:flex;gap:8px;}
.search-form input[type=search]{flex:1;border:1px solid var(--line);border-radius:9px;padding:10px 14px;}

/* Comments (disabled on custom templates, styled minimally for completeness
   on single.php / page.php fallback if a plugin re-enables them) */
.comment-list{list-style:none;margin:0;padding:0;}
.comment-respond input,.comment-respond textarea{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 14px;font-family:inherit;
}

/* -----------------------------------------------------------------------
   Projects — archive spotlight/filter and single-project detail layout.
   ----------------------------------------------------------------------- */
.proj-toolbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:28px;}
.proj-count{font-size:13.5px;color:var(--ink-soft);font-weight:600;}
.proj-filter{display:flex;flex-wrap:wrap;gap:8px;}
.proj-filter a{text-decoration:none;}
.proj-filter span{
  display:inline-block;font-size:12.5px;font-weight:600;color:var(--navy-950);
  background:var(--bg-strip);border:1px solid var(--line);padding:7px 14px;
  border-radius:100px;transition:background .15s,color .15s,border-color .15s;
}
.proj-filter a:hover span{border-color:var(--blue-500);}
.proj-filter span.is-active{background:var(--blue-500);color:#fff;border-color:var(--blue-500);}

.proj-spotlight{
  display:grid;grid-template-columns:1.1fr 1fr;gap:0;background:#fff;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;margin-bottom:36px;box-shadow:0 24px 48px -32px rgba(6,27,51,.25);
}
.proj-spotlight .spot-thumb{position:relative;aspect-ratio:16/12;background:var(--navy-950);}
.proj-spotlight .spot-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.proj-spotlight .spot-tag{position:absolute;top:16px;left:16px;background:rgba(6,27,51,.85);color:#fff;font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:100px;}
.proj-spotlight .spot-eyebrow{color:var(--blue-600);font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:8px;display:block;}
.proj-spotlight .spot-body{padding:34px 36px;display:flex;flex-direction:column;justify-content:center;}
.proj-spotlight .spot-body h3{font-size:22px;margin-bottom:10px;}
.proj-spotlight .spot-body p{font-size:14.5px;color:var(--ink-soft);margin-bottom:18px;}
@media (max-width:820px){
  .proj-spotlight{grid-template-columns:1fr;}
  .proj-spotlight .spot-body{padding:24px;}
}

/* Single project: content + sidebar layout */
.project-layout{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:start;}
.project-main .entry-content{padding:0;max-width:100%;}
.project-sidebar{position:sticky;top:calc(var(--header-h) + 20px);}
.project-detail-card{background:var(--bg-light);border:1px solid var(--line);border-radius:14px;padding:24px;margin-bottom:20px;}
.project-detail-card h4{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);margin-bottom:16px;}
.project-detail-row{display:flex;flex-direction:column;gap:3px;margin-bottom:16px;}
.project-detail-row:last-child{margin-bottom:0;}
.project-detail-row .label{font-size:11.5px;font-weight:700;color:var(--navy-950);text-transform:uppercase;letter-spacing:.03em;}
.project-detail-row .value{font-size:14px;color:var(--ink);}
.project-detail-card .tag-list{margin-top:2px;}
.project-detail-card .btn{width:100%;text-align:center;margin-top:6px;}
@media (max-width:940px){
  .project-layout{grid-template-columns:1fr;}
  .project-sidebar{position:static;order:-1;}
}

.related-projects{margin-top:56px;padding-top:40px;border-top:1px solid var(--line);}
.related-projects h3{font-size:19px;margin-bottom:20px;}