/* GrowBahrain site layer v2 — mega menu, new page components. Loads after the kit CSS and gb-motion.css */

/* ---------- mega menu ---------- */
.site-header{position:sticky;top:0;z-index:100}
#main-nav{position:relative}
.has-mega{position:relative}
.has-mega::after{content:"";position:absolute;left:-20px;right:-20px;top:100%;height:26px}
.has-mega > a{display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.has-mega > a::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .3s var(--ease)}
.has-mega.is-open > a::after{transform:rotate(-135deg) translateY(-2px)}
.mega{position:absolute;left:50%;top:calc(100% + 18px);transform:translateX(-50%) translateY(10px);width:min(1040px,calc(100vw - 48px));background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 30px 70px rgba(16,29,47,.14);padding:30px 34px 22px;opacity:0;pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease);z-index:120}
.has-mega.is-open .mega{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.mega-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.mega-group .micro{display:block;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--green);margin-bottom:12px}
.mega-group a{display:block;padding:9px 10px;border-radius:8px;font-weight:600;font-size:.95rem;line-height:1.35;opacity:0;transform:translateY(8px);transition:background .25s,opacity .4s var(--ease),transform .4s var(--ease)}
.mega-group a small{display:block;font-weight:400;color:var(--muted);font-size:.8rem;margin-top:2px}
.mega-group a:hover{background:var(--wash)}
.has-mega.is-open .mega-group a{opacity:1;transform:none}
.has-mega.is-open .mega-group a:nth-child(2){transition-delay:.05s}.has-mega.is-open .mega-group a:nth-child(3){transition-delay:.1s}.has-mega.is-open .mega-group a:nth-child(4){transition-delay:.15s}.has-mega.is-open .mega-group a:nth-child(5){transition-delay:.2s}
.mega-foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.85rem;color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:950px){
  .mega{position:static;transform:none;width:auto;box-shadow:none;border:0;padding:4px 0 10px;opacity:1;pointer-events:auto;display:none}
  .has-mega.is-open .mega{display:block}
  .mega-grid{grid-template-columns:1fr;gap:14px}
  .mega-group a{opacity:1;transform:none;padding:7px 0}
}

.has-mega > a{font-size:.88rem;font-weight:600;padding:8px 0}
.gb-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.gb-hero-grid h1{font-size:clamp(2.3rem,4.3vw,3.9rem)}
@media (max-width:950px){.gb-hero-grid{grid-template-columns:1fr;gap:32px}}

/* ---------- generic page pieces ---------- */
.gb-hero-visual-slot{position:relative;min-height:340px}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.tags span{border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:.85rem;background:#fff}
.dark-section .tags span{border-color:#3b495c;color:#dbe6f3;background:transparent}
.gb-not{border-left:3px solid var(--gold);padding:18px 24px;background:#fffaf0;border-radius:0 10px 10px 0;max-width:860px}
.gb-not h3{margin-bottom:8px;font-size:1.1rem}
.price-table{width:100%;border-collapse:collapse;margin-top:10px}
.price-table th,.price-table td{text-align:left;padding:14px 12px;border-bottom:1px solid var(--line);vertical-align:top;font-size:.95rem}
.price-table th{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.price-table td.y{color:var(--green);font-weight:700}
.price-table td.n{color:#aab3b0}
.price-table tr.total td{font-weight:700;font-size:1.05rem}
.inline-list{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 26px}
.inline-list li{position:relative;padding-left:22px;color:var(--muted)}
.inline-list li::before{content:"";position:absolute;left:0;top:.6em;width:10px;height:10px;border-radius:50%;background:var(--green)}
.dark-section .inline-list li{color:#dbe6f3}
.doors{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.door{display:block;border:1px solid var(--line);border-radius:12px;padding:30px;background:#fff;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s}
.door:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(16,29,47,.08);border-color:#66b599}
.door .micro{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--green);font-weight:700;margin-bottom:10px}
.door h3{font-size:1.5rem;margin-bottom:10px}
.door p{color:var(--muted)}
.door .go{display:inline-block;margin-top:16px;font-weight:600;color:var(--ink)}
.stance{font-size:1.1rem;line-height:1.7;max-width:860px}
.stance p{margin-bottom:14px}
.stance b{color:var(--ink)}
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pill{border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:.85rem;background:#fff}
.pill.off{color:#aab3b0;border-style:dashed}

/* ---------- websites: hero visual (phone assembling a site) ---------- */
.phone{width:min(300px,80vw);margin:0 auto;background:var(--ink);border-radius:36px;padding:14px;box-shadow:0 40px 80px rgba(16,29,47,.25);position:relative}
.phone::before{content:"";position:absolute;left:50%;top:10px;width:90px;height:8px;border-radius:999px;background:#2a3a52;transform:translateX(-50%)}
.phone .screen{background:#fff;border-radius:26px;overflow:hidden;height:560px;display:flex;flex-direction:column;gap:10px;padding:34px 14px 14px}
.ph{border-radius:10px;opacity:0;transform:translateY(16px)}
.ph.hd{height:30px;background:var(--wash);display:flex;align-items:center;padding:0 10px;gap:8px}
.ph.hd i{width:40px;height:10px;border-radius:5px;background:var(--green)}
.ph.hd b{margin-left:auto;width:50px;height:8px;border-radius:4px;background:#d6dde5}
.ph.hero{height:150px;background:linear-gradient(135deg,var(--ink),#1f3352);padding:16px;color:#fff}
.ph.hero span{display:block;height:12px;width:70%;border-radius:6px;background:#fff;opacity:.9;margin-bottom:8px}
.ph.hero span:nth-child(2){width:50%;opacity:.5}
.ph.hero em{display:inline-block;margin-top:14px;width:90px;height:26px;border-radius:7px;background:var(--green)}
.ph.cards{height:110px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ph.cards i{background:var(--wash);border-radius:8px;border:1px solid var(--line)}
.ph.text{height:70px;background:var(--wash)}
.ph.text span{display:block;height:8px;border-radius:4px;background:#d6dde5;margin:12px 12px 0;width:80%}
.ph.text span+span{width:60%}
.ph.wa{margin-top:auto;height:50px;border-radius:999px;background:#25d366;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:.9rem}
html.gb-ready .ph{opacity:1;transform:none;transition:opacity .6s var(--ease),transform .6s var(--ease)}
html.gb-ready .ph.hd{transition-delay:.3s}html.gb-ready .ph.hero{transition-delay:.55s}html.gb-ready .ph.cards{transition-delay:.8s}html.gb-ready .ph.text{transition-delay:1.05s}html.gb-ready .ph.wa{transition-delay:1.3s}
html.gb-ready:not(.motion-paused) .ph.wa{animation:gb-pulse 1.1s ease-out 1.9s 2}
@keyframes gb-pulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.5)}100%{box-shadow:0 0 0 22px rgba(37,211,102,0)}}
html.gb-ready:not(.motion-paused) .phone{animation:gb-float 8s ease-in-out 2.2s infinite}

/* ---------- websites: poster cards ---------- */
.posters{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.poster{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;color:inherit}
.poster:hover{transform:translateY(-6px);box-shadow:0 24px 50px rgba(16,29,47,.1);border-color:#66b599}
.poster-art{height:220px;background:var(--wash);position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.poster-body{padding:26px 28px 28px}
.poster-body .num{font-size:.75rem;letter-spacing:.12em;color:var(--green);font-weight:700}
.poster-body h3{font-size:1.45rem;margin:8px 0 10px}
.poster-body p{color:var(--muted)}
.poster-body .price{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-weight:700}
.poster-body .price span:last-child{color:var(--green)}
/* art 1: single page */
.art1 .mini{position:absolute;left:50%;top:22px;width:120px;height:210px;background:#fff;border:1px solid var(--line);border-radius:18px;transform:translateX(-50%);padding:14px 10px;display:flex;flex-direction:column;gap:6px}
.art1 .mini i{display:block;border-radius:4px;background:#e3e8ee;height:10px;opacity:0;transform:translateY(8px)}
.art1 .mini i.h{height:40px;background:var(--ink)}
.art1 .mini i.b{margin-top:auto;height:18px;border-radius:999px;background:#25d366}
.poster.is-visible .art1 .mini i{opacity:1;transform:none;transition:all .5s var(--ease)}
.poster.is-visible .art1 .mini i:nth-child(2){transition-delay:.15s}.poster.is-visible .art1 .mini i:nth-child(3){transition-delay:.3s}.poster.is-visible .art1 .mini i:nth-child(4){transition-delay:.45s}.poster.is-visible .art1 .mini i:nth-child(5){transition-delay:.6s}
/* art 2: five pages */
.art2 .pg{position:absolute;bottom:-20px;width:92px;height:130px;background:#fff;border:1px solid var(--line);border-radius:8px;left:50%;transform:translateX(-50%) rotate(var(--r,0deg)) translateY(60px);opacity:0;transform-origin:bottom center;box-shadow:0 6px 16px rgba(16,29,47,.06)}
.art2 .pg::before{content:"";position:absolute;left:12px;right:12px;top:14px;height:8px;border-radius:4px;background:var(--green)}
.art2 .pg::after{content:"";position:absolute;left:12px;right:30px;top:30px;height:60px;border-radius:4px;background:#eef2f6}
.poster.is-visible .art2 .pg{opacity:1;transform:translateX(-50%) rotate(var(--r,0deg)) translateY(0);transition:all .7s var(--ease) calc(var(--i)*.1s)}
.art2 .lang{position:absolute;top:16px;right:16px;display:flex;gap:6px}
.art2 .lang span{font-size:.7rem;font-weight:700;padding:4px 8px;border-radius:6px;background:#fff;border:1px solid var(--line)}
.art2 .lang span.on{background:var(--ink);color:#fff}
/* art 3: store */
.art3 .grid{position:absolute;inset:22px 22px 60px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.art3 .grid i{background:#fff;border:1px solid var(--line);border-radius:8px;opacity:0;transform:scale(.85)}
.poster.is-visible .art3 .grid i{opacity:1;transform:none;transition:all .45s var(--ease) calc(var(--i)*.07s)}
.art3 .cart{position:absolute;left:22px;right:22px;bottom:16px;height:34px;border-radius:8px;background:var(--ink);color:#fff;font-size:.78rem;display:flex;align-items:center;justify-content:space-between;padding:0 12px}
.art3 .cart b{color:#7ff0c9;opacity:0}
.poster.is-visible .art3 .cart b{opacity:1;transition:opacity .4s var(--ease) .8s}
/* art 4: custom */
.art4 .blk{position:absolute;background:#fff;border:1px solid var(--line);border-radius:10px;opacity:0;transform:translate(var(--x,0),var(--y,0)) scale(.9)}
.art4 .blk.g{background:var(--green);border-color:var(--green)}
.art4 .blk.d{background:var(--ink);border-color:var(--ink)}
.poster.is-visible .art4 .blk{opacity:1;transform:none;transition:all .7s var(--ease) calc(var(--i)*.1s)}

/* ---------- websites: industries with faded background ---------- */
.industries{position:relative;overflow:hidden}
.ind-bg{position:absolute;inset:0;pointer-events:none;opacity:.14}
.ind-bg i{position:absolute;border-radius:12px;background:#fff;border:1px solid #fff;animation:gb-drift var(--d,40s) linear infinite}
.ind-bg i::before{content:"";position:absolute;left:10%;right:10%;top:12%;height:8%;border-radius:4px;background:var(--green)}
.ind-bg i::after{content:"";position:absolute;left:10%;right:30%;top:30%;height:40%;border-radius:4px;background:#fff;opacity:.5}
@keyframes gb-drift{from{transform:translateY(60vh) rotate(-2deg)}to{transform:translateY(-120vh) rotate(2deg)}}
html.motion-paused .ind-bg i{animation-play-state:paused}
.ind-grid{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ind{display:block;border:1px solid #2a3b55;border-radius:12px;padding:26px;background:rgba(255,255,255,.04);transition:transform .45s var(--ease),background .3s,border-color .3s;color:#fff}
.ind:hover{transform:translateY(-4px);background:rgba(255,255,255,.07);border-color:var(--green)}
.ind .num{color:var(--green);font-size:.75rem;letter-spacing:.12em;font-weight:700}
.ind h3{margin:10px 0 10px;font-size:1.3rem}
.ind p{color:#b6c3cf;font-size:.95rem}

/* ---------- websites: easy to use (sticky phone) ---------- */
.easy{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.easy-left{position:sticky;top:110px}
.easy-left .phone{margin:28px 0 0}
.easy-left .phone .screen{height:420px;display:block;padding:34px 16px 16px;position:relative}
.scene{position:absolute;inset:34px 16px 16px;opacity:0;transform:translateY(10px);transition:opacity .5s var(--ease),transform .5s var(--ease);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center}
.scene.on{opacity:1;transform:none}
.scene .big{width:120px;height:120px;border-radius:50%;background:var(--wash);display:grid;place-items:center;font-size:48px}
.scene p{font-weight:600;color:var(--ink)}
.scene .meter{width:160px;height:80px;border-radius:160px 160px 0 0;border:12px solid #e3e8ee;border-bottom:0;position:relative;overflow:hidden}
.scene .meter::after{content:"";position:absolute;inset:-12px;border-radius:50%;border:12px solid var(--green);border-color:var(--green) var(--green) transparent transparent;transform:rotate(-135deg);transition:transform 1.2s var(--ease)}
.scene.on .meter::after{transform:rotate(45deg)}
.scene .pay{display:flex;gap:8px}
.scene .pay span{border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:.8rem;font-weight:700}
.scene .tick{width:44px;height:44px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-weight:700;transform:scale(0)}
.scene.on .tick{transform:scale(1);transition:transform .5s var(--ease) .5s}
.easy-points{display:grid;gap:0}
.pt{padding:30px 0 30px 30px;border-left:2px solid var(--line);position:relative;transition:opacity .4s}
.pt::before{content:"";position:absolute;left:-7px;top:36px;width:12px;height:12px;border-radius:50%;background:var(--line);transition:background .3s,box-shadow .3s}
.pt.on::before{background:var(--green);box-shadow:0 0 0 6px rgba(30,180,120,.18)}
.pt h3{margin-bottom:10px;font-size:1.3rem}
.pt p{color:var(--muted)}
.easy-points.has-on .pt:not(.on){opacity:.45}

/* ---------- websites: 3 steps with line ---------- */
.steps3{display:grid;grid-template-columns:1fr 2fr;gap:50px;align-items:start}
.steps-line{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;padding-top:34px}
.steps-line::before{content:"";position:absolute;left:0;right:0;top:12px;height:2px;background:var(--line)}
.steps-line::after{content:"";position:absolute;left:0;right:0;top:12px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1.6s var(--ease)}
.steps-line.is-visible::after{transform:scaleX(1)}
.st{position:relative}
.st::before{content:"";position:absolute;left:0;top:-29px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--line);transition:background .3s,border-color .3s}
.steps-line.is-visible .st::before{background:var(--gold);border-color:var(--gold)}
.steps-line.is-visible .st:nth-child(2)::before{transition-delay:.7s}.steps-line.is-visible .st:nth-child(3)::before{transition-delay:1.4s}
.st .k{font-size:.75rem;color:var(--green);font-weight:700;letter-spacing:.12em}
.st h3{margin:8px 0 8px;font-size:1.25rem}
.st p{color:var(--muted);font-size:.95rem}
.st small{display:block;margin-top:10px;color:#8a95a3;font-size:.8rem}
@media (max-width:950px){
  .posters,.doors,.ind-grid,.easy,.steps3,.inline-list{grid-template-columns:1fr}
  .easy-left{position:static}
  .steps-line{grid-template-columns:1fr;padding-top:0;padding-left:26px;gap:30px}
  .steps-line::before,.steps-line::after{left:5px;right:auto;top:0;bottom:0;width:2px;height:auto;transform-origin:top}
  .steps-line.is-visible::after{transform:scaleY(1)}
  .steps-line::after{transform:scaleY(0)}
  .st::before{left:-26px;top:6px}
}
@media (prefers-reduced-motion:reduce){
  .ph,.art1 .mini i,.art2 .pg,.art3 .grid i,.art4 .blk{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}
  .phone{animation:none!important}.ind-bg i{animation:none!important}
  .steps-line::after{transform:none!important}
}

/* v2.2.3 — package cards */
.pkg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.pkg{background:#fff;border:1px solid var(--line);border-radius:9px;padding:32px;display:flex;flex-direction:column;gap:14px}
.pkg .eyebrow{margin:0}
.pkg-price{font-size:1.9rem;font-weight:800;color:var(--ink);line-height:1.1;margin:0}
.pkg-list{list-style:none;margin:0;padding:0;display:grid;gap:9px;flex:1}
.pkg-list li{position:relative;padding-left:22px;color:#3b4a5c}
.pkg-list li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--green)}
.pkg .button{align-self:flex-start;margin-top:6px}
.pkg-custom{margin-top:24px;background:var(--ink);color:#fff;border:2px solid var(--green);flex-direction:row;align-items:center;justify-content:space-between;gap:32px}
.pkg-custom .eyebrow{color:var(--green)}
.pkg-custom .pkg-price{color:var(--gold)}
.pkg-custom p{color:#d6dde6;margin:0}
.pkg-custom .button{background:var(--green);color:#fff;flex-shrink:0}
.pkg-notes{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:6px;color:#55657a;font-size:.93rem}
.pkg-notes li::before{content:"\2014  ";color:var(--green)}
@media(max-width:950px){.pkg-grid{grid-template-columns:1fr}.pkg-custom{flex-direction:column;align-items:flex-start}}

/* v2.4 — live website */
.compare{width:100%;border-collapse:collapse;font-size:.95rem;background:#fff;border:1px solid var(--line)}
.compare th,.compare td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.compare thead th{background:var(--ink);color:#fff;font-weight:700}
.compare tbody th{font-weight:700;color:var(--ink);width:22%}
.compare td:first-of-type{background:#eefaf4;font-weight:600}
.pkg-list li b{color:var(--ink)}
.dark-section .pkg-list li{color:#d6dde6}
.dark-section .pkg-list li b{color:#fff}

/* v2.4.1 — header logo from the brand kit, no pill */
.site-header .brand-logo{width:auto!important;height:44px!important;display:block}
@media(max-width:950px){.site-header .brand-logo{height:38px!important}}
@media(max-width:720px){.site-header .brand-logo{height:32px!important}}

/* v2.5.5 — Grow family lockups */
.grow-lockup{display:block;height:88px;width:auto;max-width:100%;margin:0 auto 22px 0!important;align-self:flex-start}
@media(max-width:600px){.grow-lockup{height:68px;margin-bottom:18px!important}}
.grow-family{padding:56px 0 64px;background:#fff;border-top:1px solid #e3e9ee}
.grow-family .eyebrow{text-align:center;justify-content:center;margin:0 0 28px}
.grow-family-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:32px 56px;max-width:1000px;margin:0 auto}
.grow-family-row a{display:block;border-radius:12px;outline-offset:6px;transition:opacity .2s}
.grow-family-row a:hover{opacity:.78}
.grow-family-row a:focus-visible{outline:2px solid #1eb478}
.grow-family-row img{display:block;height:76px;width:auto;max-width:100%}
@media(max-width:600px){.grow-family{padding:44px 0 48px}.grow-family-row{gap:22px 28px}.grow-family-row img{height:58px}}

.gbf-family a{display:inline-flex;align-items:center;gap:8px}
.gbf-family a img{width:16px;height:16px;object-fit:contain}