html{scroll-behavior:smooth;scroll-padding-top:100px}
body{line-height:1.6}
img{max-width:100%}
.portfolio-banner{position:sticky;top:0;z-index:50;background:#153d34;color:#f8f7f0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px max(22px,calc((100vw - 1160px)/2));font-size:11px;line-height:1.6}
.portfolio-banner>span{font-size:9px;letter-spacing:.09em;text-align:center;color:#d8e8dc}
.portfolio-back,.portfolio-contact{font-weight:650;text-underline-offset:4px}
.portfolio-back:hover,.portfolio-contact:hover{text-decoration:underline}
.portfolio-contact{color:#e2efb0}
.portfolio-note{margin:0;padding:10px 22px;background:#edf4eb;color:#3a5549;text-align:center;font-size:11px}
header{position:relative;top:auto}
.nav{min-height:80px;height:auto;padding-block:10px;gap:18px}
.nav .left{flex-shrink:0}
nav{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
nav a{margin:0}
.btn{font:inherit;font-size:14px;font-weight:700;text-align:center;cursor:pointer;border:0;background:var(--teal-dark)}
.btn-outline{background:transparent;border:2px solid var(--teal-dark);color:var(--teal-dark)}
.btn-outline:hover{background:#e8f8f5}
a:focus-visible,button:focus-visible{outline:3px solid #f97316;outline-offset:4px}
.hero-inner{width:100%;padding:46px 20px;align-items:center}
.hero h1{font-size:clamp(36px,4.3vw,60px);line-height:1.1;letter-spacing:-.04em;margin:0 0 20px;max-width:560px}
.hero p{max-width:500px;margin:0 0 25px;color:#465b5a}
.bowl{display:block;aspect-ratio:1.16;object-fit:cover;object-position:50% 45%}
.card .p{display:flex;flex-direction:column;align-items:flex-start;height:calc(100% - 200px)}
.card .p h3{margin:0 0 12px}
.card .p p{margin:0 0 16px}
.card .p .btn{margin-top:auto}
.section h2{line-height:1.2;font-size:clamp(28px,3vw,40px);letter-spacing:-.025em}
.section ul{padding-left:23px}
.section li{margin:10px 0}
.section li em{font-style:normal;font-weight:750;color:var(--teal-dark);margin-left:9px}
.small{font-size:12px;color:#536364}
dialog{width:min(560px,calc(100% - 36px));padding:35px;border:1px solid #d9e8e3;border-radius:20px;color:#0b1220;box-shadow:0 30px 100px #09251d40}
dialog::backdrop{background:#09251dc4;backdrop-filter:blur(4px)}
dialog h2{font-size:28px;line-height:1.2;letter-spacing:-.025em;margin:13px 0 18px}
dialog p:not(.kicker){font-size:14px;color:#445a55}
.dialog-close{position:absolute;right:14px;top:9px;border:0;background:transparent;cursor:pointer;color:#0f766e;font-size:29px;line-height:1;width:36px;height:36px}
.dialog-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.dialog-actions .btn{font-size:12px}
@media(max-width:700px){.portfolio-banner{gap:6px 14px;flex-wrap:wrap;padding:11px 20px}.portfolio-banner>span{order:3;flex-basis:100%;text-align:left;font-size:8px}.portfolio-back,.portfolio-contact{font-size:10px}.portfolio-note{font-size:10px;text-align:left;padding:10px 20px}.nav{flex-wrap:wrap;padding-block:15px}.nav .left{gap:7px!important}nav{gap:18px}.logo{height:40px}.nav .btn{font-size:12px;padding:9px 15px}.hero-inner{padding-block:36px;gap:28px}.hero{min-height:0}.hero h1{font-size:44px}.hero p{font-size:14px}.hero .btn{font-size:13px}.section{padding-block:38px}.grid-4{grid-template-columns:1fr}.card{display:grid;grid-template-columns:110px 1fr}.card img{height:100%;min-height:235px;object-fit:cover}.card .p{height:auto;padding:19px}.card .p p{font-size:12px}.card .btn{font-size:12px;padding:9px 16px}.section h2{font-size:29px}.section li{font-size:14px}.dialog-actions{flex-direction:column;align-items:stretch}dialog{padding:30px 25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

@media(max-width:700px){.promo{font-size:12px;padding-block:12px}.promo .container{flex-direction:column;align-items:stretch;gap:8px}.promo .container>span:nth-child(2){display:none}}