/* TaxReck modern look: Plus Jakarta Sans, midnight navy and electric lime (chosen by the owner on 21 September 2026). Loads after styles.css on pages whose <body> has class "mod"; only the home page
   uses it until the owner approves, then the other pages move over. Plus Jakarta Sans throughout, white and near-black with
   amber as the accent, real photography in rounded frames with glass cards floating over them, rounded section panels
   instead of straight edges, and calm motion that plays once (photos unveil, highlights sweep, figures count). */

@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:300 800;font-display:swap;src:url(assets/plus-jakarta-sans.woff2) format("woff2")}

body.mod{
  --sans:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:var(--sans);
  --ink:#0B1020;--graphite:#2A3142;--muted:#586176;--line:#E3E7EE;--soft:#F2F4F8;
  --dark:#0B1020;--dark-2:#18213A;--dark-rgb:11,16,32;--on-dark:#C9D0DC;--on-dark-2:#9AA4B8;
  --acc:#C6F24E;--acc-rgb:198,242,78;--acc-2:#D6FA6E;--on-acc:#0B1020;--acc-text:#3F6212;--acc-soft:#F0FAD6;--acc-line:#CFEF8A;--acc-hi:#C6F24E;
  --amber:var(--acc);--amber-dark:var(--acc-text);--amber-soft:var(--acc-soft);
  --ease:cubic-bezier(.2,.7,.2,1);
  font-family:var(--sans);font-size:17px;color:var(--graphite);letter-spacing:-.006em;background:#fff
}
.mod h1,.mod h2,.mod h3,.mod h4{font-family:var(--sans);text-transform:none}
.mod h2{font-size:clamp(32px,4.1vw,54px);font-weight:800;letter-spacing:-.035em;line-height:1.05}
.mod h3{font-weight:700;letter-spacing:-.02em}
.mod ::selection{background:var(--acc);color:var(--on-acc)}
.mod a:focus-visible,.mod button:focus-visible,.mod input:focus-visible,.mod [tabindex]:focus-visible{outline:3px solid var(--amber-dark);outline-offset:3px}

/* the amber highlight behind the second phrase of a heading: it sweeps in when the heading arrives */
.hm-grad{background:linear-gradient(transparent 60%,rgba(var(--acc-rgb),.5) 60%,rgba(var(--acc-rgb),.5) 92%,transparent 92%) no-repeat 0 0/100% 100%;-webkit-box-decoration-break:clone;box-decoration-break:clone;transition:background-size 1s var(--ease) .35s}
[data-reveal]:not(.in) .hm-grad{background-size:0 100%}
.hm-hero .hm-grad{animation:sweep 1s var(--ease) .6s both}
@keyframes sweep{from{background-size:0 100%}}

/* small pill label above headings */
.hm-tag{display:inline-flex;align-items:center;gap:9px;margin:0;padding:7px 15px 7px 11px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px rgba(11,16,32,.05);font-size:13px;font-weight:700;letter-spacing:0;color:var(--ink)}
.hm-tag i{width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 4px rgba(var(--acc-rgb),.22)}
.hm-tag-dark{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:#fff;box-shadow:none}

/* buttons */
.hm-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 26px;border-radius:999px;font:inherit;font-size:15.5px;font-weight:700;letter-spacing:-.01em;text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background .25s,color .25s,border-color .25s,box-shadow .25s}
.hm-btn i{display:grid;place-items:center;width:38px;height:38px;margin-right:-16px;border-radius:50%;transition:transform .3s var(--ease),background .25s}
.hm-btn i svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hm-btn:hover i{transform:translateX(3px)}
.hm-btn-amber{background:var(--acc);color:var(--on-acc);box-shadow:0 14px 30px rgba(var(--acc-rgb),.35)}
.hm-btn-amber i{background:var(--ink);color:var(--amber)}
.hm-btn-amber:hover{background:var(--acc-2)}
.hm-btn-ink{background:var(--ink);color:#fff}
.hm-btn-ink i{background:var(--acc);color:var(--on-acc)}
.hm-btn-ink:hover{background:var(--dark-2)}
.hm-btn-line{border-color:rgba(11,16,32,.18);color:var(--ink);background:#fff}
.hm-btn-line:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.hm-btn-glass{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff}
.hm-btn-glass:hover{background:#fff;color:var(--ink)}
.hm-cta{display:flex;flex-wrap:wrap;gap:12px}

/* photo frames and glass cards */
.hm-ph{position:relative;margin:0;overflow:hidden;border-radius:28px;background:#1B2440;box-shadow:0 30px 60px -20px rgba(11,16,32,.28)}
.hm-ph img{width:100%;height:100%;object-fit:cover;display:block}
.hm-glass{position:absolute;z-index:3;display:flex;align-items:center;gap:12px;padding:14px 18px 14px 14px;border-radius:20px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5);border:1px solid rgba(255,255,255,.7);box-shadow:0 24px 48px -12px rgba(11,16,32,.28);color:var(--ink)}
.hm-glass p{margin:0;line-height:1.25}
.hm-glass b{display:block;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.hm-glass strong{display:block;font-size:15.5px;font-weight:800;letter-spacing:-.015em}
.hm-glass span:not(.hm-g-ico):not(.hm-g-tick){display:block;font-size:13px;color:var(--muted);margin-top:3px}
.hm-g-ico,.hm-g-tick{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--acc);color:var(--on-acc);font-weight:800;font-size:18px}
.hm-g-ico svg,.hm-g-tick svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hm-g-tick{background:var(--ink);color:var(--amber)}

/* section heads */
.hm-head{max-width:760px;margin:0 0 48px}
.hm-head h2{margin:18px 0 0}
.hm-head > p:not(.hm-tag){font-size:18px;color:var(--muted);margin:16px 0 0;max-width:56ch}
.hm-head-split{max-width:none;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end}
.hm-head-split > p{margin:0 0 6px!important}

/* ---------- header and footer in the modern look ---------- */
.mod .site{background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px)}
.mod .nav a{font-size:15px;font-weight:600;letter-spacing:-.01em;text-transform:none}
.mod .nav a::after{height:2px}
.mod .site .btn{border-radius:999px;background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none;text-transform:none;letter-spacing:-.01em;font-size:14.5px;padding:12px 22px}
.mod .site .btn:hover{background:var(--acc);border-color:var(--acc);color:var(--on-acc);transform:none}
.mod .burger{border-width:1.5px;border-radius:14px}
.mod .mobile a{text-transform:none;letter-spacing:-.01em;font-weight:600;font-size:16px}
.mod footer{border-radius:40px 40px 0 0;margin-top:0}
.mod footer h4,.mod footer summary{text-transform:none;letter-spacing:-.01em;font-size:16px}

/* ---------- hero ---------- */
.hm-hero{position:relative;padding:48px 0 40px;overflow:hidden;background:#fff}
.hm-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(11,16,32,.09) 1px,transparent 1.3px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 72% 38%,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse 60% 70% at 72% 38%,#000 10%,transparent 70%);pointer-events:none}
.hm-aura{position:absolute;right:-12%;top:-26%;width:min(1000px,75vw);aspect-ratio:1;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--acc-rgb),.26),rgba(var(--acc-rgb),0));pointer-events:none}
.hm-hero-grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;min-height:620px}
.hm-hero-copy > *{animation:up .9s var(--ease) both}
.hm-hero-copy > :nth-child(2){animation-delay:.08s}
.hm-hero-copy > :nth-child(3){animation-delay:.16s}
.hm-hero-copy > :nth-child(4){animation-delay:.24s}
.hm-hero-copy > :nth-child(5){animation-delay:.32s}
@keyframes up{from{opacity:0;transform:translateY(22px)}}
.hm-hero h1{margin:22px 0 0;font-size:clamp(46px,6.3vw,86px);font-weight:800;letter-spacing:-.045em;line-height:.98;max-width:11ch}
.hm-lede{font-size:clamp(17.5px,1.5vw,20.5px);color:var(--graphite);max-width:44ch;margin:26px 0 32px;line-height:1.55}
.hm-trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;font-size:14.5px;font-weight:600;color:var(--graphite)}
.hm-trust li{display:flex;align-items:center;gap:8px}
.hm-trust li::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--amber-soft);box-shadow:inset 0 0 0 1.5px var(--amber);flex:none;-webkit-mask:none}
.hm-trust li::before{background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23111110' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:none}

/* the collage: three photos unveil together, then the glass cards settle over them */
.hm-collage{position:relative;height:600px}
.hm-ph-a{position:absolute;left:0;top:36px;width:57%;height:470px}
.hm-ph-a img{object-position:78% 30%}
.hm-ph-b{position:absolute;right:0;top:0;width:39%;height:250px}
.hm-ph-b img{object-position:62% 50%}
.hm-ph-c{position:absolute;right:0;bottom:36px;width:39%;height:290px}
.hm-ph-c img{object-position:90% 55%}
.hm-collage .hm-ph{animation:unveil 1.15s var(--ease) .15s both}
.hm-collage .hm-ph img{animation:settle 1.6s var(--ease) .15s both}
@keyframes unveil{from{clip-path:inset(18% 10% 18% 10% round 28px);opacity:0}to{clip-path:inset(0 round 28px);opacity:1}}
@keyframes settle{from{transform:scale(1.14)}}
.hm-collage .hm-glass{animation:glassIn .7s var(--ease) 1.05s both}
@keyframes glassIn{from{opacity:0;transform:translateY(14px)}}
.hm-g-next{left:-26px;bottom:64px;max-width:268px;flex-direction:column;align-items:flex-start;gap:0;padding:16px 18px}
.hm-g-next strong{font-size:15px;line-height:1.3}
.hm-g-fee{left:47%;top:268px}
.hm-g-ok{right:22px;bottom:-4px}

/* the four figures, on a dark rounded bar */
.hm-stats{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:40px;background:var(--dark);border-radius:28px;padding:30px 12px;color:#fff;overflow:hidden}
.hm-stats::after{content:"";position:absolute;right:-80px;top:-120px;width:320px;height:320px;border-radius:50%;background:radial-gradient(closest-side,rgba(var(--acc-rgb),.3),rgba(var(--acc-rgb),0));pointer-events:none}
.mod .hm-stats .bstat{position:relative;z-index:1;padding:4px 28px;border:0;border-left:1px solid rgba(255,255,255,.12);background:none;box-shadow:none;opacity:1;transform:none}
.mod .hm-stats .bstat:first-child{border-left:0}
.mod .hm-stats .bstat b{display:block;font-size:clamp(34px,3.6vw,48px);font-weight:800;letter-spacing:-.04em;line-height:1;color:#fff}
.mod .hm-stats .bstat b em{font-style:normal;color:var(--acc-hi)}
.mod .hm-stats .bstat span{display:block;margin-top:8px;font-size:14.5px;color:var(--on-dark-2)}

/* ---------- who we work with: six equal photo tiles ---------- */
.hm-who{padding:120px 0 110px}
.hm-who-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hm-tile{position:relative;display:block;aspect-ratio:4/3.15;border-radius:26px;overflow:hidden;color:#fff;text-decoration:none;isolation:isolate;background:#222}
.hm-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.hm-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,9,8,0) 38%,rgba(10,9,8,.82) 100%)}
.hm-tile-txt{position:absolute;left:24px;right:78px;bottom:22px;z-index:1}
.hm-tile-txt b{display:block;font-size:20px;font-weight:800;letter-spacing:-.025em;line-height:1.2}
.hm-tile-txt span{display:block;margin-top:5px;font-size:14px;line-height:1.4;color:rgba(255,255,255,.84)}
.hm-tile i{position:absolute;right:20px;bottom:22px;z-index:1;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:background .3s,border-color .3s,color .3s}
.hm-tile i svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.hm-tile:hover img,.hm-tile:focus-visible img{transform:scale(1.07)}
.hm-tile:hover i,.hm-tile:focus-visible i{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.hm-tile:hover i svg{transform:rotate(45deg)}

/* ---------- services, on a soft rounded panel ---------- */
.hm-services{margin:0 16px;padding:110px 0;background:var(--soft);border-radius:44px}
.hm-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:18px}
.mod .hm-card{position:relative;display:flex;flex-direction:column;padding:30px 28px 26px;background:#fff;border:1px solid var(--line);border-radius:26px;box-shadow:none;transform:none;opacity:1;transition:border-color .3s,box-shadow .3s;cursor:default}
.mod .hm-card:hover{border-color:var(--acc-line);box-shadow:0 30px 60px -28px rgba(11,16,32,.25)}
.hm-ico{display:grid;place-items:center;width:54px;height:54px;border-radius:17px;background:var(--amber-soft);color:var(--ink);margin-bottom:22px;transition:background .3s}
.hm-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hm-card:hover .hm-ico{background:var(--acc);color:var(--on-acc)}
.mod .hm-card h3{font-size:20px;line-height:1.25;margin:0 0 10px}
.mod .hm-card > p{font-size:15.5px;color:var(--muted);margin:0 0 20px}
.hm-ticks{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);display:grid;gap:8px}
.hm-ticks li{position:relative;padding-left:28px;font-size:14.5px;line-height:1.45;color:var(--graphite)}
.hm-ticks li::before{content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:var(--amber-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%239C6108' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}

/* ---------- what you can count on: photos beside four promises ---------- */
.hm-why{padding:130px 0 110px}
.hm-why-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.hm-why-art{position:relative;padding:0 0 70px 0}
.hm-ph-why{height:470px}
.hm-ph-why img{object-position:45% 40%}
.hm-ph-why2{position:absolute;right:-28px;bottom:0;width:48%;height:230px;border:7px solid #fff;border-radius:30px}
.hm-ph-why2 img{object-position:40% 40%}
.hm-g-contact{left:-24px;top:40px}
.hm-facts{display:grid;gap:0;counter-reset:none}
.hm-facts li{display:grid;grid-template-columns:62px 1fr;gap:18px;align-items:start;padding:22px 0;border-top:1px solid var(--line)}
.hm-facts li:last-child{border-bottom:1px solid var(--line)}
.hm-fn{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--amber);font-size:15px;font-weight:800;color:var(--ink);transition:background .3s}
.hm-facts li:hover .hm-fn{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.hm-facts b{display:block;font-size:20px;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.hm-facts span:not(.hm-fn){display:block;margin-top:4px;font-size:16px;color:var(--muted)}

/* ---------- deadlines ---------- */
.hm-dead{padding:40px 0 130px}
.hm-dead-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:64px;align-items:center}
.hm-dead h2{margin:18px 0 0}
.hm-sub{font-size:18px;color:var(--muted);margin:18px 0 26px;max-width:50ch}
.hm-checks{display:grid;gap:12px;margin:0 0 32px}
.hm-checks li{position:relative;padding:14px 18px 14px 52px;background:var(--soft);border-radius:16px;font-size:15.5px;color:var(--graphite)}
.hm-checks li b{color:var(--ink)}
.hm-checks li::before{content:"";position:absolute;left:16px;top:50%;margin-top:-11px;width:22px;height:22px;border-radius:50%;background:var(--amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%23111110' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.mod .board-wrap{opacity:1;animation:none}
.mod .board{border-radius:30px;border:1px solid var(--line);box-shadow:0 40px 80px -30px rgba(11,16,32,.35);background:#fff}
.mod .board-top{padding:20px 26px;background:var(--dark)}
.mod .board-top h3{font-size:17px;letter-spacing:-.01em}
.mod .board-top span{color:var(--on-dark-2)}
.mod .tabs{margin:18px 22px 0;padding:5px;border:0;border-radius:999px;background:var(--soft)}
.mod .tabs button{position:relative;z-index:1;padding:11px 8px;border-radius:999px;font-size:13.5px;font-weight:700;letter-spacing:-.005em;text-transform:none;color:var(--muted)}
.mod .tabs button[aria-selected=true]{color:var(--ink)}
.mod .tabs .ink{top:5px;bottom:5px;left:0;height:auto;border-radius:999px;background:#fff;box-shadow:0 4px 14px rgba(11,16,32,.1);z-index:0}
.mod .panel{padding:22px 26px 18px}
.mod .ring{animation:none}
.mod .ring .num{font-weight:800}
.mod .ring .unit{letter-spacing:.04em}
.mod .yearend input{border-radius:14px;border-color:#CBD2DE}
.mod .empty{border-radius:14px;border-left:0;background:var(--amber-soft)}
.mod .board-foot{background:var(--soft);padding:14px 26px}

/* ---------- key dates dial, over the City of London ---------- */
.hm-dial{position:relative;margin:0 16px;padding:120px 0;border-radius:44px;overflow:hidden;background:var(--dark);color:var(--on-dark);isolation:isolate}
.hm-dial-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;z-index:-2}
.hm-dial::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(var(--dark-rgb),.96) 0%,rgba(var(--dark-rgb),.82) 48%,rgba(var(--dark-rgb),.55) 100%)}
.hm-dial h2{color:#fff}
.hm-dial .hm-grad{background-image:linear-gradient(transparent 60%,rgba(var(--acc-rgb),.62) 60%,rgba(var(--acc-rgb),.62) 92%,transparent 92%)}
.hm-dial .hm-head > p:not(.hm-tag){color:var(--on-dark-2)}
.mod .hm-dial .wheel .track{stroke:rgba(255,255,255,.22)}
.mod .hm-dial .wheel .mark circle{fill:var(--dark-2)}
.mod .hm-dial .wheel .mark:hover circle,.mod .hm-dial .wheel .mark.on circle{fill:var(--amber)}
.mod .hm-dial .wheel .arc{stroke-width:5;filter:drop-shadow(0 0 8px rgba(var(--acc-rgb),.55))}
.mod .hm-dial .wheel-mid{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:50%;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.mod .hm-dial .wheel-mid .d{font-weight:800}
.mod .hm-dial .tyear,.mod .hm-dial .wheel-mid .lbl{color:var(--acc-hi)}

/* ---------- questions ---------- */
.hm-faq{padding:130px 0 90px}
.hm-faq-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.hm-faq-side{position:sticky;top:110px}
.hm-faq-side h2{margin:18px 0 0}
.hm-faq-side > p:not(.hm-tag){font-size:18px;color:var(--muted);margin:16px 0 26px}
.hm-ph-faq{height:260px;margin-bottom:26px}
.hm-ph-faq img{object-position:50% 35%}
.mod .hm-faq .qa-item{margin-bottom:12px;padding:0 24px;border:1px solid var(--line);border-radius:20px;background:var(--soft);transition:background .3s,box-shadow .3s,border-color .3s}
.mod .hm-faq .qa-item.open{background:#fff;border-color:var(--acc-line);box-shadow:0 24px 50px -28px rgba(11,16,32,.3)}
.mod .hm-faq .qa-head{font-size:17.5px;font-weight:700;letter-spacing:-.015em;padding:22px 0}
.mod .hm-faq .qa-inner p{color:var(--graphite);font-size:16px}

/* ---------- closing card with a photo ---------- */
.mod .hm-talk{padding:30px 0 120px}
.mod .hm-talk .talk-card{background:var(--dark);border-radius:40px}
.hm-talk-ph{position:absolute;right:0;top:0;width:62%;height:100%;object-fit:cover;object-position:30% 30%;opacity:.55;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 55%);mask-image:linear-gradient(90deg,transparent 0,#000 55%);pointer-events:none}
.mod .hm-talk .talk-card::before{z-index:0}
.mod .hm-talk .talk-panel{background:rgba(var(--dark-rgb),.55);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.14)}
.mod .talk-card h2{font-weight:800;letter-spacing:-.04em}
.mod .talk-num{font-weight:800;letter-spacing:-.03em}

/* gentle depth as photos pass through the screen, where the browser supports scroll-linked animation */
@supports (animation-timeline: view()){
  .hm-who-grid .hm-tile img,.hm-why-art .hm-ph img,.hm-ph-faq img{animation:drift linear both;animation-timeline:view();animation-range:cover}
  .hm-dial-bg{animation:drift linear both;animation-timeline:view();animation-range:cover}
  @keyframes drift{from{transform:scale(1.1) translateY(-3.5%)}to{transform:scale(1.1) translateY(3.5%)}}
  .hm-tile:hover img{scale:1.06}
}

/* ---------- smaller screens ---------- */
@media (max-width:1100px){
  .hm-hero-grid{gap:36px}
  .hm-g-next{left:-10px}
  .hm-ph-why2{right:0}
  .hm-g-contact{left:-8px}
}
@media (max-width:1000px){
  .hm-hero-grid,.hm-why-grid,.hm-dead-grid,.hm-faq-grid{grid-template-columns:1fr}
  .hm-hero-grid{min-height:0;gap:44px}
  .hm-collage{height:540px;max-width:640px;width:100%;justify-self:center}
  .hm-stats{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  .mod .hm-stats .bstat:nth-child(3){border-left:0}
  .hm-who-grid,.hm-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hm-head-split{grid-template-columns:1fr;gap:0}
  .hm-head-split > p{margin:16px 0 0!important}
  .hm-why-art{max-width:620px}
  .hm-faq-side{position:static}
  .hm-ph-faq{max-width:560px}
  .mod .hm-dial .wheel-wrap{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hm-hero{padding:28px 0 24px}
  .hm-hero h1{font-size:clamp(40px,11.5vw,54px)}
  .hm-cta .hm-btn{flex:1 1 100%}
  .hm-collage{height:430px}
  .hm-ph-a{width:62%;height:340px;top:24px}
  .hm-ph-b{width:34%;height:170px}
  .hm-ph-c{width:34%;height:190px;bottom:28px}
  .hm-g-next{left:8px;bottom:0;max-width:230px;padding:12px 14px}
  .hm-g-fee{left:auto;right:8px;top:190px;padding:10px 14px 10px 10px}
  .hm-g-ok{display:none}
  .hm-g-ico,.hm-g-tick{width:34px;height:34px;border-radius:10px;font-size:16px}
  .hm-stats{padding:22px 4px;border-radius:24px}
  .mod .hm-stats .bstat{padding:4px 18px}
  .hm-who{padding:88px 0 80px}
  .hm-who-grid,.hm-cards{grid-template-columns:1fr;grid-auto-rows:auto}
  .hm-services,.hm-dial{margin:0 8px;border-radius:30px;padding:84px 0}
  .hm-why{padding:90px 0 70px}
  .hm-ph-why{height:330px}
  .hm-ph-why2{height:160px;width:52%;border-width:5px}
  .hm-g-contact{left:8px;top:14px}
  .hm-dead{padding:20px 0 90px}
  .hm-faq{padding:90px 0 60px}
  .hm-ph-faq{height:210px}
  .hm-talk-ph{width:100%;opacity:.28;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 60%);mask-image:linear-gradient(180deg,transparent 0,#000 60%)}
  .mod footer{border-radius:28px 28px 0 0}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .hm-hero-copy > *,.hm-collage .hm-ph,.hm-collage .hm-ph img,.hm-collage .hm-glass,.hm-hero .hm-grad{animation:none}
  .hm-grad,[data-reveal]:not(.in) .hm-grad{transition:none;background-size:100% 100%}
  .hm-who-grid .hm-tile img,.hm-why-art .hm-ph img,.hm-ph-faq img,.hm-dial-bg{animation:none}
  .hm-tile img,.hm-btn i,.hm-tile i svg{transition:none}
}

/* Plus Jakarta Sans draws its full stop and comma wide; pull them in on display headings */
.hm-p{margin-left:-.1em}

/* ---------- shared parts (top bar, footer, closing card, live chat, cookie bar) follow the theme ---------- */
.mod .topbar,.mod footer{background:var(--dark)}
.mod footer{color:var(--on-dark-2)}
.mod footer a:hover{color:var(--acc-hi)}
.mod .btn-solid{color:var(--on-acc);box-shadow:0 10px 24px rgba(var(--acc-rgb),.35)}
.mod .talk-card::before{background:radial-gradient(circle,rgba(var(--acc-rgb),.22),rgba(var(--acc-rgb),0) 68%)}
.mod .talk-card h2 em,.mod .talk-k,.mod .talk-card h2 .light{color:var(--acc-hi)}
.mod .talk-copy p{color:var(--on-dark)}
.mod .wa-head{background:linear-gradient(115deg,var(--dark) 0%,var(--dark-2) 100%)}
.mod .wa-avatar{background:var(--dark);box-shadow:0 0 0 1px rgba(255,255,255,.14),0 0 0 3px rgba(var(--acc-rgb),.35)}
.mod .wa-avatar img{width:28px;height:auto}
@media (max-height:520px){.mod .wa-avatar img{width:22px}}
.mod .wa-kicker{color:var(--acc-hi)}
.mod .wa-fab{background:var(--dark);color:var(--acc-hi)}
.mod .wa-go{color:var(--on-acc)}
.mod .wa-form input:focus,.mod .wa-form textarea:focus{box-shadow:0 0 0 4px rgba(var(--acc-rgb),.22)}
.mod .consent-btns button:hover{background:var(--acc-soft)}
.mod .consent-btns button:focus-visible{outline-color:var(--acc-text)}
.mod .consent-text h2{font-size:21px;letter-spacing:-.01em;line-height:1.2}
@media (max-width:760px){.mod .consent-text h2{font-size:18px}}
.mod #totop{background:var(--dark)}
.mod #totop::before{border-color:var(--acc-hi)}
.mod .ring circle:first-child{stroke:var(--line)}
.mod .ring circle + circle{stroke:var(--acc)}
.mod .legend i.q{border-color:var(--acc-hi)}
.mod .legal,.mod .foot-note{color:var(--on-dark-2)}
.mod .legal a{color:var(--on-dark)}

/* Midnight and lime (chosen 21 September 2026): the hero is a midnight panel */
.hm-hero{margin:8px 16px 0;border-radius:40px;background:radial-gradient(60% 70% at 85% 10%,rgba(198,242,78,.16),rgba(198,242,78,0) 60%),radial-gradient(50% 60% at 10% 100%,rgba(96,165,250,.14),rgba(96,165,250,0) 60%),var(--dark);padding-bottom:48px}
.hm-hero::before{background-image:radial-gradient(rgba(255,255,255,.12) 1px,transparent 1.3px)}
.hm-aura{display:none}
.hm-hero h1{color:#fff}
.hm-hero .hm-grad,.hm-dial .hm-grad,.hm-talk .hm-grad{background-image:none;color:var(--acc)}
.hm-lede,.hm-trust{color:var(--on-dark)}
.hm-hero .hm-tag{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14);color:#fff;box-shadow:none}
.hm-hero .hm-btn-line{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25);color:#fff}
.hm-hero .hm-btn-line:hover{background:#fff;color:var(--ink)}
.hm-hero .hm-btn-amber{box-shadow:0 14px 34px rgba(198,242,78,.25)}
.hm-stats{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.hm-ph{box-shadow:0 30px 70px -20px rgba(0,0,0,.6)}
.hm-grad{background-image:linear-gradient(transparent 58%,rgba(198,242,78,.85) 58%,rgba(198,242,78,.85) 92%,transparent 92%)}
.hm-ticks li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12.5 4 4 8-9' fill='none' stroke='%233F6212' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
@media (max-width:640px){.hm-hero{margin:4px 8px 0;border-radius:28px}}

/* =====================================================================================================
   SITE-WIDE LAYER: every page loads this last, so the older page stylesheets take on the new look.
   ===================================================================================================== */

/* the older stylesheets' colour names, pointed at the new palette */
body.mod{
  --cream:var(--soft);--paper:#fff;--charcoal:var(--dark-2);--line-dark:#26304A;
  --shadow:0 24px 50px -18px rgba(11,16,32,.22);--radius:22px
}

/* ---------- header: a midnight bar with the animated logo ---------- */
.mod .topbar{background:var(--dark);color:var(--on-dark-2);border-bottom:1px solid rgba(255,255,255,.06)}
.mod .topbar svg{stroke:var(--acc)}
.mod .topbar a:hover{color:var(--acc)}
.mod .site{background:rgba(11,16,32,.9);-webkit-backdrop-filter:saturate(1.4) blur(16px);backdrop-filter:saturate(1.4) blur(16px);border-bottom:1px solid rgba(255,255,255,.07)}
.mod .site.stuck{box-shadow:0 12px 30px rgba(0,0,0,.28)}
.mod .nav a{color:#DCE2EC}
.mod .nav a:hover,.mod .nav a.here{color:#fff}
.mod .nav a::after{background:var(--acc)}
.mod .has-menu .menu{background:#fff;border-color:var(--line);border-radius:18px;box-shadow:0 30px 60px -20px rgba(11,16,32,.35)}
.mod .menu a b{color:var(--ink)}
.mod .menu a:hover{background:var(--acc-soft)}
.mod .site .btn{background:var(--acc);border-color:var(--acc);color:var(--on-acc)}
.mod .site .btn:hover{background:#fff;border-color:#fff;color:var(--ink)}
.mod .burger{background:transparent;border-color:rgba(255,255,255,.35)}
.mod .burger span{background:#fff}
.mod .mobile{background:var(--dark);border-top-color:rgba(255,255,255,.08)}
.mod .mobile a{color:#E6EAF2;border-bottom-color:rgba(255,255,255,.08)}
.mod .mobile a.sub{color:var(--on-dark-2)}
.mod .mobile .m-tel{color:var(--acc)}
.mod .brand{display:inline-flex;align-items:center;text-decoration:none}

/* the logo, drawn in the page so it can move: the T drops in, the lime coin rolls into place,
   the word follows and a highlight runs round the coin. Once a visit; the coin flips on hover. */
.logo{display:block;height:40px;width:auto;overflow:visible}
.lg-t{fill:#fff}
.lg-coin{fill:var(--acc);stroke:var(--dark);stroke-width:4;paint-order:stroke}
.lg-arc{fill:none;stroke:var(--dark);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:30;stroke-dashoffset:0}
.lg-r{fill:var(--dark)}
.lg-word{font-family:var(--sans);font-size:35px;font-weight:800;letter-spacing:-1.4px}
.lg-tax{fill:#fff}
.lg-reck{fill:var(--acc)}
.lg-coin-g,.lg-t,.lg-tax,.lg-reck{transform-box:fill-box;transform-origin:center}
.logo-intro .lg-t{animation:lgDrop .55s var(--ease) .05s both}
.logo-intro .lg-coin-g{animation:lgRoll 1s cubic-bezier(.2,.8,.2,1) .2s both}
.logo-intro .lg-arc{animation:lgShine .7s ease-out 1.05s both}
.logo-intro .lg-tax{animation:lgIn .6s var(--ease) .75s both}
.logo-intro .lg-reck{animation:lgIn .6s var(--ease) .9s both}
@keyframes lgDrop{from{opacity:0;transform:translateY(-12px)}}
@keyframes lgRoll{from{opacity:0;transform:translateX(-30px) rotate(-240deg)}}
@keyframes lgShine{from{stroke-dashoffset:30}}
@keyframes lgIn{from{opacity:0;transform:translateX(-8px)}}
.brand:hover .lg-coin-g,.brand:focus-visible .lg-coin-g{animation:lgFlip .8s var(--ease)}
@keyframes lgFlip{0%{transform:scaleX(1)}50%{transform:scaleX(.06)}100%{transform:scaleX(1)}}
footer .logo{height:46px;margin-bottom:18px}

/* ---------- footer ---------- */
.mod footer{background:var(--dark);color:var(--on-dark-2);border-radius:44px 44px 0 0}
.mod footer h4,.mod footer summary{color:#fff}
.mod footer a{color:#E3E8F0}
.mod footer a:hover{color:var(--acc)}
.mod footer summary::after{color:var(--acc)}
.mod .foot-grid,.mod footer details{border-color:rgba(255,255,255,.1)}

/* ---------- shared pieces from the older pages, modernised ---------- */
.mod .eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 15px 7px 11px;border-radius:999px;background:rgba(var(--acc-rgb),.16);border:1px solid rgba(var(--acc-rgb),.45);font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:16px}
.mod .eyebrow::after{display:none}
.mod .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acc-text);flex:none}
.mod main h1,.mod main h2{letter-spacing:-.035em}
.mod main h2{font-weight:800}
.mod main h1{font-weight:800}
.mod main :is(h1,h2) em{font-style:normal;color:inherit;background:linear-gradient(transparent 60%,rgba(var(--acc-rgb),.85) 60%,rgba(var(--acc-rgb),.85) 92%,transparent 92%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.mod .btn{text-transform:none;letter-spacing:-.01em;border-radius:999px}
.mod .btn-solid{background:var(--acc);border-color:var(--acc);color:var(--on-acc);box-shadow:0 12px 28px rgba(var(--acc-rgb),.35)}
.mod .btn-solid:hover{background:var(--ink);border-color:var(--ink);color:#fff;transform:none}
.mod .btn-ghost:hover{transform:none}
.mod .qa-item{border-bottom-color:var(--line)}
.mod .qa-head:hover{color:var(--acc-text)}
.mod .svc-plus::before,.mod .svc-plus::after{background:var(--ink)}
.mod .pic::before{background:var(--acc-soft);border-color:var(--acc-line)}
.mod .pic img{border-radius:26px}
.mod .pic figcaption{border-radius:999px;box-shadow:0 12px 28px rgba(11,16,32,.2)}
.mod .crumbs a:hover{color:var(--acc-text)}
.mod input,.mod select,.mod textarea{accent-color:var(--acc-text)}

/* ---------- the page openers: one midnight panel with a rounded foot, like the home page ---------- */
.mod .hero-dark{position:relative;background:radial-gradient(55% 70% at 88% 8%,rgba(var(--acc-rgb),.15),rgba(var(--acc-rgb),0) 62%),radial-gradient(45% 60% at 6% 100%,rgba(96,165,250,.13),rgba(96,165,250,0) 60%),var(--dark)!important;color:var(--on-dark);clip-path:none!important;border-radius:0 0 44px 44px;overflow:hidden}
.mod .hero-dark::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.1) 1px,transparent 1.3px);background-size:24px 24px;-webkit-mask-image:radial-gradient(ellipse 55% 70% at 80% 30%,#000 5%,transparent 70%);mask-image:radial-gradient(ellipse 55% 70% at 80% 30%,#000 5%,transparent 70%);pointer-events:none;z-index:0}
.mod .hero-dark > *{position:relative;z-index:1}
.mod .hero-dark h1{color:#fff}
.mod .hero-dark h1 em,.mod .hero-dark h2 em{background:none;color:var(--acc)}
.mod .hero-dark .crumbs{color:var(--on-dark-2)}
.mod .hero-dark .crumbs a{color:var(--on-dark)}
.mod .hero-dark .crumbs b{color:#fff}
.mod .hero-dark .eyebrow{color:#fff;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.mod .hero-dark .eyebrow::before{background:var(--acc)}
.mod .hero-dark .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.05)}
.mod .hero-dark .btn-ghost:hover{background:#fff;color:var(--ink);border-color:#fff}
.mod .hero-dark a:focus-visible,.mod .hero-dark button:focus-visible{outline-color:var(--acc)}

/* ---------- opener copy on the midnight panels (every inner page) ---------- */
.mod .hero-dark :is(.ph-sub,.th-sub,.sh-sub,.sch-sub,.tdh-sub,.feh-short,.feh-or,.feh-k,.facts){color:var(--on-dark)}
.mod .hero-dark .feh-lede{color:#fff}
.mod .hero-dark :is(.feh-short b,.feh-short data){color:#fff}
.mod .hero-dark .feh-short{border-left-color:var(--acc)}
.mod .hero-dark :is(.ph-alt,.th-alt,.sh-alt,.sch-alt,.tdh-alt,.feh-or a){color:var(--acc);text-decoration-color:rgba(var(--acc-rgb),.55)}
.mod .hero-dark :is(.ph-alt,.th-alt,.sh-alt,.sch-alt,.tdh-alt,.feh-or a):hover{color:#fff}
.mod .hero-dark .stats li{border-left-color:var(--acc)}
.mod .hero-dark .stats b{color:#fff}
.mod .hero-dark .stats span{color:var(--on-dark-2)}
.mod .hero-dark .facts i{background:var(--acc)}
.mod .hero-dark .facts i::after{border-color:var(--on-acc)}
.mod .hero-dark .feh-pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18);color:#fff;box-shadow:none}
.mod .hero-dark .feh-pill b{color:var(--acc)}
.mod .hero-dark .feh-pill:hover{background:rgba(var(--acc-rgb),.14);border-color:var(--acc)}
.mod .hero-dark .uline path{stroke:var(--acc)}
/* light cards that sit on a midnight opener keep their dark text */
.mod .hero-dark :is(.namecard,.fline) .eyebrow{color:var(--ink);background:rgba(var(--acc-rgb),.18);border-color:rgba(var(--acc-rgb),.5)}
.mod .hero-dark :is(.namecard,.fline) .eyebrow::before{background:var(--acc-text)}
.mod .hero-dark :is(.namecard,.fline,.paper){box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.mod .fl-months{color:#5E6678}

/* headings inside midnight panels: lime second phrase instead of the highlight */
.mod :is(.hero-dark,.talk-card,.hm-dial,.on-dark) :is(h1,h2) em,.mod :is(.hero-dark,.talk-card,.hm-dial,.on-dark) .hm-grad{background:none;color:var(--acc)}
.mod .on-dark .eyebrow{color:#fff;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)}
.mod .on-dark .eyebrow::before{background:var(--acc)}

/* the home hero joins the header as one midnight block */
.hm-hero{margin:0!important;border-radius:0 0 44px 44px!important}
@media (max-width:640px){.mod .hero-dark,.hm-hero{border-radius:0 0 30px 30px!important}.mod footer{border-radius:30px 30px 0 0}}

@media (prefers-reduced-motion:reduce){
  .logo-intro .lg-t,.logo-intro .lg-coin-g,.logo-intro .lg-arc,.logo-intro .lg-tax,.logo-intro .lg-reck,.brand:hover .lg-coin-g{animation:none}
}
.mod .fline::before{display:none}
.mod .hero-dark .fline{box-shadow:0 40px 90px -30px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.06),0 0 80px -10px rgba(var(--acc-rgb),.25)}

/* ---------- photo band on the inner pages: two rounded photos, each with a glass caption ---------- */
.pband{padding:20px 0 96px;background:transparent}
.pband-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:end}
.pband .hm-ph{height:400px}
.pband .pband-b{height:310px}
.pband .hm-glass{left:18px;bottom:18px;max-width:calc(100% - 36px)}
.pband .hm-glass strong{font-size:14.5px;line-height:1.3}
@supports (animation-timeline: view()){.pband .hm-ph img{animation:drift linear both;animation-timeline:view();animation-range:cover}}
@media (max-width:760px){.pband-grid{grid-template-columns:1fr}.pband .hm-ph,.pband .pband-b{height:250px}.pband{padding:10px 0 72px}}
@media (prefers-reduced-motion:reduce){.pband .hm-ph img{animation:none}}