/* HAO — WordPress-specific additions to styles.css (kept separate so the
   design stylesheet stays identical to the approved static site). */

/* Effects switched off in Settings: native cursor everywhere. */
.hao-no-fx .list-item__link{ cursor:pointer; }

/* Logged-in admin bar: keep the fixed top bar below it. */
body.admin-bar .topbar{ top:32px; }
body.admin-bar .overlay-menu{ top:32px; }
@media (max-width:782px){
  body.admin-bar .topbar,
  body.admin-bar .overlay-menu{ top:46px; }
}
@media (max-width:600px){
  #wpadminbar{ position:fixed; }
}

/* Template-part wrappers are layout-neutral. */
.wp-site-blocks > .wp-block-template-part,
.wp-block-template-part{ margin:0; padding:0; }
main.wp-block-group{ margin:0; padding:0; }
.wp-block-post-content{ margin:0; }

/* Accessibility helpers used by WordPress (skip link, screen-reader text). */
.screen-reader-text{
  border:0; clip:rect(1px,1px,1px,1px); clip-path:inset(50%);
  height:1px; width:1px; margin:-1px; overflow:hidden; padding:0;
  position:absolute !important; word-wrap:normal !important;
}
.screen-reader-text:focus,
.skip-link:focus{
  clip:auto !important; clip-path:none; height:auto; width:auto;
  left:12px; top:12px; z-index:100000; padding:12px 18px;
  background:var(--fg); color:var(--bg); font:600 14px/1 var(--body);
}

/* Form feedback states. */
.form-status.is-success{ color:var(--fg); }
.form-status.is-error{ color:#c44b2f; }
.contact-form select.is-error{ border-bottom-color:#c44b2f; }
.contact-form input[type="checkbox"].is-error{ outline:1px solid #c44b2f; outline-offset:2px; }
.contact-form [type="submit"][aria-busy="true"]{ opacity:.6; cursor:progress; }

/* Long-form text written in the editor (legal pages, news posts). */
.legal-doc .wp-block-image,
.legal-doc figure{ margin:clamp(24px,3vw,40px) 0; }
.legal-doc img{ max-width:100%; height:auto; }
.legal-doc .alignleft{ float:left; margin:0 24px 16px 0; }
.legal-doc .alignright{ float:right; margin:0 0 16px 24px; }
.legal-doc .aligncenter{ margin-left:auto; margin-right:auto; }
.legal-doc .wp-block-quote{ border-left:2px solid var(--line); margin:28px 0; padding:4px 0 4px 22px; }
.legal-doc .wp-block-separator{ border:0; border-top:1px solid var(--line); margin:40px 0; }
.legal-doc .wp-block-button__link{ display:inline-flex; }

/* Pagination on search / archive lists. */
.hao-pagination{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:clamp(32px,4vw,56px);
  font-family:var(--display); font-size:14px;
}
.hao-pagination .page-numbers{
  min-width:40px; height:40px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius:999px; padding:0 14px; color:var(--fg-dim);
}
.hao-pagination .page-numbers.current,
.hao-pagination a.page-numbers:hover{ color:var(--fg); border-color:var(--fg); }

/* Empty-state hint (only ever visible to editors). */
.hao-ssr-empty{
  margin:0; padding:28px var(--pad); font:500 13px/1.5 var(--body);
  color:var(--fg-dim); border:1px dashed var(--line); text-align:center;
}

@media (prefers-reduced-motion:reduce){
  .marquee-track, .trust-band__track, .marquee-fade{ animation-duration:120s !important; }
}

/* FAQ section — same rhythm as the services list: hairline rules, display type. */
.hao-faq__list{ margin-top:clamp(36px,5vw,64px); border-top:1px solid var(--line); }
.hao-faq__item{ border-bottom:1px solid var(--line); }
.hao-faq__q{
  list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:clamp(20px,2.4vw,30px) 0; font-family:var(--display); font-weight:600;
  font-size:clamp(18px,2vw,26px); letter-spacing:-.01em; line-height:1.25; color:var(--fg);
}
.hao-faq__q::-webkit-details-marker{ display:none; }
.hao-faq__q:focus-visible{ outline:2px solid var(--fg); outline-offset:4px; }
.hao-faq__icon{ position:relative; flex:none; width:18px; height:18px; }
.hao-faq__icon::before,
.hao-faq__icon::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; background:currentColor; transition:transform .35s var(--ease); }
.hao-faq__icon::after{ transform:rotate(90deg); }
.hao-faq__item[open] .hao-faq__icon::after{ transform:rotate(0deg); }
.hao-faq__a{ padding:0 0 clamp(22px,2.6vw,32px); max-width:68ch; color:var(--fg-dim); font-size:clamp(15px,1.15vw,17px); line-height:1.65; }
.hao-faq__a p{ margin:0 0 .8em; }
.hao-faq__a p:last-child{ margin-bottom:0; }
.hao-faq__a a{ color:var(--fg); text-decoration:underline; text-underline-offset:3px; }

/* ---- Motion that never gets in the way ----
   Shorter reveals than the static draft, and content is never left hidden:
   without JavaScript (or before it runs) everything is simply visible. */
.reveal{ transition-duration:.55s, .65s; }
.work-grid > .list-item.reveal{ transition-duration:.65s, .75s; }
.display__word-inner{ transition-duration:.8s; }
html:not(.hao-js) .reveal,
html:not(.hao-js) .display__word-inner{ opacity:1 !important; transform:none !important; }
@media (prefers-reduced-motion: reduce){
  .display__word-inner, .hero-title__char{ transform:none !important; opacity:1 !important; transition:none !important; }
}

/* Brand intro: keep the hero title hidden from the very first frame (no
   flash of text before the stomp). Safety net: it shows after 3 s regardless. */
html.hao-js:not(.is-loaded) .hero-title__inner{ opacity:0; animation:hao-title-failsafe .01s linear 3s forwards; }
@keyframes hao-title-failsafe{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ html.hao-js:not(.is-loaded) .hero-title__inner{ opacity:1; animation:none; } }

/* Hero next-slide thumbnail: quieter on phones/tablets so the title leads. */
@media (max-width:767px){
  .hero-carousel-control{
    width:5.5rem; height:3.4rem;          /* ≈ 88×54 px, was ≈ 152×94 */
    left:1.25rem; margin-left:0;           /* corner, not centre stage */
    bottom:1.25rem;
    border-width:.125rem;
    opacity:.88;
  }
  .hero-carousel-control:active{ opacity:1; }
}
@media (min-width:768px) and (max-width:1023px){
  .hero-carousel-control{ width:7.25rem; height:4.45rem; margin-left:-3.625rem; }
}

/* Lightbox: own the gestures (no page scroll / pull-to-refresh underneath). */
.lightbox{ touch-action:none; overscroll-behavior:contain; }
.lightbox__hint{
  position:absolute; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); transform:translate(-50%, 8px);
  padding:8px 14px; border-radius:999px; background:rgba(244,241,236,.12); border:1px solid rgba(244,241,236,.22);
  color:#f4f1ec; font:500 12px/1 var(--body); letter-spacing:.04em; white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.lightbox__hint.is-on{ opacity:1; transform:translate(-50%, 0); animation:hao-hint-out .5s var(--ease) 3.2s forwards; }
@keyframes hao-hint-out{ to{ opacity:0; transform:translate(-50%, 8px); } }

/* ---------- Branded loading screen ---------- */
.hao-loader{
  position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center;
  background:#0a0a0a; color:#f4f1ec;
  transition:transform .85s cubic-bezier(.76,0,.24,1), visibility 0s linear .85s;
  animation:hao-loader-failsafe .01s linear 4.5s forwards;      /* never blocks the site */
}
html.hao-loader-skip .hao-loader, html:not(.hao-js) .hao-loader{ display:none; }
.hao-loader.is-done{ transform:translateY(-100%); visibility:hidden; }
.hao-loader.is-done .hao-loader__inner{ opacity:0; transform:translateY(-24px); }
@keyframes hao-loader-failsafe{ to{ visibility:hidden; opacity:0; pointer-events:none; } }
.hao-loader__inner{ text-align:center; padding:0 24px; transition:opacity .4s ease, transform .6s cubic-bezier(.76,0,.24,1); }
.hao-loader__mark{
  display:inline-flex; align-items:baseline; overflow:hidden; padding-bottom:.08em;
  font-family:var(--display); font-weight:400; font-size:clamp(44px, 9vw, 104px); line-height:1; letter-spacing:-.035em; color:#fff;
}
.hao-loader__c{ display:inline-block; transform:translateY(105%); animation:hao-loader-rise .75s cubic-bezier(.14,1,.34,1) forwards; animation-delay:calc(.1s + var(--d)); }
.hao-loader__c--b{ font-weight:800; }
@keyframes hao-loader-rise{ to{ transform:translateY(0); } }
.hao-loader__tag{
  margin:22px 0 0; font:500 12px/1.4 var(--body); letter-spacing:.32em; text-transform:uppercase; color:#9a958d;
  opacity:0; animation:hao-loader-fade .6s ease .5s forwards;
}
@keyframes hao-loader-fade{ to{ opacity:1; } }
.hao-loader__bar{ display:block; width:120px; height:1px; margin:28px auto 0; background:rgba(244,241,236,.14); overflow:hidden; }
.hao-loader__bar i{ display:block; height:100%; width:100%; background:#f4f1ec; transform:scaleX(0); transform-origin:left; animation:hao-loader-bar 1.3s cubic-bezier(.65,0,.35,1) .1s forwards; }
@keyframes hao-loader-bar{ to{ transform:scaleX(1); } }
@media (max-width:600px){ .hao-loader__tag{ font-size:10px; letter-spacing:.16em; white-space:nowrap; } }
@media (max-width:340px){ .hao-loader__tag{ white-space:normal; text-wrap:balance; } }
@media (prefers-reduced-motion:reduce){
  .hao-loader__c{ transform:none; animation:none; } .hao-loader__tag{ opacity:1; animation:none; } .hao-loader__bar{ display:none; }
}

/* ---------- Floating contact on phones: tucks away while reading ---------- */
@media (max-width:640px){
  html body.cf-tucked .contact-float,
  html body.lightbox-open .contact-float,
  html body.modal-open .contact-float{ opacity:0; transform:translate(-50%, 28px); pointer-events:none; }
}