:root { --ink:#080b09; --green:#0d4434; --green2:#174f3e; --cream:#f3ecdf; --gold:#d1a33c; --muted:#b8b3a9; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--ink); color:#fff; font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.nav-wrap { position:fixed; inset:0 0 auto; height:110px; z-index:20; display:flex; align-items:center; gap:48px; padding:0 5vw; background:linear-gradient(180deg,rgba(5,8,6,.9),rgba(5,8,6,.35),transparent); }
.brand { width:330px; margin-right:auto; }
.brand img { width:100%; }
nav { display:flex; gap:30px; font-size:13px; font-weight:700; letter-spacing:.04em; }
nav a { opacity:.82; transition:.2s; white-space:nowrap; } nav a:hover { opacity:1; color:var(--gold); }
.nav-cta,.button { display:inline-flex; align-items:center; justify-content:center; min-height:46px; padding:0 22px; border:1px solid rgba(255,255,255,.35); font-size:13px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.nav-cta { background:var(--gold); color:var(--ink); border-color:var(--gold); }
.hero { position:relative; min-height:760px; height:100vh; display:flex; align-items:center; overflow:hidden; }
.hero-image,.hero-shade { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.hero-shade { background:linear-gradient(90deg,rgba(5,8,6,.94) 0%,rgba(5,8,6,.76) 42%,rgba(5,8,6,.18) 78%),linear-gradient(0deg,rgba(5,8,6,.65),transparent 45%); }
.hero-content { position:relative; z-index:2; width:min(700px,90vw); margin-left:7vw; padding-top:60px; }
.eyebrow { margin:0 0 28px; color:var(--gold); font-size:13px; font-weight:900; letter-spacing:.13em; text-transform:uppercase; }
.eyebrow.green { color:var(--green); }.gold-text { color:var(--gold); }
h1,h2,h3,p { margin-top:0; }
h1 { margin-bottom:28px; font-size:clamp(64px,8vw,124px); line-height:.86; letter-spacing:-.065em; }
.hero-copy { max-width:610px; font-size:21px; line-height:1.55; color:#e5e1d9; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.button.gold { background:var(--gold); color:var(--ink); border-color:var(--gold); }.button.ghost { background:rgba(0,0,0,.2); }
.hero-note { position:absolute; z-index:2; right:4vw; bottom:34px; color:#e6dfd1; font-size:12px; letter-spacing:.12em; text-transform:uppercase; }.hero-note span { color:var(--gold); margin-right:18px; }
.section { padding:110px 7vw; }
h2 { font-size:clamp(44px,5.2vw,78px); line-height:1.02; letter-spacing:-.045em; }
.intro { min-height:560px; background:linear-gradient(rgba(243,236,223,.5),rgba(243,236,223,.5)),url("images/maison-fromages-cremerie-mer.jpg") center/cover no-repeat; color:var(--ink); display:grid; grid-template-columns:1fr 1fr; gap:9vw; align-items:center; }
.intro::after { content:""; display:none; }
.intro-copy>p { color:#294a40; font-size:23px; line-height:1.55; }
.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:54px; border-top:1px solid #c8bdab; padding-top:24px; color:#8d7546; font-size:12px; }.principles strong { display:block; margin-top:8px; color:var(--ink); font-size:16px; }
.ranges { background:var(--green); }
.section-heading { display:flex; justify-content:space-between; gap:60px; align-items:end; margin-bottom:52px; }.section-heading>p { width:360px; color:#d4dbd6; line-height:1.55; font-size:18px; }.section-heading h2 { margin-bottom:0; }
.range-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }.range-card { position:relative; min-height:570px; overflow:hidden; background:#102b22; }.range-card img { width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }.range-card:hover img { transform:scale(1.025); }.range-card:after { content:""; position:absolute; inset:35% 0 0; background:linear-gradient(transparent,rgba(0,0,0,.9)); }.range-copy { position:absolute; z-index:2; inset:auto 28px 28px; }.range-copy span { color:var(--gold); font-size:13px; }.range-copy h3 { margin:10px 0 12px; font-size:28px; }.range-copy p { margin:0; color:#ddd7cd; line-height:1.5; }
.halal-card img { filter:saturate(.78) brightness(.72); }
.campaigns { background:var(--cream); color:var(--ink); }
.campaigns .section-heading>p { color:#294a40; }
.campaign-carousel { position:relative; overflow:hidden; padding:0 58px; }
.campaign-track { display:flex; align-items:stretch; transition:transform .55s cubic-bezier(.22,.61,.36,1); }
.campaign-card { position:relative; display:block; flex:0 0 33.333%; padding:0 9px; overflow:hidden; }
.campaign-card img { width:100%; height:520px; object-fit:contain; background:#090c0a; box-shadow:0 14px 36px rgba(24,31,27,.14); transition:transform .45s ease, opacity .45s ease; }
.campaign-card span { position:absolute; inset:auto 14px 14px; width:max-content; max-width:calc(100% - 28px); padding:9px 12px; background:rgba(5,8,6,.82); color:#fff; font-size:12px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; backdrop-filter:blur(5px); }
.campaign-card:hover img { transform:scale(1.018); opacity:.9; }
.campaign-arrow { position:absolute; z-index:3; top:50%; transform:translateY(-50%); width:46px; height:46px; border:0; border-radius:50%; background:var(--green); color:#fff; font-size:32px; cursor:pointer; transition:.2s; }
.campaign-arrow:hover { background:var(--gold); color:var(--ink); }.campaign-arrow:disabled { opacity:.28; cursor:default; }
.campaign-prev { left:2px; }.campaign-next { right:2px; }
.campaign-dots { display:flex; justify-content:center; gap:8px; margin-top:28px; }
.campaign-dots button { width:9px; height:9px; padding:0; border:0; border-radius:50%; background:#b5aa96; cursor:pointer; transition:.25s; }.campaign-dots button.active { width:30px; border-radius:8px; background:var(--green); }
.cold { display:grid; grid-template-columns:1fr 1fr; padding:0; background:#0a0c0b; }.cold-photo img { width:100%; height:100%; min-height:760px; object-fit:cover; }.cold-copy { padding:110px 7vw 90px 6vw; }.cold-copy>p:not(.eyebrow) { color:#c8c4bc; font-size:19px; line-height:1.6; }.cold ol { list-style:none; padding:24px 0 0; margin:0; }.cold li { display:flex; gap:22px; padding:24px 0; border-top:1px solid #343a36; }.cold li>span { color:var(--gold); font-size:13px; }.cold li strong,.cold li small { display:block; }.cold li strong { font-size:19px; }.cold li small { margin-top:7px; color:#a9aaa5; font-size:15px; line-height:1.4; }
.pro { background:var(--cream); color:var(--ink); display:grid; grid-template-columns:1fr 1fr; padding-right:0; gap:7vw; align-items:center; }.pro-copy { padding-right:2vw; }.pro-copy>p:not(.eyebrow) { color:#285044; font-size:20px; line-height:1.55; }.pro ul { padding:15px 0; list-style:none; }.pro li { padding:14px 0; border-bottom:1px solid #cec5b6; font-weight:700; }.pro img { width:100%; height:720px; object-fit:cover; object-position:center; }.text-link { display:inline-flex; gap:30px; align-items:center; margin-top:22px; color:var(--green); font-weight:900; border-bottom:2px solid var(--gold); padding-bottom:8px; }.text-link span { color:var(--gold); }
.delivery { display:grid; grid-template-columns:1.15fr .85fr; padding:0; background:var(--green); }.delivery>img { width:100%; height:760px; object-fit:cover; }.delivery-copy { padding:110px 6vw; align-self:center; }.delivery-copy>p:not(.eyebrow) { color:#d4dbd6; font-size:20px; line-height:1.6; }.delivery-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:48px; }.delivery-facts span { padding-top:18px; border-top:2px solid var(--gold); color:#bbc8c2; font-size:13px; }.delivery-facts strong { display:block; color:white; font-size:18px; margin-bottom:6px; }
.contact { background:#080a09; padding-top:120px; }.contact>h2 { font-size:clamp(58px,8vw,116px); border-bottom:1px solid #313531; padding-bottom:60px; }.contact-grid { display:grid; grid-template-columns:1fr 1fr 1.2fr; gap:7vw; padding-top:45px; }.contact-grid h3 { color:var(--gold); font-size:15px; text-transform:uppercase; letter-spacing:.08em; }.contact-grid p,.contact-grid a { color:#c9c8c3; line-height:1.7; }.contact-grid div>a:not(.text-link) { display:block; }.text-link.light { color:white; }
footer { min-height:110px; padding:28px 7vw; display:flex; gap:30px; align-items:center; border-top:1px solid #252824; color:#898d88; font-size:12px; }footer img { width:255px; }footer p { margin:0 auto 0 0; }

@media (max-width:900px) {
  .nav-wrap { height:92px; padding:0 20px; }.brand { width:270px; }nav { display:none; }.nav-cta { min-height:40px; padding:0 14px; font-size:10px; }
  .hero { min-height:720px; }.hero-content { margin-left:24px; }.hero-copy { font-size:18px; padding-right:18px; }.hero-note { display:none; }
  .section { padding:80px 24px; }.intro,.cold,.pro,.delivery { grid-template-columns:1fr; }.intro { min-height:auto; gap:40px; align-items:start; background:var(--cream); }.intro::after { content:""; display:block; height:300px; margin:4px -24px 0; background:url("images/maison-fromages-cremerie-mer.jpg") center bottom/cover no-repeat; grid-column:1/-1; }.principles { grid-template-columns:1fr; }.section-heading { display:block; }.section-heading>p { width:auto; }.range-grid { grid-template-columns:1fr; }.range-card { min-height:500px; }.campaign-card { flex-basis:50%; }.campaign-card img { height:480px; }
  .cold-photo img,.pro img,.delivery>img { height:520px; min-height:0; }.cold-copy,.delivery-copy { padding:80px 24px; }.pro { padding-right:24px; }.pro img { order:-1; }.delivery-facts,.contact-grid { grid-template-columns:1fr; }.delivery-facts { gap:24px; }.contact-grid { gap:35px; }.contact>h2 { padding-bottom:40px; }footer { align-items:flex-start; flex-wrap:wrap; }footer p { width:100%; order:3; }
}
@media (max-width:620px) { .nav-cta { display:none; } .brand { width:270px; } .campaign-carousel { padding:0 38px; }.campaign-card { flex-basis:100%; padding:0 5px; }.campaign-card img { height:min(540px,68vh); }.campaign-arrow { width:34px; height:34px; font-size:25px; } }

.cold>img { width:100%; height:100%; min-height:760px; object-fit:cover; }
@media (max-width:900px) { .cold>img { height:520px; min-height:0; } }

.carousel { display:block; }
.carousel-slide { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .75s ease, visibility .75s; }
.carousel-slide.active { opacity:1; visibility:visible; z-index:1; }
.carousel-slide .hero-content { position:absolute; top:50%; transform:translateY(-47%); }
.carousel-slide .hero-content.right { left:auto; right:7vw; margin-left:0; width:min(650px,90vw); }
.hero-shade.reverse { background:linear-gradient(270deg,rgba(5,8,6,.96) 0%,rgba(5,8,6,.78) 42%,rgba(5,8,6,.08) 78%),linear-gradient(0deg,rgba(5,8,6,.55),transparent 45%); }
.carousel-arrow { position:absolute; z-index:4; top:50%; width:48px; height:48px; border:1px solid rgba(255,255,255,.35); border-radius:50%; background:rgba(4,8,6,.35); color:white; font-size:34px; line-height:1; cursor:pointer; backdrop-filter:blur(6px); }
.carousel-arrow:hover { background:var(--gold); color:var(--ink); border-color:var(--gold); }
.carousel-arrow.prev { left:24px; }.carousel-arrow.next { right:24px; }
.carousel-dots { position:absolute; z-index:4; left:50%; bottom:30px; transform:translateX(-50%); display:flex; gap:10px; }
.carousel-dots button { width:34px; height:4px; padding:0; border:0; background:rgba(255,255,255,.35); cursor:pointer; transition:.25s; }.carousel-dots button.active { width:58px; background:var(--gold); }

@media (max-width:900px) {
  .carousel-slide .hero-content,.carousel-slide .hero-content.right { left:24px; right:20px; width:auto; margin:0; transform:translateY(-44%); }
  .hero-shade.reverse { background:linear-gradient(90deg,rgba(5,8,6,.94),rgba(5,8,6,.67) 62%,rgba(5,8,6,.25)); }
  .carousel-arrow { top:auto; bottom:25px; width:40px; height:40px; }.carousel-arrow.prev { left:20px; }.carousel-arrow.next { right:20px; }
  .carousel-dots { bottom:42px; }
}