/* Pardede Squad Loyal — V11 Global Minimal Startup
   One coherent, dependency-free visual system. Sector colors are accents only.
*/
:root {
  color-scheme: light;
  --navy:#10254B;
  --ink:#152B4F;
  --muted:#657996;
  --blue:#2563EB;
  --blue-dark:#174FC5;
  --line:#E2E9F3;
  --canvas:#F8FAFE;
  --white:#FFFFFF;
  --pale:#EFF6FF;
  --radius:18px;
  --container:1190px;
  --header-height:80px;
  --shadow:0 16px 50px rgba(32,65,115,.06);
  --font:Inter,"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:95px}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 16px/1.64 var(--font);-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
img,svg{display:block;max-width:100%}
::selection{background:#CFDFFF;color:#12376C}
:focus-visible{outline:3px solid #397DEA;outline-offset:4px}
.container{width:min(calc(100% - 72px),var(--container));margin-inline:auto}
.skip-link{position:fixed;top:-100px;left:18px;z-index:200;background:var(--blue);color:white;padding:12px 18px;border-radius:10px;font-weight:750}
.skip-link:focus{top:14px}
/* Site navigation */
.header{position:sticky;top:0;z-index:90;background:rgba(255,255,255,.97);border-bottom:1px solid #E8EDF5;backdrop-filter:blur(18px)}
.nav-wrap{height:var(--header-height);display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{display:flex;gap:12px;align-items:center;min-width:0}
.brand-mark{height:43px;width:43px;flex:0 0 auto;border-radius:12px}
.brand-name{display:block;color:var(--ink);font-size:14px;line-height:1.25;font-weight:800;letter-spacing:-.035em}
.brand-name small{display:block;margin-top:3px;color:#8A9CB4;font-size:8.4px;letter-spacing:.13em;font-weight:750;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:32px;margin-left:auto}
.nav-links a:not(.button){position:relative;color:#526887;font-size:13px;font-weight:675;white-space:nowrap;transition:color .2s}
.nav-links a:not(.button):hover,.nav-links a[aria-current=page]:not(.button){color:var(--blue)}
.nav-links a[aria-current=page]:not(.button)::after{content:"";height:2px;position:absolute;bottom:-14px;left:0;right:0;background:var(--blue);border-radius:2px}
.nav-toggle{display:none;align-items:center;justify-content:center;width:44px;height:44px;background:white;color:var(--ink);border:1px solid var(--line);border-radius:12px}
.hamburger,.hamburger::before,.hamburger::after{position:relative;display:block;width:19px;height:2px;background:currentColor;border-radius:2px;content:"";transition:transform .2s}
.hamburger::before{position:absolute;transform:translateY(-6px)}
.hamburger::after{position:absolute;transform:translateY(6px)}
.nav-toggle[aria-expanded=true] .hamburger{background:transparent}
.nav-toggle[aria-expanded=true] .hamburger::before{transform:rotate(45deg)}
.nav-toggle[aria-expanded=true] .hamburger::after{transform:rotate(-45deg)}
/* Buttons and headings */
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:49px;padding:12px 20px;border:1px solid transparent;border-radius:10px;white-space:nowrap;font-size:13px;font-weight:750;line-height:1.25;transition:background .2s,border .2s,color .2s,transform .2s}
.button:hover{transform:translateY(-2px)}
.button.dark{background:var(--blue);color:#fff;box-shadow:0 8px 20px rgba(37,99,235,.12)}
.button.dark:hover{background:var(--blue-dark);box-shadow:0 12px 28px rgba(37,99,235,.19)}
.button.outline{background:#fff;color:#18447D;border-color:#CEDBEF}
.button.outline:hover{background:#F2F7FF;border-color:#8FB6EC}
.button .arr{font-size:18px;line-height:1;font-weight:500}
.eyebrow{display:flex;align-items:center;gap:10px;color:#3571C8;font-size:10.5px;line-height:1.4;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.eyebrow::before{content:"";height:3px;width:24px;flex:0 0 auto;background:currentColor;border-radius:3px}
.h1{font-weight:820;letter-spacing:-.066em;line-height:1.075;font-size:clamp(52px,5.5vw,77px);margin:22px 0 22px;overflow-wrap:normal}
.h2{font-size:clamp(32px,3.8vw,49px);font-weight:800;letter-spacing:-.058em;line-height:1.14;margin:16px 0 18px}
.h1 .accent,.h2 .accent{color:var(--blue)}
.intro,.lead{margin:0;color:var(--muted);font-size:16px;line-height:1.78;max-width:640px}
.section{padding:105px 0}
.section-head{display:flex;justify-content:space-between;align-items:end;gap:44px;margin-bottom:40px}
.section-head .h2{margin-bottom:0}
.section-head .intro{max-width:340px;font-size:14px}
/* Homepage hero — full first screen at desktop, naturally flowing on mobile */
.hero{position:relative;overflow:hidden;background:linear-gradient(125deg,#FBFCFF,#F3F8FF 62%,#EEF5FF)}
.hero.hero-full{min-height:calc(100svh - var(--header-height));display:flex;align-items:center;padding:64px 0 77px}
.hero-grid{display:grid;grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);gap:clamp(25px,4vw,65px);align-items:center}
.hero-copy{position:relative;z-index:1;max-width:615px}
.hero .h1{font-size:clamp(56px,5.5vw,78px);letter-spacing:-.07em;margin:22px 0 23px}
.hero .h1 em{font-style:normal;color:var(--blue)}
.hero-lead{max-width:545px;margin:0 0 29px;color:#5D7496;font-size:15.5px;line-height:1.78}
.hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:11px}
.hero-art{width:100%;max-width:620px;justify-self:center}
.hero-art img{width:100%;height:auto;filter:drop-shadow(0 20px 38px rgba(58,91,148,.07))}
.hero-scroll{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;align-items:center;gap:13px;color:#8195B1;font-size:10px;letter-spacing:.16em;font-weight:750;white-space:nowrap;pointer-events:none}
.hero-scroll span:last-child{font-size:18px}
/* Service cards — industry palette only inside artwork & micro-accent */
.sector-digital{--sector:#2563EB;--tint:#EAF2FF;--edge:#C5DAFA}
.sector-strategy{--sector:#B68128;--tint:#FFF6E4;--edge:#F2DCB0}
.sector-learning{--sector:#7C3AED;--tint:#F4EDFF;--edge:#DED0FC}
.sector-agri{--sector:#16965A;--tint:#EAF8EE;--edge:#C4E6D0}
.sector-apparel{--sector:#D44E7C;--tint:#FFF0F5;--edge:#F3C9D6}
.sector-commerce{--sector:#E47A3B;--tint:#FFF2E8;--edge:#F5D7C4}
.home-services{background:#FFFFFF}
.cap-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
.cap-card{display:flex;flex-direction:column;min-width:0;background:#FFFFFF;border:1px solid #E4EAF4;border-radius:19px;overflow:hidden;box-shadow:0 6px 30px rgba(35,68,113,.035);transition:transform .25s,box-shadow .25s,border-color .25s}
.cap-card:hover{transform:translateY(-5px);border-color:var(--edge);box-shadow:0 18px 42px rgba(32,65,114,.10)}
.cap-art{height:195px;background:var(--tint);overflow:hidden}
.cap-art img{height:100%;width:100%;object-fit:cover;transition:transform .45s}
.cap-card:hover .cap-art img{transform:scale(1.035)}
.cap-card-content{display:flex;flex:1;flex-direction:column;min-width:0;padding:23px 24px 22px}
.cap-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cap-kicker{font-size:10px;font-weight:800;color:var(--sector);letter-spacing:.08em;text-transform:uppercase;line-height:1.45}
.cap-arrow{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;color:var(--sector);background:var(--tint);font-size:19px;flex:0 0 auto;transition:transform .2s}
.cap-card:hover .cap-arrow{transform:translate(2px,-2px)}
.cap-card h3{font-size:21px;font-weight:800;letter-spacing:-.041em;line-height:1.3;margin:18px 0 10px;color:var(--ink)}
.cap-card p{font-size:13px;line-height:1.72;color:#657B96;margin:0 0 22px}
.cap-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:17px;border-top:1px solid #E9EDF3;color:#263F62;font-size:12px;font-weight:750}
.cap-bottom span{font-size:18px;color:var(--sector)}
/* Simple conversion CTA */
.cta-strip{background:#EAF3FF;border-top:1px solid #DDEBFA;border-bottom:1px solid #DDEBFA;padding:70px 0}
.cta-inner{display:flex;justify-content:space-between;align-items:center;gap:45px}
.cta-inner .h2{margin:14px 0 10px;max-width:700px}
.cta-inner p{color:#5A7296;font-size:14px;margin:0}
/* General inner pages */
.page-hero{position:relative;overflow:hidden;background:linear-gradient(120deg,#F1F7FF,#FBFCFF 78%);padding:78px 0 81px}
.page-hero.slim{padding:75px 0 80px}
.page-hero .h1{font-size:clamp(45px,5.1vw,70px);max-width:830px;margin:17px 0 20px}
.page-hero .intro{max-width:770px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:25px;color:#7A90AC;font-size:12px}
.breadcrumb a:hover{color:var(--blue)}
.breadcrumb b{font-weight:750;color:#31517C}
.service-list{display:grid;gap:14px}
.service-row{display:grid;grid-template-columns:173px minmax(0,1fr) 44px;align-items:center;gap:26px;padding:13px 21px 13px 13px;border:1px solid var(--line);border-radius:17px;background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s}
.service-row:hover{transform:translateY(-3px);border-color:var(--edge);box-shadow:var(--shadow)}
.service-visual{width:173px;height:113px;display:block;overflow:hidden;border-radius:12px;background:var(--tint)}
.service-visual img{display:block;width:100%;height:100%;object-fit:cover}
.service-row-copy{display:block;min-width:0}
.service-row-title{display:block;font-size:23px;font-weight:800;letter-spacing:-.04em;line-height:1.25;color:var(--ink);margin-bottom:7px}
.service-row-sub{display:block;font-size:13px;line-height:1.65;color:#6C819B;max-width:640px}
.service-row-arrow{display:grid;place-items:center;height:42px;width:42px;border-radius:50%;background:var(--tint);color:var(--sector);font-size:23px;transition:background .2s}
.service-row:hover .service-row-arrow{background:var(--edge)}
/* Individual service: one dominant industry illustration, four meaningful mini-scenes */
.detail-hero{background:linear-gradient(120deg,#FAFCFF,#F5F9FF 55%,var(--tint));padding:65px 0 78px}
.detail-hero-grid{display:grid;grid-template-columns:minmax(0,.93fr) minmax(0,1.07fr);align-items:center;gap:clamp(26px,4vw,58px)}
.detail-hero .eyebrow{color:var(--sector)}
.detail-hero .h1{font-size:clamp(43px,4.8vw,66px);letter-spacing:-.06em;max-width:575px;overflow-wrap:anywhere}
.detail-hero .h1 .accent{color:var(--sector)}
.detail-hero .intro{font-size:15px;max-width:505px}
.detail-hero-actions{margin-top:30px}
.detail-art{overflow:hidden;border-radius:21px;border:1px solid var(--edge);box-shadow:0 19px 58px rgba(31,58,109,.055)}
.detail-art img{width:100%;height:auto;display:block}
.detail-scope{background:#FFFFFF;padding:92px 0 98px}
.detail-scope .eyebrow{color:var(--sector)}
.detail-scope .h2 .accent{color:var(--sector)}
.scope-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.scope-tile{min-width:0;overflow:hidden;background:#fff;border:1px solid #E6EBF2;border-radius:17px;display:flex;flex-direction:column;padding:14px 17px 21px;transition:border-color .25s,box-shadow .25s,transform .25s}
.scope-tile:hover{transform:translateY(-4px);border-color:var(--edge);box-shadow:0 16px 38px rgba(24,67,112,.07)}
.scope-illustration{width:100%;height:154px;margin-bottom:17px;overflow:hidden;border-radius:11px;background:var(--tint)}
.scope-illustration img{display:block;width:100%;height:100%;object-fit:contain}
.scope-index{font-size:10px;color:var(--sector);font-weight:800;letter-spacing:.12em;margin:0 0 10px}
.scope-tile strong{font-size:17px;line-height:1.34;letter-spacing:-.035em;font-weight:800;color:var(--ink);margin-bottom:10px}
.scope-tile p{font-size:12.5px;line-height:1.68;color:#677C97;margin:0}
.result-strip{background:var(--tint);padding:58px 0;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge)}
.result-strip-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:65px;align-items:center}
.result-strip .eyebrow{color:var(--sector)}
.result-strip-inner .h2{font-size:clamp(27px,3vw,39px);line-height:1.22;max-width:670px;margin:16px 0 0}
.result-strip-inner p{margin:0;font-size:14px;line-height:1.83;color:#506889}
/* Brief form: still a local helper, NOT a database-backed submission */
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:75px;align-items:start}
.contact-side .h2{font-size:clamp(35px,3.1vw,45px)}
.contact-side>p{font-size:15px;color:#657B98;line-height:1.8}
.contact-card{border-top:1px solid var(--line);padding-top:24px;margin-top:33px}
.contact-card h4{font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 11px}
.contact-card p{font-size:13px;line-height:1.75;margin:0;color:#697F9A}
.form-card{background:#FFFFFF;border-radius:19px;border:1px solid var(--line);padding:36px;box-shadow:var(--shadow)}
.form-heading{font-size:23px;line-height:1.25;letter-spacing:-.04em;margin:0 0 6px}
.form-sub{font-size:13px;color:#6E839F;margin:0 0 25px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field.span{grid-column:1/-1}
.field label{font-size:12px;color:#344E70;font-weight:750}
.field label span{color:#97A4B6;font-weight:500}
.field input,.field select,.field textarea{width:100%;padding:12px 14px;border:1px solid #D6E1EE;border-radius:10px;background:#FAFCFF;color:var(--ink);font-size:14px;line-height:1.5;outline:0;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px #DBE9FF}
.field textarea{min-height:140px;resize:vertical}
.form-actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:24px}
.form-hint{flex:1;font-size:11px;line-height:1.5;color:#8595AA}
.brief-result{margin-top:24px;background:#F3F8FF;border:1px solid #CAE0FA;border-radius:14px;padding:22px}
.brief-result h3{margin:0 0 7px;font-size:18px}
.brief-result p{font-size:12px;color:#667F9C;margin:0 0 14px}
.brief-result pre{font:12px/1.75 ui-monospace,Consolas,monospace;white-space:pre-wrap;overflow:auto;overflow-wrap:anywhere;padding:17px;border:1px solid var(--line);background:#fff;border-radius:10px;color:#304B70;max-height:320px}
.brief-result .button{min-height:43px;padding:9px 13px;margin:10px 8px 0 0}
.send-options{display:flex;gap:9px;flex-wrap:wrap;margin-top:10px}
.send-options:empty{display:none}
.status{margin-top:12px;font-size:12px;color:#245AA7}
.not-found{display:grid;place-items:center;min-height:54vh;text-align:center;padding:70px 0}
/* Footer */
.footer{padding:63px 0 25px;background:#0A1F45;color:#ECF3FF}
.footer-top{display:grid;grid-template-columns:1.5fr .7fr 1.05fr 1fr;gap:41px;padding-bottom:48px}
.footer .brand-name{color:white}
.footer .brand-name small{color:#93AAD2}
.footer-about{font-size:13px;line-height:1.83;color:#9DB1D1;max-width:310px;margin:20px 0 0}
.footer-col h4{font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;margin:4px 0 19px;color:#E8F0FF}
.footer-links{display:flex;flex-direction:column;gap:11px}
.footer-links a{font-size:13px;color:#A9BBDA;transition:color .2s}
.footer-links a:hover,.footer-cta:hover{color:#fff}
.footer-cta{color:#88C5FF;font-size:13px;font-weight:750}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid #2E4167;padding-top:20px;font-size:11px;color:#8BA0C4}
/* Entrance movement, opt-out respected */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.is-visible{opacity:1;transform:translateY(0)}
@media(max-width:1100px){
 .nav-links{gap:22px}
 .hero .h1{font-size:clamp(51px,5.4vw,69px)}
 .scope-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .scope-illustration{height:170px}
 .footer-top{gap:25px}
}
@media(max-width:960px){
 :root{--header-height:72px}
 .container{width:min(calc(100% - 46px),var(--container))}
 .nav-toggle{display:flex;margin-left:auto;position:relative;z-index:91}
 .nav-links{display:none;position:fixed;top:var(--header-height);left:0;right:0;min-height:calc(100dvh - var(--header-height));max-height:calc(100dvh - var(--header-height));overflow:auto;background:#fff;padding:22px 24px 32px;flex-direction:column;align-items:stretch;gap:5px;box-shadow:0 30px 60px rgba(30,55,103,.16)}
 .nav-links.is-open{display:flex}
 .nav-links a:not(.button){display:block;padding:14px;font-size:17px}
 .nav-links a[aria-current=page]:not(.button)::after{display:none}
 .nav-links .button{margin-top:13px}
 .hero.hero-full{min-height:calc(100svh - var(--header-height));padding:64px 0 69px}
 .hero-grid{grid-template-columns:1fr;gap:28px}
 .hero-copy{max-width:760px}
 .hero .h1{font-size:clamp(54px,8vw,74px)}
 .hero-art{max-width:620px;margin-inline:auto}
 .hero-scroll{display:none}
 .cap-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .detail-hero-grid{grid-template-columns:1fr;gap:31px}
 .detail-art{max-width:720px}
 .contact-grid{grid-template-columns:1fr;gap:36px}
 .footer-top{grid-template-columns:1.2fr 1fr;gap:35px}
 .result-strip-inner{grid-template-columns:1fr;gap:23px}
}
@media(max-width:650px){
 .container{width:min(calc(100% - 36px),var(--container))}
 .brand-mark{height:39px;width:39px}
 .brand-name{font-size:12px}
 .brand-name small{font-size:7.7px}
 .eyebrow{font-size:9px;letter-spacing:.1em}
 .section{padding:74px 0}
 .section-head{display:block;margin-bottom:29px}
 .section-head .h2{margin-bottom:14px}
 .h2{font-size:clamp(31px,8vw,42px)}
 .hero.hero-full{min-height:calc(100svh - var(--header-height));padding:42px 0 48px}
 .hero-grid{gap:24px}
 .hero .h1{font-size:clamp(43px,10.8vw,58px);margin:20px 0}
 .hero-lead{font-size:14px;line-height:1.73;margin-bottom:23px}
 .hero-actions{gap:8px}
 .hero-actions .button{min-height:47px;padding:12px 13px;font-size:12px;gap:7px}
 .hero-art{max-width:490px}
 .cap-grid,.scope-grid{grid-template-columns:1fr}
 .cap-art{height:180px}
 .cap-card-content{padding:21px 21px 20px}
 .cap-card h3{font-size:21px}
 .cta-strip{padding:53px 0}
 .cta-inner{flex-direction:column;align-items:start;gap:25px}
 .page-hero,.page-hero.slim{padding:57px 0 62px}
 .page-hero .h1{font-size:clamp(43px,10vw,58px)}
 .service-row{grid-template-columns:94px minmax(0,1fr) 28px;gap:13px;padding:11px}
 .service-visual{width:94px;height:84px}
 .service-row-title{font-size:16.5px;line-height:1.22;margin-bottom:5px}
 .service-row-sub{font-size:11px;line-height:1.4}
 .service-row-arrow{height:28px;width:28px;font-size:17px}
 .detail-hero{padding:52px 0 62px}
 .detail-hero .h1{font-size:clamp(42px,10vw,56px)}
 .detail-hero .intro{font-size:14px}
 .detail-scope{padding:70px 0}
 .scope-tile{padding:14px 15px 19px}
 .scope-illustration{height:176px}
 .scope-tile strong{font-size:18px}
 .result-strip{padding:48px 0}
 .result-strip-inner .h2{font-size:30px}
 .result-strip-inner p{font-size:13px}
 .form-card{padding:24px 19px}
 .form-grid{grid-template-columns:1fr}
 .form-actions{flex-direction:column;align-items:stretch}
 .footer{padding-top:52px}
 .footer-top{grid-template-columns:1fr 1fr;gap:32px 17px;padding-bottom:37px}
 .footer-brand-col{grid-column:1/-1}
 .footer-top .footer-col:last-child{grid-column:1/-1}
 .footer-bottom{flex-direction:column;align-items:start;gap:7px}
}
@media(max-width:360px){
 .hero .h1{font-size:42px}
 .hero-actions .button{padding:11px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}
 .js .reveal{opacity:1;transform:none}
}