/* Lote Tree Chambers · v3 · Oxford Navy & Gilt */
:root{
  --ink:#0E1A2E;
  --ink-2:#13233D;
  --stone:#F0EEE5;
  --stone-2:#E8E5D9;
  --paper:#FAF9F3;
  --gilt:#AC8B41;
  --gilt-soft:#C6A96B;
  --line:rgba(14,26,46,.16);
  --line-light:rgba(250,249,243,.16);
  --body:#31394B;
  --body-light:rgba(250,249,243,.78);
  --max:1220px;
  --ff-caps:'Marcellus',serif;
  --ff-display:'Cormorant Garamond',serif;
  --ff-body:'Newsreader',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{font-family:var(--ff-body);font-size:17px;line-height:1.78;color:var(--body);background:var(--paper);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--gilt);color:#fff}
.skip{position:absolute;left:-9999px;top:0;background:var(--gilt);color:var(--ink);padding:12px 20px;z-index:999;font-family:var(--ff-caps);letter-spacing:.15em;text-transform:uppercase;font-size:12px}
.skip:focus{left:0}

/* utilities */
.wrap{max-width:var(--max);margin:0 auto;padding:0 32px}
.eyebrow{font-family:var(--ff-caps);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--gilt)}
.eyebrow::before{content:"";display:inline-block;width:34px;height:1px;background:var(--gilt);vertical-align:middle;margin-right:14px;transform:translateY(-1px)}
h1.sec-title,h2.sec-title{font-family:var(--ff-display);font-weight:500;font-size:clamp(36px,4.4vw,56px);line-height:1.1;color:var(--ink);margin:18px 0 0;letter-spacing:.004em;text-wrap:balance}
.sec-title em{font-style:italic;color:var(--gilt)}
h3.sub-title{font-family:var(--ff-display);font-weight:500;font-size:clamp(26px,3vw,34px);line-height:1.15;color:var(--ink)}
.lede{font-size:19.5px;max-width:64ch;margin-top:24px;text-wrap:pretty}
.on-dark{color:var(--paper)}
.on-dark .lede,.on-dark p{color:var(--body-light)}
.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.22,.61,.36,1),transform .85s cubic-bezier(.22,.61,.36,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .hero-copy>*,.hero-portrait{animation:none!important;opacity:1!important}
}

/* header */
header{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(14,26,46,0);transition:background .35s,box-shadow .35s;color:var(--paper)}
header.scrolled,header.solid{background:rgba(14,26,46,.97);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line-light)}
.nav{display:flex;align-items:center;justify-content:space-between;height:88px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:44px;height:44px;flex:none}
.brand-name{font-family:var(--ff-caps);font-size:16.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--paper);line-height:1.3}
.brand-name small{display:block;font-size:9px;letter-spacing:.44em;color:var(--gilt-soft)}
nav.links{display:flex;gap:28px;align-items:center}
nav.links a{font-family:var(--ff-caps);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--body-light);padding:6px 0;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
nav.links a:hover,nav.links a:focus-visible{color:var(--paper);border-color:var(--gilt)}
nav.links a.active{color:var(--gilt-soft);border-color:var(--gilt)}
nav.links a.cta{border:1px solid var(--gilt);padding:12px 22px;color:var(--paper)}
nav.links a.cta:hover{background:var(--gilt);color:var(--ink)}
.burger{display:none;background:none;border:1px solid var(--line-light);color:var(--paper);font-family:var(--ff-caps);font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:14px 20px;min-height:44px;cursor:pointer}
@media (max-width:1120px){
  nav.links{position:fixed;inset:88px 0 auto 0;background:rgba(14,26,46,.98);flex-direction:column;gap:0;padding:12px 0 28px;transform:translateY(-140%);transition:transform .4s cubic-bezier(.22,.61,.36,1)}
  nav.links.open{transform:none}
  nav.links a{padding:16px 32px;width:100%;text-align:left;border-bottom:1px solid var(--line-light)}
  nav.links a.cta{border:none;margin-top:8px}
  .burger{display:block}
}

/* buttons */
.btn{font-family:var(--ff-caps);font-size:12px;letter-spacing:.24em;text-transform:uppercase;padding:17px 34px;border:1px solid var(--gilt);transition:background .3s,color .3s;display:inline-block;cursor:pointer;appearance:none;-webkit-appearance:none;background:transparent;border-radius:0}
.btn.solid{background:var(--gilt);color:var(--ink)}
.btn.solid:hover{background:var(--gilt-soft)}
.btn.ghost{color:var(--paper)}
.btn.ghost:hover{background:var(--gilt);color:var(--ink)}
.btn.ink{color:var(--ink)}
.btn.ink:hover{background:var(--gilt);color:var(--ink)}

/* home hero */
.hero{position:relative;min-height:100vh;background:linear-gradient(165deg,#13233D 0%,#0E1A2E 52%,#0A1424 100%);color:var(--paper);display:flex;align-items:center;overflow:hidden}
.hero-water{position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);width:min(880px,110vw);opacity:.07;pointer-events:none}
.hero-rule,.page-rule{position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--gilt),var(--gilt-soft))}
.hero-grid{position:relative;display:grid;grid-template-columns:1.2fr .9fr;gap:70px;align-items:center;padding-top:180px;padding-bottom:110px}
.hero-copy>*{opacity:0;animation:rise .9s cubic-bezier(.22,.61,.36,1) forwards}
.hero-copy>*:nth-child(2){animation-delay:.12s}
.hero-copy>*:nth-child(3){animation-delay:.24s}
.hero-copy>*:nth-child(4){animation-delay:.36s}
.hero-copy>*:nth-child(5){animation-delay:.48s}
.hero-copy>*:nth-child(6){animation-delay:.6s}
@keyframes rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:none}}
.hero .eyebrow{color:var(--gilt-soft)}
.hero h1{font-family:var(--ff-display);font-weight:500;font-size:clamp(46px,5.6vw,78px);line-height:1.04;margin:26px 0 0;color:var(--paper)}
.hero .role{margin-top:14px;font-family:var(--ff-caps);font-size:15px;letter-spacing:.4em;text-transform:uppercase;color:var(--gilt-soft)}
.hero .position{margin-top:26px;font-family:var(--ff-display);font-style:italic;font-weight:500;font-size:clamp(22px,2.4vw,30px);color:var(--paper);line-height:1.35;max-width:22ch}
.hero .sub{margin-top:24px;font-size:18.5px;max-width:54ch;color:var(--body-light)}
.hero-ctas{margin-top:42px;display:flex;gap:18px;flex-wrap:wrap}
.hero-portrait{position:relative;opacity:0;animation:rise 1.1s .35s cubic-bezier(.22,.61,.36,1) forwards}
.hero-portrait .ph{position:relative;aspect-ratio:4/5;overflow:hidden}
.hero-portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;filter:saturate(.94)}
.hero-portrait::after{content:"";position:absolute;inset:20px -20px -20px 20px;border:1px solid rgba(198,169,107,.55);pointer-events:none}
.hero-portrait figcaption{margin-top:30px;text-align:right;font-family:var(--ff-caps);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--body-light);line-height:2.1}
.hero-portrait figcaption span{color:var(--gilt-soft)}
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr;gap:64px;padding-top:160px;padding-bottom:90px}
  .hero-portrait{max-width:400px}
  .hero-portrait figcaption{text-align:left}
}

/* interior page hero */
.page-hero{position:relative;background:linear-gradient(165deg,#13233D 0%,#0E1A2E 60%);color:var(--paper);padding:190px 0 90px;overflow:hidden}
.page-hero .hero-water{width:560px;left:auto;right:-8%;top:auto;bottom:-46%;transform:none;opacity:.08}
.page-hero h1{font-family:var(--ff-display);font-weight:500;font-size:clamp(40px,5vw,64px);line-height:1.08;margin:20px 0 0;color:var(--paper);text-wrap:balance}
.page-hero h1 em{font-style:italic;color:var(--gilt-soft)}
.page-hero .eyebrow{color:var(--gilt-soft)}
.page-hero .lede{color:var(--body-light)}

/* credentials band */
.credband{background:var(--ink);border-top:1px solid var(--line-light);color:var(--paper)}
.credband .wrap{display:grid;grid-template-columns:repeat(4,1fr)}
.cred{padding:38px 26px;border-left:1px solid var(--line-light);text-align:center}
.cred:first-child{border-left:none}
.cred .big{font-family:var(--ff-display);font-weight:500;font-size:30px;color:var(--gilt-soft);line-height:1.15}
.cred .small{margin-top:8px;font-family:var(--ff-caps);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--body-light)}
@media (max-width:900px){.credband .wrap{grid-template-columns:1fr 1fr}.cred{border-top:1px solid var(--line-light)}.cred:nth-child(-n+2){border-top:none}.cred:nth-child(odd){border-left:none}}

/* regulation strip */
.regstrip{background:var(--stone);border-bottom:1px solid var(--line)}
.regstrip .wrap{display:flex;align-items:center;justify-content:center;gap:22px;padding:22px 32px;flex-wrap:wrap;text-align:center}
.regstrip img{height:44px;width:auto}
.regstrip p{font-family:var(--ff-caps);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.regstrip a{border-bottom:1px solid var(--gilt);color:var(--ink)}
.regstrip a:hover{color:var(--gilt)}

/* sections */
.sec{padding:120px 0}
.sec.stone{background:var(--stone)}
.sec.ink{background:var(--ink);color:var(--paper)}
.sec.ink .sec-title,.sec.ink h3.sub-title{color:var(--paper)}
.sec.ink p{color:var(--body-light)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:84px;align-items:start}
.grid2 p{margin-bottom:20px;max-width:62ch}
@media (max-width:940px){.grid2{grid-template-columns:1fr;gap:52px}}
.first-letter::first-letter{font-family:var(--ff-display);font-size:64px;line-height:.85;color:var(--gilt);float:left;padding:8px 12px 0 0}

/* ledgers and lists */
.ledger{border-top:2px solid var(--ink)}
.sec.ink .ledger{border-top-color:var(--gilt)}
.led{display:grid;grid-template-columns:200px 1fr;gap:28px;padding:22px 0;border-bottom:1px solid var(--line)}
.sec.ink .led{border-bottom-color:var(--line-light)}
.led .k{font-family:var(--ff-caps);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gilt);padding-top:3px}
.led .v{font-size:16.5px}
.led .v strong{color:var(--ink);font-weight:500}
.sec.ink .led .v strong{color:var(--paper)}
@media (max-width:760px){.led{grid-template-columns:1fr;gap:6px}}
.worklist{list-style:none;border-top:2px solid var(--ink)}
.worklist li{padding:13px 0 13px 30px;border-bottom:1px solid var(--line);position:relative;font-size:16.5px}
.worklist li::before{content:"";position:absolute;left:0;top:24px;width:14px;height:1px;background:var(--gilt)}
.collist{list-style:none;columns:2;column-gap:52px}
.collist.c3{columns:3}
.collist li{padding:9px 0 9px 26px;position:relative;break-inside:avoid;font-size:16px;border-bottom:1px solid var(--line)}
.collist li::before{content:"";position:absolute;left:0;top:20px;width:13px;height:1px;background:var(--gilt)}
.sec.ink .collist li{border-bottom-color:var(--line-light);color:var(--body-light)}
@media (max-width:860px){.collist,.collist.c3{columns:1}}

/* numbered area entries (home) */
.areas{border-top:1px solid var(--line);margin-top:64px}
.area{display:grid;grid-template-columns:110px 300px 1fr;gap:44px;padding:46px 0;border-bottom:1px solid var(--line)}
.area .rn{font-family:var(--ff-display);font-style:italic;font-size:40px;color:var(--gilt);line-height:1}
.area h3{font-family:var(--ff-display);font-weight:500;font-size:27px;line-height:1.2;color:var(--ink)}
.area p{max-width:62ch;margin-bottom:12px}
.area a.more{font-family:var(--ff-caps);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gilt);border-bottom:1px solid transparent}
.area a.more:hover{border-color:var(--gilt)}
@media (max-width:1000px){.area{grid-template-columns:70px 1fr;gap:20px}.area .abody{grid-column:2}}
@media (max-width:640px){.area{grid-template-columns:1fr}.area .abody{grid-column:1}}

/* image bands */
.band{display:grid;grid-template-columns:1fr 1fr;min-height:520px}
.band .b-img{position:relative;min-height:380px}
.band .b-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.band .b-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,26,46,.12),rgba(14,26,46,.32))}
.band .b-copy{padding:96px 72px;display:flex;flex-direction:column;justify-content:center}
.band.on-ink{background:var(--ink);color:var(--paper)}
.band.on-ink .sec-title{color:var(--paper)}
.band.on-ink p{color:var(--body-light)}
.band .b-copy p{margin-bottom:18px;max-width:56ch}
@media (max-width:940px){.band{grid-template-columns:1fr}.band .b-copy{padding:72px 32px}}

/* message from counsel */
.message{background:var(--ink);color:var(--paper);padding:140px 0;position:relative;overflow:hidden}
.message .hero-water{opacity:.06}
.message blockquote{position:relative;font-family:var(--ff-display);font-style:italic;font-weight:500;font-size:clamp(24px,3vw,34px);line-height:1.5;color:var(--paper);max-width:30ch;margin:36px auto 0;text-align:center}
.message .sig{margin-top:44px;text-align:center}
.message .sig img{width:56px;height:56px;margin:0 auto 18px}
.message .sig .name{font-family:var(--ff-caps);font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--gilt-soft)}
.message .sig .role{font-family:var(--ff-caps);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--body-light);margin-top:6px}
.message .eyebrow{display:block;text-align:center}
.message .eyebrow::before{display:none}

/* service blocks */
.svc{padding:88px 0;border-top:1px solid var(--line)}
.svc:nth-of-type(even){background:var(--stone)}
.svc .grid2{gap:70px}
.svc h2{font-family:var(--ff-display);font-weight:500;font-size:clamp(28px,3.4vw,40px);color:var(--ink);line-height:1.15}
.svc .svc-note{margin-top:16px;max-width:56ch}
.svc .svc-note p{margin-bottom:16px}

/* fee panels */
.fee-panels{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-light);border:1px solid var(--line-light);margin-top:70px}
.fee-panel{background:var(--ink);padding:52px 44px}
.fee-panel .k{font-family:var(--ff-caps);font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--gilt-soft)}
.fee-panel .v{font-family:var(--ff-display);font-weight:500;font-size:clamp(34px,3.6vw,46px);color:var(--paper);margin:16px 0 14px}
.fee-panel p{font-size:15.5px;color:var(--body-light);max-width:44ch}
.fee-panel ul{margin-top:14px;list-style:none}
.fee-panel li{padding:8px 0 8px 24px;position:relative;font-size:15px;color:var(--body-light);border-bottom:1px solid var(--line-light)}
.fee-panel li:last-child{border-bottom:none}
.fee-panel li::before{content:"";position:absolute;left:0;top:18px;width:12px;height:1px;background:var(--gilt)}
@media (max-width:860px){.fee-panels{grid-template-columns:1fr}}

/* forms */
form .field{margin-bottom:22px}
form label{display:block;font-family:var(--ff-caps);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink);margin-bottom:9px}
form input,form select,form textarea{width:100%;background:var(--paper);border:1px solid var(--line);padding:15px 16px;font-family:var(--ff-body);font-size:16px;color:var(--ink);transition:border-color .25s}
form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--gilt)}
form textarea{min-height:170px;resize:vertical}
form button{width:100%;background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
form button:hover{background:var(--gilt);border-color:var(--gilt);color:var(--ink)}
.c-block{margin-bottom:34px}
.c-block h3{font-family:var(--ff-caps);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--gilt);margin-bottom:10px}
.c-block p,.c-block a{font-size:18px;color:var(--ink)}
.c-block a{border-bottom:1px solid var(--gilt)}
.c-block a:hover{color:var(--gilt)}
.c-block .fine{font-size:14.5px;font-style:italic;color:var(--body);margin-top:6px}

/* footer */
footer{background:var(--ink);color:var(--body-light);padding:84px 0 46px;position:relative}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gilt),var(--gilt-soft))}
.f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:56px;padding-bottom:60px;border-bottom:1px solid var(--line-light)}
.f-brand img.mark{width:54px;height:54px;margin-bottom:20px}
.f-brand p{font-size:15px;max-width:40ch}
.f-brand .idty{font-family:var(--ff-caps);letter-spacing:.2em;text-transform:uppercase;font-size:13px;color:var(--paper);line-height:2;margin-bottom:14px}
.f-brand .idty span{color:var(--gilt-soft)}
.f-col h4{font-family:var(--ff-caps);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:var(--gilt-soft);margin-bottom:20px}
.f-col li{list-style:none;padding:7px 0;font-size:15px}
.f-col a:hover{color:var(--paper)}
.f-reg{display:flex;align-items:center;gap:18px;margin-top:26px}
.f-reg img{height:46px;background:var(--paper);padding:6px}
.f-disc{padding-top:30px;font-size:13.5px;font-style:italic}
.f-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:14px;font-size:13.5px}
.f-bottom a{border-bottom:1px solid var(--line-light)}
.f-bottom a:hover{color:var(--paper)}
@media (max-width:1000px){.f-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.f-grid{grid-template-columns:1fr}}

/* cookie banner */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--ink);border-top:2px solid var(--gilt);box-shadow:0 -8px 30px rgba(14,26,46,.35)}
.cookiebar[hidden]{display:none}
.cb-inner{max-width:var(--max);margin:0 auto;padding:22px 32px;display:flex;align-items:center;gap:32px;justify-content:space-between}
.cb-text{font-size:14.5px;color:var(--body-light);max-width:76ch;line-height:1.6}
.cb-text a{color:var(--gilt-soft);border-bottom:1px solid var(--gilt)}
.cb-actions{display:flex;gap:12px;flex:none}
.cb-actions .btn{padding:13px 26px;font-size:11px;min-height:44px}
@media (max-width:760px){.cb-inner{flex-direction:column;align-items:stretch;gap:16px;padding:18px 20px}.cb-actions .btn{flex:1;text-align:center}}


/* mobile breathing pass (v7) */
@media (max-width:640px){
  .sec{padding:84px 0}
  .svc{padding:60px 0}
  .page-hero{padding:150px 0 68px}
  .hero h1{font-size:42px;line-height:1.12}
  h1.sec-title,h2.sec-title{line-height:1.18}
  .page-hero h1{line-height:1.16}
  .hero .position{font-size:21px;line-height:1.4}
  .hero .sub,.lede{font-size:17.5px}
  .eyebrow{display:block}
  .eyebrow::before{display:block;width:34px;margin:0 0 12px;transform:none}
  .message .eyebrow::before{display:none}
  .cred{padding:26px 16px}
  .cred .big{font-size:21px}
  .cred .small{font-size:10px;letter-spacing:.15em;margin-top:6px}
  .led{gap:8px;padding:20px 0}
  .area{padding:40px 0;gap:14px}
  .area .rn{margin-bottom:2px}
  .band .b-copy{padding:60px 28px}
  .message{padding:104px 0}
  .message blockquote{font-size:22px;line-height:1.55}
  .fee-panel{padding:38px 26px}
  .grid2{gap:44px}
  .worklist li{padding:12px 0 12px 26px}
}


/* mobile space optimisation (v8) */
@media (max-width:640px){
  .hero-grid{padding-top:128px;padding-bottom:72px;gap:44px}
  .hero-portrait figcaption{margin-top:18px}
  .hero-ctas{margin-top:32px}
  .hero-ctas .btn{width:100%;text-align:center}
  .cred{padding:22px 14px}
  .page-hero{padding:132px 0 58px}
  .sec{padding:72px 0}
  .svc{padding:54px 0}
  .message{padding:88px 0}
  .band .b-img{min-height:300px}
  footer{padding:64px 0 38px}
  .f-grid{gap:34px;padding-bottom:44px}
  .regstrip .wrap{padding:18px 24px;gap:14px}
  .regstrip img{height:36px}
  .cb-text{font-size:13.5px}
  .areas{margin-top:44px}
  .grid2{margin-top:0}
}
@media (max-width:640px){
  .cookiebar .btn.ghost{border-color:var(--gilt-soft)}
}


/* mobile legibility floor (v8) */
@media (max-width:640px){
  .cred .small{font-size:11px;letter-spacing:.14em}
  .message .sig .role{font-size:11.5px}
}