/* Luca Bongi — primavera. No fonts, icon kits or UI frameworks. */
:root {
  color-scheme: light;
  --bg:#fcfaf5;
  --paper:#ffffff;
  --ink:#28372f;
  --muted:#6c7971;
  --green:#497b5c;
  --green-deep:#315d43;
  --sage:#e7f0df;
  --mint:#d7e7d9;
  --peach:#f4b491;
  --peach-light:#fff0e6;
  --butter:#f8ecc8;
  --line:#e7e7dc;
  --shadow:0 18px 45px rgba(72,85,63,.065);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;background:var(--bg)}
body{margin:0;min-width:280px;color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}h1,h2,h3,p{margin-top:0}
::selection{background:#d5e9d1;color:#24412c}
:focus-visible{outline:3px solid #d98861;outline-offset:3px}
.ico{display:block;width:19px;height:19px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.shell{width:min(1120px,calc(100% - 64px));margin-inline:auto}
.skip-link{position:fixed;top:-100px;left:12px;z-index:100;background:#315d43;color:white;padding:8px 14px;border-radius:8px}
.skip-link:focus{top:12px}
/* compact header pinned flush to the TOP — no banners/blank spacers */
.site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid #e4e9dd;background:rgba(252,250,245,.95);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.header-row{height:72px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;gap:11px;align-items:center;min-width:0}
.brand-symbol{width:43px;height:43px;display:grid;place-items:center;border-radius:14px;background:var(--green);color:#fff;font-weight:760;font-size:22px;letter-spacing:-.09em;line-height:1}
.brand-symbol span{color:#f8c29e}.brand-copy{display:flex;flex-direction:column;line-height:1.24;gap:4px}.brand-copy strong{font-size:14px;letter-spacing:-.02em}.brand-copy small{color:var(--muted);font-size:11px}
.site-nav{display:flex;align-items:center;gap:32px;font-size:13px;font-weight:600}
.site-nav>a:not(.nav-contact){transition:color .2s}.site-nav>a:not(.nav-contact):hover{color:var(--green)}
.nav-contact{display:flex;align-items:center;gap:13px;padding:10px 17px;border:1px solid #bed2c0;border-radius:999px;background:#fff;color:#355740}.nav-contact .ico{width:15px;height:15px}
.nav-contact:hover{border-color:var(--green);background:#f1f7eb}
.menu-toggle{display:none}
/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:center;gap:clamp(32px,5vw,78px);padding-top:63px;padding-bottom:76px}
.hero-copy{min-width:0}
.eyebrow{display:flex;align-items:center;gap:11px;color:#5d8267;font-size:12px;font-weight:680;letter-spacing:.015em;margin-bottom:17px}
.little-sun{width:12px;height:12px;border-radius:50%;background:#efa97f;box-shadow:0 0 0 5px #f9e7d3}
h1{font-size:clamp(35px,4.5vw,57px);font-weight:730;line-height:1.12;letter-spacing:-.054em;margin:0 0 24px}
h1 em,.section-intro h2 em,.contact-intro h2 em{font-family:Georgia,"Times New Roman",serif;font-weight:normal;font-style:italic;color:#5d916a;letter-spacing:-.06em}
.lead{color:#43564a;font-size:16px;line-height:1.7;max-width:525px;margin-bottom:12px}
.hero-detail{font-size:14px;color:#728075;line-height:1.72;max-width:525px;margin-bottom:0}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:15px 23px;margin-top:28px}
.btn{min-height:46px;display:inline-flex;justify-content:center;align-items:center;gap:12px;font-weight:690;font-size:13px;border-radius:99px;white-space:nowrap;transition:transform .2s,background .2s,box-shadow .2s}
.btn .ico{width:17px;height:17px}
.btn:hover{transform:translateY(-2px)}
.btn-main{background:#447853;color:white;padding:12px 21px;box-shadow:0 8px 21px #497b5c2a}
.btn-main:hover{background:#2d6040;box-shadow:0 12px 24px #497b5c30}
.btn-underlined{color:#456b51;border-bottom:1px solid #adc3ac;border-radius:0;min-height:auto;padding:10px 0 8px}
.btn-underlined:hover{color:#b66d4f}
.hero-tags{display:flex;gap:10px 18px;flex-wrap:wrap;margin-top:31px;padding-top:18px;border-top:1px solid #e3e8dd}
.hero-tags span{display:inline-flex;align-items:center;gap:6px;color:#697a6e;font-size:11px;font-weight:580}
.hero-tags .ico{width:13px;height:13px;color:#5e9168}
/* airy editorial image instead of a fake code editor */
.hero-visual{position:relative;min-width:0;padding:20px 13px 11px 14px}
.hero-visual::before{content:"";position:absolute;inset:0 4px 9px 20px;border-radius:42% 45% 25% 30%;background:linear-gradient(145deg,#eff1d9 5%,#dce9dd 63%,#f6ecda);transform:rotate(-6deg)}
.visual-note{position:absolute;z-index:3;top:2px;left:-6px;transform:rotate(-7deg);font-size:12px;line-height:1.35;color:#67765f;letter-spacing:.02em}
.visual-note em{font-family:Georgia,serif;color:#ab7665;font-size:15px}
.design-card{position:relative;z-index:1;width:88%;max-width:410px;margin:17px auto 0;background:#fffdf7;border:7px solid #fff;border-radius:20px;box-shadow:0 22px 58px #4c5a4429;overflow:hidden;transform:rotate(3deg)}
.design-nav{height:44px;padding:0 21px;display:flex;align-items:center;justify-content:space-between;font-size:14px;font-weight:790;letter-spacing:-.05em}
.brand-period{color:#e5a077}
.design-lines{display:flex;flex-direction:column;gap:5px;width:17px}.design-lines i{display:block;width:17px;height:1.5px;background:#587e63;border-radius:2px}
.design-art{height:200px;position:relative;overflow:hidden;background:linear-gradient(180deg,#e2e9d1 0%,#eff1dc 78%)}
.art-sun{position:absolute;width:90px;height:90px;top:18px;right:50px;border-radius:50%;background:#f9d49c}
.art-hill{position:absolute;border-radius:58% 62% 0 0}
.art-hill-one{width:110%;height:160px;bottom:-100px;left:-20%;background:#9fbea0;transform:rotate(11deg)}
.art-hill-two{width:104%;height:150px;bottom:-99px;right:-25%;background:#688d72;transform:rotate(-16deg)}
.art-flower{position:absolute;bottom:8px;left:48%;width:95px;height:130px}
.art-flower::before{position:absolute;content:"";width:2px;height:80px;left:45px;bottom:0;background:#47755c;transform:rotate(-7deg)}
.art-flower i{position:absolute;width:45px;height:59px;left:22px;top:12px;border-radius:70% 70% 10% 70%;background:#f0b59d;transform-origin:50% 75%}
.art-flower i:nth-child(1){transform:rotate(0)}.art-flower i:nth-child(2){transform:rotate(72deg)}.art-flower i:nth-child(3){transform:rotate(144deg)}.art-flower i:nth-child(4){transform:rotate(216deg)}.art-flower i:nth-child(5){transform:rotate(288deg)}
.art-flower b{position:absolute;z-index:2;width:28px;height:28px;left:31px;top:33px;border-radius:50%;background:#f5df96}
.design-content{padding:22px 24px 26px}.design-content>span{display:block;color:#91a08d;font-size:9px;font-weight:700;letter-spacing:.12em;margin-bottom:12px}
.design-content strong{display:block;font-size:29px;line-height:1.12;letter-spacing:-.045em;color:#395745;font-weight:750}
.design-content strong em{font:italic 1.08em Georgia,serif;color:#d18c75}
.design-content small{display:block;color:#748677;font-size:11px;margin-top:10px}
.visual-sticker{position:absolute;z-index:3;right:1px;bottom:44px;transform:rotate(-7deg);min-width:126px;background:#f9c7a6;border:3px solid #fff8eb;border-radius:14px;padding:12px 17px;color:#465942;font-size:12px;box-shadow:0 11px 29px #70574827}
.visual-sticker em{font:italic 17px Georgia,serif;display:block;color:#935c4a}
.sticker-dot{position:absolute;top:10px;right:12px;width:10px;height:10px;border-radius:50%;background:#fff3dd}
/* section headings */
.section-kicker{font-size:11px;letter-spacing:.12em;font-weight:760;color:#79947c;margin-bottom:13px}
.section-intro{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:end;margin-bottom:30px}
.section-intro h2,.contact-intro h2{font-size:clamp(30px,3.3vw,42px);font-weight:730;line-height:1.19;letter-spacing:-.04em;margin:0}
.section-intro>p{max-width:400px;color:#728075;font-size:14px;line-height:1.75;margin:0 0 4px auto}
/* Work */
.work-section{padding:77px 0 89px;border-top:1px solid #e8eadd;background:linear-gradient(180deg,#fffefa 0%,#fbfaf5 100%)}
.work-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:25px;row-gap:39px}
.work-card{min-width:0}.work-link{display:block;min-width:0}
.work-visual{position:relative;overflow:hidden;aspect-ratio:1.72;background:#e6ede5;border:7px solid white;border-radius:18px;box-shadow:0 4px 17px #49563b15;transition:transform .23s,box-shadow .23s}
.work-link:hover .work-visual{transform:translateY(-3px);box-shadow:0 13px 25px #49563b22}
.work-visual img{width:100%;height:100%;object-fit:cover;object-position:center;background:#e7ecdc}
.work-visit{position:absolute;bottom:14px;right:14px;background:#fffefa;color:#2e5740;border:1px solid #e1e8dc;padding:8px 13px;display:flex;align-items:center;gap:9px;font-weight:690;font-size:11px;border-radius:100px;box-shadow:0 5px 12px #293c3422}
.work-visit .ico{width:14px;height:14px}
.work-detail{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:17px 4px 0}
.work-text{min-width:0}.work-type{font-size:10px;color:#7e9384;font-weight:690;letter-spacing:.06em;text-transform:uppercase;margin:0 0 5px}
.work-detail h3{font-size:20px;letter-spacing:-.028em;line-height:1.25;margin:0 0 6px;font-weight:720}
.work-description{font-size:13px;color:#748076;line-height:1.58;margin:0;max-width:420px}
.work-open{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid #d7e1d6;background:#fff;color:#436f50}
.work-open .ico{width:16px;height:16px}
.work-link:hover .work-open{background:#e6f0e4}
.next-card{min-height:324px;padding:34px;position:relative;overflow:hidden;background:#f9e9d7;border:1px solid #f1d9c4;border-radius:18px;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;transition:transform .2s}
.next-card:hover{transform:translateY(-3px)}
.next-orb{position:absolute;width:225px;height:225px;border-radius:50%;right:-75px;top:-65px;background:radial-gradient(circle at 30% 30%,#ffdbba,#e7c1ac 70%);box-shadow:0 0 0 34px #fbe8d4,0 0 0 70px #f7e1d0;opacity:.9}
.next-kicker{position:relative;z-index:1;font-size:11px;font-weight:740;letter-spacing:.08em;color:#9e7459}
.next-card>strong{position:relative;z-index:1;font-size:clamp(25px,2.6vw,34px);font-weight:720;line-height:1.2;letter-spacing:-.04em;color:#4a5948}
.next-card>strong em{font:italic 1.1em Georgia,serif;color:#ac765a}
.next-cta{position:relative;z-index:1;font-size:13px;font-weight:700;color:#4c7458;display:flex;align-items:center;gap:8px}.next-cta .ico{width:16px;height:16px}
/* Services */
.approach-section{background:#eef3ea;padding:79px 0 89px;border-top:1px solid #e3eadf;border-bottom:1px solid #e3eadf}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px}
.service-card{background:#fffefa;border-radius:18px;padding:28px 25px 31px;border:1px solid #e0e8dc;box-shadow:0 5px 20px #435b4010;min-width:0}
.service-icon{width:49px;height:49px;display:grid;place-items:center;border-radius:15px;margin-bottom:34px}
.service-icon .ico{width:24px;height:24px}.peach-icon{background:#fce6d7;color:#ad785e}.green-icon{background:#dbedda;color:#4f7f61}.yellow-icon{background:#f9eac5;color:#8d7949}
.service-card h3{font-size:17px;line-height:1.3;letter-spacing:-.02em;margin-bottom:11px}
.service-card p{color:#758176;font-size:13px;line-height:1.75;margin:0}
/* Contact */
.contact-section{padding:86px 0 91px}
.contact-panel{display:grid;grid-template-columns:1fr .83fr;gap:38px;align-items:center;padding:48px 49px;background:linear-gradient(120deg,#edf3e9 0%,#e8efdf 55%,#f8ead7 100%);border:1px solid #e3e9db;border-radius:25px;position:relative;overflow:hidden}
.contact-panel::after{content:"";position:absolute;top:-120px;right:-70px;width:230px;height:230px;background:#fff7eb77;border-radius:50%;pointer-events:none}
.contact-intro{position:relative;z-index:1}.contact-intro .section-kicker{color:#628067}
.contact-intro h2{font-size:clamp(31px,3.2vw,42px)}
.contact-intro h2 em{color:#ad8062}
.contact-intro p:not(.section-kicker){font-size:14px;line-height:1.72;color:#67786b;max-width:435px;margin:17px 0 24px}
.contact-methods{position:relative;z-index:1;background:rgba(255,255,255,.83);border:1px solid #e4eadf;border-radius:17px;padding:7px 20px;min-width:0}
.contact-methods a{display:flex;align-items:center;gap:14px;padding:17px 0;border-bottom:1px solid #e6e9df;min-width:0;transition:transform .2s}
.contact-methods a:hover{transform:translateX(3px)}.contact-methods a:last-child{border-bottom:0}
.contact-method-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;color:#4c7958;background:#e9f1e6;flex:none}
.contact-method-icon .ico{width:20px;height:20px}
.contact-method-text{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.contact-method-text strong{font-size:13px;font-weight:720}
.contact-method-text small{font-size:11px;color:#748174;overflow-wrap:anywhere}
.contact-methods a>.ico{width:17px;height:17px;color:#7e9a7f}
/* Footer + floating contacts */
.site-footer{border-top:1px solid #e4e8dc;background:#fffefa}
.footer-row{min-height:80px;display:flex;align-items:center;gap:20px;font-size:11px;color:#839082}
.footer-brand{font-weight:820;font-size:25px;color:#417450;letter-spacing:-.075em}
.footer-brand span{color:#e8aa82}.footer-row>a:last-child{margin-left:auto;color:#547c5b;font-weight:700;display:flex;align-items:center;gap:7px}.footer-row>a .ico{width:14px;height:14px}
.quick-contacts{position:fixed;right:clamp(12px,2vw,26px);bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:60;display:flex;flex-direction:column;gap:10px}
.quick-contact{width:59px;height:59px;border:2px solid white;box-shadow:0 6px 21px #405f4330;border-radius:50%;display:grid;place-items:center;transition:transform .2s,box-shadow .2s}
.quick-contact:hover{transform:translateY(-3px);box-shadow:0 11px 25px #405f433a}
.quick-contact .ico{width:28px;height:28px}
.quick-wa{background:#cdebd3;color:#286b49}.quick-call{background:#fff2e6;color:#815d4d}
@media (max-width:1020px){
 .hero{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:25px}
 .hero-visual{padding-right:0}h1{font-size:clamp(35px,4.6vw,50px)}
 .contact-panel{gap:24px;padding:40px 30px}
}
@media (max-width:800px){
 .hero{grid-template-columns:1fr;gap:27px;padding:45px 0 60px}
 .hero-copy{max-width:630px}.hero-visual{width:min(480px,100%);margin:auto}
 .hero-visual .design-card{width:83%}
 .section-intro{grid-template-columns:1fr;gap:13px}.section-intro>p{margin:0;max-width:590px}
 .service-grid{gap:13px}.service-card{padding:23px 20px 25px}
 .contact-panel{grid-template-columns:1fr;gap:25px}.contact-methods{max-width:560px}
}
@media (max-width:700px){
 html{scroll-padding-top:73px}
 .shell{width:calc(100% - 36px)}
 .header-row{height:66px}.brand-symbol{width:39px;height:39px;font-size:21px;border-radius:12px}
 .brand-copy strong{font-size:13px}.brand-copy small{font-size:10px}
 .menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;flex:none;width:42px;height:42px;border-radius:13px;border:1px solid #cbdccd;background:#f1f6ed;cursor:pointer}
 .menu-toggle span{width:18px;height:2px;background:#477454;border-radius:2px;transition:transform .2s}
 .menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
 .menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
 .site-nav{display:none;position:absolute;left:0;right:0;top:66px;padding:14px 18px 20px;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid #dfe7d9;box-shadow:0 12px 20px #263b2e12}
 .site-nav.open{display:flex}
 .site-nav a:not(.nav-contact){padding:13px 5px;border-bottom:1px solid #e3eadd}
 .site-nav .nav-contact{margin-top:13px;justify-content:space-between;max-width:400px}
 .hero{padding-top:31px;padding-bottom:54px;gap:23px}
 .eyebrow{font-size:11px;margin-bottom:15px}
 h1{font-size:clamp(34px,7.8vw,44px);line-height:1.13;margin-bottom:18px}
 .lead{font-size:15px}.hero-detail{font-size:13px}
 .hero-actions{gap:12px 16px;margin-top:23px}.btn{font-size:12px}
 .hero-tags{margin-top:23px;padding-top:16px;gap:8px 14px}
 .hero-visual{max-width:420px}.design-art{height:180px}
 .work-section{padding:62px 0 65px}.section-intro{margin-bottom:24px}
 .section-intro h2{font-size:clamp(29px,7vw,37px)}.section-intro>p{font-size:13px}
 .work-grid{grid-template-columns:1fr;gap:28px}.work-visual{aspect-ratio:1.64}
 .work-detail h3{font-size:19px}.work-description{font-size:12.5px}
 .next-card{min-height:280px}
 .approach-section{padding:64px 0}.service-grid{grid-template-columns:1fr;gap:13px}
 .service-card{padding:22px}.service-icon{margin-bottom:17px}
 .contact-section{padding:63px 0}.contact-panel{padding:29px 22px;border-radius:21px}
 .contact-intro h2{font-size:clamp(28px,7.5vw,39px)}
 .contact-methods{padding:4px 14px}.contact-methods a{padding:14px 0;gap:12px}
 .footer-row{min-height:87px;flex-wrap:wrap;gap:6px 14px;padding:15px 0 73px}
 .footer-row>a:last-child{margin-left:auto}
 .quick-contacts{right:12px;bottom:calc(15px + env(safe-area-inset-bottom,0px));gap:8px}
 .quick-contact{width:54px;height:54px}.quick-contact .ico{width:26px;height:26px}
}
@media (max-width:380px){
 .shell{width:calc(100% - 30px)}
 .hero{padding-top:26px}.hero-actions{align-items:flex-start;flex-direction:column}.btn-underlined{margin-left:2px}
 h1{font-size:clamp(31px,8vw,35px)}
 .design-nav{height:35px}.design-art{height:145px}
 .design-content{padding:17px 19px 18px}.design-content strong{font-size:23px}
 .visual-sticker{right:0;bottom:34px;font-size:10px;padding:8px 11px}.visual-sticker em{font-size:14px}
 .work-visit{bottom:9px;right:9px;padding:7px 9px;font-size:10px}
 .work-visual{border-width:5px}
 .contact-intro h2{font-size:29px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
/* Clip one-pixel decorative overhang on very narrow screens without disabling sticky header. */
html,body{overflow-x:clip}