:root{ --ink:#2B2013; --sand:#F5EEE0; --card:#FFFDF8; --azure:#B8923C; --azure-deep:#8B6B24; --teal:#9C6B3E; --teal-deep:#714B29; --gold:#C9A24C; --gold-deep:#8B6B24; --line: rgba(59,46,30,0.16); --shadow: 0 16px 34px -20px rgba(43,32,19,0.35); } *{box-sizing:border-box;} html{scroll-behavior:smooth;} :root{ --accent:#B8923C; --accent-deep:#8B6B24; } body{margin:0;background:var(--sand);color:var(--ink);font-family:'Manrope',sans-serif;-webkit-font-smoothing:antialiased;} body.persona-consultants{ --accent:#9C6B3E; --accent-deep:#714B29; } h1,h2,h3{font-family:'Fraunces',serif;font-weight:600;letter-spacing:-0.01em;margin:0;} .eyebrow{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:0.12em;font-size:0.7rem;color:var(--accent-deep);display:flex;align-items:center;gap:0.6em;transition:color .3s ease;} .eyebrow::before{content:"";width:20px;height:1px;background:currentColor;display:inline-block;} button{font-family:inherit;cursor:pointer;} .wrap{max-width:1080px;margin:0 auto;padding:0 28px;} :focus-visible{outline:3px solid var(--accent);outline-offset:2px;} header{position:sticky;top:0;z-index:50;background:rgba(243,236,222,0.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);} .header-inner{max-width:1080px;margin:0 auto;padding:17px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;} .brand{display:flex;align-items:center;gap:10px;background:none;border:none;text-align:left;padding:0;} .brand-icon{width:38px;height:auto;flex:none;} .brand-text{display:flex;flex-direction:column;line-height:1;} .brand-text .name{font-family:'Fraunces',serif;font-weight:700;font-size:1.1rem;color:var(--ink);} .brand-text .sub{font-family:'IBM Plex Mono',monospace;font-size:0.54rem;letter-spacing:0.08em;color:var(--gold-deep);margin-top:3px;text-transform:uppercase;} .section-tag{ font-family:'IBM Plex Mono',monospace;font-size:0.66rem;letter-spacing:0.1em;font-weight:600; color:#fff;background:var(--accent);padding:5px 12px;border-radius:999px;transition:background-color .35s ease; } @media(max-width:640px){ .section-tag{display:none;} } .persona-nav{position:relative;display:flex;gap:2px;background:var(--card);border:1.5px solid var(--line);border-radius:999px;padding:4px;} .persona-slider{position:absolute;top:0;left:0;height:100%;border-radius:999px;background:var(--accent);transition:transform .35s cubic-bezier(.4,.1,.2,1), width .35s cubic-bezier(.4,.1,.2,1), background-color .35s ease;z-index:0;} .persona-nav button{ position:relative;z-index:1;background:none;border:none;font-size:0.82rem;font-weight:700;color:#5A5040; padding:9px 16px;border-radius:999px;transition:color .25s ease, transform .18s ease; } .persona-nav button:hover{transform:translateY(-1px);} .persona-nav button.active{color:#fff;} @media(max-width:640px){ .persona-nav{width:100%;justify-content:space-between;} .persona-nav button{flex:1;padding:9px 6px;font-size:0.74rem;} } .hero{padding:68px 0 12px;text-align:center;position:relative;overflow:hidden;} .hero::before{ content:"";position:absolute;inset:-10%;opacity:0.55;pointer-events:none;transition:opacity .3s ease;z-index:0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:34px 34px; } body.persona-consultants .hero::before{ background-image: radial-gradient(var(--line) 1.5px, transparent 1.5px); background-size:26px 26px; } .hero > *{position:relative;z-index:1;} .hero h1{font-size:clamp(1.9rem,4vw,2.7rem);line-height:1.12;max-width:22ch;margin:0 auto;} .hero h1 em{font-style:normal;color:var(--accent);transition:color .3s ease;} .hero p{font-size:1.02rem;line-height:1.6;color:#3C3225;max-width:52ch;margin:16px auto 0;} .hero-visual{max-width:320px;height:64px;margin:28px auto 0;} .hero-visual svg{width:100%;height:100%;} .panel-wrap{padding:44px 0 60px;} .panel{display:none;} .panel.active{display:block;animation:rise .4s ease both;} @keyframes rise{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}} .lead{max-width:640px;margin:0 auto 38px;text-align:center;} .lead p{color:#4A4030;line-height:1.65;margin-top:10px;} .ent-subnav{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 auto 34px;max-width:900px;} .ent-subnav button{padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);font-size:0.78rem;font-weight:700;color:#5A5040;transition:all .18s ease;} .ent-subnav button:hover{border-color:var(--azure);transform:translateY(-1px);} .ent-subnav button.active{background:var(--ink);border-color:var(--ink);color:#fff;} .ent-view{display:none;} .ent-view.active{display:block;animation:rise .4s ease both;} .service-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;max-width:860px;margin:0 auto;} @media(max-width:700px){ .service-cards{grid-template-columns:1fr;} } .service-card{background:var(--card);border:1.5px solid var(--line);border-radius:18px;padding:30px;text-align:left;transition:transform .2s ease, box-shadow .2s ease;} .service-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);} .service-card .sc-num{font-family:'IBM Plex Mono',monospace;font-size:0.72rem;font-weight:600;} .service-card h3{font-size:1.14rem;margin:10px 0 8px;} .service-card p{font-size:0.88rem;color:#5A5040;line-height:1.55;margin:0 0 14px;} .service-card .sc-link{font-family:'IBM Plex Mono',monospace;font-size:0.68rem;letter-spacing:0.05em;text-transform:uppercase;font-weight:600;} .detail-back{background:none;border:1.5px solid var(--line);border-radius:999px;padding:9px 16px;font-size:0.82rem;font-weight:700;margin:0 auto 26px;display:block;color:var(--ink);} .detail-back:hover{border-color:var(--ink);} .detail-hero{max-width:720px;margin:0 auto 36px;text-align:center;} .detail-hero h2{font-size:clamp(1.55rem,3vw,2.05rem);margin-top:12px;} .detail-hero p{color:#4A4030;margin-top:12px;line-height:1.6;} .onsite-badge, .geo-badge{display:inline-flex;align-items:center;gap:6px;color:#fff;padding:7px 16px;border-radius:999px;font-family:'IBM Plex Mono',monospace;font-size:0.68rem;letter-spacing:0.05em;margin-top:16px;} .geo-group{max-width:860px;margin:0 auto 46px;} .geo-group-head{text-align:center;margin-bottom:22px;} .geo-group-tag{display:inline-flex;align-items:center;gap:6px;color:#fff;padding:7px 16px;border-radius:999px;font-family:'IBM Plex Mono',monospace;font-size:0.7rem;letter-spacing:0.06em;font-weight:600;} .geo-group-head p{max-width:560px;margin:12px auto 0;color:#4A4030;font-size:0.9rem;line-height:1.55;} .detail-section{max-width:880px;margin:0 auto 46px;} .detail-section h4{font-family:'IBM Plex Mono',monospace;text-transform:uppercase;letter-spacing:0.08em;font-size:0.74rem;color:#8A7D63;margin-bottom:18px;} .feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;} @media(max-width:700px){ .feature-grid{grid-template-columns:1fr;} } .feature-item{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:16px 18px;} .feature-item b{display:block;font-family:'Fraunces',serif;font-size:0.98rem;margin-bottom:5px;} .feature-item span{font-size:0.85rem;color:#5A5040;line-height:1.5;} .process-list{display:flex;flex-direction:column;gap:0;} .process-step{display:flex;gap:16px;padding:14px 0;border-bottom:1px solid var(--line);align-items:flex-start;} .process-step:last-child{border-bottom:none;} .process-step .ps-num{width:30px;height:30px;border-radius:50%;color:#fff;flex:none;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:0.75rem;} .process-step div b{display:block;font-size:0.94rem;margin-bottom:2px;} .process-step div span{font-size:0.84rem;color:#5A5040;} .format-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;} @media(max-width:700px){ .format-grid{grid-template-columns:1fr;} } .format-card{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:18px;text-align:center;} .format-card b{display:block;font-family:'Fraunces',serif;font-size:0.96rem;margin-bottom:6px;} .format-card span{font-size:0.82rem;color:#5A5040;} .why-list{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none;} .why-list li{font-size:0.92rem;color:#3C3225;padding-left:24px;position:relative;line-height:1.55;} .why-list li::before{content:"✓";position:absolute;left:0;color:var(--azure);font-weight:800;} .net-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 auto 26px;max-width:900px;} @media(max-width:760px){ .net-grid{grid-template-columns:repeat(2,1fr);} } .net-card{perspective:800px;height:150px;cursor:pointer;} .net-card-inner{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,.2,.2,1);border-radius:14px;} .net-card.flipped .net-card-inner{transform:rotateY(180deg);} .net-face{position:absolute;inset:0;border-radius:14px;padding:16px;backface-visibility:hidden;display:flex;flex-direction:column;justify-content:center;} .net-face.front{background:var(--card);border:1.5px solid var(--line);} .net-face.front .k{font-family:'IBM Plex Mono',monospace;font-size:0.62rem;color:#8A7D63;} .net-face.front h5{font-family:'Fraunces',serif;font-size:1.02rem;margin-top:8px;} .net-face.back{background:var(--teal);color:#fff;transform:rotateY(180deg);font-size:0.78rem;line-height:1.5;} .stat-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;max-width:820px;margin:0 auto 46px;} .stat-pill{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:14px 20px;text-align:center;min-width:120px;transition:transform .2s ease;} .stat-pill:hover{transform:translateY(-3px);} .stat-pill b{display:block;font-family:'Fraunces',serif;font-size:1.3rem;color:var(--teal);} .stat-pill span{font-size:0.72rem;color:#7A6F5C;} .network-hub{position:relative;width:100%;max-width:460px;aspect-ratio:1/1;margin:0 auto 8px;} .hub-lines{position:absolute;inset:0;width:100%;height:100%;z-index:0;} .hub-line{stroke:var(--line);stroke-width:0.5;stroke-dasharray:1.4 2;} .hub-center{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:25%;aspect-ratio:1/1;border-radius:50%;background:var(--teal);color:#fff; display:flex;align-items:center;justify-content:center;text-align:center; font-family:'Fraunces',serif;font-weight:700;font-size:0.9rem;line-height:1.2; box-shadow:var(--shadow);z-index:2;animation:hub-breathe 4s ease-in-out infinite; } @keyframes hub-breathe{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.04);}} .hub-node{ position:absolute;transform:translate(-50%,-50%);width:21%;aspect-ratio:1/1;border-radius:50%; background:var(--card);border:2px solid var(--teal);display:flex;flex-direction:column;gap:2px; align-items:center;justify-content:center;text-align:center;font-weight:700;font-size:0.64rem;color:var(--ink); padding:5px;cursor:pointer;transition:transform .22s ease, box-shadow .22s ease, background .22s ease, color .22s ease; z-index:2;font-family:'Manrope',sans-serif; } .hub-node span{font-size:0.6rem;line-height:1.12;} .hub-node:hover, .hub-node:focus-visible{transform:translate(-50%,-50%) scale(1.1);box-shadow:var(--shadow);background:var(--teal);color:#fff;} .hub-node.active{background:var(--teal);color:#fff;box-shadow:var(--shadow);} @media(max-width:560px){ .network-hub{max-width:320px;} .hub-node{font-size:0.56rem;} .hub-node span{font-size:0.52rem;} .hub-center{font-size:0.72rem;} } .hub-caption{max-width:520px;margin:20px auto 0;text-align:center;font-size:0.9rem;color:#4A4030;min-height:24px;} .hub-caption b{color:var(--teal-deep);} .perk-row{display:grid;grid-template-columns:repeat(auto-fit, minmax(160px,1fr));gap:14px;} @media(max-width:760px){ .perk-row{grid-template-columns:repeat(2,1fr);} } .perk-card{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:20px 16px;text-align:center;transition:transform .2s ease, box-shadow .2s ease;} .perk-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);} .perk-icon{font-size:1.6rem;display:block;margin-bottom:10px;} .perk-card b{display:block;font-family:'Fraunces',serif;font-size:0.94rem;margin-bottom:6px;} .perk-card span{font-size:0.8rem;color:#5A5040;line-height:1.5;} .quote-box{ max-width:640px;margin:0 auto 46px;background:var(--card);border-left:3px solid var(--teal);border-radius:0 14px 14px 0; padding:22px 26px;font-family:'Fraunces',serif;font-size:1.05rem;line-height:1.5;color:#3C3225; } .quote-box span{display:block;margin-top:10px;font-family:'IBM Plex Mono',monospace;font-size:0.66rem;color:#8A7D63;letter-spacing:0.04em;} .tl-track{display:flex;gap:0;position:relative;margin:0 auto 26px;max-width:900px;} .tl-step{flex:1;position:relative;padding:0 14px 0 0;} .tl-step::before{content:"";position:absolute;top:15px;left:-7px;right:0;height:2px;background:var(--line);} .tl-step:first-child::before{display:none;} .tl-num{width:32px;height:32px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace;font-size:0.76rem;margin-bottom:12px;position:relative;z-index:1;} .tl-step h5{font-family:'Fraunces',serif;font-size:0.98rem;margin-bottom:5px;} .tl-step p{font-size:0.8rem;color:#5A5040;line-height:1.5;margin:0;} @media(max-width:760px){ .tl-track{flex-direction:column;gap:20px;} .tl-step::before{display:none;} } .panel-cta{display:flex;justify-content:center;margin-top:8px;} .cta{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;border:none;font-weight:700;font-size:0.88rem;color:#fff;transition:transform .18s ease;} .cta:hover{transform:translateY(-2px);} footer{background:var(--ink);color:var(--sand);padding:58px 0 30px;margin-top:26px;} .foot-grid{display:grid;grid-template-columns:1fr 0.8fr 1.3fr;gap:42px;} @media(max-width:900px){ .foot-grid{grid-template-columns:1fr;gap:26px;} } footer h4{font-family:'Fraunces',serif;font-size:1rem;margin-bottom:12px;} footer p, footer li{color:#C9C2AE;font-size:0.85rem;line-height:1.65;} footer ul{list-style:none;padding:0;margin:0;} .foot-bottom{margin-top:34px;padding-top:18px;border-top:1px solid rgba(243,236,222,0.14);display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:0.66rem;color:#8F8870;} #contact-form{display:flex;flex-direction:column;gap:10px;} .form-row{display:flex;gap:10px;flex-wrap:wrap;} .form-row > *{flex:1;min-width:150px;} #contact-form input, #contact-form select, #contact-form textarea{ width:100%;background:rgba(243,236,222,0.06);border:1.5px solid rgba(243,236,222,0.2); border-radius:10px;padding:10px 12px;color:var(--sand);font-family:'Manrope',sans-serif;font-size:0.86rem; } #contact-form input::placeholder, #contact-form textarea::placeholder{color:#8F8870;} #contact-form select option{color:#2B2013;} #contact-form input:focus, #contact-form select:focus, #contact-form textarea:focus{outline:2px solid var(--gold);border-color:transparent;} #contact-form textarea{min-height:80px;resize:vertical;} .form-submit{align-self:flex-start;background:var(--gold);color:var(--ink);border:none;border-radius:999px;padding:11px 20px;font-weight:800;font-size:0.84rem;margin-top:2px;} #form-note{font-family:'IBM Plex Mono',monospace;font-size:0.68rem;color:#8F8870;margin-top:8px;line-height:1.6;} #form-note.sent{color:var(--gold);} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .whatsapp-link{ display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:#fff;background:#25D366; padding:10px 18px;border-radius:999px;font-weight:700;font-size:0.82rem;text-decoration:none; transition:transform .18s ease; } .whatsapp-link:hover{transform:translateY(-2px);}