@font-face {
  font-family: 'Saans';
  src: url('../fonts/Saans-Regular.woff2') format('woff2'),
       url('../fonts/Saans-Regular.woff') format('woff');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Saans';
  src: url('../fonts/Saans-SemiBold.woff2') format('woff2'),
       url('../fonts/Saans-SemiBold.woff') format('woff');
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --beige: #f2eeeb;
  --blue: #1b07aa;
  --yellow: #e2dc27;
  --black: #202020;
  --violet: #5e47ff;
  --gutter: 36px;
  --header-h: 149px;
  --footer-fade-h: 400px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--beige); }
body { margin: 0; color: var(--black); background: var(--beige); font-family: 'Saans', Arial, Helvetica, sans-serif; font-size: 16px; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
p, h1, h2, h3 { margin-top: 0; }
main { overflow-x: clip; overflow-y: visible; }
.rich-copy p { margin: 0 0 1.25em; }
.rich-copy h2 { margin: 3rem 0 1.4rem; font-size: 12px; line-height: 1.4; text-transform: uppercase; letter-spacing: .06em; }

.site-header { position: fixed; z-index: 50; inset: 0 0 auto; height: var(--header-h); padding: 49px var(--gutter) 42px; display: grid; grid-template-columns: 180px 1fr 42px; align-items: center; background: transparent; }
.site-header::before { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(to bottom, rgba(242,238,235,.98) 0 68%, rgba(242,238,235,0)); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
.site-header.is-scrolled::before { opacity: 1; }
body:not(.template-home) main { padding-top: var(--header-h); }
.brand { display: flex; align-items: center; width: 171px; height: 52px; }
.brand-mark { position: relative; width: 53px; height: 51px; flex: 0 0 53px; }
.brand-mark img, .brand-name, .brand-sub { width: 100%; height: 100%; }
.brand-type { width: 109px; height: 51px; margin-left: 9px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.brand-name { width: 109px; height: auto; }
.brand-sub { width: 64px; height: auto; margin-top: 1px; }
.main-nav { display: flex; align-items: center; justify-content: center; gap: clamp(46px, 8vw, 117px); font-weight: 600; }
.main-nav a { position: relative; white-space: nowrap; }
.main-nav a:hover::before, .main-nav a.is-active::before, .main-nav a[aria-current="page"]::before { content: ''; position: absolute; left: -17px; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); transform: translateY(-50%); }
.language { justify-self: end; display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--yellow); border-radius: 50%; color: var(--blue); font-weight: 600; }
.menu-toggle { display: none; }

.shape { position: absolute; pointer-events: none; user-select: none; }
.hero { position: relative; height: 851px; min-height: calc(100vh - var(--header-h)); }
.hero-content { position: absolute; z-index: 3; left: var(--gutter); top: 165px; }
.hero h1 { margin: 0; font-size: clamp(64px, 6.53vw, 94px); line-height: 1.05; letter-spacing: -.025em; font-weight: 400; }
.hero h1 span, .hero h1 strong { display: block; }
.hero h1 strong { font-weight: 600; }
.hero-content > p { margin: 32px 0 30px; font-size: 32px; line-height: 1.4; }
.shape--hero-yellow { left: -333px; top: 0; width: 749px; height: 730px; filter: blur(2px); }
.shape--hero-blue { right: -265px; top: 180px; width: 631px; height: 631px; }
.shape--hero-ring { right: 56px; top: 226px; width: 479px; height: 479px; }
.hero-outline { position: absolute; left: 48.2%; top: 42px; width: 480px; height: 462px; clip-path: polygon(50% 0,90% 21%,100% 65%,73% 100%,27% 100%,0 65%,10% 21%); border: 1px solid var(--yellow); }
.hero-outline::after { content: ''; position: absolute; inset: 2px; background: var(--beige); clip-path: inherit; }
.pill-button { position: relative; display: inline-flex; align-items: center; height: 47px; border: 3px solid currentColor; border-color: var(--blue); border-radius: 0 24px 24px 0; padding: 0 8px 0 14px; gap: 12px; font-weight: 600; line-height: 1; transition: background .2s, color .2s; }
.pill-button i { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: var(--yellow); color: var(--blue); font-size: 21px; font-style: normal; }
.pill-button:hover { background: var(--blue); color: var(--beige); }

.section { position: relative; padding: 58px var(--gutter); scroll-margin-top: 100px; }
.section-title { display: flex; align-items: center; gap: 14px; }
.section-title i { width: 38px; height: 38px; border: 3px solid var(--blue); border-radius: 50%; }
.section-title h2 { margin: 0; font-size: 54px; line-height: 1.05; letter-spacing: -.035em; }
.cabinet-section { min-height: 612px; display: grid; grid-template-columns: 33.333% 1fr; align-items: start; padding-top: 59px; }
.cabinet-copy { grid-column: 2; max-width: 900px; font-size: 28px; line-height: 1.5; }
.cabinet-copy p { position: relative; z-index: 1; }
.cabinet-copy p::before, .cabinet-copy p::after { content: ''; position: absolute; z-index: -1; left: -6px; height: 18px; background: var(--yellow); }
.cabinet-copy p::before { width: 42%; top: 65px; }
.cabinet-copy p::after { width: 45%; top: 319px; }

.profile-section { min-height: 890px; display: grid; grid-template-columns: 50% 50%; align-items: center; }
.portrait-composition { position: relative; width: 570px; height: 570px; margin-left: 45px; }
.portrait-disc { position: absolute; left: 0; bottom: 0; width: 489px; height: 489px; border-radius: 50%; background: var(--blue); }
.portrait-mask { position: absolute; left: 140px; top: 0; width: 503px; height: 491px; overflow: hidden; clip-path: polygon(50% 0,90% 20%,100% 64%,73% 100%,28% 100%,0 64%,10% 20%); }
.portrait-mask img { width: 100%; height: 140%; object-fit: cover; transform: scale(1.08); }
.profile-copy { padding-left: 13px; max-width: 570px; }
.profile-copy h2 { max-width: 560px; margin: 0; font-size: 54px; line-height: 1.02; letter-spacing: -.035em; }
.eyebrow { margin: 9px 0 40px; font-weight: 600; }
.profile-copy .rich-copy { line-height: 1.55; }
.profile-copy .pill-button { margin-top: 14px; }

.expertise-section { min-height: 986px; padding-top: 85px; }
.expertise-section > *:not(.shape) { position: relative; z-index: 2; }
.expertise-grid { list-style: none; padding: 52px 0 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); }
.expertise-grid li { position: relative; min-height: 245px; padding-right: 28px; }
.expertise-grid a { display: flex; flex-direction: column; height: 100%; }
.expertise-grid span { color: var(--blue); font-weight: 600; line-height: 38px; }
.expertise-grid strong { max-width: 320px; font-size: 28px; line-height: 1.3; font-weight: 400; }
.expertise-grid i { position: absolute; opacity: 0; right: 25px; top: 35%; width: 29px; height: 29px; display: grid; place-items: center; background: var(--yellow); border-radius: 50%; color: var(--blue); font-style: normal; transition: opacity .2s, transform .2s; }
.expertise-grid li:hover i { opacity: 1; transform: translateX(5px); }
.expertise-grid .featured::before { content: ''; position: absolute; z-index: -1; inset: -18px 12px 20px -20px; border-radius: 31px; background: white; box-shadow: 4px 4px 34px rgba(0,0,0,.08); }
.shape--expertise-blue { right: -280px; top: -410px; width: 700px; }
.shape--expertise-yellow { right: -210px; bottom: -110px; width: 760px; }

.fees-section { min-height: 686px; display: grid; grid-template-columns: 42% 58%; padding-top: 130px; }
.fees-section > *:not(.shape) { position: relative; z-index: 2; }
.fees-section .section-title { align-self: start; }
.fees-copy { font-size: 28px; line-height: 1.3; max-width: 783px; }
.fees-copy .pill-button { font-size: 16px; }
.shape--fees { left: -275px; top: 90px; width: 749px; height: auto; max-width: none; }

.site-footer { position: relative; color: var(--beige); background: linear-gradient(to bottom, rgba(27,7,170,0), var(--blue) var(--footer-fade-h)); padding-top: var(--footer-fade-h); }
.footer-fade { display: none; }
.page-grid { padding: 32px var(--gutter) 26px; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 36px; }
.brand--footer { align-self: start; filter: none; }
.brand--footer .brand-name, .brand--footer .brand-sub { filter: brightness(0) invert(1); }
.footer-column h2 { margin: 0 0 18px; font-size: 12px; line-height: 1.4; text-transform: uppercase; letter-spacing: .06em; }
.footer-column p { margin: 0; font-size: 16px; line-height: 1.7; }
.footer-bottom { grid-column: 1 / -1; margin-top: 105px; padding-top: 20px; border-top: 1px solid var(--violet); display: flex; justify-content: space-between; color: var(--violet); }

.detail { min-height: 815px; padding: 55px var(--gutter) 110px; }
.detail--lawyer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(20px, 3vw, 55px); align-items: start; margin-bottom: -192px;}
.portrait-composition--detail {
  width: min(100%, 643px);
  height: auto;
  aspect-ratio: 643 / 570;
  margin: 20px 0 0 auto;
}
.portrait-composition--detail .portrait-disc { left: 0; bottom: 0; width: 76.05%; height: 85.79%; }
.portrait-composition--detail .portrait-mask { left: 21.77%; top: 0; width: 78.23%; height: 86.14%; }
.detail-content { max-width: 666px;z-index: 1; }
.detail-content h1 { margin: 0; font-size: 54px; line-height: 1.04; letter-spacing: -.04em; }
.detail-content .eyebrow { margin-bottom: 25px; }
.detail-text { font-size: 16px; line-height: 1.55; }
.detail-text h2 { margin-top: 54px; }
.contact-row { border-top: 1px solid var(--black); margin-top: 45px; padding-top: 22px; display: grid; grid-template-columns: 1fr 1fr; font-size: 14px; line-height: 1.5; text-transform: none; }
.contact-row > strong { text-transform: uppercase; font-size: 12px; letter-spacing: .04em; }
.detail--expertise { min-height: 735px; padding-top: 80px;  margin-bottom: -192px; }
.detail--expertise .detail-content { margin-left: calc(25% + 27px); }
.back-link { display: inline-block; margin-bottom: 30px; color: var(--blue); font-weight: 600; }
.detail--expertise h1 { max-width: 760px; margin-bottom: 45px; font-size: 54px; }
.detail--expertise .detail-text { font-size: 16px; line-height: 1.55; }
.detail--expertise .pill-button { margin-top: 25px; }
.detail--legal { padding-top: 80px; }
.detail--legal .detail-content { max-width: 900px; margin: 0 auto; }
.detail--legal h1 { margin-bottom: 70px; }
.detail--legal .detail-text { max-width: 700px; font-size: 18px; line-height: 1.65; }
.detail--legal .detail-text h2:first-child { margin-top: 0; }

/* Home 02 — photographic variant from Figma node 84:149 */
.template-home .site-header .brand-name,
.template-home .site-header .brand-sub { filter: brightness(0) invert(1); }
.template-avocat .site-header .brand-name,
.template-avocat .site-header .brand-sub,
.template-expertise .site-header .brand-name,
.template-expertise .site-header .brand-sub,
.template-mentions-legales .site-header .brand-name,
.template-mentions-legales .site-header .brand-sub { filter: brightness(0); }
.template-home .main-nav { color: var(--beige); }
.template-home .language { color: white; }
.template-home .site-header.is-scrolled .brand-name { filter: brightness(0); }
.template-home .site-header.is-scrolled .brand-sub { filter: brightness(0); }
.template-home .site-header.is-scrolled .brand-mark img,
body:not(.template-home) .site-header .brand-mark img { opacity: 0; }
.template-home .site-header.is-scrolled .brand-mark::after,
body:not(.template-home) .site-header .brand-mark::after { content: ''; position: absolute; inset: 0; background: var(--blue); -webkit-mask: url('../images/figma/asset-07.svg') center / 100% 100% no-repeat; mask: url('../images/figma/asset-07.svg') center / 100% 100% no-repeat; }
.template-home .site-header.is-scrolled .main-nav { color: var(--black); }
.template-home .site-header.is-scrolled .language { color: var(--blue); }
.template-home .hero { height: 932px; min-height: 0; background: #333; }
.hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; }
.hero-shade { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.hero-fade { position: absolute; z-index: 1; left: 0; right: 0; bottom: -2px; width: 100%; height: 268px; object-fit: fill; }
.template-home .hero-content { top: 319px; color: white; }
.template-home .hero-content > p { margin-top: 32px; color: white; }
.template-home .hero .pill-button { border-color: var(--beige); color: white; }
.template-home .hero .pill-button:hover { border-color: var(--yellow); background: var(--yellow); color: var(--black); }
.shape--hero-outline { z-index: 2; right: 290px; top: 146px; width: 490px; height: 477px; }
.template-home .shape--hero-ring { z-index: 2; right: 40px; top: 376px; width: 457px; height: 457px; }

.template-home .section-title { position: relative; display: block; }
.template-home .section-title i { position: absolute; left: calc(var(--gutter) * -1); bottom: -10px; width: 81px; height: 2px; border: 0; border-radius: 0; background: var(--blue); }
.template-home .section-title h2 { font-size: 54px; }
.template-home .cabinet-section { min-height: 630px; padding-top: 127px; }
.template-home .cabinet-copy { padding-top: 9px; }
.template-home .cabinet-copy p::before,
.template-home .cabinet-copy p::after { display: none; }

.template-home .profile-section { min-height: 680px; padding-top: 0; padding-bottom: 0; align-items: start; }
.template-home .portrait-composition {
  width: min(620px, calc(100% + 50px));
  height: auto;
  aspect-ratio: 620 / 650;
  margin: -10px -70px 0 auto;
}
.template-home .portrait-disc-art { position: absolute; left: -16.84%; top: 18.15%; width: 80.65%; height: auto; z-index: 1; transform: rotate(-120deg); }
.template-home .portrait-mask { left: 7.42%; top: 2%; width: 81.13%; height: 75.54%; clip-path: none; -webkit-mask: url('../images/figma/asset-06.svg') center / 100% 100% no-repeat; mask: url('../images/figma/asset-06.svg') center / 100% 100% no-repeat; }
.template-home .portrait-mask img { transform: none; object-position: center 22%; }
.template-home .profile-copy { min-width: 0; padding: 181px 0 0 13px; }
.template-home .profile-copy .eyebrow { margin-bottom: 12px; }

.template-home .expertise-section { min-height: 1261px; padding-top: 184px; display: grid; grid-template-columns: 33.333% 1fr; align-items: start; }
.template-home .expertise-section .section-title { grid-column: 1; }
.template-home .expertise-grid { grid-column: 2; padding: 8px 0 0; display: block; max-width: 900px; border-top: 2px solid rgba(27,7,170,.38); }
.template-home .expertise-grid li { min-height: 0; padding: 0; border-bottom: 2px solid rgba(27,7,170,.38); }
.template-home .expertise-grid li.featured::before { display: none; }
.template-home .expertise-grid a { position: relative; display: grid; grid-template-columns: 92px 1fr 32px; align-items: center; min-height: 88px; padding: 12px 0; }
.template-home .expertise-grid span { align-self: start; padding-top: 2px; font-size: 16px; line-height: 38px; }
.template-home .expertise-grid strong { max-width: 820px; font-size: 34px; line-height: 1.12; }
.template-home .expertise-grid i { position: static; justify-self: end; opacity: 0; transition: opacity .2s, transform .2s; }
.template-home .expertise-grid li:hover i { opacity: 1; }

.template-home .fees-section {grid-template-columns: 42% 58%; padding-top: 102px; margin-bottom: -380px;}
.template-home .fees-copy { transform: translateY(-20px); }
.template-home .shape--fees { left: -274px; top: 0; }

@media (max-width: 980px) {
  :root { --gutter: 22px; --header-h: 96px; }
  .site-header { height: var(--header-h); padding: 22px var(--gutter); grid-template-columns: 1fr 48px; }
  .site-header .brand { transform: scale(.82); transform-origin: left center; }
  .language { display: none; }
  .menu-toggle { position: relative; z-index: 3; display: grid; gap: 7px; justify-self: end; padding: 12px 0 12px 12px; border: 0; background: transparent; }
  .menu-toggle span { display: block; width: 28px; height: 2px; background: var(--black); transition: transform .2s; }
  .menu-open .menu-toggle span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .menu-open .menu-toggle span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  .main-nav { position: fixed; inset: 0; padding: 115px 22px 40px; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 22px; background: var(--yellow); font-size: 34px; transform: translateX(100%); transition: transform .3s; }
  .menu-open .main-nav { transform: none; }
  .hero { height: 720px; }
  .hero-content { left: var(--gutter); right: var(--gutter); top: 165px; }
  .hero h1 { font-size: clamp(48px, 13vw, 72px); }
  .hero-content > p { max-width: 430px; font-size: 22px; }
  .shape--hero-yellow { left: -450px; top: 20px; }
  .shape--hero-blue { right: -440px; top: 280px; }
  .shape--hero-ring { right: -160px; top: 280px; width: 360px; height: 360px; }
  .hero-outline { display: none; }
  .section-title h2 { font-size: 40px; }
  .section-title i { width: 26px; height: 26px; border-width: 2px; }
  .cabinet-section { display: block; min-height: 0; padding-top: 75px; padding-bottom: 100px; }
  .cabinet-copy { margin: 50px 0 0 auto; width: 84%; font-size: 22px; line-height: 1.45; }
  .cabinet-copy p::before, .cabinet-copy p::after { display: none; }
  .profile-section { min-height: 0; grid-template-columns: 1fr; gap: 45px; padding-top: 65px; padding-bottom: 110px; }
  .portrait-composition { width: min(90vw, 570px); height: min(90vw, 570px); margin: 0; }
  .portrait-composition--detail {
    width: min(100%, 643px);
    height: auto;
    aspect-ratio: 643 / 570;
    margin: 20px auto 0;
  }
  .portrait-disc { width: 78%; height: 78%; }
  .portrait-mask { left: 22%; width: 80%; height: 80%; }
  .profile-copy { padding: 0 0 0 16%; }
  .profile-copy h2 { font-size: 40px; }
  .expertise-section { min-height: 0; padding-bottom: 100px; }
  .expertise-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .expertise-grid li { min-height: 220px; }
  .expertise-grid strong { font-size: 23px; }
  .fees-section { min-height: 650px; grid-template-columns: 1fr; gap: 70px; overflow: visible; }
  .fees-copy { width: 72%; margin-left: auto; font-size: 22px; }
  .shape--fees {
    left: clamp(-490px, -55vw, -260px);
    top: 130px;
    width: min(749px, 115vw);
  }
  .page-grid { grid-template-columns: repeat(2, 1fr); row-gap: 45px; }
  .footer-bottom { margin-top: 50px; }
  .detail--lawyer { grid-template-columns: 1fr; gap: 60px; }
  .detail--lawyer .detail-content { margin-left: 14%; }
  .detail--expertise .detail-content { margin-left: 16%; }
}

@media (max-width: 980px) {
  .template-home .site-header { height: var(--header-h); }
  .template-home .site-header.menu-open .brand-name,
  .template-home .site-header.menu-open .brand-sub { filter: none; }
  .template-home .site-header.menu-open .menu-toggle span { background: var(--black); }
  .template-home .site-header .menu-toggle span { background: white; }
  .template-home .site-header.is-scrolled .menu-toggle span { background: var(--black); }
  .template-home .main-nav { color: var(--black); }
  .template-home .hero { height: 760px; }
  .template-home .hero-content { top: 235px; }
  .shape--hero-outline { left: 48%; top: 100px; width: 410px; height: 400px; }
  .template-home .shape--hero-ring { right: -150px; top: 360px; width: 350px; height: 350px; }
  .template-home .cabinet-section { min-height: 0; padding-top: 90px; }
  .template-home .cabinet-copy { padding-top: 0; }
  .template-home .profile-section { min-height: 860px; padding-top: 30px; padding-bottom: 80px; }
  .template-home .portrait-composition {
    width: min(86vw, 620px);
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto;
  }
  .template-home .portrait-disc-art {left: 4%;top: 26%;width: 76%;height: auto; }
  .template-home .portrait-mask { left: 26%; top: 3%; width: 82%; height: 82%; }
  .template-home .profile-copy { padding: 0 0 0 16%; }
  .template-home .expertise-section { min-height: 0; padding-top: 100px; padding-bottom: 120px; display: block; }
  .template-home .expertise-grid { margin: 60px 0 0 15%; }
  .template-home .expertise-grid a { grid-template-columns: 62px 1fr 32px; }
  .template-home .expertise-grid strong { font-size: 25px; }
  .template-home .fees-section {
    display: block;
    min-height: 0;
    margin-bottom: 0;
    padding-top: 100px;
    padding-bottom: 100px;
  }
  .template-home .fees-copy {
    width: min(100%, 700px);
    margin: 55px 0 0;
    transform: none;
  }
}

@media (max-width: 580px) {
  .template-home .hero { height: 680px; }
  .template-home .hero-photo { object-position: 60% center; }
  .template-home .hero-content { top: 180px; }
  .shape--hero-outline { left: 46%; top: 135px; width: 300px; height: 292px; }
  .template-home .shape--hero-ring { right: -145px; top: 380px; width: 280px; height: 280px; }
  .template-home .section-title h2 { font-size: 40px; }
  .template-home .profile-section { min-height: 720px; }
  .template-home .profile-copy { padding-left: 0; }
  .template-home .expertise-grid { margin-left: 0; }
  .template-home .expertise-grid a { grid-template-columns: 45px 1fr 28px; min-height: 78px; }
  .template-home .expertise-grid strong { font-size: 20px; }
  .template-home .expertise-grid span { font-size: 13px; }
}

@media (max-width: 580px) {
  .hero { height: 650px; }
  .hero-content { top: 105px; }
  .hero h1 { font-size: 47px; }
  .hero-content > p { margin-top: 22px; font-size: 18px; line-height: 1.35; }
  .section { padding-left: var(--gutter); padding-right: var(--gutter); }
  .cabinet-copy, .fees-copy { width: 100%; margin-left: 0; font-size: 20px; }
  .profile-copy, .detail--lawyer .detail-content, .detail--expertise .detail-content { padding-left: 0; margin-left: 0; }
  .expertise-grid { grid-template-columns: 1fr; }
  .expertise-grid li { min-height: 150px; }
  .expertise-grid .featured::before { inset: -15px -8px 15px -8px; }
  .fees-section { gap: 45px; }
  .page-grid { grid-template-columns: 1fr; }
  .brand--footer { margin-bottom: 5px; }
  .footer-bottom { flex-direction: column; gap: 12px; }
  .detail { padding-top: 40px; }
  .detail-content h1, .detail--expertise h1 { font-size: 40px; }
  .detail--legal { padding-top: 40px; }
  .detail--legal h1 { margin-bottom: 45px; }
  .detail--legal .detail-text { font-size: 16px; }
  .portrait-composition--detail { margin-top: 0; }
  .contact-row { grid-template-columns: 1fr; gap: 15px; }
}