/* Marx & Fensham Incorporated
   Type: Jost (headings, close to the wordmark) + Newsreader (reading text)
   Colour: the logo's own warm black, chalk, and one jacaranda accent */

@font-face{font-family:"Jost";font-weight:300;font-style:normal;font-display:swap;src:url("../fonts/jost-latin-300-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/jost-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Jost";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/jost-latin-500-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/newsreader-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-weight:400;font-style:italic;font-display:swap;src:url("../fonts/newsreader-latin-400-italic.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/newsreader-latin-500-normal.woff2") format("woff2")}

:root{
  --ink:#0d0802;
  --ink-soft:#1b150e;
  --chalk:#f3f3f0;
  --paper:#fbfbf9;
  --graphite:#55514a;
  --line:#d8d7d1;
  --line-dark:#3a342b;
  --jacaranda:#5e4b8b;
  --jacaranda-light:#b9a9e0;
  --head:"Jost","Futura","Century Gothic",system-ui,sans-serif;
  --text:"Newsreader","Iowan Old Style",Georgia,serif;
  --wrap:72rem;
  --gutter:clamp(1.25rem,4vw,3rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:1.125rem;line-height:1.65;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--jacaranda);outline-offset:3px}
.on-dark :focus-visible,.site-footer :focus-visible{outline-color:var(--jacaranda-light)}
.skip{position:absolute;left:-999px;top:0;background:var(--paper);color:var(--ink);padding:.75rem 1rem;z-index:20;font-family:var(--head)}
.skip:focus{left:0}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

/* type */
h1,h2,h3{font-family:var(--head);font-weight:400;margin:0;letter-spacing:-.015em}
h1{font-weight:300;font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1.02;letter-spacing:-.03em}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.12}
h3{font-size:1.4rem;line-height:1.2}
p{margin:0 0 1.1em;max-width:62ch}
.lede{font-size:clamp(1.2rem,1.8vw,1.4rem);line-height:1.55;max-width:46ch}

/* header + hero share the dark field */
.on-dark{background:var(--ink);color:var(--chalk);position:relative;overflow:hidden}
.site-header{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:1.4rem;flex-wrap:wrap}
.brand img{height:3.1rem;width:auto}
.nav{display:flex;gap:clamp(1rem,3vw,2.25rem);font-family:var(--head);font-size:1rem;letter-spacing:.03em}
.nav a{text-decoration:none;padding-block:.35rem;border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:var(--jacaranda-light)}
.nav a[aria-current="page"]{border-bottom-color:var(--chalk)}

.hero{position:relative;z-index:2;padding-block:clamp(3.5rem,11vw,9rem) clamp(4rem,12vw,10rem)}
.hero h1{max-width:16ch;text-wrap:balance}
.hero .lede{margin-top:1.75rem;color:#d6d4cd}
.hero-actions{display:flex;flex-wrap:wrap;gap:1.25rem 2rem;align-items:center;margin-top:2.5rem}
.hero--inner{padding-block:clamp(2.5rem,7vw,5.5rem) clamp(3rem,8vw,6rem)}
.hero--inner h1{font-size:clamp(2.3rem,5vw,4rem);max-width:16ch}

/* the one big gesture: the monogram, cropped, revealed once on load */
.mark{position:absolute;z-index:1;right:-4vw;top:56%;width:min(44vw,40rem);aspect-ratio:725/701;translate:0 -50%;background:var(--chalk);opacity:.95;
  -webkit-mask:url("../assets/symbol-black.svg") center/contain no-repeat;mask:url("../assets/symbol-black.svg") center/contain no-repeat;
  animation:reveal 1.8s cubic-bezier(.2,.7,.2,1) both}
.on-dark--inner .mark{width:min(34vw,26rem);right:-3vw;top:50%;opacity:.14;animation:none}
@keyframes reveal{from{clip-path:circle(0% at 50% 50%)}to{clip-path:circle(75% at 50% 50%)}}

/* buttons + links */
.btn{display:inline-block;font-family:var(--head);font-weight:500;font-size:1.05rem;letter-spacing:.02em;text-decoration:none;padding:.95rem 1.7rem;background:var(--chalk);color:var(--ink);border:1px solid var(--chalk);cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:transparent;color:var(--chalk)}
.btn--dark{background:var(--ink);color:var(--chalk);border-color:var(--ink)}
.btn--dark:hover{background:transparent;color:var(--ink)}
.link{font-family:var(--head);font-size:1.05rem;text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}
.link:hover{text-decoration-color:var(--jacaranda-light)}
main a:not(.btn):not(.link){text-decoration-color:var(--jacaranda);text-underline-offset:.2em}

/* sections */
.section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.section--chalk{background:var(--chalk)}
.section-head{margin-bottom:clamp(2rem,4vw,3.25rem);max-width:40rem}
.section-head p{color:var(--graphite);margin-top:1rem}

.practice{display:grid;grid-template-columns:1fr 1fr;gap:0}
.practice>article{padding-block:.5rem;padding-inline:0 clamp(1.5rem,4vw,3.5rem)}
.practice>article+article{padding-inline:clamp(1.5rem,4vw,3.5rem) 0;border-left:1px solid var(--line)}
.practice h3{margin-bottom:.9rem}
.practice p{color:var(--graphite)}
.plain-list{list-style:none;margin:1.5rem 0 0;padding:0}
.plain-list li{padding-block:.7rem;border-top:1px solid var(--line)}
.plain-list li:last-child{border-bottom:1px solid var(--line)}

/* the transfer steps: a real sequence, so it is numbered */
.steps{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:0}
.steps li{counter-increment:step;display:grid;grid-template-columns:4.5rem 1fr;gap:1rem;padding-block:1.5rem;border-top:1px solid var(--line)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps li::before{content:counter(step);font-family:var(--head);font-weight:300;font-size:2.6rem;line-height:1;color:var(--jacaranda)}
.steps h3{margin-bottom:.35rem}
.steps p{margin:0;color:var(--graphite)}
.note{margin-top:1.75rem;color:var(--graphite);font-style:italic}

/* directors */
.directors{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem)}
.director{border-top:1px solid var(--ink);padding-top:1.25rem}
.director h3{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:300}
.director .role{font-family:var(--head);color:var(--graphite);margin:.35rem 0 0}

/* call to action band */
.cta{background:var(--ink);color:var(--chalk);padding-block:clamp(3.5rem,8vw,6rem)}
.cta .wrap{display:flex;flex-wrap:wrap;gap:1.75rem 3rem;align-items:center;justify-content:space-between}
.cta h2{max-width:18ch}
.cta p{color:#cfcdc6;margin:.75rem 0 0}

/* prose pages */
.two-col{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.two-col h2{position:sticky;top:2rem}

/* contact form */
.form{display:grid;gap:1.4rem;max-width:36rem}
.field label{display:block;font-family:var(--head);font-weight:500;margin-bottom:.4rem}
.field .hint{font-weight:400;color:var(--graphite)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1.05rem;color:var(--ink);background:var(--paper);border:1px solid #8c8981;border-radius:0;padding:.8rem .9rem}
.field textarea{min-height:10rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--jacaranda);outline-offset:1px;border-color:var(--ink)}
.field [aria-invalid="true"]{border-color:#9b1c1c;border-width:2px}
.trap{position:absolute;left:-9999px;height:0;overflow:hidden}
.privacy{font-size:.95rem;color:var(--graphite);max-width:36rem}
.status{padding:1rem 1.25rem;border-left:4px solid var(--jacaranda);background:var(--chalk);max-width:36rem;margin-bottom:1.75rem;font-family:var(--head)}
.status--error{border-left-color:#9b1c1c}
.contact-aside{border-top:1px solid var(--ink);padding-top:1.25rem}
.contact-aside dt{font-family:var(--head);font-weight:500;margin-top:1.25rem}
.contact-aside dd{margin:.2rem 0 0}

/* footer */
.site-footer{background:var(--ink);color:#cfcdc6;padding-block:clamp(2.5rem,6vw,4rem) 2rem;border-top:1px solid var(--line-dark)}
.footer-grid{display:grid;grid-template-columns:auto 1fr auto;gap:2rem clamp(2rem,5vw,4rem);align-items:start}
.footer-grid img{height:3.5rem;width:auto}
.footer-nav{display:flex;flex-direction:column;gap:.4rem;font-family:var(--head)}
.footer-nav a,.footer-contact a{text-decoration:none}
.footer-nav a:hover,.footer-contact a:hover{text-decoration:underline}
.footer-contact{font-size:1rem}
.legal{margin:2.5rem 0 0;padding-top:1.25rem;border-top:1px solid var(--line-dark);font-size:.9rem;color:#a29f97;max-width:none}

@media (max-width:52rem){
  .practice,.directors,.two-col{grid-template-columns:1fr}
  .practice>article,.practice>article+article{padding-inline:0;border-left:0}
  .practice>article+article{border-top:1px solid var(--line);margin-top:2rem;padding-top:2rem}
  .two-col h2{position:static}
  .footer-grid{grid-template-columns:1fr}
  .mark,.on-dark--inner .mark{width:92vw;right:-34vw;top:62%;opacity:.16}
  .steps li{grid-template-columns:3rem 1fr}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mark{animation:none}
  .btn{transition:none}
}

/* articles */
.hero--article h1{font-size:clamp(2rem,4.2vw,3.2rem);max-width:24ch}
.prose{max-width:42rem}
.prose h2{margin:2.4rem 0 .8rem;font-size:clamp(1.4rem,2.4vw,1.8rem)}
.prose ul{padding-left:1.25rem;margin:0 0 1.2em}
.prose li{margin-bottom:.5rem}
.prose .plain-list{padding-left:0}
.byline{font-family:var(--head);color:var(--graphite);margin-bottom:1.5rem}
.disclaimer{border-left:3px solid var(--jacaranda);padding-left:1rem;color:var(--graphite);font-size:1rem;margin-top:2.5rem}
.sources{font-size:1rem;color:var(--graphite)}
.article-list a{font-family:var(--head);font-size:1.3rem;text-decoration:none}
.article-list a:hover{text-decoration:underline;text-underline-offset:.25em}
.article-list p{margin:.25rem 0 0;color:var(--graphite)}


/* ---- redesign: top bar, cards, panel, people, home contact, footer ---- */
.topbar{position:relative;z-index:3;border-bottom:1px solid var(--line-dark);font-family:var(--head);font-size:.92rem;color:#cfcdc6}
.topbar .wrap{display:flex;flex-wrap:wrap;gap:.35rem 2rem;justify-content:space-between;padding-block:.6rem}
.topbar-links{display:flex;flex-wrap:wrap;gap:.35rem 1.75rem}
.topbar a{text-decoration:none}
.topbar a:hover{text-decoration:underline;text-underline-offset:.25em}

.hero h1{max-width:14ch}
.hero .lede{max-width:40ch}
.btn{border-radius:2px}
.btn--dark:hover{background:transparent;color:var(--ink)}

.section--tight{padding-block:0}
.panel{position:relative;overflow:hidden;background:var(--ink);color:var(--chalk);border-radius:.9rem;padding:clamp(2.5rem,7vw,5rem) clamp(1.5rem,6vw,5rem);text-align:center}
.panel h2{max-width:20ch;margin-inline:auto;font-weight:300;font-size:clamp(1.9rem,4vw,3.1rem)}
.panel p{margin:1.25rem auto 2rem;color:#cfcdc6;max-width:44ch}
.panel>*{position:relative;z-index:1}
.panel-mark{position:absolute!important;z-index:0!important;left:50%;top:50%;width:min(80%,34rem);aspect-ratio:725/701;translate:-50% -50%;background:var(--chalk);opacity:.06;
  -webkit-mask:url("../assets/symbol-black.svg") center/contain no-repeat;mask:url("../assets/symbol-black.svg") center/contain no-repeat}

.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.card{display:flex;flex-direction:column;gap:.6rem;background:var(--paper);border:1px solid var(--line);border-radius:.6rem;padding:1.75rem 1.6rem;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s}
.card:hover{border-color:var(--jacaranda);box-shadow:0 10px 30px -18px rgba(13,8,2,.45)}
.card h3{font-size:1.3rem}
.card p{margin:0;color:var(--graphite);font-size:1.02rem}
.card .more{margin-top:auto;padding-top:.75rem;font-family:var(--head);color:var(--jacaranda);text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1px}

.people{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.person{display:flex;gap:1.25rem;align-items:flex-start;padding:1.5rem;border:1px solid var(--line);border-radius:.6rem;text-decoration:none;color:inherit;background:var(--paper);transition:border-color .2s}
.person:hover{border-color:var(--jacaranda)}
.person h3{font-size:1.5rem;font-weight:300}
.person .role{font-family:var(--head);color:var(--graphite);margin:.2rem 0 .6rem}
.person p:last-child{margin:0}
.avatar{flex:none;display:grid;place-items:center;width:4rem;height:4rem;border-radius:50%;background:var(--ink);color:var(--chalk);font-family:var(--head);font-weight:300;font-size:1.25rem;letter-spacing:.04em}

.contact-list dt{font-family:var(--head);font-weight:500;margin-top:1.1rem}
.contact-list dd{margin:.15rem 0 0}
#enquiry-section .two-col h2{position:static}

.float-contact{position:fixed;right:1rem;bottom:1rem;z-index:30;display:flex;flex-direction:column;gap:.6rem}
.float-contact a{display:grid;place-items:center;width:3.1rem;height:3.1rem;border-radius:50%;background:var(--jacaranda);color:#fff;box-shadow:0 8px 24px -10px rgba(13,8,2,.7);transition:transform .2s,background .2s}
.float-contact a:hover{background:#4b3b72;transform:translateY(-2px)}

.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.4fr;align-items:start}
.footer-brand p{margin:1rem 0 0;font-size:1rem;max-width:28ch}
.footer-col{display:flex;flex-direction:column;gap:.45rem;font-family:var(--head);font-size:1rem}
.footer-col h2{font-size:.95rem;font-weight:500;letter-spacing:.04em;color:#fff;margin-bottom:.4rem}
.footer-col a{text-decoration:none}
.footer-col a:hover{text-decoration:underline;text-underline-offset:.25em}
.footer-contact span,.footer-contact a{font-family:var(--text)}

@media (max-width:62rem){
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:40rem){
  .cards,.people,.footer-grid{grid-template-columns:1fr}
  .topbar .wrap{justify-content:flex-start}
  .float-contact{right:.75rem;bottom:.75rem}
  .float-contact a{width:2.9rem;height:2.9rem}
}
@media (prefers-reduced-motion:reduce){.card,.person,.float-contact a{transition:none}}
#enquiry-section h2{margin-bottom:1.25rem}