/* Swati Out Loud — interactive editorial edition. Original branding retained. */
:root { --desk-cream: #f9f6ed; --desk-paper: #fffdf7; --desk-ink: #20251b; --desk-sage: #e9efda; --desk-violet: #e9e2fa; --desk-peach: #f5dacf; }
html { scroll-behavior: smooth; }
body { overflow-x: clip; }
.scroll-progress { position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 4px; background: transparent; pointer-events: none; }
.scroll-progress .scroll-progress-fill { display: block; height: 100%; width: 0; background: var(--lime, #dcf674); box-shadow: 0 1px 0 var(--ink,#20251b); transform-origin: left center; transition: width 100ms linear; }
.main-nav a { position: relative; }
.main-nav a::after { content: ''; position: absolute; height: 9px; left: 5%; right: 5%; bottom: -10px; background: var(--lime, #dcf674); border: 1px solid var(--ink,#20251b); border-radius: 50% 47% 55% 40%; transform: rotate(-3deg) scaleX(0); transform-origin: 50% 50%; transition: transform .23s cubic-bezier(.22,1,.36,1); z-index: -1; }
.main-nav a:hover::after, .main-nav a:focus-visible::after, .main-nav a[aria-current="page"]::after { transform: rotate(-3deg) scaleX(1); }
.hero-note { --paper-x: 0px; --paper-y: 0px; }
.hero-note:hover { translate: var(--paper-x) var(--paper-y); transition: translate 220ms ease; }
.brand-logo-tile, .company-card { transition: transform 260ms cubic-bezier(.22,1,.36,1), box-shadow 260ms ease, background 260ms ease; }
.brand-logo-tile:hover, .brand-logo-tile:focus-visible { transform: translateY(-6px) rotate(-1deg); box-shadow: 5px 9px 0 var(--lime,#dcf674); }
.story-card { transition: translate .25s ease, box-shadow .25s ease; }
.story-card:hover { translate: 0 -5px; }
/* Motion is progressive enhancement; without JS, all sections remain visible. */
@media (prefers-reduced-motion: no-preference) {
  .has-motion [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 650ms ease, transform 650ms cubic-bezier(.2,.8,.2,1); }
  .has-motion [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
}
.desk-section { background: #f6f1e7; border-block: 1px solid var(--ink,#20251b); position: relative; overflow: hidden; }
.desk-section::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .15; background-image: radial-gradient(#b7b5ab 1px,transparent 1px); background-size: 28px 28px; }
.desk-section-inner { padding-top: 100px; padding-bottom: 90px; position: relative; }
.desk-heading-row { display: flex; align-items: end; justify-content: space-between; gap: 60px; }
.desk-heading-row .section-title { line-height: 1; }
.desk-heading-copy { max-width: 340px; }
.desk-heading-copy p { font-size: 16px; line-height: 1.7; color: #55584d; margin: 0 0 23px; }
.desk-help { font: 11px/1.55 var(--mono,monospace); text-transform: uppercase; letter-spacing: .035em; border-bottom: 1px dashed #82867b; padding-bottom: 12px; }
.desk-help span { display: inline-block; font-size: 25px; transform: rotate(15deg); vertical-align: middle; margin-right: 7px; }
.desk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 22px; margin: 45px 0 13px; }
.desk-caption { display: inline-flex; align-items: center; gap: 10px; font: 11px var(--mono,monospace); letter-spacing: .05em; color: #565b50; }
.desk-status-dot { width: 11px; height: 11px; border-radius: 50%; background: #a8b55c; border: 1px solid #4f6130; }
.desk-toolbar>div { display: flex; gap: 10px; }
.desk-tool { background: var(--desk-paper); border: 1px solid var(--desk-ink); border-radius: 100px; padding: 11px 16px; cursor: pointer; font: 700 12px var(--sans,sans-serif); transition: background .18s ease, transform .18s ease; }
.desk-tool:hover { background: var(--lime,#dcf674); transform: translateY(-2px); }
.desk-tool span { font-size: 17px; padding-left: 8px; }
.desk-board { min-height: 760px; position: relative; border: 1px solid #b7b6a8; border-radius: 16px; background: #f6f1e7; box-shadow: inset 0 0 35px rgba(92,87,74,.04); overflow: hidden; }
.desk-board::before, .desk-board::after { content: ''; position: absolute; pointer-events: none; border: 1px solid #c9c5b8; border-radius: 50%; transform: rotate(-15deg); }
.desk-board::before { width: 550px; height: 380px; top: 140px; right: 8%; }
.desk-board::after { width: 240px; height: 200px; bottom: 65px; left: -35px; }
.desk-card { width: min(25%, 300px); min-width: 225px; position: absolute; left: var(--desk-x); top: var(--desk-y); transform: rotate(var(--desk-r)); background: var(--desk-paper); border: 1px solid var(--desk-ink); border-radius: 3px; box-shadow: 7px 11px 0 rgba(35,35,29,.22); padding: 11px; z-index: 2; transition: box-shadow .2s ease, filter .2s ease; touch-action: pan-y; }
.desk-card:hover { filter: brightness(1.012); box-shadow: 8px 16px 0 rgba(35,35,29,.25); }
.desk-card.is-dragging { z-index: 20 !important; box-shadow: 13px 22px 0 rgba(35,35,29,.25); transition: none; cursor: grabbing; }
.desk-card-handle { width: 100%; appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 6px; background: #edf2d2; border: 0; border-bottom: 1px solid #b8bfaa; padding: 7px 8px 9px; cursor: grab; text-align: left; font: 700 9px/1.2 var(--mono,monospace); color: #404537; letter-spacing: .04em; touch-action: none; }
.desk-card-handle:active { cursor: grabbing; }
.desk-card-handle:focus-visible { outline: 3px solid #4649ca; outline-offset: 3px; }
.desk-pin { font-size: 18px; color: #717f4a; }
.desk-card>a { display: block; overflow: hidden; aspect-ratio: 1.32/1; background: #ebe9dd; }
.desk-card>a>img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 350ms cubic-bezier(.22,1,.36,1); }
.desk-card>a:hover>img, .desk-card>a:focus-visible>img { scale: 1.07; }
.desk-card-meta { display: flex; flex-direction: column; gap: 6px; padding: 13px 4px 3px; }
.desk-card-meta strong { font: 600 17px/1.17 var(--serif,Georgia,serif); letter-spacing: -.025em; }
.desk-card-meta>span { font: 10px/1.4 var(--mono,monospace); color: #555b51; text-transform: uppercase; }
.desk-card-2 .desk-card-handle { background: #f4e1d8; }
.desk-card-3 .desk-card-handle { background: #e6dfff; }
.desk-card-4 .desk-card-handle { background: #dce6e2; }
.desk-card-5 .desk-card-handle { background: #f0e7c7; }
.desk-sketch { position: absolute; pointer-events: none; font-family: var(--serif,Georgia,serif); }
.desk-sketch-a { font-size: 80px; color: #8d9a67; top: 5%; left: 27%; transform: rotate(-29deg); }
.desk-sketch-b { font-size: 29px; color: #666259; bottom: 10%; right: 4%; transform: rotate(-8deg); font-style: italic; line-height: 1.15; }
.desk-sketch-c { font-size: 110px; color: #d9debb; left: 7%; bottom: 6%; }
.desk-under { display: flex; align-items: center; justify-content: space-between; margin-top: 24px; padding-top: 17px; border-top: 1px solid #bab8a7; gap: 20px; color: #51564a; font-size: 14px; }
.desk-under a { font-weight: 800; text-decoration: underline; text-underline-offset: 4px; color: #20251b; }
/* Case switcher */
.decision-playground { padding-top: 100px; padding-bottom: 120px; }
.decision-playground-top { display: flex; justify-content: space-between; align-items: end; gap: 50px; margin-bottom: 46px; }
.decision-playground-top>p { font: 16px/1.75 var(--sans,sans-serif); max-width: 365px; color: #53574f; }
.case-switcher { display: grid; grid-template-columns: minmax(270px,.85fr) minmax(0,1.15fr); border: 1px solid var(--desk-ink); background: #fdfbf5; box-shadow: 9px 9px 0 var(--lime,#dcf674); }
.case-choice-column { background: #eeece4; border-right: 1px solid var(--desk-ink); display: flex; flex-direction: column; }
.case-choice { background: transparent; border: 0; border-bottom: 1px solid #c6c5b9; color: #282e23; text-align: left; padding: 28px 36px; min-height: 142px; cursor: pointer; position: relative; display: flex; flex-direction: column; gap: 13px; transition: background .24s ease; }
.case-choice:last-child { border-bottom: 0; }
.case-choice span:first-child { font: 10px var(--mono,monospace); color: #74796d; }
.case-choice strong { font: 600 clamp(20px,2.05vw,28px)/1.1 var(--serif,Georgia,serif); letter-spacing: -.03em; max-width: 260px; }
.case-choice .case-choice-arrow { position: absolute; right: 28px; top: 44%; font: 30px var(--serif,Georgia,serif); opacity: .5; }
.case-choice:hover, .case-choice.is-active { background: var(--lime,#dcf674); }
.case-choice.is-active .case-choice-arrow { transform: rotate(45deg); opacity: 1; }
.case-choice:focus-visible { outline: 3px solid #4649ca; outline-offset: -4px; }
.case-answer { display: flex; flex-direction: column; min-height: 426px; }
.case-answer-head, .case-answer-foot { display: flex; justify-content: space-between; align-items: center; padding: 18px 32px; font: 10px var(--mono,monospace); color: #585e55; }
.case-answer-head { border-bottom: 1px solid #cccabe; }
.case-answer-head>span:last-child { color: #717c48; font-size: 25px; }
.case-answer-body { padding: 25px 38px 31px; flex: 1; }
.case-prompt { font: 600 clamp(25px,2.5vw,39px)/1.15 var(--serif,Georgia,serif); letter-spacing: -.045em; margin: 0 0 28px; }
.case-answer-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; border-top: 1px solid #c9c6b9; padding-top: 25px; }
.case-answer-steps>div>span { font: 10px var(--mono,monospace); color: #505e3d; }
.case-answer-steps>div>p { font: 14px/1.65 var(--sans,sans-serif); color: #4c5148; margin: 10px 0 20px; }
.case-answer-link { display: inline-flex; background: #22291e; color: white; padding: 14px 21px; border-radius: 100px; font: 700 13px var(--sans,sans-serif); text-decoration: none; align-items: center; gap: 20px; }
.case-answer-link:hover { background: #4649ca; }
.case-answer-foot { border-top: 1px solid #cccabe; padding: 16px 32px; }
/* Contact brief-builder checklist */
.brief-builder { margin-top: 70px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 40px; background: #f6f3ea; color: #252b21; padding: 32px 34px; border: 1px solid #101510; box-shadow: 10px 10px 0 #b9cf71; }
.brief-builder .section-kicker { color: #505943; }
.brief-builder-left h3 { font: 600 clamp(28px,3vw,45px)/1.04 var(--serif,Georgia,serif); letter-spacing: -.045em; margin: 18px 0 16px; }
.brief-builder-left h3 em { color: #4b4dce; font-weight: 500; }
.brief-builder-left p { font-size: 14px; line-height: 1.7; color: #585d55; max-width: 310px; }
.brief-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.brief-check { display: flex; gap: 13px; align-items: center; padding: 15px 12px; background: #fffefa; border: 1px solid #c2c5b6; border-radius: 8px; cursor: pointer; font-weight: 700; font-size: 13px; min-height: 62px; }
.brief-check:has(input:checked) { background: #e8f2c7; border-color: #6b774c; }
.brief-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.brief-check:has(input:focus-visible) { outline: 3px solid #4649ca; outline-offset: 2px; }
.brief-check-mark { width: 25px; height: 25px; border: 1px solid #939b83; display: grid; place-items: center; flex: 0 0 auto; background: #fff; color: transparent; border-radius: 50%; font-weight: 900; }
.brief-check input:checked + .brief-check-mark { background: #222b19; color: white; border-color: #222b19; }
.brief-builder-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 19px; gap: 20px; }
.brief-builder-footer>span { font-size: 12px; color: #595e55; max-width: 220px; line-height: 1.5; }
.brief-builder-footer a { display: inline-flex; gap: 23px; align-items: center; padding: 12px 18px; border-radius: 100px; background: #252b21; color: white; font-size: 14px; font-weight: 800; white-space: nowrap; }
.brief-builder-footer a:hover { background: #4649ca; }
/* Minor micro-interactions on existing work cards */
.actual-work-card, .editorial-card { transition: transform .23s ease, box-shadow .23s ease; }
.actual-work-card:hover, .editorial-card:hover { transform: translateY(-5px); }
@media(max-width:1100px){
 .desk-card{min-width:215px;width:26%;}
 .desk-board { min-height: 690px; }
 .desk-sketch-b { font-size: 23px; }
}
@media(max-width:860px){
 .desk-heading-row, .decision-playground-top { display:block; }
 .desk-heading-copy, .decision-playground-top>p { max-width:580px; margin-top: 24px; }
 .desk-board { display:flex; gap:22px; min-height:0; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; padding:45px 27px 53px; border-radius:12px; }
 .desk-card { flex: 0 0 min(310px,80vw); position:relative; width:auto; min-width:0; left:auto !important; top:auto !important; transform:rotate(0) !important; scroll-snap-align:center; box-shadow:5px 8px 0 rgba(35,35,29,.18); }
 .desk-card-handle { cursor: default; }
 .desk-sketch, .desk-toolbar { display:none; }
 .desk-help { font-size:0; }
 .desk-help::after { content:'SWIPE THROUGH THE WORK. TAP A PIECE TO OPEN IT.'; font: 11px var(--mono,monospace); }
 .case-switcher { grid-template-columns:1fr; }
 .case-choice-column { border-right:0; border-bottom:1px solid var(--desk-ink); display:grid; grid-template-columns:repeat(3,1fr); }
 .case-choice { min-height:122px; padding:21px; border-right:1px solid #c6c5b9; border-bottom:0; }
 .case-choice strong { font-size:19px; }
 .case-choice .case-choice-arrow { display:none; }
 .brief-builder { grid-template-columns:1fr; }
}
@media(max-width:620px){
 .desk-section-inner { padding-top: 70px; padding-bottom:70px; }
 .desk-under { flex-wrap:wrap; }
 .decision-playground { padding-top:75px; padding-bottom:90px; }
 .case-choice { padding:18px 10px; min-height:105px; }
 .case-choice span:first-child { font-size:8px; }
 .case-choice strong { font-size:15px; }
 .case-answer-head, .case-answer-foot { padding:16px 20px; }
 .case-answer-body { padding:26px 22px; }
 .case-answer-steps { grid-template-columns:1fr; gap:0; }
 .case-prompt { font-size:28px; }
 .brief-builder { margin-top:55px; padding:23px 16px; gap:10px; }
 .brief-checklist { grid-template-columns:1fr; }
 .brief-builder-footer { align-items:stretch; flex-direction:column; }
 .brief-builder-footer a { justify-content:space-between; }
 .desk-heading-row .section-title { font-size:clamp(44px,10vw,65px); }
}
@media(prefers-reduced-motion:reduce){
 html {scroll-behavior:auto}
 *, *::before, *::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
 .has-motion [data-reveal]{opacity:1;transform:none}
}