:root{ --paper:#FCF5E9; --paper-2:#F6EAD6; --ink:#16161D; --coral:#FF5A3C; --blue:#2D5BFF; --yellow:#FFC53D; --mint:#16B98C; --r:18px; --theme:var(--coral); /* per-page accent, overridden on */ --maxw:1080px; } *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{ font-family:'DM Sans',sans-serif; background-color:var(--paper); background-image: radial-gradient(circle at 12% 6%, rgba(255,197,61,.18), transparent 30%), radial-gradient(circle at 88% 3%, rgba(45,91,255,.12), transparent 28%), radial-gradient(circle at 50% 100%, rgba(22,185,140,.10), transparent 38%); background-attachment:fixed; color:var(--ink);line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased; } body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.035; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;} a{color:inherit;text-decoration:none;} /* ---------------- HEADER / NAV ---------------- */ .site-header{position:sticky;top:0;z-index:200;background:rgba(252,245,233,.86);backdrop-filter:blur(8px);border-bottom:3px solid var(--ink);} .nav{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;} .brand{display:flex;align-items:center;gap:11px;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.12rem;letter-spacing:-.02em;line-height:1;} .brand .dot{width:32px;height:32px;border-radius:9px;background:var(--coral);border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center;color:#fff;transform:rotate(-6deg);flex-shrink:0;} .brand small{display:block;font-family:'Space Mono',monospace;font-weight:400;font-size:.6rem;letter-spacing:.06em;color:#7a7a82;text-transform:uppercase;} .menu{display:flex;align-items:center;gap:6px;} .menu > a, .menu .dropbtn{font-weight:500;font-size:.95rem;padding:9px 13px;border-radius:10px;border:2px solid transparent;cursor:pointer;white-space:nowrap;} .menu > a:hover,.menu .dropbtn:hover{border-color:var(--ink);background:#fff;} .menu a.active{background:var(--ink);color:var(--paper);} .drop{position:relative;} .drop .dropbtn{display:flex;align-items:center;gap:6px;} .drop .dropwrap{position:absolute;top:100%;left:0;margin-top:10px;min-width:248px;background:#fff;border:2.5px solid var(--ink);border-radius:14px;box-shadow:6px 6px 0 var(--ink);padding:8px;display:none;flex-direction:column;gap:3px;} /* Invisible bridge over the gap so moving the mouse to the panel keeps it open. */ .drop .dropwrap::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px;} .drop:hover .dropwrap,.drop:focus-within .dropwrap{display:flex;} .drop .dropwrap a{padding:9px 12px;border-radius:9px;font-size:.92rem;font-weight:500;display:flex;align-items:center;gap:9px;} .drop .dropwrap a:hover{background:var(--paper-2);} .drop .dropwrap a .sq{width:11px;height:11px;border-radius:3px;border:2px solid var(--ink);flex-shrink:0;} .btn{display:inline-flex;align-items:center;gap:8px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:.95rem;background:var(--coral);color:#fff;border:2.5px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink);padding:11px 18px;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;letter-spacing:-.01em;} .btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);} .btn:active{transform:translate(0,0);box-shadow:2px 2px 0 var(--ink);} .btn.blue{background:var(--blue);}.btn.mint{background:var(--mint);}.btn.yellow{background:var(--yellow);color:var(--ink);}.btn.ink{background:var(--ink);} .btn.ghost{background:#fff;color:var(--ink);} .btn.lg{font-size:1.05rem;padding:14px 24px;} .nav .btn{padding:10px 16px;} .hamburger{display:none;width:46px;height:42px;border:2.5px solid var(--ink);border-radius:11px;background:#fff;box-shadow:3px 3px 0 var(--ink);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px;} .hamburger span{width:20px;height:2.5px;background:var(--ink);border-radius:2px;} .mobile-menu{display:none;border-top:2.5px solid var(--ink);background:var(--paper);} .mobile-menu.open{display:block;} .mobile-menu a{display:block;padding:13px 24px;border-bottom:1px solid rgba(22,22,29,.12);font-weight:600;} .mobile-menu a.sub{padding-left:40px;font-weight:500;font-size:.92rem;} /* ---------------- TYPE / SHARED ---------------- */ .eyebrow{display:inline-block;font-family:'Space Mono',monospace;font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;background:var(--yellow);color:var(--ink);border:2.5px solid var(--ink);border-radius:30px;padding:7px 15px;box-shadow:3px 3px 0 var(--ink);transform:rotate(-1.5deg);} h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.035em;line-height:1.0;font-size:clamp(2.4rem,6.5vw,4.6rem);} h2{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.03em;line-height:1.04;font-size:clamp(1.6rem,4vw,2.55rem);} h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.12;} .hl{color:var(--coral);position:relative;white-space:nowrap;} .hl::after{content:"";position:absolute;left:-3%;right:-3%;bottom:6%;height:32%;background:var(--yellow);z-index:-1;border-radius:4px;transform:rotate(-1deg);} .hl.blue{color:var(--blue);}.hl.mint{color:var(--mint);} .lede{font-size:1.2rem;max-width:640px;color:#3a3a44;} .lede b{color:var(--ink);} section{padding:54px 0;} .sec-head{display:flex;align-items:center;gap:14px;margin-bottom:6px;} .sec-num{font-family:'Space Mono',monospace;font-weight:700;font-size:.85rem;background:var(--ink);color:var(--paper);min-width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;} .sub{color:#55555f;font-size:1.05rem;margin:8px 0 26px;max-width:700px;} .prose p{color:#44444d;margin-bottom:12px;max-width:720px;} /* ---------------- HERO ---------------- */ .hero{padding:54px 0 26px;position:relative;} .hero h1{margin:22px 0 0;} .hero .lede{margin-top:24px;} .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px;} .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:center;} .trust{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px;} .trust .tab{font-family:'Space Mono',monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;background:#fff;border:2px solid var(--ink);border-radius:30px;padding:7px 13px;box-shadow:2px 2px 0 var(--ink);font-weight:700;} .float{position:absolute;font-size:2rem;pointer-events:none;opacity:.95;} .f1{top:8%;right:5%;animation:bob 5s ease-in-out infinite;} .f2{top:54%;right:14%;animation:bob 6s ease-in-out infinite .5s;} .f3{top:30%;right:-1%;animation:bob 7s ease-in-out infinite 1s;} @keyframes bob{50%{transform:translateY(-14px) rotate(8deg);}} /* ---------------- CARDS ---------------- */ .grid{display:grid;gap:18px;} .g2{grid-template-columns:repeat(2,1fr);} .g3{grid-template-columns:repeat(3,1fr);} .g4{grid-template-columns:repeat(4,1fr);} .card{background:#fff;border:2.5px solid var(--ink);border-radius:var(--r);box-shadow:5px 5px 0 var(--ink);padding:22px;transition:transform .18s ease,box-shadow .18s ease;} .card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink);} .card .ic{width:46px;height:46px;border-radius:12px;border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center;font-size:1.3rem;margin-bottom:14px;background:var(--theme);color:#fff;} .card:nth-child(4n+1) .ic{background:var(--coral);} .card:nth-child(4n+2) .ic{background:var(--blue);} .card:nth-child(4n+3) .ic{background:var(--mint);} .card:nth-child(4n+4) .ic{background:var(--yellow);color:var(--ink);} .card h3{font-size:1.16rem;margin-bottom:7px;} .card p{font-size:.95rem;color:#46464f;} .card .more{display:inline-block;margin-top:12px;font-family:'Space Mono',monospace;font-size:.78rem;color:var(--blue);font-weight:700;border-bottom:2px solid var(--blue);} .tag{font-family:'Space Mono',monospace;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;padding:4px 10px;border-radius:20px;border:2px solid var(--ink);display:inline-block;margin-bottom:12px;font-weight:700;} .t-coral{background:var(--coral);color:#fff;}.t-blue{background:var(--blue);color:#fff;}.t-mint{background:var(--mint);color:#fff;}.t-yellow{background:var(--yellow);color:var(--ink);} /* ---------------- POINTS LIST ---------------- */ .points{list-style:none;display:grid;gap:14px;} .points li{display:flex;gap:14px;align-items:flex-start;background:#fff;border:2.5px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);padding:16px 18px;} .points .ic{flex-shrink:0;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:800;color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-size:.95rem;border:2px solid var(--ink);} .points li span.txt{font-size:1rem;color:#3c3c45;} /* ---------------- SHIFT / FEATURE BLOCK ---------------- */ .feature{background:var(--blue);color:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:8px 8px 0 var(--ink);padding:34px 32px;} .feature.ink{background:var(--ink);} .feature .arrow{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(1.3rem,3.6vw,2rem);line-height:1.15;letter-spacing:-.02em;display:flex;flex-wrap:wrap;align-items:center;gap:14px;} .feature .old{text-decoration:line-through;text-decoration-thickness:3px;text-decoration-color:var(--coral);opacity:.65;} .feature .to{background:var(--yellow);color:var(--ink);border-radius:8px;padding:2px 10px;transform:rotate(-2deg);display:inline-block;} .feature p{margin-top:18px;font-size:1.02rem;opacity:.94;max-width:640px;} /* ---------------- STEPS / ROADMAP ---------------- */ .roadmap{display:grid;gap:16px;} .step{background:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:6px 6px 0 var(--ink);padding:22px 24px;display:flex;gap:20px;align-items:flex-start;transition:transform .18s ease,box-shadow .18s ease;} .step:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink);} .step .no{flex-shrink:0;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.5rem;width:54px;height:54px;border-radius:14px;border:3px solid var(--ink);display:grid;place-items:center;background:var(--yellow);box-shadow:3px 3px 0 var(--ink);} .step:nth-child(2n) .no{background:var(--mint);color:#fff;} .step:nth-child(3n) .no{background:var(--blue);color:#fff;} .step:nth-child(4n) .no{background:var(--coral);color:#fff;} .step .body h3{font-size:1.2rem;margin-bottom:5px;} .step .body p{font-size:.97rem;color:#44444d;max-width:680px;} /* ---------------- TWO-COLUMN PANELS ---------------- */ .twocol{display:grid;grid-template-columns:1fr 1fr;gap:18px;} .panel{border:3px solid var(--ink);border-radius:var(--r);padding:24px;box-shadow:6px 6px 0 var(--ink);} .panel.stop{background:#FFE9E4;}.panel.do{background:#E2F7EF;} .panel .ph{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.25rem;display:flex;align-items:center;gap:10px;margin-bottom:16px;letter-spacing:-.02em;} .panel .badge{width:32px;height:32px;border-radius:9px;border:2.5px solid var(--ink);display:grid;place-items:center;font-size:1.05rem;} .panel.stop .badge{background:var(--coral);}.panel.do .badge{background:var(--mint);} .panel ul{list-style:none;display:grid;gap:11px;} .panel li{display:flex;gap:10px;font-size:.96rem;align-items:flex-start;} .panel li::before{content:"";flex-shrink:0;width:20px;height:20px;border-radius:6px;margin-top:2px;border:2px solid var(--ink);display:grid;place-items:center;font-size:.7rem;font-weight:700;color:#fff;} .panel.stop li::before{background:var(--coral);content:"✕";} .panel.do li::before{background:var(--mint);content:"✓";} /* ---------------- CHIP LIST ---------------- */ .chips{display:flex;flex-wrap:wrap;gap:10px;} .chips .chip{background:#fff;border:2.5px solid var(--ink);border-radius:30px;box-shadow:3px 3px 0 var(--ink);padding:9px 16px;font-weight:600;font-size:.92rem;} /* ---------------- PRICING TABLE ---------------- */ .ptable{width:100%;border-collapse:separate;border-spacing:0;border:3px solid var(--ink);border-radius:var(--r);overflow:hidden;box-shadow:6px 6px 0 var(--ink);background:#fff;} .ptable th,.ptable td{padding:15px 18px;text-align:left;border-bottom:2px solid var(--ink);} .ptable th{font-family:'Bricolage Grotesque',sans-serif;background:var(--ink);color:var(--paper);font-size:1rem;} .ptable tr:last-child td{border-bottom:none;} .ptable td:last-child{font-family:'Space Mono',monospace;font-weight:700;white-space:nowrap;} .ptable tr:nth-child(even) td{background:var(--paper-2);} /* ---------------- FAQ ---------------- */ .faq{display:grid;gap:12px;max-width:840px;} .qa{background:#fff;border:2.5px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);overflow:hidden;} .qa .q{padding:16px 18px;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.05rem;cursor:pointer;display:flex;justify-content:space-between;gap:14px;align-items:center;} .qa .q .pm{font-size:1.4rem;line-height:1;color:var(--blue);flex-shrink:0;} .qa .a{max-height:0;overflow:hidden;transition:max-height .3s ease;} .qa .a p{padding:0 18px 16px;color:#46464f;} .qa.open .a{max-height:420px;} .qa.open .q .pm{color:var(--coral);} /* ---------------- CALLOUT / CTA ---------------- */ .callout{background:var(--ink);color:var(--paper);border-radius:var(--r);padding:38px 34px;box-shadow:8px 8px 0 var(--coral);border:3px solid var(--ink);text-align:center;} .callout .big{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;color:var(--yellow);font-size:clamp(1.6rem,4.5vw,2.4rem);letter-spacing:-.02em;margin-bottom:12px;line-height:1.08;} .callout p{color:#d8d8df;font-size:1.06rem;max-width:600px;margin:0 auto 22px;} .callout .hero-actions{justify-content:center;} /* ---------------- MEDIA PLACEHOLDER ---------------- */ .media{border:2.5px solid var(--ink);border-radius:var(--r);box-shadow:5px 5px 0 var(--ink);background: repeating-linear-gradient(45deg,#fff,#fff 12px,#f3ead8 12px,#f3ead8 24px); display:grid;place-items:center;min-height:300px;position:relative;overflow:hidden;} .media .lbl{font-family:'Space Mono',monospace;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:30px;} .media.tall{min-height:420px;} .media.short{min-height:170px;} .shot{border:2.5px solid var(--ink);border-radius:14px;box-shadow:4px 4px 0 var(--ink);overflow:hidden;background:#fff;transition:transform .18s ease,box-shadow .18s ease;} .shot:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink);} .shot .thumb{aspect-ratio:16/10;background:repeating-linear-gradient(45deg,#fff,#fff 10px,#eef0ff 10px,#eef0ff 20px);display:grid;place-items:center;border-bottom:2.5px solid var(--ink);} .shot .thumb span{font-family:'Space Mono',monospace;font-size:.72rem;color:#8a8a92;} .shot .meta{padding:14px 16px;} .shot .meta h3{font-size:1.05rem;margin-bottom:3px;} .shot .meta .url{font-family:'Space Mono',monospace;font-size:.72rem;color:var(--blue);} .shot .meta .type{font-size:.82rem;color:#7a7a82;margin-top:4px;} /* ---------------- DREAM CLOUD ---------------- */ .dream{background:#fff;border:3px dashed var(--blue);border-radius:120px;padding:40px 48px;box-shadow:8px 8px 0 rgba(45,91,255,.18);position:relative;max-width:760px;margin:0 auto;text-align:center;} .dream h2{margin-bottom:10px;} .dream p{color:#46464f;max-width:560px;margin:0 auto;} .dream .puff{position:absolute;width:46px;height:46px;background:#fff;border:3px dashed var(--blue);border-radius:50%;} .dream .p1{bottom:-22px;left:60px;}.dream .p2{bottom:-40px;left:120px;width:30px;height:30px;} /* ---------------- CONTACT ---------------- */ .field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;} .field label{font-family:'Space Mono',monospace;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;} .field input,.field select,.field textarea{font-family:'DM Sans',sans-serif;font-size:.98rem;border:2.5px solid var(--ink);border-radius:11px;padding:12px 14px;background:#fff;box-shadow:3px 3px 0 var(--ink);} .field input:focus,.field select:focus,.field textarea:focus{outline:none;box-shadow:3px 3px 0 var(--coral);} .field textarea{min-height:96px;resize:vertical;} .formcard{background:var(--paper-2);border:3px solid var(--ink);border-radius:var(--r);box-shadow:7px 7px 0 var(--ink);padding:28px;} .formcard h3{font-size:1.4rem;margin-bottom:6px;} .formcard .note{font-family:'Space Mono',monospace;font-size:.72rem;color:#7a7a82;margin-top:10px;} /* ---------------- DIRECTOR ---------------- */ .quote-block{background:#fff;border:3px solid var(--ink);border-radius:var(--r);box-shadow:7px 7px 0 var(--ink);padding:30px 32px;} .quote-block .mark{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:3.4rem;color:var(--coral);line-height:.6;} .quote-block p{color:#3a3a44;margin:6px 0 12px;font-size:1.05rem;} .sigline{display:flex;align-items:center;gap:14px;margin-top:18px;} .sigline .av{width:54px;height:54px;border-radius:14px;border:2.5px solid var(--ink);box-shadow:3px 3px 0 var(--ink);background:var(--mint);display:grid;place-items:center;color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.2rem;} .sigline b{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;} .sigline small{display:block;color:#7a7a82;font-size:.86rem;} /* ---------------- FOOTER ---------------- */ .site-footer{background:var(--ink);color:#cfcfd6;border-top:3px solid var(--ink);margin-top:30px;} .site-footer .fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:30px;padding:48px 0 30px;} .site-footer h4{font-family:'Bricolage Grotesque',sans-serif;color:#fff;font-size:1rem;margin-bottom:14px;} .site-footer a{display:block;color:#b6b6c0;margin-bottom:9px;font-size:.92rem;} .site-footer a:hover{color:var(--yellow);} .site-footer .blurb{color:#9a9aa4;font-size:.92rem;max-width:300px;margin:14px 0 0;} .site-footer .brand{color:#fff;} .site-footer .brand small{color:#8a8a92;} .site-footer .copy{border-top:1px solid #33333d;padding:18px 0 40px;font-family:'Space Mono',monospace;font-size:.74rem;color:#7a7a82;letter-spacing:.03em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;} /* ---------------- MODAL (quote form) ---------------- */ .modal{position:fixed;inset:0;z-index:1000;display:none;align-items:flex-start;justify-content:center;padding:40px 18px;overflow-y:auto;background:rgba(22,22,29,.55);backdrop-filter:blur(3px);} .modal.open{display:flex;} .modal .box{background:var(--paper);border:3px solid var(--ink);border-radius:var(--r);box-shadow:10px 10px 0 var(--ink);max-width:560px;width:100%;padding:30px;position:relative;} .modal .x{position:absolute;top:16px;right:16px;width:40px;height:40px;border:2.5px solid var(--ink);border-radius:11px;background:#fff;box-shadow:3px 3px 0 var(--ink);cursor:pointer;font-size:1.2rem;font-weight:700;display:grid;place-items:center;} .modal h3{font-size:1.6rem;margin-bottom:4px;} /* reveal */ .rv{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease;} .rv.in{opacity:1;transform:none;} /* ---------------- RESPONSIVE ---------------- */ @media(max-width:920px){ .hero-grid{grid-template-columns:1fr;} .g4{grid-template-columns:repeat(2,1fr);} .site-footer .fgrid{grid-template-columns:1fr 1fr;} } @media(max-width:760px){ .menu{display:none;} .hamburger{display:flex;} .nav .btn{display:none;} .g2,.g3,.g4,.twocol{grid-template-columns:1fr;} .float{display:none;} .step{flex-direction:column;gap:14px;} .feature{box-shadow:5px 5px 0 var(--ink);} section{padding:42px 0;} .dream{border-radius:40px;padding:30px 26px;} } /* ---------------- ENQUIRY FORM (Phase 05) ---------------- */ .hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;} .form-status{margin-top:14px;padding:11px 15px;border-radius:11px;border:2.5px solid var(--ink);font-weight:600;box-shadow:3px 3px 0 var(--ink);} .form-status.ok{background:#E2F7EF;} .form-status.err{background:#FFE9E4;}