:root{
  --ink:#0b0d2b;
  --muted:#6f707a;
  --paper:#f7f7f3;
  --grey:#dddddd;
  --border:#bfc0c4;
  --button:#4d506f;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  color:var(--ink);
  background:#fff;
}
a{color:inherit}
.site{
  width:min(1180px, calc(100% - 34px));
  margin:0 auto;
}
.site-header{
  min-height:78px;
  display:flex;
  align-items:center;
  gap:35px;
  padding:15px 28px;
  background:#fff;
}
.brand{
  margin-right:auto;
  display:flex;
  align-items:center;
  text-decoration:none;
}
.brand img{
  display:block;
  width:150px;
  max-height:38px;
  object-fit:contain;
}
.main-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:48px;
  font-size:15px;
}
.main-nav a{
  text-decoration:none;
  white-space:nowrap;
  padding:7px 0;
}
.main-nav a:hover,
.main-nav a.active{
  text-decoration:underline;
  text-underline-offset:4px;
}

.panel{
  background:var(--paper);
}
.hero-home{
  background:#fff;
}
.hero-home img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.section-gap{height:24px;background:#fff}

.art-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
  padding:28px 48px 54px;
  min-height:650px;
}
.rounded-img{
  width:100%;
  height:100%;
  min-height:520px;
  object-fit:cover;
  border-radius:14px;
}
.art-copy{padding-right:25px}
.eyebrow{
  font-family:Georgia, "Times New Roman", serif;
  font-size:14px;
  margin-bottom:12px;
}
h1,h2,h3,p{margin-top:0}
.big-title{
  font-size:clamp(50px,6vw,76px);
  line-height:.98;
  font-weight:400;
  letter-spacing:-.025em;
}
.section-title{
  font-size:clamp(45px,5.4vw,69px);
  line-height:1.03;
  font-weight:400;
  letter-spacing:-.025em;
}
.body-copy{
  font-size:18px;
  line-height:1.25;
  color:#18192f;
}
.muted{color:var(--muted)}

.page-intro{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
  padding:35px 34px 70px;
  min-height:590px;
}
.page-intro-copy{
  padding:30px 0 0 10px;
}
.page-intro .big-title{margin-bottom:42px}
.page-intro p{
  font-size:18px;
  line-height:1.25;
}
.page-intro img{
  width:100%;
  height:485px;
  object-fit:cover;
  border-radius:16px;
}

.collection{
  background:var(--grey);
  padding:52px 16px 38px;
}
.collection h2{
  text-align:center;
  font-size:clamp(39px,5vw,62px);
  font-weight:400;
  margin:0 0 65px;
}
.product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
.product-card{
  border:1px solid var(--border);
  padding:14px 14px 12px;
  text-align:center;
  background:rgba(255,255,255,.06);
}
.product-card img{
  width:100%;
  aspect-ratio:1 / 1.2;
  object-fit:cover;
  display:block;
  background:#fff;
}
.product-card h3{
  font-size:25px;
  font-weight:400;
  margin:14px 5px 2px;
}
.collection-spacer{height:28px}

.history-top{
  display:grid;
  grid-template-columns:.9fr 1.2fr;
  min-height:620px;
  align-items:stretch;
}
.history-copy{
  padding:145px 65px 60px 105px;
}
.history-copy .section-title{margin-bottom:38px}
.history-copy .lead{
  color:var(--muted);
  font-size:18px;
  margin-bottom:42px;
}
.history-copy p:last-child{
  max-width:330px;
  font-size:16px;
  line-height:1.18;
}
.history-top img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:15px 0 0 15px;
}
.history-quality{
  background:var(--grey);
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:55px;
  padding:28px 65px 85px;
  align-items:start;
}
.history-quality img{
  width:100%;
  border-radius:15px;
  display:block;
  margin-top:0;
}
.history-quality .copy{
  padding-top:30px;
}
.history-quality .copy .section-title{
  margin-bottom:38px;
}
.history-quality p{
  font-size:18px;
  line-height:1.18;
}

.contact-section{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:70px;
  padding:58px 65px 48px;
  align-items:start;
}
.contact-section .section-title{margin-bottom:35px}
.contact-lead{
  max-width:440px;
  font-size:20px;
  line-height:1.2;
  font-weight:600;
}
.contact-details{
  font-family:Georgia, "Times New Roman", serif;
  font-size:16px;
  line-height:1.45;
  color:#28293b;
}
.contact-section img{
  width:100%;
  height:470px;
  object-fit:cover;
}
.retail-row{
  display:flex;
  align-items:center;
  gap:42px;
  padding:10px 0 0;
  font-size:19px;
  font-weight:600;
}
.btn{
  display:inline-block;
  background:var(--button);
  color:#fff;
  text-decoration:none;
  padding:12px 32px;
  min-width:168px;
  text-align:center;
  border-radius:999px;
  font-size:15px;
  font-weight:700;
}

.site-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:34px 55px 40px;
  background:var(--paper);
  font-size:13px;
}
.site-footer img{
  width:170px;
  max-height:42px;
  object-fit:contain;
}
.site-footer p{margin:0}


.menu-toggle{
  display:none;
  width:42px;
  height:42px;
  padding:9px;
  border:0;
  background:transparent;
  cursor:pointer;
}
.menu-toggle span{
  display:block;
  height:2px;
  margin:5px 0;
  background:var(--ink);
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease;
}


.collection-contact-cta{
  background:var(--grey);
  text-align:center;
  padding:90px 24px 105px;
}
.collection-contact-cta p{
  margin:0 auto 55px;
  max-width:900px;
  color:#666978;
  font-size:clamp(30px,4vw,48px);
  line-height:1.18;
  font-weight:400;
}
.collection-contact-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:205px;
  min-height:104px;
  padding:18px 36px;
  border-radius:25px;
  background:var(--button);
  color:#fff;
  text-decoration:none;
  font-family:Georgia, "Times New Roman", serif;
  font-size:34px;
  line-height:1;
  transition:transform .18s ease, opacity .18s ease;
}
.collection-contact-btn:hover{
  transform:translateY(-2px);
  opacity:.94;
}

@media (max-width:900px){
  .site{width:100%}
  .site-header{
    position:relative;
    min-height:72px;
    padding:12px 18px;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:12px;
  }
  .brand{
    margin-right:auto;
  }
  .brand img{
    width:145px;
    max-height:42px;
  }
  .menu-toggle{
    display:block;
    flex:0 0 auto;
  }
  .menu-toggle.open span:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }
  .menu-toggle.open span:nth-child(2){
    opacity:0;
  }
  .menu-toggle.open span:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }
  .main-nav{
    display:none;
    position:absolute;
    z-index:50;
    top:100%;
    left:0;
    right:0;
    width:100%;
    padding:10px 18px 18px;
    background:#fff;
    border-top:1px solid #ececec;
    box-shadow:0 10px 24px rgba(0,0,0,.08);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    font-size:16px;
  }
  .main-nav.open{
    display:flex;
  }
  .main-nav a{
    display:block;
    padding:13px 4px;
    border-bottom:1px solid #eeeeee;
    white-space:normal;
  }
  .main-nav a:last-child{
    border-bottom:0;
  }
  .art-section,
  .page-intro,
  .history-top,
  .history-quality,
  .contact-section{
    grid-template-columns:1fr;
  }
  .art-section{gap:32px;padding:30px}
  .rounded-img{min-height:420px}
  .page-intro{gap:30px;padding:32px 28px}
  .page-intro img{height:430px}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .history-copy{padding:60px 40px}
  .history-top img{
    min-height:430px;
    border-radius:15px 15px 0 0;
  }
  .history-quality{padding:35px 35px 60px}
  .contact-section{padding:40px 35px}
  .retail-row{flex-wrap:wrap}
}
@media (max-width:590px){

  .collection-contact-cta{
    padding:58px 22px 68px;
  }
  .collection-contact-cta p{
    margin-bottom:36px;
    font-size:28px;
    line-height:1.22;
  }
  .collection-contact-btn{
    min-width:155px;
    min-height:70px;
    padding:15px 28px;
    border-radius:20px;
    font-size:27px;
  }
  .desktop-break{display:none}

  .site-header{
    min-height:68px;
    padding:11px 16px;
  }
  .brand img{width:135px}
  .main-nav{font-size:16px}
  .art-section{padding:22px 20px 38px}
  .rounded-img{min-height:340px}
  .page-intro{padding:25px 20px 40px}
  .page-intro .big-title{margin-bottom:25px}
  .page-intro img{height:360px}
  .collection{padding:35px 12px 25px}
  .collection h2{margin-bottom:35px}
  .product-grid{grid-template-columns:1fr;gap:18px}
  .product-card h3{font-size:22px}
  .history-copy{padding:48px 25px}
  .history-quality{padding:25px 20px 45px;gap:25px}
  .contact-section{padding:35px 22px}
  .contact-section img{height:360px}
  .retail-row{gap:18px}
  .site-footer{
    flex-direction:column;
    align-items:flex-start;
    padding:28px 24px;
  }
}