:root{
  --blue:#1a5cff;
  --blue-dark:#0f44d1;
  --yellow:#ffc814;
  --yellow-dark:#f2b700;
  --navy:#0b1b3f;
  --ink:#0e1530;
  --text:#3b4260;
  --muted:#6b7390;
  --sky:#dcf0fe;
  --cream:#fff9ef;
  --line:#e6eaf3;
  --white:#ffffff;
  --radius:18px;
  --shadow:0 18px 40px -18px rgba(14,21,48,.25);
  --shadow-sm:0 8px 22px -12px rgba(14,21,48,.22);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{font-family:'Poppins',system-ui,sans-serif;color:var(--text);background:var(--white);line-height:1.6;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.container{width:min(1180px,100% - 40px);margin-inline:auto}
.script{font-family:'Kaushan Script',cursive;font-weight:400}
.hand{font-family:'Caveat',cursive}
.eyebrow{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}
.eyebrow.y{color:var(--yellow-dark)}
h1,h2,h3{color:var(--ink);line-height:1.12}
h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:700;margin:.4rem 0 .8rem}
h2 .script{color:var(--blue);font-size:1.15em;display:inline-block}
.squiggle{width:70px;height:10px;color:var(--blue);margin:.2rem 0 1.2rem}
svg.i{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-weight:600;font-size:.9rem;padding:.85rem 1.5rem;border-radius:999px;border:2px solid transparent;cursor:pointer;transition:.25s ease;font-family:inherit}
.btn-blue{background:var(--blue);color:#fff;box-shadow:0 12px 24px -10px rgba(26,92,255,.7)}
.btn-blue:hover{background:var(--blue-dark);transform:translateY(-2px)}
.btn-yellow{background:var(--yellow);color:var(--ink);box-shadow:0 12px 24px -12px rgba(242,183,0,.9)}
.btn-yellow:hover{background:var(--yellow-dark);transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}
.btn-ghost:hover{transform:translateY(-2px)}
.btn-outline{border-color:var(--line);color:var(--ink);background:#fff;width:100%;justify-content:center}
.btn-outline:hover{border-color:var(--ink)}
.play{width:30px;height:30px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;font-size:.7rem}

/* top bar */
.socials{display:flex;gap:.9rem;align-items:center}
.socials a{display:grid;place-items:center;transition:.2s}
.socials svg.i{width:18px;height:18px}
.socials a:hover{color:var(--blue)}

/* nav */
header.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:.3s}
header.nav.scrolled{border-color:var(--line);box-shadow:0 6px 20px -16px rgba(0,0,0,.3)}
.nav .container{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.logo{display:flex;align-items:center}
.logo img{height:44px;width:auto}
.menu{display:flex;align-items:center;gap:2.2rem;font-weight:500;font-size:.92rem;color:var(--ink)}
.menu a{position:relative;padding:.3rem 0}
.menu a::after{content:"";position:absolute;left:0;bottom:-4px;height:2.5px;width:0;background:var(--blue);border-radius:2px;transition:.25s}
.menu a:hover::after,.menu a.active::after{width:100%}
.menu a.btn{padding:.75rem 1.7rem}
.menu a.btn::after{display:none}
.burger{display:none;background:none;border:0;width:42px;height:42px;cursor:pointer;color:var(--ink)}
.burger svg{width:28px;height:28px}

/* hero */
/* --h = rendered photo height, --w = photo width. hero-wide.jpg has the photo shifted 15% (of --w) left of its right edge,
   plus a sky extension above the photo (same height as the photo) so the sky reaches the top of the hero.
   Height is sized so the photo never runs under the text column. Desk band starts at 84.46% of photo height. */
.hero{--L:max(20px,calc((100vw - 1180px) / 2));--h:clamp(360px,calc((100vw - var(--L) - 400px) / 1.826),640px);--w:calc(var(--h) * 1.8915);
  position:relative;overflow:hidden;
  background:url(../images/site/hero-wide.jpg) right calc(var(--w) * -.05) bottom / auto calc(var(--h) * 2) no-repeat,
    linear-gradient(to bottom,#dbf3fd calc(100% - var(--h) * .1554),#bcdff5 calc(100% - var(--h) * .1554))}
.hero .container{position:relative;min-height:max(660px,calc(var(--h) + 120px));display:flex;align-items:stretch}
.hero-copy{position:relative;z-index:3;max-width:520px;padding:calc(2rem + 27px) 0 3rem}
.hero .eyebrow{font-size:1rem;letter-spacing:.1em}
.hero h1{font-size:clamp(2.4rem,4.6vw,3.6rem);font-weight:800;letter-spacing:-.02em;line-height:1.28;margin:33px 0}
.hero h1 .blue{color:var(--blue)}
.hero h1 .shine{display:inline-flex;align-items:flex-start;gap:.3rem;color:var(--yellow);font-size:1.12em;line-height:1.25}
.hero h1 .shine svg{width:.9em;height:.9em;color:var(--yellow);margin-top:-.1em}
.hero p.lead{font-size:1.02rem;color:var(--text);max-width:400px;margin-bottom:2rem}

/* hero entrance: eyebrow tracks in, headline lines rise out of a mask one after another, "and Shine" is
   written left-to-right, the sun pops in and keeps turning, then the paragraph and buttons follow.
   "backwards" fill so hover transforms still work once the entrance has finished. */
.hero .eyebrow{animation:eyebrowIn 1s cubic-bezier(.2,.7,.2,1) .15s backwards}
/* clip-path (not overflow) masks each line so the layout and line spacing stay exactly as before */
.hero h1 .ln{display:block;clip-path:inset(-.15em -.6em -.18em -.3em)}
.hero h1 .ln.shine-ln{clip-path:none}
.hero h1 .ln > :not(.shine){display:inline-block}
.hero h1 .ln > *{animation:lineUp 1s cubic-bezier(.2,.8,.2,1) backwards}
.hero h1 .ln:nth-child(1) > *{animation-delay:.4s}
.hero h1 .ln:nth-child(2) > *{animation-delay:.58s}
.hero h1 .ln.shine-ln > *{animation:write 1.2s cubic-bezier(.65,.05,.3,1) .95s backwards}
.hero h1 .shine svg{transform-box:fill-box;transform-origin:center;
  animation:sunPop .7s cubic-bezier(.3,1.7,.5,1) 2s backwards,sunSpin 14s linear 2.7s infinite}
/* a light shimmer passes over "That Inspire" after it lands, then every few seconds */
.hero h1 .ln > .blue{background:linear-gradient(100deg,var(--blue) 40%,#8fb6ff 50%,var(--blue) 60%) 100% 0 / 250% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:lineUp 1s cubic-bezier(.2,.8,.2,1) .58s backwards,shimmer 6s ease-in-out 1.6s infinite}
.hero p.lead{animation:fadeUp .9s ease 1.35s backwards}
.hero-ctas .btn{animation:btnIn .75s cubic-bezier(.3,1.45,.5,1) backwards}
.hero-ctas .btn:nth-child(1){animation-delay:1.6s}
.hero-ctas .btn:nth-child(2){animation-delay:1.75s}
/* a light sweep across the blue button, and a pulse ring round the play icon */
.hero-ctas .btn-blue{position:relative;overflow:hidden}
.hero-ctas .btn-blue::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);
  animation:sweep 4.5s ease-in-out 2.6s infinite}
.hero-ctas .play{position:relative}
.hero-ctas .play::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--blue);opacity:0;
  animation:ring 2.4s ease-out 2.6s infinite}
.hero-ctas .btn-ghost:hover .play{background:var(--ink);color:#fff}
.play{transition:.25s}
@keyframes eyebrowIn{from{opacity:0;letter-spacing:.5em;filter:blur(4px)}to{opacity:1;letter-spacing:var(--ls,.1em);filter:blur(0)}}
@keyframes lineUp{from{opacity:0;transform:translateY(110%) rotate(2.5deg)}to{opacity:1;transform:none}}
@keyframes write{from{clip-path:inset(-30% 100% -30% -5%)}to{clip-path:inset(-30% -10% -30% -5%)}}
@keyframes sunPop{from{opacity:0;transform:scale(0) rotate(-120deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes sunSpin{to{transform:rotate(360deg)}}
@keyframes shimmer{0%{background-position:100% 0}25%,100%{background-position:0 0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes btnIn{from{opacity:0;transform:translateY(26px) scale(.9)}to{opacity:1;transform:none}}
@keyframes sweep{0%{left:-60%}30%,100%{left:130%}}
@keyframes ring{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.9)}}
/* used by JS for one frame to restart the hero entrance when the visitor comes back to the top */
.hero.replay-reset .hero-copy,.hero.replay-reset .hero-copy *,.hero.replay-reset .together,.hero.replay-reset .together *,
.hero.replay-reset .hero-copy *::after{animation:none!important}
/* "Let's build something amazing together!" is written out after the buttons land, its arrow drawing first */
.together{animation:write 1.6s cubic-bezier(.65,.05,.3,1) 2.15s backwards}
.together svg path{stroke-dasharray:100;stroke-dashoffset:0;animation:draw 1s ease 1.95s backwards}
@media (prefers-reduced-motion:reduce){
  .hero .eyebrow,.hero h1 *,.hero p.lead,.hero-ctas .btn,.hero-ctas .btn-blue::after,.hero-ctas .play::after,
  .together,.together svg path{animation:none!important}
}
/* hero-copy stretches to full hero height, so this lines the buttons' top up with the mug rim (71.3% down the photo) */
.hero-ctas{display:flex;gap:1rem;flex-wrap:wrap;position:absolute;left:0;top:calc(100% - var(--h) * .287)}
.together{display:flex;align-items:center;gap:.6rem;margin-top:1.6rem;font-size:1.575rem;color:var(--ink)}
.together svg{width:46px;height:30px;color:var(--ink)}
.together.in-copy{display:none}
/* sits vertically centred in the photo's desk band, left of the mug */
.together.in-band{position:absolute;margin:0;left:max(20px,calc((100% - 1180px) / 2));bottom:calc(var(--h) * .1554 / 2 + 16px);transform:translateY(50%);z-index:3}
.hero-media{position:absolute;inset:0;z-index:2;pointer-events:none}
.hero-photo{display:contents}   /* only becomes a real box on tablets/phones */
.hero-img{display:none}
/* coffee vapour (vapor.png, from "coffee vapor.png") rising slowly from the mug. Two copies (one mirrored) take turns
   growing up out of the rim and fading, and a slow turbulence filter keeps the wisps gently wavering.
   Mug opening centre is 22.35% across the photo, rim 71.3% down; the vapour's tail sits 48% across vapor.png. */
.steam{position:absolute;z-index:2;pointer-events:none;width:calc(var(--w) * .078);aspect-ratio:480/630;
  right:calc(var(--w) * (1.10 - .2235 - .52 * .078));bottom:calc(var(--h) * .288 - 7px)}
.steam svg{position:absolute;width:0;height:0}
.steam img{position:absolute;inset:0;width:100%;height:100%;opacity:0;transform-origin:48% 100%;
  filter:url(#vapour);animation:vaporRise 10s ease-in-out infinite}
.steam img + img{animation-name:vaporRiseFlip;animation-delay:-5s}
@keyframes vaporRise{
  0%{opacity:0;transform:scale(.7,.55) skewX(0)}
  25%{opacity:.95}
  55%{transform:scale(.92,.9) skewX(3deg)}
  80%{opacity:.55}
  100%{opacity:0;transform:translateY(-10%) scale(1.02,1.08) skewX(-2deg)}
}
@keyframes vaporRiseFlip{
  0%{opacity:0;transform:scale(-.7,.55) skewX(0)}
  25%{opacity:.95}
  55%{transform:scale(-.92,.9) skewX(-3deg)}
  80%{opacity:.55}
  100%{opacity:0;transform:translateY(-10%) scale(-1.02,1.08) skewX(2deg)}
}
/* hanging lamp (lamp-bulb.png, cut from lamp.png) above the 250+ badge; the cord is CSS so it reaches the top of the hero.
   It swings like a pendulum from the top. The cord sits 49% across the png and is 2.2% of its width. */
.lamp{--lw:calc(var(--w) * .1045);position:absolute;top:0;z-index:3;width:var(--lw);
  bottom:calc(var(--h) * .57 - 8px + 7%);right:calc(var(--w) * .15 - 30px + 112px - var(--lw) / 2)}
.lamp-swing{height:100%;display:flex;flex-direction:column;transform-origin:49% 0;animation:swing 5s ease-in-out infinite}
.lamp .cord{flex:1;width:2.2%;min-width:2px;margin-left:calc(49% - 1.1%);background:#000}
.lamp img{display:block;width:100%;height:auto}
@keyframes swing{0%,100%{transform:rotate(4deg)}50%{transform:rotate(-4deg)}}
@media (prefers-reduced-motion:reduce){.steam{display:none}.lamp-swing{animation:none}}
.badge{position:absolute;z-index:4;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:1rem 1.2rem;line-height:1.2}
.badge.exp{right:calc(var(--w) * .33);top:calc(100% - var(--h) * .92)}
.badge.exp strong{display:block;font-size:2rem;color:var(--ink);font-weight:800}
.badge.exp span{font-size:.8rem;color:var(--text)}
.badge.exp .heart{position:absolute;top:-16px;right:-14px;width:40px;height:40px;border-radius:50%;background:var(--blue);display:grid;place-items:center;color:#fff;transform:rotate(12deg)}
.badge.rating{right:calc(var(--w) * .15 - 30px);top:calc(100% - var(--h) * .57);display:flex;align-items:center;gap:.7rem;padding:.7rem 1.1rem}
.badge.rating .ico{width:38px;height:38px;border-radius:12px;background:var(--yellow);display:grid;place-items:center;color:var(--ink)}
.badge.rating strong{display:block;font-size:.95rem;color:var(--ink)}
.badge.rating span{font-size:.72rem;color:var(--muted)}
.float{animation:float 5s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

section{padding:5.5rem 0;scroll-margin-top:70px}

/* work */
.work{background:var(--cream)}
.work-grid{display:grid;grid-template-columns:260px 1fr;gap:2.5rem;align-items:start}
.work-intro p{margin-bottom:1.6rem;max-width:230px}

/* work entrance (runs when the section scrolls into view, .in-view added by JS):
   eyebrow tracks in, the heading rises line by line, the squiggle draws itself, then text and button follow;
   the cards flip up in a staggered wave, their pictures wipe in from the bottom and the details settle last. */
.work .eyebrow{--ls:.08em}
.work h2 .ln{display:inline-block;clip-path:inset(-.15em -.4em -.2em -.2em)}
.work h2 .ln > span{display:inline-block}
.anim-ready .work:not(.in-view) .work-intro > *,.anim-ready .work:not(.in-view) h2 .ln > span,
.anim-ready .work .card:not(.in-view){opacity:0}
.work.in-view .eyebrow{animation:eyebrowIn 1s cubic-bezier(.2,.7,.2,1) .05s backwards}
.work.in-view h2 .ln > span{animation:lineUp .9s cubic-bezier(.2,.8,.2,1) .2s backwards}
.work.in-view h2 .ln + .ln > span{animation-delay:.34s}
.squiggle path{stroke-dasharray:100;stroke-dashoffset:0}
.work.in-view .squiggle path{animation:draw 1s cubic-bezier(.6,.1,.3,1) .6s backwards}
.work.in-view .work-intro p{animation:fadeUp .8s ease .75s backwards}
.work.in-view .work-intro .btn{animation:btnIn .75s cubic-bezier(.3,1.45,.5,1) .95s backwards}
.work .card.in-view{animation:cardIn 1s cubic-bezier(.2,.8,.2,1) calc(.3s + var(--i) * .12s) backwards}
.work .card.in-view .thumb{animation:wipeUp 1.1s cubic-bezier(.7,0,.2,1) calc(.45s + var(--i) * .12s) backwards}
.work .card.in-view .card-body > div{animation:fadeUp .7s ease calc(.85s + var(--i) * .12s) backwards}
.work .card.in-view .arrow-dot{animation:dotPop .6s cubic-bezier(.3,1.7,.5,1) calc(1s + var(--i) * .12s) backwards}
@keyframes cardIn{from{opacity:0;transform:perspective(900px) translateY(60px) rotateX(16deg) scale(.94)}to{opacity:1;transform:none}}
@keyframes wipeUp{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes draw{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes dotPop{from{opacity:0;transform:scale(0) rotate(-90deg)}to{opacity:1;transform:none}}
/* mouse tilt + glare on the cards */
.card{position:relative;transform-style:preserve-3d}
.card.tilt{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-6px);transition:transform .12s ease-out,box-shadow .35s}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;border-radius:inherit;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.35),transparent 55%)}
.card.tilt::after{opacity:1}
@media (prefers-reduced-motion:reduce){
  .work .work-intro > *,.work h2 .ln > span,.work .card,.work .card *,.work .squiggle path{animation:none!important;opacity:1!important}
}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.card{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm);transition:.35s;cursor:pointer;text-align:left;border:0;font:inherit;color:inherit;padding:0;width:100%}
a.card{display:block}
.card.empty{cursor:default}
.card:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.card:hover .thumb img{transform:scale(1.06)}
/* very wide/tall artwork (e.g. logos) is shown whole on white instead of cropped */
.thumb.fit{background:#fff}
.thumb.fit img{object-fit:contain;padding:28px}
.card.empty .arrow-dot{background:#eef1f7;color:var(--muted)}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.thumb{height:200px;position:relative;overflow:hidden}
.card-body{display:flex;align-items:center;justify-content:space-between;padding:1rem 1.2rem}
.card-body h3{font-size:.95rem;font-weight:600}
.card-body p{font-size:.78rem;color:var(--muted)}
.arrow-dot{width:34px;height:34px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;color:var(--ink);transition:.25s;flex-shrink:0}
.card:hover .arrow-dot{transform:rotate(-45deg)}

/* thumbnail art */
.t-brand{background:#3b2417;display:grid;place-items:center}
.t-brand .cupbadge{width:112px;height:112px;border-radius:50%;border:3px solid #f3d9b1;display:grid;place-items:center;color:#f3d9b1;text-align:center;font-family:Georgia,serif;position:relative;transition:.5s}
.card:hover .cupbadge{transform:rotate(-8deg) scale(1.05)}
.t-brand .cupbadge b{font-size:1.5rem;display:block;line-height:1}
.t-brand .cupbadge small{font-size:.5rem;letter-spacing:.3em}
.t-brand .sw{position:absolute;bottom:16px;left:16px;display:flex;gap:6px}
.t-brand .sw i{width:20px;height:20px;border-radius:50%;display:block}
.t-brand .card-mini{position:absolute;right:-12px;top:22px;width:92px;height:56px;background:#f3d9b1;border-radius:6px;transform:rotate(12deg);box-shadow:0 10px 20px rgba(0,0,0,.35);display:grid;place-items:center;font-family:Georgia,serif;color:#3b2417;font-weight:700;font-size:.8rem}
.t-pack{background:linear-gradient(160deg,#e3f2d9,#b9dca0);display:flex;align-items:flex-end;justify-content:center;gap:12px;padding-bottom:22px}
.t-pack .box{border-radius:10px 10px 6px 6px;box-shadow:0 12px 18px -8px rgba(30,70,20,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font-size:.55rem;font-weight:600;letter-spacing:.08em;transition:.4s}
.card:hover .t-pack .box:nth-child(2){transform:translateY(-10px)}
.t-pack .box b{font-family:Georgia,serif;font-size:.95rem;letter-spacing:0}
.t-pack .leaf{width:18px;height:18px;border-radius:0 100%;background:#b9dca0;margin-bottom:5px}
.t-social{background:#1c1340;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px}
.t-social div{border-radius:8px;display:grid;place-items:center;font-weight:800;color:#fff;font-size:.72rem;text-align:center;line-height:1.1;transition:.4s}
.card:hover .t-social div:nth-child(odd){transform:scale(.94)}
.t-broch{background:linear-gradient(160deg,#ffe9dc,#ffd0b5);display:flex;align-items:center;justify-content:center}
.t-broch .panel{width:58px;height:130px;box-shadow:0 12px 20px -10px rgba(120,50,20,.5);padding:12px 8px;display:flex;flex-direction:column;gap:6px;transition:.4s}
.t-broch .panel:nth-child(1){background:#ff7a59;transform:skewY(6deg)}
.t-broch .panel:nth-child(2){background:#fff;transform:skewY(-6deg)}
.t-broch .panel:nth-child(3){background:#2b3a67;transform:skewY(6deg)}
.card:hover .t-broch .panel:nth-child(odd){transform:skewY(0)}
.t-broch i{display:block;height:5px;border-radius:3px;background:rgba(255,255,255,.7)}
.t-broch .panel:nth-child(2) i{background:#e2e6ef}
.t-broch .panel:nth-child(2) i:first-child{height:34px;background:#ffd0b5}
.t-bcard{background:#1d2433;display:grid;place-items:center;perspective:600px}
.t-bcard .bc{position:absolute;width:150px;height:88px;border-radius:8px;box-shadow:0 14px 26px rgba(0,0,0,.45);transition:.5s}
.t-bcard .bc.back{background:#fff;transform:rotate(-10deg) translate(-26px,-10px);padding:14px;display:flex;flex-direction:column;gap:6px;justify-content:flex-end}
.t-bcard .bc.back i{display:block;height:4px;border-radius:2px;background:#d8dce6;width:70%}
.t-bcard .bc.back i:first-child{width:45%;height:6px;background:#1d2433}
.t-bcard .bc.front{background:linear-gradient(135deg,#ffc814,#f2b700);transform:rotate(8deg) translate(30px,16px);display:grid;place-items:center;font-weight:800;font-size:1.6rem;color:#1d2433;font-style:italic;letter-spacing:-.05em}
.card:hover .t-bcard .bc.front{transform:rotate(2deg) translate(34px,8px)}
.t-stat{background:linear-gradient(160deg,#eaf1fb,#d4e2f7);display:grid;place-items:center}
.t-stat .paper{position:absolute;left:50%;top:22px;width:108px;height:150px;margin-left:-84px;background:#fff;border-radius:4px;box-shadow:0 14px 24px -10px rgba(30,50,90,.45);padding:12px;display:flex;flex-direction:column;gap:6px;transform:rotate(-4deg);transition:.5s}
.t-stat .paper b{display:block;height:14px;border-radius:3px;background:var(--blue);width:50%;margin-bottom:6px}
.t-stat .paper i{display:block;height:4px;border-radius:2px;background:#e1e6ef}
.t-stat .env{position:absolute;left:50%;top:92px;width:130px;height:74px;margin-left:-6px;background:#fff;border-radius:4px;box-shadow:0 14px 24px -10px rgba(30,50,90,.45);transform:rotate(6deg);overflow:hidden;transition:.5s}
.t-stat .env::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,transparent 49%,#eef2f8 50%) left/50% 100% no-repeat,linear-gradient(to bottom left,transparent 49%,#eef2f8 50%) right/50% 100% no-repeat}
.t-stat .env::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--yellow)}
.card:hover .t-stat .paper{transform:rotate(-8deg) translateY(-4px)}
.card:hover .t-stat .env{transform:rotate(2deg)}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(8,14,32,.94);display:flex;flex-direction:column;color:#fff;opacity:0;visibility:hidden;transition:.3s}
.lb.open{opacity:1;visibility:visible}
.lb-top{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.4rem}
.lb-top strong{font-size:1.05rem;display:block}
.lb-top span{font-size:.8rem;color:#aab3cf}
.lb-btn{width:46px;height:46px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;display:grid;place-items:center;font-size:1.3rem;transition:.2s;flex-shrink:0}
.lb-btn:hover{background:var(--yellow);color:var(--ink)}
.lb-stage{flex:1;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0 1.4rem;min-height:0}
.lb-stage img{max-width:calc(100% - 140px);max-height:100%;object-fit:contain;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.5);margin:auto;background:#fff}
.lb-stage img.small{padding:clamp(16px,4vw,48px)}
.lb-thumbs{display:flex;gap:.6rem;overflow-x:auto;padding:1rem 1.4rem 1.2rem;justify-content:safe center}
.lb-thumbs button{flex:0 0 auto;width:72px;height:54px;border-radius:6px;overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;opacity:.55;transition:.2s;background:#222}
.lb-thumbs button.on{border-color:var(--yellow);opacity:1}
.lb-thumbs img{width:100%;height:100%;object-fit:cover}

/* services */
.services{background:linear-gradient(180deg,#eef6ff,#e3f0fe)}
.svc-grid{display:grid;grid-template-columns:280px 1fr;gap:2.5rem;align-items:center}
.svc-intro p{max-width:240px}
.svc-intro .curl{width:60px;margin:1.2rem 0 0 auto;color:var(--ink)}
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;align-items:end}
.plan{background:#fff;border-radius:var(--radius);padding:1.8rem 1.5rem;box-shadow:var(--shadow-sm);position:relative;transition:.3s}
.plan:hover{transform:translateY(-6px)}
.plan.popular{padding-top:1.8rem;border:2px solid var(--yellow)}
.plan .tag{position:absolute;left:-2px;right:-2px;top:-34px;background:var(--yellow);border-radius:14px 14px 0 0;text-align:center;font-size:.7rem;font-weight:700;letter-spacing:.08em;padding:.5rem;color:var(--ink)}
.plan-head{display:flex;justify-content:space-between;align-items:center}
.plan-head h3{font-size:.8rem;letter-spacing:.08em;color:var(--blue)}
.plan.popular h3{color:var(--yellow-dark)}
.plan-head .ic{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--blue);color:#fff}
.plan.popular .ic{background:var(--yellow);color:var(--ink)}
.price{font-size:1.9rem;font-weight:700;color:var(--ink);margin-top:.8rem}
.price small{font-size:.8rem;font-weight:500;color:var(--muted)}
.plan .desc{font-size:.8rem;color:var(--muted);margin-bottom:1.1rem}
.plan ul{font-size:.82rem;color:var(--ink);display:grid;gap:.45rem;margin-bottom:1.6rem}
.plan li{display:flex;gap:.5rem;align-items:center}
.plan li svg{color:var(--blue)}
.plan.popular .btn-outline{background:var(--yellow);border-color:var(--yellow)}

/* tools strip */
.tools{padding:2.4rem 0;border-bottom:1px solid var(--line)}
.tools .container{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap}
.tools .label{font-size:.75rem;letter-spacing:.1em;font-weight:600;color:var(--muted);text-transform:uppercase}
.tool{display:flex;align-items:center;gap:.6rem;font-weight:600;color:var(--ink);font-size:1rem;opacity:.85;transition:.2s}
.tool:hover{opacity:1;transform:translateY(-2px)}
.tool b{width:36px;height:36px;border-radius:8px;display:grid;place-items:center;font-size:.9rem}

/* process */
.process-head{text-align:center;max-width:560px;margin:0 auto 3rem}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;position:relative}
.steps::before{content:"";position:absolute;top:36px;left:12%;right:12%;border-top:2px dashed #c9d6f2;z-index:0}
.step{text-align:center;position:relative;z-index:1;padding:0 .6rem}
.step .num{width:72px;height:72px;border-radius:22px;margin:0 auto 1.1rem;display:grid;place-items:center;background:#fff;box-shadow:var(--shadow-sm);color:var(--blue);font-size:1.6rem;transition:.3s}
.step:nth-child(even) .num{color:var(--yellow-dark)}
.step:hover .num{transform:rotate(-6deg) scale(1.06)}
.step h3{font-size:1.02rem;margin-bottom:.4rem}
.step p{font-size:.85rem;color:var(--muted)}

/* testimonials */
.testi{background:var(--cream)}
.testi-grid{display:grid;grid-template-columns:280px 1fr auto;gap:2rem;align-items:center}
.testi .heart-out{width:40px;color:var(--yellow);vertical-align:middle;margin-left:.3rem}
.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:1.3rem}
.quote{background:#fff;border-radius:var(--radius);padding:1.6rem;box-shadow:var(--shadow-sm);transition:opacity .35s, transform .35s}
.quote.fade{opacity:0;transform:translateY(10px)}
.quote .qm{font-size:3.2rem;line-height:.8;color:var(--blue);font-family:Georgia,serif;font-weight:700}
.quote p{font-size:.92rem;color:var(--ink);margin:.6rem 0 1.2rem;min-height:84px}
.who{display:flex;align-items:center;gap:.8rem}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:700;font-size:.9rem}
.who strong{display:block;font-size:.85rem;color:var(--ink)}
.who span{font-size:.74rem;color:var(--muted)}
.stars{color:var(--yellow);font-size:.85rem;letter-spacing:2px}
.arrows{display:flex;flex-direction:column;gap:.7rem}
.arrows button{width:42px;height:42px;border-radius:50%;background:#fff;border:1px solid var(--line);cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:.2s}
.arrows button:hover{background:var(--blue);color:#fff;border-color:var(--blue)}

/* contact */
.contact{background:var(--blue);color:#fff;padding:3.5rem 0;position:relative;overflow:hidden}
.contact .container{display:grid;grid-template-columns:260px 1fr;gap:2.5rem;align-items:center;position:relative;z-index:1}
.envelope{position:relative;width:220px;height:170px}
.envelope .env{position:absolute;inset:auto 0 0 0;height:110px;background:var(--yellow);border-radius:12px}
.envelope .env::before{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent 49.5%,#f2b700 50%) left/50% 100% no-repeat,linear-gradient(to top left,transparent 49.5%,#f2b700 50%) right/50% 100% no-repeat;border-radius:12px;opacity:.55}
.envelope .note{position:absolute;left:28px;top:0;width:160px;height:130px;background:#fff;border-radius:6px;transform:rotate(-6deg);display:grid;place-items:center;text-align:center;color:var(--ink);font-size:1.45rem;line-height:1.05;box-shadow:0 10px 24px rgba(0,0,0,.2);padding:.8rem}
.envelope .hearts{position:absolute;right:6px;bottom:4px;display:flex;gap:2px;color:#fff}
.contact h2{color:#fff;text-transform:uppercase;letter-spacing:.02em;font-size:clamp(1.5rem,2.6vw,2rem);margin:0 0 .3rem}
.contact p{opacity:.9;font-size:.92rem;margin-bottom:1.4rem}
/* row 1: name, email, phone - row 2: message (2 columns) + send button */
.form{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.8rem}
.form .msg{grid-column:span 2}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}   /* spam trap, hidden from people */
.form button[disabled]{opacity:.7;cursor:wait}
.form input{font-family:inherit;border:0;border-radius:999px;padding:.85rem 1.2rem;font-size:.85rem;outline:none;color:var(--ink);min-width:0}
.form input:focus{box-shadow:0 0 0 3px rgba(255,200,20,.8)}
.form-note{font-size:.8rem;margin-top:.7rem;min-height:1.2em;opacity:.95}
.doodle{position:absolute;color:rgba(255,255,255,.35)}

/* footer */
footer{background:var(--navy);color:#c5cbe0;padding:4rem 0 1.4rem;font-size:.87rem}
.foot{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr auto;gap:2rem}
footer .logo img{height:48px}
footer .about{margin:1.1rem 0 1.3rem;max-width:250px}
footer h4{color:var(--yellow);font-size:.8rem;letter-spacing:.1em;margin-bottom:1rem}
footer ul{display:grid;gap:.5rem}
footer ul a:hover{color:#fff}
.fsocial{display:flex;gap:.55rem}
.fsocial a{width:42px;height:42px;border-radius:50%;border:1px solid #3a4a74;display:grid;place-items:center;transition:.2s}
.fsocial svg.i{width:20px;height:20px}
.fsocial a:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.contact-list li{display:flex;gap:.6rem;align-items:center}
.contact-list svg{color:var(--yellow)}
.stamp{width:130px;height:130px;border-radius:50%;border:2px solid var(--blue);display:grid;place-items:center;text-align:center;color:#fff;font-size:1.25rem;line-height:1.05;align-self:center;position:relative}
.stamp .hand{transform:rotate(-6deg)}
.stamp::after{content:"♥";position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);color:var(--yellow);font-size:1.3rem}
.copy{border-top:1px solid #22325b;margin-top:3rem;padding-top:1.2rem;display:flex;justify-content:space-between;gap:1rem;font-size:.78rem;flex-wrap:wrap}
.copy div{display:flex;gap:1.5rem}

/* clients */
.clients{padding:4.5rem 0;background:#fff}
.clients-head{text-align:center;margin-bottom:2.4rem}
/* the strip is as wide as the page content (1180px), so six 180px logos + 20px gaps fill it exactly */
.marquee{width:min(1180px,100% - 40px);margin:0 auto;overflow:hidden;padding:12px 0 18px;display:grid;gap:1.9rem;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marquee-track{display:flex;gap:20px;width:max-content;animation:marquee var(--dur,30s) linear infinite}
.marquee-track.rev{animation-direction:reverse}
.marquee-row:hover .marquee-track{animation-play-state:paused}
/* the three rows slide in from alternating sides */
.marquee.in-view{animation:none}
.anim-ready .marquee:not(.in-view) .marquee-row{opacity:0}
.marquee.in-view .marquee-row{animation:rowInL 1s cubic-bezier(.2,.8,.2,1) calc(.3s + var(--r) * .18s) backwards}
.marquee.in-view .marquee-row:nth-child(2){animation-name:rowInR}
@keyframes rowInL{from{opacity:0;transform:translateX(-80px)}to{opacity:1;transform:none}}
@keyframes rowInR{from{opacity:0;transform:translateX(80px)}to{opacity:1;transform:none}}
/* default tint = theme blue, 95% light; each real logo gets its own main colour at 95% light (set inline from portfolio-data.js) */
.logo-box{flex:0 0 auto;width:180px;height:96px;border-radius:16px;background:#f4f7ff;border:0;display:grid;place-items:center;padding:8px;box-shadow:var(--shadow-sm);transition:.3s}
.logo-box img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .3s}
.logo-box:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.logo-box:hover img{transform:scale(1.06)}
.logo-box.ph{border:2px dashed #d6dcea;box-shadow:none;color:#aeb7c9;font-size:.78rem;font-weight:600;gap:.3rem;text-align:center;line-height:1.2}
.logo-box.ph svg{width:26px;height:26px;display:block;margin:0 auto .3rem}
@keyframes marquee{to{transform:translateX(-50%)}}

/* logo wall (CLIENT_LAYOUT = 'wall'): three brick rows (row lengths n, n-1, rest) on wide screens, narrower screens
   alternate full and one-shorter rows. No boxes behind the logos; logos in full colour. JS sizes every logo to the
   same visual area (square/round logos get a little extra), so none look small next to the others.
   Flat and sharp (no shadows or 3D); under the mouse a logo grows to 1.7x above its neighbours. */
.logo-wall{--tw:100px;--th:72px;--gap:40px;--slot-gap:26px;--rg:58px;width:min(1280px,100% - 40px);margin:0 auto;padding-top:2.2rem;display:grid;row-gap:var(--rg)}
/* "View more clients" links to the Logos and Brand Identity page, which shows every logo */
.wall-toggle{justify-self:center;display:inline-flex;align-items:center;gap:.55rem;margin-top:-.4rem;border:0;cursor:pointer;
  background:#fff;color:var(--ink);font:600 .85rem 'Poppins',sans-serif;padding:.65rem 1.3rem;border-radius:999px;box-shadow:var(--shadow-sm);transition:.25s}
.wall-toggle:hover{background:var(--yellow);transform:translateY(-2px)}
.wall-toggle svg{width:16px;height:16px;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.wall-row{display:flex;justify-content:center;gap:var(--gap)}
/* flex (not grid) so a logo taller than its slot still sits centred on the row line */
.wall-tile{flex:0 0 auto;height:var(--th);display:flex;align-items:center;justify-content:center;position:relative}
.wall-logo{display:flex;align-items:center;justify-content:center}
.wall-tile img{max-width:calc(var(--tw) * 1.22);max-height:var(--th);object-fit:contain;transition:transform .35s cubic-bezier(.3,1.3,.5,1),opacity .3s ease}
.wall-tile:hover{z-index:5}
.wall-tile:hover img{transform:scale(1.7)}
/* while one logo is enlarged, all the others fade back so it stands clear of them (.dim set by JS) */
.logo-wall.dim .wall-tile:not(:hover) img{opacity:.18}
.anim-ready .logo-wall:not(.in-view) .wall-tile{opacity:0}
.logo-wall.in-view .wall-tile{animation:tileIn .6s cubic-bezier(.3,1.4,.5,1) calc(.25s + var(--k) * .035s) backwards}
@keyframes tileIn{from{opacity:0;transform:translateY(22px) scale(.9)}to{opacity:1;transform:none}}

/* ---------- scroll animations (everything below the work section) ----------
   JS adds .anim-ready to <html> (only when motion is allowed) and .in-view to each .sa / .sa-group element
   as it reaches the screen. --d = delay. Keyframes eyebrowIn, lineUp, write, fadeUp, btnIn, cardIn, draw,
   dotPop are defined with the hero/work animations above. */
.anim-ready .sa:not(.in-view){opacity:0}
.sa.in-view{animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards}
.sa-eyebrow.in-view{animation:eyebrowIn 1s cubic-bezier(.2,.7,.2,1) var(--d,0s) backwards}
.eyebrow.y{--ls:.08em}
.sa-pop.in-view{animation:btnIn .75s cubic-bezier(.3,1.45,.5,1) var(--d,0s) backwards}
.sa-card.in-view{animation:cardIn 1s cubic-bezier(.2,.8,.2,1) var(--d,0s) backwards}
.sa-draw.in-view{animation:none}
.sa-draw path{stroke-dasharray:100;stroke-dashoffset:0}
.sa-draw.in-view path{animation:draw 1.1s cubic-bezier(.6,.1,.3,1) var(--d,0s) backwards}
.sa-lines.in-view{animation:none}
.sa-lines .ln{display:inline-block;clip-path:inset(-.15em -.4em -.25em -.2em)}
.sa-lines .ln > *{display:inline-block}
.sa-lines.in-view .ln > *{animation:lineUp .9s cubic-bezier(.2,.8,.2,1) calc(var(--d,0s) + .1s) backwards}
.sa-lines.in-view .ln:nth-of-type(2) > *{animation-delay:calc(var(--d,0s) + .25s)}
.sa-lines .ln.write{clip-path:none}
.sa-lines.in-view .ln.write > *{animation:write 1.1s cubic-bezier(.65,.05,.3,1) calc(var(--d,0s) + .4s) backwards}

/* services: price counts up (JS), feature ticks slide in, icon + tag pop, popular plan glows */
.plan.in-view .ic{animation:dotPop .6s cubic-bezier(.3,1.7,.5,1) calc(var(--d) + .45s) backwards}
.plan.in-view .tag{animation:tagDrop .6s cubic-bezier(.3,1.5,.5,1) calc(var(--d) + .6s) backwards}
.plan.in-view li{animation:fadeLeft .5s ease calc(var(--d) + .55s + var(--li,0) * .08s) backwards}
.plan.in-view .btn{animation:btnIn .7s cubic-bezier(.3,1.45,.5,1) calc(var(--d) + .95s) backwards}
.plan.popular.in-view{animation:cardIn 1s cubic-bezier(.2,.8,.2,1) var(--d) backwards,glow 3s ease-in-out calc(var(--d) + 1.4s) infinite}
@keyframes tagDrop{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes fadeLeft{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
@keyframes glow{0%,100%{box-shadow:var(--shadow-sm),0 0 0 0 rgba(255,200,20,0)}50%{box-shadow:var(--shadow-sm),0 0 0 8px rgba(255,200,20,.22)}}
.plan.tilt{transform:perspective(900px) rotateX(var(--rx,0)) rotateY(var(--ry,0)) translateY(-6px);transition:transform .12s ease-out}
.plan::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;border-radius:inherit;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.5),transparent 55%)}
.plan.tilt::after{opacity:1}

/* tools: pop in, then the icons bob gently; hover gives a little wiggle */
.tool b{animation:bob 3.2s ease-in-out var(--bd,0s) infinite}
.tool:hover b{animation:wiggle .6s ease}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg) scale(1.12)}75%{transform:rotate(10deg) scale(1.12)}}

/* process: dashed line draws across, each icon pops and draws itself, text follows; then a pulse walks the steps */
.anim-ready .steps:not(.in-view) .step{opacity:0}
.anim-ready .steps::before{transform:scaleX(0);transform-origin:left}
.steps.in-view::before{transform:scaleX(1);transition:transform 1.8s cubic-bezier(.6,.1,.3,1) .2s}
.steps.in-view .step .num{animation:numPop .7s cubic-bezier(.3,1.5,.5,1) calc(.2s + var(--s) * .3s) backwards}
.steps.in-view .step .num svg{animation:drawIcon 1.2s ease calc(.4s + var(--s) * .3s) backwards}
.steps.in-view .step h3{animation:fadeUp .7s ease calc(.55s + var(--s) * .3s) backwards}
.steps.in-view .step p{animation:fadeUp .7s ease calc(.65s + var(--s) * .3s) backwards}
.step .num{position:relative}
.step .num::after{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid currentColor;opacity:0}
.steps.in-view .step .num::after{animation:stepPulse 4s ease-out calc(2.2s + var(--s) * 1s) infinite}
@keyframes numPop{from{opacity:0;transform:scale(.3) rotate(-25deg)}to{opacity:1;transform:none}}
@keyframes drawIcon{from{stroke-dasharray:80;stroke-dashoffset:80}to{stroke-dasharray:80;stroke-dashoffset:0}}
@keyframes stepPulse{0%{opacity:.7;transform:scale(1)}25%,100%{opacity:0;transform:scale(1.45)}}

/* testimonials: heart pops then keeps beating; quote cards flip up, the quote mark and stars pop */
.sa-lines.in-view .heart-out{animation:dotPop .6s cubic-bezier(.3,1.7,.5,1) calc(var(--d) + 1.3s) backwards,heartbeat 1.8s ease-in-out calc(var(--d) + 2s) infinite}
@keyframes heartbeat{0%,45%,100%{transform:scale(1)}12%{transform:scale(1.25)}24%{transform:scale(1)}34%{transform:scale(1.16)}}
.anim-ready .quotes:not(.in-view) .quote{opacity:0}
.quotes.in-view .quote{animation:cardIn .9s cubic-bezier(.2,.8,.2,1) calc(.15s + var(--q) * .15s) backwards}
.quotes.in-view .quote .qm{animation:qmPop .7s cubic-bezier(.3,1.6,.5,1) calc(.45s + var(--q) * .15s) backwards}
.quotes.in-view .quote p{animation:fadeUp .7s ease calc(.55s + var(--q) * .15s) backwards}
.quotes.in-view .stars span{display:inline-block;animation:dotPop .45s cubic-bezier(.3,1.8,.5,1) calc(.75s + var(--q) * .15s + var(--st) * .08s) backwards}
.quote .qm{display:inline-block}
@keyframes qmPop{from{opacity:0;transform:scale(0) rotate(-30deg)}to{opacity:1;transform:none}}

/* contact: note rises out of the envelope and floats, hearts beat, fields slide in, button shines */
.anim-ready .envelope:not(.in-view) > *,.anim-ready .form:not(.in-view) > *{opacity:0}
.envelope.in-view .env{animation:fadeUp .7s ease backwards}
.envelope.in-view .note{animation:noteUp 1s cubic-bezier(.2,.8,.2,1) .3s backwards,noteFloat 4.5s ease-in-out 1.4s infinite}
.envelope.in-view .hearts{animation:dotPop .6s cubic-bezier(.3,1.7,.5,1) .9s backwards,heartbeat 1.8s ease-in-out 1.6s infinite}
@keyframes noteUp{from{opacity:0;transform:translateY(60px) rotate(4deg)}to{opacity:1;transform:rotate(-6deg)}}
@keyframes noteFloat{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(-3deg) translateY(-7px)}}
.form.in-view > *{animation:slideIn .7s cubic-bezier(.2,.8,.2,1) calc(.45s + var(--f) * .1s) backwards}
.form.in-view button{animation:btnIn .75s cubic-bezier(.3,1.45,.5,1) calc(.45s + var(--f) * .1s) backwards}
@keyframes slideIn{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:none}}
.contact .btn-yellow{position:relative;overflow:hidden}
.contact .btn-yellow::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg);animation:sweep 4.5s ease-in-out 2s infinite}

/* footer stamp: spins in, the words write themselves, a dashed ring keeps turning and the heart beats */
.stamp::before{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px dashed rgba(255,200,20,.55);animation:spin 18s linear infinite}
.stamp{transition:transform .4s}
.stamp:hover{transform:scale(1.06) rotate(-4deg)}
.sa-stamp.in-view{animation:stampIn 1s cubic-bezier(.3,1.4,.5,1) var(--d,0s) backwards}
.sa-stamp.in-view .hand{animation:write 1.5s cubic-bezier(.65,.05,.3,1) calc(var(--d,0s) + .6s) backwards}
.sa-stamp.in-view::after{animation:dotPopX .6s cubic-bezier(.3,1.7,.5,1) calc(var(--d,0s) + 1.8s) backwards,heartbeatX 1.8s ease-in-out calc(var(--d,0s) + 2.4s) infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes stampIn{from{opacity:0;transform:scale(.4) rotate(-45deg)}to{opacity:1;transform:none}}
@keyframes dotPopX{from{opacity:0;transform:translateX(-50%) scale(0)}to{opacity:1;transform:translateX(-50%) scale(1)}}
@keyframes heartbeatX{0%,45%,100%{transform:translateX(-50%) scale(1)}12%{transform:translateX(-50%) scale(1.3)}24%{transform:translateX(-50%) scale(1)}34%{transform:translateX(-50%) scale(1.2)}}

@media (prefers-reduced-motion:reduce){
  .stamp::before,.stamp::after,.stamp .hand,
  .marquee-track,.tool b,.steps .num::after,.heart-out,.envelope *,.contact .btn-yellow::after,.plan{animation:none!important}
}

/* reveal */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}.float{animation:none}}

/* responsive */
@media (max-width:1080px){
  .menu{gap:1.4rem}
  .work-grid,.svc-grid{grid-template-columns:1fr}
  .work-intro p,.svc-intro p{max-width:520px}
  .svc-intro .curl{display:none}
  .plans{margin-top:1.5rem}
  .foot{grid-template-columns:1fr 1fr 1fr}
  .stamp{display:none}
  .testi-grid{grid-template-columns:1fr}
  .arrows{flex-direction:row}
  /* hero stacks: text on top, full photo below */
  .hero{background:#dbf3fd}
  .hero .container{min-height:0}
  .hero-copy{max-width:560px;padding:2rem 0 1.5rem}
  .together.in-copy{display:flex}
  .hero-ctas{position:static}
  .hero h1{margin:.5rem 0 1.2rem}
  .together.in-band{display:none}
  /* badges sit in one row above the photo. The photo box (.hero-photo) is edge to edge and crops the photo's empty
     sky: 12% off the left, 6% off the right, so the photo is 122% of the box, shifted left by 14.64% of the box.
     Steam and lamp are placed inside that box: box x = photo x * 1.22 - 14.64%, and % heights match the photo. */
  .hero-media{position:relative;inset:auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:6px 20px 0}
  .hero-photo{display:block;position:relative;overflow:hidden;flex:0 0 auto;width:calc(100% + 40px);margin:10px -20px 0}
  .hero-img{display:block;position:relative;z-index:1;max-width:none;width:122%;height:auto;margin-left:-14.64%}
  .lamp{top:0;bottom:60%;width:13%;right:6%}
  .steam{z-index:2;right:auto;left:8%;width:9.5%;bottom:calc(28.8% - 6px)}
  .badge.exp,.badge.rating{position:relative;top:auto;right:auto;left:auto;display:flex;align-items:center;gap:.6rem;padding:.6rem 1.1rem}
  .badge.exp{order:-1}
  .badge.rating{order:-1}
  .badge.exp strong{font-size:1.5rem}
  .badge.exp br{display:none}
  .badge.exp .heart{width:28px;height:28px;top:-10px;right:-10px}
}
@media (max-width:900px){
  .burger{display:block}
  header.nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fff}
  .menu{position:fixed;inset:0 0 0 auto;width:min(320px,85%);background:#fff;flex-direction:column;align-items:flex-start;padding:6rem 2rem 2rem;gap:1.4rem;transform:translateX(100%);visibility:hidden;transition:.35s;box-shadow:-20px 0 40px rgba(0,0,0,.15);z-index:60}
  .menu.open{transform:none;visibility:visible}
  .burger{position:relative;z-index:70}
  .cards{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;row-gap:2.4rem}
  .steps::before{display:none}
  .contact .container{grid-template-columns:1fr}
  .envelope{display:none}
  .form{grid-template-columns:1fr 1fr}
  .form input[type=tel],.form .msg,.form button{grid-column:1/-1}
}
@media (max-width:600px){
  .container{width:calc(100% - 32px)}
  section{padding:4rem 0}
  .cards,.plans,.quotes{grid-template-columns:1fr}
  .logo-box{width:140px;height:80px;padding:14px}
  .logo-wall{--tw:72px;--th:52px;--gap:18px;--slot-gap:14px;--rg:38px;width:calc(100% - 32px);padding-top:1.2rem}
  .clients{padding:3.5rem 0}
  .lb-stage{position:relative;padding:0 .6rem}
  .lb-stage img{max-width:100%}
  .lb-stage .lb-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:2;background:rgba(0,0,0,.45)}
  #lbPrev{left:10px} #lbNext{right:10px}
  .plan.popular{margin-top:2.2rem}
  .form{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr 1fr}
  .foot > div:first-child{grid-column:1/-1}
  .tools .container{justify-content:center}
  .tools .label{width:100%;text-align:center}
  .logo img{height:34px}
  .hero-media{padding:4px 16px 0;gap:8px}
  .hero-photo{width:calc(100% + 32px);margin:10px -16px 0}
  .badge.exp,.badge.rating{padding:.45rem .7rem;gap:.45rem;border-radius:14px}
  .badge.rating span{display:none}
  .badge.rating .ico{width:28px;height:28px;border-radius:9px}
  .badge.rating strong{font-size:.85rem}
  .badge.exp strong{font-size:1.1rem}
  .badge.exp span{font-size:.66rem}
  .badge.exp .heart{width:24px;height:24px;top:-9px;right:-9px}
  /* phone hero: tighter text, both buttons side by side, shorter handwritten line */
  .hero-copy{padding:1.6rem 0 1rem}
  .hero .eyebrow{font-size:.85rem}
  .hero h1{margin:.4rem 0 1rem;font-size:clamp(1.9rem,9.2vw,2.4rem)}   /* "Designing Brands" stays on one line */
  .hero p.lead{font-size:.95rem;margin-bottom:1.4rem}
  .hero-ctas{flex-wrap:nowrap;gap:.6rem}
  .hero-ctas .btn{padding:.75rem 1.1rem;font-size:.85rem;gap:.45rem;white-space:nowrap}
  .hero-ctas .play{width:26px;height:26px}
  .together{font-size:1.25rem;margin-top:1.2rem;gap:.45rem}
  .together svg{width:36px;height:24px}

  /* PHONE HERO: heading on top (lamp + 250+ badge hanging on its right), then the photo edge to edge,
     "Let's build ...", the two buttons side by side and the paragraph.
     The wrappers are display:contents so every piece becomes a cell of one grid on .hero.
     The photo cell shows the photo from 16% to 86% across (object-fit crop), so photo x% -> cell (x - 16) / 70. */
  .hero{display:grid;grid-template-columns:16px minmax(0,1fr) 57vw;
    grid-template-areas:". eye eye" ". h1 h1" "photo photo photo" ". tog tog" ". cta cta" ". lead lead";background:#dbf3fd}
  .hero .container,.hero-copy,.hero-media,.hero-photo{display:contents}
  .hero .eyebrow{grid-area:eye;font-size:.72rem;margin:1.3rem 16px 0 0}
  .hero h1{grid-area:h1;font-size:6.4vw;line-height:1.3;margin:.45rem 16px calc(.9rem - 20px) 0}
  .hero-ctas{grid-area:cta;position:static;flex-direction:row;flex-wrap:nowrap;align-items:center;gap:.6rem;margin:calc(1.1rem - 5px) 16px 0 0}
  .hero-ctas .btn{padding:.7rem 1rem;font-size:.82rem;gap:.45rem;white-space:nowrap}
  .hero p.lead{grid-area:lead;font-size:.85rem;line-height:1.6;max-width:none;margin:calc(1.1rem - 3px) 16px 2rem 0}
  .together.in-copy{grid-area:tog;display:flex;margin:calc(1rem - 10px) 16px 0 0;font-size:1.15rem}
  .together.in-band{display:none}
  .hero-img{grid-area:photo;display:block;position:relative;z-index:1;width:100%;max-width:none;height:auto;margin:0;
    aspect-ratio:1.324;object-fit:cover;object-position:53% 0}
  /* mug opening 22.35% across, rim 71.3% down: % margins are of the cell width; photo height = width / 1.324 */
  .steam{grid-area:photo;position:relative;z-index:2;justify-self:start;align-self:end;right:auto;bottom:auto;
    left:auto;width:calc(11.14% + 5px);margin:0 0 calc(21.7% - 4px) calc(4.8% - 2.5px)}
  /* 15+ beside the head, top right of the photo */
  .badge.exp{grid-area:photo;position:relative;z-index:4;justify-self:end;align-self:start;top:auto;right:auto;left:auto;
    margin:calc(14% + 20px) 16px 0 0;display:flex;padding:.4rem .6rem;gap:.4rem;border-radius:12px;width:122px;justify-content:center}
  .badge.exp br{display:inline}
  .badge.exp strong{font-size:1.2rem}
  .badge.exp span{font-size:.66rem}
  .badge.exp .heart{width:22px;height:22px;top:-8px;right:-8px}
  /* 250+ on the right at the bottom of the heading; the lamp hangs from the top of the hero down to it */
  .badge.rating{grid-row:1 / 3;grid-column:3;position:relative;z-index:4;justify-self:end;align-self:end;top:auto;right:auto;left:auto;
    margin:0 16px calc(-1.6rem - 20px) 0;padding:.4rem .5rem;gap:.35rem;border-radius:12px;width:122px;justify-content:center}
  .badge.rating .ico{width:22px;height:22px;border-radius:7px;flex-shrink:0}
  .badge.rating strong{font-size:.68rem;white-space:nowrap}
  .lamp{grid-row:1 / 3;grid-column:3;position:relative;z-index:3;justify-self:end;align-self:stretch;top:auto;bottom:auto;right:auto;
    --lw:15vw;width:var(--lw);margin:0 calc(77px - var(--lw) / 2) calc(-1.6rem - 20px + 42px) 0}
  .work-intro p{font-size:.85rem;line-height:1.6}

  /* PHONE "Selected Work": section starts higher, cards two per row:
     Logos | Packaging, Brochures | Social Media, Business Card | Office Stationery */
  .work{padding-top:calc(2.2rem - 10px)}
  /* "Start a Project": as wide as one card (the Logos card under it) and styled like "View My Work" */
  .work-intro .btn{width:calc((100% - .8rem) / 2);justify-content:center;padding:.7rem .6rem;font-size:.82rem;
    background:var(--blue);color:#fff;box-shadow:0 12px 24px -10px rgba(26,92,255,.7)}
  .work-intro .btn:hover{background:var(--blue-dark)}

  /* PHONE "Services & Packages": starts higher like Selected Work, and the three packages sit side by side */
  .services{padding-top:calc(2.2rem - 10px)}
  .svc-grid{gap:1.2rem}
  .svc-intro p{font-size:.85rem;line-height:1.6}
  /* PHONE "My Process": starts higher; two steps per row, each step's text on three lines */
  #process{padding-top:calc(2.2rem - 10px)}
  .process-head{margin-bottom:1.8rem}
  .process-head p{font-size:.85rem;line-height:1.6}
  .steps{gap:1.6rem .8rem}
  .step{padding:0}
  .step .num{width:60px;height:60px;border-radius:18px;font-size:1.35rem;margin-bottom:.8rem}
  .step h3{font-size:.92rem}
  .step p{font-size:.78rem;line-height:1.5;max-width:132px;margin:0 auto}

  /* PHONE "Our Clients": starts higher; logos in rows of 3 / 2 / 3 with ‹ › arrows beside the middle row (main.js).
     Tapping a logo enlarges it and fades the others, like hovering on a computer. */
  .clients{padding-top:calc(2.2rem - 35px)}
  .clients-head{margin-bottom:1rem}
  .logo-wall{--th:58px;--rg:26px}
  .wall-pager{position:relative}
  .wall-rows{display:grid;row-gap:var(--rg)}
  .wall-arrow{position:absolute;top:50%;z-index:6;margin-top:-14px;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);
    display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-sm);transition:.2s}
  .wall-arrow:active{background:var(--blue);color:#fff;border-color:var(--blue)}
  .wall-arrow svg{width:14px;height:14px}
  .wall-arrow.prev svg{transform:rotate(180deg)}
  .wall-arrow.prev{left:0}
  .wall-arrow.next{right:0}
  .wall-tile:hover img{transform:none}
  .logo-wall.dim .wall-tile:not(:hover) img{opacity:1}
  .wall-tile.active{z-index:5}
  .wall-tile.active img{transform:scale(1.5)}
  .logo-wall.tapped .wall-tile:not(.active) img{opacity:.18}

  /* PHONE "Happy Clients": starts higher; the two reviews sit side by side */
  .testi{padding-top:calc(2.2rem - 10px)}
  .testi-grid{gap:1.2rem}
  .quotes{grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
  .quote{padding:.9rem .75rem;border-radius:14px;display:flex;flex-direction:column}
  .quote .qm{font-size:2.2rem}
  .quote p{font-size:.72rem;line-height:1.5;margin:.4rem 0 .8rem;min-height:0;flex:1}
  .who{gap:.45rem;align-items:flex-start}
  .avatar{width:30px;height:30px;font-size:.66rem;flex-shrink:0}
  .who strong{font-size:.7rem}
  .who span{font-size:.6rem;line-height:1.3;display:block}
  .stars{font-size:.66rem;letter-spacing:1px}
  .arrows{justify-content:center}

  /* only Starter and Growth on phones (Premium is hidden), side by side */
  .plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;align-items:stretch;margin-top:2.6rem}
  .plans .plan:nth-child(3){display:none}
  .plan,.plan.popular{display:flex;flex-direction:column;padding:1rem .8rem .9rem;border-radius:14px;margin-top:0}
  .plan .tag{top:-28px;font-size:.6rem;letter-spacing:.06em;padding:.4rem .3rem;border-radius:12px 12px 0 0}
  .plan-head h3{font-size:.72rem;letter-spacing:.06em}
  .plan-head .ic{width:28px;height:28px}
  .plan-head .ic svg{width:14px;height:14px}
  .price{font-size:1.3rem;margin-top:.6rem}
  .plan .desc{font-size:.7rem;line-height:1.4;margin-bottom:.8rem}
  .plan ul{font-size:.72rem;line-height:1.35;gap:.5rem;margin-bottom:1rem;flex:1;align-content:start}
  .plan li{gap:.35rem;align-items:flex-start}
  .plan li svg{width:11px;height:11px;margin-top:2px}
  .plan .btn{padding:.6rem .3rem;font-size:.75rem;border-width:1.5px}
  /* the same light sweep that runs across "View My Work" */
  .work-intro .btn{position:relative;overflow:hidden}
  .work-intro .btn::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);
    animation:sweep 4.5s ease-in-out 1.6s infinite}
  .work-grid{gap:1.4rem}
  .work-intro p{margin-bottom:1.1rem}
  /* blue curve: let its bottom show (the path dips below the 10px box), and sit it midway between the heading
     and "Every brand has a story" (that text 10px higher than before) */
  .work .squiggle{display:block;overflow:visible;margin:15px 0 18px}   /* top margin merges with the heading's 12.8px */
  .cards{grid-template-columns:1fr 1fr;gap:.8rem}
  .cards .card[href="logo-brand-identity.html"]{order:1}
  .cards .card[href="packaging-design.html"]{order:2}
  .cards .card[href="brochures.html"]{order:3}
  .cards .card[href="social-media-creatives.html"]{order:4}
  .cards .card[href="business-card.html"]{order:5}
  .cards .card[href="office-stationery.html"]{order:6}
  .card{border-radius:14px}
  .thumb{height:118px}
  .thumb[class*="t-"]{height:200px;zoom:.59}   /* the drawn placeholder pictures are made for 200px - shrink them whole */
  .thumb.fit img{padding:12px}
  .card-body{padding:.65rem .7rem;gap:.4rem}
  .card-body h3{font-size:.78rem;line-height:1.25}
  .card-body p{font-size:.66rem}
  .arrow-dot{width:26px;height:26px}
  .arrow-dot svg{width:13px;height:13px}
}