/*
Theme Name: PothwaR Agricultural Products & Services
Theme URI: https://thepothwar.com
Author: PothwaR
Author URI: https://thepothwar.com
Description: A modern, interactive WordPress theme for PothwaR Agricultural Products & Services — built to advocate complimentary, indigenous, and sustainable agriculture in the Pothwar region. Includes Home, Products, Services, Blog, Contact and Career page templates, using the PothwaR brand palette of forest green, olive, orange and sky blue.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: pothwar
Tags: agriculture, blog, custom-menu, custom-logo, translation-ready, one-column, two-columns, threaded-comments
*/

/* ===================================================================
   1. ROOT / BRAND VARIABLES (extracted from PothwaR logo)
=================================================================== */
:root{
  --green-dark:#155c31;
  --green:#1b7a3e;
  --green-mid:#2e8b47;
  --olive:#6b9e23;
  --lime:#8dc63f;
  --orange:#f47a20;
  --blue:#2badea;
  --cream:#f6f9f3;
  --ink:#241f21;
  --ink-soft:#4b4b4b;
  --white:#ffffff;
  --line:#e4ece0;
  --radius:16px;
  --radius-sm:10px;
  --shadow:0 10px 30px rgba(21,92,49,0.10);
  --shadow-lg:0 20px 50px rgba(21,92,49,0.18);
  --maxw:1200px;
  --ff-head:'Poppins', 'Segoe UI', sans-serif;
  --ff-body:'Inter', 'Segoe UI', sans-serif;

  /* Glassmorphism + gradient system */
  --glass-fill:rgba(255,255,255,.42);
  --glass-fill-strong:rgba(255,255,255,.62);
  --glass-border:rgba(255,255,255,.55);
  --glass-shadow:0 12px 40px rgba(21,92,49,.14), inset 0 1px 0 rgba(255,255,255,.5);
  --aurora-1:#1b7a3e;
  --aurora-2:#8dc63f;
  --aurora-3:#f47a20;
  --aurora-4:#2badea;
}

/* ===================================================================
   2. RESET / BASE
=================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:100px;}
body{
  margin:0;
  font-family:var(--ff-body);
  color:var(--ink);
  background:var(--cream);
  line-height:1.65;
  font-size:16px;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}
/* Site-wide animated aurora / mesh gradient — sits fixed behind all content
   so frosted-glass cards have color & motion to reveal. */
body::before{
  content:"";position:fixed;inset:-10% -10% -10% -10%;z-index:-1;
  background:
    radial-gradient(38% 38% at 12% 18%, rgba(27,122,62,.20), transparent 60%),
    radial-gradient(34% 34% at 85% 12%, rgba(244,122,32,.16), transparent 60%),
    radial-gradient(40% 40% at 78% 82%, rgba(43,173,234,.16), transparent 60%),
    radial-gradient(34% 34% at 18% 85%, rgba(141,198,63,.20), transparent 60%);
  filter:blur(30px);
  animation:auroraShift 22s ease-in-out infinite alternate;
  pointer-events:none;
}
img{max-width:100%;display:block;height:auto;}
a{color:inherit;text-decoration:none;transition:.2s ease;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,h5{font-family:var(--ff-head);font-weight:700;line-height:1.08;margin:0 0 .5em;color:var(--green-dark);letter-spacing:-.01em;}
h1{font-size:clamp(2.6rem,5.2vw,4.6rem);font-weight:800;letter-spacing:-.02em;}
h2{font-size:clamp(1.9rem,3.4vw,2.9rem);}
p{margin:0 0 1em;}
button{font-family:inherit;cursor:pointer;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
section{padding:88px 0;}
.section-tight{padding:56px 0;}
.center{text-align:center;}
.gradient-text{
  background:linear-gradient(100deg,var(--lime),var(--orange) 55%,var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% auto;animation:gradientSlide 8s ease-in-out infinite;
}
.tag{
  display:inline-block;background:rgba(27,122,62,.1);color:var(--green);
  padding:6px 16px;border-radius:99px;font-weight:600;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;margin-bottom:16px;
}
.tag.orange{background:rgba(244,122,32,.12);color:var(--orange);}
.tag.blue{background:rgba(43,173,234,.12);color:#1785ab;}

/* Buttons */
.btn{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-flex;align-items:center;gap:8px;
  padding:16px 32px;border-radius:99px;font-weight:700;font-size:15.5px;
  border:2px solid transparent;cursor:pointer;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), box-shadow .28s ease, background-position .5s ease;
  will-change:transform;
}
.btn:active{transform:scale(.95);}
.btn-primary{
  background:linear-gradient(100deg,var(--green),var(--green-mid),var(--lime),var(--green));
  background-size:280% auto;background-position:0% 0;
  color:#fff;box-shadow:0 10px 26px rgba(27,122,62,.35);
}
.btn-primary:hover{background-position:100% 0;transform:translateY(-3px) scale(1.03);box-shadow:0 16px 34px rgba(27,122,62,.42);}
.btn-outline{border-color:var(--white);color:var(--white);backdrop-filter:blur(6px);}
.btn-outline:hover{background:rgba(255,255,255,.16);transform:translateY(-3px) scale(1.03);}
.btn-orange{
  background:linear-gradient(100deg,var(--orange),#ff9a4d,var(--orange));
  background-size:280% auto;background-position:0% 0;
  color:#fff;box-shadow:0 10px 26px rgba(244,122,32,.35);
}
.btn-orange:hover{background-position:100% 0;transform:translateY(-3px) scale(1.03);box-shadow:0 16px 34px rgba(244,122,32,.45);}
.btn-dark-outline{border-color:var(--green);color:var(--green);}
.btn-dark-outline:hover{background:var(--green);color:#fff;transform:translateY(-3px) scale(1.03);}
.btn-sm{padding:11px 22px;font-size:13px;}
.btn .ripple{
  position:absolute;border-radius:50%;pointer-events:none;
  background:rgba(255,255,255,.55);transform:scale(0);
  animation:rippleOut .6s ease-out forwards;
}

/* ===================================================================
   3. HEADER
=================================================================== */
.site-topbar{
  background:linear-gradient(90deg,var(--olive),var(--lime));
  color:#fff;font-size:13px;
}
.site-topbar .container{display:flex;justify-content:space-between;align-items:center;padding-top:8px;padding-bottom:8px;flex-wrap:wrap;gap:6px;}
.site-topbar a{color:#fff;opacity:.95;}
.site-topbar .topbar-links{display:flex;gap:18px;}
.site-topbar .topbar-links span{opacity:.85;}

.site-header{
  background:#fff;
  position:sticky;top:0;z-index:500;
  box-shadow:0 2px 18px rgba(21,92,49,.08);
}
.site-header .container{display:flex;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px;}
.site-branding{display:flex;align-items:center;gap:12px;}
.site-branding img{height:52px;width:auto;}
.site-branding .brand-text{display:flex;flex-direction:column;line-height:1.1;}
.site-branding .brand-name{font-family:var(--ff-head);font-weight:800;font-size:24px;color:var(--green-dark);letter-spacing:-.02em;}
.site-branding .brand-tag{font-size:11.5px;color:var(--ink-soft);letter-spacing:.03em;}

.primary-menu-toggle{
  display:none;background:none;border:none;flex-direction:column;gap:5px;padding:6px;
}
.primary-menu-toggle span{width:26px;height:3px;background:var(--green-dark);border-radius:3px;}

nav.primary-navigation ul{display:flex;align-items:center;gap:6px;}
nav.primary-navigation li{position:relative;}
nav.primary-navigation a{
  display:block;padding:12px 16px;font-weight:600;font-size:15px;color:var(--ink);
  border-radius:99px;
}
nav.primary-navigation li.current-menu-item > a,
nav.primary-navigation a:hover{background:rgba(27,122,62,.1);color:var(--green);}
nav.primary-navigation .cta-link a{background:var(--orange);color:#fff;padding:12px 22px;}
nav.primary-navigation .cta-link a:hover{background:#d8681a;color:#fff;}

/* submenu */
nav.primary-navigation ul ul{
  position:absolute;top:110%;left:0;background:#fff;min-width:210px;
  border-radius:12px;box-shadow:var(--shadow-lg);padding:8px;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;
}
nav.primary-navigation li:hover > ul{opacity:1;visibility:visible;transform:translateY(0);}
nav.primary-navigation ul ul a{padding:10px 14px;border-radius:8px;}

/* ===================================================================
   4. HERO
=================================================================== */
.hero{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--green-dark),var(--green) 45%,var(--blue) 85%,var(--green-mid));
  background-size:300% 300%;
  animation:gradientDrift 16s ease infinite;
  background-position:center;
  color:#fff;padding:110px 0 130px;
}
.hero.hero-photo{
  background-image:
    linear-gradient(135deg,rgba(21,92,49,.90),rgba(27,122,62,.80) 55%,rgba(43,173,234,.55)),
    var(--hero-img);
  background-size:cover;background-position:center;
  animation:none;
}
/* floating decorative glyphs — pure CSS, no markup needed */
.hero::before,.hero::after{
  content:"🌿";position:absolute;font-size:64px;opacity:.16;pointer-events:none;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.25));
}
.hero::before{top:12%;left:6%;animation:floatY 7s ease-in-out infinite, spinSlow 26s linear infinite;}
.hero::after{content:"🌾";top:62%;right:8%;font-size:80px;opacity:.14;animation:floatY 9s ease-in-out infinite reverse, spinSlow 32s linear infinite reverse;}
.hero .container{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;position:relative;z-index:2;}
.hero h1{color:#fff;font-size:clamp(2.6rem,5.6vw,4.8rem);margin-bottom:22px;letter-spacing:-.02em;}
.hero h1 span{
  background:linear-gradient(100deg,var(--lime),#c8e678,var(--lime));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% auto;animation:gradientSlide 6s ease-in-out infinite;
}
.hero p.lead{font-size:19px;color:rgba(255,255,255,.9);max-width:540px;margin-bottom:32px;}
.hero .hero-actions{display:flex;gap:14px;flex-wrap:wrap;}
.hero-stats{display:flex;gap:28px;margin-top:46px;flex-wrap:wrap;}
.hero-stats div strong{display:block;font-size:30px;font-family:var(--ff-head);color:var(--lime);}
.hero-stats div span{font-size:13px;color:rgba(255,255,255,.75);}
.hero-visual{position:relative;}
.hero-visual .hero-card{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);
  border-radius:var(--radius);padding:26px;backdrop-filter:blur(6px);
  animation:floatY 6s ease-in-out infinite;
}
.hero-visual .hero-orb{
  position:absolute;width:220px;height:220px;border-radius:50%;
  background:var(--orange);opacity:.25;filter:blur(10px);top:-40px;right:-40px;
}
.wave-divider{display:block;width:100%;line-height:0;margin-top:-6px;}

/* ===================================================================
   5. GENERIC CARD GRIDS
=================================================================== */
.grid{display:grid;gap:28px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}

.card{
  position:relative;
  background:var(--glass-fill-strong);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-radius:var(--radius);padding:34px 28px;
  box-shadow:var(--glass-shadow);border:1px solid var(--glass-border);
  transition:transform .35s cubic-bezier(.22,.9,.32,1), box-shadow .35s ease, background .35s ease;
}
.card:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 24px 54px rgba(21,92,49,.22), inset 0 1px 0 rgba(255,255,255,.6);background:rgba(255,255,255,.78);}
.card .icon-badge{
  width:58px;height:58px;border-radius:16px;display:flex;align-items:center;justify-content:center;
  font-size:27px;margin-bottom:20px;color:#fff;box-shadow:0 8px 20px rgba(0,0,0,.14);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.card:hover .icon-badge{transform:scale(1.1) rotate(-6deg);}
.card h3{font-size:20px;margin-bottom:10px;}
.card p{color:var(--ink-soft);font-size:14.5px;margin-bottom:0;}

.badge-green{background:linear-gradient(135deg,var(--green),var(--green-mid));}
.badge-orange{background:linear-gradient(135deg,var(--orange),#ff9a4d);}
.badge-blue{background:linear-gradient(135deg,var(--blue),#69c7f0);}
.badge-olive{background:linear-gradient(135deg,var(--olive),var(--lime));}

/* Pillars */
.pillars-grid{grid-template-columns:repeat(6,1fr);}
.pillar{
  text-align:center;padding:26px 14px;border-radius:var(--radius-sm);
  background:var(--glass-fill);backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  border:1px solid var(--glass-border);box-shadow:var(--glass-shadow);
}
.pillar .icon-badge{margin:0 auto 14px;}
.pillar h4{font-size:15px;margin-bottom:4px;color:var(--green-dark);}
.pillar p{font-size:12.5px;color:var(--ink-soft);margin:0;}

/* ===================================================================
   6. SECTION HEADERS
=================================================================== */
.section-head{max-width:700px;margin:0 auto 52px;text-align:center;position:relative;}
.section-head::before{
  content:"🌱";position:absolute;font-size:130px;opacity:.06;top:-46px;left:50%;
  transform:translateX(-50%);z-index:-1;pointer-events:none;animation:floatY 8s ease-in-out infinite;
}
.section-head.left{margin:0 0 44px;text-align:left;}
.section-head.left::before{left:0;transform:none;}
.section-head h2{font-size:clamp(1.9rem,3.6vw,3rem);}
.section-head p{color:var(--ink-soft);font-size:17px;}

/* ===================================================================
   7. PRODUCTS / SERVICES DETAIL BLOCKS
=================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.split.reverse .split-media{order:2;}
.split-media img,.split-media .media-box{
  border-radius:var(--radius);box-shadow:var(--shadow);width:100%;
}
.media-box{
  aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-head);font-weight:700;font-size:20px;color:#fff;text-align:center;padding:20px;
}
.feature-list li{
  display:flex;gap:12px;align-items:flex-start;margin-bottom:12px;font-size:15px;color:var(--ink-soft);
}
.feature-list li::before{
  content:"✓";flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--lime);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;margin-top:2px;
}

.product-block, .service-block{padding:64px 0;border-bottom:1px solid var(--line);}
.product-block:last-child, .service-block:last-child{border-bottom:none;}

.process-steps{counter-reset:step;grid-template-columns:repeat(4,1fr);}
.process-steps .step{position:relative;padding-top:10px;}
.process-steps .step::before{
  counter-increment:step;content:counter(step);
  width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;margin-bottom:16px;font-family:var(--ff-head);
}

/* ===================================================================
   8. CTA BAND
=================================================================== */
.cta-band{
  background:linear-gradient(110deg,var(--orange),#ff9a4d,var(--orange),#ffb877);
  background-size:280% auto;animation:gradientDrift2 10s ease infinite;
  color:#fff;border-radius:28px;
  padding:60px;display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;
}
.cta-band h2{color:#fff;margin-bottom:6px;font-size:clamp(1.5rem,2.6vw,2rem);}
.cta-band p{color:rgba(255,255,255,.92);margin:0;}

/* ===================================================================
   9. BLOG
=================================================================== */
.blog-grid{grid-template-columns:repeat(3,1fr);}
.post-card{
  background:var(--glass-fill-strong);border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--glass-shadow);border:1px solid var(--glass-border);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  transition:transform .35s cubic-bezier(.22,.9,.32,1), box-shadow .35s ease;
}
.post-card:hover{transform:translateY(-8px) scale(1.015);box-shadow:0 24px 54px rgba(21,92,49,.22);}
.post-card .post-thumb{aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,var(--green),var(--olive));}
.post-card .post-thumb img{width:100%;height:100%;object-fit:cover;}
.post-card .post-body{padding:22px;}
.post-card .post-meta{font-size:12.5px;color:var(--green);font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;}
.post-card h3{font-size:18px;margin-bottom:10px;}
.post-card h3 a:hover{color:var(--green);}
.post-card p{font-size:14px;color:var(--ink-soft);}
.post-card .read-more{font-weight:700;color:var(--orange);font-size:13.5px;}

.single-post-header{
  background:linear-gradient(120deg,var(--green-dark),var(--green),var(--blue),var(--green-dark));
  background-size:280% auto;animation:gradientDrift 14s ease infinite;
  color:#fff;padding:80px 0 56px;
}
.single-post-header h1{color:#fff;font-size:clamp(2rem,4.4vw,3.1rem);max-width:800px;}
.single-post-header .post-meta{color:rgba(255,255,255,.8);font-size:14px;}
.entry-content{max-width:780px;margin:0 auto;padding:56px 0;font-size:17px;color:var(--ink-soft);}
.entry-content h2,.entry-content h3{color:var(--green-dark);margin-top:1.4em;}
.entry-content img{border-radius:var(--radius);margin:20px 0;}
.entry-content a{color:var(--green);text-decoration:underline;}
.entry-content blockquote{border-left:4px solid var(--orange);padding-left:20px;color:var(--ink);font-style:italic;margin:24px 0;}

.pagination{display:flex;justify-content:center;gap:10px;margin-top:20px;}
.pagination a,.pagination span{padding:10px 16px;border-radius:99px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:14px;}
.pagination .current{background:var(--green);color:#fff;border-color:var(--green);}

/* ===================================================================
   10. FORMS (contact / career)
=================================================================== */
.form-card{
  background:var(--glass-fill-strong);border-radius:var(--radius);padding:44px;
  box-shadow:var(--glass-shadow);border:1px solid var(--glass-border);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);
}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-group{margin-bottom:18px;}
.form-group label{display:block;font-weight:600;font-size:14px;margin-bottom:6px;color:var(--green-dark);}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:14px 16px;border-radius:12px;border:1.5px solid var(--glass-border);
  font-family:inherit;font-size:15px;background:rgba(255,255,255,.5);
  backdrop-filter:blur(6px);transition:border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{
  outline:none;border-color:var(--green);background:rgba(255,255,255,.9);
  box-shadow:0 0 0 4px rgba(27,122,62,.14);
}
.form-note{font-size:13px;color:var(--ink-soft);margin-top:6px;}
.form-success{background:rgba(141,198,63,.18);border:1px solid var(--lime);color:var(--green-dark);padding:16px 20px;border-radius:12px;margin-bottom:22px;font-weight:600;}
.form-error{background:rgba(244,122,32,.14);border:1px solid var(--orange);color:#8a3d0c;padding:16px 20px;border-radius:12px;margin-bottom:22px;font-weight:600;}

.contact-info-grid{grid-template-columns:1fr 1fr 1fr;}
.contact-info-card{text-align:center;padding:34px 22px;}

/* Career jobs */
.job-card{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  background:var(--glass-fill-strong);border:1px solid var(--glass-border);border-radius:var(--radius-sm);
  padding:24px 28px;margin-bottom:16px;box-shadow:var(--glass-shadow);
  backdrop-filter:blur(14px) saturate(160%);-webkit-backdrop-filter:blur(14px) saturate(160%);
  transition:transform .3s cubic-bezier(.22,.9,.32,1), box-shadow .3s ease;
}
.job-card:hover{transform:translateY(-5px) scale(1.01);box-shadow:0 20px 44px rgba(21,92,49,.2);}
.job-card h3{margin-bottom:4px;font-size:18px;}
.job-card .job-meta{font-size:13px;color:var(--ink-soft);}
.job-card .job-meta span{margin-right:14px;}

/* ===================================================================
   11. FOOTER
=================================================================== */
.site-footer{background:var(--ink);color:#d8dcd6;padding-top:64px;}
.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;}
.site-footer h4{color:#fff;font-size:15px;margin-bottom:18px;letter-spacing:.03em;}
.site-footer a{color:#c3c9bd;font-size:14px;}
.site-footer a:hover{color:var(--lime);}
.footer-about img{height:44px;margin-bottom:14px;}
.footer-about p{font-size:13.5px;color:#a8ada2;}
.footer-links li{margin-bottom:10px;}
.footer-social{display:flex;gap:10px;margin-top:14px;}
.footer-social a{
  width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;font-size:14px;
}
.footer-social a:hover{background:var(--orange);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:48px;padding:22px 0;text-align:center;font-size:13px;color:#8c9186;}
.footer-bottom a{color:#c3c9bd;}

/* ===================================================================
   12. MISC
=================================================================== */
.divider-icon{
  width:60px;height:60px;border-radius:50%;background:var(--white);color:var(--green);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:var(--shadow);font-size:26px;
}
.skip-link{position:absolute;left:-9999px;top:0;background:#fff;padding:10px 16px;z-index:9999;}
.skip-link:focus{left:10px;top:10px;}
.alignwide{max-width:1000px;margin-left:auto;margin-right:auto;}

/* ===================================================================
   13. RESPONSIVE
=================================================================== */
@media (max-width:1024px){
  .hero .container{grid-template-columns:1fr;}
  .hero-visual{order:-1;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .grid-3{grid-template-columns:repeat(2,1fr);}
  .pillars-grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .process-steps{grid-template-columns:repeat(2,1fr);}
  .contact-info-grid{grid-template-columns:1fr;}
}
@media (max-width:780px){
  .primary-menu-toggle{display:flex;}
  nav.primary-navigation{
    position:fixed;top:0;right:-100%;width:82%;max-width:340px;height:100vh;background:#fff;
    padding:90px 24px 24px;transition:.3s ease;box-shadow:-10px 0 30px rgba(0,0,0,.15);overflow-y:auto;z-index:600;
  }
  nav.primary-navigation.is-open{right:0;}
  nav.primary-navigation ul{flex-direction:column;align-items:stretch;gap:2px;}
  nav.primary-navigation ul ul{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:var(--cream);}
  .split{grid-template-columns:1fr;}
  .split.reverse .split-media{order:0;}
  .grid-3,.grid-4,.grid-2{grid-template-columns:1fr;}
  .pillars-grid{grid-template-columns:repeat(2,1fr);}
  .hero h1{font-size:32px;}
  .cta-band{flex-direction:column;text-align:center;}
  .form-row{grid-template-columns:1fr;}
  section{padding:56px 0;}
}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:550;backdrop-filter:blur(2px);}
.nav-overlay.is-open{display:block;}

/* ===================================================================
   14. ANIMATIONS
=================================================================== */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(28px);}
  to{opacity:1;transform:translateY(0);}
}
@keyframes floatY{
  0%,100%{transform:translateY(0px);}
  50%{transform:translateY(-14px);}
}
@keyframes floatSlow{
  0%,100%{transform:translate(0,0) scale(1);}
  50%{transform:translate(10px,-16px) scale(1.05);}
}
@keyframes shimmer{
  0%{background-position:-200% 0;}
  100%{background-position:200% 0;}
}
@keyframes pulseGlow{
  0%,100%{box-shadow:0 8px 20px rgba(244,122,32,.3);}
  50%{box-shadow:0 8px 32px rgba(244,122,32,.55);}
}
@keyframes gradientDrift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}
@keyframes gradientDrift2{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
@keyframes gradientSlide{
  0%,100%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
}
@keyframes auroraShift{
  0%{transform:translate(0,0) rotate(0deg);}
  50%{transform:translate(2%,-2%) rotate(4deg);}
  100%{transform:translate(-2%,2%) rotate(-3deg);}
}
@keyframes spinSlow{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}
@keyframes rippleOut{
  from{transform:scale(0);opacity:.6;}
  to{transform:scale(3);opacity:0;}
}

.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,.9,.32,1),transform .7s cubic-bezier(.22,.9,.32,1);}
.reveal.is-visible{opacity:1;transform:translateY(0);}

.hero-orb{animation:floatSlow 9s ease-in-out infinite;}
.btn-orange:hover{animation:pulseGlow 1.4s ease-in-out infinite;}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:0.001ms !important;animation-iteration-count:1 !important;transition-duration:0.001ms !important;}
  body::before{animation:none !important;}
}

/* ===================================================================
   15. GLASSMORPHISM
=================================================================== */
.glass{
  background:rgba(255,255,255,.14);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 8px 32px rgba(21,92,49,.18);
}
.glass-light{
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 8px 32px rgba(21,92,49,.10);
}

.site-header{
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
}
.site-topbar{position:relative;}
.site-topbar::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.18),transparent);
  background-size:200% 100%;animation:shimmer 6s linear infinite;pointer-events:none;
}

nav.primary-navigation ul ul{
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
}
@media (max-width:780px){
  nav.primary-navigation{
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(24px) saturate(160%);
    -webkit-backdrop-filter:blur(24px) saturate(160%);
  }
}

.hero-visual .hero-card{
  background:rgba(255,255,255,.12);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
}

.pillar{transition:transform .3s cubic-bezier(.22,.9,.32,1), box-shadow .3s ease;}
.pillar:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 20px 44px rgba(21,92,49,.2);}

.cta-band{position:relative;overflow:hidden;}
.cta-band::before{
  content:"";position:absolute;width:260px;height:260px;border-radius:50%;
  background:rgba(255,255,255,.18);top:-90px;right:-60px;filter:blur(4px);
  animation:floatSlow 8s ease-in-out infinite;
}

/* ===================================================================
   16. PHOTO FRAMES (product / service imagery)
=================================================================== */
.photo-frame{
  position:relative;border-radius:var(--radius);overflow:hidden;
  box-shadow:var(--shadow-lg);aspect-ratio:4/3;
}
.photo-frame img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.22,.9,.32,1);
}
.photo-frame:hover img{transform:scale(1.06);}
.photo-frame .photo-caption{
  position:absolute;left:0;right:0;bottom:0;padding:18px 22px;
  background:rgba(255,255,255,.16);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-top:1px solid rgba(255,255,255,.35);
  color:#fff;font-family:var(--ff-head);font-weight:700;font-size:15px;
  display:flex;align-items:center;gap:10px;text-shadow:0 1px 6px rgba(0,0,0,.35);
}
.photo-frame .photo-caption .emoji{font-size:20px;}
.photo-credit{font-size:11.5px;color:var(--ink-soft);opacity:.65;margin-top:8px;text-align:right;}