/* ==========================================================================
   Assos Law — main stylesheet
   Ink navy + brass from the firm's profile. Cormorant Garamond for display,
   Manrope for reading. One signature moment: the balancing scale in the hero.
   ========================================================================== */

@font-face{font-family:"Cormorant Garamond";font-weight:400;font-display:swap;src:url(../fonts/cormorant-garamond-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:600;font-display:swap;src:url(../fonts/cormorant-garamond-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-weight:500;font-style:italic;font-display:swap;src:url(../fonts/cormorant-garamond-latin-500-italic.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-weight:400;font-display:swap;src:url(../fonts/manrope-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-weight:500;font-display:swap;src:url(../fonts/manrope-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-weight:600;font-display:swap;src:url(../fonts/manrope-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Manrope";font-weight:700;font-display:swap;src:url(../fonts/manrope-latin-700-normal.woff2) format("woff2")}

:root{
  --ink:#1B2540;        /* brand navy */
  --ink-deep:#131B31;   /* dark sections */
  --brass:#A8812F;      /* brand gold */
  --brass-lite:#CDA85E; /* gold on dark */
  --paper:#FFFFFF;
  --stone:#F3F2EF;      /* quiet alternate surface */
  --text:#2A3147;
  --muted:#5E6679;
  --line:#E3E1DB;
  --line-strong:#C9C5BB;
  --ok:#2E7D5B; --bad:#B3412F;

  --serif:"Cormorant Garamond","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;

  --step--1:clamp(.84rem,.82rem + .1vw,.9rem);
  --step-0:clamp(1rem,.97rem + .15vw,1.08rem);
  --step-1:clamp(1.2rem,1.12rem + .4vw,1.45rem);
  --step-2:clamp(1.5rem,1.3rem + 1vw,2.1rem);
  --step-3:clamp(2.1rem,1.6rem + 2.4vw,3.4rem);
  --step-4:clamp(2.8rem,1.8rem + 4.6vw,5.6rem);

  --wrap:1200px;
  --gut:clamp(1.25rem,4vw,2.5rem);
  --sec:clamp(4.5rem,9vw,8.5rem);
  --ease:cubic-bezier(.22,.8,.2,1);
  --head-h:76px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 12px);-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:var(--step-0);line-height:1.65;color:var(--text);background:var(--paper);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;display:block}
a{color:var(--ink);text-decoration-color:var(--brass);text-underline-offset:.2em}
a:hover{color:var(--brass)}
p{margin:0 0 1em}
h1,h2,h3{color:var(--ink);margin:0;font-weight:500}
button{font:inherit}
:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:2px}
[hidden]{display:none!important}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1rem;z-index:100}
.skip:focus{left:1rem;top:1rem}

.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.wrap.narrow{max-width:760px}
.section{padding:var(--sec) 0}
.h-display{font-family:var(--serif);font-weight:500;font-size:var(--step-3);line-height:1.04;letter-spacing:-.01em}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem 4rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head p{max-width:46ch;color:var(--muted);margin:0}

/* ---------- Buttons ---------- */
.btn{--bg:transparent;--fg:var(--ink);--bd:var(--ink);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:48px;padding:.75rem 1.4rem;border:1.5px solid var(--bd);background:var(--bg);color:var(--fg);font-family:var(--sans);font-weight:600;font-size:.95rem;letter-spacing:.01em;text-decoration:none;cursor:pointer;overflow:hidden;isolation:isolate;transition:color .35s var(--ease),border-color .35s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--brass);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease);z-index:-1}
.btn:hover{color:#fff;border-color:var(--brass)}
.btn:hover::before{transform:scaleX(1);transform-origin:left}
.btn-solid{--bg:var(--ink);--fg:#fff}
.btn-line{--bg:transparent}
.btn-ghost{--bd:transparent;--fg:var(--muted)}
.btn-ghost::before{display:none}
.btn-ghost:hover{color:var(--ink);border-color:transparent}
.dark .btn-line{--fg:#fff;--bd:rgba(255,255,255,.45)}

/* ---------- Header ---------- */
.site-head{position:fixed;inset:0 0 auto;z-index:50;height:var(--head-h);display:flex;align-items:center;background:rgba(255,255,255,0);transition:background .4s var(--ease),box-shadow .4s var(--ease),transform .45s var(--ease)}
.site-head.is-solid{background:rgba(255,255,255,.94);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);box-shadow:0 1px 0 var(--line)}
.site-head.is-hidden{transform:translateY(-100%)}
.head-row{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.brand-mark{width:40px;height:40px;color:var(--ink)}
.brand:hover .mark-beam{transform:rotate(-6deg)}
.mark-beam{transform-box:view-box;transform-origin:50px 40px;transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.brand-word{font-family:var(--serif);font-weight:600;font-size:1.5rem;letter-spacing:.14em;text-transform:uppercase;line-height:1}
.brand-word span{color:var(--brass);font-weight:400}
.nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem)}
.nav a:not(.btn){position:relative;text-decoration:none;font-weight:500;font-size:.95rem;color:var(--ink);padding:.3rem 0}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--brass);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.nav a:not(.btn):hover::after,.nav a.is-current::after{transform:scaleX(1);transform-origin:left}
.nav-cta{min-height:42px;padding:.55rem 1.1rem}
.menu-btn{display:none;width:46px;height:46px;border:0;background:transparent;position:relative;cursor:pointer}
.menu-btn span:not(.sr){position:absolute;left:11px;right:11px;height:2px;background:var(--ink);transition:transform .35s var(--ease),top .35s var(--ease)}
.menu-btn span:nth-child(1){top:18px}.menu-btn span:nth-child(2){top:26px}
.menu-btn[aria-expanded="true"] span:nth-child(1){top:22px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){top:22px;transform:rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{padding-top:calc(var(--head-h) + clamp(2rem,6vw,5rem));padding-bottom:clamp(2.5rem,5vw,4rem);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;right:-10vw;top:-10vw;width:60vw;height:60vw;border-radius:50%;background:radial-gradient(closest-side,rgba(168,129,47,.10),rgba(168,129,47,0));pointer-events:none}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,5rem);align-items:center;position:relative}
.hero-kicker{font-size:var(--step--1);font-weight:600;color:var(--brass);letter-spacing:.02em;margin-bottom:1.4rem}
.hero-title{font-family:var(--serif);font-weight:500;font-size:clamp(2.7rem,1.6rem + 3.6vw,4.4rem);line-height:.98;letter-spacing:-.02em;margin-bottom:1.6rem}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.hero-title .line>span{display:inline-block}
.hero-lede{font-size:var(--step-1);line-height:1.5;color:var(--muted);max-width:40ch;margin-bottom:2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-bottom:2.4rem}
.hero-strap{list-style:none;margin:0;padding:1.2rem 0 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;font-size:var(--step--1);color:var(--muted);font-weight:500}
.hero-strap li{position:relative;padding-left:1rem}
.hero-strap li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;background:var(--brass);transform:rotate(45deg)}

.scale{margin:0;color:var(--ink);position:relative;touch-action:pan-y}
.scale svg{width:100%;height:auto;overflow:visible}
.sc-beam{transform-box:view-box;transform-origin:300px 196px;transform:rotate(calc(var(--tilt,0) * 1deg))}
.sc-pan-l{transform-box:view-box;transform-origin:85px 196px;transform:rotate(calc(var(--tilt,0) * -1deg))}
.sc-pan-r{transform-box:view-box;transform-origin:515px 196px;transform:rotate(calc(var(--tilt,0) * -1deg))}
.sc-label{font-family:var(--serif);font-style:italic;font-weight:500;font-size:26px;fill:var(--ink)}
.scale figcaption{text-align:center;font-size:var(--step--1);color:var(--muted);margin-top:.6rem}

/* Load sequence (js adds .is-loaded to <html>) */
.js [data-load]{opacity:0;transform:translateY(24px)}
.js .hero-title [data-load]{opacity:1;transform:translateY(105%)}
.js.is-loaded [data-load]{opacity:1;transform:none;transition:transform 1.1s var(--ease),opacity .9s var(--ease);transition-delay:calc(var(--d,0) * 1ms)}
[data-load="1"]{--d:100}[data-load="2"]{--d:180}[data-load="3"]{--d:280}[data-load="4"]{--d:380}[data-load="5"]{--d:620}[data-load="6"]{--d:760}[data-load="7"]{--d:900}
.js .sc-a{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--ease) .15s}
.js .sc-dot{transform-box:fill-box;transform-origin:center;transform:translateY(-80px);opacity:0;transition:transform .9s cubic-bezier(.3,1.5,.5,1) .9s,opacity .3s ease .9s}
.js .sc-bar{transform-box:fill-box;transform-origin:center;transform:scaleX(0);transition:transform 1s var(--ease) .6s}
.js .sc-pan path,.js .sc-label{opacity:0;transition:opacity .6s ease 1.1s}
.js .sc-base{stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.2s var(--ease) .2s}
.js.is-loaded .sc-a{clip-path:inset(0 0 0 0)}
.js.is-loaded .sc-dot{transform:none;opacity:1}
.js.is-loaded .sc-bar{transform:none}
.js.is-loaded .sc-pan path,.js.is-loaded .sc-label{opacity:1}
.js.is-loaded .sc-base{stroke-dashoffset:0}

.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(3rem,6vw,5rem);position:relative}
.facts::before,.foot-base::before{content:"";position:absolute;left:var(--gut);right:var(--gut);top:0;height:1px;background:var(--line)}
.foot-base::before{background:rgba(255,255,255,.1)}
.fact{padding:1.6rem 1.4rem 0 0}
.fact+.fact{padding-left:1.4rem;border-left:1px solid var(--line)}
.fact strong{display:block;font-feature-settings:"lnum";font-family:var(--serif);font-weight:500;font-size:var(--step-3);line-height:1;color:var(--ink);margin-bottom:.5rem;font-variant-numeric:lining-nums}
.fact>span{font-size:var(--step--1);color:var(--muted);display:block;max-width:24ch}

/* ---------- Heading reveal ---------- */
.js [data-reveal]{clip-path:inset(0 0 100% 0);transform:translateY(.3em);transition:clip-path 1s var(--ease),transform 1s var(--ease)}
.js [data-reveal].is-in{clip-path:inset(0 0 -.2em 0);transform:none}

/* ---------- About ---------- */
.about{background:var(--stone)}
.about-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.about-text p{max-width:62ch}
.about-text p:first-child{font-size:var(--step-1);line-height:1.55;color:var(--ink)}

.lifecycle{--p:0;list-style:none;margin:clamp(3.5rem,7vw,6rem) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;position:relative}
.lifecycle::before,.lifecycle::after{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--line-strong)}
.lifecycle::after{background:var(--brass);transform-origin:left;transform:scaleX(var(--p))}
.life-step{position:relative;padding-top:2.6rem}
.life-node{position:absolute;top:0;left:0;width:20px;height:20px;border-radius:50%;background:var(--stone);border:2px solid var(--line-strong);z-index:1;transition:border-color .4s,background .4s,transform .5s cubic-bezier(.3,1.6,.5,1)}
.life-step.is-lit .life-node{border-color:var(--brass);background:var(--brass);transform:scale(1.15)}
.life-num{font-family:var(--serif);font-size:var(--step-1);color:var(--brass);display:block;margin-bottom:.3rem}
.life-step h3{font-family:var(--serif);font-size:var(--step-2);line-height:1.1;margin-bottom:.6rem}
.life-step p{color:var(--muted);font-size:var(--step--1);max-width:30ch}

/* ---------- Why / dark ---------- */
.dark{background:var(--ink-deep);color:#D6DAE4}
.dark h2,.dark h3{color:#fff}
.why-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,6rem)}
.why-note{margin-top:1.6rem;max-width:40ch;color:#AEB5C6}
.why-list{list-style:none;margin:0;padding:0;counter-reset:w}
.why-list li{position:relative;padding:1.3rem 0 1.3rem 2.6rem;border-top:1px solid rgba(255,255,255,.12);font-size:var(--step-1);line-height:1.45;color:#fff}
.why-list li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
.why-list li::before{content:"";position:absolute;left:0;top:1.95rem;width:18px;height:2px;background:var(--brass-lite)}
.vm{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);margin-top:clamp(4rem,8vw,7rem)}
.vm-item h3{font-family:var(--sans);font-size:var(--step--1);font-weight:600;color:var(--brass-lite);margin-bottom:1rem;letter-spacing:.02em}
.vm-item p{font-family:var(--serif);font-size:var(--step-2);line-height:1.25;color:#fff;margin:0;max-width:28ch}

/* ---------- Practice areas ---------- */
.px{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(2rem,5vw,5rem);align-items:start}
.px-index{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.px-tab{position:relative;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:1rem 2.4rem 1rem 0;font-family:var(--serif);font-size:var(--step-2);line-height:1.15;color:var(--muted);cursor:pointer;transition:color .3s,padding .5s var(--ease)}
.px-tab::after{content:"";position:absolute;right:.4rem;top:50%;width:12px;height:12px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateY(-50%) rotate(45deg) scale(.6);opacity:0;transition:opacity .3s,transform .4s var(--ease)}
.px-tab:hover{color:var(--ink)}
.px-tab[aria-selected="true"]{color:var(--ink);padding-left:1.2rem}
.px-tab[aria-selected="true"]::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:3px;background:var(--brass)}
.px-tab[aria-selected="true"]::after{opacity:1;transform:translateY(-50%) rotate(45deg) scale(1);color:var(--brass)}
.px-panels{position:sticky;top:calc(var(--head-h) + 2rem)}
.px-panel{background:var(--ink);color:#fff;padding:clamp(2rem,4vw,3.2rem);position:relative;overflow:hidden}
.px-panel::after{content:"";position:absolute;right:-60px;bottom:-60px;width:220px;height:220px;border:1px solid rgba(205,168,94,.25);border-radius:50%}
.px-panel h3{font-family:var(--serif);font-size:var(--step-3);line-height:1.02;color:#fff;margin-bottom:1.6rem;max-width:14ch}
.px-panel ul{list-style:none;margin:0 0 2rem;padding:0}
.px-panel li{padding:.75rem 0;border-top:1px solid rgba(255,255,255,.14);color:#D6DAE4}
.px-panel li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.px-panel .btn{--fg:#fff;--bd:rgba(255,255,255,.5)}
.px-panel.is-entering h3,.px-panel.is-entering li,.px-panel.is-entering .btn{animation:pxIn .6s var(--ease) both}
.px-panel.is-entering li:nth-child(1){animation-delay:.05s}.px-panel.is-entering li:nth-child(2){animation-delay:.1s}.px-panel.is-entering li:nth-child(3){animation-delay:.15s}.px-panel.is-entering li:nth-child(4){animation-delay:.2s}.px-panel.is-entering li:nth-child(5){animation-delay:.25s}.px-panel.is-entering li:nth-child(6){animation-delay:.3s}.px-panel.is-entering .btn{animation-delay:.35s}
@keyframes pxIn{from{opacity:0;transform:translateY(14px)}}
.px-acc{display:none}

/* ---------- Sectors marquee ---------- */
.sectors{padding:clamp(3.5rem,7vw,6rem) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.sectors-title{font-family:var(--sans);font-size:var(--step-0);font-weight:500;color:var(--muted);max-width:52ch;margin-bottom:2rem}
.marquee{display:flex;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;flex-shrink:0;gap:0;animation:marquee 38s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:var(--serif);font-size:clamp(2.6rem,1.6rem + 5vw,6rem);line-height:1.1;font-weight:500;color:var(--ink);white-space:nowrap;padding:0 .35em;display:flex;align-items:center;gap:.7em}
.marquee-track span::after{content:"";width:.2em;height:.2em;background:var(--brass);transform:rotate(45deg);flex-shrink:0}
.marquee-track span:nth-child(even){color:transparent;-webkit-text-stroke:1px var(--ink)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Team ---------- */
.people{display:grid;gap:clamp(3rem,6vw,5rem)}
.person{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(1.5rem,5vw,4.5rem);align-items:start;padding-top:clamp(2rem,4vw,3rem);border-top:1px solid var(--line)}
.person-photo{position:relative;aspect-ratio:3/4;background:var(--stone);overflow:hidden}
.person-photo::after{content:"";position:absolute;left:14px;top:14px;right:-14px;bottom:-14px;border:1px solid var(--brass);z-index:-1}
.person-photo{isolation:isolate;overflow:visible}
.person-photo img{width:100%;height:100%;object-fit:cover;object-position:center 20%;filter:grayscale(.15);transition:filter .6s var(--ease)}
.person:hover .person-photo img{filter:none}
.monogram{width:100%;height:100%;display:grid;place-items:center;background:var(--ink);color:var(--brass-lite);font-family:var(--serif);font-size:5rem;letter-spacing:.06em}
.person-body h3{font-family:var(--serif);font-size:var(--step-3);line-height:1.02;margin-bottom:.5rem}
.person-role{font-weight:600;color:var(--brass);margin-bottom:1.4rem}
.person-role span{color:var(--muted);font-weight:500}
.person-role span::before{content:"";display:inline-block;width:1px;height:.9em;background:var(--line-strong);margin:0 .7rem;vertical-align:-.1em}
.person-body>p{max-width:64ch}
.creds{list-style:none;margin:1.4rem 0;padding:0;display:grid;gap:.4rem}
.creds li{position:relative;padding-left:1.4rem;font-size:var(--step--1);color:var(--muted)}
.creds li::before{content:"";position:absolute;left:0;top:.7em;width:.7rem;height:1.5px;background:var(--brass)}
.more summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:var(--ink);padding:.3rem 0;border-bottom:1.5px solid var(--brass)}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";font-size:1.2em;line-height:1;transition:transform .35s var(--ease)}
.more[open] summary::after{transform:rotate(45deg)}
.more .more-close,.more[open] .more-open{display:none}
.more[open] .more-close{display:inline}
.more p{max-width:64ch;margin-top:1rem}
.more[open] p{animation:pxIn .5s var(--ease) both}

/* ---------- Booking ---------- */
.book{background:var(--stone)}
.book-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.book-intro>p{max-width:44ch;margin-top:1.4rem}
.next{list-style:none;counter-reset:n;margin:2rem 0;padding:0}
.next li{counter-increment:n;position:relative;padding:.9rem 0 .9rem 2.8rem;border-top:1px solid var(--line-strong)}
.next li::before{content:counter(n);position:absolute;left:0;top:.75rem;width:1.8rem;height:1.8rem;border-radius:50%;border:1.5px solid var(--brass);display:grid;place-items:center;font-size:.8rem;font-weight:700;color:var(--brass)}
.book-direct{font-size:var(--step--1);color:var(--muted)}

.bf{background:var(--paper);padding:clamp(1.5rem,4vw,2.8rem);box-shadow:0 30px 60px -30px rgba(27,37,64,.35);position:relative}
.bf-progress{position:absolute;left:0;right:0;top:0;height:3px;background:var(--line)}
.bf-progress span{display:block;height:100%;width:33.33%;background:var(--brass);transition:width .6s var(--ease)}
.bf-steps{list-style:none;counter-reset:s;margin:0 0 1.8rem;padding:0;display:flex;gap:1.2rem;font-size:var(--step--1);color:var(--muted);font-weight:600;flex-wrap:wrap}
.bf-steps li{counter-increment:s;display:flex;align-items:center;gap:.5rem;transition:color .3s}
.bf-steps li::before{content:counter(s);width:1.6rem;height:1.6rem;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center;font-size:.75rem;transition:all .3s}
.bf-steps li.is-on{color:var(--ink)}
.bf-steps li.is-on::before{background:var(--ink);border-color:var(--ink);color:#fff}
.bf-steps li.is-done::before{content:"✓";background:var(--brass);border-color:var(--brass);color:#fff}
.bf-step{border:0;margin:0;padding:0;min-width:0;display:none}
.bf-step.is-on{display:block;animation:stepIn .5s var(--ease) both}
.bf-step.is-back{animation-name:stepBack}
@keyframes stepIn{from{opacity:0;transform:translateX(28px)}}
@keyframes stepBack{from{opacity:0;transform:translateX(-28px)}}
.bf-q{font-family:var(--serif);font-size:var(--step-1);color:var(--ink);margin:1.4rem 0 .8rem}
.bf-q:first-of-type{margin-top:0}
.bf-q .tz{font-family:var(--sans);font-size:.8rem;color:var(--muted);margin-left:.4rem}

.choice-grid{display:grid;gap:.7rem}
.choice-grid.two{grid-template-columns:1fr 1fr}
.choice-grid.four{grid-template-columns:1fr 1fr}
.choice{position:relative;cursor:pointer}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice>span{display:block;height:100%;border:1.5px solid var(--line);padding:1rem 1.1rem;transition:border-color .25s,background .25s,box-shadow .25s}
.choice strong{display:block;color:var(--ink);font-size:1rem;margin-bottom:.25rem}
.choice small{display:block;color:var(--muted);font-size:.85rem;line-height:1.45}
.choice.small>span{padding:.8rem 1rem;font-weight:500;color:var(--ink);font-size:.93rem}
.choice:hover>span{border-color:var(--line-strong)}
.choice input:checked+span{border-color:var(--ink);background:#F7F7FA;box-shadow:inset 3px 0 0 var(--brass)}
.choice input:focus-visible+span{outline:3px solid var(--brass);outline-offset:2px}

.field{display:block;margin-top:1.2rem}
.field>span{display:block;font-weight:600;font-size:.9rem;color:var(--ink);margin-bottom:.45rem}
.field em{font-style:normal;font-weight:500;color:var(--muted);font-size:.82rem;margin-left:.3rem}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:0;padding:.8rem .9rem;transition:border-color .25s,box-shadow .25s;appearance:none;-webkit-appearance:none}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 55%,calc(100% - 15px) 55%;background-size:5px 5px;background-repeat:no-repeat;padding-right:2.5rem}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(168,129,47,.25)}
.field.is-bad input{border-color:var(--bad)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.hp{position:absolute;left:-9999px}

.days{display:flex;gap:.5rem;overflow-x:auto;padding:.2rem .1rem 1rem;scroll-snap-type:x mandatory;scrollbar-width:thin}
.day{flex:0 0 auto;scroll-snap-align:start;width:4.6rem;border:1.5px solid var(--line);background:var(--paper);padding:.6rem .3rem;text-align:center;cursor:pointer;color:var(--ink);transition:all .25s}
.day small{display:block;font-size:.72rem;color:var(--muted);font-weight:600}
.day b{display:block;font-variant-numeric:lining-nums;font-family:var(--serif);font-size:1.7rem;font-weight:500;line-height:1.1}
.day:hover{border-color:var(--line-strong)}
.day[aria-checked="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.day[aria-checked="true"] small{color:var(--brass-lite)}
.day:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:.5rem}
.slot{position:relative;cursor:pointer}
.slot input{position:absolute;opacity:0}
.slot span{display:block;text-align:center;border:1.5px solid var(--line);padding:.7rem .4rem;font-weight:600;color:var(--ink);transition:all .25s;font-variant-numeric:tabular-nums}
.slot input:checked+span{background:var(--ink);border-color:var(--ink);color:#fff}
.slot input:focus-visible+span{outline:3px solid var(--brass);outline-offset:2px}
.slot input:disabled+span{opacity:.35;text-decoration:line-through;cursor:not-allowed}
.slots.is-waiting{opacity:.5;pointer-events:none}

.bf-nav{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.8rem;flex-wrap:wrap}
.bf-error{color:var(--bad);font-weight:600;font-size:.92rem;margin:1rem 0 0}
.bf-summary{margin:1.4rem 0 0;padding:.9rem 1rem;background:var(--stone);font-size:.9rem;color:var(--ink);border-left:3px solid var(--brass)}
.bf-summary:empty{display:none}
.bf-privacy{font-size:.82rem;color:var(--muted);margin:1rem 0 0;text-align:right}
[data-submit].is-busy{pointer-events:none;opacity:.75}
[data-submit].is-busy::after{content:"";width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.bf-done{text-align:center;padding:1.5rem 0 .5rem;outline:none}
.bf-done:not([hidden]){animation:stepIn .6s var(--ease) both}
.done-mark{width:120px;height:120px;margin:0 auto 1.2rem;color:var(--ink)}
.bf-done .mark-beam{animation:settle 2.2s cubic-bezier(.2,.8,.2,1) both}
@keyframes settle{0%{transform:rotate(-16deg)}25%{transform:rotate(10deg)}45%{transform:rotate(-6deg)}65%{transform:rotate(3deg)}82%{transform:rotate(-1deg)}100%{transform:rotate(0)}}
.bf-done h3{font-family:var(--serif);font-size:var(--step-3);line-height:1.05;margin-bottom:1rem}
.bf-done p{max-width:44ch;margin:0 auto 1.6rem}
.bf-done strong{font-variant-numeric:tabular-nums;letter-spacing:.05em;color:var(--brass)}
.done-actions{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1.2rem}
.linkish{background:none;border:0;color:var(--muted);text-decoration:underline;text-underline-offset:.2em;cursor:pointer}

/* ---------- Contact ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.contact-person{margin-top:1.4rem;color:var(--muted)}
.contact-list{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 2rem}
.contact-list>div{padding:1.3rem 0;border-top:1px solid var(--line)}
.contact-list dt{font-size:var(--step--1);font-weight:600;color:var(--brass);margin-bottom:.4rem}
.contact-list dd{margin:0;font-family:var(--serif);font-size:var(--step-1);line-height:1.3;color:var(--ink)}
.contact-list dd a{text-decoration:none;background:linear-gradient(var(--brass),var(--brass)) 0 100%/0 1.5px no-repeat;transition:background-size .45s var(--ease)}
.contact-list dd a:hover{background-size:100% 1.5px;color:var(--ink)}

/* ---------- Footer ---------- */
.site-foot{background:var(--ink-deep);color:#AEB5C6;padding:clamp(3.5rem,7vw,5.5rem) 0 1.5rem;font-size:var(--step--1)}
.site-foot a{color:#fff;text-decoration:none}
.site-foot a:hover{color:var(--brass-lite)}
.foot-grid{display:grid;grid-template-columns:1.3fr .8fr 1fr;gap:2.5rem}
.foot-brand img{width:260px;height:auto;margin-bottom:1.2rem}
.foot-brand p{max-width:34ch}
.foot-nav{display:flex;flex-direction:column;gap:.6rem}
.foot-base{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.4rem;position:relative;font-size:.8rem}
.foot-base p{margin:0}

.wa-float{position:fixed;right:clamp(1rem,2.5vw,1.6rem);bottom:calc(clamp(1rem,2.5vw,1.6rem) + env(safe-area-inset-bottom));z-index:40;width:56px;height:56px;border-radius:50%;background:#25D366;color:#fff;display:grid;place-items:center;box-shadow:0 10px 24px -8px rgba(0,0,0,.35);transform:scale(0);transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.wa-float.is-shown{transform:scale(1)}
.wa-float:hover{color:#fff;transform:scale(1.08)}
.wa-float svg{width:30px;height:30px}

.page-plain{padding-top:calc(var(--head-h) + 4rem)}
.entry-body{margin-top:2rem}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .hero-grid{grid-template-columns:1fr}
  .scale{max-width:520px;margin:0 auto;width:100%}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fact:nth-child(3){padding-left:0;border-left:0}
  .fact:nth-child(n+3){border-top:1px solid var(--line);margin-top:1.4rem}
  .book-grid,.contact-grid,.why-grid,.about-grid{grid-template-columns:1fr}
  .px{display:none}
  .px-acc{display:block;border-top:1px solid var(--line)}
  .px-acc details{border-bottom:1px solid var(--line)}
  .px-acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 0;font-family:var(--serif);font-size:var(--step-2);color:var(--ink);line-height:1.15}
  .px-acc summary::-webkit-details-marker{display:none}
  .px-acc summary::after{content:"+";font-family:var(--sans);font-size:1.5rem;color:var(--brass);transition:transform .35s var(--ease)}
  .px-acc details[open] summary::after{transform:rotate(45deg)}
  .px-acc ul{list-style:none;margin:0 0 1.2rem;padding:0}
  .px-acc li{padding:.55rem 0 .55rem 1.3rem;position:relative;color:var(--muted)}
  .px-acc li::before{content:"";position:absolute;left:0;top:1.2em;width:.7rem;height:1.5px;background:var(--brass)}
  .px-acc .btn{margin-bottom:1.4rem}
  .px-acc details[open] ul{animation:pxIn .45s var(--ease) both}
  .section-head{grid-template-columns:1fr;gap:1.2rem}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
@media (max-width:860px){
  .menu-btn{display:block;z-index:2}
  .nav{position:fixed;inset:0;flex-direction:column;justify-content:center;align-items:flex-start;gap:1.2rem;padding:calc(var(--head-h) + 1rem) var(--gut) 2rem;background:var(--paper);transform:translateY(-100%);visibility:hidden;transition:transform .6s var(--ease),visibility 0s linear .6s}
  .nav.is-open{transform:none;visibility:visible;transition:transform .6s var(--ease)}
  .nav a:not(.btn){font-family:var(--serif);font-size:2.4rem;line-height:1.1;font-weight:500}
  .nav.is-open a{animation:pxIn .6s var(--ease) both}
  .nav.is-open a:nth-child(2){animation-delay:.06s}.nav.is-open a:nth-child(3){animation-delay:.12s}.nav.is-open a:nth-child(4){animation-delay:.18s}.nav.is-open a:nth-child(5){animation-delay:.24s}
  .nav-cta{margin-top:1rem;min-height:52px;padding:.8rem 1.4rem}
  .lifecycle{grid-template-columns:1fr;gap:0;padding-left:2.4rem}
  .lifecycle::before,.lifecycle::after{left:9px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .lifecycle::after{transform-origin:top;transform:scaleY(var(--p))}
  .life-step{padding:0 0 2.2rem}
  .life-node{left:-2.4rem;top:.3rem}
  .vm{grid-template-columns:1fr}
  .person{grid-template-columns:1fr}
  .person-photo{max-width:260px}
  .contact-list{grid-template-columns:1fr}
}
@media (max-width:560px){
  .choice-grid.two,.choice-grid.four,.field-row{grid-template-columns:1fr}
  .bf-steps{gap:.8rem}
  .bf-steps li{font-size:0;gap:0}
  .bf-steps li.is-on{font-size:var(--step--1);gap:.5rem}
  .bf-nav{justify-content:stretch}
  .bf-nav .btn{flex:1}
  .facts .fact{padding-right:.8rem}
  .fact+.fact{padding-left:.8rem}
  .foot-grid{grid-template-columns:1fr}
  .hero-actions .btn{flex:1 1 100%}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .marquee-track{animation:none;flex-wrap:wrap}
}

/* ==========================================================================
   COLOUR EDITION
   Night navy, brass, and jacaranda purple — for the jacaranda trees of
   Jacaranda Street, Arusha, where the firm's office is.
   ========================================================================== */
:root{
  --jac:#7A5AB0; --jac-lite:#B39DDB; --jac-deep:#2B1F4A;
  --sand:#F2E9D8; --lav:#F1ECF8; --night:#10172B;
}

/* Header: light type over the dark hero, navy glass once scrolled */
.site-head .brand,.site-head .nav a:not(.btn){color:#fff}
.site-head .brand-mark{color:#fff}
.site-head.is-solid{background:rgba(16,23,43,.9);box-shadow:0 1px 0 rgba(255,255,255,.08)}
.nav-cta{--bg:var(--brass);--bd:var(--brass);--fg:#fff}
.nav-cta::before{background:#fff}
.nav-cta:hover{color:var(--ink);border-color:#fff}
.menu-btn span:not(.sr){background:#fff}

/* Hero */
.hero{background:
  radial-gradient(ellipse 60% 70% at 85% 25%,rgba(122,90,176,.55),transparent 65%),
  radial-gradient(ellipse 50% 60% at 5% 100%,rgba(168,129,47,.28),transparent 60%),
  linear-gradient(160deg,#16203A 0%,var(--night) 60%,#1A1433 100%);color:#C9CFDD}
.hero::before{right:auto;left:0;top:0;width:100%;height:100%;border-radius:0;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 1px,transparent 1px 46px)}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,var(--brass),var(--brass-lite) 40%,var(--jac) 100%)}
.emblems{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-kicker{color:var(--brass-lite)}
.hero-title{color:#fff}
.hero-lede{color:#C9CFDD}
.hero .btn-solid{--bg:var(--brass);--bd:var(--brass);--fg:#fff}
.hero .btn-solid::before{background:#fff}
.hero .btn-solid:hover{color:var(--ink);border-color:#fff}
.hero .btn-line{--fg:#fff;--bd:rgba(255,255,255,.5)}
.hero-strap{border-top-color:rgba(255,255,255,.14);color:#C9CFDD}
.hero-strap li::before{background:var(--brass-lite)}
.scale{color:#fff}
.sc-label{fill:#fff}
.sc-base{stroke:rgba(255,255,255,.3)}
.scale figcaption{color:#9AA3B8}
.scale svg{filter:drop-shadow(0 30px 40px rgba(0,0,0,.35))}
.facts::before{background:rgba(255,255,255,.14)}
.fact+.fact{border-left-color:rgba(255,255,255,.14)}
.fact strong{color:var(--brass-lite)}
.fact>span{color:#C9CFDD}

/* About: warm sand */
.about{background:var(--sand)}
.about-text p:first-child{color:var(--ink)}
.lifecycle::before{background:#D8CBB0}
.life-node{background:var(--sand);border-color:#CDBE9E}
.life-step.is-lit .life-node{box-shadow:0 0 0 6px rgba(168,129,47,.18)}

/* Why: jacaranda night */
.why{background:
  radial-gradient(ellipse 50% 60% at 100% 0%,rgba(122,90,176,.45),transparent 60%),
  linear-gradient(150deg,var(--jac-deep),#1B2540 70%)}
.why-list li::before{background:var(--brass-lite);height:3px}
.vm-item{padding:2rem;background:rgba(255,255,255,.05);border-top:3px solid var(--brass-lite)}
.vm-item:last-child{border-top-color:var(--jac-lite)}
.vm-item:last-child h3{color:var(--jac-lite)}

/* Practice: soft lavender, panel glows */
.practice{background:var(--lav)}
.px-index{border-top-color:#DCD3EC}
.px-tab{border-bottom-color:#DCD3EC;color:#6E6590}
.px-tab[aria-selected="true"]{background:#fff;box-shadow:0 10px 30px -18px rgba(43,31,74,.5)}
.px-panel{background:linear-gradient(155deg,#1B2540 0%,#2F2356 100%);border-top:4px solid var(--brass)}
.px-panel::after{border-color:rgba(179,157,219,.35)}
.px-panel li{padding-left:1.4rem;position:relative}
.px-panel li::before{content:"";position:absolute;left:0;top:1.3em;width:7px;height:7px;background:var(--brass-lite);transform:rotate(45deg)}

/* Sectors: a band of brass */
.sectors{background:linear-gradient(100deg,#8E6B22,var(--brass) 45%,#C29A4C);border:0}
.sectors-title{color:#fff;opacity:.9}
.marquee-track span{color:var(--night)}
.marquee-track span:nth-child(even){-webkit-text-stroke:1.2px #fff}
.marquee-track span::after{background:#fff}

/* Team: colour blocks behind portraits */
.person-photo::after{border:0;background:var(--brass);opacity:.9}
.person:nth-child(2) .person-photo::after{background:var(--jac)}
.person:nth-child(3) .person-photo::after{background:var(--ink)}
.monogram{background:linear-gradient(150deg,var(--jac),var(--jac-deep));color:#fff}
.person-role{color:var(--jac)}
.person:nth-child(odd) .person-role{color:var(--brass)}

/* Booking: night with a jacaranda glow */
.book{background:
  radial-gradient(ellipse 55% 60% at 0% 0%,rgba(122,90,176,.45),transparent 60%),
  radial-gradient(ellipse 40% 50% at 100% 100%,rgba(168,129,47,.25),transparent 60%),
  var(--night);color:#C9CFDD}
.book h2{color:#fff}
.next li{border-top-color:rgba(255,255,255,.14);color:#E4E7EF}
.next li::before{border-color:var(--brass-lite);color:var(--brass-lite)}
.book-direct{color:#9AA3B8}
.book-direct a{color:#fff}
.bf{border-top:4px solid var(--brass);box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.bf-progress{top:-4px;height:4px;background:transparent}
.bf-progress span{background:linear-gradient(90deg,var(--jac),var(--brass-lite))}
.choice input:checked+span{background:var(--lav);border-color:var(--jac);box-shadow:inset 4px 0 0 var(--brass)}
.day[aria-checked="true"],.slot input:checked+span{background:var(--jac);border-color:var(--jac)}
.bf-steps li.is-on::before{background:var(--jac);border-color:var(--jac)}

/* Contact: sand again, framing the page */
.contact{background:var(--sand)}
.contact-list>div{border-top-color:#D8CBB0}

/* Footer */
.site-foot{background:linear-gradient(180deg,var(--night),#0B1020)}
.site-foot::before{content:"";display:block;height:4px;margin-top:calc(-1 * clamp(3.5rem,7vw,5.5rem));margin-bottom:clamp(3.5rem,7vw,5.5rem);background:linear-gradient(90deg,var(--jac),var(--brass))}

@media (max-width:860px){
  .nav{background:linear-gradient(160deg,#16203A,var(--jac-deep))}
  .nav a:not(.btn){color:#fff}
}
body:not(.home) .site-head{background:rgba(16,23,43,.95)}

.foot-base .credit a{color:var(--brass-lite);background:linear-gradient(var(--brass-lite),var(--brass-lite)) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease)}
.foot-base .credit a:hover{background-size:100% 1px;color:#fff}

.bf-fallback h3{font-family:var(--serif);font-size:var(--step-2);margin-bottom:.8rem}
.book .bf{color:var(--text)}