/* Alsabbagh & Associates — theme stylesheet */ @font-face{font-family:"Ghroob";src:url(../fonts/ghroob-nastaliq-light.woff2) format("woff2");font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:"Ghroob";src:url(../fonts/ghroob-nastaliq-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Ghroob";src:url(../fonts/ghroob-nastaliq-medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:"Ghroob";src:url(../fonts/ghroob-nastaliq-semibold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Ghroob";src:url(../fonts/ghroob-nastaliq-bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Ghroob";src:url(../fonts/ghroob-nastaliq-extrabold.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:"Ghroob";src:url(../fonts/ghroob-nastaliq-black.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap} :root{ --brand:#3D441E;--brand-50:#999C87;--brand-20:#D5D6CD;--brand-deep:#2C321A; --tint:#DCD59A;--tint-50:#EEEACC;--tint-20:#F8F6EA; --burgundy:#8E1537;--burgundy-50:#CD8E94;--burgundy-20:#ECD1D3;--burgundy-deep:#6E0F2B; --stone:#D7D2C5;--brand-rgb:61,68,30;--brand-deep-rgb:44,50,26;--tint-rgb:220,213,154;--stone-50:#EBE8E2;--stone-20:#F7F6F3; --paper:#F7F6F3;--ink:#1E2212;--ink-70:rgba(30,34,18,.72); --font:"Ghroob",system-ui,-apple-system,"Segoe UI",Arial,sans-serif; --wrap:1480px;--gutter:clamp(20px,5vw,72px);--radius:24px; --ease:cubic-bezier(.77,0,.18,1);--ease-out:cubic-bezier(.16,1,.3,1); --sec:clamp(80px,10vw,150px); } /* ---------- Base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums} img,svg,iframe,video{display:block;max-width:100%} img{height:auto} a{color:inherit} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0} h1,h2,h3,h4,p,ul,ol,figure,blockquote{margin:0} ul,ol{padding:0;list-style:none} ::selection{background:var(--burgundy);color:var(--stone-20)} :focus-visible{outline:2px solid var(--burgundy);outline-offset:3px} .sa-wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto} .sa-skip{position:absolute;inset-inline-start:16px;top:-80px;z-index:2000;background:var(--brand);color:var(--tint);padding:10px 16px;border-radius:8px;text-decoration:none} .sa-skip:focus{top:16px} .sa-main{position:relative;z-index:1} /* ---------- Type ---------- */ .sa-kicker{font-size:.78rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--burgundy);display:flex;align-items:center;gap:12px;margin-bottom:20px} .sa-kicker::before{content:"";width:7px;height:7px;background:currentColor;transform:rotate(45deg);flex:none} .sa-kicker--light{color:var(--tint)} [dir=rtl] .sa-kicker{letter-spacing:0;font-size:.95rem} .sa-h{font-weight:300;line-height:1.12;letter-spacing:-.01em;text-wrap:balance} [dir=rtl] .sa-h{letter-spacing:0;line-height:1.4} .sa-h--md{font-size:clamp(1.9rem,3.4vw,3.2rem);max-width:24ch} .sa-w{display:inline-block} html.sa-js:not(.sa-failed) .sa-w{opacity:.14} /* ---------- Buttons ---------- */ .sa-btn{display:inline-flex;align-items:center;gap:14px;padding:.95em 1.5em .95em 1.75em;border-radius:999px;font-weight:500;font-size:.95rem;text-decoration:none;line-height:1;border:1px solid transparent;transition:background .4s,color .4s,border-color .4s;white-space:nowrap} [dir=rtl] .sa-btn{padding:.95em 1.75em .95em 1.5em} .sa-btn__roll{position:relative;overflow:hidden;display:block;line-height:1.35;margin:-.175em 0} .sa-btn__roll>span{display:block;transition:transform .6s var(--ease)} .sa-btn__roll::after{content:attr(data-label);position:absolute;inset-inline-start:0;top:100%;display:block;transition:transform .6s var(--ease)} .sa-btn:hover .sa-btn__roll>span,.sa-btn:hover .sa-btn__roll::after{transform:translateY(-100%)} .sa-btn__ico{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);transition:transform .5s var(--ease),background .4s;flex:none} .sa-btn__ico svg{width:15px;height:15px} .sa-btn:hover .sa-btn__ico{transform:translateX(3px)} [dir=rtl] .sa-btn:hover .sa-btn__ico{transform:translateX(-3px)} .sa-btn--primary{background:var(--burgundy);color:var(--stone-20)} .sa-btn--primary:hover{background:var(--burgundy-deep)} .sa-btn--khaki{background:var(--tint);color:var(--brand)} .sa-btn--khaki .sa-btn__ico{background:var(--brand);color:var(--tint)} .sa-btn--tint:hover{background:var(--tint-50)} .sa-btn--olive{background:var(--brand);color:var(--tint)} .sa-btn--olive .sa-btn__ico{background:rgba(var(--tint-rgb),.16)} .sa-btn--brand:hover{background:var(--brand-deep)} .sa-btn--ghost{border-color:rgba(var(--tint-rgb),.4);color:var(--tint)} .sa-btn--ghost:hover{border-color:var(--tint);background:rgba(var(--tint-rgb),.08)} .sa-btn--ghost-dark{border-color:rgba(var(--brand-rgb),.35);color:var(--brand)} .sa-btn--ghost-dark .sa-btn__ico{background:rgba(var(--brand-rgb),.08)} .sa-btn--ghost-dark:hover{background:var(--brand);color:var(--tint)} .sa-btn--lg{font-size:1.05rem;padding:1.1em 1.7em 1.1em 2em} .sa-btn--sm{font-size:.85rem;padding:.75em 1.1em .75em 1.3em} .sa-btn--sm .sa-btn__ico{width:24px;height:24px} .sa-btn--block{display:flex;justify-content:space-between;width:100%} [dir=rtl] .sa-ico--arrow{transform:scaleX(-1)} .sa-ico{width:20px;height:20px} /* ---------- Motion initial states (only when JS will reveal them) ---------- */ html.sa-js:not(.sa-failed) [data-reveal]{opacity:0;transform:translateY(36px)} html.sa-js:not(.sa-failed) [data-intro]{opacity:0;transform:translateY(24px)} html.sa-js:not(.sa-failed) [data-intro-line]{transform:translateY(112%)} html.sa-js:not(.sa-failed) [data-intro-visual]{opacity:0;transform:scale(1.12)} html.sa-js:not(.sa-failed) [data-intro-motif]{opacity:0;clip-path:inset(0 0 0 100%)} html[dir=rtl].sa-js:not(.sa-failed) [data-intro-motif]{clip-path:inset(0 100% 0 0)} html.sa-js:not(.sa-failed) [data-slide]{opacity:0} .sa-line{display:block;overflow:hidden;padding:.06em 0 .16em;margin:-.06em 0 -.16em} .sa-line__in{display:block;will-change:transform} /* ---------- Preloader ---------- */ .sa-preloader{position:fixed;inset:0;z-index:1000;background:var(--brand);color:var(--tint);display:flex;align-items:center;justify-content:center} .sa-preloader__inner{display:flex;flex-direction:column;align-items:center;gap:30px} .sa-preloader__mark{width:min(24vw,150px)} .sa-preloader__mark svg{width:100%;height:auto;clip-path:inset(100% 0 0 0)} .sa-preloader__word{width:min(64vw,440px);opacity:0;transform:translateY(12px)} .sa-preloader__word svg{width:100%;height:auto} .sa-preloader__count{position:absolute;inset-inline-end:var(--gutter);bottom:calc(var(--gutter) - 6px);font-size:clamp(3rem,8vw,7rem);font-weight:300;line-height:1;font-variant-numeric:tabular-nums;opacity:.9} .sa-preloader__bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(var(--tint-rgb),.15)} .sa-preloader__bar span{display:block;height:100%;background:var(--tint);transform:scaleX(0);transform-origin:left} [dir=rtl] .sa-preloader__bar span{transform-origin:right} html:not(.sa-js) .sa-preloader,html.sa-failed .sa-preloader,html.sa-returning .sa-preloader{display:none} /* ---------- Curtain (page transitions) ---------- */ .sa-curtain{position:fixed;inset:0;z-index:990;pointer-events:none} .sa-curtain__panel{position:absolute;inset:0;transform:scaleY(0);transform-origin:50% 100%} .sa-curtain__panel--a{background:var(--burgundy)} .sa-curtain__panel--b{background:var(--brand);display:grid;place-items:center} .sa-curtain__mark{width:min(18vw,110px);color:var(--tint);opacity:0} .sa-curtain__mark svg{width:100%;height:auto} html.sa-returning:not(.sa-failed) .sa-curtain__panel{transform:scaleY(1)} html.sa-returning:not(.sa-failed) .sa-curtain__mark{opacity:1} html.sa-failed .sa-curtain,html:not(.sa-js) .sa-curtain{display:none} /* ---------- Progress + cursor ---------- */ .sa-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:980;pointer-events:none} .sa-progress span{display:block;height:100%;background:var(--burgundy);transform:scaleX(0);transform-origin:left} [dir=rtl] .sa-progress span{transform-origin:right} .sa-cursor{position:fixed;inset:0;z-index:1200;pointer-events:none;display:none} html.sa-has-cursor .sa-cursor{display:block} .sa-cursor__dot{position:absolute;top:0;left:0;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#fff;mix-blend-mode:exclusion} .sa-cursor__ring{position:absolute;top:0;left:0;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:1px solid rgba(255,255,255,.9);mix-blend-mode:exclusion;display:grid;place-items:center;transition:width .35s,height .35s,margin .35s,background .35s,border-color .35s} .sa-cursor.is-link .sa-cursor__ring{width:56px;height:56px;margin:-28px 0 0 -28px;background:rgba(255,255,255,.18)} .sa-cursor.is-label .sa-cursor__ring{width:92px;height:92px;margin:-46px 0 0 -46px;background:var(--burgundy);border-color:var(--burgundy);mix-blend-mode:normal} .sa-cursor__label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-20);opacity:0;transition:opacity .3s;white-space:nowrap} .sa-cursor.is-label .sa-cursor__label{opacity:1} [dir=rtl] .sa-cursor__label{letter-spacing:0;font-size:.85rem} html.sa-has-cursor,html.sa-has-cursor a,html.sa-has-cursor button,html.sa-has-cursor summary,html.sa-has-cursor label{cursor:none} /* ---------- Header ---------- */ .sa-header{position:fixed;top:0;left:0;right:0;z-index:900;padding:18px 0;color:var(--tint);transition:transform .6s var(--ease),background .4s,padding .4s,color .3s} .sa-header[data-theme=light]{color:var(--brand)} .sa-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 var(--gutter)} .sa-header.is-scrolled{padding:10px 0;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);background:rgba(var(--brand-rgb),.74)} .sa-header.is-scrolled[data-theme=light]{background:rgba(247,246,243,.8)} .sa-header.is-hidden{transform:translateY(-100%)} html.sa-menu-open .sa-header{color:var(--tint);background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;transform:none} .sa-brand{display:block;color:inherit} .sa-brand__lockup{height:44px;width:auto;transition:height .4s} .sa-header.is-scrolled .sa-brand__lockup{height:36px} .sa-nav ul{display:flex;gap:clamp(18px,2.4vw,36px)} .sa-nav a{text-decoration:none;font-size:.95rem;font-weight:500;display:block;overflow:hidden;position:relative;padding:4px 0} .sa-roll>span{display:block;transition:transform .5s var(--ease)} .sa-roll::after{content:attr(data-label);position:absolute;top:100%;inset-inline-start:0;transition:transform .5s var(--ease)} .sa-roll:hover>span,.sa-roll:hover::after{transform:translateY(-100%)} .sa-nav a.is-current::before{content:"";position:absolute;bottom:0;inset-inline-start:0;width:100%;height:1px;background:currentColor;opacity:.6} .sa-header__actions{display:flex;align-items:center;gap:12px} .sa-lang{text-decoration:none;font-size:.9rem;font-weight:500;padding:9px 14px;border:1px solid currentColor;border-radius:999px;opacity:.85;transition:opacity .3s,background .3s} .sa-lang:hover{opacity:1} .sa-header__cta{font-size:.88rem} .sa-burger{width:44px;height:44px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;position:relative;flex:none} .sa-burger span{position:absolute;width:18px;height:1.5px;background:currentColor;transition:transform .5s var(--ease)} .sa-burger span:first-child{transform:translateY(-3.5px)} .sa-burger span:last-child{transform:translateY(3.5px)} html.sa-menu-open .sa-burger span:first-child{transform:rotate(45deg)} html.sa-menu-open .sa-burger span:last-child{transform:rotate(-45deg)} @media (max-width:1100px){.sa-nav,.sa-header__cta{display:none}} @media (max-width:640px){.sa-brand__lockup,.sa-header.is-scrolled .sa-brand__lockup{height:32px}.sa-lang{padding:7px 11px;font-size:.8rem}.sa-header{padding:14px 0}} /* ---------- Fullscreen menu ---------- */ .sa-menu{position:fixed;inset:0;z-index:890;background:var(--brand);color:var(--tint);clip-path:inset(0 0 100% 0);visibility:hidden;overflow:hidden;transition:clip-path .9s var(--ease),visibility 0s .9s} html.sa-menu-open .sa-menu{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .9s var(--ease)} .sa-menu__motif{position:absolute;right:-6vw;top:-4vw;width:44vw;color:var(--tint);opacity:.22;pointer-events:none} .sa-menu__inner{position:relative;height:100%;display:grid;grid-template-columns:1.25fr .75fr;gap:40px;padding:120px var(--gutter) 48px;align-items:end} .sa-menu__list li{overflow:hidden} .sa-menu__list a{display:flex;align-items:baseline;gap:18px;text-decoration:none;font-size:clamp(2rem,5.2vw,4.6rem);font-weight:300;line-height:1.15;transform:translateY(110%);transition:transform .8s var(--ease) calc(.15s + var(--i)*.06s)} html.sa-menu-open .sa-menu__list a{transform:none} .sa-menu__list small{font-size:.8rem;color:var(--burgundy-50);font-weight:500} .sa-menu__list span{transition:transform .5s var(--ease),color .3s} .sa-menu__list a:hover span{transform:translateX(8px)} [dir=rtl] .sa-menu__list a:hover span{transform:translateX(-8px)} .sa-menu__list a.is-current span{color:var(--tint-50);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em} .sa-menu__meta{display:grid;gap:28px;font-size:.95rem;opacity:0;transform:translateY(20px);transition:opacity .6s .5s,transform .6s .5s} html.sa-menu-open .sa-menu__meta{opacity:1;transform:none} .sa-menu__meta a,.sa-menu__meta span{display:block;color:inherit;text-decoration:none;line-height:1.7} .sa-menu__meta .sa-kicker{color:var(--tint-50);margin-bottom:8px} .sa-menu__lang{font-weight:500;border:1px solid rgba(var(--tint-rgb),.4);border-radius:999px;padding:8px 16px;width:max-content} @media (max-width:860px){.sa-menu__inner{grid-template-columns:1fr;align-items:start;padding-top:96px;overflow:auto}.sa-menu__meta{font-size:.9rem}.sa-menu__list a{font-size:clamp(1.8rem,8vw,2.6rem)}} /* ---------- Hero ---------- */ .sa-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;background:var(--brand);color:var(--tint);overflow:hidden;padding-top:140px} .sa-hero__media{position:absolute;inset:0;z-index:0} .sa-hero__img{width:100%;height:100%;object-fit:cover;object-position:center;transform:scale(1.08)} .sa-hero__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--brand-rgb),.3) 0%,rgba(var(--brand-rgb),.2) 40%,rgba(var(--brand-deep-rgb),.94) 100%),linear-gradient(90deg,rgba(var(--brand-deep-rgb),.72) 0%,rgba(var(--brand-deep-rgb),.05) 65%)} [dir=rtl] .sa-hero__veil{background:linear-gradient(180deg,rgba(var(--brand-rgb),.3) 0%,rgba(var(--brand-rgb),.2) 40%,rgba(var(--brand-deep-rgb),.94) 100%),linear-gradient(270deg,rgba(var(--brand-deep-rgb),.72) 0%,rgba(var(--brand-deep-rgb),.05) 65%)} .sa-hero__motif-wrap{position:absolute;right:-3vw;top:-2vw;width:38vw;color:var(--tint);opacity:.55;z-index:1;pointer-events:none} .sa-hero__motif-wrap svg{width:100%;height:auto} .sa-hero__inner{position:relative;z-index:2;padding-bottom:clamp(40px,5vw,72px)} .sa-hero__title{font-size:clamp(2.6rem,6.2vw,6.2rem);font-weight:300;line-height:1.02;letter-spacing:-.015em;max-width:15ch;margin:8px 0 32px} .sa-hero__title .sa-line:last-child .sa-line__in{font-weight:500} [dir=rtl] .sa-hero__title{letter-spacing:0;line-height:1.28;max-width:18ch} .sa-hero__row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap} .sa-hero__lead{max-width:56ch;font-size:1.1rem;line-height:1.7;opacity:.88;font-weight:300} .sa-hero__actions{display:flex;gap:12px;flex-wrap:wrap} .sa-hero__foot{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:24px;border-top:1px solid rgba(var(--tint-rgb),.18);padding:26px 0 34px} .sa-hero__stats{display:flex;gap:clamp(24px,4vw,64px);flex-wrap:wrap} .sa-hero__stats li{display:grid;gap:2px} .sa-hero__stats b{font-size:clamp(1.6rem,2.4vw,2.3rem);font-weight:300;line-height:1} .sa-hero__stats span{font-size:.8rem;opacity:.7} .sa-scrollcue{display:flex;align-items:center;gap:12px;font-size:.75rem;letter-spacing:.18em;text-transform:uppercase;opacity:.7} [dir=rtl] .sa-scrollcue{letter-spacing:0;font-size:.85rem} .sa-scrollcue i{width:56px;height:1px;background:rgba(var(--tint-rgb),.3);position:relative;overflow:hidden} .sa-scrollcue i::after{content:"";position:absolute;inset:0;background:var(--tint);transform:translateX(-100%);animation:sa-cue 2.2s var(--ease) infinite} @keyframes sa-cue{0%{transform:translateX(-100%)}60%{transform:translateX(100%)}100%{transform:translateX(100%)}} @media (max-width:860px){.sa-hero{padding-top:110px}.sa-hero__motif-wrap{width:72vw;right:-16vw;opacity:.32}.sa-scrollcue{display:none}.sa-hero__foot{padding:20px 0 28px}} /* ---------- Marquee ---------- */ .sa-marquee{background:var(--tint);color:var(--brand);overflow:hidden;padding:20px 0;position:relative;z-index:2} .sa-marquee__track{display:flex;width:max-content;white-space:nowrap;will-change:transform} .sa-marquee__item{font-size:clamp(1.3rem,2.4vw,2.2rem);font-weight:300;padding:0 .9em;display:flex;align-items:center;gap:1.8em} .sa-marquee__item::after{content:"";width:8px;height:8px;background:var(--burgundy);transform:rotate(45deg);flex:none} /* ---------- About teaser ---------- */ .sa-about{padding:var(--sec) 0 clamp(60px,8vw,110px);background:var(--paper)} .sa-about__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,100px);align-items:center} .sa-about__h{font-size:clamp(1.9rem,3.5vw,3.4rem);margin-bottom:28px} .sa-about__copy p{max-width:52ch;font-size:1.05rem;color:var(--ink-70);margin-bottom:32px} .sa-about__media{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--stone)} .sa-about__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.15)} .sa-about__card{position:absolute;inset-inline-start:22px;bottom:22px;background:var(--brand);color:var(--tint);padding:18px 22px;border-radius:16px;display:grid;gap:2px} .sa-about__card b{font-weight:500} .sa-about__card span{font-size:.85rem;opacity:.75} .sa-counters{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:clamp(56px,7vw,100px);padding-top:40px;border-top:1px solid rgba(var(--brand-rgb),.15)} .sa-counters li{display:grid;gap:8px} .sa-counters b{font-size:clamp(2.4rem,4.6vw,4.4rem);font-weight:300;line-height:1;color:var(--brand);font-variant-numeric:tabular-nums} .sa-counters li>span{font-size:.85rem;color:var(--ink-70)} @media (max-width:960px){.sa-about__grid{grid-template-columns:1fr}.sa-counters{grid-template-columns:repeat(2,1fr)}} /* ---------- Practice areas (horizontal) ---------- */ .sa-areas{background:var(--brand);color:var(--tint);overflow:hidden;padding-top:clamp(80px,10vw,140px)} .sa-areas__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(36px,5vw,64px)} .sa-areas__viewport{padding-bottom:clamp(80px,10vw,140px)} .sa-areas__track{display:flex;gap:22px;padding-inline:var(--gutter);width:max-content;will-change:transform} .sa-area{width:clamp(300px,33vw,500px);flex:0 0 auto;display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;background:rgba(var(--tint-rgb),.05);border:1px solid rgba(var(--tint-rgb),.14);color:inherit;text-decoration:none;transition:background .5s,border-color .5s,transform .6s var(--ease-out)} .sa-area:hover{background:rgba(var(--tint-rgb),.1);border-color:rgba(var(--tint-rgb),.3);transform:translateY(-6px)} .sa-area__media{aspect-ratio:4/3;overflow:hidden;background:var(--brand-deep)} .sa-area__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease-out)} .sa-area:hover .sa-area__media img{transform:scale(1.06)} .sa-area__body{padding:26px 26px 30px;display:grid;gap:12px;flex:1;align-content:start} .sa-area__num{font-size:.8rem;letter-spacing:.16em;color:var(--tint-50);opacity:.7} .sa-area h3{font-size:1.7rem;font-weight:500;line-height:1.15} .sa-area p{font-size:.95rem;opacity:.78;line-height:1.6} .sa-area__more{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:500;margin-top:auto;padding-top:10px} .sa-area__more svg{width:14px;height:14px;transition:transform .4s} .sa-area:hover .sa-area__more svg,.sa-other__card:hover .sa-area__more svg{transform:translateX(4px)} [dir=rtl] .sa-area:hover .sa-area__more svg,[dir=rtl] .sa-other__card:hover .sa-area__more svg{transform:translateX(-4px) scaleX(-1)} @media (max-width:1023px){.sa-areas__track{width:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.sa-area{width:auto}} /* ---------- Founder (pinned frame) ---------- */ .sa-founder{background:var(--stone-20);color:var(--ink)} .sa-founder__stage{position:relative;height:100vh;overflow:hidden} .sa-founder__big{position:absolute;top:50%;transform:translateY(-50%);font-size:clamp(4rem,11vw,12rem);font-weight:300;line-height:1;color:var(--brand);white-space:nowrap;pointer-events:none} .sa-founder__big--a{left:5vw} .sa-founder__big--b{right:5vw} .sa-founder__frame{position:absolute;top:18vh;left:50%;width:min(32vw,460px);height:64vh;border-radius:var(--radius);overflow:hidden;background:var(--stone)} .sa-founder__frame img{width:100%;height:100%;object-fit:cover;object-position:top;transform:scale(1.15)} .sa-founder__text{position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:var(--gutter);width:min(40vw,540px);opacity:0;display:grid;gap:18px;justify-items:start} .sa-founder__text h2{font-size:clamp(1.8rem,3vw,2.8rem);font-weight:300;line-height:1.15} .sa-founder__text p{color:var(--ink-70)} @media (max-width:1023px){ .sa-founder{padding:clamp(72px,9vw,120px) 0} .sa-founder__stage{height:auto;display:grid;gap:32px;padding:0 var(--gutter)} .sa-founder__big{display:none} .sa-founder__frame{position:static;width:min(100%,420px);height:auto;aspect-ratio:4/5} .sa-founder__frame img{transform:none} .sa-founder__text{position:static;transform:none;width:auto;opacity:1} } html.sa-failed .sa-founder__stage{height:auto;display:grid;gap:32px;padding:0 var(--gutter)} html.sa-failed .sa-founder__big{display:none} html.sa-failed .sa-founder__frame{position:static;width:min(100%,420px);height:auto;aspect-ratio:4/5} html.sa-failed .sa-founder__text{position:static;transform:none;width:auto;opacity:1} /* ---------- Team strip ---------- */ .sa-team{padding:var(--sec) 0;background:var(--paper);overflow:hidden} .sa-team__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(36px,5vw,56px)} .sa-team__track{display:flex;gap:20px;width:max-content;padding-inline:var(--gutter);will-change:transform} .sa-team__card{width:clamp(220px,21vw,300px);flex:0 0 auto;text-decoration:none;color:inherit;display:grid;gap:4px;align-content:start} .sa-team__ph{aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--stone);margin-bottom:12px} .sa-team__ph img{width:100%;height:100%;object-fit:cover;object-position:top;filter:grayscale(1);transition:filter .6s,transform 1.2s var(--ease-out)} .sa-team__card:hover .sa-team__ph img{filter:grayscale(0);transform:scale(1.05)} .sa-team__card b{font-weight:500;font-size:1.05rem} .sa-team__card span{font-size:.85rem;color:var(--ink-70)} @media (max-width:767px){.sa-team__track{width:auto;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:8px}.sa-team__card{scroll-snap-align:start;width:min(72vw,280px)}} /* ---------- Clients ---------- */ .sa-logos{padding:var(--sec) 0;background:var(--stone-20);overflow:hidden} .sa-logos__head{margin-bottom:clamp(32px,4vw,56px)} .sa-logos__row{display:flex;align-items:center;gap:clamp(48px,6vw,96px);width:max-content;padding:18px 0;will-change:transform} .sa-logos__row img{height:52px;width:auto;max-width:200px;object-fit:contain;filter:grayscale(1);opacity:.65;mix-blend-mode:multiply;transition:filter .4s,opacity .4s} .sa-logos__row img:hover{filter:grayscale(0);opacity:1} .sa-accred{display:flex;gap:20px;flex-wrap:wrap;margin-top:clamp(32px,4vw,56px)} .sa-accred__item{display:flex;align-items:center;gap:16px;padding:12px 24px 12px 12px;border:1px solid rgba(var(--brand-rgb),.15);border-radius:999px;background:#fff;font-size:.9rem;font-weight:500} [dir=rtl] .sa-accred__item{padding:12px 12px 12px 24px} .sa-accred__item img{height:44px;width:auto} /* ---------- Reviews ---------- */ .sa-reviews{background:var(--brand);color:var(--tint);padding:var(--sec) 0} .sa-reviews__head{margin-bottom:clamp(32px,4vw,56px)} .sa-reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .sa-review{padding:32px;border:1px solid rgba(var(--tint-rgb),.16);border-radius:var(--radius);background:rgba(var(--tint-rgb),.05);display:grid;gap:22px;align-content:start} .sa-review .sa-ico--quote{width:36px;height:36px;color:var(--burgundy-50)} .sa-review blockquote{font-size:1.15rem;font-weight:300;line-height:1.6} .sa-review figcaption{display:flex;align-items:center;gap:14px;margin-top:auto} .sa-review figcaption i{width:44px;height:44px;border-radius:50%;background:var(--burgundy);color:var(--stone-20);display:grid;place-items:center;font-style:normal;font-weight:500;flex:none} .sa-review figcaption b{display:block;font-weight:500} .sa-review figcaption small{opacity:.65;font-size:.8rem} @media (max-width:900px){.sa-reviews__grid{grid-template-columns:1fr}} /* ---------- FAQ + tips ---------- */ .sa-faq{padding:var(--sec) 0;background:var(--paper)} .sa-faq__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(40px,6vw,96px);align-items:start} .sa-faq__list{margin-top:32px;border-top:1px solid rgba(var(--brand-rgb),.15)} .sa-faq__item{border-bottom:1px solid rgba(var(--brand-rgb),.15)} .sa-faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:1.15rem;font-weight:500} .sa-faq__item summary::-webkit-details-marker{display:none} .sa-faq__item summary i{width:34px;height:34px;border-radius:50%;border:1px solid rgba(var(--brand-rgb),.25);display:grid;place-items:center;flex:none;transition:transform .5s var(--ease),background .3s,color .3s} .sa-faq__item summary i svg{width:16px;height:16px} .sa-faq__item[open] summary i{transform:rotate(45deg);background:var(--brand);color:var(--tint)} .sa-faq__item p{padding:0 0 24px;color:var(--ink-70);max-width:62ch} .sa-tips{position:sticky;top:110px;background:var(--brand);color:var(--tint);border-radius:var(--radius);padding:clamp(28px,3vw,40px)} .sa-tips .sa-kicker{color:var(--tint-50)} .sa-tips ol{counter-reset:n;display:grid;gap:16px} .sa-tips li{counter-increment:n;display:flex;gap:16px;line-height:1.55;font-size:.98rem} .sa-tips li::before{content:counter(n,decimal-leading-zero);font-size:.8rem;color:var(--burgundy-50);font-weight:500;flex:none;padding-top:.25em} .sa-tips small{display:block;margin-top:24px;opacity:.6;font-size:.8rem} @media (max-width:960px){.sa-faq__grid{grid-template-columns:1fr}.sa-tips{position:static}} /* ---------- News ---------- */ .sa-news{padding:var(--sec) 0;background:var(--stone-20)} .sa-news__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(32px,4vw,56px)} .sa-newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .sa-newscard{display:grid;gap:14px;align-content:start;padding:28px;border-radius:var(--radius);background:#fff;border:1px solid rgba(var(--brand-rgb),.1);text-decoration:none;color:inherit;transition:transform .5s var(--ease-out),box-shadow .5s} .sa-newscard:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(var(--brand-rgb),.35)} .sa-newscard__meta{display:flex;gap:14px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--burgundy)} [dir=rtl] .sa-newscard__meta{letter-spacing:0;font-size:.9rem} .sa-newscard h3{font-size:1.35rem;font-weight:500;line-height:1.3} .sa-newscard p{color:var(--ink-70);font-size:.95rem} .sa-newscard__more{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;font-weight:500;color:var(--brand);margin-top:auto;padding-top:8px} .sa-newscard__more svg{width:14px;height:14px} .sa-newspage{padding:0 0 var(--sec)} .sa-pagination{display:flex;gap:8px;justify-content:center;margin-top:48px} .sa-pagination a,.sa-pagination span{padding:10px 16px;border-radius:999px;border:1px solid rgba(var(--brand-rgb),.2);text-decoration:none} .sa-pagination .current{background:var(--brand);color:var(--tint)} @media (max-width:900px){.sa-newsgrid{grid-template-columns:1fr}} /* ---------- CTA ---------- */ .sa-cta{position:relative;overflow:hidden;background:var(--burgundy);color:var(--stone-20);padding:var(--sec) 0} .sa-cta__motif{position:absolute;right:-4vw;top:-3vw;width:40vw;color:var(--stone-20);opacity:.14;pointer-events:none} .sa-cta__grid{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,80px);align-items:center} .sa-cta .sa-kicker{color:var(--burgundy-20)} .sa-cta__h{font-size:clamp(2rem,4vw,3.8rem);margin-bottom:22px} .sa-cta p{max-width:52ch;opacity:.85} .sa-cta__actions{display:grid;gap:24px;justify-items:start} .sa-cta__lines{display:grid;gap:8px} .sa-cta__lines a{display:inline-flex;align-items:center;gap:12px;text-decoration:none;font-size:1.1rem;font-weight:500} .sa-cta__lines svg{width:20px;height:20px;opacity:.8} @media (max-width:900px){.sa-cta__grid{grid-template-columns:1fr}} /* ---------- Footer ---------- */ .sa-footer{background:var(--brand);color:var(--tint);padding:clamp(56px,7vw,96px) 0 28px;overflow:hidden} .sa-footer__word{overflow:hidden;padding:0 var(--gutter);margin-bottom:clamp(40px,6vw,80px)} .sa-footer__word-in svg{width:100%;height:auto;opacity:.9} .sa-footer__grid{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.3fr;gap:clamp(32px,4vw,64px);padding-top:clamp(40px,5vw,64px);border-top:1px solid rgba(var(--tint-rgb),.18)} .sa-footer .sa-kicker{color:var(--tint-50);margin-bottom:16px} .sa-footer__brand p{font-size:.95rem;opacity:.8;max-width:38ch;margin:20px 0 24px;line-height:1.7} .sa-footer__lockup{width:min(100%,220px)} .sa-footer__social{display:flex;gap:10px} .sa-footer__social a{width:42px;height:42px;border-radius:50%;border:1px solid rgba(var(--tint-rgb),.3);display:grid;place-items:center;transition:background .3s,color .3s} .sa-footer__social a:hover{background:var(--tint);color:var(--brand)} .sa-footer__social svg{width:18px;height:18px} .sa-footer__links{display:grid;gap:10px} .sa-footer__links a{text-decoration:none;opacity:.85;transition:opacity .3s} .sa-footer__links a:hover{opacity:1;text-decoration:underline;text-underline-offset:.2em} .sa-footer__contact{display:grid;gap:14px;margin-bottom:28px} .sa-footer__contact li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem} .sa-footer__contact svg{width:18px;height:18px;flex:none;margin-top:4px;opacity:.7} .sa-footer__contact a{text-decoration:none;opacity:.9} .sa-footer__hours{display:grid;gap:8px;font-size:.9rem} .sa-footer__hours li{display:flex;justify-content:space-between;gap:12px;opacity:.85} .sa-footer__bar{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(40px,5vw,64px);padding-top:24px;border-top:1px solid rgba(var(--tint-rgb),.18);font-size:.8rem;opacity:.7} @media (max-width:960px){.sa-footer__grid{grid-template-columns:1fr 1fr}} @media (max-width:600px){.sa-footer__grid{grid-template-columns:1fr}} /* ---------- Inner page hero ---------- */ .sa-phero{position:relative;overflow:hidden;background:var(--paper);color:var(--ink);padding:calc(120px + 4vw) 0 clamp(48px,6vw,88px)} .sa-phero__motif{position:absolute;right:-6vw;top:-6vw;width:40vw;color:var(--brand);opacity:.1;pointer-events:none} .sa-crumbs{display:flex;gap:10px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--burgundy);margin-bottom:28px} .sa-crumbs a{text-decoration:none} .sa-crumbs span{opacity:.7} [dir=rtl] .sa-crumbs{letter-spacing:0;font-size:.9rem} .sa-phero__title{font-size:clamp(2.4rem,5.6vw,5.4rem);font-weight:300;line-height:1.04;letter-spacing:-.015em;max-width:18ch;position:relative} [dir=rtl] .sa-phero__title{letter-spacing:0;line-height:1.3} .sa-phero__title--sm{font-size:clamp(2rem,4vw,3.6rem);max-width:26ch} .sa-phero__lead{max-width:60ch;font-size:1.15rem;line-height:1.7;color:var(--ink-70);margin-top:28px} .sa-phero__row{display:flex;justify-content:space-between;align-items:flex-end;gap:32px} .sa-phero__ico{width:96px;height:96px;border-radius:50%;background:var(--brand);color:var(--tint);display:grid;place-items:center;flex:none} .sa-phero__ico svg{width:40px;height:40px} .sa-phero--404{min-height:80vh} .sa-phero--404 [data-intro]{margin-top:24px} @media (max-width:640px){.sa-phero__ico{display:none}} /* ---------- About page ---------- */ .sa-story{padding:clamp(40px,6vw,80px) 0 var(--sec)} .sa-story__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(40px,6vw,96px);align-items:start} .sa-story__media{position:sticky;top:100px;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;background:var(--stone)} .sa-story__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.15)} .sa-story__copy .sa-h{margin-bottom:8px} .sa-story__copy p{color:var(--ink-70);margin-top:22px;font-size:1.05rem;max-width:60ch} .sa-mv{padding:0 0 var(--sec)} .sa-mv__grid{display:grid;grid-template-columns:1fr 1fr;gap:20px} .sa-mv__panel{padding:clamp(32px,4vw,56px);border-radius:var(--radius);display:grid;gap:18px;align-content:start} .sa-mv__panel h3{font-size:clamp(1.5rem,2.4vw,2.2rem);font-weight:300;line-height:1.2} .sa-mv__panel p{opacity:.85} .sa-mv__panel--olive{background:var(--brand);color:var(--tint);border-end-end-radius:120px} .sa-mv__panel--burgundy{background:var(--burgundy);color:var(--stone-20);border-start-start-radius:120px} .sa-values{padding:0 0 var(--sec)} .sa-values__head{margin-bottom:clamp(32px,4vw,56px)} .sa-stack{display:grid;gap:20px} .sa-stack__card{position:sticky;top:calc(110px + var(--i)*14px);background:#fff;border:1px solid rgba(var(--brand-rgb),.12);border-radius:var(--radius);padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;gap:12px 28px;align-items:start;transform-origin:top center;min-height:240px} .sa-stack__num{grid-row:1/3;font-size:.85rem;letter-spacing:.14em;color:var(--burgundy);padding-top:.5em} .sa-stack__ico{grid-row:1/3;width:56px;height:56px;border-radius:50%;background:var(--stone-20);display:grid;place-items:center;color:var(--brand)} .sa-stack__ico svg{width:24px;height:24px} .sa-stack__card h3{grid-column:3;font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:300;line-height:1.1} .sa-stack__card p{grid-column:3;color:var(--ink-70);max-width:60ch} @media (max-width:900px){.sa-story__grid,.sa-mv__grid{grid-template-columns:1fr}.sa-story__media{position:static;aspect-ratio:4/3}.sa-stack__card{grid-template-columns:auto 1fr}.sa-stack__ico{display:none}.sa-stack__card h3,.sa-stack__card p{grid-column:2}} /* ---------- Services page ---------- */ .sa-solutions{padding:clamp(40px,6vw,80px) 0 var(--sec)} .sa-solutions__grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(40px,6vw,96px);align-items:start} .sa-list{counter-reset:n;display:grid;grid-template-columns:1fr 1fr;gap:0 40px;border-top:1px solid rgba(var(--brand-rgb),.15)} .sa-list li{counter-increment:n;display:flex;gap:18px;padding:20px 0;border-bottom:1px solid rgba(var(--brand-rgb),.12);line-height:1.55} .sa-list li::before{content:counter(n,decimal-leading-zero);font-size:.8rem;color:var(--burgundy);font-weight:500;flex:none;padding-top:.3em} .sa-svc{padding:0 0 var(--sec)} .sa-svc__head{margin-bottom:clamp(32px,4vw,56px)} .sa-svc__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,96px);align-items:start} .sa-svc__stage{position:sticky;top:100px;height:calc(100vh - 140px);border-radius:var(--radius);overflow:hidden;background:var(--brand)} .sa-svc__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .8s,transform 1.4s var(--ease-out)} .sa-svc__img.is-active{opacity:1;transform:none} .sa-svc__label{position:absolute;inset-inline-start:28px;bottom:28px;background:rgba(var(--brand-rgb),.85);color:var(--tint);padding:14px 20px;border-radius:14px;display:flex;gap:14px;align-items:baseline;backdrop-filter:blur(8px)} .sa-svc__label b{font-weight:300;font-size:1.6rem;line-height:1} .sa-svc__label span{font-weight:500} .sa-svc__item{padding:clamp(40px,5vw,72px) 0;border-top:1px solid rgba(var(--brand-rgb),.15);display:grid;gap:18px;justify-items:start} .sa-svc__num{font-size:.8rem;letter-spacing:.14em;color:var(--burgundy)} .sa-svc__item h3{font-size:clamp(1.8rem,3vw,2.8rem);font-weight:300;line-height:1.1} .sa-svc__mobimg{display:none;aspect-ratio:16/10;border-radius:18px;overflow:hidden;width:100%} .sa-svc__mobimg img{width:100%;height:100%;object-fit:cover} @media (max-width:960px){.sa-solutions__grid,.sa-svc__grid{grid-template-columns:1fr}.sa-list{grid-template-columns:1fr}.sa-svc__stage{display:none}.sa-svc__mobimg{display:block}} .sa-other{background:var(--brand);color:var(--tint);padding:var(--sec) 0} .sa-other__head{margin-bottom:clamp(32px,4vw,56px)} .sa-other__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .sa-other__card{display:grid;gap:14px;align-content:start;padding:32px;border-radius:var(--radius);border:1px solid rgba(var(--tint-rgb),.16);background:rgba(var(--tint-rgb),.05);color:inherit;text-decoration:none;transition:background .4s,transform .5s var(--ease-out)} .sa-other__card:hover{background:rgba(var(--tint-rgb),.1);transform:translateY(-6px)} .sa-other__ico{width:52px;height:52px;border-radius:50%;background:var(--tint);color:var(--brand);display:grid;place-items:center} .sa-other__ico svg{width:22px;height:22px} .sa-other__card h3{font-size:1.5rem;font-weight:500} .sa-other__card p{opacity:.8;font-size:.95rem} .sa-other__card--note{background:var(--burgundy);border-color:transparent;color:var(--stone-20);align-content:center;font-size:1.05rem} .sa-other__card--note:hover{background:var(--burgundy);transform:none} @media (max-width:900px){.sa-other__grid{grid-template-columns:1fr}} /* ---------- Single service / article ---------- */ .sa-single{padding:0 0 var(--sec)} .sa-single__media{aspect-ratio:16/7;border-radius:var(--radius);overflow:hidden;background:var(--stone);margin-bottom:clamp(40px,6vw,80px)} .sa-single__media img{width:100%;height:100%;object-fit:cover;transform:scale(1.12)} .sa-single__grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(40px,6vw,96px);align-items:start} .sa-single__aside{position:sticky;top:100px;background:#fff;border:1px solid rgba(var(--brand-rgb),.12);border-radius:var(--radius);padding:28px;display:grid;gap:20px} .sa-single__list a{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px solid rgba(var(--brand-rgb),.1);text-decoration:none;font-weight:500;transition:color .3s} .sa-single__list small{font-size:.75rem;color:var(--burgundy);letter-spacing:.1em} .sa-single__list a.is-current,.sa-single__list a:hover{color:var(--burgundy)} .sa-prose{font-size:1.05rem;line-height:1.75} .sa-prose p{margin-bottom:1.2em;color:var(--ink-70)} .sa-prose p:last-child{margin-bottom:0} .sa-prose h2,.sa-prose h3{font-weight:500;margin:1.6em 0 .6em;line-height:1.25} .sa-prose h2{font-size:1.8rem} .sa-prose h3{font-size:1.35rem} .sa-prose ul,.sa-prose ol{padding-inline-start:1.3em;margin-bottom:1.2em;color:var(--ink-70)} .sa-prose ul{list-style:disc} .sa-prose ol{list-style:decimal} .sa-prose li{margin-bottom:.4em} .sa-prose a{color:var(--burgundy)} .sa-prose--lg{font-size:1.12rem} .sa-article{padding:0 0 var(--sec)} .sa-article__body{max-width:800px} .sa-article__foot{margin-top:48px} .sa-article .sa-single__media{max-width:1000px;aspect-ratio:16/8} @media (max-width:900px){.sa-single__grid{grid-template-columns:1fr}.sa-single__aside{position:static}.sa-single__media{aspect-ratio:16/10}} /* ---------- Team page ---------- */ .sa-teampage{padding:0 0 var(--sec)} .sa-lead{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(32px,5vw,80px);align-items:center;background:var(--brand);color:var(--tint);border-radius:var(--radius);padding:clamp(24px,3vw,40px);margin-bottom:clamp(40px,5vw,72px)} .sa-lead__ph{aspect-ratio:4/5;border-radius:18px;overflow:hidden} .sa-lead__ph img{width:100%;height:100%;object-fit:cover;object-position:top} .sa-lead__body{display:grid;gap:16px} .sa-lead .sa-kicker{color:var(--tint-50);margin-bottom:0} .sa-lead h2{font-size:clamp(2rem,3.6vw,3.4rem);font-weight:300;line-height:1.1} .sa-member__creds ul{display:grid;gap:8px} .sa-member__creds li{display:flex;gap:10px;font-size:.92rem;line-height:1.5;opacity:.85} .sa-member__creds li::before{content:"";width:6px;height:6px;background:var(--burgundy-50);transform:rotate(45deg);flex:none;margin-top:.55em} .sa-member__creds--lg li{font-size:1rem} .sa-teamgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .sa-member{background:#fff;border:1px solid rgba(var(--brand-rgb),.1);border-radius:var(--radius);overflow:hidden;display:grid;align-content:start} .sa-member__ph{aspect-ratio:1;overflow:hidden;background:var(--stone)} .sa-member__ph img{width:100%;height:100%;object-fit:cover;object-position:top;filter:grayscale(1);transition:filter .6s,transform 1.2s var(--ease-out)} .sa-member:hover .sa-member__ph img{filter:grayscale(0);transform:scale(1.04)} .sa-member__body{padding:22px 24px 26px;display:grid;gap:8px} .sa-member__name{font-size:1.3rem;font-weight:500} .sa-member__role{font-size:.8rem;color:var(--burgundy);letter-spacing:.08em;text-transform:uppercase} [dir=rtl] .sa-member__role{letter-spacing:0;font-size:.9rem} .sa-member .sa-member__creds li::before{background:var(--burgundy)} @media (max-width:960px){.sa-teamgrid{grid-template-columns:1fr 1fr}.sa-lead{grid-template-columns:1fr}.sa-lead__ph{max-width:420px}} @media (max-width:600px){.sa-teamgrid{grid-template-columns:1fr}} /* ---------- Contact ---------- */ .sa-contact{padding:0 0 var(--sec)} .sa-contact__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,4vw,56px);align-items:start;margin-bottom:clamp(32px,4vw,56px)} .sa-form{position:relative;background:#fff;border:1px solid rgba(var(--brand-rgb),.12);border-radius:var(--radius);padding:clamp(24px,3.5vw,48px);display:grid;gap:22px;justify-items:start} .sa-form__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .sa-form__row{display:grid;grid-template-columns:1fr 1fr;gap:22px;width:100%} .sa-form label{display:grid;gap:8px;font-size:.85rem;font-weight:500;color:var(--ink-70);width:100%} .sa-form input,.sa-form select,.sa-form textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--stone-20);border:1px solid rgba(var(--brand-rgb),.15);border-radius:12px;padding:14px 16px;width:100%;transition:border-color .3s,background .3s} .sa-form input:focus,.sa-form select:focus,.sa-form textarea:focus{border-color:var(--brand);background:#fff;outline:none} .sa-form textarea{resize:vertical;min-height:150px} .sa-form small{font-size:.8rem;color:var(--ink-70);opacity:.8} .sa-form__note{padding:14px 18px;border-radius:12px;font-size:.95rem;width:100%} .sa-form__note.is-ok{background:var(--tint-20);color:var(--brand);border:1px solid var(--tint)} .sa-form__note.is-err{background:var(--burgundy-20);color:var(--burgundy);border:1px solid var(--burgundy-50)} .sa-contact__info{background:var(--brand);color:var(--tint);border-radius:var(--radius);padding:clamp(24px,3.5vw,44px);display:grid;gap:12px} .sa-contact__info .sa-kicker{color:var(--tint-50);margin-bottom:8px} .sa-contact__info ul{display:grid;gap:16px;margin-bottom:20px} .sa-contact__info li{display:flex;gap:12px;align-items:flex-start;line-height:1.5} .sa-contact__info svg{width:20px;height:20px;flex:none;margin-top:3px;opacity:.75} .sa-contact__info a{text-decoration:none} .sa-contact__hours li{justify-content:space-between} .sa-contact__portal{display:inline-flex;align-items:center;gap:10px;font-weight:500;text-decoration:none;border-top:1px solid rgba(var(--tint-rgb),.2);padding-top:22px;margin-top:4px;width:100%} .sa-contact__portal svg{width:16px;height:16px} .sa-map{border-radius:var(--radius);overflow:hidden;aspect-ratio:16/6;background:var(--stone)} .sa-map iframe{width:100%;height:100%;border:0;filter:grayscale(.35) sepia(.15)} @media (max-width:960px){.sa-contact__grid,.sa-form__row{grid-template-columns:1fr}.sa-map{aspect-ratio:4/3}} @media (prefers-reduced-motion:reduce){.sa-scrollcue i::after{animation:none}*{transition-duration:.01ms!important}} /* ---------- Review fixes ---------- */ .sa-hero__title{font-size:clamp(2.4rem,5.3vw,5.6rem);max-width:17ch} [dir=rtl] .sa-hero__title{max-width:20ch} [dir=rtl] .sa-hero__motif-wrap,[dir=rtl] .sa-phero__motif,[dir=rtl] .sa-cta__motif,[dir=rtl] .sa-menu__motif{right:auto;transform:scaleX(-1)} [dir=rtl] .sa-hero__motif-wrap{left:-3vw} [dir=rtl] .sa-phero__motif{left:-6vw} [dir=rtl] .sa-cta__motif{left:-4vw} [dir=rtl] .sa-menu__motif{left:-6vw} [data-theme=dark] .sa-kicker{color:var(--tint-50)} .sa-cta .sa-kicker{color:var(--burgundy-20)} .sa-btn__roll{clip-path:inset(0)} /* ---------- Palette: olive + khaki only (burgundy retired) ---------- */ ::selection{background:var(--brand);color:var(--tint)} :focus-visible{outline-color:var(--brand)} .sa-kicker{color:var(--brand)} .sa-kicker--light,[data-theme=dark] .sa-kicker{color:var(--tint)} .sa-btn--primary{background:var(--tint);color:var(--brand)} .sa-btn--primary .sa-btn__ico{background:var(--brand);color:var(--tint)} .sa-btn--primary:hover{background:var(--tint-50)} [data-theme=light] .sa-btn--primary{background:var(--brand);color:var(--tint)} [data-theme=light] .sa-btn--primary .sa-btn__ico{background:rgba(var(--tint-rgb),.16);color:inherit} [data-theme=light] .sa-btn--primary:hover{background:var(--brand-deep)} html.sa-menu-open .sa-header .sa-btn--primary{background:var(--tint);color:var(--brand)} html.sa-menu-open .sa-header .sa-btn--primary .sa-btn__ico{background:var(--brand);color:var(--tint)} .sa-curtain__panel--a{background:var(--tint)} .sa-progress span{background:var(--tint)} html[data-nav=light] .sa-progress span{background:var(--brand)} .sa-marquee__item::after{background:var(--brand)} .sa-menu__list small{color:var(--tint-50)} .sa-review figcaption i{background:var(--tint);color:var(--brand)} .sa-tips li::before{color:var(--tint)} .sa-newscard__meta,.sa-crumbs{color:var(--brand)} .sa-mv__panel--burgundy{background:var(--tint);color:var(--brand)} .sa-mv__panel--burgundy .sa-kicker{color:var(--brand)} .sa-stack__num,.sa-list li::before,.sa-svc__num,.sa-single__list small,.sa-member__role{color:var(--brand)} .sa-other__card--note,.sa-other__card--note:hover{background:var(--tint);color:var(--brand)} .sa-single__list a.is-current,.sa-single__list a:hover{color:var(--brand);text-decoration:underline;text-underline-offset:.2em} .sa-prose a{color:var(--brand)} .sa-member__creds li::before{background:var(--tint)} .sa-member .sa-member__creds li::before{background:var(--brand)} .sa-form__note.is-err{background:var(--tint-20);color:var(--brand);border-color:var(--tint)} .sa-cta{background:var(--tint);color:var(--brand)} .sa-cta__motif{color:var(--brand);opacity:.12} .sa-cta .sa-kicker{color:var(--brand)} .sa-cta p{opacity:.9} /* ---------- Cursor: bolder ---------- */ .sa-cursor__dot{width:10px;height:10px;margin:-5px 0 0 -5px;mix-blend-mode:difference} .sa-cursor__ring{width:46px;height:46px;margin:-23px 0 0 -23px;border-width:1.5px;mix-blend-mode:difference} .sa-cursor.is-link .sa-cursor__ring{width:68px;height:68px;margin:-34px 0 0 -34px;background:rgba(255,255,255,.22)} .sa-cursor.is-label .sa-cursor__ring{width:96px;height:96px;margin:-48px 0 0 -48px;background:var(--tint);border-color:var(--tint);mix-blend-mode:normal} .sa-cursor__label{color:var(--brand)} /* ---------- Practice areas: expanding panels ---------- */ .sa-panels-sec{background:var(--brand);color:var(--tint);padding:var(--sec) 0;overflow:hidden} .sa-panels__head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;margin-bottom:clamp(36px,5vw,64px)} .sa-panels{display:flex;gap:10px;height:min(72vh,720px)} .sa-panel{position:relative;flex:1;min-width:0;border-radius:20px;overflow:hidden;background:var(--brand-deep);transition:flex 1s var(--ease);cursor:pointer;isolation:isolate} .sa-panel.is-active{flex:4.2} .sa-panel>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.15);filter:grayscale(.6) brightness(.55);transition:transform 1.4s var(--ease-out),filter .8s} .sa-panel.is-active>img{transform:scale(1);filter:none} .sa-panel__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(var(--brand-deep-rgb),.05) 30%,rgba(var(--brand-deep-rgb),.9) 100%)} .sa-panel__tab{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:16px;padding:28px 0;color:var(--tint);z-index:2;transition:opacity .4s} .sa-panel__vt{writing-mode:vertical-rl;transform:rotate(180deg);font-size:1.25rem;font-weight:500;white-space:nowrap} .sa-panel.is-active .sa-panel__tab{opacity:0;pointer-events:none} .sa-panel__body{position:absolute;inset:auto 0 0 0;padding:clamp(24px,3vw,44px);z-index:2;display:grid;gap:12px;justify-items:start;opacity:0;transform:translateY(24px);transition:opacity .6s .35s,transform .8s .35s var(--ease-out)} .sa-panel.is-active .sa-panel__body{opacity:1;transform:none} .sa-panel__num{font-size:.8rem;letter-spacing:.16em;color:var(--tint-50)} [dir=rtl] .sa-panel__num{letter-spacing:0} .sa-panel__body h3{font-size:clamp(1.8rem,3vw,2.8rem);font-weight:500;line-height:1.1} .sa-panel__body p{max-width:46ch;opacity:.85} .sa-panel__link{display:inline-flex;gap:8px;align-items:center;font-weight:500;text-decoration:none;font-size:.9rem;border-bottom:1px solid rgba(var(--tint-rgb),.5);padding-bottom:2px} .sa-panel__link svg{width:14px;height:14px} @media (max-width:860px){.sa-panels{flex-direction:column;height:auto}.sa-panel,.sa-panel.is-active{flex:none;aspect-ratio:16/10}.sa-panel__tab{display:none}.sa-panel__body{opacity:1;transform:none}.sa-panel>img{transform:none;filter:none}} html.sa-failed .sa-panel__body{opacity:1;transform:none} /* ---------- Leadership: wipe-in portrait + drifting name ---------- */ .sa-leader{background:var(--stone-20);padding:var(--sec) 0 0;overflow:hidden;position:relative} .sa-leader__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,7vw,120px);align-items:center;padding-bottom:clamp(40px,5vw,72px)} .sa-leader__media{position:relative} .sa-leader__motif{position:absolute;right:-22%;top:-16%;width:78%;color:var(--brand);opacity:.16;pointer-events:none} [dir=rtl] .sa-leader__motif{right:auto;left:-22%;transform:scaleX(-1)} .sa-leader__frame{position:relative;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--stone)} html.sa-js:not(.sa-failed) .sa-leader__frame{clip-path:inset(0 100% 0 0 round 24px)} html[dir=rtl].sa-js:not(.sa-failed) .sa-leader__frame{clip-path:inset(0 0 0 100% round 24px)} .sa-leader__frame img{width:100%;height:100%;object-fit:cover;object-position:top;transform:scale(1.2)} .sa-leader__badge{position:absolute;inset-inline-end:-14px;bottom:36px;background:var(--tint);color:var(--brand);padding:18px 22px;border-radius:16px;display:grid;gap:2px;box-shadow:0 30px 50px -30px rgba(var(--brand-rgb),.5)} .sa-leader__badge b{font-size:2rem;font-weight:300;line-height:1} .sa-leader__badge span{font-size:.8rem} .sa-leader__copy{display:grid;gap:22px;justify-items:start} .sa-leader__copy p{color:var(--ink-70);max-width:56ch} .sa-leader__list ul{display:grid;width:100%} .sa-leader__list li{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-top:1px solid rgba(var(--brand-rgb),.14);font-size:.98rem} .sa-leader__list li::before{content:"";width:8px;height:8px;background:var(--tint);border:1px solid var(--brand);transform:rotate(45deg);flex:none;margin-top:.5em} .sa-leader__name{white-space:nowrap;font-size:clamp(4rem,12vw,13rem);font-weight:300;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(var(--brand-rgb),.35);display:flex;gap:.5em;will-change:transform;padding-bottom:.08em} @media (max-width:900px){.sa-leader__grid{grid-template-columns:1fr}.sa-leader__frame{max-width:460px}} /* ---------- Services page: accordion rows ---------- */ .sa-srows{padding:0 0 var(--sec)} .sa-srows__list{border-top:1px solid rgba(var(--brand-rgb),.15)} .sa-srow{border-bottom:1px solid rgba(var(--brand-rgb),.15)} .sa-srow__head{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:clamp(16px,3vw,40px);width:100%;padding:clamp(22px,3vw,34px) 0;text-align:start} .sa-srow__num{font-size:.85rem;letter-spacing:.14em;color:var(--brand);opacity:.7;min-width:2.5em} [dir=rtl] .sa-srow__num{letter-spacing:0} .sa-srow__title{font-size:clamp(1.8rem,3.6vw,3.4rem);font-weight:300;line-height:1.05;transition:transform .6s var(--ease)} .sa-srow__head:hover .sa-srow__title,.sa-srow.is-open .sa-srow__title{transform:translateX(12px)} [dir=rtl] .sa-srow__head:hover .sa-srow__title,[dir=rtl] .sa-srow.is-open .sa-srow__title{transform:translateX(-12px)} .sa-srow__hint{font-size:.9rem;color:var(--ink-70);max-width:28ch;text-align:end} .sa-srow__ico{width:44px;height:44px;border-radius:50%;border:1px solid rgba(var(--brand-rgb),.25);display:grid;place-items:center;transition:transform .6s var(--ease),background .3s,color .3s} .sa-srow__ico svg{width:18px;height:18px} .sa-srow.is-open .sa-srow__ico{transform:rotate(45deg);background:var(--brand);color:var(--tint)} .sa-srow__body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .9s var(--ease)} .sa-srow.is-open .sa-srow__body{grid-template-rows:1fr} .sa-srow__inner{overflow:hidden;min-height:0} .sa-srow__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,4vw,56px);padding:8px 0 clamp(32px,4vw,56px);align-items:start} .sa-srow__img{aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:var(--stone)} .sa-srow__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);transition:transform 1.4s var(--ease-out)} .sa-srow.is-open .sa-srow__img img{transform:none} .sa-srow__text{display:grid;gap:20px;justify-items:start} @media (max-width:860px){.sa-srow__head{grid-template-columns:auto 1fr auto}.sa-srow__hint{display:none}.sa-srow__grid{grid-template-columns:1fr}} html.sa-failed .sa-srow__body{grid-template-rows:1fr} /* ---------- Page transition: diagonal wipe ---------- */ .sa-curtain__panel{transform:none;clip-path:polygon(-40% 0%,-20% 0%,-40% 100%,-60% 100%)} [dir=rtl] .sa-curtain__panel{clip-path:polygon(140% 0%,120% 0%,140% 100%,160% 100%)} html.sa-returning:not(.sa-failed) .sa-curtain__panel{transform:none;clip-path:polygon(-40% 0%,140% 0%,120% 100%,-60% 100%)} .sa-curtain__mark{width:min(20vw,130px)} .sa-hero__title{font-size:clamp(2.3rem,5vw,5.2rem);max-width:none} [dir=rtl] .sa-hero__title{max-width:none} /* Native