/* Crystavo 1.26.1: campaign photography, editorial scale and an image-led buyer journey. */
.studio-home { --studio-ink: #173126; --studio-night: #11261c; --studio-paper: #f5f2e9; --studio-clay: #a54f37; background: var(--studio-paper); }
main.studio-home > section { content-visibility: visible !important; contain-intrinsic-size: none !important; }
.studio-home > section[id] { scroll-margin-top: 90px; }
.studio-home *, .studio-home *::before, .studio-home *::after { box-sizing: border-box; }
.studio-home .studio-kicker { margin: 0 0 22px; font: 650 12px/1.4 Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; }
.studio-home .studio-heading { margin: 0; color: var(--studio-ink); font-size: clamp(36px, 4.2vw, 64px); line-height: 1.06; letter-spacing: -.045em; }
.studio-home .studio-link { display: inline-flex; gap: 16px; align-items: center; color: inherit; font: 650 14px/1.5 Inter, sans-serif; text-decoration: none; }
.studio-home .studio-link span[aria-hidden] { font-size: 23px; line-height: 1; transition: transform .2s ease; }
.studio-home .studio-link:hover span[aria-hidden] { transform: translate(3px, -3px); }
.studio-home .studio-link:hover { text-decoration: underline; text-underline-offset: 5px; }
.studio-home .studio-hero { position: relative; isolation: isolate; min-height: 680px; height: min(810px, 84vh); overflow: hidden; background: var(--studio-night); color: #fff8e9; }
.studio-home .studio-hero__visual { position: absolute; z-index: -1; inset: 0 0 0 18%; margin: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 25%); }
.studio-home .studio-hero__visual picture { display: block; height: 100%; }
.studio-home .studio-hero__visual img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: right center; }
.studio-home .studio-hero__visual video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.studio-home .studio-hero__copy { position: relative; z-index: 1; width: min(52%, 720px); padding: clamp(68px, 7vw, 116px) 0 84px max(5vw, 32px); }
.studio-home .studio-hero .studio-kicker { color: #e9cfaa; }
.studio-home .studio-hero h1 { margin: 0; color: #fff8e9; font-size: clamp(66px, 6.9vw, 106px); font-weight: 650; line-height: .99; letter-spacing: -.055em; }
.studio-home .studio-hero h1 span { display: block; }
.studio-home .studio-hero__intro { max-width: 365px; margin: 27px 0 29px; color: #e1e5da; font-size: 17px; line-height: 1.6; }
.studio-home .studio-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.studio-home .studio-hero__actions .button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; padding: 12px 22px; border-radius: 3px; font-size: 14px; }
.studio-home .studio-hero__actions .studio-button-light { background: #f7edda !important; border-color: #f7edda !important; color: #173126 !important; }
.studio-home .studio-hero__actions .studio-button-light:hover { background: #e8d8b8 !important; border-color: #e8d8b8 !important; }
.studio-home .studio-hero__actions .studio-button-outline { color: #fff8e9 !important; border: 1px solid #b6c1ac !important; background: transparent !important; }
.studio-home .studio-hero__actions .studio-button-outline:hover { color: #173126 !important; background: #fff8e9 !important; border-color: #fff8e9 !important; }
.studio-home .studio-hero__note { position: absolute; z-index: 1; left: max(5vw, 32px); bottom: 29px; margin: 0; max-width: 490px; color: #c7d2c5; font-size: 12px; line-height: 1.55; }
.studio-home .studio-hero__caption { position: absolute; right: calc(max(4vw, 24px) + 210px); bottom: 29px; margin: 0; padding: 3px 7px; background: #11261cbd; color: #e1e5da; font-size: 12px; line-height: 1.4; }
.studio-home .studio-statement { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 30px 5vw; border-bottom: 1px solid #d5d8cb; }
.studio-home .studio-statement p { margin: 0; color: var(--studio-ink); font-size: clamp(18px, 2.15vw, 30px); font-weight: 500; letter-spacing: -.025em; }
.studio-home .studio-statement > span { flex: none; color: #7a4435; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.studio-home .studio-formats { padding: 95px 5vw 90px; }
.studio-home .studio-section-head { display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: end; margin: 0 0 42px; }
.studio-home .studio-section-head .studio-kicker { color: var(--studio-clay); margin-bottom: 16px; }
.studio-home .studio-section-head > div:last-child { max-width: 390px; justify-self: end; }
.studio-home .studio-section-head p:not(.studio-kicker) { color: #58645c; margin: 0 0 20px; font-size: 17px; line-height: 1.65; }
.studio-home .studio-format-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px 28px; }
.studio-home .studio-format { display: block; min-width: 0; color: var(--studio-ink); text-decoration: none; }
.studio-home .studio-format__image { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #ece5d7; }
.studio-home .studio-format img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .55s ease; }
.studio-home .studio-format:hover img { transform: scale(1.035); }
.studio-home .studio-format__caption { display: grid; grid-template-columns: 1fr auto; gap: 4px 20px; padding-top: 18px; }
.studio-home .studio-format__caption small { grid-column: 1; color: #8c523b; font-size: 12px; font-weight: 650; letter-spacing: .09em; text-transform: uppercase; }
.studio-home .studio-format__caption strong { grid-column: 1; font: 650 clamp(24px, 2.2vw, 32px)/1.2 Manrope, Inter, sans-serif; letter-spacing: -.03em; }
.studio-home .studio-format__caption em { grid-column: 1; color: #637066; font-size: 14px; font-style: normal; line-height: 1.6; }
.studio-home .studio-format__caption > b { grid-column: 2; grid-row: 1 / 4; align-self: center; display: grid; width: 44px; height: 44px; place-items: center; border: 1px solid #aab7a7; border-radius: 50%; font-size: 22px; font-weight: 400; transition: background .2s ease, color .2s ease; }
.studio-home .studio-format:hover .studio-format__caption > b { background: var(--studio-ink); color: #fff8e9; }
.studio-home .studio-format-note { margin: 26px 0 0; color: #758073; font-size: 12px; }
.studio-home .studio-detail { display: grid; grid-template-columns: .92fr 1.08fr; background: #1b372b; color: #f8f3e7; }
.studio-home .studio-detail__copy { padding: 76px 5vw 74px; }
.studio-home .studio-detail .studio-kicker { color: #e5bd8d; }
.studio-home .studio-detail .studio-heading { color: #f8f3e7; font-size: clamp(37px, 4vw, 58px); }
.studio-home .studio-detail__list { list-style: none; padding: 0; margin: 30px 0 28px; }
.studio-home .studio-detail__list li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; padding: 15px 0; border-top: 1px solid #637469; }
.studio-home .studio-detail__list li > span { padding-top: 4px; color: #d6b995; font-size: 12px; }
.studio-home .studio-detail__list strong { display: block; margin-bottom: 4px; font-size: 17px; font-weight: 600; }
.studio-home .studio-detail__list p { margin: 0; color: #c1d0c1; font-size: 14px; line-height: 1.6; }
.studio-home .studio-detail__image { margin: 0; position: relative; overflow: hidden; min-height: 540px; }
.studio-home .studio-detail__image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.studio-home .studio-detail__image figcaption { position: absolute; left: 20px; bottom: 18px; color: #f4f0e5; background: #12271ecc; padding: 5px 9px; font-size: 12px; }
.studio-home .studio-journey { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; padding: 84px 8vw; background: #a34d35; color: #fff4e3; }
.studio-home .studio-journey .studio-kicker { color: #f1d5b6; }
.studio-home .studio-journey .studio-heading { color: #fff4e3; font-size: clamp(38px, 4vw, 60px); }
.studio-home .studio-journey__intro { max-width: 345px; margin: 24px 0 28px; color: #f0daca; font-size: 16px; line-height: 1.7; }
.studio-home .studio-journey ol { list-style: none; padding: 0; margin: 0; }
.studio-home .studio-journey li { display: grid; grid-template-columns: 40px 1fr; gap: 22px; padding: 23px 0; border-top: 1px solid #d4977d; }
.studio-home .studio-journey li:first-child { padding-top: 0; border-top: 0; }
.studio-home .studio-journey li > b { color: #eac5a9; font-size: 13px; font-weight: 500; }
.studio-home .studio-journey h3 { margin: -3px 0 7px; font-size: 24px; letter-spacing: -.02em; line-height: 1.25; }
.studio-home .studio-journey li p { margin: 0; max-width: 360px; color: #f0daca; font-size: 15px; line-height: 1.7; }
.studio-home .studio-journal { padding: 92px 5vw; }
.studio-home .studio-journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.studio-home .studio-story { display: block; color: var(--studio-ink); text-decoration: none; }
.studio-home .studio-story__image { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #e4ded2; }
.studio-home .studio-story img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.studio-home .studio-story:hover img { transform: scale(1.04); }
.studio-home .studio-story small { display: block; margin: 18px 0 9px; color: #92573e; font-size: 12px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.studio-home .studio-story h3 { max-width: 300px; margin: 0 0 14px; font-size: clamp(20px, 1.9vw, 27px); letter-spacing: -.025em; line-height: 1.25; }
.studio-home .studio-story > span:last-child { font-size: 13px; font-weight: 600; }
.studio-home .studio-faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; padding: 75px 7vw 90px; background: #e7ebdf; }
.studio-home .studio-faq .studio-kicker { color: #89523b; }
.studio-home .studio-faq .studio-heading { font-size: clamp(34px, 3.1vw, 46px); }
.studio-home .studio-faq .studio-link { margin-top:20px; }
.studio-home .studio-faq details { border-top: 1px solid #b8c4b1; }
.studio-home .studio-faq details:last-child { border-bottom: 1px solid #b8c4b1; }
.studio-home .studio-faq details > summary { padding: 19px 0; min-height: 60px; font-size: 17px !important; }
.studio-home .studio-faq details > p { margin: 0; padding: 0 30px 24px 0; color: #52624f; font-size: 15px; line-height: 1.75; }
.studio-home .studio-quote { padding: 84px 6vw; gap: 7vw; background: #132c21; }
.studio-home .studio-quote .professional-home-quote-copy h2 { max-width: 490px; color: #fff4e3; font-size: clamp(38px, 4.3vw, 64px); line-height: 1.08; letter-spacing: -.045em; }
.studio-home .studio-quote .professional-home-quote-copy p:not(.eyebrow), .studio-home .studio-quote .professional-home-quote-copy li { color: #c6d2c3; }
.studio-home .studio-quote .professional-home-quote-copy .eyebrow { color: #e6bd91; }
.studio-home .studio-quote .project-form { background: #faf8f0; border: 0; border-radius: 4px; }
.studio-home .studio-quote .project-form-heading h2 { color: #203b33; font-size: 28px !important; }
@media (min-width: 1600px) { .studio-home .studio-hero__copy { width: 48%; } }
@media (max-width: 1000px) {
  .studio-home .studio-hero { min-height: 620px; height: auto; }
  .studio-home .studio-hero__copy { width: 55%; padding-top: 68px; }
  .studio-home .studio-hero__visual { left: 34%; }
  .studio-home .studio-hero h1 { font-size: clamp(59px, 7.2vw, 78px); }
  .studio-home .studio-detail__copy { padding: 60px 5vw; }
  .studio-home .studio-detail__image { min-height: 560px; }
  .studio-home .studio-section-head { gap: 30px; }
  .studio-home .studio-hero__caption { right: 22px; bottom: 80px; }
}
@media (max-width: 760px) {
  .studio-home .studio-hero { display: flex; flex-direction: column; min-height: 0; height: auto; }
  .studio-home .studio-hero__copy { width: 100%; padding: 38px 22px 22px; }
  .studio-home .studio-hero .studio-kicker { margin-bottom: 19px; font-size: 12px; letter-spacing: .1em; }
  .studio-home .studio-hero h1 { font-size: clamp(46px, 12.9vw, 68px); line-height: 1; letter-spacing: -.045em; }
  .studio-home .studio-hero__intro { max-width: 320px; font-size: 16px; margin: 20px 0 22px; line-height: 1.6; }
  .studio-home .studio-hero__actions { gap: 10px; }
  .studio-home .studio-hero__actions .button { min-height: 46px; padding: 11px 15px; font-size: 13px; }
  .studio-home .studio-hero__visual { position: relative; z-index: 0; inset: auto; order: 2; width: 100%; height: 360px; margin: 0; mask-image: linear-gradient(180deg, transparent, #000 2%); }
  .studio-home .studio-hero__visual picture { width: 160%; margin-left: -60%; }
  .studio-home .studio-hero__visual img { object-fit: contain; object-position: right center; }
  .studio-home .studio-hero__note { position: static; order: 3; max-width: none; padding: 0 22px 23px; font-size: 12px; }
  .studio-home .studio-hero__caption { position: absolute; bottom: 102px; right: auto; left: 22px; z-index: 2; font-size: 12px; }
  .studio-home .studio-statement { display: block; padding: 25px 22px; }
  .studio-home .studio-statement p { font-size: 21px; line-height: 1.3; }
  .studio-home .studio-statement > span { display: block; margin-top: 12px; font-size: 12px; }
  .studio-home .studio-formats, .studio-home .studio-journal { padding: 55px 20px; }
  .studio-home .studio-heading { font-size: 38px; }
  .studio-home .studio-section-head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 28px; }
  .studio-home .studio-section-head > div:last-child { max-width: 100%; justify-self: start; }
  .studio-home .studio-section-head p:not(.studio-kicker) { font-size: 16px; margin-bottom: 15px; }
  .studio-home .studio-format-grid { grid-template-columns: 1fr; gap: 32px; }
  .studio-home .studio-format__caption { padding-top: 14px; }
  .studio-home .studio-format__caption strong { font-size: 25px; }
  .studio-home .studio-format__caption em { font-size: 13px; }
  .studio-home .studio-detail { grid-template-columns: 1fr; }
  .studio-home .studio-detail__copy { padding: 50px 22px 35px; }
  .studio-home .studio-detail .studio-heading { font-size: 40px; }
  .studio-home .studio-detail__image { min-height: 0; height: auto; aspect-ratio: 3 / 2; }
  .studio-home .studio-detail__image img { height: 100%; }
  .studio-home .studio-journey { grid-template-columns: 1fr; gap: 34px; padding: 54px 24px; }
  .studio-home .studio-journey .studio-heading { font-size: 40px; }
  .studio-home .studio-journey__intro { margin: 20px 0; }
  .studio-home .studio-journey li { padding: 20px 0; gap: 12px; }
  .studio-home .studio-journey h3 { font-size: 22px; }
  .studio-home .studio-journal-grid { grid-template-columns: 1fr; gap: 32px; }
  .studio-home .studio-story h3 { max-width: none; font-size: 25px; }
  .studio-home .studio-story small { margin-top: 14px; }
  .studio-home .studio-faq { grid-template-columns: 1fr; padding: 50px 23px; gap: 30px; }
  .studio-home .studio-faq .studio-heading { font-size: 36px; }
  .studio-home .studio-faq details > summary { font-size: 16px !important; }
  .studio-home .studio-quote { padding: 54px 20px; gap: 30px; }
  .studio-home .studio-quote .professional-home-quote-copy h2 { font-size: 40px; }
}
@media (prefers-reduced-motion: reduce) { .studio-home .studio-format img, .studio-home .studio-story img, .studio-home .studio-link span { transition: none; } }
/* 1.28: real photography and content-driven height; notes never float over controls. */
.studio-home .studio-hero { display:grid; grid-template-columns:1fr 1fr; min-height:640px; height:auto; overflow:visible; }
.studio-home .studio-hero__copy { grid-column:1; grid-row:1; width:100%; padding:clamp(52px,5vw,86px) 4vw 52px 5vw; align-self:center; }
.studio-home .studio-hero h1 { font-size:clamp(58px,5.8vw,90px); line-height:1.04; letter-spacing:-.04em; }
.studio-home .studio-hero__intro { max-width:410px; margin:24px 0; }
.studio-home .studio-hero__note { position:static; inset:auto; width:auto; max-width:440px; margin:24px 0 0; padding:0; color:#d6e0d1; font-size:13px; line-height:1.65; }
.studio-home .studio-hero__visual { position:relative; grid-column:2; grid-row:1; z-index:auto; inset:auto; min-height:100%; height:auto; width:100%; margin:0; mask-image:none; background:#242b22; }
.studio-home .studio-hero__visual picture { position:absolute; inset:0; width:100%; height:100%; margin:0; }
.studio-home .studio-hero__visual img { display:block; width:100%; height:100%; object-fit:cover; object-position:50% 52%; }
.studio-home .studio-detail__image { display:flex; flex-direction:column; min-height:540px; aspect-ratio:auto; }
.studio-home .studio-detail__image img { flex:1; min-height:0; height:100%; object-fit:cover; }
.studio-home .studio-detail__image figcaption { position:static; inset:auto; margin:0; padding:12px 20px; color:#cdd8c5; background:#173126; font-size:12px; line-height:1.5; }
.studio-home .studio-format__image img[src*="photo-liquid-pouch"] { object-fit:contain; padding:22px; background:#fff; }
.studio-home .studio-production { padding:84px 5vw; background:#f5f2e9; }
.studio-home .studio-production-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.studio-home .studio-production-grid figure { margin:0; }
.studio-home .studio-production-grid img { display:block; width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; }
.studio-home .studio-production-grid figcaption { position:static; display:flex; flex-direction:column; gap:5px; padding-top:18px; background:transparent; color:#173126; font-size:15px; }
.studio-home .studio-production-grid figcaption strong { font-weight:600; }
.studio-home .studio-production-grid figcaption span { font-size:13px; color:#58665d; }
.studio-home .studio-story__image img[src$=".svg"] { object-fit:contain; padding:20px; }
@media(max-width:1000px) and (min-width:761px) {
 .studio-home .studio-hero h1 { font-size:clamp(45px,5.7vw,58px); }
 .studio-home .studio-hero__copy { padding:48px 4vw 45px 5vw; }
 .studio-home .studio-hero__actions .button { padding-inline:16px; }
}
@media(max-width:760px) {
 .studio-home .studio-hero { display:flex; min-height:0; height:auto; }
 .studio-home .studio-hero__copy { width:100%; padding:38px 22px 35px; }
 .studio-home .studio-hero h1 { font-size:clamp(42px,10.8vw,62px); letter-spacing:-.035em; }
 .studio-home .studio-hero__intro { max-width:360px; margin:20px 0 22px; }
 .studio-home .studio-hero__note { margin:24px 0 0; max-width:100%; padding:0; font-size:13px; }
 .studio-home .studio-hero__visual { position:relative; min-height:0; height:360px; width:100%; order:2; inset:auto; mask-image:none; }
 .studio-home .studio-hero__visual picture { position:absolute; inset:0; width:100%; height:100%; margin:0; }
 .studio-home .studio-hero__visual img { object-fit:cover; object-position:50% 50%; }
 .studio-home .studio-detail__image { min-height:0; height:auto; aspect-ratio:auto; }
 .studio-home .studio-detail__image img { width:100%; height:auto; aspect-ratio:3/2; }
 .studio-home .studio-production { padding:50px 22px; }
 .studio-home .studio-production-grid { grid-template-columns:1fr; gap:30px; }
}

/* v1.28.1: retain readable small copy on the terracotta journey. */
.studio-home .studio-journey :is(p,li,span,a,b) { color:#fff4e4 !important; }
.studio-home .studio-format-note { color:#58665d !important; }