:root { --ink:#17191d; --muted:#595e67; --orange:#f3a015; --line:#dde0e3; --warm:#fffaf5; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:#fff; color:var(--ink); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:inherit; }
a:focus-visible { outline:3px solid var(--orange); outline-offset:4px; }
.container { width:min(100% - 48px,1208px); margin-inline:auto; }
.skip-link { position:absolute; top:-80px; left:18px; z-index:10; padding:12px 16px; background:#fff; }
.skip-link:focus { top:10px; }
.site-header { background:#fff; min-height:60px; }
.header-inner { min-height:60px; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.wordmark { display:inline-flex; align-items:baseline; gap:5px; text-decoration:none; white-space:nowrap; letter-spacing:-.045em; font-size:29px; line-height:1; }
.wordmark strong { font-weight:900; }
.wordmark span { font-weight:300; }
.site-header nav { display:flex; align-items:center; gap:42px; height:60px; }
.site-header nav a { position:relative; display:flex; height:100%; align-items:center; font-size:15px; text-decoration:none; }
.site-header nav a:hover { color:#b97100; }
.nav-active { font-weight:700; }
.nav-active::after { content:""; position:absolute; bottom:14px; left:0; right:0; height:3px; background:var(--orange); }
.hero { min-height:455px; display:flex; align-items:center; background-color:#f6f2ed; background-image:linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.98) 31%,rgba(255,255,255,.88) 45%,rgba(255,255,255,0) 63%),url('images/dilna-f45.webp'); background-position:center,center; background-size:cover,cover; background-repeat:no-repeat; }
.hero-inner { padding-block:45px 52px; }
.hero-copy { max-width:540px; }
.hero h1 { margin:0 0 15px; font-size:clamp(35px,3.25vw,48px); font-weight:800; line-height:.99; letter-spacing:-.043em; }
.hero h1 span { color:#ed9806; }
.hero p { max-width:540px; margin:0 0 24px; font-size:17px; line-height:1.38; color:#30343b; }
.primary-button { min-width:207px; min-height:51px; display:inline-flex; align-items:center; justify-content:space-between; gap:18px; padding:0 24px; background:#f6a619; color:#101114; text-decoration:none; border-radius:4px; font-weight:700; font-size:16px; transition:background .15s, transform .15s; }
.primary-button:hover { background:#ffba40; transform:translateY(-2px); }
.primary-button span { font-size:23px; font-weight:400; }
.benefits { background:#fff; }
.benefit-grid { display:grid; grid-template-columns:repeat(3,1fr); padding-block:22px; }
.benefit { min-width:0; display:flex; gap:20px; align-items:center; padding:0 32px 0 0; }
.benefit + .benefit { border-left:1px solid #d1d4d8; padding-left:70px; }
.benefit svg { flex:none; width:42px; height:42px; color:#e99708; }
.benefit strong { display:block; font-size:15px; line-height:1.3; }
.benefit p { margin:3px 0 0; font-size:14px; line-height:1.35; color:var(--muted); }
.brand-band { border-top:1px solid #f0f1f2; border-bottom:1px solid #f0f1f2; }
.brand-inner { min-height:133px; display:flex; align-items:center; gap:32px; }
.brand-inner h2 { flex:none; margin:0; font-size:24px; line-height:1.1; letter-spacing:-.04em; }
.brand-inner ul { flex:1; display:grid; grid-template-columns:repeat(7,1fr); align-items:center; min-width:0; margin:0; padding:0; list-style:none; }
.brand-inner li { min-width:0; min-height:78px; padding:4px 9px; border-left:1px solid #d5d7db; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; text-align:center; font-size:13px; font-weight:800; white-space:nowrap; }
.brand-inner li:first-child { border-left:0; }
.brand-inner li img { width:auto; height:auto; max-width:105px; max-height:31px; object-fit:contain; }
.brand-inner li img.logo-maggi { max-height:30px; }
.about { display:grid; grid-template-columns:1fr 1fr; min-height:267px; scroll-margin-top:20px; }
.about-photo { min-height:267px; overflow:hidden; }
.about-photo img { width:100%; height:100%; object-fit:cover; object-position:center; }
.about-copy { display:flex; align-items:center; padding:28px max(28px,calc((100vw - 1208px)/2)) 28px 48px; }
.about-inner { max-width:600px; }
.eyebrow { margin:0 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:#666b73; }
.about h2 { margin:0 0 26px; font-size:clamp(26px,2.4vw,36px); line-height:1.1; letter-spacing:-.04em; }
.about-copy p:last-child { margin:0; max-width:590px; font-size:15px; line-height:1.55; color:#5a5f68; }
.contact { background:var(--warm); padding:38px 0 65px; scroll-margin-top:15px; }
.contact-top { display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:108px; }
.contact h2 { margin:0; font-size:40px; letter-spacing:-.04em; line-height:1.15; }
.contact-lead { margin:11px 0 0; color:var(--muted); font-size:14px; }
.contact-email { display:flex; align-items:center; gap:30px; padding-left:48px; border-left:1px solid #d2d4d7; }
.contact-email svg { width:54px; height:48px; flex:none; color:#e8990e; }
.contact-email span { display:block; margin-bottom:3px; font-size:16px; }
.contact-email a { font-size:clamp(21px,2.2vw,31px); font-weight:800; text-decoration:none; letter-spacing:-.04em; overflow-wrap:anywhere; }
.contact-email a:hover,.detail-link:hover,.text-link:hover { color:#b97100; }
.contact-bottom { display:grid; grid-template-columns:repeat(3,1fr); gap:42px; margin-top:42px; padding-top:29px; border-top:1px solid #e7e4df; }
.detail-label { display:block; margin-bottom:11px; font-size:12px; font-weight:700; color:#747881; text-transform:uppercase; letter-spacing:.08em; }
.detail-link { display:block; width:max-content; max-width:100%; font-size:22px; font-weight:700; letter-spacing:-.03em; text-decoration:none; }
.contact-block address,.contact-block p { margin:0; font-size:16px; font-style:normal; line-height:1.5; }
.text-link { display:inline-block; margin-top:12px; font-size:13px; font-weight:700; text-decoration:none; border-bottom:1px solid currentColor; }
.site-footer { background:#1f2227; color:#fff; }
.footer-inner { min-height:80px; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:12px; }
.footer-inner>span:first-child { font-size:17px; letter-spacing:-.04em; white-space:nowrap; }
.footer-inner>span:nth-child(2) { color:#c3c6ca; }
.footer-inner a { color:#fff; white-space:nowrap; text-decoration:none; }
.footer-inner a:hover { color:#ffba40; }
@media (max-width:1100px) {
  .benefit + .benefit { padding-left:28px; }
  .benefit { gap:13px; padding-right:15px; }
  .brand-inner { gap:22px; }
  .brand-inner li { font-size:11px; padding-inline:5px; }
  .brand-inner li img { max-width:90px; }
  .about-copy { padding:30px; }
}
@media (max-width:760px) {
  .container { width:min(100% - 36px,1208px); }
  .wordmark { font-size:23px; }
  .site-header nav { gap:20px; }
  .site-header nav a { font-size:13px; }
  .hero { min-height:500px; background-position:center,59% center; background-image:linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,255,255,.88) 50%,rgba(255,255,255,.2)),url('images/dilna-f45.webp'); }
  .hero-copy { max-width:570px; }
  .hero h1 { font-size:clamp(36px,6.7vw,48px); }
  .hero p { max-width:420px; }
  .benefit-grid { gap:0; }
  .benefit { display:block; text-align:center; padding-inline:12px; }
  .benefit + .benefit { padding-left:12px; }
  .benefit svg { margin-bottom:7px; }
  .brand-inner { display:block; padding-block:24px; }
  .brand-inner h2 { margin-bottom:20px; }
  .brand-inner ul { grid-template-columns:repeat(4,1fr); row-gap:19px; }
  .brand-inner li:nth-child(5) { border-left:0; }
  .about { grid-template-columns:1fr; }
  .about-photo { height:300px; }
  .about-copy { padding:37px 24px 45px; }
  .contact-top { gap:25px; }
  .contact-email { gap:15px; padding-left:25px; }
  .contact-email svg { width:42px; }
  .contact-bottom { gap:20px; }
}
@media (max-width:550px) {
  .site-header,.header-inner { min-height:62px; }
  .wordmark { font-size:19px; }
  .site-header nav { height:62px; gap:13px; }
  .site-header nav a { font-size:12px; }
  .nav-active::after { bottom:13px; }
  .hero { min-height:560px; background-position:center,62% center; background-image:linear-gradient(90deg,rgba(255,255,255,.99) 0%,rgba(255,255,255,.94) 55%,rgba(255,255,255,.55) 100%),url('images/dilna-f45.webp'); }
  .hero-inner { padding-block:42px; }
  .hero h1 { font-size:clamp(28px,8vw,40px); line-height:1.08; letter-spacing:-.015em; overflow-wrap:break-word; }
  .hero h1 br { display:none; }
  .hero p { font-size:16px; max-width:340px; }
  .desktop-break { display:none; }
  .primary-button { min-height:50px; }
  .benefit-grid { display:block; padding-block:12px; }
  .benefit,.benefit + .benefit { display:flex; text-align:left; border-left:0; padding:15px 0; }
  .benefit + .benefit { border-top:1px solid var(--line); }
  .benefit svg { width:38px; height:38px; margin:0; }
  .benefit p { font-size:13px; }
  .brand-inner ul { grid-template-columns:repeat(2,1fr); row-gap:0; }
  .brand-inner li { min-height:84px; padding:10px 7px; font-size:13px; border-bottom:1px solid var(--line); }
  .brand-inner li:nth-child(odd) { border-left:0; }
  .brand-inner li:nth-child(5) { border-left:0; }
  .about-photo { height:235px; }
  .about-copy { padding:34px 18px 42px; }
  .about h2 { font-size:30px; margin-bottom:17px; }
  .contact { padding:36px 0 49px; }
  .contact-top { display:block; }
  .contact h2 { font-size:37px; }
  .contact-email { border-left:0; border-top:1px solid var(--line); margin-top:29px; padding:25px 0 0; }
  .contact-email a { font-size:clamp(21px,6.3vw,28px); }
  .contact-bottom { grid-template-columns:1fr; margin-top:31px; gap:25px; }
  .footer-inner { flex-wrap:wrap; min-height:115px; padding-block:22px; }
  .footer-inner>span:nth-child(2) { order:2; flex-basis:100%; }
}
@media (max-width:370px) {
  .wordmark { font-size:16px; }
  .site-header nav { gap:10px; }
  .site-header nav a { font-size:11px; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .primary-button { transition:none; } }