:root{--navy:#142b49;--orange:#ed6512;--text:#101820;--muted:#5f6670;--line:#e3e3e3}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--text);background:#fff;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif}header{height:112px;padding:14px 42px;display:flex;align-items:center;border-top:8px solid var(--navy);border-bottom:1px solid var(--line)}.logo img{display:block;width:245px;height:84px;object-fit:contain;object-position:left center}main{max-width:1050px;margin:0 auto;padding:38px 24px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.service-card{position:relative;min-height:245px;overflow:hidden;border:1px solid #d8d8d8;border-radius:14px;background:#eef3f6;box-shadow:0 2px 2px rgba(20,43,73,.12)}.art{position:absolute;inset:0;display:grid;place-items:center;color:var(--navy);background:linear-gradient(145deg,#d7e7ee,#eef3f5 60%,#fff)}.logo-design .art{background:linear-gradient(145deg,#ffe1c6,#fff1df 62%,#fff)}.development .art{background:linear-gradient(145deg,#d7e0f2,#edf1f9 62%,#fff)}.seo .art{background:linear-gradient(145deg,#cfe4ea,#edf5f6 62%,#fff)}.consultancy .art{background:linear-gradient(145deg,#d7e7d0,#eff5eb 62%,#fff)}.writing .art{background:linear-gradient(145deg,#eadacb,#f7eee7 62%,#fff)}.art:before{content:"";position:absolute;width:250px;height:180px;top:-80px;right:-70px;border:30px solid rgba(255,255,255,.55);border-radius:45%;transform:rotate(20deg)}.card-copy{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:62px 26px 24px;background:linear-gradient(transparent,rgba(255,255,255,.94) 50%,#fff)}.card-copy h2{margin:0 0 6px;font-size:21px;font-weight:700;line-height:1.2}.card-copy p{margin:0;color:var(--muted);font-size:15px;line-height:1.4}.browser-art{width:100px;height:68px;border:7px solid currentColor;border-radius:7px;position:relative;transform:translateY(-35px)}.browser-art:before{content:"";position:absolute;left:24px;bottom:-22px;width:40px;height:7px;background:currentColor;box-shadow:0 13px 0 -1px currentColor}.browser-art i{position:absolute;width:34px;height:20px;left:26px;top:16px;border-left:6px solid var(--orange);border-bottom:6px solid var(--orange);transform:rotate(-45deg)}.pen-art{width:26px;height:105px;border-radius:12px 12px 3px 3px;background:var(--orange);box-shadow:inset 0 -23px var(--navy);transform:translateY(-29px) rotate(42deg)}.code-art{font-size:58px;font-weight:700;letter-spacing:-9px;transform:translate(-5px,-35px)}.search-art{width:75px;height:75px;border:10px solid currentColor;border-radius:50%;position:relative;transform:translate(-8px,-35px)}.search-art:after{content:"";position:absolute;width:46px;height:10px;right:-38px;bottom:-20px;border-radius:6px;background:currentColor;transform:rotate(45deg)}.chat-art{position:relative;width:102px;height:70px;border-radius:14px;background:var(--navy);transform:translateY(-37px)}.chat-art:after{content:"";position:absolute;left:16px;bottom:-25px;border:15px solid transparent;border-top-color:var(--navy)}.chat-art i{position:absolute;width:54px;height:6px;left:24px;top:22px;background:white;box-shadow:0 16px white;opacity:.85}.page-art{width:76px;height:98px;border:7px solid currentColor;border-radius:5px;transform:translateY(-32px)}.page-art:after{content:"";position:absolute;width:42px;height:6px;margin:22px 10px;background:var(--orange);box-shadow:0 16px var(--orange),0 32px var(--orange)}footer{border-top:1px solid var(--line);padding:40px 24px 20px}.footer-inner{max-width:1050px;margin:0 auto;display:grid;grid-template-columns:1.25fr 1fr .8fr;gap:60px}.footer-brand img{width:270px;max-width:100%;height:125px;object-fit:contain;object-position:left center}footer h3{margin:10px 0 20px;font-size:18px}footer a,footer p{display:block;margin:0 0 12px;color:var(--muted);font-size:14px;line-height:1.5;text-decoration:none}footer a:hover{color:var(--orange)}.copyright{max-width:1050px;margin:26px auto 0;padding-top:17px;border-top:1px solid var(--line);color:#858a91;font-size:12px}@media(max-width:800px){header{height:94px;padding:10px 24px}.logo img{width:210px;height:70px}.service-grid{grid-template-columns:repeat(2,1fr)}.footer-inner{grid-template-columns:1fr 1fr;gap:30px}.footer-brand{grid-column:1/-1}}@media(max-width:520px){header{padding-left:15px}main{padding:22px 12px}.service-grid{grid-template-columns:1fr}.service-card{min-height:225px}.footer-inner{grid-template-columns:1fr}.footer-brand{grid-column:auto}}

/* Service card motion: 3D flip-in, pointer tilt and glare */
.service-card{--rx:26deg;--ry:0deg;--ty:48px;--tz:-110px;opacity:0;transform:perspective(1000px) translateY(var(--ty)) translateZ(var(--tz)) rotateX(var(--rx)) rotateY(var(--ry));transform-origin:50% 100%;transition:opacity .6s ease,transform .95s cubic-bezier(.2,.8,.2,1),box-shadow .3s ease,border-color .3s ease;transition-delay:var(--delay,0ms)}
.service-card:not(.settled){will-change:transform}
.service-card.is-visible{--rx:0deg;--ty:0px;--tz:0px;opacity:1}
.service-card.settled{transition-delay:0ms;transition-duration:.6s,.55s,.3s,.3s}
.service-card.settled:hover{--ty:-8px;--tz:24px;transition-duration:.6s,.16s,.3s,.3s;border-color:rgba(237,101,18,.42);box-shadow:0 22px 44px rgba(20,43,73,.2)}
.service-card:after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.5),rgba(255,255,255,0) 55%);opacity:0;transition:opacity .3s ease}
.service-card.settled:hover:after{opacity:1}
.service-card .card-copy{transition:padding-bottom .35s ease}
.service-card:hover .card-copy{padding-bottom:29px}
.art-3d{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Each card hides its own still picture the moment its live model has been drawn over it,
   so a card is never blank while it waits its turn to be built. */
.service-card.is-3d .art>span{display:none}
.service-card:nth-child(1){--delay:40ms}.service-card:nth-child(2){--delay:110ms}.service-card:nth-child(3){--delay:180ms}.service-card:nth-child(4){--delay:250ms}.service-card:nth-child(5){--delay:320ms}.service-card:nth-child(6){--delay:390ms}
@media(prefers-reduced-motion:reduce){.service-card,.service-card .card-copy{opacity:1;transform:none!important;transition:none!important}}

/* Header brand and booking action */
header{justify-content:space-between;gap:24px}
.top-brand{display:flex;align-items:center;gap:13px;color:var(--navy);text-decoration:none}
.profile-logo{width:62px;height:62px;overflow:hidden;display:block;flex:0 0 auto;border:1px solid #e4e7ea;border-radius:50%;background:#fff;box-shadow:0 3px 10px rgba(20,43,73,.1)}
.profile-logo img{display:block;width:150px;height:62px;max-width:none;object-fit:cover;object-position:left center;transform:translateX(-2px)}
.brand-words{display:flex;flex-direction:column;line-height:1}
.brand-words strong{font-size:22px;font-weight:700;letter-spacing:-.02em}
.brand-words em{color:var(--orange);font-style:normal}
.brand-words small{margin-top:7px;color:#555d67;font-size:11px;font-weight:600;letter-spacing:.035em}
.book-button{padding:12px 18px;border-radius:8px;background:var(--navy);color:#fff;font-size:14px;font-weight:700;text-decoration:none;box-shadow:0 5px 14px rgba(20,43,73,.18);transition:transform .2s ease,background .2s ease}
.book-button:hover{background:var(--orange);transform:translateY(-2px)}
@media(max-width:520px){header{padding-right:14px;gap:10px}.profile-logo{width:48px;height:48px}.profile-logo img{width:116px;height:48px}.brand-words strong{font-size:16px}.brand-words small{font-size:9px;margin-top:5px}.book-button{padding:10px 11px;font-size:12px}}

/* Full brand treatment */
header{height:132px;padding:12px 38px}
.full-logo{width:190px;height:102px;display:block;flex:0 0 190px;overflow:hidden}
.full-logo img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center}
.header-title{align-self:stretch;min-width:0;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;border-left:1px solid var(--line);border-right:1px solid var(--line);line-height:1;text-align:center}
.header-title strong{font-size:clamp(25px,3vw,42px);font-weight:800;letter-spacing:-.01em;color:var(--navy)}
.header-title em{font-style:normal;color:var(--orange)}
.header-title span{margin-top:10px;color:#4f5863;font-size:clamp(11px,1.2vw,16px);font-weight:600;letter-spacing:.055em}
@media(max-width:800px){header{height:112px;padding:10px 18px}.full-logo{width:145px;height:88px;flex-basis:145px}.header-title{align-items:flex-start;padding-left:18px;text-align:left}.header-title strong{font-size:24px}.header-title span{font-size:11px}.book-button{padding:10px 12px;font-size:12px}}
@media(max-width:590px){header{height:auto;min-height:104px;display:grid;grid-template-columns:105px 1fr;gap:10px}.full-logo{width:105px;height:76px}.header-title{border-right:0;padding-left:10px}.header-title strong{font-size:18px}.header-title span{margin-top:6px;font-size:9px}.book-button{grid-column:1/-1;text-align:center;padding:9px}}

/* Gravity particle field behind the page */
.gravity-field{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:-1;pointer-events:none;opacity:0;transition:opacity 1.6s ease}
.gravity-field.is-ready{opacity:1}
/* Let the particles show through the white around the logo */
.full-logo img,.footer-brand img{mix-blend-mode:multiply}

/* Header without the centre title: logo on the left, booking on the right */
@media(max-width:590px){header{display:flex;min-height:0;height:96px;padding:10px 16px}.full-logo{width:110px;height:76px}header .book-button{grid-column:auto;padding:10px 14px}}

/* Hero: an open, near full-screen area where the particle field shows through */
.hero{min-height:calc(100vh - 132px);min-height:calc(100svh - 132px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px 64px;text-align:center}
.hero-title{position:relative;display:inline-grid;margin:0;font-size:clamp(40px,7.2vw,104px);font-weight:800;line-height:1.05;letter-spacing:-.015em}
.hero-title>span{grid-area:1/1}
.hero-ghost{visibility:hidden}
.hero-typed{text-align:left;white-space:pre-wrap}
.word-navy{color:var(--navy)}
.word-orange{color:var(--orange)}
.hero-caret{display:inline-block;width:.07em;height:.9em;margin-left:.04em;vertical-align:-.08em;border-radius:2px;background:var(--orange);animation:caret-blink 1s steps(1) infinite}
.hero-typed.is-typing .hero-caret{animation:none}
@keyframes caret-blink{50%{opacity:0}}
.hero-tagline{margin:22px 0 0;color:#4f5863;font-size:clamp(16px,1.9vw,26px);font-weight:600;letter-spacing:.06em;opacity:0;transform:translateY(14px);animation:hero-rise .9s .5s cubic-bezier(.2,.8,.2,1) forwards}
.hero-actions{margin-top:42px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:center;opacity:0;transform:translateY(14px);animation:hero-rise .9s .8s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes hero-rise{to{opacity:1;transform:none}}

/* 3D "Book With Us": a raised pill on a darker ledge that floats, tilts toward the pointer,
   lifts on hover and presses down when clicked, with a light sweep running across it. */
.cta-float{display:inline-block;animation:cta-float 4.5s ease-in-out infinite}
@keyframes cta-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.cta-3d{--rx:0deg;--ry:0deg;--lift:0px;--ledge:7px;position:relative;display:inline-flex;align-items:center;gap:14px;padding:19px 36px 19px 38px;overflow:hidden;border-radius:999px;background:linear-gradient(180deg,#24446f 0%,#142b49 60%,#10233c 100%);color:#fff;font-size:clamp(16px,1.4vw,19px);font-weight:700;letter-spacing:.01em;text-decoration:none;transform:perspective(700px) translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry));box-shadow:0 var(--ledge) 0 #0a192c,0 calc(var(--ledge) + 10px) 26px rgba(20,43,73,.35),inset 0 1px 0 rgba(255,255,255,.22);transition:transform .18s ease-out,box-shadow .18s ease-out,background .35s ease}
.cta-3d:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%);pointer-events:none}
.cta-3d:after{content:"";position:absolute;top:-20%;bottom:-20%;left:-40%;width:28%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.38),rgba(255,255,255,0));transform:skewX(-18deg) translateX(-120%);animation:cta-shine 3.8s 1.6s ease-in-out infinite;pointer-events:none}
@keyframes cta-shine{0%{transform:skewX(-18deg) translateX(-120%)}35%,100%{transform:skewX(-18deg) translateX(620%)}}
.cta-label,.cta-arrow{position:relative;z-index:1}
.cta-arrow{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--orange);font-size:17px;box-shadow:0 3px 0 #a9470b;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.cta-3d:hover{--lift:-3px;--ledge:10px;background:linear-gradient(180deg,#f58436 0%,#ed6512 60%,#d95a0e 100%);box-shadow:0 var(--ledge) 0 #a9470b,0 calc(var(--ledge) + 14px) 32px rgba(237,101,18,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.cta-3d:hover .cta-arrow{transform:translateX(5px);background:var(--navy);box-shadow:0 3px 0 #0a192c}
.cta-3d:active{--lift:5px;--ledge:2px;transition-duration:.06s}
.cta-3d:focus-visible{outline:3px solid rgba(237,101,18,.55);outline-offset:6px}
.cta-ghost{padding:17px 26px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.75);color:var(--navy);font-size:clamp(15px,1.3vw,17px);font-weight:600;text-decoration:none;transition:border-color .2s ease,color .2s ease}
.cta-ghost:hover{border-color:var(--orange);color:var(--orange)}
@media(max-width:590px){.hero{min-height:calc(100svh - 96px);padding-top:32px}.hero-actions{margin-top:32px}.cta-3d{padding:16px 26px 16px 28px}}
@media(prefers-reduced-motion:reduce){.cta-float,.cta-3d:after,.hero-caret{animation:none}.hero-tagline,.hero-actions{animation:none;opacity:1;transform:none}}

/* Typing finished: the caret fades away */
.hero-caret{transition:opacity .6s ease}
.hero-typed.is-done .hero-caret{opacity:0;animation:none}

/* The 3D "Book With Us" lives in the header's top-right corner */
header .cta-3d{gap:12px;padding:14px 22px 14px 26px;font-size:16px;--ledge:6px}
header .cta-3d:hover{--ledge:8px}
header .cta-3d:active{--ledge:2px}
header .cta-arrow{width:26px;height:26px;font-size:15px}
@media(max-width:590px){header .cta-3d{gap:9px;padding:10px 14px 10px 16px;font-size:13px;--ledge:4px}header .cta-arrow{width:22px;height:22px;font-size:13px}}

/* Fluid sizing: everything scales down smoothly on small screens and reaches full size on desktop */
header{gap:12px;padding-left:clamp(12px,3.5vw,38px);padding-right:clamp(12px,3.5vw,38px)}
.full-logo{width:clamp(96px,22vw,190px);height:clamp(66px,14vw,102px);flex:0 1 auto}
header .cta-float{flex:0 0 auto}
header .cta-3d{white-space:nowrap;gap:clamp(7px,1.6vw,12px);padding:clamp(9px,2.2vw,14px) clamp(13px,3.2vw,22px) clamp(9px,2.2vw,14px) clamp(15px,3.6vw,26px);font-size:clamp(12.5px,3.4vw,16px)}
header .cta-arrow{width:clamp(20px,5vw,26px);height:clamp(20px,5vw,26px);font-size:clamp(12px,3vw,15px)}
/* The name always fits on one line (it is ~9.7 font-sizes wide), up to 104px on desktop */
.hero-title{white-space:nowrap;font-size:clamp(24px,calc((100vw - 56px) / 11),104px)}
.hero-typed{white-space:pre}
.hero-tagline{margin-top:clamp(12px,2.2vw,22px);font-size:clamp(13px,3.6vw,26px);letter-spacing:clamp(.02em,.6vw,.06em)}
.hero-actions{margin-top:clamp(24px,5vw,42px)}
.cta-ghost{padding:clamp(12px,2.6vw,17px) clamp(18px,4vw,26px);font-size:clamp(14px,3.4vw,17px)}
@media(max-width:590px){header{height:auto;min-height:0;padding-top:10px;padding-bottom:12px}}

/* Fox mascot beside the headline (stacked above it on narrow screens) */
.hero-inner{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,2vw,20px)}
.hero-copy{display:flex;flex-direction:column;align-items:center}
.hero-fox{display:block;width:clamp(170px,52vw,300px);aspect-ratio:500/460;height:auto;
  /* The video's backdrop is white: multiply lets the page (and particle field) show through it */
  mix-blend-mode:multiply;filter:brightness(1.03);
  /* Soft left edge, so the fox fades in as it walks into view */
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%);mask-image:linear-gradient(to right,transparent 0,#000 16%);
  cursor:pointer;background:transparent}
.hero-fox::-webkit-media-controls{display:none!important}
@media(min-width:900px){
  .hero-inner{flex-direction:row;justify-content:center;gap:clamp(0px,1.5vw,24px)}
  .hero-fox{width:clamp(240px,25vw,400px);flex:0 0 auto}
  .hero-copy{align-items:flex-start;text-align:left}
  /* Sized to fit beside the fox; full 104px on wide desktops */
  .hero-title{font-size:clamp(40px,calc((100vw - 25vw - 150px) / 11),104px)}
  .hero-actions{justify-content:flex-start}
}

/* Less empty space between the hero and the service cards */
.hero{min-height:0;padding-top:clamp(28px,5vw,64px);padding-bottom:clamp(8px,2vw,24px)}
main{padding-top:clamp(20px,3vw,32px)}

/* New cards: backgrounds and stagger */
.blog .art{background:linear-gradient(145deg,#ffe0cc,#fff0e5 62%,#fff)}
.future .art{background:linear-gradient(145deg,#d9e4fb,#ecf0fd 62%,#fff)}
.about .art{background:linear-gradient(145deg,#e3defb,#f0edfd 62%,#fff)}
.service-card:nth-child(7){--delay:460ms}.service-card:nth-child(8){--delay:530ms}.service-card:nth-child(9){--delay:600ms}

/* Image icons made 3D: they pop in with the card, then float and turn slowly in perspective,
   with a soft shadow that breathes underneath; on hover they lift and grow a little. */
.icon-3d{position:absolute;inset:0 0 36% 0;display:grid;place-items:center;perspective:700px;opacity:0;transform:scale(.45) translateY(30px);transition:opacity .5s ease,transform .9s cubic-bezier(.34,1.56,.64,1)}
.service-card.is-visible .icon-3d{opacity:1;transform:none}
.service-card.is-visible:not(.settled) .icon-3d{transition-delay:calc(var(--delay,0ms) + 260ms)}
.service-card.settled:hover .icon-3d{transform:translateY(-8px) scale(1.08);transition-duration:.35s,.45s}
.icon-3d img{position:relative;z-index:1;width:min(40%,150px);height:auto;transform-style:preserve-3d;filter:drop-shadow(0 16px 14px rgba(20,43,73,.2));animation:icon-turn 6s ease-in-out infinite}
.icon-wide img{width:min(62%,215px)}
.icon-3d:after{content:"";position:absolute;bottom:4%;left:50%;width:34%;height:14px;margin-left:-17%;border-radius:50%;background:radial-gradient(closest-side,rgba(20,43,73,.28),rgba(20,43,73,0));animation:icon-shadow 6s ease-in-out infinite}
@keyframes icon-turn{0%,100%{transform:translateY(0) rotateY(-16deg) rotateX(5deg)}50%{transform:translateY(-12px) rotateY(16deg) rotateX(-4deg)}}
@keyframes icon-shadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.8);opacity:.6}}
@media(prefers-reduced-motion:reduce){.icon-3d{opacity:1;transform:none;transition:none}.icon-3d img,.icon-3d:after{animation:none}}

/* Water-drop ripple on click: a soft splash with two thin rings spreading out (~70px across) */
.cta-3d{--ripple:255,255,255}
.cta-ghost,.service-card{--ripple:237,101,18}
.cta-ghost{position:relative;overflow:hidden}
.ripple{position:absolute;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;pointer-events:none;z-index:6;
  border:2px solid rgba(var(--ripple),.6);background:radial-gradient(circle,rgba(var(--ripple),.35) 0,rgba(var(--ripple),.12) 45%,rgba(var(--ripple),0) 70%);
  transform:scale(0);animation:ripple-drop .65s cubic-bezier(.2,.7,.3,1) forwards}
.ripple:after{content:"";position:absolute;inset:18%;border-radius:50%;border:1.5px solid rgba(var(--ripple),.55);transform:scale(0);animation:ripple-ring .65s .08s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes ripple-drop{0%{transform:scale(0);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes ripple-ring{0%{transform:scale(0);opacity:1}100%{transform:scale(1.25);opacity:0}}

/* Social icons in the header: they drop in one by one, then bob and tilt gently in 3D
   (each out of step with the others); hovering spins one right round, clicking ripples. */
.socials{display:flex;align-items:center;gap:clamp(6px,1.1vw,14px);margin-left:auto;margin-right:clamp(10px,2.2vw,28px);perspective:600px}
.social{--ripple:237,101,18;position:relative;display:block;width:clamp(30px,3.1vw,44px);aspect-ratio:1;border-radius:30%;animation:social-in .7s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--i) * 90ms + 500ms)}
.social img{display:block;width:100%;height:100%;filter:drop-shadow(0 6px 6px rgba(20,43,73,.25));animation:social-bob 3.6s ease-in-out infinite;animation-delay:calc(var(--i) * -.7s)}
.social:hover img,.social:focus-visible img{animation:social-spin .8s cubic-bezier(.3,.7,.3,1)}
.social:focus-visible{outline:3px solid rgba(237,101,18,.55);outline-offset:4px}
@keyframes social-in{from{opacity:0;transform:translateY(-18px) scale(.6)}to{opacity:1;transform:none}}
@keyframes social-bob{0%,100%{transform:translateY(0) rotateY(-16deg) rotateX(6deg)}50%{transform:translateY(-4px) rotateY(16deg) rotateX(-4deg)}}
@keyframes social-spin{0%{transform:rotateY(0) scale(1)}50%{transform:translateY(-5px) rotateY(180deg) scale(1.18)}100%{transform:rotateY(360deg) scale(1.08)}}
/* Narrow screens: the icons get their own centred row under the logo and button */
@media(max-width:640px){header{flex-wrap:wrap;row-gap:6px}.socials{order:3;width:100%;justify-content:center;margin:0}}
@media(prefers-reduced-motion:reduce){.social,.social img{animation:none!important}}

/* Social icons, responsive: they scale smoothly with the screen and stay beside the logo and
   button down to 521px wide; only on narrow phones do they take their own tidy row. */
.socials{gap:clamp(4px,1vw,14px);margin-right:clamp(6px,2vw,28px)}
.social{width:clamp(22px,4.4vw,44px)}
@media(max-width:640px){header{flex-wrap:nowrap}.socials{order:0;width:auto;justify-content:flex-start;margin:0 clamp(6px,2vw,12px) 0 auto}}
/* Phones: logo, icons and button all shrink together so everything stays on one line, even at 320px */
@media(max-width:520px){
  header{flex-wrap:nowrap;gap:6px;padding-left:10px;padding-right:10px}
  .full-logo{width:clamp(64px,20vw,110px);height:clamp(46px,13vw,76px)}
  .socials{order:0;width:auto;gap:clamp(3px,1vw,8px);margin:0 clamp(2px,1vw,6px) 0 auto}
  .social{width:clamp(18px,5.2vw,28px)}
  header .cta-3d{gap:clamp(4px,1.4vw,9px);padding:clamp(6px,1.8vw,10px) clamp(8px,2.4vw,14px);font-size:clamp(10.5px,3vw,13px);--ledge:4px}
  header .cta-arrow{width:clamp(16px,4.6vw,22px);height:clamp(16px,4.6vw,22px);font-size:clamp(10px,2.8vw,13px);box-shadow:0 2px 0 #a9470b}
}

/* Sticky header: logo, social icons and "Hit Us Up" stay at the top while scrolling.
   Frosted so the page shows softly through it; once scrolled it gains a shadow and gets shorter. */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);transition:height .3s ease,box-shadow .3s ease}
header .full-logo{transition:height .3s ease,width .3s ease}
header.is-scrolled{box-shadow:0 8px 24px rgba(20,43,73,.1)}
@media(min-width:591px){header.is-scrolled{height:92px}header.is-scrolled .full-logo{height:72px}}
#services{scroll-margin-top:110px}

/* Contact page header: "Hit Us Up" sits in the centre as the current page, and a
   "← Home" button slides in beside the logo. */
.home-btn{--ripple:237,101,18;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;margin-left:clamp(8px,1.6vw,20px);padding:10px 16px 10px 10px;border:1.5px solid #e1e4ea;border-radius:999px;background:#fff;color:var(--navy);font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap;box-shadow:0 4px 0 #e1e4ea,0 10px 20px -12px rgba(20,43,73,.35);animation:home-in .7s .15s cubic-bezier(.34,1.56,.64,1) both;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease,color .2s ease}
.home-arrow{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--navy);color:#fff;font-size:15px;transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s ease}
.home-btn:hover{border-color:var(--orange);color:var(--orange);transform:translateY(-2px);box-shadow:0 6px 0 #f6c9aa,0 14px 24px -12px rgba(237,101,18,.4)}
.home-btn:hover .home-arrow{transform:translateX(-4px);background:var(--orange)}
.home-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #e1e4ea}
.home-btn:focus-visible{outline:3px solid rgba(237,101,18,.55);outline-offset:4px}
@keyframes home-in{from{opacity:0;transform:translateX(-40px) scale(.8)}to{opacity:1;transform:none}}

/* Current page: the button is lit orange and its arrow points down at the form */
.cta-3d[aria-current]{background:linear-gradient(180deg,#f58436 0%,#ed6512 60%,#d95a0e 100%);box-shadow:0 var(--ledge) 0 #a9470b,0 calc(var(--ledge) + 10px) 26px rgba(237,101,18,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.cta-3d[aria-current] .cta-arrow{background:var(--navy);box-shadow:0 3px 0 #0a192c;transform:rotate(90deg)}
.cta-3d[aria-current]:hover .cta-arrow{transform:rotate(90deg) translateX(3px)}
@media(min-width:960px){
  .contact-page header .cta-float{position:absolute;left:50%;top:50%;translate:-50% -50%}
}
@media(max-width:759px){.home-label{display:none}.home-btn{padding:4px;margin-left:6px}}
@media(max-width:520px){.home-arrow{width:24px;height:24px;font-size:13px}}
@media(prefers-reduced-motion:reduce){.home-btn{animation:none}}

/* During the page-to-page glide: button hidden until it starts, float paused */
.cta-flying header .cta-float{visibility:hidden;animation:none}
.cta-gliding header .cta-float{animation:none}
header .cta-float{will-change:transform}

/* Handwritten accents (Kalam Light): tagline, form subtitle and card descriptions */
.hero-tagline,.msg-head p,.card-copy p{font-family:"Kalam",Arial,cursive;font-weight:300;letter-spacing:.01em}
.hero-tagline{font-size:clamp(17px,4vw,30px);letter-spacing:.02em;color:#3d4652}
.card-copy p{font-size:17px;font-weight:400;line-height:1.3;color:#3f4751}
.msg-head p{font-size:clamp(16px,1.9vw,19px)}

/* Skip to content: hidden until focused with the keyboard */
.skip-link{position:fixed;top:-60px;left:12px;z-index:200;padding:12px 18px;border-radius:0 0 12px 12px;background:var(--navy);color:#fff;font-weight:700;text-decoration:none;transition:top .2s ease}
.skip-link:focus{top:0;outline:3px solid var(--orange);outline-offset:2px}

/* Cards that are links behave like the cards around them */
a.service-card{color:inherit;text-decoration:none;display:block}
.soon{margin-left:8px;padding:3px 9px;border-radius:999px;background:rgba(20,43,73,.08);color:#5f6670;font-family:Arial,sans-serif;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;vertical-align:middle}

/* Footer: brand, services, company and contact columns */
.site-footer{position:relative;border-top:1px solid var(--line);padding:clamp(34px,5vw,56px) clamp(14px,4vw,24px) 22px;background:rgba(255,255,255,.88)}
.site-footer .footer-inner{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(20px,3vw,40px);max-width:1120px;margin:0 auto}
@media(max-width:900px){.site-footer .footer-inner{grid-template-columns:1fr 1fr}.site-footer .footer-brand{grid-column:1/-1}}
@media(max-width:560px){.site-footer .footer-inner{grid-template-columns:1fr;text-align:left}}
.site-footer .footer-brand img{width:210px;max-width:60vw;height:auto;mix-blend-mode:multiply}
.footer-promise{margin:10px 0 0;font-family:"Kalam",Arial,cursive;font-weight:300;color:#3d4652;font-size:17px;max-width:30ch}
.footer-col h3{margin:6px 0 14px;color:var(--navy);font-size:16px;font-weight:700}
.footer-col a,.footer-col p{display:block;margin:0 0 10px;color:var(--muted);font-size:14px;line-height:1.5;text-decoration:none;transition:color .2s ease,transform .2s ease}
.footer-col a:hover{color:var(--orange);transform:translateX(3px)}
.site-footer .copyright{max-width:1120px;margin:clamp(24px,3vw,36px) auto 0;padding-top:16px;border-top:1px solid var(--line);color:#858a91;font-size:12.5px}

/* Secondary buttons across the site in faint silver, not blue/green */
.cta-ghost{background:linear-gradient(180deg,#fbfcfd,#eceef2);border:1px solid #d9dde4;color:var(--navy);box-shadow:0 4px 0 #c7ccd6,0 12px 20px -14px rgba(20,43,73,.5),inset 0 1px 0 #fff}
.cta-ghost:hover{border-color:rgba(237,101,18,.55);color:var(--orange);background:linear-gradient(180deg,#fff,#e7eaf0)}

/* ---------- Scroll-linked motion (see scroll.js) ---------- */
/* Progress bar across the very top of the page */
.scroll-bar{position:fixed;top:0;left:0;z-index:120;width:100%;height:3px;transform:scaleX(0);transform-origin:left center;background:linear-gradient(90deg,var(--navy),var(--orange));pointer-events:none}

[data-scroll]{--p:0}
/* Rise and fade in step with the scroll */
[data-scroll="up"]{opacity:var(--p);transform:translateY(calc((1 - var(--p)) * 34px))}
[data-scroll="zoom"]{opacity:var(--p);transform:translateY(calc((1 - var(--p)) * 26px)) scale(calc(.93 + .07 * var(--p)))}
/* Drift at its own pace as the page moves */
[data-scroll="parallax"]{transform:translate3d(0,var(--shift,0px),0);will-change:transform}
/* Groups whose children follow one after another */
[data-scroll="stagger"]>*{opacity:var(--cp,0);transform:translateY(calc((1 - var(--cp,0)) * 30px))}

/* While the cards are flying in, scroll drives them; once settled, hover takes over.
   On touch devices the cards use their CSS transition instead (compositor thread), so these
   overrides only apply on desktop where the main thread is fast enough to drive them. */
@media(pointer:fine){
.scroll-driven .service-card{transition:opacity .15s linear,box-shadow .3s ease,border-color .3s ease;transition-delay:0ms}
.scroll-driven .service-card.settled{transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .15s linear,box-shadow .3s ease,border-color .3s ease}
.scroll-driven .service-card.settled:hover{transition-duration:.16s,.15s,.3s,.3s}
}
@media(max-width:520px){.service-card:nth-child(n){--delay:0ms}}

/* ---------- Site navigation ---------- */
header{position:sticky;flex-wrap:nowrap}
.site-nav{display:flex;align-items:center;gap:clamp(4px,1.1vw,18px);margin-left:clamp(8px,1.6vw,26px)}
.site-nav>a,.nav-drop-btn{position:relative;padding:8px 10px;border:0;border-radius:10px;background:none;color:var(--navy);font:inherit;font-size:15px;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer;transition:color .2s ease}
.site-nav>a:after,.nav-drop-btn:after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;border-radius:2px;background:var(--orange);transform:scaleX(0);transform-origin:left center;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.site-nav>a:hover,.nav-drop-btn:hover,.site-nav a.is-current{color:var(--orange)}
.site-nav>a:hover:after,.nav-drop-btn:hover:after,.site-nav a.is-current:after{transform:scaleX(1)}
.nav-drop{position:relative}
.nav-drop-btn .chev{display:inline-block;margin-left:3px;font-size:11px;transition:transform .25s ease}
.nav-drop.open .nav-drop-btn .chev{transform:rotate(180deg)}
.nav-drop-panel{position:absolute;z-index:60;top:calc(100% + 10px);left:-8px;min-width:230px;padding:8px;border:1px solid #e6e8ee;border-radius:18px;background:#fff;box-shadow:0 26px 50px -22px rgba(20,43,73,.4);opacity:0;transform:translateY(-8px) scale(.97);transform-origin:top left;pointer-events:none;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
.nav-drop.open .nav-drop-panel{opacity:1;transform:none;pointer-events:auto}
.nav-drop-panel a{display:block;padding:10px 14px;border-radius:12px;color:var(--text);font-size:14.5px;font-weight:600;text-decoration:none;transition:background .18s ease,color .18s ease,padding .2s ease}
.nav-drop-panel a:hover,.nav-drop-panel a[aria-current]{padding-left:18px;background:rgba(237,101,18,.1);color:var(--orange)}

/* Menu button (small screens) */
.nav-toggle{display:none;align-items:center;gap:8px;margin-left:auto;padding:9px 14px;border:1px solid #d9dde4;border-radius:999px;background:linear-gradient(180deg,#fbfcfd,#eceef2);color:var(--navy);font:inherit;font-size:14px;font-weight:700;cursor:pointer;box-shadow:0 3px 0 #c7ccd6,inset 0 1px 0 #fff}
.nav-toggle:hover{border-color:rgba(237,101,18,.5);color:var(--orange)}
.nav-bars,.nav-bars:before,.nav-bars:after{display:block;width:16px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease,opacity .2s ease}
.nav-bars{position:relative}
.nav-bars:before,.nav-bars:after{content:"";position:absolute;left:0}
.nav-bars:before{top:-5px}
.nav-bars:after{top:5px}
.nav-open .nav-bars{background:transparent}
.nav-open .nav-bars:before{transform:translateY(5px) rotate(45deg)}
.nav-open .nav-bars:after{transform:translateY(-5px) rotate(-45deg)}

@media(max-width:1080px){
  .nav-toggle{display:inline-flex;order:2}
  .socials{order:3}
  header .cta-float{order:4}
  .site-nav{position:absolute;top:100%;left:0;right:0;z-index:70;flex-direction:column;align-items:stretch;gap:2px;margin:0;padding:10px clamp(12px,4vw,28px) 18px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.98);box-shadow:0 22px 40px -24px rgba(20,43,73,.45);opacity:0;transform:translateY(-10px);pointer-events:none;transition:opacity .2s ease,transform .25s cubic-bezier(.2,.8,.2,1)}
  .nav-open .site-nav{opacity:1;transform:none;pointer-events:auto}
  .site-nav>a,.nav-drop-btn{width:100%;padding:13px 12px;text-align:left;font-size:16px;border-bottom:1px solid #f0f2f6}
  .site-nav>a:after,.nav-drop-btn:after{display:none}
  .nav-drop-btn{display:flex;align-items:center;justify-content:space-between}
  .nav-drop-panel{position:static;min-width:0;padding:4px 0 8px 10px;border:0;border-radius:0;background:none;box-shadow:none;opacity:1;transform:none;pointer-events:auto;display:none}
  .nav-drop.open .nav-drop-panel{display:block}
}
@media(max-width:820px){.socials{display:none}.nav-open .site-nav .nav-socials{display:flex}
.home .socials{display:flex;order:0;gap:clamp(4px,1.2vw,10px);margin:0 clamp(4px,1.4vw,10px) 0 auto}
.home .social{width:clamp(24px,5vw,34px)}}
@media(max-width:520px){.nav-toggle-label{display:none}.nav-toggle{padding:9px 11px}}

/* The contact page no longer centres the button: the nav needs that space */
@media(min-width:960px){.contact-page header .cta-float{position:static;translate:none}}


/* ---------- Shared components (used by service, blog and about pages) ---------- */
.cv-btn{--ripple:255,255,255;--ledge:5px;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;padding:13px 22px;border-radius:14px;background:linear-gradient(180deg,#24446f,#142b49);color:#fff;font-size:15px;font-weight:700;text-decoration:none;box-shadow:0 var(--ledge) 0 #0a192c,0 14px 24px -14px rgba(20,43,73,.6);transition:transform .18s ease,box-shadow .18s ease,background .3s ease}
.cv-btn:hover{--ledge:7px;transform:translateY(-2px);background:linear-gradient(180deg,#f58436,#ed6512);box-shadow:0 var(--ledge) 0 #a9470b,0 16px 26px -14px rgba(237,101,18,.55)}
.cv-btn:active{--ledge:2px;transform:translateY(3px)}
.ghost-btn{--ripple:37,211,102;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border:1.5px solid #bfe9cf;border-radius:14px;background:#fff;color:#127a3f;font-size:15px;font-weight:700;text-decoration:none;transition:border-color .2s ease,background .2s ease,transform .2s ease}
.ghost-btn:hover{border-color:#25d366;background:#f0fbf4;transform:translateY(-2px)}
.talk-pill{--ripple:255,255,255;position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:9px;padding:13px 20px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:15px;font-weight:700;text-decoration:none;transition:background .2s ease,border-color .2s ease,transform .2s ease}
.talk-pill img{width:22px;height:22px}
.talk-pill:hover{border-color:var(--orange);background:var(--orange);transform:translateY(-2px)}
.ico{width:26px;height:26px;color:var(--navy)}
.ico .accent{stroke:var(--orange)}
.ico .dot{fill:var(--orange);stroke:none}
.cv-btn,.ghost-btn{--ripple:20,43,73;--ledge:4px;background:linear-gradient(180deg,var(--silver-1),var(--silver-2));
  border:1px solid var(--silver-line);color:var(--navy);
  box-shadow:0 var(--ledge) 0 var(--silver-deep),0 12px 20px -14px rgba(20,43,73,.55),inset 0 1px 0 #fff}
.cv-btn:hover,.ghost-btn:hover{--ledge:6px;transform:translateY(-2px);background:linear-gradient(180deg,#fff,#e7eaf0);
  border-color:rgba(237,101,18,.55);color:var(--orange);box-shadow:0 var(--ledge) 0 var(--silver-deep),0 16px 24px -14px rgba(237,101,18,.4),inset 0 1px 0 #fff}
.cv-btn:hover .ico,.cv-btn:hover .ico .accent{color:var(--orange);stroke:var(--orange)}
.cv-btn:active,.ghost-btn:active{--ledge:1px;transform:translateY(3px)}
.cta-plain{text-align:center;padding:clamp(8px,2vw,20px) 0 0}
.cta-plain h2{margin:0 0 6px;color:var(--navy);font-size:clamp(22px,3vw,32px);font-weight:800}
.cta-plain p{margin:0 0 clamp(18px,3vw,30px);font-family:"Kalam",Arial,cursive;color:#3d4652;font-size:clamp(16px,2vw,20px)}
.icon-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(20px,5vw,60px)}
.icon-action{--ripple:237,101,18;position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;width:140px;padding:8px;border-radius:18px;color:var(--navy);text-decoration:none;perspective:600px}
.icon-action img{width:clamp(56px,8vw,72px);height:auto;filter:drop-shadow(0 12px 12px rgba(20,43,73,.28));animation:social-bob 4s ease-in-out infinite;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.icon-action:nth-child(2) img{animation-delay:-1.3s}
.icon-action:nth-child(3) img{animation-delay:-2.6s}
.icon-action span{font-size:14.5px;font-weight:700;line-height:1.3;transition:color .2s ease}
.icon-action:hover img,.icon-action:focus-visible img{animation:social-spin .9s cubic-bezier(.3,.7,.3,1)}
.icon-action:hover span{color:var(--orange)}
.icon-action:focus-visible{outline:3px solid rgba(237,101,18,.55);outline-offset:4px}

/* Back to top: a round button that fades in once you scroll down */
.to-top{--ripple:255,255,255;--ledge:5px;position:fixed;right:clamp(14px,2.5vw,28px);bottom:calc(clamp(14px,2.5vw,28px) + env(safe-area-inset-bottom,0px));z-index:110;display:grid;place-items:center;width:clamp(44px,5vw,54px);height:clamp(44px,5vw,54px);padding:0;overflow:hidden;border:0;border-radius:50%;background:linear-gradient(180deg,#24446f 0%,#142b49 60%,#10233c 100%);color:#fff;cursor:pointer;opacity:0;transform:translateY(14px) scale(.85);pointer-events:none;box-shadow:0 var(--ledge) 0 #0a192c,0 calc(var(--ledge) + 10px) 22px rgba(20,43,73,.35),inset 0 1px 0 rgba(255,255,255,.22);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1),background .3s ease,box-shadow .2s ease}
.to-top.is-on{opacity:1;transform:none;pointer-events:auto}
.to-top svg{width:22px;height:22px;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.to-top:hover{--ledge:7px;transform:translateY(-3px);background:linear-gradient(180deg,#f58436 0%,#ed6512 60%,#d95a0e 100%);box-shadow:0 var(--ledge) 0 #a9470b,0 calc(var(--ledge) + 12px) 26px rgba(237,101,18,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.to-top:hover svg{transform:translateY(-2px)}
.to-top:active{--ledge:2px;transform:translateY(3px)}
.to-top:focus-visible{outline:3px solid rgba(237,101,18,.6);outline-offset:4px}
@media print{.to-top{display:none}}


/* ---------- Pre-rendered model art ---------- */
/* Every service card carries a still of its own 3D model, photographed at build time. Strong
   devices draw the model live and the still steps aside (see cards3d.js); everywhere else the
   still is what you see — the same picture, for none of the work and none of the download. */
.model-art img{width:auto;height:auto;max-width:min(56%,172px);max-height:min(84%,152px)}
.model-art.icon-wide img{max-width:min(66%,215px)}
.svc-hero-art{position:relative;display:grid;place-items:center}
.svc-hero-art>.hero-still{width:auto;height:auto;max-width:76%;max-height:84%;filter:drop-shadow(0 22px 18px rgba(20,43,73,.22));animation:icon-turn 7s ease-in-out infinite}
.svc-hero-art.is-live>.hero-still{display:none}

/* ---------- The light path (see scroll.js) ---------- */
/* Devices below the top tier are not measured on every scroll frame; each piece is simply
   handed its finished value as it arrives and the easing below does the rest. */
.reveal-once [data-scroll]{transition:opacity .55s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.reveal-once [data-scroll="stagger"]>*{transition:opacity .5s ease,transform .62s cubic-bezier(.2,.8,.2,1)}
.reveal-once [data-scroll="parallax"]{transition:transform .4s ease;will-change:auto}

/* ---------- Safe mode ---------- */
/* Only for a device that genuinely cannot run the page: no WebGL at all, under a gigabyte of
   memory, data-saver switched on, "reduce motion" asked for, or a frame rate so low the page
   would be unusable. Everything else — every phone in normal use — gets the full site. */
html[data-motion="safe"] .icon-3d img,
html[data-motion="safe"] .icon-3d:after,
html[data-motion="safe"] .hero-still,
html[data-motion="safe"] .social img,
html[data-motion="safe"] .icon-action img,
html[data-motion="safe"] .creator-photo img,
html[data-motion="safe"] .msg-icon img,
html[data-motion="safe"] .talk-icon img,
html[data-motion="safe"] .cta-float,
html[data-motion="safe"] .cta-3d:after,
html[data-motion="safe"] .hero-caret{animation:none}
html[data-motion="safe"] .service-card{will-change:auto}
html[data-motion="safe"] .service-card:after{display:none}

/* Phones: skip the work of laying out and painting what is still far below the fold. */
@media(max-width:860px){
  .gallery .shot{content-visibility:auto;contain-intrinsic-size:auto 240px}
  .site-footer{content-visibility:auto;contain-intrinsic-size:auto 620px}
}

/* A touch screen has no pointer to tilt a card toward, so that layer is never prepared. */
@media(hover:none){
  .service-card:after{display:none}
}

/* Phone-sized cards: the models sat too large in them, so they are given a little more room
   around the edges. The 3D version is scaled to match in cards3d.js. */
@media(max-width:720px){
  .model-art img{max-width:min(44%,132px);max-height:min(66%,118px)}
  .model-art.icon-wide img{max-width:min(54%,170px)}
  .icon-3d img{width:min(32%,118px)}
  .icon-wide img{width:min(50%,172px)}
}