html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, svg, video { max-width: 100%; }
/* Three.js background layers (one per section) */
.three-host { position: relative; isolation: isolate; overflow: hidden; }
.three-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block; pointer-events: none; }
/* Responsive refinements */
#site-header { padding-top: env(safe-area-inset-top, 0px); }
#back-to-top { right: max(1.5rem, env(safe-area-inset-right, 0px)); bottom: max(1.5rem, env(safe-area-inset-bottom, 0px)); }
footer { padding-bottom: env(safe-area-inset-bottom, 0px); }
@media (max-width: 380px) { .ac-title { letter-spacing: .08em; margin-right: -.08em; } .container-site { padding-inline: 1rem; } }
@media (min-width: 1536px) { .ac-svc { font-size: 18px; } }
section[id] { scroll-margin-top: 4.5rem; }
/* Animations & small extras for the static site */
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.animate-fade-up { opacity: 0; animation: fade-up .7s cubic-bezier(.2,.7,.2,1) forwards; }

[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
[data-reveal].is-visible { opacity: 1; transform: none; }

.card-hover { transition: transform .3s ease, box-shadow .3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 28px -12px rgb(0 0 0 / .18); }

img { transition: transform .8s ease; }
.overflow-hidden:hover > img { transform: scale(1.03); }

#site-header.is-scrolled { box-shadow: 0 6px 20px -12px rgb(0 0 0 / .25); }
#mobile-menu.is-open { grid-template-rows: 1fr; border-color: var(--color-border); }
#back-to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .animate-fade-up, [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ===== Animated Home background ===== */
.ac-scene{--ac-bg1:#20244a;--ac-bg2:#161a38;--ac-white:#fff;--ac-blue:#5a7fe6;--ac-gray:#a5a9b6;--ac-text:#c5c9e0;position:relative;isolation:isolate;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,var(--ac-bg1) 0%,var(--ac-bg2) 100%);color:var(--ac-text)}
.ac-scene canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.ac-brand{display:flex;flex-direction:column;align-items:center;text-align:center}
.ac-logo{display:block;width:var(--ac-logo-w,clamp(170px,34vmin,340px));height:auto;overflow:visible;animation:ac-float 6s ease-in-out 3.5s infinite}
.ac-w{fill:var(--ac-white);opacity:0;animation:ac-slide 1s .2s cubic-bezier(.2,.8,.2,1) forwards}
.ac-b{fill:var(--ac-blue);opacity:0;animation:ac-rise 1s .6s cubic-bezier(.2,.8,.2,1) forwards}
.ac-c1{fill:var(--ac-gray);opacity:0;animation:ac-right 1s 1s cubic-bezier(.2,.8,.2,1) forwards}
.ac-c2{fill:var(--ac-gray);opacity:0;animation:ac-right 1s 1.25s cubic-bezier(.2,.8,.2,1) forwards}
.ac-shine{fill:url(#ac-sg);mix-blend-mode:overlay;transform:translateX(-260px);animation:ac-sweep 1.8s 2.6s ease-in-out forwards,ac-sweep 1.8s 10s ease-in-out infinite}
.ac-title{margin:clamp(14px,3vmin,34px) 0 0;font:600 clamp(1.25rem,5.2vw,3.3rem)/1.2 "Barlow Condensed","Arial Narrow",Arial,sans-serif;letter-spacing:.14em;margin-right:-.14em;min-height:1.2em;color:#eceff9;white-space:nowrap}
.ac-title .ac-ch{display:inline-block;visibility:hidden}
.ac-title .ac-cur{display:inline-block;width:0;height:.78em;border-right:.07em solid var(--ac-blue);animation:ac-blink .7s steps(1) infinite}
.ac-line{display:block;height:2px;width:0;background:var(--ac-blue);margin:14px 0 16px;animation:ac-grow 1.2s 2.6s ease-out forwards}
.ac-svc{margin:0;max-width:820px;font-family:Arial,Helvetica,sans-serif;font-size:clamp(11px,1.7vw,16px);line-height:1.9;color:var(--ac-text);opacity:0;animation:ac-fade 1.2s 3.2s forwards}
.ac-intro{opacity:0;animation:ac-fade .9s ease-out 4s forwards}
@keyframes ac-slide{from{opacity:0;transform:translate(-40px,30px)}to{opacity:1;transform:none}}
@keyframes ac-rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}
@keyframes ac-right{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:none}}
@keyframes ac-sweep{from{transform:translateX(-260px)}to{transform:translateX(700px)}}
@keyframes ac-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes ac-blink{50%{opacity:0}}
@keyframes ac-grow{to{width:min(80vw,480px)}}
@keyframes ac-fade{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
 .ac-logo,.ac-w,.ac-b,.ac-c1,.ac-c2,.ac-line,.ac-svc,.ac-intro{animation:none!important}
 .ac-w,.ac-b,.ac-c1,.ac-c2,.ac-svc,.ac-intro{opacity:1;transform:none}
 .ac-line{width:min(80vw,480px)}
 .ac-shine,.ac-title .ac-cur{display:none}
 .ac-title .ac-ch{visibility:visible}
}

/* ===== Team photo hover (works with the About Three.js network) ===== */
.team-card{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .35s ease,box-shadow .35s ease;transition-delay:var(--d,0ms),0ms,0ms}
.team-card:hover{box-shadow:0 18px 36px -16px rgb(32 36 74 / .35)}
.team-card.is-visible:hover{transform:translateY(-4px)}
.team-photo{transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .5s ease,box-shadow .5s ease;filter:grayscale(.4) saturate(.9);box-shadow:0 0 0 4px #fff,0 8px 16px -8px rgb(32 36 74 / .4);will-change:transform}
.team-card:hover .team-photo,.team-card:focus-within .team-photo{transform:scale(1.08);filter:none;box-shadow:0 0 0 4px #fff,0 0 0 7px var(--blue),0 16px 30px -10px rgb(32 36 74 / .55)}
.team-card h3{transition:color .3s ease}
.team-card:hover h3{color:var(--blue)}
@media (prefers-reduced-motion:reduce){.team-photo,.team-card{transition:none!important}.team-card:hover .team-photo{transform:none}.team-card.is-visible:hover{transform:none}}

/* =====================================================================
   ANIMATION — every block animates in (scroll reveal variants)
   ===================================================================== */
[hidden] { display: none !important; }
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="zoom"]  { transform: translateY(18px) scale(.92); }
[data-reveal="fade"]  { transform: none; }
[data-reveal].is-visible { opacity: 1; transform: none; }

/* animated accent bar under every section heading */
h2.h-display::after { content: ""; display: block; height: 3px; width: 0; margin-top: .7rem; border-radius: 2px; background: var(--blue); transition: width .8s cubic-bezier(.2,.7,.2,1) .35s; }
h2.h-display.is-visible::after { width: 3.5rem; }
.text-center > h2.h-display::after { margin-inline: auto; }

/* service icons pop in, then tilt on hover */
.svc-icon { transition: transform .4s cubic-bezier(.3,1.6,.5,1); }
.is-visible > .svc-icon { animation: icon-pop .7s cubic-bezier(.3,1.6,.5,1) .25s backwards; }
@keyframes icon-pop { from { opacity: 0; transform: scale(.3) rotate(-25deg); } to { opacity: 1; transform: none; } }
@media (hover: hover) { .card-hover:hover .svc-icon { transform: rotate(-8deg) scale(1.1); } }

/* contact form fields rise one after another once the card is visible */
.fx { opacity: 0; }
[data-reveal].is-visible .fx { animation: fade-up .6s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: calc(var(--i, 0) * 70ms + 200ms); }

/* gentle attention pulse on the hero button */
.cta-pulse { animation: cta-pulse 2.8s ease-out 5.5s infinite; }
@keyframes cta-pulse { 0% { box-shadow: 0 0 0 0 rgb(90 127 230 / .55); } 70%, 100% { box-shadow: 0 0 0 16px rgb(90 127 230 / 0); } }

/* inputs: soft glow on focus */
#enquiry-form input, #enquiry-form select, #enquiry-form textarea { transition: border-color .2s ease, box-shadow .2s ease; }
#enquiry-form input:focus, #enquiry-form select:focus, #enquiry-form textarea:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgb(90 127 230 / .18); }

/* =====================================================================
   THANK-YOU MESSAGE (shown after the form is sent)
   ===================================================================== */
.thanks:focus { outline: none; }
.thanks > * { opacity: 0; animation: fade-up .6s cubic-bezier(.2,.7,.2,1) forwards; }
.thanks > :nth-child(1) { animation-delay: .05s; }
.thanks > :nth-child(2) { animation-delay: .9s; }
.thanks > :nth-child(3) { animation-delay: 1.05s; }
.thanks > :nth-child(4) { animation-delay: 1.15s; }
.thanks > :nth-child(5) { animation-delay: 1.3s; }
.thanks-icon { position: relative; width: 84px; height: 84px; }
.thanks-icon::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgb(90 127 230 / .22); animation: thanks-ring 1.6s ease-out .5s 2 both; }
.thanks-icon svg { position: relative; display: block; }
.thanks-icon circle { stroke-dasharray: 152; stroke-dashoffset: 152; animation: thanks-draw .7s ease .15s forwards; }
.thanks-icon path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: thanks-draw .45s ease .75s forwards; }
@keyframes thanks-draw { to { stroke-dashoffset: 0; } }
@keyframes thanks-ring { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.5); opacity: 0; } }

/* =====================================================================
   RESPONSIVE — phone (<640), tablet (640–1023), desktop (1024+), large (1536+)
   ===================================================================== */
.container-site { padding-left: max(1.5rem, env(safe-area-inset-left, 0px)); padding-right: max(1.5rem, env(safe-area-inset-right, 0px)); }
@media (min-width: 768px) { .container-site { padding-inline: max(2rem, env(safe-area-inset-left, 0px)) max(2rem, env(safe-area-inset-right, 0px)); } }
@media (min-width: 1536px) { .container-site { max-width: 80rem; } }

/* hero service list: one line per row on tablet/desktop, tidy chips on phones */
.ac-row { display: block; }
.ac-i { display: inline-block; white-space: nowrap; }
.ac-i:not(:last-child)::after { content: "•"; margin: 0 .9em; }
@media (max-width: 639px) {
  .ac-svc { line-height: 1.4; max-width: 22rem; }
  .ac-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem .45rem; }
  .ac-row + .ac-row { margin-top: .4rem; }
  .ac-i { font-size: 12px; padding: .28rem .75rem; border: 1px solid rgb(255 255 255 / .18); border-radius: 999px; background: rgb(255 255 255 / .05); }
  .ac-i:not(:last-child)::after { display: none; }
}

/* phones: comfortable tap targets, no iOS zoom-on-focus, full-width button */
@media (max-width: 767px) {
  #enquiry-form input, #enquiry-form select, #enquiry-form textarea { font-size: 16px; }
  #enquiry-form input:not([type="hidden"]), #enquiry-form select { min-height: 2.75rem; }
  .footer-links a { display: inline-block; padding-block: .15rem; }
}
@media (max-width: 380px) { #site-header .font-display { font-size: .95rem; } }

/* landscape phones: don't force a full-height hero */
@media (max-height: 520px) and (orientation: landscape) { #home { min-height: auto; } }

/* touch devices: no sticky hover lift */
@media (hover: none) { .card-hover:hover { transform: none; box-shadow: none; } .team-card.is-visible:hover { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .fx, .thanks > * { opacity: 1 !important; animation: none !important; }
  .thanks-icon circle, .thanks-icon path { stroke-dashoffset: 0 !important; animation: none !important; }
  .thanks-icon::before, .cta-pulse { animation: none !important; }
  h2.h-display::after { width: 3.5rem; transition: none; }
}