:root{
  --bg:var(--lt-color-page);
  --surface:var(--lt-color-surface);
  --ink:var(--lt-color-text);
  --muted:var(--lt-color-text-secondary);
  --mint:var(--lt-color-primary);
  --mint-soft:var(--lt-color-primary-soft);
  --rose-soft:var(--lt-color-rose-soft);
  --blue-soft:var(--lt-color-ice-soft);
  --line:var(--lt-color-border);
  --shadow:var(--lt-shadow-soft);
  --r-lg:var(--lt-radius-lg);
  --r-xl:var(--lt-radius-xl);
  --wrap:var(--lt-page-width);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#FFFFFF;
  color:var(--ink);
  font-family:var(--lt-font-body);
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 28px}
.eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mint)}
h1,h2,h3{font-family:"Playfair Display",serif;margin:0;line-height:1.12}
h1{font-size:clamp(2.6rem,4.7vw,4.8rem);font-weight:600}
h2{font-size:clamp(1.85rem,2.8vw,2.75rem);font-weight:600}
h3{font-size:1.45rem;font-weight:600}
p{margin:0}
.muted{color:var(--muted)}

/* HEADER — full-width, static, borderless, light bottom shadow */
.site-header{
  padding:0;
  background:rgba(255,255,255,.94);
  box-shadow:0 8px 22px rgba(46,44,40,.045);
  position:static;
  z-index:10;
}
.site-header .wrap{
  max-width:var(--wrap);
  padding:0 28px;
}
.nav-shell{
  min-height:72px;
  background:transparent;
  border:0;
  border-radius:0;
  display:flex;
  align-items:center;
  padding:0;
  gap:24px;
  box-shadow:none;
}
.logo{width:190px;height:auto;flex:0 0 auto}
.nav-links{margin-left:auto;display:flex;align-items:center;gap:42px;font-size:.82rem;font-weight:500}
.nav-links a{position:relative;padding:24px 0 22px}
.nav-links a.active::after{
  content:"";position:absolute;left:0;right:0;bottom:15px;height:2px;border-radius:2px;background:var(--mint)
}
.mobile-menu{display:none;margin-left:auto;border:0;background:transparent;font-size:1.45rem;line-height:1;cursor:pointer}

/* HERO */
.hero{padding:34px 0 18px}
.hero-card{
  position:relative;
  background:linear-gradient(180deg,#FFFEFB,#FBF8F1);
  border:1px solid rgba(216,218,220,.9);
  border-radius:36px;
  min-height:520px;
  overflow:hidden;
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  align-items:stretch;
}
.hero-card::after{
  content:"";
  position:absolute;
  right:-40px;
  top:48px;
  width:54%;
  aspect-ratio:1/1;
  border-radius:50%;
  background:radial-gradient(circle at 45% 45%, rgba(228,239,231,.9), rgba(174,203,180,.45));
  z-index:0;
}
.hero-copy{
  position:relative;
  z-index:2;
  padding:72px 24px 64px 64px;
  display:flex;
  flex-direction:column;
  justify-content:center
}
.hero-copy h1{max-width:470px;margin-top:18px}
.hero-copy .support{margin-top:24px;color:var(--muted);font-size:1rem;max-width:430px}
.hero-cta{
  margin-top:30px;
  display:inline-flex;align-items:center;justify-content:center;
  width:max-content;
  min-width:116px;
  min-height:var(--lt-control-lg);
  padding:0 var(--lt-space-5);
  border-radius:var(--lt-radius-pill);
  background:var(--mint);
  color:#fff;
  font-weight:700;
  font-size:.8125rem;
}
.hero-art{
  position:relative;
  z-index:1;
  min-height:520px;
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  overflow:visible;
  padding:18px 8px 0 0;
}
.hero-art img{
  width:118%;
  max-width:none;
  height:auto;
  max-height:520px;
  object-fit:contain;
  object-position:right bottom;
  transform:translateX(3%);
}


/* STORY */
.story{padding:22px 0 14px}
.story-card{
  background:rgba(255,255,255,.58);
  border:1px solid var(--line);
  border-radius:var(--r-xl);
  padding:34px 42px 28px;
}
.story-top{display:block;max-width:760px;margin:0 auto 20px;text-align:left}
.story-top h2{margin-top:10px}
.story-body{font-size:.92rem;color:var(--muted);margin-top:10px;max-width:720px}
.principles{
  margin-top:18px;
  padding-top:18px;
  border-top:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  max-width:980px;
  margin-left:auto;
  margin-right:auto;
}
.principle{padding:0 30px}
.principle:first-child{padding-left:0}
.principle:last-child{padding-right:0}
.principle + .principle{border-left:1px dashed #E1D8CB}
.principle-row{display:flex;gap:16px;align-items:flex-start}
.principle-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 50%;
  background: var(--mint-soft);
  border: 1px solid #D9DED8;
  display: grid;
  place-items: center;
  font-size: 1.15rem;
  color: var(--mint);
}
.principle:nth-child(2) .principle-icon{background:#EEF2E8}
.principle:nth-child(3) .principle-icon{background:#FAEFE7}
.principle h3{font-family:Inter,sans-serif;font-size:.88rem;margin:2px 0 6px}
.principle p{font-size:.76rem;color:var(--muted);line-height:1.45}

/* JOURNEY */
.journey{padding:18px 0 38px}
.journey-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  grid-template-rows:1fr 1fr;
  gap:16px;
}
.j-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  min-height:205px;
}
.j-card.primary{
  grid-row:1 / span 2;
  min-height:430px;
  background:linear-gradient(145deg,#F1F5EF,#FAF8F2);
}
.j-card.profile{background:linear-gradient(145deg,#FBF1F0,#FFF9F6)}
.j-card.product{background:linear-gradient(145deg,#EFF5F8,#FAFCFD)}
.j-copy{position:relative;z-index:2;padding:28px 28px 24px;max-width:54%}
.j-card.primary .j-copy{padding:34px;max-width:52%}
.j-label{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mint);margin-bottom:12px}
.profile .j-label{color:#B5788A}
.product .j-label{color:#5A87A3}
.j-card h3{margin-bottom:10px}
.j-card p{font-size:.82rem;color:var(--muted);margin-bottom:14px}
.j-card.primary p{font-size:.9rem;max-width:330px}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:9px;
  color:var(--mint);
  font-size:.82rem;
  font-weight:700;
  padding:4px 0;
}
.text-link::after{content:"→";font-size:1rem;transition:transform .15s ease}
.text-link:hover::after{transform:translateX(3px)}
.j-art{position:absolute;right:16px;bottom:12px;width:42%;height:auto}
.j-card.primary .j-art{width:50%;right:12px;bottom:6px}

/* GLOBAL FOOTER — visually distinct from content cards */
.site-footer{
  margin-top:44px;
  padding:0;
  background:#F7F6F0;
  border-top:1px solid var(--line);
}
.site-footer .wrap{
  max-width:var(--wrap);
  padding:0 28px;
}
.footer-shell{
  border:0;
  border-radius:0;
  background:transparent;
  padding:34px 0 24px;
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(240px,1.5fr) minmax(220px,1fr);
  gap:30px;
  align-items:start;
}
.footer-art{
  min-height:auto;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}
.footer-art img{
  width:190px;
  height:auto;
  max-height:34px;
  object-fit:contain;
  object-position:left top;
}
.footer-col h4{
  margin:0 0 10px;
  font-size:.72rem;
  color:var(--mint);
  font-weight:700;
}
.footer-col a,.footer-col span{
  display:block;
  font-size:.68rem;
  color:var(--ink);
  margin:6px 0;
}
.footer-col a:hover{
  color:var(--mint);
  text-decoration:underline;
}
.footer-social{
  border-left:1px solid var(--line);
  padding-left:26px;
}
.footer-social h4{
  margin:0 0 14px;
  font-size:.72rem;
  color:var(--ink);
}
.footer-social-row{
  display:flex;
  gap:14px;
  font-size:1.1rem;
}
.footer-bottom{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid rgba(216,218,220,.8);
  text-align:center;
  font-size:.65rem;
  color:var(--muted);
}

@media(max-width:760px){
  .footer-grid{grid-template-columns:1fr}
  .footer-art{
  min-height:auto;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}
.footer-art img{
  width:190px;
  height:auto;
  max-height:34px;
  object-fit:contain;
  object-position:left top;
}
  .footer-social{border-left:0;padding-left:0}
}
@media(max-width:420px){
  .site-header .wrap{padding:0 14px}
  .hero{padding-top:16px}
  .hero-card{border-radius:24px}
  .hero-copy{padding:26px 18px 4px}
  .hero-art{min-height:280px}
  .hero-art img{max-height:295px}

  .footer-grid{grid-template-columns:1fr;gap:16px}
  .footer-shell{padding:22px 16px 18px}
}


@media(max-width:960px){
  .journey-grid{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }
  .j-card.primary{
    grid-row:auto;
    min-height:340px;
  }
  .j-card.profile,
  .j-card.product{
    min-height:220px;
  }
  .j-card.primary .j-copy,
  .j-copy{
    max-width:58%;
  }
  .j-card.primary .j-art{
    width:43%;
  }
  .j-art{
    width:34%;
  }

  .story-top{
    grid-template-columns:1fr;
    gap:16px;
  }

  .footer-grid{
    grid-template-columns:minmax(220px,1.25fr) minmax(210px,1fr);
  }
  .footer-social{
    border-left:0;
    padding-left:0;
  }
}


@media(max-width:760px){
  .j-card.primary,
  .j-card.profile,
  .j-card.product{
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  .j-card.primary .j-copy,
  .j-copy{
    max-width:none;
    width:100%;
    padding:20px 18px 8px;
  }
  .j-card h3{
    max-width:100%;
  }
  .j-card p,
  .j-card.primary p{
    max-width:100%;
  }
  .j-art,
  .j-card.primary .j-art{
    position:relative;
    right:auto;
    bottom:auto;
    width:62%;
    max-height:180px;
    object-fit:contain;
    align-self:flex-end;
    margin:-2px 8px 10px 0;
  }

}


@media(max-width:960px){
  .footer-grid{
    grid-template-columns:minmax(220px,1.25fr) minmax(210px,1fr);
    row-gap:26px;
  }
  .footer-social{
    border-left:0;
    padding-left:0;
  }
}
@media(max-width:760px){
  .site-footer{
    margin-top:36px;
  }
  .site-footer .wrap{
    padding:0 16px;
  }
  .footer-shell{
    padding:28px 0 22px;
  }
  .footer-grid{
    grid-template-columns:1fr;
    gap:22px 18px;
  }
  .footer-art{
  min-height:auto;
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
}
.footer-art img{
  width:190px;
  height:auto;
  max-height:34px;
  object-fit:contain;
  object-position:left top;
}
  .footer-social{
    grid-column:1 / -1;
  }
}
@media(max-width:420px){
  .site-footer .wrap{
    padding:0 14px;
  }
}


/* Approved Littlest Things icon package — icon-only integration */
.lt-icon{
  --icon-color:#2E2C28;
  --icon-accent:#847F76;
  color:var(--icon-color);
  display:block;
  width:1.25em;
  height:1.25em;
  flex:0 0 auto;
}
.lt-icon--muted{--icon-color:#847F76;}
.lt-icon--da{--icon-color:#6E9A7C;}
.lt-icon--toc{--icon-color:#B5788A;}
.lt-icon--du-lich{--icon-color:#5A87A3;}
.principle-icon .lt-icon{width:26px;height:26px;}
.text-link .lt-icon--cta{width:15px;height:15px;}
.text-link::after{content:none!important;}
.mobile-menu .lt-icon--menu{width:24px;height:24px;}
.footer-social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#2E2C28;
}
.footer-social-icon .lt-icon--social{width:20px;height:20px;}

/* Footer logo lockup: updated approved logo + separate tagline text */
.footer-brand-lockup{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.footer-tagline{
  margin-top:8px;
  font-family:Inter,system-ui,sans-serif;
  font-size:.68rem;
  line-height:1.4;
  color:#847F76;
}

.story-highlight{color:#B5788A;}

/* Responsive refinement — preserves approved desktop design */
@media(max-width:960px){
  .wrap{padding-left:22px;padding-right:22px;}
  .site-header .wrap{padding-left:22px;padding-right:22px;}

  .hero-card{
    grid-template-columns:.95fr 1.05fr;
    min-height:470px;
  }
  .hero-copy{
    padding:54px 20px 52px 42px;
  }
  .hero-copy h1{font-size:clamp(2.35rem,5vw,3.7rem);}
  .hero-copy .support{max-width:340px;}
  .hero-art{min-height:470px;}
  .hero-art img{
    width:110%;
    max-height:470px;
    transform:translateX(1%);
  }

  .story-card{padding:30px 30px 26px;}
  .principle{padding:0 20px;}

  .footer-grid{
    grid-template-columns:minmax(220px,1.25fr) minmax(210px,1fr);
    gap:24px 22px;
  }
}

@media(max-width:760px){
  .wrap,
  .site-header .wrap{
    padding-left:18px;
    padding-right:18px;
  }

  .nav-shell{min-height:64px;}
  .logo{width:165px;max-height:30px;}
  .nav-links{display:none;}
  .mobile-menu{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    padding:0;
  }

  .hero{padding-top:18px;}
  .hero-card{
    display:flex;
    flex-direction:column;
    min-height:0;
    border-radius:28px;
  }
  .hero-card::after{
    width:108%;
    right:-38%;
    top:auto;
    bottom:-18%;
  }
  .hero-copy{
    padding:36px 24px 12px;
    justify-content:flex-start;
  }
  .hero-copy h1{
    max-width:100%;
    font-size:clamp(2.3rem,12vw,3.35rem);
    line-height:1.03;
  }
  .hero-copy .support{
    max-width:100%;
    margin-top:18px;
    font-size:.96rem;
  }
  .hero-copy .btn{margin-top:22px;}
  .hero-art{
    min-height:330px;
    padding:0;
    justify-content:center;
    align-items:flex-end;
    overflow:hidden;
  }
  .hero-art img{
    width:min(118%,520px);
    max-width:none;
    max-height:350px;
    transform:none;
    object-position:center bottom;
  }

  .story{padding-top:18px;}
  .story-card{
    padding:28px 22px 24px;
    border-radius:24px;
  }
  .story-top{margin-bottom:8px;}
  .story-top h2{
    font-size:clamp(1.8rem,8vw,2.35rem);
    line-height:1.12;
  }
  .story-body{
    font-size:.9rem;
    line-height:1.65;
  }
  .principles{
    grid-template-columns:1fr;
    margin-top:22px;
    padding-top:0;
  }
  .principle,
  .principle:first-child,
  .principle:last-child{
    padding:18px 0;
  }
  .principle + .principle{
    border-left:0;
    border-top:1px dashed #E1D8CB;
  }
  .principle-row{
    gap:14px;
    align-items:flex-start;
  }
  .principle p{font-size:.8rem;}

  .journey{padding-top:26px;}
  .journey-grid{gap:14px;}
  .j-card.primary,
  .j-card.profile,
  .j-card.product{
    min-height:0;
    border-radius:22px;
  }
  .j-card.primary .j-copy,
  .j-copy{
    padding:24px 22px 8px;
  }
  .j-card h3{font-size:1.35rem;}
  .j-card p,
  .j-card.primary p{
    font-size:.86rem;
    line-height:1.55;
  }
  .j-art,
  .j-card.primary .j-art{
    width:min(72%,300px);
    max-height:185px;
    align-self:center;
    margin:2px auto 14px;
  }

  .site-footer{margin-top:38px;}
  .site-footer .wrap{padding-left:18px;padding-right:18px;}
  .footer-shell{padding:28px 0 22px;}
  .footer-grid{
    grid-template-columns:1fr;
    gap:24px 20px;
  }
  .footer-brand-lockup{
    grid-column:1 / -1;
  }
  .footer-art img{
    width:165px;
    max-height:30px;
  }
  .footer-social{
    grid-column:1 / -1;
    padding-left:0;
    border-left:0;
  }
  .footer-bottom{
    margin-top:24px;
    padding-top:16px;
  }
}

@media(max-width:420px){
  .wrap,
  .site-header .wrap,
  .site-footer .wrap{
    padding-left:14px;
    padding-right:14px;
  }

  .hero-card{border-radius:24px;}
  .hero-copy{padding:30px 18px 8px;}
  .hero-copy h1{font-size:2.45rem;}
  .hero-copy .support{font-size:.92rem;}
  .hero-art{min-height:285px;}
  .hero-art img{
    width:112%;
    max-height:300px;
  }

  .story-card{padding:24px 18px 20px;}
  .principle-icon{
    width:48px;
    height:48px;
    flex-basis:48px;
  }

  .j-card.primary .j-copy,
  .j-copy{
    padding:22px 18px 8px;
  }
  .j-art,
  .j-card.primary .j-art{
    width:76%;
    max-height:170px;
    margin-bottom:12px;
  }

  .footer-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .footer-brand-lockup,
  .footer-social{
    grid-column:auto;
  }
}
/* v4.2 homepage header isolation from legacy global navigation */
body .site-header .nav-shell{
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}

body .site-header .nav-links a{
  text-decoration:none;
  border:0;
  background:none;
}

body .site-header .nav-links a::before{
  content:none;
}

body .site-header .nav-links a.active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:15px;
  height:2px;
  border-radius:2px;
  background:#6E9A7C;
}

body .site-header .nav-cta{
  border-radius:999px;
}
/* =========================================================
   LITTLEST THINGS — TYPOGRAPHY SCALE REFINEMENT
   Simplifies homepage type hierarchy without changing layout.
   ========================================================= */

/* 1 — Hero */
.hero-copy h1 {
  font-size: 3rem;
  line-height: 1.06;
}

.hero-copy .support {
  font-size: .9375rem;
  line-height: 1.6;
}

/* 2 — Section heading */
.story-top h2 {
  font-size: 2.25rem;
  line-height: 1.12;
}

/* 3 — Main body copy */
.story-body {
  font-size: .9375rem;
  line-height: 1.65;
}

.principle p {
  font-size: .8125rem;
  line-height: 1.55;
}

/* 4 — Principle titles */
.principle h3 {
  font-size: .9375rem;
  line-height: 1.35;
}

/* 5 — Journey card titles */
.j-card h3 {
  font-size: 1.5rem;
  line-height: 1.15;
}

/* 6 — Journey body copy */
.j-card p,
.j-card.primary p {
  font-size: .9375rem;
  line-height: 1.55;
}

/* 7 — Eyebrows and category labels */
.eyebrow,
.j-label {
  font-size: .75rem;
  line-height: 1.4;
}

/* 8 — Text links */
.text-link {
  font-size: .8125rem;
  line-height: 1.4;
}


/* =========================
   TABLET / MOBILE
   ========================= */

@media (max-width: 760px) {

  .hero-copy h1 {
    font-size: 2.5rem;
    line-height: 1.06;
  }

  .story-top h2 {
    font-size: 2rem;
    line-height: 1.12;
  }

  .j-card h3 {
    font-size: 1.375rem;
  }

  .hero-copy .support,
  .story-body,
  .j-card p,
  .j-card.primary p {
    font-size: .9375rem;
  }
}

@media (max-width: 420px) {

  .hero-copy h1 {
    font-size: 2.25rem;
  }

  .story-top h2 {
    font-size: 1.875rem;
  }

  .j-card h3 {
    font-size: 1.3125rem;
  }
}