:root{
  --paper:#f4f0e8;
  --paper-soft:#ebece5;
  --ink:#17201c;
  --muted:#616a65;
  --green:#294a3b;
  --green-deep:#18362b;
  --sage:#9bad9f;
  --teal:#6d99a2;
  --terracotta:#c86f45;
  --terracotta-soft:#d89a77;
  --line:rgba(23,32,28,.10);
  --radius:28px;
  --shadow:0 20px 60px rgba(26,39,32,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
.anchor-target{scroll-margin-top:104px}
body{
  margin:0;
  font-family:"Manrope",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.shell{width:min(1180px,calc(100% - 40px));margin:0 auto}
.section-space{padding:56px 0 86px}
.compact-top{padding-top:20px}
.final-space{padding-bottom:54px}

.site-header{
  position:sticky;top:0;z-index:50;
  backdrop-filter:blur(18px);
  background:rgba(244,240,232,.82);
  border-bottom:1px solid rgba(23,32,28,.06);
}
.nav-wrap{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{font-weight:800;font-size:1.12rem;letter-spacing:-.03em}
nav{display:flex;gap:30px;font-size:.93rem;font-weight:600;color:#3f4944}
nav a{transition:.2s ease}
nav a:hover{color:var(--green)}

.hero-panel{
  display:grid;grid-template-columns:1.02fr .98fr;
  min-height:590px;
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:var(--shadow);
  background:#f7f3ed;
}
.hero-copy{padding:78px 64px 64px;display:flex;flex-direction:column;justify-content:center}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.76rem;text-transform:uppercase;letter-spacing:.14em;font-weight:800;color:#836c5e}
.eyebrow::before{content:"";width:34px;height:3px;border-radius:999px;background:var(--terracotta-soft)}
.hero h1{font-size:clamp(3.2rem,5.5vw,5.5rem);line-height:.98;letter-spacing:-.065em;margin:22px 0 26px;max-width:740px}
.hero-lede{font-size:1.2rem;line-height:1.6;color:var(--muted);max-width:560px;margin:0}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:999px;font-weight:750;font-size:.95rem;transition:.2s ease;border:1px solid transparent}
.button:hover{transform:translateY(-2px)}
.button-primary{background:var(--terracotta);color:#fff}
.button-secondary{border-color:#52605a;background:transparent}
.credentials{margin:28px 0 0;color:#727a76;font-size:.9rem}

.hero-visual{background:linear-gradient(145deg,#91a69a,#6e877a);position:relative;display:flex;align-items:center;justify-content:center;padding:70px 42px;overflow:hidden}
.hero-visual::after{content:"";position:absolute;right:-80px;top:-40px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.08)}
.device{position:relative;z-index:2}
.laptop{width:min(520px,100%)}
.screen{background:#111;border-radius:20px 20px 12px 12px;padding:10px;box-shadow:0 28px 55px rgba(17,26,21,.26)}
.screen::before{content:"";display:block;width:6px;height:6px;background:#4f5b55;border-radius:50%;margin:0 auto 7px}
.screen>div{border-radius:11px;overflow:hidden;background:#f4f0e8}
.screen-top{display:flex;justify-content:space-between;padding:14px 18px;font-size:.62rem;color:#3b443f;border-bottom:1px solid #ded8cf}
.screen-top span:first-child{font-weight:800;font-size:.8rem}
.screen-body{display:grid;grid-template-columns:1.05fr .95fr;min-height:280px}
.screen-copy{padding:35px 28px;display:flex;flex-direction:column;justify-content:center}
.screen-copy small{font-size:.55rem;letter-spacing:.14em;color:#8e6755;margin-bottom:12px}
.screen-copy strong{font-size:2rem;line-height:1.02;letter-spacing:-.05em;margin-bottom:12px}
.screen-copy span{font-size:.68rem;color:#696f6c;line-height:1.5}
.yarn-collage{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:6px;padding:16px;background:#ddd5c9}
.yarn-collage i{display:block;border-radius:12px;background:linear-gradient(135deg,#c96d48,#8e4936)}
.yarn-collage i:nth-child(2){background:linear-gradient(135deg,#c6aa7e,#8b6f53)}
.yarn-collage i:nth-child(3){background:linear-gradient(135deg,#758c74,#506653)}
.yarn-collage i:nth-child(4){background:linear-gradient(135deg,#e0c6a7,#9f6b52)}
.laptop-base{height:16px;width:108%;margin-left:-4%;background:linear-gradient(#a5a5a5,#d1d1d1);clip-path:polygon(4% 0,96% 0,100% 55%,68% 100%,32% 100%,0 55%);filter:drop-shadow(0 8px 8px rgba(0,0,0,.16))}

.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.service-card{background:#e8ece5;border-radius:24px;padding:34px 34px 32px;border:1px solid rgba(34,68,54,.06);min-height:220px}
.service-card h2{font-size:1.28rem;margin:24px 0 10px;letter-spacing:-.03em}
.service-card p{margin:0;color:#5f6a64;line-height:1.65;font-size:.96rem}
.service-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--green);color:white;font-size:1.3rem;font-weight:800}
.service-blue .service-icon{background:var(--teal)}

.section-heading{margin-bottom:34px}
.section-heading h2{font-size:clamp(2.2rem,4vw,4rem);letter-spacing:-.055em;margin:16px 0 0}

.projects-grid{display:grid;grid-template-columns:1.1fr .9fr;grid-template-rows:auto auto;gap:28px}
.project{position:relative;overflow:hidden;border-radius:var(--radius);min-height:400px;box-shadow:var(--shadow)}
.project-art{grid-row:1 / span 2;background:linear-gradient(145deg,#234335,#173127);min-height:760px}
.project-bib{background:linear-gradient(145deg,#7ea2aa,#567f88)}
.project-tools{background:linear-gradient(145deg,#d68255,#c4663f)}
.project-copy{position:relative;z-index:5;padding:42px;max-width:440px}
.project-copy span{font-size:.7rem;text-transform:uppercase;letter-spacing:.14em;font-weight:800;opacity:.72}
.project-copy h3{font-size:2.4rem;letter-spacing:-.05em;margin:10px 0 14px;line-height:1.02}
.project-copy p{font-size:1rem;line-height:1.6;margin:0;max-width:380px}
.light-copy{color:white}
.light-copy p{color:rgba(255,255,255,.78)}
.dark-copy{color:#211c19}
.dark-copy p{color:#4f392f}
.project-device{position:absolute;inset:auto 20px 0 70px}
.monitor{position:relative;transform:rotate(-3deg);transform-origin:center bottom}
.monitor-screen{background:#151515;border-radius:18px;padding:10px;box-shadow:0 30px 50px rgba(0,0,0,.25)}
.monitor-screen>div{background:#f5f0e8;border-radius:10px;overflow:hidden}
.mini-head{padding:14px 16px;font-size:.65rem;font-weight:800;color:#2b302d;display:flex;justify-content:space-between}
.mini-head span{font-weight:500;color:#777}
.mini-body{display:grid;grid-template-columns:1fr 1fr;min-height:280px}
.mini-body>div:first-child{padding:40px 28px;display:flex;flex-direction:column;justify-content:center}
.mini-body small{font-size:.55rem;color:#8e6755;letter-spacing:.12em;margin-bottom:12px}
.mini-body strong{font-size:2rem;line-height:1.03;letter-spacing:-.05em}
.mini-yarn{background:linear-gradient(145deg,#d79869,#aa5b3a 45%,#60755f 46%,#3f5645 100%)}
.monitor-stand{width:34%;height:120px;margin:-6px auto 0;background:linear-gradient(90deg,#747a77,#d7dad7,#747a77);clip-path:polygon(40% 0,60% 0,68% 83%,100% 92%,100% 100%,0 100%,0 92%,32% 83%)}

.phone{position:absolute;right:28px;bottom:-55px;width:205px;height:410px;border-radius:38px;background:#161616;padding:9px;transform:rotate(8deg);box-shadow:0 22px 40px rgba(0,0,0,.25)}
.phone-screen{height:100%;border-radius:30px;background:#f3f1ea;padding:44px 24px 22px;display:flex;flex-direction:column;color:#1d2622}
.phone-mark{width:44px;height:44px;border-radius:14px;background:var(--green);color:#fff;display:grid;place-items:center;margin-bottom:18px}
.phone strong{font-size:2rem;letter-spacing:-.05em}
.phone small{color:#6a736e;margin-top:5px}
.chatline{margin-top:auto;border:1px solid #c8cdc9;border-radius:999px;padding:12px 13px;font-size:.65rem;display:flex;justify-content:space-between;align-items:center}
.chatline span{background:var(--green);color:#fff;width:24px;height:24px;border-radius:50%;display:grid;place-items:center}
.dashboard-mini{position:absolute;right:34px;bottom:28px;display:flex;gap:14px;transform:rotate(-4deg)}
.dash-card{width:150px;height:150px;background:#f3f1ea;border-radius:18px;padding:22px;display:flex;align-items:flex-end;gap:8px;box-shadow:0 14px 35px rgba(0,0,0,.12)}
.dash-card span{display:block;width:14px;background:#648779;border-radius:7px 7px 0 0}
.dash-card span:nth-child(1){height:38%}.dash-card span:nth-child(2){height:58%}.dash-card span:nth-child(3){height:45%}.dash-card span:nth-child(4){height:74%}.dash-card span:nth-child(5){height:64%}
.dash-card.second{width:120px;height:150px;display:grid;align-content:center;gap:10px}
.dash-card.second b{height:9px;border-radius:999px;background:#d6d8d4}
.dash-card.second b:nth-child(2){width:75%}.dash-card.second b:nth-child(3){width:90%}.dash-card.second b:nth-child(4){width:60%}

.about-panel{display:grid;grid-template-columns:.9fr 1.1fr;background:#f0ece4;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);min-height:560px}
.portrait-wrap{margin:0;min-height:560px;background:#d4d4d0}
.portrait-wrap img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);object-position:center}
.about-copy{padding:70px 74px;display:flex;flex-direction:column;justify-content:center}
.about-copy h2{font-size:clamp(2.7rem,4.5vw,4.8rem);letter-spacing:-.06em;line-height:1;margin:18px 0 22px}
.about-lede{font-size:1.25rem;line-height:1.55;margin:0 0 18px;max-width:600px}
.about-copy>p:not(.about-lede){font-size:1rem;line-height:1.75;color:#626a66;max-width:610px;margin:0}
.text-link{margin-top:28px;font-weight:800;display:inline-flex;align-items:center;gap:8px;width:max-content}
.text-link span{transition:.2s ease}.text-link:hover span{transform:translateX(4px)}

.contact-panel{background:linear-gradient(135deg,var(--green-deep),#27483b);color:white;border-radius:var(--radius);padding:58px 64px;display:flex;align-items:center;justify-content:space-between;gap:30px;box-shadow:var(--shadow)}
.contact-panel h2{font-size:clamp(2.2rem,4vw,4rem);letter-spacing:-.055em;margin:16px 0 12px}
.contact-panel p{margin:0;color:rgba(255,255,255,.75);max-width:620px;line-height:1.65}
.eyebrow-light{color:#dfc6b8}.eyebrow-light::before{background:#e19b79}
.button-warm{background:var(--terracotta);color:white;white-space:nowrap}

footer{border-top:1px solid var(--line)}
.footer-inner{min-height:92px;display:flex;align-items:center;justify-content:space-between;color:#68706c;font-size:.88rem}
.footer-inner div{display:flex;gap:22px}

@media (max-width: 900px){
  nav{display:none}
  .hero-panel{grid-template-columns:1fr}
  .hero-copy{padding:58px 38px 48px}
  .hero-visual{min-height:430px;padding:46px 30px}
  .services-grid{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:1fr;grid-template-rows:auto}
  .project-art{grid-row:auto;min-height:680px}
  .project-bib,.project-tools{min-height:440px}
  .about-panel{grid-template-columns:1fr}
  .portrait-wrap{min-height:460px}
  .about-copy{padding:52px 38px 58px}
  .contact-panel{align-items:flex-start;flex-direction:column}
}

@media (max-width: 620px){
  .shell{width:min(100% - 24px,1180px)}
  .section-space{padding:34px 0 60px}
  .hero-panel,.about-panel,.project,.contact-panel{border-radius:22px}
  .hero-copy{padding:44px 24px 34px}
  .hero h1{font-size:3rem}
  .hero-lede{font-size:1.06rem}
  .hero-visual{min-height:340px;padding:38px 18px}
  .screen-body{min-height:210px}
  .screen-copy{padding:22px 16px}.screen-copy strong{font-size:1.35rem}
  .service-card{padding:28px 24px}
  .section-heading{margin-bottom:26px}
  .project{min-height:430px}
  .project-art{min-height:620px}
  .project-copy{padding:30px 26px}
  .project-copy h3{font-size:2rem}
  .project-device{left:26px;right:-18px}
  .phone{width:175px;height:355px;right:18px}
  .dashboard-mini{right:18px;bottom:18px;transform:scale(.82) rotate(-4deg);transform-origin:right bottom}
  .about-copy{padding:40px 26px 46px}
  .contact-panel{padding:42px 26px}
  .footer-inner{flex-direction:column;justify-content:center;gap:14px;padding:20px 0}
}