:root {
  --canvas-paper: #f6f1e8;
  --canvas-ink: #1d2a31;
  --canvas-moss: #214d44;
  --canvas-clay: #d86646;
  --canvas-gold: #eabf55;
  --canvas-cream: #fffdf8;
}

.landing-page {
  background: var(--canvas-paper);
  color: var(--canvas-ink);
  font-family: "DM Sans", sans-serif;
  overflow: hidden;
}

.landing-page *, .landing-page *::before, .landing-page *::after { box-sizing: border-box; }
.landing-page a { color: inherit; text-decoration: none; }

.landing-nav {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  max-width: 1280px;
  padding: 25px 42px;
}

.landing-brand { align-items: center; display: inline-flex; font-family: "Fraunces", Georgia, serif; font-size: 1.42rem; gap: 8px; letter-spacing: -0.06em; line-height: 1; }
.landing-brand img { height: 35px; object-fit: contain; width: 35px; }
.landing-brand > span > span, .landing-footer-brand span { color: var(--canvas-clay); }
.landing-nav-links { display: flex; gap: 30px; margin-left: 80px; }
.landing-nav-links a, .landing-login { color: rgba(29, 42, 49, 0.75); font-size: 0.9rem; font-weight: 600; }
.landing-nav-links a:hover, .landing-login:hover, .landing-text-link:hover { color: var(--canvas-clay); }
.landing-nav-actions { align-items: center; display: flex; gap: 22px; }

.landing-button {
  align-items: center;
  background: var(--canvas-moss);
  border: 1px solid var(--canvas-moss);
  color: #fff !important;
  display: inline-flex;
  font-size: 0.92rem;
  font-weight: 700;
  gap: 16px;
  justify-content: center;
  padding: 15px 23px;
  transition: background 180ms ease, transform 180ms ease;
}
.landing-button:hover { background: var(--canvas-clay); border-color: var(--canvas-clay); color: #fff; transform: translateY(-2px); }
.landing-button-small { padding: 11px 17px; }

.landing-hero {
  display: grid;
  gap: clamp(45px, 8vw, 125px);
  grid-template-columns: minmax(0, 0.92fr) minmax(390px, 0.7fr);
  margin: 0 auto;
  max-width: 1280px;
  min-height: 660px;
  padding: clamp(64px, 9vw, 135px) 42px 100px;
}
.landing-hero-copy { align-self: center; max-width: 650px; }
.landing-eyebrow { color: var(--canvas-clay); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.13em; margin: 0 0 18px; text-transform: uppercase; }
.landing-hero h1, .landing-section-heading h2, .landing-studio h2, .landing-cta h2 { font-family: "Fraunces", Georgia, serif; letter-spacing: -0.045em; }
.landing-hero h1 { font-size: clamp(3.3rem, 6.8vw, 6.35rem); font-weight: 600; line-height: 0.93; margin: 0; }
.landing-hero h1 em, .landing-cta h2 em { color: var(--canvas-clay); font-style: italic; }
.landing-intro { color: rgba(29, 42, 49, 0.78); font-size: 1.12rem; line-height: 1.65; margin: 29px 0 34px; max-width: 570px; }
.landing-hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 24px; }
.landing-text-link { border-bottom: 1px solid currentColor; font-size: 0.92rem; font-weight: 700; padding-bottom: 3px; transition: color 180ms ease; }

.landing-hero-image-wrap { align-self: center; min-height: 465px; position: relative; }
.landing-image-shape { background: var(--canvas-gold); bottom: -28px; height: 70%; position: absolute; right: -45px; width: 78%; }
.landing-hero-image { display: block; filter: saturate(0.82) contrast(1.05); height: 100%; min-height: 465px; object-fit: cover; position: relative; width: 100%; }
.landing-image-note { background: var(--canvas-cream); bottom: 24px; display: flex; flex-direction: column; font-family: "Fraunces", Georgia, serif; font-size: 1.15rem; left: -34px; line-height: 1.2; padding: 18px 22px; position: absolute; }

.landing-proof { align-items: center; background: var(--canvas-ink); color: var(--canvas-cream); display: flex; justify-content: space-between; min-height: 115px; padding: 24px max(42px, calc((100vw - 1196px) / 2)); }
.landing-proof p { font-family: "Fraunces", Georgia, serif; font-size: 1.2rem; margin: 0; max-width: 355px; }
.landing-proof-items { display: flex; gap: clamp(20px, 4vw, 60px); }
.landing-proof-items span { color: rgba(255, 253, 248, 0.72); font-size: 0.77rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

.landing-features { margin: 0 auto; max-width: 1280px; padding: 125px 42px; }
.landing-section-heading { display: grid; grid-template-columns: 0.9fr 1.1fr; margin-bottom: 57px; }
.landing-section-heading .landing-eyebrow { grid-column: 1; grid-row: 1; }
.landing-section-heading h2 { font-size: clamp(2.7rem, 5vw, 4.6rem); grid-column: 1 / 3; line-height: 0.98; margin: 0; max-width: 760px; }
.landing-section-heading > p:last-child { align-self: end; color: rgba(29, 42, 49, 0.76); font-size: 1.05rem; grid-column: 2; line-height: 1.6; margin: 30px 0 0; max-width: 460px; }

.landing-feature-grid { display: grid; gap: 20px; grid-template-columns: 1.1fr 0.9fr; }
.landing-feature { overflow: hidden; position: relative; }
.landing-feature-content { position: relative; z-index: 1; }
.landing-feature h3 { font-family: "Fraunces", Georgia, serif; font-size: clamp(1.7rem, 3vw, 2.6rem); letter-spacing: -0.035em; line-height: 1.05; margin: 24px 0 14px; }
.landing-feature p { font-size: 0.98rem; line-height: 1.6; margin: 0; max-width: 350px; }
.landing-feature-number { color: var(--canvas-clay); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em; }
.landing-feature-wide { background: #d8e0d7; min-height: 380px; padding: 48px; }
.landing-feature-wide img { bottom: 0; filter: saturate(0.7); height: 58%; object-fit: cover; position: absolute; right: 0; width: 48%; }
.landing-feature-tall { background: #e9d5bc; min-height: 525px; padding: 48px; }
.landing-feature-tall img { bottom: 0; filter: saturate(0.7); height: 42%; left: 0; object-fit: cover; position: absolute; width: 100%; }
.landing-feature-accent { align-items: flex-start; background: var(--canvas-clay); color: var(--canvas-cream); display: flex; flex-direction: column; justify-content: center; min-height: 250px; padding: 48px; }
.landing-feature-accent .landing-feature-number { color: #ffd785; }
.landing-feature-accent p { color: rgba(255, 253, 248, 0.86); }
.landing-arrow { font-size: 2rem; margin-top: 25px; }

.landing-studio { align-items: center; background: #d9d5ca; display: grid; grid-template-columns: 1fr 1fr; min-height: 550px; overflow: hidden; }
.landing-studio-art { height: 100%; min-height: 550px; overflow: hidden; position: relative; }
.landing-paint-mark { border-radius: 50%; display: block; position: absolute; transform: rotate(-22deg); }
.landing-paint-mark-one { background: var(--canvas-clay); height: 470px; left: -60px; top: 85px; width: 260px; }
.landing-paint-mark-two { background: var(--canvas-moss); height: 590px; left: 185px; top: -165px; width: 250px; }
.landing-paint-mark-three { background: var(--canvas-gold); bottom: -120px; height: 330px; left: 330px; width: 420px; }
.landing-studio-copy { padding: 75px 11vw 75px 7vw; }
.landing-studio h2 { font-size: clamp(2.55rem, 4.6vw, 4.5rem); line-height: 0.98; margin: 0; }
.landing-studio-copy > p:not(.landing-eyebrow) { color: rgba(29, 42, 49, 0.77); line-height: 1.65; margin: 26px 0 30px; max-width: 500px; }

.landing-cta { align-items: center; background: var(--canvas-moss); color: var(--canvas-cream); display: flex; flex-direction: column; padding: 125px 42px; text-align: center; }
.landing-cta .landing-eyebrow { color: #ffd785; }
.landing-cta h2 { font-size: clamp(3.3rem, 7vw, 6.5rem); line-height: 0.92; margin: 0 0 37px; }
.landing-button-light { background: var(--canvas-cream); border-color: var(--canvas-cream); color: var(--canvas-ink) !important; }
.landing-button-light:hover { background: var(--canvas-gold); border-color: var(--canvas-gold); color: var(--canvas-ink) !important; }

.landing-footer { align-items: center; background: var(--canvas-ink); border-top: 1px solid rgba(255, 253, 248, 0.2); color: var(--canvas-cream); display: flex; gap: 25px; justify-content: space-between; padding: 30px max(42px, calc((100vw - 1196px) / 2)); }
.landing-footer-brand { font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; }
.landing-footer-brand span { color: var(--canvas-gold); }
.landing-footer p { color: rgba(255, 253, 248, 0.65); font-size: 0.85rem; margin: 0; }
.landing-footer div { display: flex; gap: 18px; }
.landing-footer div a { color: rgba(255, 253, 248, 0.8); font-size: 0.85rem; }
.landing-footer div a:hover { color: var(--canvas-gold); }

@media (max-width: 820px) {
  .landing-nav { padding: 20px 24px; }
  .landing-nav-links { display: none; }
  .landing-nav-actions { gap: 14px; }
  .landing-login { font-size: 0.82rem; }
  .landing-button-small { padding: 10px 13px; }
  .landing-hero { display: flex; flex-direction: column; min-height: 0; padding: 65px 24px 75px; }
  .landing-hero-image-wrap { min-height: 385px; width: 100%; }
  .landing-hero-image { min-height: 385px; }
  .landing-image-shape { right: -22px; }
  .landing-image-note { bottom: 18px; left: -8px; }
  .landing-proof { align-items: flex-start; flex-direction: column; gap: 20px; padding: 30px 24px; }
  .landing-proof-items { flex-wrap: wrap; gap: 13px 27px; }
  .landing-features { padding: 82px 24px; }
  .landing-section-heading { display: block; }
  .landing-section-heading > p:last-child { margin-top: 23px; }
  .landing-feature-grid { grid-template-columns: 1fr; }
  .landing-feature-wide, .landing-feature-tall, .landing-feature-accent { min-height: 360px; padding: 34px; }
  .landing-feature-wide img { height: 42%; width: 55%; }
  .landing-feature-tall img { height: 35%; }
  .landing-studio { grid-template-columns: 1fr; }
  .landing-studio-art { min-height: 265px; }
  .landing-paint-mark-one { height: 260px; left: -35px; top: 40px; width: 145px; }
  .landing-paint-mark-two { height: 340px; left: 100px; top: -130px; width: 150px; }
  .landing-paint-mark-three { height: 200px; left: 210px; width: 250px; }
  .landing-studio-copy { padding: 65px 24px 74px; }
  .landing-cta { padding: 85px 24px; }
  .landing-footer { align-items: flex-start; flex-direction: column; padding: 30px 24px; }
}

@media (max-width: 430px) {
  .landing-brand { font-size: 1.2rem; }
  .landing-brand img { height: 29px; width: 29px; }
  .landing-login { display: none; }
  .landing-hero h1 { font-size: 3.35rem; }
  .landing-hero-image-wrap, .landing-hero-image { min-height: 320px; }
  .landing-hero-actions { align-items: flex-start; flex-direction: column; gap: 17px; }
  .landing-feature-wide img { opacity: 0.48; width: 68%; }
  .landing-feature-content { max-width: 88%; }
}