*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#faf9f6;color:#101c25;font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}header{height:64px;background:#fbfaf8;display:flex;align-items:center;padding:0 max(4%,calc((100vw - 1335px)/2));gap:40px}.brand{display:flex;align-items:center;gap:14px;white-space:nowrap}.brand-mark{font-size:43px;color:#405633}.brand-name{font-size:23px;letter-spacing:2px}.brand-name small{display:block;font-size:8px;letter-spacing:1px;margin-top:5px}nav{display:flex;align-items:center;gap:30px;margin:auto;font-size:13px;height:100%}nav a{height:100%;display:grid;place-items:center;position:relative}nav a:first-child:after{content:'';position:absolute;bottom:6px;height:2px;background:#465b39;width:100%}.pill{display:inline-flex;align-items:center;justify-content:center;gap:18px;background:linear-gradient(#526345,#344329);color:white;border:1px solid #5c6a52;border-radius:30px;padding:11px 24px;font-size:14px}.language{font-size:13px;white-space:nowrap}.hero{height:390px;position:relative;overflow:hidden;background:#e8eeeb}.hero-art{position:absolute;right:0;width:70%;height:100%}.photo{display:block;width:100%;height:100%}.hero-copy{position:relative;z-index:1;width:39%;height:100%;padding:27px 0 20px max(5%,calc((100vw - 1335px)/2));background:linear-gradient(100deg,#f4f6f3 65%,#e8eeeb00)}h1,h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;margin:0;letter-spacing:-1.2px}h1{font-size:58px;line-height:.97}.rule{height:2px;width:58px;background:#4b623d;margin:16px 0}.hero p{font-size:17px;line-height:1.22;max-width:340px;margin:0 0 13px}.benefits{min-height:77px;display:grid;grid-template-columns:repeat(4,1fr);gap:35px;padding:12px 8%;background:#fcfbf9}.benefit{display:flex;gap:25px;align-items:center}.icon{flex-shrink:0;width:45px;height:45px;stroke:#455c35;stroke-width:1.5;fill:none}.benefit strong,.reason strong{font-size:14px;display:block;margin-bottom:4px}.benefit p,.reason p{font-size:14px;line-height:1.2;color:#626873;margin:0}.about{min-height:260px;display:grid;grid-template-columns:59% 41%;background:#f5f4ef}.about-main{position:relative;overflow:hidden;min-height:260px}.about-photo{position:absolute;right:0;width:55%;height:100%}.about-copy{position:relative;z-index:1;padding:15px 0 14px 12%;width:64%;background:linear-gradient(90deg,#f6f5f0 65%,#f6f5f000)}.eyebrow{font-size:12px;letter-spacing:1.3px;margin-bottom:7px;font-weight:600;color:#515964}h2{font-size:37px;line-height:.98}.about-copy p{font-size:14px;line-height:1.12;max-width:460px;margin:8px 0}.about-copy .pill{padding:9px 23px}.reasons{padding:18px 10% 15px 5%;display:grid;gap:15px;background:linear-gradient(100deg,#faf9f6,#f2f2eb)}.reason{display:flex;gap:24px;align-items:center}.reason .icon{width:60px;height:60px;padding:12px;border:1px solid #d7d2bf;border-radius:50%}.products{padding:12px 7% 16px}.section-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.section-top .eyebrow{font-size:11px;margin-bottom:3px}.products h2{font-size:33px}.all{font-size:13px;color:#3d4b36}.cards{display:grid;grid-template-columns:repeat(6,1fr);gap:26px}.card{background:#f5f4f0;border-radius:6px;overflow:hidden;border:1px solid #efeee9;transition:transform .2s}.card:hover{transform:translateY(-4px)}.card-photo{height:72px;overflow:hidden}.card-copy{padding:7px 12px;position:relative;min-height:61px}.card h3{font-size:13px;margin:0 0 3px}.card p{font-size:13px;color:#626873;line-height:1.15;margin:0;padding-right:20px}.card:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid #839a68;outline-offset:3px}.more{position:absolute;right:9px;bottom:12px;border:1px solid #d9d2be;background:white;border-radius:50%;height:29px;width:29px;display:grid;place-items:center}.menu{display:none;background:transparent;border:0;font-size:25px;color:#405633}dialog{border:1px solid #c7cbbf;border-radius:15px;padding:32px;max-width:500px;width:90%;color:#17221a;background:#faf9f6}dialog::backdrop{background:#14210fb3}dialog h2{font-size:30px;margin-bottom:20px}dialog p{line-height:1.6}.close{float:right;background:transparent;border:0;font-size:24px;cursor:pointer}.footer{font-size:12px;color:#59624f;text-align:center;padding:13px; border-top:1px solid #e9e8df}
@media(min-width:1600px){header{height:57px}.hero{height:346px}h1{font-size:56px}.hero-copy{padding-top:25px}.benefits{min-height:68px;padding-top:10px;padding-bottom:10px}.about,.about-main{min-height:231px}.about-copy{padding-top:11px}.reasons{gap:10px;padding-top:14px;padding-bottom:10px}.reason .icon{height:56px;width:56px}.products{padding-top:10px}.card-photo{height:64px}}
@media(max-width:1150px){header{padding:0 4%;gap:18px}nav{gap:15px}.brand-name{font-size:18px}.contact-top{display:none}.hero-copy{padding-left:6%;width:46%}.hero-art{width:65%}h1{font-size:52px}.hero p{font-size:16px;max-width:290px}.benefits{padding:16px 5%;gap:15px}.benefit{gap:12px}.about-copy{padding-left:8%;width:72%}.cards{gap:12px}.products{padding:18px 5%}.card h3{font-size:12px}.reasons{padding-right:5%;gap:12px}.reason{gap:12px}.section-top h2{font-size:30px}}
@media(max-width:760px){header{height:72px;justify-content:space-between;position:relative;z-index:5}.brand-name{font-size:20px}.brand-mark{font-size:35px}.menu{display:block}nav{display:none;position:absolute;top:72px;left:0;right:0;background:#faf9f6;height:auto;padding:20px;box-shadow:0 10px 15px #0002}nav.open{display:grid;gap:20px}nav a{padding:8px}.language{margin-left:auto}.hero{height:auto;display:flex;flex-direction:column}.hero-copy{width:100%;padding:30px 7%;background:linear-gradient(120deg,#f7f8f4,#e4ebe4)}h1{font-size:54px}.hero p{max-width:360px}.hero-art{position:relative;width:100%;height:220px;order:2}.benefits{grid-template-columns:1fr 1fr;gap:23px;padding:25px 6%}.benefit{align-items:flex-start}.benefit strong,.benefit p{font-size:12px}.icon{width:32px;height:32px}.about{grid-template-columns:1fr}.about-main{min-height:340px}.about-copy{padding:25px 6%;width:75%;height:100%;background:linear-gradient(90deg,#f6f5f0 65%,#f6f5f000)}.about-copy p{max-width:280px;line-height:1.3}.about-photo{width:60%;opacity:.65}.reasons{padding:25px 6%}.section-top{align-items:flex-start;gap:15px}.section-top h2{font-size:30px}.all{font-size:12px;max-width:100px}.cards{grid-template-columns:repeat(2,1fr);gap:14px}.card-photo{height:85px}.card h3{font-size:13px}.products{padding:24px 6%}.footer{font-size:11px}}

/* Supplied Sunwell artwork: natural full-width composition. */
header{height:78px;padding:0 7%;gap:28px;background:#fff}
.brand{width:264px;height:66px;flex:0 0 264px;overflow:hidden;position:relative}
.brand-logo{position:absolute;width:264px;height:auto;top:50%;left:0;transform:translateY(-50%);display:block}
nav{gap:25px}nav a{white-space:nowrap}
.hero{height:clamp(405px,33.333vw,630px);background:#dde5de}
.hero-art{inset:0;width:100%;height:100%}
.hero-art .photo{object-fit:cover;object-position:center}
.hero:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(251,250,245,.52),rgba(251,250,245,.13) 34%,transparent 51%)}
.hero-copy{width:48%;height:100%;padding:clamp(27px,3.4vw,65px) 0 24px 12.3%;background:none;z-index:2;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
h1{font-size:clamp(52px,4.2vw,76px);line-height:.96;letter-spacing:-2px}
.hero p{font-size:clamp(16px,1.1vw,20px);line-height:1.28;max-width:360px;text-shadow:0 1px 8px #fff}
.hero .rule{margin:20px 0 16px}.hero .pill{margin-top:3px}
.benefits{padding:17px 8%;min-height:86px;gap:28px}
.about{position:relative;display:grid;grid-template-columns:59% 41%;height:clamp(290px,16.682vw,370px);min-height:0;isolation:isolate;overflow:hidden;background:#faf9f6}
.middle-image{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;z-index:-2}
.about-main{position:static;min-height:0;overflow:visible}
.about-copy{width:54%;height:100%;padding:19px 0 17px 12%;background:linear-gradient(90deg,rgba(250,249,245,.92),rgba(250,249,245,.77) 75%,transparent);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.about-copy h2{font-size:clamp(30px,2.15vw,40px)}
.about-copy p{font-size:14px;line-height:1.3;margin:10px 0;max-width:430px}
.about-copy .pill{white-space:nowrap}
.reasons{padding:0 6% 0 32%;display:grid;grid-template-rows:repeat(3,1fr);gap:0;background:none}
.reason{gap:0;align-items:center}.reason .icon{display:none}.reason strong{font-size:14px;margin-bottom:5px}.reason p{font-size:14px;line-height:1.28;max-width:295px}
.products{padding:16px 7% 24px}.section-top{margin-bottom:12px}.cards{gap:23px}.card-photo{height:80px}.card-copy{padding:10px 12px;min-height:75px}.card h3{font-size:14px}.card p{font-size:13px}
@media(min-width:1600px){.about-copy{width:56%}.about-copy p{font-size:15px}.about-copy h2{font-size:38px}.reasons{padding-right:12%}.hero-copy{padding-top:30px}.card-photo{height:85px}}
@media(max-width:1250px){header{padding:0 5%;gap:22px}.brand{width:235px;flex-basis:235px}.brand-logo{width:235px}nav{gap:17px}.contact-top{display:none}.hero-copy{padding-left:8%;width:50%}.about-copy{width:63%;padding-left:9%}.reason p{font-size:13px}.reason strong{font-size:13px}.reasons{padding-left:31%;padding-right:4%}.benefits{padding:17px 5%;gap:18px}.benefit{gap:12px}.benefit p{font-size:13px}.products{padding-left:5%;padding-right:5%}.cards{gap:13px}.card h3{font-size:12px}}
@media(max-width:950px) and (min-width:761px){header{gap:16px;padding:0 3%}.brand{width:200px;flex-basis:200px}.brand-logo{width:200px}nav{gap:12px;font-size:12px}.hero-copy{padding-left:6%}.about{height:340px}.about-copy{width:65%;padding-left:8%}.about-copy h2{font-size:29px}.about-copy p{font-size:13px}.reason p br{display:none}.cards{grid-template-columns:repeat(3,1fr)}.card-photo{height:90px}.card h3{font-size:14px}}
@media(max-width:760px){header{height:76px;padding:0 5%;gap:14px}.brand{width:224px;flex-basis:224px;height:66px}.brand-logo{width:224px}.language{font-size:12px}.menu{padding:4px}nav{top:76px}
.hero{display:block;height:660px}.hero-art{position:absolute;inset:auto 0 0;width:100%;height:320px}.hero-art .photo{object-fit:cover;object-position:83% bottom}.hero:after{background:linear-gradient(180deg,rgba(248,249,243,.98),rgba(248,249,243,.92) 35%,rgba(248,249,243,.08) 65%,transparent)}.hero-copy{width:100%;height:auto;padding:31px 7%;background:none;justify-content:flex-start}.hero h1{font-size:52px;line-height:.95}.hero p{font-size:16px;line-height:1.3;max-width:340px}.hero .rule{margin:17px 0 12px}.hero .pill{margin-top:0}
.benefits{grid-template-columns:1fr 1fr;padding:23px 6%;gap:24px 16px}.benefit strong{font-size:13px}.benefit p{font-size:12px}.benefit .icon{width:32px;height:32px}
.about{display:flex;flex-direction:column;height:auto;min-height:0;background:#faf9f6;overflow:hidden}.middle-image{position:absolute;top:0;height:330px;width:198%;max-width:none;object-fit:cover;object-position:center;left:-45%;opacity:.75}.about-main{min-height:330px}.about-copy{width:100%;height:330px;padding:25px 6%;background:linear-gradient(90deg,rgba(250,249,245,.97),rgba(250,249,245,.79) 55%,transparent);justify-content:center}.about-copy h2{font-size:33px}.about-copy p{font-size:14px;line-height:1.3;max-width:285px}.reasons{padding:25px 6%;gap:20px;background:#faf9f6;grid-template-rows:auto}.reason{gap:18px}.reason .icon{display:block;width:53px;height:53px;padding:11px}.reason strong{font-size:14px}.reason p{font-size:14px}.products{padding:24px 6%}.cards{grid-template-columns:repeat(2,1fr);gap:15px}.card-photo{height:90px}.card h3{font-size:13px}.card-copy{min-height:90px}.section-top h2{font-size:29px}.section-top{gap:15px}.all{min-width:80px}.footer{padding:18px}
}
@media(max-width:380px){.brand{width:190px;flex-basis:190px}.brand-logo{width:190px}header{gap:10px}.hero p{font-size:14px}.card-copy{padding:9px}.card p{font-size:12px}}

/* Interaction states: hover for a mouse, visible focus for keyboard use. */
nav a { transition: color .18s ease, background-color .18s ease; }
nav a::after, nav a:first-child::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 10px;
  width: auto; height: 2px; background: #465b39;
  transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
nav a[aria-current="page"]::after { transform: scaleX(1); }
.pill, .menu, .close, .all, .more {
  transition: background-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.pill, .menu, .close { cursor: pointer; min-height: 44px; }
.menu, .close { min-width: 44px; border-radius: 8px; }
.card { min-width: 0; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card-photo .photo { transition: transform .3s ease; }
.card:hover { transform: none; }
.card-copy { padding-right: 43px; }
.card p { padding-right: 0; }
.card h3, .card p { overflow-wrap: anywhere; }
.card:focus-visible { border-color: #657b50; box-shadow: 0 5px 20px #34432920; }
nav a:focus-visible { color: #405b2e; }
nav a:focus-visible::after { transform: scaleX(1); }
.pill:focus-visible { box-shadow: 0 0 0 5px #81976630; }
.pill:active, .card:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  nav a:hover { color: #526c3f; }
  nav a:hover::after { transform: scaleX(1); }
  .pill:hover { background: #526b3d; box-shadow: 0 5px 15px #293c302b; transform: translateY(-2px); }
  .card:hover { transform: translateY(-4px); border-color: #a6b497; box-shadow: 0 9px 24px #3443291c; }
  .card:hover .photo { transform: scale(1.04); }
  .card:hover .more { background: #405633; color: #fff; border-color: #405633; }
  .all:hover { color: #526c3f; text-decoration: underline; text-underline-offset: 5px; }
  .menu:hover, .close:hover { background: #e9eee3; }
}

/* Fluid sizing: avoid clipping when copy wraps or browser text is enlarged. */
header, main, section, .about-main, .hero-copy, .reason > div, .benefit > div { min-width: 0; }
.hero { height: auto; min-height: clamp(405px, 33.333vw, 630px); }
.hero-copy { min-height: inherit; height: auto; }
.hero-copy p br { display: none; }
.about { height: auto; min-height: clamp(310px, 18vw, 400px); }
.about-copy { min-height: inherit; height: auto; }
.about-main { min-height: inherit; }
.reason p br, .benefit p br { display: none; }
.cards { grid-template-columns: repeat(6, minmax(0, 1fr)); }
dialog { max-height: calc(100dvh - 32px); overflow-y: auto; }
.footer { overflow-wrap: anywhere; }

@media (max-width: 1200px) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .card-photo { height: auto; aspect-ratio: 3 / 1; }
  .card h3 { font-size: 14px; line-height: 1.3; }
  .card p { font-size: 14px; line-height: 1.35; }
  .benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
}
@media (max-width: 1024px) {
  header { position: relative; z-index: 10; min-height: 76px; height: auto; padding: 5px 5%; gap: 16px; }
  .brand { width: 235px; flex: 0 1 235px; min-width: 0; }
  .brand-logo { width: 100%; }
  .language { margin-left: auto; }
  .contact-top { display: none; }
  .menu { display: block; flex-shrink: 0; }
  nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    height: auto; max-height: calc(100dvh - 86px); overflow-y: auto; padding: 12px 5% 18px;
    background: #fff; box-shadow: 0 12px 20px #17251b20; border-top: 1px solid #e9e8df; }
  nav.open { display: grid; gap: 4px; }
  nav a { display: flex; min-height: 48px; height: auto; padding: 12px 16px;
    border-radius: 6px; font-size: 16px; white-space: normal; }
  nav a::after, nav a:first-child::after { bottom: 5px; left: 16px; right: 16px; }
  nav a[aria-current="page"] { background: #f0f3eb; }
  .hero-copy { width: 53%; padding-left: 6%; }
  .about { display: block; min-height: 0; }
  .about-main { position: relative; min-height: 330px; }
  .middle-image { left: 0; top: 0; width: 155%; height: 330px; object-fit: cover; object-position: left center; opacity: .85; }
  .about-copy { width: 60%; height: auto; min-height: 330px; padding: 25px 6%;
    background: linear-gradient(90deg,#faf9f6ed 65%,#faf9f620); }
  .about-copy h2 { font-size: 34px; }
  .about-copy p { font-size: 16px; line-height: 1.4; max-width: 420px; }
  .reasons { position: relative; padding: 25px 6%; background: #faf9f6;
    grid-template-rows: auto; gap: 22px; }
  .reason { gap: 18px; }
  .reason .icon { display: block; width: 54px; height: 54px; padding: 11px; }
  .reason strong, .reason p { font-size: 14px; }
  .reason p { max-width: none; line-height: 1.4; }
}
@media (max-width: 760px) {
  header { gap: 10px; }
  .brand { width: 224px; flex-basis: 224px; }
  .hero { display: flex; flex-direction: column; min-height: 0; height: auto; background: #f4f6ef; }
  .hero::after { display: none; }
  .hero-copy { order: 0; width: 100%; min-height: 0; height: auto; padding: 32px 6% 24px; }
  .hero h1 { font-size: clamp(44px, 9vw, 58px); line-height: 1; }
  .hero p { font-size: 16px; line-height: 1.45; max-width: 390px; }
  .hero-art { position: relative; inset: auto; order: 1; width: 100%; height: clamp(210px, 55vw, 340px); }
  .hero-art .photo { object-fit: cover; object-position: 83% center; }
  .benefits { padding: 25px 6%; gap: 24px 18px; }
  .benefit { gap: 12px; }
  .benefit strong, .benefit p { font-size: 14px; line-height: 1.35; }
  .about-copy { width: 85%; min-height: 330px; height: auto; padding: 25px 6%; }
  .about-copy h2 { font-size: 32px; }
  .about-copy p { max-width: 330px; }
  .middle-image { width: 198%; left: -45%; opacity: .65; }
  .section-top { flex-direction: column; align-items: flex-start; gap: 12px; }
  .section-top h2 { font-size: clamp(28px, 6vw, 36px); line-height: 1.12; }
  .all { max-width: none; font-size: 14px; padding: 10px 0; min-height: 44px; }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  .card-photo { height: auto; aspect-ratio: 2.5 / 1; }
  .card-copy { min-height: 110px; padding: 12px 40px 12px 12px; }
}
@media (max-width: 480px) {
  .benefits, .cards { grid-template-columns: minmax(0, 1fr); }
  .benefit { align-items: center; }
  .benefit .icon { width: 40px; height: 40px; }
  .card-copy { min-height: 82px; }
  .about-copy { width: 100%; background: linear-gradient(90deg,#faf9f6f2,#faf9f6b3); }
  .about-copy p { max-width: 100%; }
  .brand { flex-basis: 190px; }
  .language { font-size: 12px; }
  dialog { padding: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}