/* =========================================================== People Skills Pakistan — shared design system Ivory canvas · Fraunces + Hanken Grotesk · brass + jali Per-section theme via =========================================================== */ :root{ --paper:#F6F3EA; --paper-2:#EFEBDD; --white:#FCFBF6; --forest:#13402E; --forest-d:#0F3325; --forest-2:#1C5840; --brass:#B08D4F; --brass-soft:#C9AE7C; --ink:#1B1C17; --muted:#6A6A5E; --line:#DAD3C0; --r:2px; --maxw:1240px; --ease:cubic-bezier(.22,.61,.36,1); } /* ---- THEMES: vary the dark anchor per navigation section ---- */ .theme-training{ --forest:#13402E; --forest-d:#0F3325; --forest-2:#1C5840; } .theme-consulting{ --forest:#0E3A42; --forest-d:#0A2D33; --forest-2:#155863; } .theme-industry{ --forest:#1C2E4A; --forest-d:#15233A; --forest-2:#2C4368; } .theme-productivity{ --forest:#5A2A30; --forest-d:#481F24; --forest-2:#7A3A42; } .theme-company{ --forest:#2C2A24; --forest-d:#211F1A; --forest-2:#45423A; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:"Hanken Grotesk",system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} h1,h2,h3,h4,h5{font-family:"Fraunces",Georgia,serif;font-weight:500;line-height:1.1;letter-spacing:-.01em} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .eyebrow{font-size:.72rem;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);display:inline-flex;align-items:center;gap:.7em} .eyebrow::before{content:"";width:26px;height:1px;background:var(--brass)} .btn{display:inline-flex;align-items:center;gap:.55em;font-weight:600;font-size:.92rem;padding:.85em 1.5em;border-radius:var(--r);border:1px solid transparent;cursor:pointer;transition:all .35s var(--ease)} .btn-solid{background:var(--forest);color:var(--white)} .btn-solid:hover{background:var(--forest-2)} .btn-ghost{background:transparent;color:var(--forest);border-color:var(--line)} .btn-ghost:hover{border-color:var(--forest);background:rgba(0,0,0,.03)} .btn-brass{background:var(--brass);color:#231a08} .btn-brass:hover{background:var(--brass-soft)} .btn-light{background:var(--white);color:var(--forest)} .btn-light:hover{background:#fff} .btn .ar{transition:transform .35s var(--ease)} .btn:hover .ar{transform:translateX(4px)} .jali-bg{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23B08D4F' stroke-width='1' opacity='0.5'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z'/%3E%3Cpath d='M30 12 L48 30 L30 48 L12 30 Z'/%3E%3Ccircle cx='30' cy='30' r='6'/%3E%3Cpath d='M0 0 L12 0 L0 12 Z M60 0 L48 0 L60 12 Z M0 60 L12 60 L0 48 Z M60 60 L48 60 L60 48 Z'/%3E%3C/g%3E%3C/svg%3E");background-size:46px 46px} /* ---- utility bar ---- */ .utility{background:var(--forest);color:#D7E4DC;font-size:.8rem;position:relative;z-index:2} .utility .wrap{display:flex;align-items:center;justify-content:space-between;height:40px;gap:18px} .utility a{color:#D7E4DC;transition:color .25s}.utility a:hover{color:#fff} .utility .u-left{display:flex;gap:26px;align-items:center} .utility .u-right{display:flex;gap:22px;align-items:center} .utility .verify{color:var(--brass-soft);font-weight:600;display:inline-flex;align-items:center;gap:.45em} .utility .verify:hover{color:#fff} .u-sep{width:1px;height:14px;background:rgba(255,255,255,.18)} @media(max-width:880px){.utility .u-hide{display:none}} @media(max-width:560px){.utility{font-size:.74rem}.utility .u-left{gap:16px}} /* ---- header / nav ---- */ .header{position:sticky;top:0;z-index:60;background:rgba(246,243,234,.9);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .header .wrap{display:flex;align-items:center;justify-content:space-between;height:78px} .brand{display:flex;align-items:center;gap:12px} .brand .logo-img{height:46px;width:auto} .brand .mark{width:42px;height:42px;border-radius:50%;background:var(--forest);display:grid;place-items:center;color:var(--brass-soft);font-family:"Fraunces",serif;font-weight:600;font-size:1.15rem;box-shadow:0 0 0 1px var(--brass) inset} .brand .bt{line-height:1.05} .brand .bt .n{font-family:"Fraunces",serif;font-size:1.18rem;font-weight:600;color:var(--forest)} .brand .bt .s{font-size:.62rem;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);font-weight:600} .nav{display:flex;align-items:center;gap:4px} .nav-item{position:relative} .nav-link{display:flex;align-items:center;gap:.4em;font-size:.92rem;font-weight:600;color:var(--ink);padding:1.4em .9em;cursor:pointer;position:relative} .nav-link .chev{width:9px;height:9px;border-right:1.6px solid var(--muted);border-bottom:1.6px solid var(--muted);transform:rotate(45deg) translateY(-2px);transition:transform .3s} .nav-item:hover .chev{transform:rotate(225deg) translateY(0)} .nav-link::after{content:"";position:absolute;left:.9em;right:.9em;bottom:1.05em;height:1px;background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)} .nav-item:hover .nav-link::after,.nav-link.simple:hover::after{transform:scaleX(1)} .nav-cta{margin-left:10px} .mega{position:fixed;left:0;right:0;top:118px;background:var(--white);border-top:1px solid var(--brass);border-bottom:1px solid var(--line);box-shadow:0 30px 60px -28px rgba(0,0,0,.28);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;z-index:55} .nav-item.open .mega{opacity:1;visibility:visible;transform:translateY(0)} .mega-inner{max-width:var(--maxw);margin:0 auto;padding:36px 28px 40px} .mega-grid{display:grid;gap:34px} .mega-col h4{font-family:"Hanken Grotesk",sans-serif;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--forest);font-weight:700;margin-bottom:14px;padding-bottom:11px;border-bottom:1px solid var(--line);position:relative} .mega-col h4::after{content:"";position:absolute;left:0;bottom:-1px;width:32px;height:1px;background:var(--brass)} .mega-col h4 a{color:inherit} .mega-col ul{list-style:none} .mega-col li a{display:block;font-size:.9rem;color:var(--muted);padding:6px 10px 6px 0;transition:color .2s,padding .25s var(--ease);font-weight:500;position:relative} .mega-col li a:hover{color:var(--forest);padding-left:8px} .mega-col li a:hover::before{content:"";position:absolute;left:-1px;top:50%;width:3px;height:3px;background:var(--brass);border-radius:50%;transform:translateY(-50%)} .mega-feature{background:var(--forest);color:#E7EFE9;padding:26px;border-radius:var(--r);display:flex;flex-direction:column;justify-content:space-between;gap:16px;position:relative;overflow:hidden} .mega-feature .jali-layer{position:absolute;inset:0;opacity:.12} .mega-feature>*:not(.jali-layer){position:relative} .mega-feature .mf-tag{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass-soft);font-weight:700} .mega-feature h5{font-size:1.3rem;color:#fff;line-height:1.15} .mega-feature p{font-size:.86rem;color:#BACBC0} .mega-feature a{align-self:flex-start;font-size:.84rem;font-weight:600;color:var(--brass-soft);display:inline-flex;gap:.4em;align-items:center} .mega-feature a:hover{color:#fff} .burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:8px} .burger span{width:24px;height:2px;background:var(--forest);transition:.3s} .burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)} .burger.active span:nth-child(2){opacity:0} .burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---- mobile drawer ---- */ .drawer{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none} .drawer.open{visibility:visible;pointer-events:auto} .drawer-scrim{position:absolute;inset:0;background:rgba(15,20,18,.55);opacity:0;transition:opacity .35s} .drawer.open .drawer-scrim{opacity:1} .drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(420px,90vw);background:var(--paper);transform:translateX(100%);transition:transform .4s var(--ease);display:flex;flex-direction:column;box-shadow:-20px 0 50px -20px rgba(0,0,0,.4)} .drawer.open .drawer-panel{transform:translateX(0)} .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line);background:var(--forest);color:#fff} .drawer-head .dh-n{font-family:"Fraunces",serif;font-size:1.05rem;color:#fff} .drawer-head .dh-s{font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--brass-soft)} .drawer-close{background:none;border:none;color:#fff;font-size:1.6rem;cursor:pointer;line-height:1} .drawer-body{overflow-y:auto;flex:1;padding:8px 0 30px} .macc{border-bottom:1px solid var(--line)} .macc-head{width:100%;display:flex;align-items:center;justify-content:space-between;background:none;border:none;cursor:pointer;padding:15px 22px;font-family:"Hanken Grotesk";font-size:1rem;font-weight:600;color:var(--ink);text-align:left} .macc-head .mi{width:10px;height:10px;border-right:1.6px solid var(--brass);border-bottom:1.6px solid var(--brass);transform:rotate(45deg);transition:transform .3s} .macc.open .macc-head .mi{transform:rotate(-135deg)} .macc-body{max-height:0;overflow:hidden;transition:max-height .4s var(--ease)} .macc-body-inner{padding:2px 22px 16px} .macc-group{margin:10px 0} .macc-group-title{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--forest);font-weight:700;margin:8px 0 6px} .macc-body a{display:block;padding:8px 0 8px 14px;font-size:.9rem;color:var(--muted);border-left:1px solid var(--line);font-weight:500} .macc-body a:hover{color:var(--forest);border-color:var(--brass)} .macc-simple{display:block;padding:15px 22px;font-size:1rem;font-weight:600;color:var(--ink)} .drawer-cta{padding:18px 22px;border-top:1px solid var(--line)} .drawer-cta .btn{width:100%;justify-content:center} /* ---- image slot ---- */ .imgslot{position:relative;overflow:hidden;border-radius:var(--r);background:linear-gradient(135deg,var(--forest) 0%,var(--forest-2) 55%,var(--brass) 150%)} .imgslot::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='54' height='54' viewBox='0 0 54 54'%3E%3Cg fill='none' stroke='%23C9AE7C' stroke-width='1' opacity='0.22'%3E%3Cpath d='M27 0 L54 27 L27 54 L0 27 Z'/%3E%3Cpath d='M27 10 L44 27 L27 44 L10 27 Z'/%3E%3Ccircle cx='27' cy='27' r='5'/%3E%3C/g%3E%3C/svg%3E");background-size:42px 42px} .imgslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2} .imgslot .cap{position:absolute;left:0;bottom:0;z-index:3;padding:14px 16px;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#F1E6CF;font-weight:600;background:linear-gradient(to top,rgba(15,20,18,.8),transparent)} .imgslot.wide{aspect-ratio:16/10}.imgslot.sq{aspect-ratio:1/1}.imgslot.tall{aspect-ratio:3/4} /* ---- page hero (inner) ---- */ .phero{position:relative;overflow:hidden;background:var(--forest);color:#fff} .phero .jali-layer{position:absolute;inset:0;opacity:.12} .phero .wrap{position:relative;z-index:2;padding:54px 28px 60px} .crumb{font-size:.78rem;color:#B9CBC2;margin-bottom:20px;display:flex;gap:.5em;flex-wrap:wrap} .crumb a{color:#B9CBC2}.crumb a:hover{color:#fff}.crumb .sep{color:var(--brass-soft)} .phero .eyebrow{color:var(--brass-soft)}.phero .eyebrow::before{background:var(--brass-soft)} .phero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);color:#fff;margin:14px 0 0;max-width:18ch} .phero .lead{font-size:1.1rem;color:#CBD9D1;margin:20px 0 28px;max-width:60ch} .phero .phero-cta{display:flex;gap:14px;flex-wrap:wrap} .phero-meta{display:flex;gap:30px;margin-top:34px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.16);padding-top:22px} .phero-meta div{min-width:90px} .phero-meta .m-v{font-family:"Fraunces",serif;font-size:1.5rem;color:#fff} .phero-meta .m-l{font-size:.74rem;color:#A9C0B4;letter-spacing:.04em} /* ---- sections ---- */ .section{padding:80px 0} .section.alt{background:var(--paper-2)} .section-head{max-width:720px;margin-bottom:44px} .section-head h2{font-size:clamp(1.8rem,3.4vw,2.6rem);margin:14px 0 12px} .section-head p{font-size:1.04rem;color:var(--muted)} .lead-prose{max-width:760px;font-size:1.08rem;color:var(--ink)} .lead-prose p{margin-bottom:18px} /* two column intro */ .split{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:center} .split .imgslot{aspect-ratio:5/4;box-shadow:0 36px 64px -40px rgba(0,0,0,.45)} /* hub / card grid */ .cardgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .cardgrid.cols2{grid-template-columns:repeat(2,1fr)} .pcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--white);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s} .pcard:hover{transform:translateY(-4px);box-shadow:0 26px 44px -28px rgba(0,0,0,.3)} .pcard .imgslot{aspect-ratio:16/9} .pcard .pc-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1} .pcard .pc-no{font-family:"Fraunces",serif;font-size:.8rem;color:var(--brass);font-weight:600} .pcard h3{font-size:1.2rem;margin:6px 0 8px} .pcard p{font-size:.9rem;color:var(--muted);margin-bottom:16px;flex:1} .pcard .pc-link{font-size:.85rem;font-weight:600;color:var(--forest);display:inline-flex;gap:.45em;align-items:center} .pcard .pc-link .ar{transition:transform .3s var(--ease)}.pcard:hover .pc-link .ar{transform:translateX(4px)} /* feature list / outcomes */ .cols{display:grid;grid-template-columns:repeat(2,1fr);gap:40px} .flist{list-style:none} .flist li{display:flex;gap:.8em;padding:12px 0;border-bottom:1px solid var(--line);font-size:.98rem} .flist li:last-child{border-bottom:none} .flist li .fi{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--forest);display:grid;place-items:center;margin-top:1px} .flist li .fi svg{width:11px;height:11px;stroke:var(--brass-soft);fill:none;stroke-width:2.4} .numlist{list-style:none;counter-reset:n} .numlist li{counter-increment:n;position:relative;padding:16px 0 16px 52px;border-bottom:1px solid var(--line)} .numlist li:last-child{border-bottom:none} .numlist li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:14px;font-family:"Fraunces",serif;font-size:1.1rem;color:var(--brass);font-weight:600} .numlist li b{display:block;font-weight:600;margin-bottom:2px} .numlist li span{font-size:.92rem;color:var(--muted)} /* info strip */ .strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--white)} .strip div{padding:24px;border-right:1px solid var(--line)} .strip div:last-child{border-right:none} .strip .s-l{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);font-weight:700;margin-bottom:8px} .strip .s-v{font-size:1rem;color:var(--ink);font-weight:500} /* callout band */ .band{background:var(--forest);color:#fff;position:relative;overflow:hidden} .band .jali-layer{position:absolute;inset:0;opacity:.1} .band .wrap{position:relative;z-index:2;padding:64px 28px} .band .eyebrow{color:var(--brass-soft)}.band .eyebrow::before{background:var(--brass-soft)} .band h2{font-size:clamp(1.7rem,3.2vw,2.5rem);color:#fff;margin:14px 0 14px;max-width:20ch} .band p{color:#BACBC0;font-size:1.04rem;max-width:56ch;margin-bottom:24px} /* CTA / proposal */ .cta{background:var(--forest-d);color:#fff;position:relative;overflow:hidden} .cta .jali-layer{position:absolute;inset:0;opacity:.09} .cta .wrap{position:relative;z-index:2;padding:66px 28px;text-align:center} .cta .eyebrow{color:var(--brass-soft);justify-content:center}.cta .eyebrow::before{background:var(--brass-soft)} .cta h2{font-size:clamp(1.8rem,3.4vw,2.6rem);color:#fff;margin:14px 0 14px} .cta p{color:#BACBC0;max-width:54ch;margin:0 auto 26px} .cta .cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* prose blocks */ .rich{max-width:780px} .rich h2{font-size:1.7rem;margin:36px 0 14px} .rich h3{font-size:1.25rem;margin:26px 0 10px} .rich p{margin-bottom:16px;color:var(--ink)} .rich ul{margin:0 0 18px 0;list-style:none} .rich ul li{padding:7px 0 7px 22px;position:relative;color:var(--ink)} .rich ul li::before{content:"";position:absolute;left:0;top:15px;width:6px;height:6px;background:var(--brass);transform:rotate(45deg)} /* certificate tool */ .cert-wrap{max-width:620px;margin:0 auto} .cert-box{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:38px;box-shadow:0 30px 60px -40px rgba(0,0,0,.3)} .cert-box label{font-size:.8rem;font-weight:600;letter-spacing:.04em;color:var(--forest);text-transform:uppercase} .cert-box .field{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap} .cert-box input{flex:1;min-width:180px;padding:.95em 1em;border:1px solid var(--line);border-radius:var(--r);font-family:inherit;font-size:1rem;background:var(--paper)} .cert-box input:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(0,0,0,.06)} .cert-result{margin-top:20px;display:none} .cert-card{border:1px solid var(--line);border-left:3px solid var(--brass);border-radius:var(--r);padding:22px;background:var(--paper)} .cert-card.ok{border-left-color:#2E7D52}.cert-card.no{border-left-color:#A23B2E} .cert-card .cc-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);font-size:.92rem} .cert-card .cc-row:last-child{border-bottom:none} .cert-card .cc-l{color:var(--muted)}.cert-card .cc-v{font-weight:600} /* contact */ .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:50px} .contact-list{list-style:none} .contact-list li{display:flex;gap:.8em;padding:14px 0;border-bottom:1px solid var(--line)} .contact-list li:last-child{border-bottom:none} .contact-list .ci{flex:0 0 auto;width:38px;height:38px;border-radius:50%;background:var(--white);border:1px solid var(--line);display:grid;place-items:center;color:var(--forest)} .contact-list .ci svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8} .contact-list .c-l{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600} .contact-list .c-v{font-size:1rem;color:var(--ink);font-weight:500} .form{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:32px} .form .fg{margin-bottom:16px} .form label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--forest);margin-bottom:7px} .form input,.form select,.form textarea{width:100%;padding:.85em 1em;border:1px solid var(--line);border-radius:var(--r);font-family:inherit;font-size:.95rem;background:var(--paper)} .form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--forest);box-shadow:0 0 0 3px rgba(0,0,0,.06)} .form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px} .form .btn{width:100%;justify-content:center;margin-top:4px} /* faculty */ .team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .tmember .imgslot{aspect-ratio:1/1;margin-bottom:14px} .tmember h4{font-size:1.05rem}.tmember .role{font-size:.84rem;color:var(--brass);font-weight:600} /* footer */ .footer{background:var(--forest-d);color:#A9C0B4;padding:60px 0 0;position:relative;overflow:hidden} .footer-sky{position:absolute;left:0;right:0;top:0;width:100%;opacity:.07;color:var(--brass-soft)} .foot-grid{position:relative;display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:46px;border-bottom:1px solid rgba(255,255,255,.12)} .foot-brand .brand .bt .n{color:#fff}.foot-brand .brand .bt .s{color:var(--brass-soft)} .foot-brand p{font-size:.9rem;margin:18px 0;max-width:34ch;color:#94ABA0} .foot-brand .socials{display:flex;gap:10px} .foot-brand .socials a{width:38px;height:38px;border:1px solid rgba(255,255,255,.18);border-radius:50%;display:grid;place-items:center;color:#A9C0B4;transition:.3s} .foot-brand .socials a svg{width:16px;height:16px;fill:currentColor} .foot-brand .socials a:hover{border-color:var(--brass);color:#fff;background:rgba(176,141,79,.15)} .foot-col h5{font-family:"Hanken Grotesk";font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:#fff;font-weight:700;margin-bottom:16px} .foot-col ul{list-style:none}.foot-col li{margin-bottom:10px} .foot-col a,.foot-contact li{font-size:.9rem;color:#A9C0B4;transition:color .25s} .foot-col a:hover{color:#fff} .foot-contact li{margin-bottom:12px;display:flex;gap:.6em} .foot-bottom{position:relative;display:flex;justify-content:space-between;align-items:center;padding:22px 0;font-size:.82rem;color:#7E968B;flex-wrap:wrap;gap:12px} .foot-bottom a{color:#7E968B}.foot-bottom a:hover{color:#fff} .wa{position:fixed;bottom:24px;right:24px;z-index:70;width:56px;height:56px;background:#25D366;border-radius:50%;display:grid;place-items:center;box-shadow:0 12px 28px -8px rgba(37,211,102,.6);transition:transform .3s} .wa:hover{transform:scale(1.08)}.wa svg{width:30px;height:30px;fill:#fff} .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)} .reveal.in{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.reveal{opacity:1;transform:none}} @media(max-width:1024px){ .cardgrid{grid-template-columns:repeat(2,1fr)} .team-grid{grid-template-columns:repeat(2,1fr)} .split{grid-template-columns:1fr;gap:34px} .strip{grid-template-columns:repeat(2,1fr)} .foot-grid{grid-template-columns:1fr 1fr;gap:34px} } @media(max-width:860px){ .nav,.nav-cta{display:none}.burger{display:flex} .cols{grid-template-columns:1fr;gap:24px} .cardgrid,.cardgrid.cols2{grid-template-columns:1fr} .contact-grid{grid-template-columns:1fr;gap:30px} .section{padding:60px 0} } @media(max-width:560px){ .wrap{padding:0 20px} .strip{grid-template-columns:1fr} .team-grid{grid-template-columns:1fr 1fr} .foot-grid{grid-template-columns:1fr} .form .row2{grid-template-columns:1fr} } /* ---- FAQ ---- */ .faq{border-top:1px solid var(--line)} .faq-item{border-bottom:1px solid var(--line)} .faq-item summary{list-style:none;cursor:pointer;padding:18px 0;font-family:"Fraunces",serif;font-size:1.12rem;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:1em} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";font-family:"Hanken Grotesk";font-size:1.5rem;color:var(--brass);transition:transform .3s;flex:0 0 auto} .faq-item[open] summary::after{transform:rotate(45deg)} .faq-item .faq-a{padding:0 0 20px;color:var(--muted);max-width:70ch;line-height:1.65} /* ---- header WhatsApp icon ---- */ .nav-wa{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#25D366;margin-left:8px;flex:0 0 auto;transition:transform .3s,box-shadow .3s;box-shadow:0 4px 12px -4px rgba(37,211,102,.6)} .nav-wa svg{width:20px;height:20px;fill:#fff} .nav-wa:hover{transform:scale(1.08)} @media(max-width:860px){.nav-wa{display:none}} /* ---- Client Success: gallery, video, quotes, lightbox ---- */ .case{border:1px solid var(--line);border-radius:var(--r);background:var(--white);overflow:hidden;margin-bottom:44px} .case-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px 30px;border-bottom:1px solid var(--line);flex-wrap:wrap} .case-head .ch-l .tag{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--brass);font-weight:700} .case-head .ch-l h3{font-size:1.55rem;margin-top:4px} .case-head .ch-meta{display:flex;gap:26px;flex-wrap:wrap} .case-head .ch-meta div .v{font-family:"Fraunces",serif;font-size:1.15rem;color:var(--forest)} .case-head .ch-meta div .l{font-size:.72rem;color:var(--muted);letter-spacing:.05em} .case-body{padding:30px} .case-body>p{color:var(--ink);max-width:75ch;margin-bottom:6px} .video-embed{position:relative;aspect-ratio:16/9;border-radius:var(--r);overflow:hidden;background:var(--forest);margin:24px 0} .video-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .video-embed .vph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#E7EFE9;text-align:center;padding:20px} .video-embed .vph .play{width:70px;height:70px;border-radius:50%;background:rgba(255,255,255,.15);border:1.5px solid var(--brass-soft);display:grid;place-items:center} .video-embed .vph .play::after{content:"";border-left:20px solid var(--brass-soft);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px} .video-embed .vph small{color:#9FB6AA;font-size:.78rem} .gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px} .gslot{position:relative;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;background:linear-gradient(135deg,var(--forest),var(--forest-2) 60%,var(--brass) 160%);cursor:pointer;display:block} .gslot::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23C9AE7C' stroke-width='1' opacity='0.25'%3E%3Cpath d='M20 0 L40 20 L20 40 L0 20 Z'/%3E%3C/g%3E%3C/svg%3E");background-size:30px 30px} .gslot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;transition:transform .5s var(--ease)} .gslot:hover img{transform:scale(1.06)} .gslot .gi{position:absolute;bottom:8px;left:10px;z-index:3;font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#F1E6CF;font-weight:600} .quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px} .quote{border:1px solid var(--line);border-left:3px solid var(--brass);border-radius:var(--r);background:var(--paper);padding:24px} .quote .qm{font-family:"Fraunces",serif;font-size:2.4rem;color:var(--brass);line-height:1;height:22px} .quote p{font-size:.98rem;color:var(--ink);margin:6px 0 16px;line-height:1.6} .quote .qa{font-size:.82rem;color:var(--muted)} .quote .qa b{color:var(--forest);font-weight:600;display:block} .lightbox{position:fixed;inset:0;z-index:120;background:rgba(11,15,13,.92);display:none;align-items:center;justify-content:center;padding:30px} .lightbox.on{display:flex} .lightbox img{max-width:92vw;max-height:88vh;border-radius:var(--r);box-shadow:0 30px 80px -20px rgba(0,0,0,.7)} .lightbox .lbx{position:absolute;top:22px;right:26px;color:#fff;font-size:2rem;cursor:pointer;line-height:1;background:none;border:none} @media(max-width:860px){.gallery{grid-template-columns:repeat(3,1fr)}.quote-grid{grid-template-columns:1fr}} @media(max-width:520px){.gallery{grid-template-columns:repeat(2,1fr)}}