@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@600;700;800&display=swap');
:root{--ink:#17223b;--muted:#64708a;--paper:#fffdf8;--navy:#14213d;--purple:#7357e8;--coral:#ff7058;--yellow:#ffd568;--line:rgba(23,34,59,.12);--shadow:0 18px 50px rgba(38,33,75,.1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}.site-shell{min-height:100vh;overflow:hidden}.section-wrap{width:min(1180px,calc(100% - 48px));margin:0 auto}
.site-header{width:min(1180px,calc(100% - 48px));height:88px;margin:auto;display:flex;align-items:center;justify-content:space-between}.brand,.footer-brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-weight:800}.brand-mark{width:43px;height:43px;display:grid;place-items:center;color:white;background:var(--purple);border-radius:14px 14px 14px 5px;font:800 15px/1 'Manrope';transform:rotate(-3deg)}.brand-name{font:800 18px/1 'Manrope'}.nav-links{display:flex;align-items:center;gap:30px}.nav-links a{text-decoration:none;font-size:15px;font-weight:600}.nav-links a:hover{color:var(--purple)}.nav-cta{padding:12px 18px;border:1px solid var(--line);border-radius:999px}
.hero{min-height:650px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:72px;padding-top:64px;padding-bottom:100px}.eyebrow{margin:0 0 18px;color:var(--purple);font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.hero h1,.section-heading h2,.about-copy h2{font-family:'Manrope';margin:0;letter-spacing:-.045em;line-height:1.04}.hero h1{max-width:680px;font-size:clamp(54px,6vw,82px)}.hero h1 span{color:var(--purple)}.hero-intro{max-width:650px;margin:28px 0 0;color:var(--muted);font-size:20px;line-height:1.65}.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:36px}.button{display:inline-flex;align-items:center;justify-content:center;padding:15px 22px;border-radius:12px;text-decoration:none;font-weight:700;transition:.2s}.button:hover{transform:translateY(-2px)}.button-primary{color:white;background:var(--navy);box-shadow:0 12px 28px rgba(20,33,61,.2)}.button-secondary{background:white;border:1px solid var(--line)}
.hero-visual{min-height:470px;position:relative;display:grid;place-items:center}.hero-visual:before{content:'';position:absolute;inset:3% 0;background:#eee9ff;border-radius:48% 52% 52% 48%/58% 42% 58% 42%;transform:rotate(-6deg)}.code-card{width:min(420px,88%);position:relative;padding:44px;color:white;background:var(--navy);border-radius:28px;box-shadow:24px 28px 0 var(--yellow),var(--shadow);transform:rotate(2deg)}.code-label{display:inline-block;margin-bottom:28px;padding:7px 10px;color:var(--yellow);background:rgba(255,255,255,.09);border-radius:7px;font-size:11px;font-weight:700;letter-spacing:.12em}.code-line{font:700 clamp(23px,3vw,34px)/1.5 'Manrope'}.line-purple{color:#b4a4ff}.line-blue{color:#7bdaf3}.line-coral{color:#ff8d78}.code-card p{margin:28px 0 0;color:#cad2e4}.floating-icon{position:absolute;z-index:2;display:grid;place-items:center;width:62px;height:62px;background:white;border-radius:20px;box-shadow:var(--shadow);font-size:28px}.icon-one{top:2%;right:4%;transform:rotate(9deg)}.icon-two{bottom:10%;left:-2%;transform:rotate(-8deg)}.activity-badge{position:absolute;right:-3%;bottom:3%;z-index:3;display:flex;align-items:center;gap:9px;padding:13px 17px;background:white;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}.activity-badge strong{color:var(--coral);font:800 25px/1 'Manrope'}.activity-badge span{max-width:82px;color:var(--muted);font-size:12px;line-height:1.2}
.activities-section{padding:110px 0 130px}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:60px;margin-bottom:48px}.section-heading h2,.about-copy h2{font-size:clamp(38px,4vw,56px)}.section-intro{max-width:400px;margin:0 0 4px;color:var(--muted);font-size:17px;line-height:1.6}.project-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}.project-link{grid-column:span 2;text-decoration:none}.project-link:nth-child(4),.project-link:nth-child(5){grid-column:span 3}.project-card{height:100%;min-height:310px;display:flex;flex-direction:column;padding:30px;border:1px solid rgba(23,34,59,.08);border-radius:24px;transition:.22s}.project-card:hover{transform:translateY(-7px);box-shadow:var(--shadow)}.project-card-top{display:flex;justify-content:space-between}.project-tag{padding:7px 10px;background:rgba(255,255,255,.58);border-radius:999px;font-size:11px;font-weight:700;text-transform:uppercase}.project-icon{font-size:31px}.project-card h3{margin:auto 0 12px;font:800 27px/1.1 'Manrope';letter-spacing:-.03em}.project-card p{min-height:66px;margin:0 0 22px;color:rgba(23,34,59,.72);line-height:1.5}.card-cta{font-size:14px;font-weight:800}.arrow{display:inline-block;transition:.2s}.project-card:hover .arrow{transform:translateX(5px)}.card-mood{background:#dff4fa}.card-color{background:#fff0b9}.card-calculator{background:#ffe1da}.card-shape{background:#daf2e7}.card-story{background:#ece6ff}
.about-section{color:white;background:var(--navy)}.about-inner{min-height:620px;display:grid;grid-template-columns:.78fr 1.22fr;gap:100px;align-items:center;padding-top:90px;padding-bottom:90px}.portrait-card{aspect-ratio:1/1.08;position:relative;display:grid;place-items:center;background:var(--purple);border-radius:38% 62% 55% 45%/48% 40% 60% 52%}.portrait-monogram{font:800 clamp(76px,10vw,140px)/1 'Manrope';color:#ded7ff;letter-spacing:-.1em}.portrait-spark{position:absolute;top:12%;right:12%;color:var(--yellow);font-size:46px}.eyebrow-light{color:var(--yellow)}.about-copy p:not(.eyebrow){max-width:690px;color:#bdc7da;font-size:17px;line-height:1.75}.text-link{display:inline-block;margin-top:12px;color:var(--yellow);font-weight:700;text-underline-offset:5px}.site-footer{min-height:120px;display:flex;align-items:center;justify-content:space-between}.small{width:34px;height:34px;font-size:12px}.site-footer p{color:var(--muted);font-size:13px}
@media(max-width:900px){.hero{grid-template-columns:1fr;gap:30px}.project-link,.project-link:nth-child(4),.project-link:nth-child(5){grid-column:span 3}.about-inner{grid-template-columns:.7fr 1.3fr;gap:50px}}
@media(max-width:650px){.section-wrap,.site-header{width:min(100% - 30px,1180px)}.site-header{height:74px}.brand-name{font-size:15px}.nav-links a:not(.nav-cta){display:none}.nav-cta{padding:10px 13px;font-size:13px!important}.hero{min-height:auto;padding:70px 0 85px}.hero h1{font-size:48px}.hero-intro{font-size:17px}.hero-actions{flex-direction:column}.button{width:100%}.hero-visual{min-height:390px}.code-card{padding:31px 25px;box-shadow:14px 18px 0 var(--yellow),var(--shadow)}.activity-badge{right:0}.activities-section{padding:85px 0}.section-heading{align-items:start;flex-direction:column;gap:18px}.project-grid{display:block}.project-link{display:block;margin-bottom:16px}.project-card{min-height:275px}.about-inner{grid-template-columns:1fr;gap:56px}.portrait-card{width:min(78vw,350px);margin:auto}.site-footer{padding:30px 0;flex-direction:column;text-align:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition-duration:.01ms!important}}
.hero-photo{width:min(520px,96%);height:auto;aspect-ratio:1672/941;position:relative;z-index:1;display:block;object-fit:cover;object-position:center;border:8px solid white;border-radius:28px;box-shadow:24px 28px 0 var(--yellow),var(--shadow);transform:rotate(2deg)}
@media(max-width:650px){.hero-photo{height:auto;box-shadow:14px 18px 0 var(--yellow),var(--shadow)}}

/* Balanced hero alignment for the landscape portrait */
.hero-visual{min-height:440px;align-self:center;isolation:isolate}
.hero-visual::before{inset:5% 2%;border-radius:50%;transform:none}
.hero-photo{width:min(540px,94%);margin:0 auto;border-width:7px;border-radius:24px;box-shadow:16px 18px 0 var(--yellow),var(--shadow);transform:none}
.icon-one{top:6%;right:4%;transform:rotate(6deg)}
.icon-two{bottom:7%;left:1%;transform:rotate(-6deg)}
.activity-badge{right:1%;bottom:2%}
@media(max-width:900px){.hero-visual{width:min(620px,100%);min-height:430px;margin:0 auto}}
@media(max-width:650px){.hero-visual{min-height:330px}.hero-photo{width:94%;border-width:5px;border-radius:18px;box-shadow:10px 12px 0 var(--yellow),var(--shadow)}.floating-icon{width:46px;height:46px;border-radius:15px;font-size:23px}.icon-one{top:3%;right:1%}.icon-two{bottom:4%;left:0}.activity-badge{right:0;bottom:-1%}}