@font-face {
    font-family:Frank;
    src:url(frank.ttf);
    font-display:swap
}
@font-face {
    font-family:Heebo;
    src:url(heebo.ttf);
    font-display:swap
}
@font-face {
    font-family:OfficeIcons;
    src:url(icons.woff2) format('woff2');
    font-display:block
}
:root {
    --ink:#0b0d22;
    --muted:#4b4b59;
    --brass:#c49339;
    --paper:#f7f5ef;
    --line:#ddd8cb;
    --serif:Frank,Georgia,'Times New Roman',serif;
    --sans:Heebo,Arial,sans-serif
}
* {
    box-sizing:border-box
}
html {
    scroll-behavior:smooth;
    scroll-padding-top:1rem
}
body {
    margin:0;
    color:var(--ink);
    font:16px/1.55 var(--sans);
    background:white
}
a {
    color:inherit;
    text-decoration:none
}
button,input,textarea,select {
    font:inherit
}
button,summary {
    cursor:pointer
}
a:focus-visible,summary:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible {
    outline:3px solid #bc8135;
    outline-offset:4px
}
.wrap {
    width:min(1240px,88%);
    margin-inline:auto
}
.icon {
    font:normal 1em/1 OfficeIcons;
    display:inline-block
}
.arrow {
    display:inline-flex
}
[dir=ltr] .arrow {
    transform:scaleX(-1)
}
.skip {
    position:absolute;
    z-index:30;
    top:-5rem;
    background:white;
    padding:1em
}
.skip:focus {
    top:0
}
.mast {
    min-height:88px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px
}
.wordmark {
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    line-height:1.04;
    flex:none
}
.wordmark strong {
    font:600 32px/1 var(--serif);
    letter-spacing:-1px
}
.wordmark small {
    margin-top:4px;
    font-size:12px;
    letter-spacing:.09em
}
.wordmark img {
    width:auto;
    max-width:185px;
    max-height:62px;
    height:auto
}
.desktop-nav,.actions {
    display:flex;
    align-items:center
}
.desktop-nav {
    gap:clamp(16px,2.2vw,36px);
    font-size:15px
}
.desktop-nav a {
    position:relative;
    padding-block:28px
}
.desktop-nav a:hover,.textlink:hover {
    color:#765622
}
.desktop-nav a[aria-current]:after {
    content:'';
    position:absolute;
    bottom:18px;
    inset-inline:0;
    background:var(--brass);
    height:2px
}
.actions {
    gap:22px
}
.call,.button,.ghost,.cardlink {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:11px
}
.call,.dark {
    color:white;
    background:var(--ink)
}
.call {
    padding:10px 16px;
    font-size:15px;
    direction:ltr
}
.dropdown {
    position:relative
}
.dropdown summary {
    list-style:none;
    display:flex;
    align-items:center;
    gap:7px;
    min-height:44px
}
.dropdown summary::-webkit-details-marker {
    display:none
}
.dropdown .icon:last-child:not(:first-child) {
    font-size:10px
}
.pop {
    z-index:20;
    position:absolute;
    inset-inline-end:0;
    min-width:145px;
    background:white;
    box-shadow:0 8px 32px #0b1c3226;
    padding:7px;
    border:1px solid var(--line)
}
.pop a {
    display:block;
    padding:8px 14px
}
.pop a:hover {
    background:var(--paper)
}
.mobile {
    display:none
}
.hero {
    position:relative;
    isolation:isolate;
    overflow:hidden;
    color:#fff;
    background:#0d1b2a
}
.hero-art {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center 46%;
    z-index:-2
}
[dir=ltr] .hero-art {
    transform:scaleX(-1)
}
.hero:after {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(270deg,#09192ac9,transparent 70%);
    z-index:-1
}
[dir=ltr] .hero:after {
    transform:scaleX(-1)
}
.hero-wrap {
    min-height:clamp(430px,36.5vw,555px);
    display:flex;
    align-items:center;
    padding-block:48px
}
.hero-copy {
    width:min(530px,53%)
}
.kicker {
    display:flex;
    align-items:center;
    gap:12px;
    color:#f1e5cb;
    font-size:16px;
    margin:0
}
.kicker span,.rule {
    display:inline-block;
    background:#b89a67;
    width:39px;
    height:2px
}
.hero h1,.innerhead h1,h2,h3 {
    font-family:var(--serif);
    font-weight:500;
    line-height:1.12
}
.hero h1 {
    font-size:clamp(50px,6.3vw,96px);
    letter-spacing:-.045em;
    margin:13px 0 16px
}
.intro {
    font-size:clamp(17px,1.36vw,21px);
    color:#f0f1f2;
    line-height:1.68
}
.intro p {
    margin:0 0 .35em
}
.hero-ctas {
    display:flex;
    align-items:center;
    gap:26px;
    flex-wrap:wrap;
    margin-top:30px
}
.button {
    padding:12px 23px;
    border:1px solid transparent;
    font-weight:bold;
    min-height:46px
}
.button:hover,.call:hover {
    filter:brightness(1.16)
}
.light {
    background:#f1e9da;
    color:#14273c
}
.ghost {
    border-bottom:1px solid #ffffff6b;
    padding-block:8px
}
.ghost .icon {
    font-size:14px
}
.practices {
    padding-block:53px 63px
}
.section-head {
    display:flex;
    gap:16px;
    align-items:center;
    margin-bottom:26px
}
h2 {
    font-size:clamp(32px,3vw,46px);
    margin:0
}
.practice-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px
}
.practice {
    position:relative;
    display:flex;
    align-items:flex-start;
    flex-direction:column;
    padding:25px 24px 20px;
    background:linear-gradient(145deg,#fcfcfa,#f5f5f1);
    border:1px solid var(--line);
    transition:border-color .2s,transform .2s
}
.practice:hover {
    border-color:var(--brass);
    transform:translateY(-3px)
}
.cardicon {
    font-size:28px;
    color:#8a714b;
    line-height:1
}
.practice h3 {
    font-size:clamp(22px,1.85vw,29px);
    margin:18px 0 7px
}
.practice p {
    font-size:15px;
    color:var(--muted);
    margin:0 0 19px;
    line-height:1.6
}
.cardlink {
    font-size:14px;
    margin-top:auto;
    color:#26384a;
    gap:14px
}
.about-band {
    background:var(--paper);
    border-top:1px solid var(--line)
}
.about-inner {
    display:grid;
    grid-template-columns:1fr 2fr;
    gap:50px;
    padding-block:52px
}
.about-inner p {
    margin-top:0
}
.textlink,.prose a,.contacts a:hover {
    text-decoration:underline;
    text-underline-offset:4px
}
.innerhead {
    background:var(--ink);
    color:#fff;
    padding:36px 0 42px
}
.innerhead h1 {
    font-size:clamp(37px,5vw,67px);
    margin:.35em 0 .2em
}
.innerhead p {
    font-size:19px;
    max-width:48em;
    margin:0;
    color:var(--muted)
}
.crumb {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:14px;
    color:var(--muted)
}
.innerbody {
    padding-block:38px 60px;
    min-height:42vh
}
.prose {
    max-width:780px;
    font-size:18px
}
.prose p:first-child {
    margin-top:0
}
.prose h2,.contacts h2,.enquiry h2,.article-list h2 {
    font-size:30px;
    margin:1.1em 0 .4em
}
.prose li {
    margin-block:4px
}
.feature {
    max-width:100%;
    height:auto;
    margin-bottom:1rem
}
.article-list a {
    display:block;
    border-bottom:1px solid var(--line);
    padding:14px 0
}
.byline,.empty {
    color:var(--muted)
}
.contact-grid {
    display:grid;
    grid-template-columns:1fr 1.4fr;
    gap:42px;
    align-items:start
}
.contacts,.enquiry {
    padding:25px;
    background:var(--paper);
    border:1px solid var(--line)
}
.contacts h2,.enquiry h2 {
    margin-top:0
}
.contacts dt {
    color:var(--muted);
    font-size:14px
}
.contacts dd {
    margin:2px 0 15px
}
.enquiry label {
    display:block;
    margin:15px 0 6px
}
.enquiry input:not([type=checkbox],[type=hidden]),.enquiry textarea {
    display:block;
    width:100%;
    padding:10px;
    border:1px solid #8d969b;
    background:white;
    border-radius:0
}
.check input {
    width:1.1em;
    height:1.1em
}
.feedback {
    padding:12px;
    border:1px solid #385348;
    background:white
}
footer {
    background:#101f30;
    color:white
}
.foot {
    padding-block:37px;
    display:flex;
    gap:32px;
    align-items:flex-start;
    justify-content:space-between
}
.footcontact,footer nav {
    display:grid;
    gap:5px;
    color:#e3e7eb
}
.foot a:hover {
    text-decoration:underline
}
@media(max-width:1100px) {
    .desktop-nav {
        display:none
    }
    .mobile {
        display:block
    }
    .mobile summary {
        font-size:25px
    }
    .mast {
        min-height:76px
    }
    .practice-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media(max-width:700px) {
    .wrap {
        width:90%
    }
    .mast {
        gap:9px;
        min-height:68px
    }
    .wordmark strong {
        font-size:25px
    }
    .wordmark small {
        font-size:10px
    }
    .actions {
        gap:15px
    }
    .call {
        display:none
    }
    .hero-wrap {
        min-height:440px
    }
    .hero-copy {
        width:90%;
        max-width:485px
    }
    .hero:after {
        background:linear-gradient(270deg,#081929f2,#08192985)
    }
    .hero-art {
        object-position:33% center
    }
    .hero-ctas {
        gap:18px
    }
    .hero h1 {
        font-size:clamp(45px,10vw,67px)
    }
    .intro {
        font-size:17px
    }
    .practices {
        padding-block:33px
    }
    .practice-grid {
        gap:10px
    }
    .practice {
        padding:18px 13px
    }
    .practice h3 {
        font-size:22px
    }
    .practice p {
        font-size:14px
    }
    .section-head {
        margin-bottom:18px
    }
    .contact-grid,.about-inner {
        grid-template-columns:1fr;
        gap:20px
    }
    .foot {
        flex-wrap:wrap
    }
    .innerhead {
        padding-block:24px
    }
    .innerhead h1 {
        overflow-wrap:anywhere
    }
    .about-inner {
        padding-block:32px
    }
    .contacts,.enquiry {
        padding:18px
    }
    .dropdown summary {
        font-size:14px
    }
    .mobile summary {
        font-size:25px
    }
}
@media(max-width:375px) {
    .practice-grid {
        grid-template-columns:1fr
    }
    .actions {
        gap:10px
    }
    .hero-ctas {
        gap:10px
    }
    .hero-ctas .button {
        padding:10px
    }
    .mast .wordmark strong {
        font-size:21px
    }
}
@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    * {
        transition:none!important
    }
}
/* The midnight and gold come from the firm's logo. */
@font-face {
    font-family: Assistant;
    src: url(assistant.ttf) format("truetype");
    font-weight: 200 800;
    font-display: swap;
}
:root {
    --ink: #112c50;
    --muted: #435c76;
    --line: #cfddeb;
    --paper: #eff5fb;
    --midnight: #0b0d22;
    --ivory: #faf9f6;
    --ocean: #18568d;
}
html:lang(he) {
    --sans: Assistant, Arial, sans-serif;
    --serif: Assistant, Arial, sans-serif;
}
html:lang(he) body { font-size: 18px; }
html:lang(he) :is(h1,h2,h3) { font-weight: 700; }
header, footer { background: var(--midnight); color: white; }
header { border-bottom: 1px solid #778cb245; }
.mast { min-height: 78px; }
.wordmark img { display: block; width: 164px; height: auto; max-height: none; }
.desktop-nav { font-size: 16px; font-weight: 600; }
.desktop-nav a:hover { color: #b7dbff; }
.desktop-nav a[aria-current]:after { background: var(--brass); }
.call { border: 1px solid #697c98; background: transparent; color: white; border-radius: 8px; }
.pop { color: var(--ink); border-radius: 10px; }
.innerhead {
    color: var(--ink);
    background: var(--ivory);
}
.cover { position: relative; isolation: isolate; overflow: hidden; color: var(--ink); background: var(--ivory); }
.cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: repeating-radial-gradient(ellipse at 0% 120%, transparent 0 77px, #b6b1a51a 78px, transparent 79px 98px);
    mask-image: linear-gradient(90deg, black, transparent 72%);
}
.cover-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    align-items: center;
    gap: clamp(24px,5vw,80px);
    padding-block: clamp(46px,4.5vw,78px);
}
.cover-copy { max-width: 670px; }
.eyebrow { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; color: #6b5127; margin: 0; }
.eyebrow span,.rule { width: 34px; height: 2px; background: var(--brass); }
.portrait figcaption h1 { margin: 0; font: 700 clamp(20px, 1.65vw, 26px)/1.2 var(--sans); }
.lede { max-width: 570px; font-size: clamp(18px,1.55vw,22px); line-height: 1.55; color: #3c4350; }
.lede p { margin: 0; }
.portrait {
    width: clamp(175px,16vw,235px);
    margin: 0;
    justify-self: center;
}
.portrait figcaption { margin-top: 9px; text-align: center; color: var(--ink); }
.portrait img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: 0; }
.button.dark { background: #184f81; color: white; border-radius: 8px; }
.cover .button.dark { background: #173854; color: white; }
.secondary { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; }
.secondary:hover { text-decoration: underline; }
.secondary .icon { font-size: 14px; }
.practices { padding-block: 44px 56px; }
.section-head { margin-bottom: 22px; }
.practice {
    background: linear-gradient(155deg,#f1f7fd,white);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px;
}
.practice:hover { border-color: #87abca; box-shadow: 0 6px 18px #153d6210; }
.cardicon { display: grid; place-items: center; width: 44px; height: 44px; background: #dfecf8; color: var(--ocean); border-radius: 12px; font-size: 24px; }
.practice h3 { font-size: clamp(21px,1.7vw,27px); }
.cardlink,.textlink { color: #1d5888; }
.contacts, .enquiry { background: var(--ivory); }
.contacts,.enquiry { border-radius: 14px; }
.bio { display: grid; grid-template-columns: minmax(140px,180px) 1fr; gap: 38px; align-items: start; }
.bio img { width: 100%; height: auto; }
@media (max-width: 700px) {
    .mast { min-height: 66px; }
    .wordmark img { width: 134px; }
    .cover-grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 12px 16px; padding-block: 29px; }
    .cover-copy { display: contents; }
    .cover .eyebrow { grid-area: 1 / 1; align-self: end; font-size: 14px; gap: 7px; }
    .cover .eyebrow span { width: 18px; flex-shrink: 0; }
    .portrait figcaption h1 { font-size: 19px; }
    .portrait { grid-area: 1 / 2; width: min(100%, 175px);  }

    .lede { grid-area: 1 / 1; }
    .hero-ctas { grid-column: 1 / -1; }
    .lede { margin: 0; font-size: clamp(16px, 4.1vw, 18px); line-height: 1.5; }
    .hero-ctas { gap: 16px; margin-top: 10px; }
    .practice { padding: 16px; }
    .bio { grid-template-columns: 1fr; gap: 18px; }
    .bio img { max-width: 120px; }
}

.whatsapp-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 9px 18px;
    border: 1px solid #386554;
    border-radius: 8px;
    background: #edf6ef;
    color: #184f3b;
    font-weight: 650;
}
.whatsapp-button:hover { background: #d6eddd; }

.letterhead {
    background: white;
    color: var(--ink);
    border-top: 1px solid #d6dce3;
}
.footer-main {
    display: grid;
    grid-template-columns: .85fr 1.1fr 1fr;
    align-items: start;
    gap: clamp(22px, 4vw, 72px);
    padding-block: 42px 35px;
}
.footer-logo img { width: min(180px, 100%); height: auto; }
.footer-main h2 { font: 700 21px/1.25 var(--sans); margin: 0 0 14px; }
.footer-reach dl { display: grid; gap: 5px; margin: 0; }
.footer-reach dl div { display: grid; grid-template-columns: minmax(64px,auto) 1fr; gap: 12px; }
.footer-reach dt { color: var(--muted); }
.footer-reach dd { margin: 0; overflow-wrap: anywhere; }
.footer-location address { font-style: normal; max-width: 34ch; margin-bottom: 16px; }
.footer-nav { display: flex; gap: 24px; border-top: 1px solid var(--brass); color: var(--muted); padding-block: 15px 20px; font-size: 15px; }
.letterhead a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media(max-width: 760px) {
    .footer-main { grid-template-columns: 1fr; gap: 24px; padding-block: 28px; }
    .footer-logo img { width: 140px; }
    .footer-main h2 { margin-bottom: 8px; }
    .footer-nav { flex-wrap: wrap; }
}

/* Equal tracks keep the actions aligned when either label wraps. */
.hero-ctas {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    align-items: stretch;
    max-width: 520px;
    gap: 12px;
}
.hero-ctas > a {
    min-height: 50px;
    padding: 10px 14px;
    text-align: center;
    line-height: 1.3;
}
@media (max-width: 560px) {
    .hero-ctas {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 350px;
        justify-self: center;
    }
}
