/* Front page sections: company categories (bento), best-rated companies, article topics with photos.
   Nested "shell + core" cards, soft diffused shadows, spring-like easing, reveal on scroll. */
:root{
  --hx-ink:#14212e;
  --hx-muted:#5f6c78;
  --hx-line:rgba(20,33,46,.07);
  --hx-red:#d6262d;
  --hx-red-soft:#fdeeee;
  --hx-ease:cubic-bezier(.32,.72,0,1);
  --hx-shadow:0 1px 1px rgba(20,33,46,.03),0 12px 32px -12px rgba(20,33,46,.12);
  --hx-shadow-hover:0 2px 4px rgba(20,33,46,.04),0 28px 56px -20px rgba(20,33,46,.22);
}
.hx-section{padding:88px 0 0}
.hx-section+.articles-section{padding-top:88px}
.hx-directory{padding-top:64px}

/* Section heading */
.hx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px}
.hx-head>div{max-width:640px}
.hx-head h2{margin:0;color:var(--hx-ink);font-size:clamp(28px,3.2vw,40px);font-weight:800;line-height:1.08;letter-spacing:-.035em}
.hx-head p{margin:12px 0 0;color:var(--hx-muted);font-size:16px;line-height:1.6}
.hx-link{display:inline-flex;flex:0 0 auto;align-items:center;gap:10px;padding:6px 6px 6px 18px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--hx-line),var(--hx-shadow);color:var(--hx-ink);font-size:14px;font-weight:750;transition:transform .5s var(--hx-ease),box-shadow .5s var(--hx-ease)}
.hx-link-icon{display:grid;width:32px;height:32px;place-items:center;border-radius:50%;background:var(--hx-ink);color:#fff;font-size:15px;transition:transform .5s var(--hx-ease)}
.hx-link:hover{box-shadow:inset 0 0 0 1px var(--hx-line),var(--hx-shadow-hover)}
.hx-link:hover .hx-link-icon{transform:translateX(2px) scale(1.06)}
.hx-link:active{transform:scale(.98)}

/* Shell + core cards */
.hx-shell{min-width:0;padding:6px;border-radius:26px;background:rgba(20,33,46,.035);box-shadow:inset 0 0 0 1px var(--hx-line);transition:transform .7s var(--hx-ease)}
.hx-core{position:relative;display:block;height:100%;border-radius:20px;background:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--hx-shadow);color:inherit;transition:box-shadow .7s var(--hx-ease)}
.hx-shell:hover{transform:translateY(-3px)}
.hx-shell:hover .hx-core{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--hx-shadow-hover)}
.hx-round{display:grid;width:38px;height:38px;flex:0 0 38px;place-items:center;border-radius:50%;background:#f2f4f6;color:var(--hx-ink);font-size:16px;transition:transform .6s var(--hx-ease),background-color .4s var(--hx-ease),color .4s var(--hx-ease)}
.hx-shell:hover .hx-round{background:var(--hx-red);color:#fff;transform:translate(2px,-1px) scale(1.06)}

/* Company categories: all five side by side, each with its biggest services */
.hx-dir-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.hx-dir-card .hx-core{display:flex;flex-direction:column;gap:18px;padding:22px 20px 20px}
.hx-dir-top{position:relative;display:grid;grid-template-columns:1fr auto;align-items:start;gap:14px 10px;color:var(--hx-ink)}
.hx-dir-icon{display:grid;width:50px;height:50px;place-items:center;border-radius:15px;background:var(--hx-red-soft);color:var(--hx-red);transition:background-color .4s var(--hx-ease),color .4s var(--hx-ease)}
.hx-dir-icon .tb-fi{font-size:22px}
.hx-dir-name{grid-column:1/-1;min-width:0}
.hx-dir-top .hx-round{grid-row:1;grid-column:2}
.hx-dir-name h3{margin:0;font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.hx-dir-name small{display:block;margin-top:4px;color:var(--hx-muted);font-size:13px;font-weight:650}
.hx-dir-top:hover .hx-dir-icon{background:var(--hx-red);color:#fff}
.hx-chips{display:flex;flex:1;flex-direction:column;gap:2px;margin:0;padding:14px 0 0;border-top:1px solid var(--hx-line);list-style:none}
.hx-chips a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 10px;margin:0 -10px;border-radius:10px;color:#2b3a48;font-size:13.5px;font-weight:600;line-height:1.35;transition:background-color .4s var(--hx-ease),color .4s var(--hx-ease)}
.hx-chips a>span{min-width:0}
.hx-chips small{flex:0 0 auto;color:#8a96a1;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.hx-chips a:hover{background:var(--hx-red-soft);color:var(--hx-red)}
.hx-chips a:hover small{color:var(--hx-red)}
.hx-dir-all{display:inline-flex;align-items:center;gap:6px;color:var(--hx-red);font-size:13px;font-weight:800}
.hx-dir-all span{transition:transform .5s var(--hx-ease)}
.hx-dir-all:hover span{transform:translateX(3px)}

/* Best-rated companies */
.hx-company-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.hx-company .hx-core{display:flex;align-items:center;gap:16px;padding:18px 18px 18px 18px}
.hx-company-mark{display:grid;width:72px;height:72px;flex:0 0 72px;place-items:center;overflow:hidden;border-radius:18px;background:var(--hx-tone,#f4f5f7);box-shadow:inset 0 0 0 1px rgba(20,33,46,.05)}
.hx-company-mark img{width:100%;height:100%;object-fit:contain;padding:8px;background:#fff}
.hx-company-mark b{color:var(--hx-ink);font-size:24px;font-weight:800;letter-spacing:-.04em;opacity:.82}
.hx-company-body{display:flex;flex:1;min-width:0;flex-direction:column;gap:6px}
.hx-company h3{overflow:hidden;margin:0;color:var(--hx-ink);font-size:16px;font-weight:800;letter-spacing:-.015em;text-overflow:ellipsis;white-space:nowrap}
.hx-rating{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.hx-rating b{color:var(--hx-ink);font-size:14px;font-weight:800}
.hx-rating small{color:var(--hx-muted);font-size:12px;font-weight:600}
.hx-stars{display:inline-flex;gap:2px}
.hx-stars i{width:14px;height:14px;background:#e3e6ea;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.9l-5.2 2.7 1-5.8L1.6 7.7l5.8-.8z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 1.6l2.6 5.3 5.8.8-4.2 4.1 1 5.8L10 14.9l-5.2 2.7 1-5.8L1.6 7.7l5.8-.8z'/%3E%3C/svg%3E") center/contain no-repeat}
.hx-stars i.is-full{background:#f5a524}
.hx-stars i.is-half{background:linear-gradient(90deg,#f5a524 50%,#e3e6ea 50%)}
.hx-company-meta{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--hx-muted);font-size:12px;font-weight:600}
.hx-company-meta>span{display:inline-flex;align-items:center;gap:4px}
.hx-company-meta .tb-fi{color:var(--hx-red);font-size:12px}
.hx-company .hx-round{align-self:center}

/* Topics with photos: bento */
.hx-topic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:270px;gap:18px}
.hx-topic.is-lead{grid-column:span 2}
.hx-topic .hx-core{overflow:hidden;isolation:isolate;background:#1d2733}
.hx-topic img,.hx-topic-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--hx-ease)}
.hx-topic-fallback{display:grid;place-items:center;background:linear-gradient(135deg,#2a3644,#151d26);color:#fff;font-size:40px}
.hx-topic:hover img{transform:scale(1.05)}
.hx-topic-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,24,0) 25%,rgba(10,16,24,.35) 55%,rgba(10,16,24,.86) 100%)}
.hx-topic-copy{position:absolute;right:68px;bottom:0;left:0;z-index:1;padding:22px 24px}
.hx-topic-count{display:inline-block;margin-bottom:8px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:#fff;font-size:11px;font-weight:750;letter-spacing:.04em}
.hx-topic h3{margin:0;font-size:22px;font-weight:800;letter-spacing:-.025em;line-height:1.15}
.hx-topic h3 a{color:#fff}
.hx-topic h3 a::after{content:"";position:absolute;inset:0;z-index:0}
.hx-topic ul{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.hx-topic ul a{display:inline-block;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.92);color:var(--hx-ink);font-size:12px;font-weight:700;transition:background-color .4s var(--hx-ease)}
.hx-topic ul a:hover{background:#fff;color:var(--hx-red)}
.hx-topic p{margin:8px 0 0;color:rgba(255,255,255,.85);font-size:13px}
.hx-topic .hx-round{position:absolute;right:20px;bottom:22px;z-index:1;background:rgba(255,255,255,.95)}
.hx-topic.is-lead h3{font-size:30px}
.hx-topic:not(.is-lead) h3{font-size:19px}
.hx-topic:not(.is-lead) .hx-topic-copy{padding:18px 20px;right:60px}
.hx-topic:not(.is-lead) .hx-round{right:16px;bottom:18px}
.hx-topic.is-lead .hx-topic-copy{padding:30px 32px}
.hx-topic:not(.is-lead) ul li:nth-child(n+3){display:none}

@media (prefers-reduced-motion:reduce){
  .hx-shell,.hx-topic img,.hx-round,.hx-link,.hx-link-icon{transition:none}
}

@media (max-width:1240px){.hx-dir-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:1000px){
  .hx-dir-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hx-company-grid{grid-template-columns:1fr 1fr}
  .hx-topic-grid{grid-template-columns:1fr 1fr;grid-auto-rows:240px}
  .hx-topic.is-lead{grid-column:1/-1}
}
@media (max-width:767px){
  .hx-section{padding-top:64px}
  .hx-directory{padding-top:44px}
  .hx-section+.articles-section{padding-top:64px}
  .hx-head{flex-direction:column;align-items:flex-start;margin-bottom:26px}
  .hx-head p{font-size:15px}
  .hx-dir-grid,.hx-company-grid,.hx-topic-grid{grid-template-columns:1fr;gap:14px}
  .hx-shell{border-radius:22px;padding:5px}
  .hx-core{border-radius:17px}
  .hx-dir-card .hx-core{padding:20px}
  .hx-topic-grid{grid-auto-rows:230px}
  .hx-topic.is-lead{grid-column:auto}
  .hx-topic.is-lead h3{font-size:24px}
  .hx-topic.is-lead .hx-topic-copy,.hx-topic-copy{padding:18px 20px}
  .hx-company-mark{width:60px;height:60px;flex-basis:60px;border-radius:15px}
  .hx-company-mark b{font-size:20px}
}
@media (min-width:768px){.hx-topic:not(.is-lead) p{display:none}}

/* Hero photo: keep the house (right of centre) in view at every width */
body.tb-home .hero-media{object-position:68% 46%}
@media (max-width:767px){body.tb-home .hero-media{object-position:74% 50%}}