:root {
  --ink: #6b0a18;
  --paper: #fff6e9;
  --paper-deep: #ffd2e0;
  --sage: #ffd2e0;
  --olive: #b51e36;
  --cream: #fff6e9;
  --rust: #e02936;
  --line: rgba(107, 10, 24, .22);
  --serif: "Cormorant Garamond", Georgia, serif;
  --sans: Manrope, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); overflow-x: hidden; }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

.grain { position: fixed; inset: 0; opacity: .08; pointer-events: none; z-index: 100; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); mix-blend-mode: multiply; }

.site-header { height: 74px; padding: 0 4vw; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(255,246,233,.94); backdrop-filter: blur(16px); z-index: 50; }
.brand { font-family: var(--serif); font-size: 25px; letter-spacing: .08em; line-height: .8; width: max-content; }
.brand span { display: block; font-family: var(--sans); font-size: 7px; letter-spacing: .18em; margin-top: 7px; }
nav { display: flex; gap: 34px; font-size: 11px; text-transform: uppercase; letter-spacing: .13em; }
nav a { position: relative; padding: 10px 0; }
nav a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 5px; height: 1px; background: var(--ink); transition: right .3s; }
nav a:hover::after { right: 0; }
.header-cta { justify-self: end; padding: 11px 17px; border: 1px solid var(--ink); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; transition: .25s; }
.header-cta:hover { background: var(--rust); border-color: var(--rust); color: var(--paper); }

.hero { min-height: calc(100vh - 74px); display: grid; grid-template-columns: 42% 33% 25%; border-bottom: 1px solid var(--line); }
.hero-copy { padding: clamp(62px,8vw,126px) 4vw 48px; display: flex; flex-direction: column; }
.eyebrow { margin: 0 0 24px; font-size: 9px; letter-spacing: .24em; text-transform: uppercase; font-weight: 600; }
h1, h2 { font-family: var(--serif); font-weight: 400; letter-spacing: -.035em; margin: 0; }
h1 { font-size: clamp(58px,6.6vw,108px); line-height: .91; }
h1 em, h2 em { font-weight: 400; color: var(--rust); }
.hero-lead { max-width: 570px; font-family: var(--serif); font-size: clamp(22px,1.8vw,28px); line-height: 1.3; margin: 40px 0; }
.hero-actions { display: flex; align-items: center; gap: 28px; }
.button { border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 50px; padding: 0 24px; text-transform: uppercase; letter-spacing: .13em; font-size: 10px; transition: transform .2s, background .2s, color .2s; }
.button:hover { transform: translateY(-2px); }
.button-light { background: var(--cream); color: var(--ink); }
.button-dark { background: var(--rust); color: var(--cream); width: 100%; }
.text-link { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; border-bottom: 1px solid var(--ink); padding: 12px 0 8px; }
.text-link span { margin-left: 15px; }
.hero-meta { display: flex; gap: 36px; margin-top: auto; padding-top: 64px; }
.hero-meta div { display: flex; gap: 9px; align-items: flex-start; }
.hero-meta strong { font-family: var(--serif); font-size: 27px; font-weight: 400; line-height: .8; }
.hero-meta span { font-size: 8px; text-transform: uppercase; letter-spacing: .11em; line-height: 1.45; }

.hero-art { position: relative; overflow: hidden; min-height: 650px; background: linear-gradient(160deg,#e02936 0%,#be1733 52%,#6b0a18 100%); border-left: 1px solid var(--line); }
.hero-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,transparent 55%,rgba(255,255,255,.12)); }
.art-orbit { position: absolute; border: 1px solid rgba(247,243,232,.45); border-radius: 50%; }
.orbit-one { width: 520px; height: 520px; right: -230px; top: 3%; }
.orbit-two { width: 300px; height: 300px; left: -170px; bottom: 8%; }
.silk { position: absolute; filter: blur(2px); opacity: .62; background: linear-gradient(120deg,rgba(255,210,224,.1),rgba(255,210,224,.85),rgba(107,10,24,.2)); transform: rotate(-14deg); border-radius: 50%; }
.silk-one { width: 500px; height: 160px; left: -70px; top: 24%; }
.silk-two { width: 500px; height: 110px; left: 80px; bottom: 25%; transform: rotate(20deg); }
.product-bottle { width: 132px; height: 270px; position: absolute; left: 50%; top: 49%; transform: translate(-50%,-50%); background: linear-gradient(90deg,#39020e,#831129 40%,#39020e); box-shadow: 0 35px 65px rgba(57,2,14,.42); display: flex; align-items: center; justify-content: center; color: #ffd2e0; letter-spacing: .22em; font-family: var(--serif); z-index: 2; }
.product-bottle::before { content: ""; width: 64px; height: 52px; position: absolute; top: -52px; background: linear-gradient(90deg,#39020e,#a62542,#39020e); }
.product-bottle::after { content: "EAU DE PARFUM"; position: absolute; font: 6px var(--sans); letter-spacing: .18em; top: 58%; }
.product-bottle i { position: absolute; font: italic 45px var(--serif); color: rgba(213,204,185,.28); }
.art-caption { position: absolute; bottom: 30px; left: 30px; right: 30px; font-family: var(--serif); font-size: 12px; line-height: 1.45; color: var(--cream); z-index: 3; }
.art-caption span { display: block; font-family: var(--sans); font-size: 7px; letter-spacing: .2em; margin-bottom: 6px; }
.sound-pill { position: absolute; top: 26px; left: 26px; z-index: 3; background: rgba(248,245,238,.82); border: 0; border-radius: 30px; padding: 9px 14px; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.pulse { width: 6px; height: 6px; display: inline-block; border-radius: 50%; background: var(--rust); margin-right: 7px; }
.hero-art.is-moving .product-bottle { animation: float 3.4s ease-in-out infinite; }
.hero-art.is-moving .silk-one { animation: drift 4s ease-in-out infinite alternate; }
.hero-art.is-moving .silk-two { animation: drift 5s ease-in-out infinite alternate-reverse; }
.hero-art.is-moving .pulse { animation: blink 1s infinite; }

.package-card { background: var(--ink); color: var(--paper); padding: clamp(55px,7vw,110px) 3vw 45px; display: flex; flex-direction: column; }
.package-card .eyebrow { color: #ffd2e0; }
.package-card h2 { font-size: clamp(49px,4.3vw,74px); line-height: .93; }
.package-card > p:not(.eyebrow) { font-family: var(--serif); font-size: 16px; line-height: 1.55; color: #ffd2e0; margin: 35px 0; }
.package-card ul { padding: 0; margin: 0; list-style: none; }
.package-card li { padding: 15px 0; border-top: 1px solid rgba(238,233,223,.16); text-transform: uppercase; font-size: 9px; letter-spacing: .09em; }
.package-card li span { color: #ffd2e0; margin-right: 14px; }
.package-bottom { margin-top: auto; padding-top: 40px; display: flex; justify-content: space-between; align-items: end; border-top: 1px solid rgba(238,233,223,.16); }
.package-bottom span { font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }
.package-bottom strong { font: 400 24px var(--serif); }

.works { padding: 100px 4vw 120px; }
.section-heading { display: grid; grid-template-columns: 1.5fr 1fr; gap: 10vw; align-items: end; margin-bottom: 55px; }
.section-heading h2, .process-column > h2, .footer-cta h2 { font-size: clamp(48px,5.6vw,90px); line-height: .92; }
.section-heading > p { font-family: var(--serif); font-size: 17px; line-height: 1.55; max-width: 420px; }
.filter-bar { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); display: flex; margin-bottom: 28px; }
.filter { appearance: none; border: 0; background: none; padding: 17px 26px 17px 0; margin-right: 26px; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; cursor: pointer; opacity: .48; }
.filter span { font-size: 7px; vertical-align: top; margin-left: 3px; }
.filter.active { opacity: 1; font-weight: 650; color: var(--rust); }
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 22px; align-items: start; }
.case-grid-two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.case-grid-two .case-tall { grid-row: auto; }
.case-grid-two .case-visual { height: min(70vw,760px); }
.case { transition: opacity .3s, transform .3s; cursor: pointer; }
.case.hidden { display: none; }
.case-tall { grid-row: span 2; }
.case-wide { grid-column: span 2; }
.case-visual { height: 410px; position: relative; overflow: hidden; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.case-tall .case-visual { height: 690px; }
.case-wide .case-visual { height: 440px; }
.case:hover .case-visual, .case:focus .case-visual { transform: translateY(-5px); }
.case-featured:focus { outline: 1px solid var(--ink); outline-offset: 7px; }
.case-index { position: absolute; top: 15px; right: 16px; font: 20px var(--serif); z-index: 4; }
.slot-label { position: absolute; left: 15px; bottom: 14px; font-size: 7px; letter-spacing: .18em; background: rgba(248,245,238,.85); padding: 8px 10px; z-index: 5; }
.project-label { position: absolute; left: 15px; bottom: 14px; font-size: 7px; letter-spacing: .18em; background: rgba(248,245,238,.9); padding: 8px 10px; z-index: 5; }
.case-info { padding-top: 13px; display: flex; justify-content: space-between; gap: 15px; }
.case-info h3 { font: 400 20px var(--serif); margin: 0 0 5px; }
.case-info p, .case-info > span { font-size: 8px; letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.case-info > span { text-align: right; opacity: .55; line-height: 1.4; }
.motion-badge { position: absolute; top: 15px; left: 15px; color: var(--cream); background: rgba(24,24,21,.76); padding: 7px 9px; font-size: 7px; letter-spacing: .12em; z-index: 4; }
.visual-monrouge { background: #806555; }
.visual-monrouge video, .visual-tlw video { width: 100%; height: 100%; object-fit: cover; display: block; }
.case-shade { position: absolute; inset: 0; background: linear-gradient(180deg,rgba(18,16,14,.12),transparent 55%,rgba(18,16,14,.24)); pointer-events: none; }
.visual-monrouge .case-index, .visual-tlw .case-index { color: var(--cream); }
.visual-tlw { background: #d7ab38; }
.visual-fashion { background: #d1c6b3; }
.visual-fashion::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg,rgba(255,255,255,.45),transparent 55%); }
.arch { position: absolute; width: 75%; height: 73%; border-radius: 50% 50% 0 0; background: #a87859; left: 12%; bottom: 0; box-shadow: inset 0 0 0 16px rgba(75,54,42,.15); }
.fabric { position: absolute; width: 48%; height: 67%; background: linear-gradient(100deg,#eee7d9,#b5aa97,#f1ebdf); left: 30%; bottom: 0; clip-path: polygon(30% 0,70% 0,87% 100%,0 100%); filter: drop-shadow(18px 10px 18px rgba(31,24,20,.22)); }
.visual-perfume { background: #b46240; }
.sun { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: #e1a45d; top: -80px; right: -65px; }
.plinth { position: absolute; width: 58%; height: 40%; left: 20%; bottom: 0; background: #d5b08a; transform: skew(-3deg); box-shadow: 35px -20px 0 rgba(83,39,23,.22); }
.mini-bottle { position: absolute; width: 80px; height: 135px; left: 42%; bottom: 30%; background: #441f16; color: #e7c5a3; display: grid; place-items: center; font: 15px var(--serif); letter-spacing: .16em; box-shadow: 0 22px 32px rgba(40,14,6,.4); }
.visual-beauty { background: #ccd1ca; }
.water-ring { position: absolute; width: 310px; height: 310px; border: 34px solid rgba(242,246,243,.48); border-radius: 50%; left: -50px; top: 40px; box-shadow: 0 0 30px rgba(255,255,255,.5); }
.serum { position: absolute; right: 22%; top: 25%; width: 93px; height: 190px; background: linear-gradient(90deg,#e2e3dd,#fafaf6,#c5c7bf); display: grid; place-items: center; font: 45px var(--serif); color: #798076; box-shadow: 0 25px 30px rgba(60,68,61,.22); }
.visual-hotel { background: #765a48; }
.window-light { position: absolute; inset: 0 52% 0 0; background: #d9c9ad; clip-path: polygon(0 0,100% 0,78% 100%,0 100%); }
.chair { position: absolute; width: 280px; height: 210px; right: 14%; bottom: -30px; border-radius: 48% 48% 0 0; background: #4b3c33; }
.shirt { position: absolute; width: 150px; height: 235px; right: 28%; top: 18%; background: #ddd8ca; clip-path: polygon(28% 0,72% 0,100% 22%,79% 41%,75% 100%,25% 100%,20% 41%,0 22%); filter: drop-shadow(20px 25px 25px rgba(0,0,0,.28)); }
.visual-jewelry { background: #c7b0a0; }
.jewel-line { position: absolute; width: 260px; height: 360px; border: 2px solid #8c6b57; border-radius: 50%; left: 6%; top: 5%; transform: rotate(-20deg); }
.pearl { position: absolute; width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 30% 25%,#fff,#d7d0c8 70%); left: 42%; top: 42%; box-shadow: 0 18px 30px rgba(74,52,39,.2); }

.start { background: var(--sage); padding: 110px 4vw 0; display: grid; grid-template-columns: 1.45fr .75fr; gap: 8vw; }
.process-column { padding-bottom: 100px; }
.timeline { margin-top: 60px; border-top: 1px solid var(--ink); }
.timeline article { display: grid; grid-template-columns: 55px 1fr 90px; gap: 20px; align-items: start; padding: 21px 0; border-bottom: 1px solid rgba(24,24,21,.25); }
.timeline article > span { font: 21px var(--serif); }
.timeline h3 { margin: 0 0 7px; font: 21px var(--serif); }
.timeline p { max-width: 470px; margin: 0; font-size: 11px; line-height: 1.5; }
.timeline b { font-size: 8px; text-transform: uppercase; letter-spacing: .1em; text-align: right; }
.client-needs { margin-top: 55px; display: grid; grid-template-columns: 1.2fr repeat(3,1fr); border-top: 1px solid var(--ink); padding-top: 18px; gap: 20px; }
.client-needs h3 { font: 25px var(--serif); margin: 0; }
.client-needs div { display: flex; align-items: flex-start; gap: 10px; }
.client-needs span { font: 30px var(--serif); }
.client-needs p { font-size: 8px; line-height: 1.5; text-transform: uppercase; letter-spacing: .07em; margin: 3px 0 0; }

.calculator { background: var(--cream); padding: 40px; align-self: start; position: sticky; top: 95px; box-shadow: 0 30px 60px rgba(51,52,43,.12); }
.calc-head { display: flex; justify-content: space-between; }
.calc-head > span { height: fit-content; font-size: 7px; text-transform: uppercase; letter-spacing: .1em; border: 1px solid var(--line); border-radius: 20px; padding: 6px 9px; }
.calculator h2 { font-size: clamp(46px,4vw,67px); line-height: .9; }
.calc-intro { font: 14px/1.45 var(--serif); margin: 25px 0 30px; }
.calc-row { padding: 17px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.calc-row > label { display: grid; gap: 5px; }
.calc-row > label small { color: #75404a; font: 11px var(--serif); letter-spacing: 0; text-transform: none; }
.stepper { display: flex; align-items: center; border: 1px solid var(--line); }
.stepper button { width: 35px; height: 32px; border: 0; background: none; cursor: pointer; font-size: 17px; }
.stepper output { width: 34px; text-align: center; font: 17px var(--serif); }
fieldset { border: 0; border-top: 1px solid var(--line); padding: 16px 0 0; margin: 0; }
legend { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; padding: 0; margin-bottom: 12px; }
.radio-card, .check-card { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; cursor: pointer; }
.radio-card input, .check-card input { accent-color: var(--ink); }
.radio-card span, .check-card span { display: grid; gap: 4px; }
.radio-card b, .check-card b { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.radio-card small, .check-card small { font: 12px var(--serif); color: #75404a; }
.check-card { border-top: 1px solid var(--line); margin-top: 10px; padding-top: 17px; }
.calc-result { border-top: 1px solid var(--ink); margin-top: 16px; padding: 22px 0 20px; }
.calc-result > div { display: flex; align-items: end; justify-content: space-between; }
.calc-result span { font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.calc-result strong { font: 34px var(--serif); color: var(--rust); }
.calc-result p { font: 12px/1.45 var(--serif); margin: 10px 0 0; }
.fineprint { font-size: 8px; line-height: 1.45; color: #75404a; text-align: center; }

.footer-cta { grid-column: 1/-1; margin: 0 -4vw; padding: 110px 4vw 35px; text-align: center; background: var(--ink); color: var(--paper); }
.footer-cta .button { margin-top: 44px; }
.contact-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.contact-links a { display: inline-flex; justify-content: space-between; gap: 30px; min-width: 155px; padding: 13px 15px; border: 1px solid rgba(255,246,233,.55); font-size: 11px; letter-spacing: .06em; transition: background .2s, color .2s; }
.contact-links a:hover { background: var(--paper); color: var(--ink); }
.contact-links a span { font-size: 15px; line-height: .8; }
.footer-line { margin-top: 100px; border-top: 1px solid rgba(238,233,223,.2); padding-top: 18px; display: flex; justify-content: space-between; font-size: 7px; letter-spacing: .15em; }

dialog { border: 0; padding: 0; background: transparent; width: min(620px,calc(100vw - 30px)); }
dialog::backdrop { background: rgba(17,17,15,.76); backdrop-filter: blur(7px); }
.dialog-card { background: var(--cream); padding: 45px; position: relative; max-height: 90vh; overflow-y: auto; }
.dialog-card h2 { font-size: 57px; }
.dialog-card > p:not(.eyebrow) { font: 15px/1.45 var(--serif); }
.dialog-card > label { display: grid; gap: 8px; margin: 16px 0; font-size: 9px; text-transform: uppercase; letter-spacing: .09em; }
.dialog-card input, .dialog-card textarea, .dialog-card select { width: 100%; border: 1px solid var(--line); border-radius: 0; background: transparent; padding: 12px; outline: none; font-family: var(--serif); font-size: 14px; resize: vertical; }
.dialog-card input:focus, .dialog-card textarea:focus, .dialog-card select:focus { border-color: var(--ink); }
.dialog-close { position: absolute; top: 20px; right: 20px; border: 0; background: none; font-size: 24px; cursor: pointer; }
.copy-status { display: block; min-height: 20px; margin-top: 12px; text-align: center; font-size: 10px; }
.brief-contact-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 20px; margin-top: 10px; font-size: 11px; }
.brief-contact-links a { border-bottom: 1px solid var(--ink); padding-bottom: 4px; }

.case-dialog { width: min(1420px,calc(100vw - 36px)); max-width: none; }
.case-dialog-card { background: var(--paper); max-height: 94vh; overflow-y: auto; position: relative; padding: 68px clamp(24px,5vw,76px) 44px; }
.case-dialog-close { position: sticky; display: block; margin-left: auto; top: 0; right: 0; z-index: 20; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; background: rgba(255,246,233,.92); backdrop-filter: blur(10px); }
.case-detail-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 8vw; align-items: end; margin-top: -28px; padding-bottom: 52px; border-bottom: 1px solid var(--ink); }
.case-detail-head h2 { font-size: clamp(60px,7vw,112px); line-height: .82; }
.case-detail-head h2 em { font-size: .72em; }
.case-detail-copy > p { margin: 0 0 28px; max-width: 520px; font: 18px/1.55 var(--serif); }
.case-role { display: flex; flex-wrap: wrap; gap: 7px; }
.case-role span { border: 1px solid var(--line); border-radius: 20px; padding: 7px 10px; font-size: 7px; letter-spacing: .14em; }
.case-stats { display: grid; grid-template-columns: repeat(3,130px) 1fr; gap: 30px; padding: 24px 0 60px; }
.case-stats div { display: flex; gap: 10px; align-items: flex-start; }
.case-stats strong { font: 38px/.9 var(--serif); }
.case-stats span { font-size: 7px; text-transform: uppercase; letter-spacing: .1em; line-height: 1.45; }
.case-stats > p { margin: 0 0 0 auto; max-width: 420px; font: 14px/1.5 var(--serif); }
.case-gallery-controls { display: flex; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin-bottom: 24px; overflow-x: auto; }
.case-media-filter { border: 0; background: none; padding: 16px 28px 16px 0; margin-right: 28px; white-space: nowrap; cursor: pointer; font-size: 9px; text-transform: uppercase; letter-spacing: .11em; opacity: .45; }
.case-media-filter span { font-size: 7px; vertical-align: super; }
.case-media-filter.active { opacity: 1; font-weight: 650; }
.monrouge-gallery { columns: 3; column-gap: 16px; }
.gallery-item { display: inline-block; width: 100%; margin: 0 0 16px; break-inside: avoid; background: #d8d0c5; transition: opacity .25s, transform .25s; }
.gallery-item.hidden { display: none; }
.gallery-item img, .gallery-item video { display: block; width: 100%; height: auto; aspect-ratio: 2/3; object-fit: cover; background: #2b2724; }
.gallery-item figcaption { padding: 12px 13px 13px; border: 1px solid var(--line); border-top: 0; font-size: 7px; letter-spacing: .14em; text-transform: uppercase; }
.gallery-motion { position: relative; }
.gallery-motion::before { content: "MOTION"; position: absolute; z-index: 2; top: 12px; left: 12px; background: rgba(24,24,21,.76); color: var(--cream); padding: 7px 9px; font-size: 7px; letter-spacing: .12em; pointer-events: none; }
.case-detail-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 55px; padding-top: 24px; border-top: 1px solid var(--ink); }
.case-detail-footer p { margin: 0; font-size: 8px; letter-spacing: .16em; }
.case-detail-footer .text-link { border: 0; border-bottom: 1px solid var(--ink); background: none; cursor: pointer; }

.tlw-dialog-card { background: #f6f1e9; }
.tlw-dialog .case-dialog-card { background: #f4efe6; }
.tlw-detail-head h2 em { color: #7c9dd2; }
.tlw-detail-head { border-bottom-color: #3d1901; }
.tlw-story { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 32px; background: rgba(61,25,1,.18); border: 1px solid rgba(61,25,1,.18); }
.tlw-story article { background: #f4efe6; padding: clamp(25px,3vw,45px); }
.tlw-story article:first-child { background: #7c9dd2; }
.tlw-story article:last-child { background: #eeb945; }
.tlw-story span { display: block; font-size: 7px; letter-spacing: .18em; font-weight: 700; margin-bottom: 38px; }
.tlw-story h3 { max-width: 450px; margin: 0 0 18px; font: 400 clamp(28px,3vw,46px)/.98 var(--serif); letter-spacing: -.035em; }
.tlw-story p { max-width: 530px; margin: 0; font: 15px/1.5 var(--serif); }
.tlw-stats { color: #3d1901; padding-top: 32px; }
.guideline-block { display: grid; grid-template-columns: .7fr 1.3fr; gap: 5vw; padding: 55px 0; border-top: 1px solid #3d1901; }
.guideline-intro h3 { font: 400 clamp(31px,3.3vw,52px)/.98 var(--serif); letter-spacing: -.035em; margin: 0 0 24px; }
.guideline-intro > p:not(.eyebrow) { max-width: 440px; font: 15px/1.5 var(--serif); }
.button-tlw { margin-top: 24px; background: #3d1901; color: #fff; width: max-content; }
.guideline-preview { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; align-self: start; }
.guideline-preview img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; border: 1px solid rgba(61,25,1,.12); }
.tlw-gallery .gallery-item { background: #eee5d8; }
.tlw-gallery .gallery-item figcaption { border-color: rgba(61,25,1,.2); color: #3d1901; }
.tlw-dialog .case-gallery-controls, .tlw-dialog .case-detail-footer { border-color: #3d1901; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity: 1; transform: none; }
@keyframes float { 0%,100%{ transform:translate(-50%,-50%); } 50%{ transform:translate(-50%,calc(-50% - 12px)) rotate(.8deg); } }
@keyframes drift { to { transform: translateX(30px) rotate(-9deg); } }
@keyframes blink { 50% { opacity: .25; } }

@media (max-width: 1080px) {
  .hero { grid-template-columns: 55% 45%; }
  .package-card { grid-column: 1/-1; min-height: 590px; }
  .package-card > p:not(.eyebrow) { max-width: 600px; }
  .case-grid { grid-template-columns: repeat(2,1fr); }
  .case-tall { grid-row: auto; }
  .case-tall .case-visual { height: 520px; }
  .start { grid-template-columns: 1fr 420px; gap: 4vw; }
  .client-needs { grid-template-columns: repeat(3,1fr); }
  .client-needs h3 { grid-column: 1/-1; }
}

@media (max-width: 760px) {
  .header-cta { display: inline-flex; align-items: center; min-height: 44px; }
  .site-header { grid-template-columns: 1fr auto; height: 66px; }
  nav { display: none; }
  .header-cta { font-size: 8px; padding: 9px 11px; }
  .hero { display: flex; flex-direction: column; }
  .hero-copy { min-height: calc(100svh - 66px); padding: 56px 22px 30px; }
  h1 { font-size: clamp(48px,15vw,70px); }
  .hero-actions { flex-wrap: wrap; }
  .hero-meta { gap: 14px; justify-content: space-between; }
  .hero-meta strong { font-size: 23px; }
  .hero-art { min-height: 610px; border-left: 0; }
  .package-card { padding: 65px 22px 35px; min-height: 620px; }
  .works { padding: 75px 22px 90px; }
  .section-heading { grid-template-columns: 1fr; gap: 28px; }
  .section-heading h2, .process-column > h2, .footer-cta h2 { font-size: clamp(45px,14vw,68px); }
  .filter-bar { overflow-x: auto; }
  .filter { white-space: nowrap; margin-right: 12px; padding-right: 10px; }
  .case-grid { grid-template-columns: 1fr; }
  .case-grid-two { grid-template-columns: 1fr; }
  .case-wide { grid-column: auto; }
  .case-visual, .case-tall .case-visual, .case-wide .case-visual { height: 510px; }
  .start { display: block; padding: 75px 22px 0; }
  .timeline article { grid-template-columns: 42px 1fr; }
  .timeline article b { grid-column: 2; text-align: left; }
  .client-needs { grid-template-columns: 1fr; }
  .client-needs h3 { grid-column: auto; }
  .calculator { position: relative; top: auto; margin: 0 -4px 90px; padding: 30px 24px; }
  .footer-cta { margin: 0 -22px; padding: 80px 22px 25px; }
  .footer-line { flex-direction: column; gap: 11px; }
  .dialog-card { padding: 34px 22px 25px; }
  .case-dialog { width: calc(100vw - 14px); }
  .case-dialog-card { padding: 24px 16px 28px; max-height: 96vh; }
  .case-detail-head { grid-template-columns: 1fr; gap: 28px; margin-top: -12px; padding-bottom: 35px; }
  .case-detail-head h2 { font-size: clamp(54px,18vw,82px); }
  .case-detail-copy > p { font-size: 16px; }
  .case-stats { grid-template-columns: repeat(3,1fr); gap: 12px; padding-bottom: 40px; }
  .case-stats > p { grid-column: 1/-1; margin-top: 15px; }
  .case-stats strong { font-size: 30px; }
  .monrouge-gallery { columns: 1; }
  .case-detail-footer { align-items: flex-start; flex-direction: column; }
  .tlw-story { grid-template-columns: 1fr; }
  .guideline-block { grid-template-columns: 1fr; }
  .button-tlw { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Editorial portfolio refresh */
:root {
  --ink: #29251f;
  --paper: #f6f3ed;
  --cream: #fffdf8;
  --sage: #e8e6df;
  --rust: #855442;
  --line: rgba(41, 37, 31, .22);
}
[hidden] { display: none !important; }
section, #calculator, #services, #process, #package { scroll-margin-top: 86px; }
:focus-visible { outline: 2px solid var(--rust); outline-offset: 4px; }
.site-header { background: rgba(246,243,237,.95); }
.button-dark { background: var(--ink); }
.button-dark:hover { background: var(--rust); }
.button:disabled, .stepper button:disabled { opacity: .38; cursor: not-allowed; transform: none; }
.hero { grid-template-columns: 52% 48%; min-height: 0; }
.hero-copy { min-height: 660px; padding-top: clamp(85px,9vw,142px); }
.hero-copy h1 { max-width: 730px; font-size: clamp(62px,7.2vw,118px); }
.hero-lead { max-width: 560px; font-size: clamp(21px,2vw,28px); }
.hero-art { min-height: 660px; border-left: 1px solid var(--line); background: #a8907e; }
.hero-art::after { background: linear-gradient(180deg,transparent 55%,rgba(22,20,17,.32)); }
.hero-main-image { width: 100%; height: 100%; display: block; position: absolute; inset: 0; object-fit: cover; object-position: 50% 12%; }
.hero-inset { position: absolute; right: 6%; top: 11%; z-index: 3; width: clamp(145px,20vw,300px); background: var(--cream); padding: 7px 7px 10px; box-shadow: 0 14px 38px rgba(24,20,16,.22); transform: rotate(3deg); }
.hero-inset img { display: block; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
.hero-inset span { display: block; margin: 9px 4px 0; font-size: 9px; letter-spacing: .12em; }
.art-caption { max-width: 300px; font-size: 17px; line-height: 1.2; }
.art-caption span { font-size: 9px; }
.hero-note { grid-column: 1/-1; padding: 17px 4vw; display: flex; justify-content: space-between; gap: 20px; font-size: 10px; letter-spacing: .14em; }
.services-intro { grid-column: 1/-1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 7vw; align-items: end; padding-bottom: 38px; }
.services-intro h2 { font-size: clamp(50px,5.6vw,90px); line-height: .92; }
.services-intro > p { max-width: 460px; font: 18px/1.5 var(--serif); margin: 0 0 4px; }
.service-list { grid-column: 1/-1; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: var(--ink); border: 1px solid var(--ink); margin-bottom: 110px; }
.service-list > div { background: var(--paper); padding: 28px 26px 30px; min-height: 255px; display: flex; flex-direction: column; }
.service-list span { font-size: 10px; letter-spacing: .15em; }
.service-list h3 { font: 400 clamp(26px,2.5vw,37px)/1.02 var(--serif); margin: 28px 0 12px; }
.service-list p { margin: 0 0 24px; max-width: 320px; font-size: 12px; line-height: 1.55; }
.service-list strong { margin-top: auto; font: 400 27px var(--serif); }
.service-list small { font: 12px var(--sans); }
.launch-offer { grid-column: 1/-1; display: grid; grid-template-columns: 1.1fr .9fr; gap: 7vw; background: var(--ink); color: var(--paper); padding: clamp(38px,5vw,76px); margin: 0 0 110px; }
.launch-offer .eyebrow { color: var(--paper-deep); }
.launch-offer h2 { font-size: clamp(58px,6vw,100px); line-height: .9; }
.launch-offer h2 em { color: var(--paper-deep); }
.launch-offer > div:first-child > p:not(.eyebrow) { max-width: 520px; font: 24px/1.25 var(--serif); margin: 26px 0 30px; }
.launch-offer .button { background: var(--paper-deep); color: var(--ink); }
.launch-offer-details { display: flex; flex-direction: column; }
.launch-offer-details ul { padding: 0; margin: 0; list-style: none; }
.launch-offer-details li { display: flex; align-items: start; gap: 20px; border-top: 1px solid rgba(255,246,233,.35); padding: 15px 0; }
.launch-offer-details li strong { min-width: 40px; font: 35px/.9 var(--serif); color: var(--paper-deep); }
.launch-offer-details li span { font-size: 13px; line-height: 1.4; }
.launch-offer-price { display: flex; align-items: end; justify-content: space-between; gap: 15px; border-top: 1px solid var(--paper); margin-top: auto; padding-top: 26px; }
.launch-offer-price span { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.launch-offer-price strong { font: 55px/.9 var(--serif); white-space: nowrap; }
.launch-offer-note { max-width: 380px; color: var(--paper-deep); font-size: 11px; line-height: 1.5; margin: 14px 0 0; }
.process-column > .eyebrow { margin-top: 4px; }
.calculator { top: 94px; }
.calc-row .calc-label { display: grid; gap: 5px; }
.calc-row .calc-label small { color: var(--rust); font: 14px var(--serif); letter-spacing: 0; text-transform: none; }
.calc-row { font-size: 11px; }
.stepper button { width: 41px; height: 40px; font-size: 21px; }
.stepper output { width: 39px; font-size: 21px; }
.check-card { margin-top: 0; }
.check-card b { font-size: 11px; }
.check-card small { color: var(--rust); font-size: 14px; }
.calc-breakdown { border-top: 1px solid var(--line); padding: 16px 0 3px; }
.calc-breakdown > div { display: flex; justify-content: space-between; gap: 15px; padding: 5px 0; font-size: 12px; }
.calc-breakdown strong { font-weight: 600; white-space: nowrap; }
.calc-result { margin-top: 14px; }
.calc-result span { font-size: 10px; }
.calc-result strong { font-size: 36px; white-space: nowrap; }
.calc-result p { font-size: 14px; }
.fineprint { font-size: 10px; }
.brief-selection { background: #eee8dd; padding: 12px 14px; border-left: 2px solid var(--rust); }
.copy-fallback { width: 100%; min-height: 155px; }
.case-info h3 { font-size: 27px; }
.case-info p, .case-info > span { font-size: 10px; }
.filter { font-size: 12px; }
.filter span, .case-media-filter span { font-size: 9px; }
.project-label, .motion-badge, .case-media-filter, .gallery-item figcaption { font-size: 10px; }
.footer-line { font-size: 9px; }
.footer-cta { background: var(--ink); }

@media (max-width: 1080px) {
  .hero { grid-template-columns: 52% 48%; }
  .hero-copy { min-height: 630px; }
  .hero-art { min-height: 630px; }
  .start { grid-template-columns: 1fr 390px; }
  .launch-offer { grid-template-columns: 1fr 1fr; gap: 4vw; }
}
@media (max-width: 760px) {
  .launch-offer { display: block; margin-bottom: 75px; padding: 34px 25px; }
  .launch-offer h2 { font-size: clamp(55px,13vw,75px); }
  .launch-offer-details { margin-top: 42px; }
  .launch-offer-price { margin-top: 15px; }
  .launch-offer-price strong { font-size: 45px; }
  .hero { display: flex; flex-direction: column; }
  .hero-copy { min-height: 520px; padding-top: 54px; }
  .hero-copy h1 { font-size: clamp(53px,13vw,78px); }
  .hero-lead { margin: 32px 0; }
  .hero-meta { padding-top: 42px; }
  .hero-art { min-height: 530px; border-left: 0; }
  .hero-inset { width: 38%; top: 8%; right: 5%; }
  .hero-note { padding: 18px 22px; font-size: 9px; }
  .services-intro { display: block; padding-bottom: 30px; }
  .services-intro h2 { font-size: clamp(48px,12vw,68px); }
  .services-intro > p { margin-top: 20px; font-size: 17px; }
  .service-list { grid-template-columns: 1fr; margin-bottom: 80px; }
  .service-list > div { min-height: 0; padding: 24px; }
  .service-list h3 { margin: 14px 0 10px; }
  .service-list p { margin-bottom: 15px; }
  .calculator { margin-bottom: 80px; }
  .case-grid-two .case-visual { height: min(125vw,590px); }
}
@media (max-width: 390px) {
  .hero-copy h1 { font-size: 50px; }
  .hero-actions { gap: 12px; }
  .hero-meta { gap: 8px; }
  .hero-meta strong { font-size: 20px; }
  .hero-meta span { font-size: 7px; }
  .hero-note { display: block; line-height: 1.9; }
  .calc-result strong { font-size: 30px; }
  .case-stats div { display: block; }
  .case-stats strong, .case-stats span { display: block; }
  .case-stats span { margin-top: 5px; }
}