@font-face{font-family:OdetteManrope;src:url('/assets/odette/manrope-800.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap}
@font-face{font-family:OdetteKufi;src:url('/assets/odette/odette-arabic-wordmark.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
.odette-case{margin-block:78px;scroll-margin-top:24px}.odette-case .section-intro{max-width:35rem}
.odette-brand-board{background:#F5F6F8;color:#10131A;border-radius:22px;padding:clamp(26px,5vw,76px);display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:36px;align-items:center;overflow:hidden}
.odette-signatures{display:grid;gap:30px}.odette-signature{font:800 clamp(27px,3.3vw,52px)/1.18 OdetteManrope,Manrope,sans-serif;letter-spacing:-.06em}.odette-arabic-signature{font:700 clamp(25px,3vw,46px)/1.65 OdetteKufi,sans-serif;letter-spacing:0;text-align:left;width:max-content;max-width:100%}.odette-signature>span,.odette-arabic-signature>span{color:#385BF6}.odette-signatures p{font-size:12px;color:#616977;letter-spacing:.04em;margin:0}
.odette-mark-stage{display:grid;place-items:center;height:220px;--blue:#385BF6}
/* Source geometry and motion: the delivered client site's modern.css and glass-refinement.css. */
.odette-case .dd-mark{position:relative;display:inline-block;width:30px;height:30px;border-radius:6px;background:var(--blue);direction:ltr;line-height:1;font-family:OdetteManrope,Manrope,Arial,sans-serif;font-weight:800;letter-spacing:-1.12px;transform:scale(6);flex-shrink:0}
.odette-case .dd-mark>span{position:absolute;font-size:21px;line-height:1;color:#fff}
.odette-case .dd-mark .dd-front{animation:odette-dd-front-flow 2.6s ease-in-out infinite alternate}
.odette-case .dd-mark .dd-back{animation:odette-dd-back-flow 2.6s ease-in-out infinite alternate}
@keyframes odette-dd-front-flow{from{left:17%;top:28%;color:#fff;z-index:2}to{left:38%;top:7%;color:#b7c6ff;z-index:1}}
@keyframes odette-dd-back-flow{from{left:38%;top:7%;color:#b7c6ff;z-index:1}to{left:17%;top:28%;color:#fff;z-index:2}}
.odette-mark-stage[data-paused=true] .dd-mark>span{animation-play-state:paused}
.odette-board-note{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #10131a22;padding-top:22px}.odette-board-note p{font-size:12px;color:#616977;margin:0}.odette-board-note button{font:inherit;font-size:12px;color:#10131a;background:none;border:1px solid #10131a33;border-radius:99px;padding:10px 16px;cursor:pointer}.odette-board-note button:focus-visible{outline:2px solid #385BF6;outline-offset:4px}
.odette-case-copy{display:grid;grid-template-columns:1fr 1fr;gap:36px;margin-block:28px}.odette-case-copy p{margin:0;font-size:clamp(16px,1.5vw,19px);line-height:1.75}
.odette-palette{display:grid;grid-template-columns:repeat(5,1fr);gap:15px;list-style:none;padding:0;margin:40px 0 0}.odette-palette li{display:grid;gap:8px}.odette-palette li>span{height:76px;border:1px solid #8884;border-radius:10px;background:var(--swatch)}.odette-palette b{font-size:13px;font-weight:500}.odette-palette small{font-size:11px;opacity:.65}
.odette-website-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,.32fr);gap:32px;align-items:start}.odette-website-grid figure{margin:0;min-width:0}.odette-website-grid img{width:100%;height:auto;border-radius:12px;display:block}.odette-website-grid figcaption{font-size:12px;line-height:1.6;margin-top:14px;opacity:.75}.odette-phone-view{max-width:320px;justify-self:end}.odette-site-links{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-block:32px}
@media(max-width:700px){.odette-brand-board{grid-template-columns:1fr;gap:24px}.odette-signatures{gap:14px}.odette-mark-stage{height:210px}.odette-arabic-signature{font-size:28px}.odette-board-note{gap:12px}.odette-case-copy{grid-template-columns:1fr;gap:18px}.odette-palette{gap:9px}.odette-palette li>span{height:50px}.odette-palette small{font-size:9px}.odette-website-grid{grid-template-columns:1fr;gap:28px}.odette-phone-view{width:72%;max-width:320px;justify-self:center}.odette-case{margin-block:55px;scroll-margin-top:24px}}
@media(prefers-reduced-motion:reduce){.odette-mark-stage:not([data-user-play=true]) .dd-mark>span{animation:none}.odette-mark-stage:not([data-user-play=true]) .dd-front{left:17%;top:28%;color:#fff;z-index:2}.odette-mark-stage:not([data-user-play=true]) .dd-back{left:38%;top:7%;color:#b7c6ff;z-index:1}}

.odette-signature,.odette-arabic-signature{color:inherit;text-decoration:none}.odette-signature:focus-visible,.odette-arabic-signature:focus-visible{outline:2px solid #385BF6;outline-offset:6px;border-radius:3px}