:root {
  --sc-canvas: #080c12;
  --sc-surface: #121922;
  --sc-ink: #f2efe9;
  --sc-ink-soft: #b7beca;
  --sc-accent: #f2efe9;
  --sc-accent-ink: #10151e;
  --sc-font-display: 'Instrument Serif', Georgia, serif;
  --sc-font-text: 'DM Sans', sans-serif;
  --gutter: clamp(28px, 5.5vw, 100px);
  --pointer-x: 0;
  --pointer-y: 0;
  --portrait-progress: 0;
}
* { box-sizing: border-box; }
html { color-scheme: dark; background: var(--sc-canvas); }
body { margin: 0; font-family: var(--sc-font-text); color: var(--sc-ink); -webkit-font-smoothing: antialiased; }
body, h1, p { margin: 0; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid #98c7ff; outline-offset: 7px; }
::selection { color: #fff; background: #284b84; }
.skip-link { position: fixed; left: 20px; top: 16px; transform: translateY(-160%); z-index: 30; background: #f2efe9; color: #10151e; padding: 12px 20px; }
.skip-link:focus { transform: none; }
.hero { min-height: 760px; height: 100svh; max-height: 1300px; isolation: isolate; position: relative; overflow: clip; background: #080c12; }
.header { position: relative; z-index: 10; height: 130px; margin: 0 var(--gutter); display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #d5e3fa20; }
.brand { display: inline-flex; align-items: center; gap: 20px; }
.brand-monogram { font-family: var(--sc-font-display); font-size: 64px; line-height: .7; letter-spacing: -7px; font-style: italic; padding: 0 8px 7px 0; }
.brand-monogram>span { color: #bb4b4d; }
.brand-divider { width: 1px; height: 36px; background: #d5e3fa35; }
.brand-name { font-size: 13px; letter-spacing: .17em; line-height: 1.3; font-weight: 500; }
.brand-name>span { display: block; font-size: 9px; letter-spacing: .22em; margin-top: 8px; color: #c1c9d5; }
.header-contact { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 500; letter-spacing: .025em; padding: 10px 0; transition: opacity 160ms ease-out; }
.header-contact svg { width: 19px; height: 19px; }
.contact-arrow { margin-left: 18px; font-size: 22px; }
.header-contact:hover { opacity: .75; }
.header-contact:active { transform: translateY(1px); }
.hero-body { position: relative; z-index: 5; padding: 0 var(--gutter); height: calc(100% - 130px); display: flex; align-items: center; }
.copy { width: min(53%, 660px); padding: 3px 0 44px; }
.emergency { display: flex; align-items: center; gap: 9px; color: #d3d9e3; font-size: 11px; font-weight: 500; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 29px; }
.emergency strong { font-weight: 600; color: var(--sc-ink); margin-left: -3px; }
.signal { display: flex; gap: 3px; align-items: center; width: 31px; height: 14px; margin-right: 7px; }
.signal i { display: block; width: 3px; height: 7px; background: #d67077; }
.signal i:nth-child(2) { height: 13px; background: #dd7b81; }
.signal i:nth-child(3) { height: 13px; background: #7eaef6; }
.signal i:nth-child(4) { background: #598ddd; }
h1 { font-weight: 400; }
.profession { display: block; font-family: var(--sc-font-display); font-size: clamp(90px, 8.6vw, 144px); letter-spacing: -.035em; line-height: .91; font-weight: 400; }
.profession em { font-style: italic; font-weight: 400; }
.lawyer-name { display: flex; align-items: center; gap: 17px; margin-top: 29px; font-family: var(--sc-font-text); font-size: 17px; font-weight: 400; letter-spacing: .035em; }
.name-line { width: 31px; height: 1px; background: #a7b3c5; }
.description { max-width: 418px; margin-top: 30px; color: #b7beca; font-size: 14px; line-height: 1.85; font-weight: 400; text-wrap: pretty; }
.primary-cta { display: inline-flex; align-items: center; justify-content: center; gap: 13px; min-height: 64px; margin-top: 32px; padding: 0 22px; background: #f2efe9; color: #111823; border: 1px solid #fff8; border-radius: 3px; font-size: 13px; font-weight: 600; box-shadow: 0 8px 24px #02060b38; transition: background 180ms ease-out, transform 180ms ease-out; }
.primary-cta svg { flex: 0 0 23px; width: 23px; height: 23px; }
.cta-arrow { margin-left: 22px; font-size: 22px; font-weight: 400; transition: transform 180ms ease-out; }
.primary-cta:active { transform: translateY(2px); }
.scene { position: absolute; z-index: -2; inset: 0; pointer-events: none; overflow: hidden; }

/* Editorial portrait: a real alpha photograph between a rear frame and light. */
.portrait-backdrop { position:absolute; inset:0; background:radial-gradient(ellipse at 86% 34%,#354550 0%,#1a2937 28%,transparent 63%),linear-gradient(105deg,#080c12 25%,#0d1722 57%,#182734); transform:translate3d(calc(var(--pointer-x) * -4px),calc(var(--portrait-progress) * -14px),0) scale(1.035); }
.portrait-panel { position:absolute; left:58%; top:-10%; width:48%; height:135%; background:linear-gradient(110deg,#bdd1df08,#adc4d406 48%,#b9d5e900); border-left:1px solid #b0cde41d; transform:translate3d(calc(var(--portrait-progress) * -45px + var(--pointer-x) * -10px),calc(var(--portrait-progress) * -30px),0) rotate(-12deg); transform-origin:50% 80%; }
.portrait-frame { position:absolute; right:7%; top:21%; width:35%; height:76%; border:1px solid #bdc6c34a; border-radius:2px; transform:translate3d(calc(var(--portrait-progress) * 38px + var(--pointer-x) * -14px),calc(var(--portrait-progress) * -88px + var(--pointer-y) * -7px),0); opacity:calc(1 - var(--portrait-progress) * .38); }
.portrait-frame::before { content:""; position:absolute; inset:13px; border:1px solid #c1d6e017; }
.portrait-frame::after { content:""; position:absolute; height:1px; top:-1px; left:0; width:46%; background:linear-gradient(90deg,#e1d7baaa,transparent); }
.portrait-frame i { position:absolute; bottom:0; right:0; width:32%; height:1px; background:#d8d5c861; }
.scene-photo { position:absolute; right:2%; top:15%; bottom:-3%; width:52%; transform:translate3d(calc(var(--pointer-x) * 9px),calc(var(--portrait-progress) * -56px + var(--pointer-y) * 5px),0) scale(calc(1.025 + var(--portrait-progress) * .035)); transform-origin:55% 34%; mask-image:linear-gradient(180deg,#000 0%,#000 70%,transparent 100%); }
.scene-photo img { display:block; height:100%; width:100%; object-fit:contain; object-position:center bottom; }
.portrait-light { position:absolute; pointer-events:none; }
.portrait-light-warm { right:-12%; top:-9%; width:70%; height:96%; background:radial-gradient(ellipse at 67% 26%,#e5d7ac31,transparent 57%); transform:translate3d(calc(var(--portrait-progress) * -75px + var(--pointer-x) * -6px),calc(var(--portrait-progress) * 24px),0); }
.portrait-light-blue { right:-8%; bottom:-27%; width:77%; height:66%; background:radial-gradient(ellipse at 69% 68%,#44729e38,transparent 59%); transform:translate3d(calc(var(--pointer-x) * -18px),calc(var(--portrait-progress) * -118px),0); }
.portrait-veil { position:absolute; inset:0; background:linear-gradient(0deg,#080c12 0%,#080c12e0 4%,transparent 27%); }
.image-unavailable .portrait-frame { opacity:.3; }
.image-unavailable .scene-photo { visibility:hidden; }
.grain { position: absolute; pointer-events: none; inset: 0; z-index: 4; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23ffffff' filter='url(%23n)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.scene-caption { position: absolute; display: flex; align-items: center; gap: 20px; right: var(--gutter); bottom: 58px; z-index: 6; color: #d9dce4; }
.scene-caption>span:nth-child(2) { font-family: var(--sc-font-display); font-size: 58px; line-height: 1; letter-spacing: -.04em; }
.caption-h { font-size: 36px; font-style: italic; margin-left: 2px; }
.caption-line { width: 42px; height: 1px; background: #aab9d366; }
.caption-text { font-size: 9px; letter-spacing: .15em; line-height: 1.9; }
.bottom-rule { position: absolute; bottom: 26px; left: var(--gutter); right: var(--gutter); height: 1px; background: #d5e3fa1c; }
.bottom-rule i { display: block; width: 48px; height: 1px; background: #b6c4da88; }
@media (hover:hover) and (pointer:fine) {
  .primary-cta:hover { background: #fff; transform: translateY(-2px); }
  .primary-cta:hover .cta-arrow { transform: translate(3px,-3px); }
}
@media (min-width:1600px) { .copy { padding-bottom: 64px; }.description { font-size: 16px; max-width: 450px; }.primary-cta { font-size: 14px; min-height: 68px; } }
@media (max-height:800px) and (min-width:901px) {
  .hero { min-height: 650px; }.header { height: 104px; }.hero-body { height: calc(100% - 104px); }.copy { padding-bottom: 30px; }.profession { font-size: clamp(82px,7.7vw,115px); }.emergency { margin-bottom: 22px; }.lawyer-name { margin-top: 22px; }.description { margin-top: 22px; line-height:1.75; }.primary-cta { margin-top: 25px; min-height: 58px; }
}
@media (max-width:1100px) and (min-width:701px) { .profession { font-size: 100px; }.copy { width: 58%; }.scene-photo { width:58%;right:-3%;top:20%;bottom:-1%;mask-image:linear-gradient(90deg,transparent 0%,#000 35%),linear-gradient(180deg,#000 0%,#000 70%,transparent 100%);mask-composite:intersect; }.portrait-frame { right:5%;width:39%;top:24%;height:69%; }.description { max-width:380px; }.scene-caption { right:40px; } }
@media (max-width:700px) {
  :root { --gutter: 25px; }
  .hero { min-height: 760px; height: 100svh; max-height: 1100px; }
  .header { height: 93px; align-items:center; }
  .brand { gap:13px; }.brand-monogram { font-size:50px; letter-spacing:-5px; padding-right:5px; }.brand-divider { height:28px; }.brand-name { font-size:10px; letter-spacing:.13em; }.brand-name>span { font-size:7px; margin-top:6px; letter-spacing:.18em; }
  .header-contact { width:44px; height:44px; justify-content:flex-end; padding:0; }.header-contact svg { width:21px; height:21px; }.header-contact>span { display:none; }
  .hero-body { height:calc(100% - 93px); display:block; padding-top:38px; }
  .copy { width:100%; padding:0; }
  .emergency { font-size:9px; letter-spacing:.07em; gap:7px; margin-bottom:23px; }.signal { margin-right:3px; width:26px;gap:2px; }
  .profession { font-size:clamp(76px,21.6vw,112px); line-height:.92; letter-spacing:-.025em; }
  .lawyer-name { margin-top:22px; font-size:14px; gap:12px; }.name-line { width:24px; }
  .description { max-width:335px; margin-top:25px; font-size:13px; line-height:1.8; color:#c2c9d4; }
  .primary-cta { width:100%; max-width:355px; margin-top:26px; min-height:59px; padding:0 17px; font-size:12px; gap:10px; }.primary-cta svg { width:22px;flex-basis:22px; }.cta-arrow { margin-left:auto; font-size:22px; }
  .portrait-backdrop { background:radial-gradient(ellipse at 92% 88%,#334958 0%,#172633 36%,transparent 68%),#080c12; }
  .portrait-panel { left:53%;top:58%;width:75%;height:85%;opacity:.65; }
  .scene-photo { right:-10px;top:562px;bottom:auto;width:300px;height:450px;transform:translate3d(0,calc(var(--portrait-progress) * -22px),0) scale(calc(1.01 + var(--portrait-progress) * .025));transform-origin:62% 18%;mask-image:linear-gradient(180deg,#000 0%,#000 56%,transparent 100%); }
  .portrait-frame { right:23px;top:601px;width:57%;height:45%;transform:translate3d(calc(var(--portrait-progress) * 22px),calc(var(--portrait-progress) * -48px),0); }
  .portrait-frame::before { inset:8px; }
  .portrait-light-warm { right:-50%;top:54%;width:140%;height:60%;background:radial-gradient(ellipse at 50% 50%,#e5d7ac2b,transparent 66%); }
  .portrait-light-blue { right:-25%;bottom:-10%;width:115%;height:43%; }
  .portrait-veil { background:linear-gradient(0deg,#080c12 0%,transparent 4%); }
  .scene-caption { right:auto;left:25px;bottom:41px;gap:12px; }.scene-caption>span:nth-child(2) { font-size:43px; }.caption-h { font-size:27px; }.caption-text { font-size:7px; }.caption-line { width:30px; }
  .bottom-rule { bottom:22px; }
}
@media (max-width:700px) and (max-height:740px) {
  .hero { min-height:640px; }.header { height:78px; }.hero-body { height:calc(100% - 78px);padding-top:27px; }.emergency { margin-bottom:19px; }.profession { font-size:clamp(70px,19.5vw,100px); }.lawyer-name { margin-top:19px; }.description { margin-top:21px;line-height:1.7; }.primary-cta { margin-top:22px;min-height:56px; }.scene-caption { bottom:30px; }.bottom-rule { bottom:17px; }.scene-photo { top:510px;width:180px;height:270px;right:-4px; }.portrait-frame { top:537px;width:46%;height:45%; }
}
@media (max-width:700px) and (min-height:741px) and (max-height:800px) {
  .scene-photo { top:605px;width:187px;height:280px; }.portrait-frame { top:630px;width:47%;height:40%; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
  .scene-photo,.portrait-backdrop,.portrait-panel,.portrait-frame,.portrait-light { transform:none; }
}