:root{
    --navy:#0f3147; --deep:#0a2233; --ink:#0e171f; --steel:#7ca8c2; --steel-dark:#5888a0; --steel-soft:#a9c5d6;
    --mist:#e8f0f0; --mist2:#c8d8e0; --paper:#f6f8f8; --gold:#c9a84c;
    --on-dark:#e6eef2; --muted:#9db3c2; --line:rgba(124,168,194,.28);
    --r:5px; --r-tag:4px;
    --display:'Cormorant Garamond',Georgia,'Times New Roman',serif; --sans:'Manrope','Segoe UI',Helvetica,Arial,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--deep);color:var(--on-dark);font-family:var(--sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
  a{color:inherit;text-decoration:none}
  img,video{display:block;max-width:100%}
  h1,h2,h3,.display{font-family:var(--display);font-weight:500;text-transform:uppercase;letter-spacing:.04em;line-height:1.02;margin:0}
  .wrap{width:min(1320px,calc(100% - 112px));margin:0 auto}
  @media (max-width:760px){.wrap{width:calc(100% - 40px)}}
  .label{font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--steel)}
  .pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 26px;border-radius:var(--r);font-weight:600;font-size:13.5px;letter-spacing:.06em;text-transform:uppercase;border:1.5px solid transparent;transition:transform .25s ease,background .25s ease,color .25s ease,border-color .25s ease;white-space:nowrap;cursor:pointer}
  .pill:hover{transform:translateY(-2px)}
  .pill-steel{background:var(--steel);color:var(--deep)} .pill-steel:hover{background:var(--steel-soft)}
  .pill-line{border-color:rgba(255,255,255,.55);color:#fff} .pill-line:hover{border-color:#fff;background:rgba(255,255,255,.06)}
  .pill-navy{background:var(--navy);color:#fff} .pill-navy:hover{background:#16405c}
  .pill-ink{border-color:var(--navy);color:var(--navy)} .pill-ink:hover{background:var(--navy);color:#fff}
  .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
  .reveal.in{opacity:1;transform:none}

  /* Intro: the logo film itself, watermark covered, then the curtain lifts */
  #intro{position:fixed;inset:0;z-index:100;background:#0b1622;display:grid;place-items:center;transition:transform 1s cubic-bezier(.76,0,.24,1);will-change:transform;overflow:hidden}
  #intro.away{transform:translateY(-100%)}
  #intro video{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
  @media (max-aspect-ratio:1/1){#intro video{object-fit:contain}}
  #intro .edge{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 180px 70px #0b1622}
  #intro .skip{position:absolute;bottom:28px;right:32px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);cursor:pointer}
  @media (prefers-reduced-motion:reduce){#intro{display:none}}
  #progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--steel);transform-origin:left;transform:scaleX(0);z-index:60;pointer-events:none}

  /* Scroll motion: parallax backgrounds, staggered children, word-by-word headings, photo wipes */
  .bg{position:absolute;left:0;right:0;top:-14%;bottom:-14%;overflow:hidden;pointer-events:none;z-index:0}
  .bg img{width:100%;height:100%;object-fit:cover;transform:translateY(var(--py,0));will-change:transform}
  .bg.faint{opacity:.16;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 70%,transparent 100%)}
  .bg.trees{opacity:.5;-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,.6) 60%,#000 85%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,.6) 60%,#000 85%,transparent 100%)}
  .hasbg{position:relative} .hasbg>.wrap{position:relative;z-index:1}
  .stagger>*{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*80ms)}
  .stagger.in>*{opacity:1;transform:none}
  .words .w{display:inline-block;opacity:0;transform:translateY(.5em);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0)*70ms)}
  .words.in .w{opacity:1;transform:none}
  .wipe>img{clip-path:inset(0 0 100% 0);transition:clip-path .9s cubic-bezier(.2,.7,.2,1),transform 1.2s ease}
  .wipe.in>img{clip-path:inset(0)}
  @media (prefers-reduced-motion:reduce){.stagger>*,.words .w,.wipe>img{opacity:1;transform:none;clip-path:none;transition:none}.bg img{transform:none}}

  /* Header: light bar so the logo stays in its own colours */
  header{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(246,248,248,.92);backdrop-filter:blur(12px);color:var(--navy);transition:box-shadow .35s}
  header.solid{box-shadow:0 8px 30px -18px rgba(10,34,51,.45)}
  header .wrap{display:flex;align-items:center;justify-content:space-between;height:88px}
  header .logo{display:flex;flex-direction:column;align-items:flex-start;gap:5px;flex:none}
  header .logo img{height:42px;width:auto;max-width:none}
  header .logo .promise{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;font-weight:700;color:var(--navy);padding-left:1px;white-space:nowrap}
  @media (max-width:480px){header .logo .promise{display:none}}
  nav{display:flex;align-items:center;gap:32px;font-size:12.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600}
  nav a{opacity:.85;padding-bottom:4px;border-bottom:1px solid transparent} nav a:hover{opacity:1;border-color:var(--steel-dark)}
  nav .pill{height:40px;padding:0 20px;font-size:12px;opacity:1;border-bottom:0;background:var(--navy);color:#fff}
  .burger{display:none;width:44px;height:44px;align-items:center;justify-content:center}
  .pill.mini{display:none}
  @media (max-width:1080px){nav{display:none}.burger{display:inline-flex}.pill.mini{display:inline-flex;height:38px;padding:0 16px;font-size:11.5px;letter-spacing:.08em;background:var(--navy);color:#fff;margin-left:auto;margin-right:10px}body.menu-open .pill.mini{display:none}}

  /* Line-art rail */
  .rail{position:absolute;top:0;bottom:0;width:120px;pointer-events:none;opacity:.5}
  .rail.right{right:0} .rail.left{left:0}
  .rail svg{width:100%;height:100%}
  .rail path{fill:none;stroke:var(--steel);stroke-width:1;stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.6s ease}
  .rail.in path{stroke-dashoffset:0}
  @media (max-width:900px){.rail{display:none}}

  /* Hero: the mountain, as before */
  .hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--deep)}
  .hero .media{position:absolute;inset:0}
  .hero .media img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;transform:scale(1.02);animation:kb 26s ease-in-out infinite alternate;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,1) 45%);mask-image:linear-gradient(90deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,1) 45%)}
  @keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.10)}}
  .hero .veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,34,51,.78) 0%,rgba(10,34,51,.55) 30%,rgba(10,34,51,0) 58%),linear-gradient(180deg,rgba(10,34,51,.3) 0%,rgba(10,34,51,0) 35%,rgba(10,34,51,.94) 100%)}
  .hero .label{color:rgba(255,255,255,.88)}
  .hero .wrap{position:relative;padding:160px 0 80px;display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:end}
  .hero h1{font-size:clamp(42px,5.7vw,88px);color:#fff;max-width:13ch}
  .hero h1{text-shadow:0 2px 24px rgba(5,16,26,.45)}
  .hero h1 em{font-style:italic;text-transform:none;letter-spacing:0;color:#d6e4ec;display:block;font-size:.66em;margin-top:.14em;line-height:1.1;text-shadow:0 2px 18px rgba(5,16,26,.6)}
  .hero p{text-shadow:0 1px 12px rgba(5,16,26,.5)}
  .hero p{font-size:17px;max-width:46ch;color:var(--on-dark);margin:26px 0 30px}
  .hero p.lead{font-size:clamp(18px,1.5vw,22px);max-width:34ch;color:#fff}
  .cta{display:flex;flex-wrap:wrap;gap:14px}
  .hero .aside{justify-self:end;display:flex;flex-direction:column;gap:14px;max-width:320px;font-size:13.5px;color:#d6e0e6;background:rgba(10,34,51,.62);backdrop-filter:blur(6px);padding:18px 20px 20px;border:1px solid rgba(124,168,194,.25)}
  .hero .aside b{display:block;color:#fff;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;margin-bottom:4px}
  .hero .aside div{border-top:1px solid var(--line);padding-top:12px}
  .scrollcue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.7);display:flex;flex-direction:column;align-items:center;gap:8px}
  .scrollcue i{width:1px;height:38px;background:var(--steel);display:block;animation:cue 1.8s ease-in-out infinite;transform-origin:top}
  @keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(0);transform-origin:bottom}}
  @media (max-width:900px){.hero .veil{background:linear-gradient(180deg,rgba(10,34,51,.55) 0%,rgba(10,34,51,.45) 30%,rgba(10,34,51,.82) 65%,rgba(10,34,51,.96) 100%)}.hero{min-height:auto;align-items:flex-start}.hero .wrap{grid-template-columns:1fr;padding:120px 0 72px}.hero h1{font-size:clamp(40px,11vw,60px)}.hero .aside,.scrollcue{display:none}}
  @media (prefers-reduced-motion:reduce){.hero .media img{animation:none}.scrollcue i{animation:none}}

  /* Four practice areas */
  .divisions{padding:120px 0 110px;position:relative}
  .divisions .head{display:grid;grid-template-columns:5fr 7fr;gap:60px;align-items:end;margin-bottom:56px}
  .divisions h2{font-size:clamp(40px,4.6vw,66px);color:#fff}
  .divisions .head p{margin:0;font-size:17px;color:var(--on-dark);max-width:60ch}
  .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
  .card{background:var(--paper);color:var(--ink);padding:34px 28px 30px;display:flex;flex-direction:column;min-height:400px;transition:transform .4s ease}
  .card:hover{transform:translateY(-6px)}
  .card.feature{background:var(--mist)}
  .card h3{font-size:30px;color:var(--navy);margin-bottom:22px}
  .card p{margin:0 0 auto;font-size:14.5px;line-height:1.65;color:#3f5260}
  .card .pill{margin-top:26px;align-self:flex-start}
  .card .tag{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--steel-dark);font-weight:700;margin-bottom:14px}
  @media (max-width:1000px){.cards{grid-template-columns:repeat(2,1fr)}.divisions .head{grid-template-columns:1fr;gap:20px}}
  @media (max-width:600px){.cards{grid-template-columns:1fr}.card{min-height:0}}

  /* The film, in its own frame at native proportions */
  .film{padding:0 0 130px}
  .film .top{display:grid;grid-template-columns:5fr 7fr;gap:40px;align-items:end;margin-bottom:30px}
  .film h2{font-size:clamp(36px,4vw,58px);color:#fff}
  .film .top p{margin:0;color:var(--muted);font-size:15px;max-width:56ch}
  .player{position:relative;width:min(1100px,100%);margin:0 auto;aspect-ratio:16/9;background:#000;box-shadow:0 40px 80px -50px rgba(0,0,0,.8)}
  .player video{width:100%;height:100%;object-fit:contain}
  .film .credit{margin:14px auto 0;width:min(1100px,100%);display:flex;justify-content:space-between;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
  @media (max-width:900px){.film .top{grid-template-columns:1fr;gap:14px}}

  /* Sector grid, typographic */
  .sectors{padding:0 0 130px;position:relative}
  .sectors .top{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:34px;flex-wrap:wrap}
  .sectors h2{font-size:clamp(36px,4vw,58px);color:#fff}
  .sectors .top p{margin:0;max-width:52ch;color:var(--muted);font-size:15px}
  .sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
  .s{position:relative;aspect-ratio:4/3;background:var(--navy);padding:22px 22px 20px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
  .s img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.52);transition:transform 1.4s cubic-bezier(.2,.7,.2,1),filter .6s ease}
  .s:hover img{transform:scale(1.07);filter:saturate(1) brightness(.8)}
  .s::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,34,51,.78) 0%,rgba(10,34,51,.15) 42%,rgba(10,34,51,.2) 58%,rgba(10,34,51,.88) 100%)}
  .s b{position:relative;font-family:var(--display);font-weight:400;font-size:40px;line-height:1;color:rgba(255,255,255,.85);text-shadow:0 1px 10px rgba(5,16,26,.5)}
  .s span{text-shadow:0 1px 10px rgba(5,16,26,.6)}
  .s span{position:relative;font-size:15px;font-weight:600;color:#fff;max-width:14ch;line-height:1.3}
  .s i{position:absolute;right:10px;bottom:10px;font-style:normal;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(10,34,51,.85);padding:4px 8px;border-radius:var(--r-tag)}
  @media (max-width:1000px){.sgrid{grid-template-columns:repeat(3,1fr)}}
  @media (max-width:640px){.sgrid{grid-template-columns:repeat(2,1fr)}.s b{font-size:34px}.s span{font-size:13.5px}}

  /* Gold quote */
  .quote{display:grid;grid-template-columns:1fr 1fr;min-height:620px}
  .quote .gold{background:var(--gold);color:var(--deep);padding:90px 7vw 80px;display:flex;flex-direction:column;justify-content:center;position:relative}
  .quote .gold::before{content:"\201C";position:absolute;top:34px;left:6vw;font-family:var(--display);font-size:200px;line-height:1;color:rgba(10,34,51,.18)}
  .quote blockquote{margin:0;font-family:var(--display);font-size:clamp(28px,3vw,46px);line-height:1.25;text-transform:uppercase;letter-spacing:.03em;font-weight:500}
  .quote cite{display:block;margin-top:28px;font-style:normal;font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:700}
  .quote .photo{position:relative;overflow:hidden}
  .quote .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%);mask-image:linear-gradient(90deg,transparent 0%,#000 22%)}
  @media (max-width:900px){.quote{grid-template-columns:1fr}.quote .photo{min-height:420px}.quote .photo img{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 25%);mask-image:linear-gradient(180deg,transparent 0%,#000 25%)}}

  /* Services */
  .services{padding:130px 0;position:relative}
  .services .wrap{display:grid;grid-template-columns:6fr 6fr;gap:80px;align-items:center}
  .services h2{font-size:clamp(40px,4.6vw,66px);color:#fff}
  .services p.lead{font-size:17px;color:var(--on-dark);margin:22px 0 34px;max-width:52ch}
  .slist{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;list-style:none;margin:0 0 40px;padding:0}
  .slist li{padding:13px 0;border-top:1px solid var(--line);font-size:15px;font-weight:500;display:flex;gap:12px;align-items:baseline}
  .slist li::before{content:"";width:8px;height:8px;border:1px solid var(--steel);transform:rotate(45deg);flex:none;position:relative;top:-1px}
  .services .photo{position:relative}
  .services .photo img{width:100%;height:640px;object-fit:cover;object-position:50% 40%;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
  .services .photo .cap{position:absolute;left:0;bottom:36px;background:var(--deep);padding:14px 18px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--steel)}
  @media (max-width:900px){.services .wrap{grid-template-columns:1fr;gap:40px}.services .photo img{height:440px}.slist{grid-template-columns:1fr}}

  /* Seven steps */
  .steps{padding:0 0 130px}
  .steps h2{font-size:clamp(36px,4vw,58px);color:#fff;max-width:18ch;margin-bottom:44px}
  .rail7{display:flex;flex-wrap:wrap;justify-content:center;border-top:1px solid var(--line)}
  .st{flex:0 0 calc(100% / 7);position:relative;padding:34px 16px 28px;text-align:center;display:flex;flex-direction:column;align-items:center;border-right:1px solid var(--line)}
  .st:last-child{border-right:0}
  .st::before{content:"";position:absolute;top:-1px;left:50%;width:10px;height:10px;margin-left:-5px;background:var(--deep);border:1px solid var(--steel);transform:translateY(-50%) rotate(45deg)}
  .st b{font-family:var(--display);font-size:52px;line-height:1;color:var(--steel);font-weight:400;display:block;margin:0 0 14px}
  .st strong{display:block;font-size:14px;font-weight:700;color:#fff;margin-bottom:6px;max-width:16ch}
  .st span{font-size:13px;color:var(--muted);line-height:1.5;max-width:22ch}
  @media (max-width:1100px){.st{flex-basis:25%;border-bottom:1px solid var(--line)}.st:nth-child(4n){border-right:0}.st:last-child{border-right:1px solid var(--line)}}
  @media (max-width:640px){.st{flex-basis:50%}.st:nth-child(4n){border-right:1px solid var(--line)}.st:nth-child(2n){border-right:0}.st:last-child{border-right:1px solid var(--line)}}

  /* Estimate */
  .estimate{padding:0 0 130px}
  .estimate .box{background:var(--paper);color:var(--ink);display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;padding:70px}
  .estimate h2{font-size:clamp(40px,4.6vw,64px);color:var(--navy)}
  .estimate p{color:#3f5260;font-size:16px;margin:20px 0 30px;max-width:48ch}
  .mock{border:1px solid var(--mist2);background:#fff;padding:28px;display:flex;flex-direction:column;gap:12px;box-shadow:0 30px 60px -40px rgba(15,49,71,.5)}
  .mock .k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--steel-dark)}
  .mock h3{font-size:26px;color:var(--navy);text-transform:none;letter-spacing:0;font-weight:500}
  .opt{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--mist2);font-size:14.5px;border-radius:4px}
  .opt.on{border:1.5px solid var(--navy);background:var(--mist);font-weight:600}
  .opt i{width:16px;height:16px;border-radius:50%;border:1px solid var(--mist2);display:inline-block}
  .opt.on i{background:var(--navy);border-color:var(--navy)}
  .pulse{animation:pulse 2.4s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(15,49,71,.35)}50%{box-shadow:0 0 0 10px rgba(15,49,71,0)}}
  @media (max-width:900px){.estimate .box{grid-template-columns:1fr;padding:36px}}

  /* Podcast */
  .podcast{display:grid;grid-template-columns:1fr 1fr;min-height:560px;background:var(--navy)}
  .podcast .photo{position:relative;overflow:hidden}
  .podcast .photo img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;-webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 25%);mask-image:linear-gradient(270deg,transparent 0%,#000 25%)}
  .podcast .text{padding:90px 7vw;display:flex;flex-direction:column;justify-content:center;gap:22px}
  .podcast h2{font-size:clamp(36px,4vw,58px);color:#fff}
  .podcast p{margin:0;color:var(--on-dark);max-width:48ch}
  .podcast .note{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
  @media (max-width:900px){.podcast{grid-template-columns:1fr}.podcast .photo{min-height:360px;order:-1}.podcast .photo img{-webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);mask-image:linear-gradient(180deg,#000 60%,transparent 100%)}}

  /* Testimonials */
  .faces{padding:130px 0}
  .faces .top{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px;flex-wrap:wrap}
  .faces h2{font-size:clamp(36px,4vw,58px);color:#fff}
  .faces .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .face{background:var(--navy);display:flex;flex-direction:column}
  .face .ph{aspect-ratio:1/1;overflow:hidden;background:#163c56;position:relative}
  .face .ph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transition:transform 1.2s ease;-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,#000 70%,transparent 100%)}
  .face:hover .ph img{transform:scale(1.05)}
  .face .ph .init{position:absolute;inset:0;display:none;place-items:center;font-family:var(--display);font-size:80px;color:var(--steel);letter-spacing:.1em}
  .face .ph .init small{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.16em;color:var(--muted);text-align:center;margin-top:8px}
  .face .body{padding:22px 26px 28px;display:flex;flex-direction:column;gap:16px}
  .face q{font-family:var(--display);font-size:22px;line-height:1.3;color:#fff;quotes:none}
  .face .n{display:flex;justify-content:space-between;align-items:end;gap:12px;border-top:1px solid var(--line);padding-top:14px}
  .face .n b{display:block;color:#fff;font-size:14px} .face .n small{color:var(--muted);font-size:12.5px}
  .face .n a{color:var(--steel);font-size:13px;font-weight:600}
  .face .n span{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right;flex-shrink:0}
  @media (max-width:900px){.faces .grid{grid-template-columns:1fr}}

  [id]{scroll-margin-top:104px}
  .mock .opt{width:100%;font:inherit;font-size:14.5px;color:var(--ink);text-align:left;background:#fff;cursor:pointer;transition:background .25s ease,border-color .25s ease}
  .mock .opt span{display:flex;flex-direction:column;gap:2px}
  .mock .opt small{font-size:12.5px;font-weight:400;color:#5d6f7b}
  .mock .opt:hover{border-color:var(--steel-dark)}
  .mock .opt.on:hover{border-color:var(--navy)}
  .mock .opt:focus-visible{outline:2px solid var(--steel-dark);outline-offset:2px}
  .mock .opt i{flex:none;transition:background .25s ease,box-shadow .25s ease}
  .mock .opt.on i{box-shadow:inset 0 0 0 3px #fff}
  @media (max-width:900px){footer ul a{display:inline-block;padding:6px 0}footer ul{gap:2px}.face .n a{display:inline-block;padding:5px 0}}
  /* Insights */
  .insights{background:var(--paper);color:var(--ink);padding:110px 0}
  .insights .top{display:flex;justify-content:space-between;align-items:end;gap:30px;margin-bottom:40px;flex-wrap:wrap}
  .insights h2{font-size:clamp(36px,4vw,58px);color:var(--navy)}
  .insights .top p{margin:0;color:#3f5260;max-width:48ch}
  .igrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .post{background:#fff;border:1px solid var(--mist2);padding:28px 26px 26px;display:flex;flex-direction:column;gap:14px;min-height:280px;transition:transform .35s ease,box-shadow .35s ease}
  .post:hover{transform:translateY(-5px);box-shadow:0 30px 50px -36px rgba(15,49,71,.45)}
  .post .d{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-dark);font-weight:700}
  .post h3{font-size:24px;color:var(--navy);line-height:1.12}
  .post p{margin:0 0 auto;color:#3f5260;font-size:14.5px}
  .post .arrow{width:38px;height:38px;border:1px solid var(--navy);border-radius:50%;display:grid;place-items:center;align-self:flex-end}
  .post .arrow svg{width:16px;height:16px;stroke:var(--navy);fill:none;stroke-width:1.8}
  @media (max-width:900px){.igrid{grid-template-columns:1fr}}

  /* Contact and footer */
  .contact{padding:120px 0;position:relative;overflow:hidden}
  .contact .wrap{display:grid;grid-template-columns:7fr 5fr;gap:60px;align-items:center}
  .contact h2{font-size:clamp(48px,6vw,96px);color:#fff}
  .contact p{color:var(--on-dark);max-width:44ch;margin:18px 0 28px}
  .contact .details{display:flex;flex-direction:column;gap:18px;font-size:15px}
  .contact .details div{border-top:1px solid var(--line);padding-top:14px}
  .contact .details b{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.8);margin-bottom:4px}
  .contact .details{text-shadow:0 1px 10px rgba(5,16,26,.6)}
  .contact .signoff{font-family:var(--display);font-style:italic;font-size:clamp(20px,1.8vw,26px);color:#fff;margin:34px 0 0;max-width:none}
  .contact h2,.contact p{text-shadow:0 2px 18px rgba(5,16,26,.5)}
  @media (max-width:900px){.contact .wrap{grid-template-columns:1fr}}
  footer{background:var(--mist);color:var(--ink);padding:64px 0 34px}
  footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:30px;margin-bottom:56px}
  footer h4,footer h2.fh{line-height:1.2;text-wrap:wrap;font-family:var(--display);text-transform:uppercase;letter-spacing:.08em;font-size:18px;color:var(--navy);margin:0 0 14px;font-weight:500}
  footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:#3f5260}
  footer .flogo{width:200px;height:auto}
  footer .strap{margin-top:16px;font-size:13px;color:#3f5260;max-width:30ch;line-height:1.5}
  footer .brandline{font-family:var(--display);font-size:20px;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
  footer .cols li a{color:inherit;text-decoration:none;border-bottom:1px solid transparent}
  footer .cols li a:hover{border-bottom-color:var(--steel-dark)}
  footer .base a{color:var(--navy);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--steel-dark)}
  footer .base a:hover{text-decoration-color:var(--navy)}
  footer .base{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--mist2);padding-top:22px;font-size:12px;color:#5c6f7c}
  footer .badges{display:flex;align-items:center;gap:26px}
  footer .badges img{height:44px;width:auto}
  footer .badges img[alt="QuickBooks"]{height:38px}
  footer .badges .plate{display:flex;align-items:center;flex:none}
  footer .badges .plate img{height:72px;flex:none}
  footer .badges img[alt^="QuickBooks Certified"]{height:130px}
  footer .badges{gap:30px}
  footer .badges{flex-wrap:wrap}
  @media (max-width:560px){footer .badges{gap:18px}footer .badges img{height:38px}footer .badges .plate img{height:56px}footer .badges img[alt^="QuickBooks Certified"]{height:120px}}
  footer li.area{font-size:12.5px;color:#5c6f7c;max-width:26ch;line-height:1.5}
  @media (max-width:900px){footer .cols{grid-template-columns:1fr 1fr}}

  /* Who we help dropdown and the phone menu (added 18 Sep 2026) */
  nav .has-menu{position:relative;display:flex;align-items:center}
  nav .has-menu>a{display:inline-flex;align-items:center;gap:7px}
  nav .has-menu>a::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.7}
  nav .has-menu::before{content:"";position:absolute;left:0;right:0;top:100%;height:18px}
  nav .sub{position:absolute;top:calc(100% + 14px);left:-22px;min-width:300px;background:#fff;color:var(--navy);border-top:2px solid var(--navy);box-shadow:0 22px 44px -22px rgba(10,34,51,.5);padding:10px 0;display:none;flex-direction:column;text-transform:none;letter-spacing:0;font-size:15px;font-weight:600;z-index:60}
  nav .sub a{display:block;padding:11px 22px;border:0;opacity:1;color:var(--navy);line-height:1.3}
  nav .sub a:hover{background:var(--mist)}
  nav .sub a small{display:block;font-size:12.5px;font-weight:400;color:#4d6270;margin-top:2px;letter-spacing:0}
  nav .sub a.all{margin-top:6px;border-top:1px solid var(--mist2);padding-top:14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
  nav .has-menu:hover .sub,nav .has-menu:focus-within .sub,nav .has-menu.open .sub{display:flex}
  @media (hover:none) and (min-width:1081px){nav .has-menu:hover .sub{display:none}nav .has-menu.open .sub{display:flex}}
  /* 27 Oct 2026: every main link has a dropdown; the last two open leftwards so they stay on screen */
  nav span.has-menu:nth-last-of-type(-n+2) .sub{left:auto;right:-22px}
  nav .sub{min-width:290px}
  @media (max-width:1080px){
    .burger{cursor:pointer}
    body.menu-open{overflow:hidden}
    /* the header's backdrop-filter makes it the containing block for fixed
       descendants, so the panel is sized by stretching the header itself */
    body.menu-open header{bottom:0;background:var(--paper)}
    body.menu-open nav{display:flex;position:absolute;top:88px;left:0;right:0;bottom:0;background:var(--paper);color:var(--navy);flex-direction:column;align-items:stretch;gap:0;padding:8px 24px 40px;overflow:auto;font-size:15px;letter-spacing:.12em;z-index:49}
    body.menu-open nav>a,body.menu-open nav .has-menu>a{display:flex;padding:16px 0;border-bottom:1px solid var(--mist2);opacity:1}
    body.menu-open nav .has-menu{flex-direction:column;align-items:stretch}
    body.menu-open nav .has-menu>a::after{margin-left:auto}
    body.menu-open nav .has-menu::before{display:none}
    body.menu-open nav .sub{position:static;display:none;min-width:0;box-shadow:none;border:0;background:transparent;padding:4px 0 10px 18px;border-bottom:1px solid var(--mist2)}
    body.menu-open nav .has-menu.open .sub{display:flex}
    body.menu-open nav .has-menu>a::after{transition:transform .25s ease}
    body.menu-open nav .has-menu.open>a::after{transform:translateY(2px) rotate(-135deg)}
    body.menu-open nav .sub a small{display:none}
    body.menu-open nav .sub a{padding:9px 0}
    body.menu-open nav .sub a:hover{background:transparent}
    body.menu-open nav .pill{margin-top:22px;height:48px;justify-content:center}
    body.menu-open .burger svg{display:none}
    body.menu-open .burger::before{content:"×";font-size:34px;line-height:1;color:var(--navy)}
  }

  /* Phone fixes, 18 Sep 2026 mobile QA */
  @media (max-width:760px){
    html,body{overflow-x:clip}
    /* eyebrow labels and stamps were 10 to 11px; readable floor on a phone */
    .tag,.k,.ph,.stamp,.eyebrow,.route i,.a .fit,.card .tag,.s i,.grid a>i,.rung small{font-size:11.5px!important}
    th{font-size:12px!important}
    summary{min-height:40px}
    /* iPhone zooms the page when a field under 16px gets focus */
    input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px!important}
    input[type=checkbox],input[type=radio]{min-width:22px;min-height:22px}
  }

/* 21 Oct 2026: skip link (R3-10) */
.skiplink{position:absolute;left:-9999px;top:10px;z-index:3000;background:var(--deep);color:#fff;padding:12px 16px;font-size:14px;font-weight:600;text-decoration:none;border:1px solid var(--gold)}
.skiplink:focus{left:10px;outline:2px solid var(--gold);outline-offset:2px}
main{display:block}

/* 22 Oct 2026: approved motion, site-wide. M1 timing, M8 safe without JavaScript, M4 header, M2 accordion, M3 hover */
.reveal{transform:translateY(16px);transition-duration:.4s,.4s}
.stagger>*{transform:translateY(16px);transition-duration:.4s,.4s;transition-delay:calc(var(--i,0)*60ms)}
.words .w{transition-duration:.45s,.5s;transition-delay:calc(var(--i,0)*50ms)}
html:not(.js) .reveal,html:not(.js) .stagger>*,html:not(.js) .words .w{opacity:1;transform:none}
html:not(.js) .wipe>img{clip-path:none}
header .wrap{transition:height .3s ease}
header .logo img{transition:height .3s ease}
header .logo .promise{transition:opacity .2s ease,max-height .3s ease;max-height:20px;overflow:hidden}
header.small .wrap{height:64px}
header.small .logo img{height:32px}
header.small .logo .promise{opacity:0;max-height:0}
html.js details .wrap-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
html.js details.is-open .wrap-a{grid-template-rows:1fr}
html.js details .wrap-a>div{overflow:hidden;min-height:0}
summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .card{transition:transform .3s ease,box-shadow .3s ease}
  .card:hover{transform:translateY(-4px);box-shadow:0 30px 50px -36px rgba(15,49,71,.45)}
  .post:hover{transform:translateY(-4px)}
  .post .arrow svg{transition:transform .25s ease}
  .post:hover .arrow svg{transform:translateX(4px)}
  nav>a:not(.pill),nav>.has-menu>a{border-bottom:0;padding-bottom:5px;background-image:linear-gradient(var(--steel-dark),var(--steel-dark));background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s ease,opacity .2s}
  nav>a:not(.pill):hover,nav>.has-menu:hover>a{background-size:100% 1px}
  footer .cols li a{border-bottom:0;background-image:linear-gradient(var(--steel-dark),var(--steel-dark));background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size .3s ease}
  footer .cols li a:hover{background-size:100% 1px}
}
/* Home: the hero photo stays still; the text rises in order */
.hero .media img{animation:none;transform:none}
/* Home: numbers band (5.2) */
.numbers{padding:90px 0 100px;position:relative}
.numbers .head{display:grid;grid-template-columns:5fr 7fr;gap:60px;align-items:end;margin-bottom:44px}
.numbers h2{font-size:clamp(36px,4vw,58px);color:#fff;max-width:14ch}
.numbers .head p{margin:0;color:var(--muted);max-width:52ch;font-size:15.5px}
.numbers .head p .tag{display:inline-block;background:var(--gold);color:var(--deep);font-size:10px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;padding:4px 8px;border-radius:var(--r-tag);margin-right:8px;vertical-align:middle}
.nums{display:flex;border-top:1px solid var(--line)}
.nums .num{flex:1 1 0;padding:34px 16px 30px;border-right:1px solid var(--line);text-align:center;display:flex;flex-direction:column;align-items:center}
.nums .num:last-child{border-right:0}
.nums .num .ic{width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;margin-bottom:18px;opacity:0;transform:scale(.7);transition:opacity .35s ease,transform .45s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*90ms)}
.nums .num .ic svg{width:20px;height:20px;stroke:#fff;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.nums .num b{font-family:var(--display);font-size:52px;line-height:1;color:var(--steel);font-weight:400;display:block;margin:0 0 12px;opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease;transition-delay:calc(var(--i)*90ms + .12s)}
.nums .num b sup{font-size:22px;color:var(--gold);vertical-align:top;margin-left:2px}
.nums .num strong{display:block;font-size:14px;font-weight:700;color:#fff;margin-bottom:6px;max-width:16ch}
.nums .num span{font-size:13px;color:var(--muted);line-height:1.5;max-width:22ch}
.nums.in .num .ic,.nums.in .num b{opacity:1;transform:none}
@media (max-width:900px){.numbers .head{grid-template-columns:1fr;gap:14px}.nums{flex-wrap:wrap}.nums .num{flex-basis:50%;border-bottom:1px solid var(--line)}.nums .num:nth-child(2n){border-right:0}}
/* Home: five steps on one line, drawn once (5.4) */
.rail5{display:flex;position:relative;border-top:0;padding-top:1px}
.rail5::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
.rail5 .draw{position:absolute;left:0;right:0;top:0;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.rail5 .st{flex:0 0 20%;border-right:1px solid var(--line)}
.rail5 .st:last-child{border-right:0}
.rail5 .st::before{content:"";position:absolute;top:-5px;left:50%;width:9px;height:9px;margin-left:-5px;background:var(--deep);border:1px solid var(--steel);transform:rotate(45deg);transition:background .3s ease,border-color .3s ease;transition-delay:calc(var(--i)*220ms + .25s)}
.rail5 .st>*{opacity:0;transform:translateY(10px);transition:opacity .4s ease,transform .4s ease;transition-delay:calc(var(--i)*220ms + .3s)}
.rail5.in .draw{transform:scaleX(1)}
.rail5.in .st::before{background:var(--gold);border-color:var(--gold)}
.rail5.in .st>*{opacity:1;transform:none}
@media (max-width:900px){.rail5{flex-wrap:wrap}.rail5 .st{flex-basis:50%;border-bottom:1px solid var(--line)}.rail5 .st:nth-child(2n+1){border-right:1px solid var(--line)}.rail5 .st:nth-child(2n+2){border-right:0}.rail5 .st:last-child{border-right:1px solid var(--line)}.rail5::before,.rail5 .draw,.rail5 .st::before{display:none}}
/* Home: testimonial slider (5.8) */
.faces .top{align-items:end}
.faces .ctl{display:flex;align-items:center;gap:10px}
.faces .ctl button{width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;font:inherit;transition:background .25s,border-color .25s}
.faces .ctl button:hover,.faces .ctl button:focus-visible{background:var(--navy);border-color:var(--steel);outline:0}
.faces .ctl button svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8}
.faces .ct{font-size:12px;letter-spacing:.2em;font-weight:700;color:var(--muted);font-variant-numeric:lining-nums tabular-nums;margin-left:8px}
.faces .ct b{color:#fff}
.fslider{overflow:hidden}
.fslider .track{display:flex;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.fslider .face{flex:0 0 100%;min-width:0;flex-direction:row;align-items:stretch}
.fslider .face .ph{flex:0 0 38%;aspect-ratio:auto;min-height:360px;-webkit-mask-image:none;mask-image:none}
.fslider .face .ph img{-webkit-mask-image:linear-gradient(90deg,#000 75%,transparent 100%);mask-image:linear-gradient(90deg,#000 75%,transparent 100%)}
.fslider .face .body{flex:1;justify-content:center;padding:40px 48px}
.fslider .face q{font-size:clamp(22px,2.2vw,30px)}
@media (max-width:900px){.fslider .face{flex-direction:column}.fslider .face .ph{flex:none;aspect-ratio:1/1;min-height:0}.fslider .face .body{padding:22px 26px 28px}.faces .top{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){
  header .wrap,header .logo img,header .logo .promise,html.js details .wrap-a,.card,.post,.post .arrow svg,nav>a,nav>.has-menu>a,footer .cols li a,.nums .num .ic,.nums .num b,.rail5 .draw,.rail5 .st::before,.rail5 .st>*,.fslider .track{transition:none}
  .card:hover,.post:hover{transform:none}
  .nums .num .ic,.nums .num b,.rail5 .st>*{opacity:1;transform:none}.rail5 .draw{transform:scaleX(1)}.rail5 .st::before{background:var(--gold);border-color:var(--gold)}
}
html:not(.js) .nums .num .ic,html:not(.js) .nums .num b,html:not(.js) .rail5 .st>*{opacity:1;transform:none}
html:not(.js) .rail5 .draw{transform:scaleX(1)}

/* 22 Oct 2026: Home audience strip (4.1), from /home-test */
.divisions .head{margin-bottom:40px}
.strip{--openw:560px;--closedw:220px;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:10px;height:540px;transition:grid-template-columns .45s cubic-bezier(.25,.8,.25,1)}
.strip[data-open="0"]{grid-template-columns:3.1fr 1fr 1fr 1fr 1fr}
.strip[data-open="1"]{grid-template-columns:1fr 3.1fr 1fr 1fr 1fr}
.strip[data-open="2"]{grid-template-columns:1fr 1fr 3.1fr 1fr 1fr}
.strip[data-open="3"]{grid-template-columns:1fr 1fr 1fr 3.1fr 1fr}
.strip[data-open="4"]{grid-template-columns:1fr 1fr 1fr 1fr 3.1fr}
.tile{position:relative;min-width:0;overflow:hidden;border-radius:var(--r);background:#163c56;cursor:pointer;outline:none;text-decoration:none;color:#fff;display:block;contain:paint}
.tile img{position:absolute;top:0;bottom:0;left:50%;width:var(--openw);height:100%;transform:translateX(-50%);object-fit:cover;object-position:50% 25%;will-change:transform;backface-visibility:hidden}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,34,51,.15) 0%,rgba(10,34,51,.1) 45%,rgba(10,34,51,.9) 100%)}
.tile .ttl{position:absolute;left:0;bottom:0;width:var(--closedw);padding:22px;z-index:2;transition:opacity .25s ease}
.tile .ttl b{display:block;font-family:var(--display);font-size:19px;font-weight:500;line-height:1.1;color:#fff;text-transform:uppercase;letter-spacing:.04em}
.tile .ttl small{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--steel);margin-bottom:8px}
.tile .go{position:absolute;top:16px;right:16px;width:38px;height:38px;border:1.5px solid rgba(255,255,255,.7);border-radius:50%;display:grid;place-items:center;z-index:2;background:rgba(10,34,51,.25)}
.tile .go svg{width:16px;height:16px;stroke:#fff;stroke-width:1.8;fill:none}
.tile .panel{position:absolute;left:18px;bottom:18px;width:calc(var(--openw) - 36px);z-index:3;background:#fff;color:var(--ink);border-radius:var(--r);padding:24px 26px;opacity:0;transform:translateY(10px);transition:opacity .3s cubic-bezier(.22,.61,.36,1) .18s,transform .35s cubic-bezier(.22,.61,.36,1) .18s;pointer-events:none;will-change:opacity,transform}
.tile .panel small{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:var(--steel-dark);margin-bottom:8px}
.tile .panel h3{font-size:26px;color:var(--navy);margin:0 0 10px}
.tile .panel p{margin:0 0 16px;font-size:15px;line-height:1.55;color:#3f5260;max-width:46ch}
.tile .panel .pill{height:40px;padding:0 20px;font-size:12px}
.tile.open .ttl{opacity:0}
.tile.open .panel{opacity:1;transform:none;pointer-events:auto}
.tile:focus-visible{box-shadow:0 0 0 3px var(--steel)}
@media (max-width:900px){.strip,.strip[data-open]{grid-template-columns:1fr;height:auto;gap:8px;transition:none}.tile{height:150px}.tile.open{height:auto;min-height:340px}.tile img{left:0;width:100%;transform:none;will-change:auto}.tile .ttl{width:auto;right:0}.tile .panel{position:relative;z-index:3;margin:150px 0 0;width:auto;opacity:1;transform:none;pointer-events:auto;transition:none}.tile.open .ttl{opacity:0}.tile .panel{left:0;bottom:0}.tile:not(.open) .panel{display:none}.tile::after{background:linear-gradient(180deg,rgba(10,34,51,.35) 0%,rgba(10,34,51,.55) 45%,rgba(10,34,51,.92) 100%)}}
@media (prefers-reduced-motion:reduce){.strip,.tile,.tile .ttl,.tile .panel{transition:none}}

/* 22 Oct 2026: back to top. Appears after most of a screen; the gold ring fills as you read. Injected by page.js. */
.totop{position:fixed;right:22px;bottom:22px;width:48px;height:48px;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center;z-index:60;opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .3s ease,transform .3s ease,background .25s;border:0;cursor:pointer;box-shadow:0 14px 30px -14px rgba(5,16,26,.6)}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover,.totop:focus-visible{background:var(--navy);outline:0}
.totop:focus-visible{box-shadow:0 0 0 3px var(--gold)}
.totop .ring{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.totop .ring circle{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.5}
.totop .ring circle.p{stroke:var(--gold);stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0));transition:stroke-dashoffset .15s linear}
.totop .arr{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s ease}
.totop:hover .arr{transform:translateY(-2px)}
body.menu-open .totop{opacity:0;pointer-events:none}
@media (max-width:600px){.totop{right:14px;bottom:14px;width:44px;height:44px}}
@media (prefers-reduced-motion:reduce){.totop,.totop .arr,.totop .ring circle.p{transition:none}}
@media print{.totop{display:none}}

/* 22 Oct 2026: fit the screen (audit A1 to A3, A6). Heroes size to the window height as well as its width. */
html .hero .wrap{padding:clamp(96px,15vh,160px) 0 clamp(32px,6vh,80px)}
html .hero h1{font-size:min(clamp(42px,5.7vw,88px),11.5vh)}
html .hero p.lead{margin:clamp(14px,2.4vh,26px) 0 clamp(18px,3vh,30px)}
@media (min-width:901px) and (max-height:820px){html .hero .wrap{grid-template-columns:1fr}html .hero .aside{display:none}}
@media (min-width:901px) and (max-height:700px){html .hero .scrollcue{display:none}html .hero h1 em{font-size:.58em}}
html .phero{min-height:min(78svh,760px)}
html .phero .wrap{padding:clamp(104px,15vh,170px) 0 clamp(36px,7vh,80px)}
html .phero h1{font-size:min(clamp(40px,4.9vw,72px),10vh)}
html .phero p.sub{margin-top:clamp(12px,2.2vh,24px)}
html .phero p.lead{margin:clamp(12px,2.2vh,22px) 0 clamp(16px,2.8vh,30px)}
@media (min-width:901px) and (max-height:820px){html .phero p.sub{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}

/* factsheet cards with covers (Home and Insights) */
.fcard{background:#fff;border:1px solid var(--mist2);display:flex;flex-direction:column;text-decoration:none;color:var(--ink);transition:transform .3s ease,box-shadow .3s ease}
.fcard .cover{aspect-ratio:4/3;overflow:hidden;background:var(--navy);position:relative}
.fcard .cover img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.fcard .body{padding:18px 20px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.fcard .d{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--steel-dark);font-weight:700}
.fcard h3{font-size:21px;color:var(--navy);line-height:1.15}
.fcard .go{margin-top:auto;display:flex;justify-content:space-between;align-items:center;font-size:13px;font-weight:700;color:var(--navy);padding-top:10px}
.fcard .go svg{width:16px;height:16px;stroke:var(--navy);fill:none;stroke-width:1.8;transition:transform .25s ease}
@media (hover:hover) and (pointer:fine){.fcard:hover{transform:translateY(-4px);box-shadow:0 30px 50px -36px rgba(15,49,71,.45)}.fcard:hover .go svg{transform:translateX(4px)}}
.insights .rowhead{display:flex;justify-content:flex-end;gap:10px;margin:0 0 14px}
.rowctl button{width:40px;height:40px;border:1px solid var(--line);border-radius:50%;background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center}
.rowctl button svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:1.8}
.rowctl button:hover{background:var(--navy)}

/* 22 Oct 2026: Ask Echo, second design. Gold launcher with the Echo mark; greeting and unread badge on a first visit;
   panel with avatar, name, new chat and close inside it. Panel parts are divs, never header or footer (site rules apply to those). */
.ask{position:fixed;right:22px;bottom:22px;z-index:63;display:inline-flex;align-items:center;gap:10px;height:56px;padding:0 20px 0 8px;border:0;border-radius:28px;background:var(--gold);color:var(--deep);font:700 12.5px var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;box-shadow:0 18px 36px -14px rgba(5,16,26,.55),0 0 0 1px rgba(10,34,51,.12);transition:transform .2s ease,box-shadow .2s ease,padding .25s ease}
.ask:hover{transform:translateY(-2px);box-shadow:0 22px 40px -14px rgba(5,16,26,.6),0 0 0 1px rgba(10,34,51,.16)}
.ask:focus-visible{outline:3px solid var(--deep);outline-offset:3px}
.ask .ae-av{width:40px;height:40px}
.ask .ae-close{display:none;width:40px;height:40px;place-items:center}
.ask .ae-close svg{width:22px;height:22px;stroke:var(--deep);fill:none;stroke-width:2}
.ask.is-open{padding:0 8px}
.ask.is-open .ae-av,.ask.is-open .ae-lbl{display:none}
.ask.is-open .ae-close{display:grid}
.ask .ae-badge{position:absolute;top:-4px;right:-2px;min-width:22px;height:22px;padding:0 6px;border-radius:11px;background:#c2412d;color:#fff;font:700 12px/22px var(--sans);letter-spacing:0;text-align:center;box-shadow:0 0 0 2px #fff}
.ask .ae-badge[hidden]{display:none}
.ask.nudge::after{content:"";position:absolute;inset:-4px;border-radius:32px;border:2px solid var(--gold);opacity:0;animation:askpulse 1.8s ease-out 2;pointer-events:none}
@keyframes askpulse{0%{opacity:.9;transform:scale(.96)}100%{opacity:0;transform:scale(1.18)}}
.ae-av{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--deep);box-shadow:0 0 0 2px var(--gold) inset;overflow:hidden}
.ae-av img{width:62%;height:auto;display:block;filter:brightness(0) invert(1)}
.ae-av.ae-gap{background:transparent;box-shadow:none}
body.has-ask .totop{bottom:92px}
body.menu-open .ask,body.menu-open .askpanel,body.menu-open .askgreet{opacity:0;pointer-events:none}
.askgreet{position:fixed;right:22px;bottom:92px;z-index:62;width:300px;display:flex;gap:12px;align-items:flex-start;padding:16px 38px 16px 16px;background:#fff;color:var(--ink);border-radius:var(--r);box-shadow:0 24px 50px -24px rgba(5,16,26,.55),0 0 0 1px var(--mist2);cursor:pointer;opacity:0;transform:translateY(10px);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.askgreet[hidden]{display:none}
.askgreet.on{opacity:1;transform:none}
.askgreet::after{content:"";position:absolute;right:34px;bottom:-7px;width:14px;height:14px;background:#fff;transform:rotate(45deg);box-shadow:4px 4px 6px -3px rgba(5,16,26,.15)}
.askgreet .ae-gt b{display:block;font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);line-height:1}
.askgreet .ae-gt span{display:block;margin-top:6px;font-size:13.5px;line-height:1.5;color:#3f5260}
.askgreet .ae-gx{all:unset;cursor:pointer;position:absolute;top:8px;right:8px;width:26px;height:26px;display:grid;place-items:center;border-radius:50%}
.askgreet .ae-gx svg{width:14px;height:14px;stroke:var(--steel-dark);fill:none;stroke-width:2}
.askgreet .ae-gx:hover,.askgreet .ae-gx:focus-visible{background:var(--mist)}
.askpanel{position:fixed;right:22px;bottom:92px;width:min(400px,calc(100vw - 32px));height:min(620px,calc(100vh - 124px));z-index:62;background:#fff;color:var(--ink);border-radius:12px;box-shadow:0 30px 70px -30px rgba(5,16,26,.65),0 0 0 1px var(--mist2);display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(14px) scale(.98);transform-origin:bottom right;transition:opacity .22s ease,transform .25s cubic-bezier(.2,.7,.2,1)}
.askpanel[hidden],.askpanel [hidden]{display:none!important}
.askpanel.on{opacity:1;transform:none}
.askpanel .ae-ah{display:flex;align-items:center;gap:12px;padding:14px 10px 14px 16px;background:var(--deep);color:#fff;flex:none}
.askpanel .ae-ah .ae-av{width:42px;height:42px}
.askpanel .ae-who{flex:1;min-width:0}
.askpanel .ae-who b{display:block;font-family:var(--display);font-weight:500;font-size:22px;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.askpanel .ae-who span{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--on-dark);margin-top:5px}
.askpanel .ae-who .ae-dot{width:7px;height:7px;border-radius:50%;background:#5bbf7a;box-shadow:0 0 0 2px rgba(91,191,122,.25);flex:none}
.askpanel .ae-ib{all:unset;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;flex:none}
.askpanel .ae-ib svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.askpanel .ae-ib:hover,.askpanel .ae-ib:focus-visible{background:rgba(255,255,255,.12)}
.askpanel .ae-log{flex:1;overflow-y:auto;padding:18px 14px 8px;display:flex;flex-direction:column;gap:8px;background:var(--paper)}
.askpanel .ae-m{display:flex;gap:8px;align-items:flex-end;max-width:92%;font-size:14px;line-height:1.55}
.askpanel .ae-m .ae-av{width:28px;height:28px}
.askpanel .ae-m .ae-bub{min-width:0}
.askpanel .ae-m p{margin:0;padding:10px 13px;border-radius:12px}
.askpanel .ae-m.assistant p{background:#fff;border:1px solid var(--mist2);color:var(--ink);border-bottom-left-radius:4px}
.askpanel .ae-m.user{align-self:flex-end}
.askpanel .ae-m.user p{background:var(--navy);color:#fff;border-bottom-right-radius:4px}
.askpanel .ae-m.pending p::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:askdots 1.2s steps(4,end) infinite}
@keyframes askdots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.askpanel .ae-src{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 0 2px}
.askpanel .ae-src a{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--navy);text-decoration:none;border-bottom:1px solid var(--steel)}
.askpanel .ae-link{all:unset;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--navy);border-bottom:1px solid var(--gold);padding-bottom:1px}
.askpanel .ae-chips{display:flex;gap:8px;flex-wrap:wrap;padding:6px 14px 10px 50px;background:var(--paper);flex:none}
.askpanel .ae-chips button{font:600 12px var(--sans);padding:8px 12px;border-radius:999px;border:1px solid var(--mist2);background:#fff;color:var(--navy);cursor:pointer}
.askpanel .ae-chips button:hover{border-color:var(--navy)}
.askpanel .ae-say{display:flex;gap:8px;padding:10px 10px 10px 16px;border-top:1px solid var(--mist2);background:#fff;flex:none}
.askpanel .ae-say input{flex:1;min-width:0;border:0;outline:0;font:inherit;font-size:15px;color:var(--ink);background:transparent}
.askpanel .ae-say button{width:40px;height:40px;border:0;border-radius:50%;background:var(--gold);cursor:pointer;display:grid;place-items:center;flex:none}
.askpanel .ae-say button svg{width:16px;height:16px;stroke:var(--deep);fill:none;stroke-width:2}
.askpanel .ae-say:focus-within{box-shadow:inset 0 2px 0 var(--steel)}
.askpanel .ae-hcard{max-width:100%;align-items:flex-start}
.askpanel .ae-hcard .ae-av{margin-top:2px}
.askpanel .ae-hc{position:relative;flex:1;min-width:0;background:#fff;border:1px solid var(--mist2);border-radius:12px;border-top-left-radius:4px;padding:16px 16px 12px;display:grid;gap:10px;box-shadow:0 14px 30px -24px rgba(5,16,26,.5)}
.askpanel .ae-hc-h b{display:block;font-family:var(--display);font-weight:500;font-size:20px;letter-spacing:.04em;text-transform:uppercase;color:var(--navy);line-height:1.1}
.askpanel .ae-hc-h span{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:#3f5260}
.askpanel .ae-hf{display:grid;gap:5px}
.askpanel .ae-hf span{font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:var(--steel-dark)}
.askpanel .ae-hf em{font-style:normal;text-transform:none;letter-spacing:0;font-weight:600;color:#7a8b96}
.askpanel .ae-hf input,.askpanel .ae-hf textarea{font:inherit;font-size:15px;padding:10px 12px;border:1px solid var(--mist2);border-radius:8px;color:var(--ink);background:var(--paper);width:100%;box-sizing:border-box;resize:none;transition:border-color .2s,background .2s}
.askpanel .ae-hf input:focus,.askpanel .ae-hf textarea:focus{outline:0;border-color:var(--navy);background:#fff}
.askpanel .ae-hc .ae-err{margin:0;padding:0;background:none;border:0;font-size:13px;color:#a83a2a;font-weight:600}
.askpanel .ae-hc-go{display:flex;align-items:center;justify-content:center;gap:10px;height:44px;border:0;border-radius:8px;background:var(--navy);color:#fff;font:700 12.5px var(--sans);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:background .2s}
.askpanel .ae-hc-go:hover{background:var(--deep)}
.askpanel .ae-hc-go svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2}
.askpanel .ae-hc-go.ae-busy{opacity:.7;cursor:progress}
.askpanel .ae-hc-f{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11.5px;color:#7a8b96}
.askpanel .ae-hc-no{all:unset;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--navy);border-bottom:1px solid var(--steel)}
.askpanel .ae-hc.ae-done{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:center}
.askpanel .ae-hc.ae-done .ae-tick{grid-row:span 2;width:34px;height:34px;border-radius:50%;background:#e7f4ec;display:grid;place-items:center}
.askpanel .ae-hc.ae-done .ae-tick svg{width:18px;height:18px;stroke:#2f8a55;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.askpanel .ae-hc.ae-done b{font-size:15px;color:var(--navy)}
.askpanel .ae-hc.ae-done span:last-child{font-size:13px;line-height:1.5;color:#3f5260}
.askpanel .ae-af{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 16px;border-top:1px solid var(--mist2);background:#fff;font-size:11.5px;color:var(--steel-dark);flex:none}
.askpanel .ae-af .ae-person{all:unset;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--navy);border-bottom:1px solid var(--gold);padding-bottom:1px}
.askpanel .ae-sr{position:absolute;left:-9999px}
@media (max-width:600px){
  .ask{right:14px;bottom:14px;height:52px;padding:0 6px}.ask .ae-lbl{display:none}.ask .ae-av{width:40px;height:40px}
  body.has-ask .totop{bottom:78px;right:18px}
  .askpanel{right:0;bottom:0;left:0;top:0;width:auto;height:auto;border-radius:0;z-index:64}
  .askpanel .row2{grid-template-columns:1fr}
  .ask.is-open{opacity:0;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){.ask,.askpanel,.askgreet{transition:none}.ask.nudge::after{animation:none}.askpanel .ae-m.pending p::after{animation:none;content:"..."}}
@media print{.ask,.askpanel,.askgreet{display:none}}

/* 22 Oct 2026: sticky split. Tall portrait photos show whole; the text beside them stays in view while the photo scrolls past. */
.split .stick{display:flex;flex-direction:column;gap:inherit}
.split-in .stick{display:block}
@media (min-width:901px){
  .split{min-height:0!important;align-items:stretch}
  .split>.photo{position:relative;overflow:hidden;align-self:stretch;min-height:0!important}
  .split>.photo::before{content:"";display:block;padding-top:150%}
  .split>.photo>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .split>.gold,.split>.text{display:block!important;padding:0!important}
  .split>.gold>.stick,.split>.text>.stick{position:sticky;top:0;min-height:100svh;box-sizing:border-box;justify-content:center;padding:calc(88px + 5vh) 7vw 7vh}
  .split-in .wrap{align-items:stretch!important}
  .split-in .wrap>div:first-child{align-self:stretch}
  .split-in .stick{position:sticky;top:0;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:88px 0 4vh}
  .split-in .photo{align-self:start}
  .split-in .photo>img{height:auto!important;aspect-ratio:2/3;object-fit:cover}
  .quote.split .gold::before{display:none}
}
@media (min-width:901px) and (max-height:820px){
  .split>.gold>.stick,.split>.text>.stick{padding:calc(76px + 3vh) 6vw 4vh}
  .split-in .stick{padding:76px 0 3vh}
  .quote.split .stick::before{content:"\201C";display:block;font-family:var(--display);font-size:150px;line-height:.62;color:rgba(10,34,51,.18);margin-bottom:6px}
}

/* 22 Oct 2026: rows you can drag (rebuilt). Whole cards, native scroll and snap underneath, pointer drag on desktop. */
.drag{display:flex;gap:16px!important;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.drag::-webkit-scrollbar{display:none}
.drag>*{scroll-snap-align:start;flex:0 0 auto;min-width:0}
.drag.can{cursor:grab}
@media (hover:hover) and (pointer:fine){.drag.can{cursor:none}}
.drag.moving{scroll-snap-type:none;user-select:none}
.drag.moving *{pointer-events:none}
.drag img{-webkit-user-drag:none;user-select:none}
.dragcur{position:fixed;left:0;top:0;width:76px;height:76px;margin:-38px 0 0 -38px;border-radius:50%;background:var(--deep);color:#fff;display:grid;place-items:center;font:700 10.5px var(--sans);letter-spacing:.2em;text-transform:uppercase;pointer-events:none;z-index:80;opacity:0;will-change:transform;border:1px solid rgba(201,168,76,.55);box-shadow:0 14px 30px -14px rgba(5,16,26,.6);transition:opacity .2s ease,width .2s ease,height .2s ease,margin .2s ease}
.dragcur.on{opacity:1}
.dragcur.down{width:60px;height:60px;margin:-30px 0 0 -30px;background:var(--navy)}
/* testimonials: upright cards, three across */
.fslider{overflow:visible}
.fslider .track{display:flex;gap:16px;transition:none;transform:none!important}
.fslider .face{flex:0 0 calc((100% - 32px) / 3);flex-direction:column;align-items:stretch}
.fslider .face .ph{flex:none;aspect-ratio:4/3;min-height:0;-webkit-mask-image:none;mask-image:none}
.fslider .face .ph img{-webkit-mask-image:none;mask-image:none;object-position:50% 30%}
.fslider .face .body{flex:1;justify-content:space-between;padding:26px 26px 26px}
.fslider .face q{font-size:clamp(18px,1.45vw,22px)}
.faces.fits .ctl{visibility:hidden}
@media (max-width:1000px){.fslider .face{flex-basis:calc((100% - 16px) / 2)}}
@media (max-width:640px){.fslider .face{flex-basis:86%}}
/* factsheet cards: four across, whole */
.fcards>.fcard,.sheets.drag>.sheet{flex:0 0 calc((100% - 48px) / 4)}
@media (max-width:1100px){.fcards>.fcard,.sheets.drag>.sheet{flex-basis:calc((100% - 32px) / 3)}}
@media (max-width:760px){.fcards>.fcard,.sheets.drag>.sheet{flex-basis:calc((100% - 16px) / 2)}}
@media (max-width:520px){.fcards>.fcard,.sheets.drag>.sheet{flex-basis:84%}}
.rowctl.fits{visibility:hidden}
@media (prefers-reduced-motion:reduce){.dragcur{transition:none}}

/* 22 Oct 2026: area tiles (build order 2.5). Full band on Contact; .locs.mini is the compact row for the Home close and About. */
.locs{background:var(--deep);color:#fff;padding:90px 0}
.locs .top{display:grid;grid-template-columns:5fr 7fr;gap:60px;align-items:end;margin-bottom:30px}
.locs .label{color:var(--steel)}
.locs h2{font-size:clamp(32px,3.6vw,50px);color:#fff;margin-top:14px}
.locs .top p{margin:0;color:var(--on-dark);max-width:48ch}
.lgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid rgba(255,255,255,.14);border-radius:var(--r);overflow:hidden}
.loc{padding:34px 22px 30px;border-right:1px solid rgba(255,255,255,.14);display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;transition:background .3s ease}
.loc:last-child{border-right:0}
.loc:hover{background:rgba(255,255,255,.04)}
.loc b{font-family:var(--display);font-weight:500;font-size:clamp(28px,2.6vw,38px);letter-spacing:.06em;text-transform:uppercase;line-height:1;color:#fff}
.loc i{width:28px;height:1px;background:var(--gold);display:block}
.loc span{font-size:13.5px;color:var(--on-dark);line-height:1.5;max-width:22ch}
.locs .uk{margin:16px 0 0;font-size:13px;color:var(--on-dark);text-align:center}
.locs.mini{background:none;padding:0;margin-top:6px}
.locs.mini .lgrid{border-color:rgba(255,255,255,.2)}
.locs.mini .loc{padding:14px 8px 12px;gap:6px}
.locs.mini .loc b{font-size:17px;letter-spacing:.08em}
.locs.mini .loc i{width:18px}
.locs.mini.light .lgrid{border-color:var(--mist2)}
.locs.mini.light .loc{border-color:var(--mist2)}
.locs.mini.light .loc b{color:var(--navy)}
.contact .details .locs{border-top:0;padding-top:0}
.contact .details .locs .loc b{margin:0;color:#fff;font-family:var(--display);text-shadow:none}
@media (max-width:900px){.locs .top{grid-template-columns:1fr;gap:14px}.lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.loc:nth-child(2n){border-right:0}.loc:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.14)}.locs.mini.light .loc:nth-child(-n+2){border-bottom-color:var(--mist2)}}

/* area names, compact row: two by two where the column is narrow (About always; the Home close under 1200px) */
.locs.mini.light .lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.locs.mini.light .loc:nth-child(2n){border-right:0}
.locs.mini.light .loc:nth-child(-n+2){border-bottom:1px solid var(--mist2)}
@media (max-width:1200px){.locs.mini .lgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.locs.mini .loc:nth-child(2n){border-right:0}.locs.mini .loc:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.2)}.locs.mini.light .loc:nth-child(-n+2){border-bottom-color:var(--mist2)}}

/* 22 Oct 2026: portrait photos in an inner-page hero sit in the right part on desktop, fading in from the navy,
   so the face shows at head-and-shoulders size and stays clear of the heading. --py sets the face height per photo. */
@media (min-width:901px){
  html .phero.portrait .media{left:40%;overflow:hidden}
  .phero.portrait .media img{object-position:var(--px,50%) var(--py,15%)}
  .phero.portrait .media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--deep) 0%,rgba(10,34,51,.55) 22%,rgba(10,34,51,0) 55%);pointer-events:none}
}

/* 22 Oct 2026: testimonials, quote first. Small avatar, name, business and source; grid of up to three; no carousel. */
.faces .top p{margin:0;color:var(--on-dark);font-size:15px}
.tq-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:16px;align-items:stretch}
.tq{margin:0;background:var(--navy);border:1px solid rgba(255,255,255,.08);padding:30px 30px 24px;display:flex;flex-direction:column;gap:18px;position:relative;transition:border-color .3s ease,transform .3s ease}
.tq:hover{border-color:rgba(201,168,76,.45);transform:translateY(-3px)}
.tq .mk{font-family:var(--display);font-size:84px;line-height:.6;color:var(--gold);height:34px;display:block}
.tq blockquote{margin:0;flex:1;font-family:var(--display);font-size:clamp(20px,1.7vw,24px);line-height:1.38;color:#fff}
.tq figcaption{display:flex;align-items:center;gap:14px;border-top:1px solid var(--line);padding-top:16px}
.tq .av{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px var(--gold)}
.tq .av.ini{display:grid;place-items:center;background:#163c56;color:var(--steel);font:600 15px var(--sans);letter-spacing:.08em}
.tq .who{flex:1;min-width:0}
.tq .who b{display:block;color:#fff;font-size:15px}
.tq .who small{display:block;color:var(--on-dark);font-size:13px}
.tq .src{font-size:12.5px;font-weight:600;color:var(--steel);text-align:right;flex:none}
a.tq .src,.tq a.src{text-decoration:none;border-bottom:1px solid rgba(124,168,194,.4)}
@media (max-width:600px){.tq{padding:24px 20px 20px}.tq figcaption{flex-wrap:wrap}.tq .src{text-align:left;width:100%;padding-left:62px}}
@media (prefers-reduced-motion:reduce){.tq{transition:none}.tq:hover{transform:none}}

/* 22 Oct 2026: Ask Echo answers carry buttons to the right page, and follow-up questions as chips */
.askpanel .ae-acts{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0 2px}
.askpanel .ae-act{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--navy);background:#fff;color:var(--navy);font:700 12px var(--sans);text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.askpanel .ae-act.ae-pri{background:var(--navy);color:#fff}
.askpanel .ae-act:hover{background:var(--deep);border-color:var(--deep);color:#fff}
.askpanel .ae-act:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* 27 Oct 2026: the Ask Echo launcher (and back-to-top above it) sat over the Hillingdon Chamber badge at the foot of
   the page on laptops. The badge row now stops short of the launcher column; on phones the footer ends below it. */
@media (min-width:761px){body.has-ask footer .base{padding-right:190px}}
@media (max-width:760px){body.has-ask footer{padding-bottom:96px}}
/* 27 Oct 2026: six dropdown links plus Contact fit one line on smaller laptops */
nav>a,nav .has-menu>a{white-space:nowrap}
@media (min-width:1081px) and (max-width:1380px){nav{gap:13px;letter-spacing:.09em;font-size:12px}nav .has-menu>a{gap:5px}nav .pill{padding:0 14px}}
/* 27 Oct 2026: photos opened over .9s, after a late start; now a shorter wipe */
.wipe>img{transition-duration:.55s,1.2s}

/* 27 Oct 2026: the Home film. A muted preview plays only while it is on screen (page.js, video[data-inview]); a click
   anywhere on it opens the full film with sound in a theatre (page.js, [data-theatre]). */
.player{overflow:hidden}
.player video{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.player .play{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-decoration:none;cursor:pointer;background:radial-gradient(60% 60% at 50% 50%,rgba(10,34,51,.12) 0%,rgba(10,34,51,.42) 100%)}
.player .play .ring{position:relative;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:rgba(10,34,51,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1.5px solid var(--gold);transition:transform .45s cubic-bezier(.2,.7,.2,1),background .35s ease}
.player .play .ring::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(201,168,76,.45);opacity:0;transition:opacity .35s ease,inset .45s cubic-bezier(.2,.7,.2,1)}
.player .play svg{width:28px;height:28px;fill:#fff;margin-left:5px}
.player .play .t{font:600 12.5px var(--sans);letter-spacing:.18em;text-transform:uppercase;color:#fff;text-shadow:0 1px 12px rgba(5,16,26,.6)}
.player .play .t small{font-size:inherit;color:var(--gold);margin-left:8px}
.player .play:focus-visible{outline:2px solid var(--gold);outline-offset:-6px}
.player .hint{position:absolute;left:16px;top:16px;z-index:3;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.85);background:rgba(10,34,51,.55);padding:6px 10px;border-radius:var(--r-tag);pointer-events:none}
@media (hover:hover) and (pointer:fine){
  .player:hover video{transform:scale(1.025)}
  .player .play:hover .ring,.player .play:focus-visible .ring{transform:scale(1.08);background:rgba(201,168,76,.22)}
  .player .play:hover .ring::after,.player .play:focus-visible .ring::after{opacity:1;inset:-16px}
}
@media (max-width:600px){.player .play .ring{width:68px;height:68px}.player .play svg{width:22px;height:22px}.player .play .t{font-size:11px}}
.theatre{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:72px 4vw 4vh;background:rgba(5,14,22,.94);opacity:0;transition:opacity .32s ease}
.theatre.on{opacity:1}
.theatre[hidden]{display:none}
.theatre .th-in{position:relative;width:min(1280px,100%,calc((100vh - 120px) * 16 / 9));aspect-ratio:16/9;transform:translateY(14px) scale(.985);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.theatre.on .th-in{transform:none}
.theatre video{display:block;width:100%;height:100%;background:#000;object-fit:contain;border-radius:4px;box-shadow:0 50px 100px -40px rgba(0,0,0,.9)}
.theatre .th-x{position:absolute;right:0;top:-54px;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border-radius:var(--r);border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font:600 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.theatre .th-x svg{width:16px;height:16px;stroke:#fff;fill:none;stroke-width:2}
.theatre .th-x:hover,.theatre .th-x:focus-visible{border-color:var(--gold);outline:0}
html.theatre-open{overflow:hidden}
html.theatre-open .ask,html.theatre-open .askpanel,html.theatre-open .askgreet,html.theatre-open .totop{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){.theatre,.theatre .th-in,.player video,.player .play .ring,.player .play .ring::after{transition:none}.player:hover video{transform:none}}

/* 27 Oct 2026: premium pass. Pages cross-fade into each other while the header, Ask Echo and back-to-top hold still
   (browsers without view transitions just navigate). */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  #hdr{view-transition-name:hdr}
  .ask{view-transition-name:askecho}
  .totop{view-transition-name:totop}
  ::view-transition-group(hdr),::view-transition-old(hdr),::view-transition-new(hdr){animation:none}
  ::view-transition-old(root){animation:vt-out .16s ease both}
  ::view-transition-new(root){animation:vt-in .34s cubic-bezier(.2,.7,.2,1) both}
}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
/* a soft light under the mouse on cards (page.js adds .spot to cards whose ::after is free) */
.spot{isolation:isolate}
.spot.spot-pos{position:relative}
.spot::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s ease;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(124,168,194,.2),transparent 65%)}
.spot.spot-l::after{background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(15,49,71,.075),transparent 65%)}
.spot:hover::after{opacity:1}
@media (prefers-reduced-motion:reduce){.spot::after{transition:none}}
/* the next self assessment deadline in the footer, counted down by page.js */
footer li.due{font-size:12.5px;color:#4d6270}
footer li.due span{color:var(--steel-dark);font-weight:600}
/* 27 Oct 2026: a parallax background is 28% taller than its section so it can drift; without a clip it spilled 14%
   over the next section's top (the pale strip over the Home estimate box). clip, not hidden, so sticky text still works. */
.hasbg{overflow:clip}
/* 27 Oct 2026: typesetting. Cormorant's old-style figures dropped below the line in caps headings ("MONTH 9",
   "2026/27", 01 to 06); lining figures everywhere. Headings balance their lines so no word is left alone. */
html{font-variant-numeric:lining-nums}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
/* 27 Oct 2026: no page scrolls sideways (Pricing did by 8px at tablet width from a decorative layer); clip keeps sticky */
body{overflow-x:clip}
/* 27 Oct 2026: a page hero without a photo (Privacy, the calculator and the like) sizes to its words instead of
   standing 800px tall in empty navy */
html .phero:not(:has(.media)){min-height:0}
/* 27 Oct 2026: contrast. Row arrows on light sections were white on paper; the footer countdown was 3.3:1 */
.insights .rowctl button,.sec.paper .rowctl button{border-color:var(--mist2)}
.insights .rowctl button svg,.sec.paper .rowctl button svg{stroke:var(--navy)}
.insights .rowctl button:hover,.sec.paper .rowctl button:hover{background:var(--navy);border-color:var(--navy)}
.insights .rowctl button:hover svg,.sec.paper .rowctl button:hover svg{stroke:#fff}
.rowctl button:focus-visible{outline:2px solid var(--steel-dark);outline-offset:2px}
footer li.due span{color:var(--navy)}
/* 27 Oct 2026: tablet and phone. Split photos drew at full width and 2:3 (768x1152 on Who we help and Landlords);
   they now stop at about two thirds of the screen. The fifth home step no longer sits alone in half a row, and the
   gold quote mark no longer runs into the quote. */
@media (max-width:900px){
  .split>.photo{height:min(68svh,560px);min-height:0!important}
  .split>.photo>img{height:100%!important}
  .split-in .photo>img{max-height:68svh;width:100%;object-fit:cover}
  .rail5 .st:last-child:nth-child(odd){flex-basis:100%;border-right:0}
  .quote .gold::before{position:static;display:block;font-size:120px;line-height:.55;margin-bottom:6px}
}
/* 27 Oct 2026: the Hillingdon Chamber badge outweighed the others */
footer .badges img[alt^="Hillingdon"]{height:54px}
@media (max-width:560px){footer .badges img[alt^="Hillingdon"]{height:44px}}
/* 27 Oct 2026: field errors from EchoLead.invalid */
.ferr{display:inline-block;margin:8px 0 0;padding:4px 9px;border-radius:4px;background:#fff;font-size:13px;font-weight:600;color:#a83a2a;line-height:1.4}
.ferr[hidden]{display:none}
[aria-invalid="true"]{border-color:#a83a2a!important;box-shadow:0 0 0 1px #a83a2a}

/* 27 Oct 2026: functional audit fixes */
/* phone menu: a section you have folded stays folded (hover and focus no longer hold it open) */
@media (max-width:1080px){body.menu-open nav .has-menu:not(.open) .sub{display:none!important}}
/* links to a section land below the fixed header */
[id]{scroll-margin-top:104px}
/* the first-visit greeting sits where back-to-top lives; back-to-top steps aside while it shows */
body:has(.askgreet.on) .totop{opacity:0;pointer-events:none}
/* Ask Echo: the panel stops below the header on short laptop screens; visible focus on its text buttons */
@media (min-width:601px){.askpanel{height:min(620px,calc(100vh - 196px));min-height:380px}}
/* 28 Oct 2026: the open panel has its own close button, so the launcher steps away and the panel drops into the
   space the launcher used: one close, and the conversation gets the extra height. */
.ask{transition:opacity .2s ease,transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.ask.is-open{opacity:0;transform:scale(.7) translateY(12px);pointer-events:none}
@media (min-width:601px){.askpanel{bottom:22px;height:min(680px,calc(100vh - 122px))}}
body.ask-open .totop,body.ask-open .srail{opacity:0;visibility:hidden;pointer-events:none}
.askpanel .ae-person:focus-visible,.askpanel .ae-hc-no:focus-visible,.askpanel .ae-link:focus-visible{outline:2px solid var(--steel-dark);outline-offset:3px;border-radius:3px}
/* header between 1081 and 1180px: the menu keeps clear of the logo */
@media (min-width:1081px) and (max-width:1180px){nav{gap:10px;font-size:11.5px;letter-spacing:.06em}header .logo img{height:36px}nav .pill{padding:0 12px}}
/* Escape closes a header dropdown even while the mouse or focus is inside it (menu.js adds .shut) */
nav .has-menu.shut .sub{display:none!important}
/* 27 Oct 2026: card deck ([data-deck], Home testimonials). One card in front, the others stacked behind it at an angle;
   tap or swipe the front card, use the arrows, a name or the arrow keys, and the next one comes forward while the front
   card goes to the back. page.js sets --dk (0 is the front) on each card. Without script the cards stack down the page. */
.deckwrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-areas:"head deck" "nav deck";column-gap:80px;row-gap:34px;align-items:start}
.deckwrap .dhead{grid-area:head;align-self:end}
.deckwrap .dhead h2{margin:0}
.deckwrap .dhead p{margin:18px 0 0;color:var(--on-dark);font-size:15px}
.deckwrap .deck{grid-area:deck}
.deckwrap .dnav{grid-area:nav}
.deck{display:grid;gap:16px;position:relative}
html.js .deck{grid-template-columns:minmax(0,1fr);padding:34px 70px 0 0;touch-action:pan-y;outline:0}
html.js .deck:focus-visible{outline:2px solid var(--steel);outline-offset:10px;border-radius:4px}
html.js .deck>.tq{grid-area:1/1;--dk:0;--x:0px;--r:0deg;--lift:0px;z-index:calc(10 - var(--dk));cursor:pointer;user-select:none;-webkit-user-select:none;transform-origin:30% 100%;
  transform:translate3d(calc(var(--dk)*28px + var(--x)),calc(var(--dk)*-16px + var(--lift)),0) rotate(calc(var(--dk)*2.6deg + var(--r))) scale(calc(1 - var(--dk)*.035));
  box-shadow:0 44px 80px -44px rgba(0,0,0,.8);transition:transform .7s cubic-bezier(.2,.7,.2,1),opacity .45s ease,background-color .5s ease,border-color .5s ease}
html.js .deck>.tq>*{transition:opacity .45s ease .12s}
html.js .deck>.tq[data-dk="0"]{border-color:rgba(201,168,76,.38)}
html.js .deck>.tq:not([data-dk="0"]){background:#0d2b40;border-color:rgba(124,168,194,.24)}
html.js .deck>.tq:not([data-dk="0"])>*{opacity:0;pointer-events:none;transition-delay:0s}
html.js .deck.reveal:not(.in)>.tq{--dk:0!important}
html.js .deck>.tq.out{transform:translate3d(-62%,26px,0) rotate(-10deg)!important;opacity:0;z-index:20;transition:transform .45s cubic-bezier(.5,0,.75,0),opacity .4s ease}
html.js .deck>.tq.hide{opacity:0}
html.js .deck>.tq.snap,html.js .deck>.tq.snap>*{transition:none!important}
html.js .deck>.tq.drag{transition:none;cursor:grabbing}
@media (hover:hover) and (pointer:fine){html.js .deck>.tq[data-dk="0"]:hover{--lift:-5px;border-color:rgba(201,168,76,.7)}}
.tq.big blockquote{font-size:clamp(26px,2.5vw,36px);line-height:1.24}
.dnames{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid var(--line)}
.dnames button{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:16px;width:100%;padding:16px 4px 16px 20px;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;text-align:left;cursor:pointer;color:var(--muted)}
.dnames button::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:2px;background:var(--gold);transform:scaleY(0);transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.dnames b{font-size:15px;font-weight:600;color:var(--muted);transition:color .3s ease}
.dnames small{font-size:12.5px;color:var(--muted);text-align:right}
.dnames button[aria-current="true"] b,.dnames button:hover b{color:#fff}
.dnames button[aria-current="true"]::before{transform:scaleY(1)}
.dnames button:focus-visible{outline:2px solid var(--steel);outline-offset:2px}
.dnav .ctl{display:flex;align-items:center;gap:10px}
.dnav .ct{margin:0 6px}
.dhint{margin:16px 0 0;font-size:12.5px;color:var(--muted);transition:opacity .5s ease}
.deck-seen .dhint{opacity:0}
.deck-live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
html:not(.js) .dnav{display:none}
@media (max-width:900px){
  .deckwrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "deck" "nav";row-gap:24px}
  .dnames{display:none}
  html.js .deck{padding:24px 30px 0 0}
  html.js .deck>.tq{transform:translate3d(calc(var(--dk)*13px + var(--x)),calc(var(--dk)*-11px),0) rotate(calc(var(--dk)*1.8deg + var(--r))) scale(calc(1 - var(--dk)*.03))}
  .dhint{margin-top:12px}
}
@media (prefers-reduced-motion:reduce){html.js .deck>.tq,html.js .deck>.tq>*{transition:none}}
/* 27 Oct 2026, pre-launch (call with Josh and Kieran) */
/* Footer: the strapline spans exactly the width of the Echo Accountants wordmark under the logo */
footer .fbrand{width:100%;max-width:200px}
footer .fbrand .flogo{width:100%}
footer .fbrand .brandline{margin-top:10px;max-width:none;font-size:13.5px;letter-spacing:.14em;line-height:1.2;text-align:justify;text-align-last:justify}
/* Social links, round 3 (27 Oct): icons only. At rest they are navy outlines in the site's palette; on hover or
   focus each one springs up and fills with its own brand colour, and its name shows in a small tip underneath.
   They pop in one after another when they first appear. Every link opens in a new tab. */
.so{position:relative;display:inline-grid;place-items:center;width:var(--so,32px);height:var(--so,32px);border-radius:50%;color:var(--navy);border:1px solid var(--mist2);background:#fff;transition:transform .45s cubic-bezier(.34,1.56,.64,1),color .25s,border-color .25s,box-shadow .35s}
.so::before{content:"";position:absolute;inset:-1px;border-radius:50%;opacity:0;transform:scale(.4);transition:opacity .3s,transform .45s cubic-bezier(.34,1.56,.64,1)}
.so-ig::before{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285aeb 90%)}
.so-li::before{background:#0a66c2}
.so-fb::before{background:#1877f2}
.so svg{position:relative;width:46%;height:46%;fill:currentColor}
.so svg.ig{fill:none;stroke:currentColor;stroke-width:2}
.so svg.ig circle:last-child{fill:currentColor}
.so .tip{position:absolute;top:calc(100% + 8px);left:50%;transform:translate(-50%,-4px);background:var(--navy);color:#fff;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;line-height:1;padding:6px 8px;border-radius:4px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .3s cubic-bezier(.2,.7,.2,1);z-index:5}
.so:hover,.so:focus-visible{transform:translateY(-3px) scale(1.14);color:#fff;border-color:transparent;box-shadow:0 10px 22px -10px rgba(15,49,71,.55)}
.so:hover::before,.so:focus-visible::before{opacity:1;transform:none}
.so:hover .tip,.so:focus-visible .tip{opacity:1;transform:translate(-50%,0)}
.so:active{transform:translateY(-1px) scale(1.04)}
@keyframes soPop{0%{opacity:0;transform:translateY(8px) scale(.4)}70%{opacity:1;transform:translateY(-2px) scale(1.12)}100%{opacity:1;transform:none}}
html.js .hsoc .so,html.js .ct-soc.in .so,html.js footer.so-in .so{animation:soPop .6s cubic-bezier(.2,.7,.2,1) backwards}
html.js .ct-soc:not(.in) .so,html.js footer:not(.so-in) .fsoc .so{opacity:0}
.hsoc .so:nth-of-type(1),.ct-soc .so:nth-of-type(1),.fsoc .so:nth-of-type(1){animation-delay:.5s}
.hsoc .so:nth-of-type(2),.ct-soc .so:nth-of-type(2),.fsoc .so:nth-of-type(2){animation-delay:.62s}
.hsoc .so:nth-of-type(3),.ct-soc .so:nth-of-type(3),.fsoc .so:nth-of-type(3){animation-delay:.74s}
.ct-soc .so:nth-of-type(1),.fsoc .so:nth-of-type(1){animation-delay:.05s}
.ct-soc .so:nth-of-type(2),.fsoc .so:nth-of-type(2){animation-delay:.17s}
.ct-soc .so:nth-of-type(3),.fsoc .so:nth-of-type(3){animation-delay:.29s}
@media (prefers-reduced-motion:reduce){.so,.so::before,.so .tip{transition:none}html.js .hsoc .so,html.js .ct-soc .so,html.js footer .fsoc .so{animation:none;opacity:1}.so:hover,.so:focus-visible{transform:none}}
/* Header (28 Oct): the social and AI icons live in the rail below; the header keeps only the phone menu rows */
@media (min-width:1081px){nav .hsoc{display:none}}
@media (max-width:1080px){
  nav .hsoc{display:none}
  body.menu-open nav .hsoc{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:26px;padding-top:20px;border-top:1px solid var(--mist2);--so:44px}
  body.menu-open nav .hs-grp{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
  body.menu-open nav .hs-ic{display:flex;gap:12px;flex-wrap:wrap}
  body.menu-open nav .hsoc .hk{font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--steel-dark)}
  body.menu-open nav .hsoc .tip,body.menu-open nav .hs-sep{display:none}
}
footer li.fsoc{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:8px}
footer li.fsoc .fk{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--steel-dark)}
footer li.fsoc .sorow{display:flex;gap:10px;--so:38px}
/* Contact: follow band */
.ct-follow{background:var(--paper);color:var(--ink);padding:44px 0 52px;border-top:1px solid var(--mist2)}
.ct-follow .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.ct-follow .label{color:var(--steel-dark)}
.ct-follow p{margin:6px 0 0;color:#3f5260;font-size:15.5px;max-width:52ch}
.ct-soc{display:flex;gap:16px;--so:54px}
.ct-soc .so{box-shadow:0 12px 26px -20px rgba(15,49,71,.5)}
/* Ask your AI about Echo (27 Oct): same .so icons, each fills with its assistant's colour on hover */
.so-gpt::before{background:#0d0d0d}
.so-pplx::before{background:#1fb8cd}
.so-claude::before{background:#d97757}
.so-goog::before{background:#4285f4}
footer li.fai{margin-top:14px}
.aiband{background:var(--paper);color:var(--ink);padding:48px 0 56px;border-top:1px solid var(--mist2)}
.aiband .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.aiband .label{color:var(--steel-dark)}
.aiband p{margin:6px 0 0;color:#3f5260;font-size:15.5px;max-width:56ch}
.airow{display:flex;gap:16px;--so:54px}
.airow .so{box-shadow:0 12px 26px -20px rgba(15,49,71,.5)}
html.js .airow.in .so{animation:soPop .6s cubic-bezier(.2,.7,.2,1) backwards}
html.js .airow:not(.in) .so{opacity:0}
.airow .so:nth-of-type(1){animation-delay:.05s}.airow .so:nth-of-type(2){animation-delay:.17s}.airow .so:nth-of-type(3){animation-delay:.29s}.airow .so:nth-of-type(4){animation-delay:.41s}
.fsoc .so:nth-of-type(4){animation-delay:.41s}
@media (prefers-reduced-motion:reduce){html.js .airow .so{animation:none;opacity:1}}
/* Deadline countdown cards ([data-countdown], page.js) */
.duecard{background:#fff;border:1px solid var(--mist2);border-left:3px solid var(--steel-dark);border-radius:var(--r);padding:18px 20px;color:var(--ink);max-width:340px}
.duecard .dc-k{font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--steel-dark)}
.duecard .dc-n{display:none;align-items:baseline;gap:8px;margin-top:10px}
.duecard.dc-on .dc-n{display:flex}
.duecard .dc-days{font-family:var(--display);font-size:56px;line-height:.9;color:var(--navy)}
.duecard .dc-unit{font-size:14px;color:#3f5260}
.duecard .dc-when{margin-top:8px;font-weight:600;color:var(--navy);font-size:15.5px}
.duecard .dc-what{margin-top:2px;font-size:13.5px;color:#4d6270;line-height:1.5}
.group .side .duecard{margin-top:22px}
.duerow{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,340px));gap:16px;margin-top:36px}
/* Social and AI rail (28 Oct, from a survey of 70 Awwwards Sites of the Day: the sites that keep socials on screen
   use a fixed side rail or a fixed corner). Laptops: a column of white icons fixed to the left edge, always in view,
   stepping aside when the footer (which has its own) comes up. Phones and tablets: one navy bubble bottom left;
   tap it and the icons rise out of it. Built by page.js from the footer links. */
.srail{position:fixed;z-index:45;left:16px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.2,1),visibility .45s}
.srail .sr-list{display:flex;flex-direction:column;align-items:center;gap:10px;--so:40px}
.srail .sr-gap{height:10px}
.srail .so{background:#fff;border-color:rgba(15,49,71,.12);box-shadow:0 10px 24px -12px rgba(10,34,51,.55),0 1px 2px rgba(10,34,51,.12)}
.srail .so svg{width:44%;height:44%}
.srail .so .tip{top:50%;left:calc(100% + 12px);transform:translate(-6px,-50%)}
.srail .so:hover .tip,.srail .so:focus-visible .tip{transform:translate(0,-50%)}
.srail .so:hover,.srail .so:focus-visible{transform:translateX(3px) scale(1.12)}
html.js .srail .so{animation:soPop .6s cubic-bezier(.2,.7,.2,1) backwards;animation-delay:calc(.9s + var(--i) * .07s)}
.srail.sr-away{opacity:0;visibility:hidden;transform:translate(-24px,-50%)}
body.menu-open .srail{display:none}
.sr-toggle{display:none}
@media (max-width:1080px){
  .srail{top:auto;bottom:22px;left:18px;transform:none}
  .srail.sr-away{transform:translateY(16px)}
  .sr-toggle{display:grid;place-items:center;position:relative;width:54px;height:54px;border-radius:50%;border:1px solid rgba(15,49,71,.12);background:#fff;color:var(--navy);cursor:pointer;box-shadow:0 14px 30px -14px rgba(10,34,51,.7),0 1px 2px rgba(10,34,51,.15);transition:transform .45s cubic-bezier(.34,1.56,.64,1),background .25s}
  .sr-toggle svg{position:absolute;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;transition:opacity .25s,transform .45s cubic-bezier(.34,1.56,.64,1)}
  .sr-toggle .x{opacity:0;transform:rotate(-90deg)}
  .srail.open .sr-toggle{background:var(--navy);color:#fff;border-color:var(--navy)}
  /* a soft dimmed backdrop behind the open icons, so the page text does not show through; tapping it closes */
  .srail::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(5,16,26,.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .3s}
  .srail.open::before{opacity:1;pointer-events:auto}
  .srail.open .sr-toggle .sh{opacity:0;transform:rotate(90deg)}
  .srail.open .sr-toggle .x{opacity:1;transform:none}
  .sr-toggle:focus-visible{outline:0;box-shadow:0 0 0 3px var(--gold)}
  .srail .sr-list{position:absolute;left:4px;bottom:66px;gap:10px;--so:46px}
  .srail .sr-gap{height:4px}
  html.js .srail .so{animation:none}
  .srail .so{opacity:0;transform:translateY(18px) scale(.5);pointer-events:none;transition:opacity .25s,transform .45s cubic-bezier(.34,1.56,.64,1);transition-delay:calc((6 - var(--i)) * .025s)}
  .srail.open .so{opacity:1;transform:none;pointer-events:auto;transition-delay:calc((6 - var(--i)) * .04s)}
  .srail .so .tip{display:block;opacity:1;left:calc(100% + 10px);transform:translate(0,-50%)}
  .srail:not(.open) .so .tip{opacity:0}
}
@media (prefers-reduced-motion:reduce){.srail,.srail .so,.sr-toggle,.sr-toggle svg{transition:none!important;animation:none!important}}
/* Phone pass (28 Oct 2026), from tools/mobile-audit.mjs at 360 and 390 wide. */
/* header: shorter bar, smaller logo, compact Estimate at a full tap height, and a clean menu button (it carried the
   browser's default button border); at 360 wide the three no longer touch or run past the edge */
.burger{border:0;background:transparent;padding:0;color:var(--navy);border-radius:var(--r)}
.burger:focus-visible{outline:2px solid var(--steel-dark);outline-offset:2px}
@media (max-width:600px){
  header .wrap{height:64px}
  header .logo img{height:32px}
  .pill.mini{height:40px;padding:0 14px;font-size:11px;letter-spacing:.1em;margin-right:8px}
  header .logo{padding:6px 0}
  body.menu-open nav{top:64px}
}
@media (max-width:374px){.pill.mini{padding:0 12px}}
/* a single column that cannot be pushed wider than the screen by long words inside it */
@media (max-width:900px){.podcast{grid-template-columns:minmax(0,1fr)}}
/* sections: laptop padding of 110-140px top and bottom left 200px+ empty bands between blocks on phones. Trimmed to
   72px from the measured list (tools/mobile-audit.mjs); sections that start at 0 on some pages keep their top, and the
   page heroes keep theirs because it clears the header */
@media (max-width:600px){
  main section.about,
  main section.book,
  main section.changes,
  main section.check,
  main section.close2,
  main section.closeline,
  main section.contact,
  main section.count,
  main section.diff,
  main section.divisions,
  main section.ei-band,
  main section.ei-close,
  main section.epbody,
  main section.expect,
  main section.faces,
  main section.format,
  main section.guest,
  main section.handle,
  main section.helps,
  main section.insights,
  main section.ladder,
  main section.listen,
  main section.locs,
  main section.m9,
  main section.more,
  main section.policy,
  main section.practical,
  main section.problem,
  main section.scale,
  main section.services,
  main section.shape,
  main section.six,
  main section.switch,
  main section.team,
  main section.trap,
  main section.unsure,
  main section.who,
  main section.who4,
  main section.why,
  main section.xlink,
  main section.eps{padding-top:72px}
  main section.about,
  main section.book,
  main section.changes,
  main section.check,
  main section.close2,
  main section.closeline,
  main section.contact,
  main section.count,
  main section.diff,
  main section.divisions,
  main section.ei-band,
  main section.ei-close,
  main section.epbody,
  main section.estimate,
  main section.expect,
  main section.faces,
  main section.faq,
  main section.film,
  main section.form,
  main section.format,
  main section.guest,
  main section.handle,
  main section.helps,
  main section.how,
  main section.insights,
  main section.ladder,
  main section.listen,
  main section.locs,
  main section.m9,
  main section.magnet,
  main section.more,
  main section.policy,
  main section.practical,
  main section.problem,
  main section.proof,
  main section.scale,
  main section.services,
  main section.shape,
  main section.six,
  main section.steps,
  main section.svcs,
  main section.switch,
  main section.team,
  main section.trap,
  main section.unsure,
  main section.who,
  main section.who4,
  main section.why,
  main section.xlink,
  main section.eps{padding-bottom:72px}
  .split>.gold>.stick,.split>.text>.stick{padding-top:56px;padding-bottom:56px}
  .split-in .stick{padding-top:56px}
  .podcast .text{padding:56px 20px 64px}
  .estimate .box{padding:28px 20px}
  footer .cols>div:first-child{grid-column:1/-1}
  footer ul a{padding:10px 0}
  footer ul{gap:0}
}
/* heroes: on phones the text follows the header instead of sitting at the foot of a 78%-tall photo (the Contact
   and Services portrait heroes keep their height, the cards and the photo depend on it) */
@media (max-width:600px){
  .phero:not(.portrait){min-height:0!important}
  footer ul{gap:4px}
  footer ul li:not(:has(a)):not(.fsoc){padding:2px 0}
  /* buttons: long labels wrap inside the button instead of running off the screen */
  main .pill,main .cta .pill{white-space:normal;height:auto;min-height:46px;padding:12px 20px;line-height:1.3;text-align:center;max-width:100%}
  /* Contact: place names fit two to a row */
  .locs .lgrid .loc b{font-size:clamp(20px,6.4vw,28px);letter-spacing:.04em}
}
/* floating buttons on phones and tablets: the share bubble moves above Ask Echo on the right, where text is ragged
   and rarely reaches; the back-to-top arrow goes (phones have their own); the bubble's list opens upwards from there */
@media (max-width:1080px){
  .totop{display:none!important}
  .srail{left:auto;right:22px;bottom:90px}
  .srail .sr-list{left:auto;right:4px}
  .srail .so .tip{left:auto;right:calc(100% + 10px)}
  .sr-toggle{width:52px;height:52px}
}
@media (max-width:600px){.srail{right:14px;bottom:76px}}
/* tap targets under 40px found by the audit */
@media (max-width:600px){
  footer .base a{display:inline-block;padding:11px 2px}
  footer li.fsoc .sorow{--so:42px}
  .urgent .call a.tel{padding:6px 0}
  .tq figcaption a.src,[data-deck] a.src{display:inline-block;padding:10px 0}
}
@media (max-width:1080px){
  body.scrolling-down .srail:not(.open),body.scrolling-down .ask:not(.is-open){opacity:0;transform:translateY(14px);pointer-events:none}
  .ask{transition:opacity .25s ease,transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
}
/* 28 Oct 2026: the closing band's sign-off inherited a 420px width and sat at the left of the band, so it read off-centre. Centre the line itself. */
.close2 .wrap .signoff{max-width:none;margin-left:auto;margin-right:auto}
/* 28 Oct 2026: the new tree, sprout and city images are darker than the stock ones they replaced, so the
   strengths set for those left them dim. Brighter, and framed on their subjects (tree base, seedling, city figure). */
.bg.trees:has(img[src*="img/tree.jpg"]){opacity:.85;-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.75) 20%,rgba(0,0,0,.85) 55%,#000 78%,#000 95%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.75) 20%,rgba(0,0,0,.85) 55%,#000 78%,#000 95%,transparent 100%)}
.bg img[src*="img/tree.jpg"]{object-position:50% 100%}
.bg.faint:has(img[src*="img/sprout.jpg"]){opacity:.36}
.bg.trees:has(img[src*="img/sprout.jpg"]){opacity:.8}
.bg img[src*="img/sprout.jpg"]{object-position:50% 72%}
.bg.trees:has(img[src*="img/city.jpg"]){opacity:.72}
.bg img[src*="img/city.jpg"]{object-position:30% 0%}
.phero .media img[src*="img/city.jpg"]{filter:none;object-position:32% 0%}
/* city-skyline.jpg: London without a person, for the city backgrounds (the Joshua city stays the Who we help hero only) */
.bg.trees:has(img[src*="img/city-skyline.jpg"]){opacity:.72}
.bg img[src*="img/city-skyline.jpg"]{object-position:50% 60%}