/* Source colors remain in the artwork; the surrounding system shares the landing palette. */
.ex-visual{--ex-wine:#6b190c;--ex-paper:#f1eae0;--ex-beige:#d6beaa;--ex-cream:#e4d8cc;--ex-brown:#3c2821;--ex-rule:#6b190c30;position:relative;color:var(--ex-brown);min-width:0;isolation:isolate}
.ex-visual [hidden]{display:none!important}
.ex-overline{display:block;font:400 12px/1.5 'DM Sans',sans-serif;letter-spacing:.095em;text-transform:uppercase;color:var(--ex-wine)}
.ex-visual h3{font:400 clamp(29px,3vw,48px)/1.08 var(--portfolio-serif);letter-spacing:-.025em;color:var(--ex-wine);margin:14px 0}
.ex-visual p{font-size:14px;line-height:1.75;max-width:40em}
.ex-visual button:focus-visible,.ex-visual summary:focus-visible,.ex-audience-window:focus-visible{outline:2px solid var(--ex-wine);outline-offset:5px}
.ex-art{margin:0;min-width:0}
#project-view .ex-visual .image-button{display:block;width:100%;padding:0;min-height:0;border:0;border-radius:0;background:transparent;overflow:visible;transform:none;box-shadow:none}
#project-view .ex-visual .image-button:after{display:none}
#project-view .ex-visual img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;object-position:center;transform:none;rotate:none;filter:none;border-radius:0;max-height:none}
.ex-art figcaption{display:flex;gap:20px;justify-content:space-between;font:400 12px/1.6 'DM Sans',sans-serif;margin-top:14px;color:var(--ex-brown);opacity:.72}
.ex-art figcaption span{flex:none;color:var(--ex-wine);font-size:15px}
.ex-visual .ex-source-note{font-size:12px;line-height:1.7;opacity:.65;margin-top:24px;max-width:680px}
.ex-choice-nav{display:flex;gap:12px 24px;flex-wrap:wrap;border-bottom:1px solid var(--ex-rule);margin-bottom:32px}
.ex-choice-nav button{padding:14px 0;font-size:12px;line-height:1.5;min-height:46px;border-bottom:2px solid transparent;color:var(--ex-brown)}
.ex-choice-nav button[aria-pressed=true]{border-bottom-color:var(--ex-wine);color:var(--ex-wine)}
.ex-choice-nav button:hover{color:var(--ex-wine)}
.ex-thinking{border-top:1px solid var(--ex-rule);margin-top:28px;max-width:540px}
.ex-thinking summary{display:flex;justify-content:space-between;align-items:center;gap:30px;cursor:pointer;list-style:none;min-height:46px;padding:14px 0;font-size:12px;color:var(--ex-wine)}
.ex-thinking summary::-webkit-details-marker{display:none}
.ex-thinking summary>span{font-size:21px;transition:transform .3s}
.ex-thinking[open] summary>span{transform:rotate(45deg)}
.ex-thinking p{padding:0 0 17px;font-size:12px;line-height:1.8;max-width:520px}
.ex-stage{min-width:0}
.ex-ride{display:grid;grid-template-columns:.8fr 1.2fr;gap:7%;align-items:center}
.ex-ride-context{position:relative;padding-right:7%}
#project-view .ex-rider img{max-height:710px}
.ex-context-line{display:flex;gap:12px;align-items:center;justify-content:center;margin-top:27px;white-space:nowrap;font-size:12px;color:var(--ex-wine)}
.ex-context-line i{font-style:normal;opacity:.55}
.ex-ride-context:after{content:'';position:absolute;top:46%;left:92%;width:18%;border-top:1px solid var(--ex-rule);transform:rotate(-14deg);transform-origin:left center;z-index:-1}
.ex-ride-screen{margin:18px 0 26px}
#project-view .ex-ride-screen img{max-height:380px}
.ex-state-copy h3{font-size:clamp(27px,2.8vw,41px);margin-bottom:12px}
.ex-state-copy p{max-width:390px}
.ex-flow{display:grid;grid-template-columns:.5fr 1fr;gap:10%;align-items:center}
.ex-flow-thread{list-style:none;padding:0;margin:0}
.ex-flow-thread li{padding:0 0 48px 56px;position:relative}
.ex-flow-thread li:last-child{padding-bottom:0}
.ex-flow-thread li:before{content:'';position:absolute;top:22px;bottom:-1px;left:17px;border-left:1px solid var(--ex-rule)}
.ex-flow-thread li:last-child:before{display:none}
.ex-flow-thread li>span{position:absolute;left:0;top:0;display:grid;place-items:center;width:35px;height:35px;background:var(--ex-paper);border:1px solid var(--ex-rule);border-radius:50%;font-size:12px;color:var(--ex-wine)}
.ex-flow-thread strong{display:block;font:400 clamp(25px,2.6vw,40px)/1.2 var(--portfolio-serif);color:var(--ex-wine);margin-bottom:10px}
.ex-flow-thread p{font-size:12px;max-width:210px}
#project-view .ex-flow-art img{max-height:850px}
.ex-saathi{display:grid;grid-template-columns:.6fr 1.5fr;gap:8%}
.ex-saathi-nav{display:flex;flex-direction:column;align-self:center;position:relative}
.ex-saathi-nav:before{content:'';position:absolute;left:12px;top:25px;bottom:25px;border-left:1px solid var(--ex-rule);z-index:-1}
.ex-saathi-nav button{display:flex;align-items:center;gap:17px;text-align:left;font:400 clamp(20px,2vw,29px)/1.2 var(--portfolio-serif);padding:21px 0;color:var(--ex-brown);transition:color .25s}
.ex-saathi-nav button>span{display:grid;place-items:center;flex:0 0 25px;height:25px;border-radius:50%;background:var(--ex-paper);border:1px solid var(--ex-rule);font:400 12px 'DM Sans',sans-serif;transition:background .3s,color .3s}
.ex-saathi-nav button>i{font:normal 16px 'DM Sans',sans-serif;margin-left:auto;opacity:0;transition:opacity .25s,transform .25s}
.ex-saathi-nav button[aria-pressed=true]{color:var(--ex-wine)}
.ex-saathi-nav button[aria-pressed=true]>span{background:var(--ex-wine);color:var(--ex-paper)}
.ex-saathi-nav button[aria-pressed=true]>i,.ex-saathi-nav button:hover>i{opacity:1;transform:translateX(3px)}
.ex-saathi-stage{display:grid;grid-template-columns:1fr .9fr;gap:9%;align-items:center;min-height:700px}
#project-view .ex-phone-art img{height:650px;max-height:650px;width:100%}
.ex-saathi-note h3{font-size:clamp(28px,2.8vw,42px)}
.ex-saathi-note>p{font-size:13px}
.ex-saathi>.ex-source-note{grid-column:1/-1;margin-top:5px}
.ex-strip-heading{display:flex;align-items:center;justify-content:space-between;gap:25px;margin-bottom:28px}
.ex-strip-controls{display:flex;gap:12px}
.ex-strip-controls button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--ex-rule);border-radius:50%;font-size:22px;color:var(--ex-wine);transition:background .3s}
.ex-strip-controls button:hover{background:var(--ex-cream)}
.ex-audience-window{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:var(--ex-beige) transparent;padding-bottom:12px}
.ex-audience-track{list-style:none;padding:0;margin:0;display:flex;width:max-content;gap:32px}
.ex-audience{width:clamp(260px,27vw,390px);padding:18px 0 28px;border-top:1px solid var(--ex-rule);flex:none}
.ex-audience-number{font-size:12px;color:var(--ex-wine)}
.ex-audience-images{display:flex;align-items:end;height:275px;gap:8px;margin:24px 0 18px}
#project-view .ex-audience-images img{height:100%;width:100%;min-width:0;object-position:center bottom}
#project-view .ex-audience-pair .ex-audience-images img{width:calc(50% - 4px)}
.ex-audience h3{font-size:clamp(29px,3vw,43px);margin:20px 0 12px}
.ex-audience>p{font-size:12px;max-width:240px}
.ex-strip-progress{height:1px;background:var(--ex-rule);margin-top:14px;overflow:hidden}
.ex-strip-progress span{display:block;height:100%;width:100%;background:var(--ex-wine);transform:scaleX(.18);transform-origin:left center}
.ex-product-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;border-bottom:1px solid var(--ex-rule);margin-bottom:38px}
.ex-product-nav button{display:grid;grid-template-columns:1fr auto;gap:13px 15px;padding:14px 0 22px;border-bottom:2px solid transparent;text-align:left;min-width:0;transition:transform .3s,border-color .3s}
.ex-product-nav button>span{grid-column:1;font-size:12px;color:var(--ex-wine)}
.ex-product-nav strong{grid-column:1;font:400 clamp(24px,2.6vw,38px)/1.1 var(--portfolio-serif);color:var(--ex-wine)}
.ex-product-nav small{grid-column:1;font-size:12px;color:var(--ex-brown);opacity:.72}
.ex-product-nav i{grid-column:2;grid-row:2;font-style:normal;color:var(--ex-wine);opacity:.45}
.ex-product-nav button[aria-pressed=true]{border-bottom-color:var(--ex-wine)}
.ex-product-nav button[aria-pressed=true] i{opacity:1}
.ex-product-nav button:hover{transform:translateY(-4px)}
.ex-product-stage{display:grid;grid-template-columns:.85fr 1.15fr;gap:8%;align-items:center;min-height:530px}
.ex-product-copy h3{font-size:clamp(32px,3.7vw,57px)}
.ex-product-copy>p{max-width:340px}
#project-view .ex-product-art img{max-height:570px}
.ex-bank-hero{display:grid;grid-template-columns:.8fr 1.2fr;gap:4%;align-items:center}
.ex-bank-hero-type>p{font:400 clamp(40px,4.5vw,73px)/1.08 var(--portfolio-serif);letter-spacing:-.035em;color:var(--ex-wine);margin:25px 0 32px}
.ex-bank-hero-route{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--ex-wine)}
.ex-bank-hero-route i{font-style:normal;opacity:.5}
.ex-bank-hero-art{position:relative;padding:0 15% 14% 0}
#project-view .ex-bank-phone img{max-height:600px}
.ex-bank-offer-cards{position:absolute;right:0;bottom:0;width:40%;height:65%;pointer-events:none}
.ex-bank-offer{position:absolute;width:62%;filter:drop-shadow(0 15px 20px #3c282114);pointer-events:auto}
.ex-offer-one{left:0;top:3%;transform:rotate(-10deg)}
.ex-offer-two{right:0;top:24%;transform:rotate(8deg)}
.ex-bank-offer figcaption{display:none}
.ex-bank-hero>.ex-source-note{grid-column:1/-1;margin-top:20px}
@media(max-width:1050px){
  .ex-ride{gap:5%;grid-template-columns:.7fr 1fr}.ex-ride-context{padding-right:0}.ex-context-line{gap:7px;font-size:12px}.ex-ride-context:after{display:none}
  .ex-saathi{grid-template-columns:.55fr 1.4fr;gap:5%}.ex-saathi-stage{gap:7%;grid-template-columns:1fr .9fr;min-height:600px}#project-view .ex-phone-art img{height:550px;max-height:550px}.ex-saathi-nav button{font-size:23px;gap:12px}.ex-saathi-note h3{font-size:31px}
  .ex-product-stage{min-height:440px}.ex-product-nav{gap:20px}.ex-bank-hero-type>p{font-size:50px}
}
@media(max-width:760px){
  .ex-ride{grid-template-columns:1fr;gap:38px}.ex-ride-context{display:grid;grid-template-columns:1fr .65fr;gap:25px;align-items:center}.ex-context-line{display:flex;flex-direction:column;align-items:start;font-size:12px;gap:17px}.ex-context-line i{transform:rotate(90deg)}#project-view .ex-rider img{max-height:490px}.ex-choice-nav{gap:8px 22px;margin-bottom:26px}.ex-state-copy h3{font-size:35px}#project-view .ex-ride-screen img{max-height:380px}
  .ex-flow{grid-template-columns:1fr;gap:35px}.ex-flow-thread{display:flex;gap:20px}.ex-flow-thread li{flex:1;padding:45px 0 0}.ex-flow-thread li:before{left:18px;top:17px;bottom:auto;width:calc(100% + 20px);border-left:0;border-top:1px solid var(--ex-rule)}.ex-flow-thread strong{font-size:28px}.ex-flow-thread p{font-size:12px}.ex-flow-thread li>span{z-index:1}#project-view .ex-flow-art img{max-height:900px}
  .ex-saathi{display:block}.ex-saathi-nav{flex-direction:row;flex-wrap:wrap;gap:0 22px;margin-bottom:26px;border-bottom:1px solid var(--ex-rule)}.ex-saathi-nav:before{display:none}.ex-saathi-nav button{font:400 12px/1.5 'DM Sans',sans-serif;gap:8px;min-height:48px;padding:10px 0}.ex-saathi-nav button>i{display:none}.ex-saathi-nav button>span{flex-basis:22px;height:22px;font-size:12px}.ex-saathi-stage{grid-template-columns:1fr 1fr;min-height:590px;gap:7%}#project-view .ex-phone-art img{height:530px;max-height:530px}.ex-saathi-note h3{font-size:31px}.ex-saathi-note>p{font-size:12px}
  .ex-audience{width:clamp(235px,67vw,330px)}.ex-audience-images{height:240px}.ex-audience h3{font-size:34px}.ex-strip-heading{margin-bottom:15px}.ex-strip-heading>.ex-overline{max-width:180px}.ex-strip-controls{gap:8px}
  .ex-product-nav{gap:15px;margin-bottom:30px}.ex-product-nav strong{font-size:25px}.ex-product-nav small{font-size:12px}.ex-product-nav i{display:none}.ex-product-stage{grid-template-columns:1fr;gap:25px;min-height:0}.ex-product-art{grid-row:1}.ex-product-copy h3{font-size:37px;max-width:420px}.ex-product-copy>p{max-width:480px}#project-view .ex-product-art img{max-height:520px}
  .ex-bank-hero{grid-template-columns:1fr;gap:30px}.ex-bank-hero-type>p{font-size:49px;margin:18px 0 25px}.ex-bank-hero-art{width:100%;max-width:580px;margin:auto}#project-view .ex-bank-phone img{max-height:580px}.ex-bank-hero>.ex-source-note{margin-top:10px}
}
@media(max-width:480px){
  .ex-ride-context{grid-template-columns:1fr .5fr;gap:17px}.ex-context-line{font-size:12px;gap:13px}.ex-choice-nav{gap:4px 17px}.ex-choice-nav button{font-size:12px}.ex-state-copy h3{font-size:31px}.ex-art figcaption{font-size:12px;gap:12px}
  .ex-saathi-stage{display:flex;flex-direction:column;gap:25px;min-height:0;align-items:stretch}.ex-phone-art{width:100%;max-width:290px;margin:auto}#project-view .ex-phone-art img{height:570px;max-height:570px}.ex-saathi-note{max-width:380px}.ex-saathi-note h3{font-size:34px}.ex-saathi>.ex-source-note{margin-top:24px}.ex-saathi-nav{gap:0 16px}.ex-saathi-nav button{font-size:12px}
  .ex-product-nav{gap:12px}.ex-product-nav strong{font-size:22px}.ex-product-nav small{line-height:1.5}.ex-product-copy h3{font-size:34px}.ex-flow-thread{gap:13px}.ex-flow-thread strong{font-size:24px}.ex-flow-thread p{font-size:12px}.ex-bank-hero-type>p{font-size:43px}
}
@media(prefers-reduced-motion:reduce){.ex-visual *{scroll-behavior:auto!important;animation:none!important;transition:none!important}.ex-product-nav button:hover{transform:none}}