/* ACME DESIGNS.uk homepage v0.1 (27 Sept 2026). Brand unchanged: navy #07041E, purple #5528BA, lavender #AE92DB.
   The posh part is layout only: serif display type, big pictures, space, slow movement. No web fonts, no cookies. */
:root{
  --navy:#07041E; --navy2:#0d0930; --ink:#f3effd; --mute:#b3a9d9; --lav:#AE92DB; --pur:#5528BA; --line:rgba(174,146,219,.22);
  --serif:"Didot","Bodoni 72","Bodoni MT","Playfair Display","Palatino Linotype","Book Antiqua",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--navy);color:var(--ink);font:17px/1.65 var(--sans);-webkit-text-size-adjust:100%;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* header */
header{position:fixed;inset:0 0 auto 0;z-index:10;transition:background .5s var(--ease),border-color .5s;border-bottom:1px solid transparent}
header.solid{background:rgba(7,4,30,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-color:var(--line)}
header .wrap{display:flex;align-items:center;height:76px;gap:24px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:40px;height:40px}
.brand span{font-size:12px;font-weight:700;letter-spacing:.32em;text-transform:uppercase}
.brand i{font-style:normal;letter-spacing:.08em;text-transform:none;color:var(--lav)}
nav{margin-left:auto;display:flex;gap:30px}
nav a{text-decoration:none;font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);transition:color .3s}
nav a:hover{color:var(--ink)}

/* hero: a slow aurora in the brand colours */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;align-items:center;overflow:hidden;isolation:isolate}
/* No filter:blur / blend modes: soft-edged gradients look the same and stay cheap on an iPad. */
.aurora{position:absolute;inset:-20%;z-index:-1;opacity:.9}
.aurora b{position:absolute;border-radius:50%;will-change:transform;animation:drift 26s var(--ease) infinite alternate}
.aurora b:nth-child(1){width:55vmax;height:55vmax;left:5%;top:10%;background:radial-gradient(circle,#5528BA 0%,transparent 62%)}
.aurora b:nth-child(2){width:45vmax;height:45vmax;right:0;top:25%;background:radial-gradient(circle,#AE92DB66 0%,transparent 60%);animation-duration:32s;animation-delay:-8s}
.aurora b:nth-child(3){width:40vmax;height:40vmax;left:35%;bottom:-5%;background:radial-gradient(circle,#2b1a7a 0%,transparent 60%);animation-duration:38s;animation-delay:-15s}
@keyframes drift{0%{transform:translate(0,0) scale(1)}50%{transform:translate(6vmax,-4vmax) scale(1.08)}100%{transform:translate(-5vmax,5vmax) scale(.95)}}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:30vh;background:linear-gradient(transparent,var(--navy));z-index:-1}
.eyebrow{font-size:12px;letter-spacing:.36em;text-transform:uppercase;color:var(--lav);margin:0 0 26px}
h1{font:400 clamp(46px,8.4vw,112px)/.98 var(--serif);letter-spacing:-.01em;margin:0}
h1 em,h2 em{font-style:italic;color:var(--lav)}
.hero p.lead{max-width:540px;font-size:19px;color:var(--mute);margin:30px 0 42px}
.btns{display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;padding:15px 28px;border-radius:999px;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--line);transition:all .4s var(--ease)}
.btn.fill{background:var(--pur);border-color:transparent;color:#fff}
.btn:hover{transform:translateY(-2px);border-color:var(--lav)}
.btn.fill:hover{background:#6333d6}
.scrollcue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);text-decoration:none}
.scrollcue::after{content:"";display:block;width:1px;height:46px;margin:12px auto 0;background:linear-gradient(var(--lav),transparent);animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* sections */
section{padding:130px 0}
h2{font:400 clamp(36px,5vw,64px)/1.05 var(--serif);margin:0 0 22px}
.intro{max-width:720px}
.intro p{color:var(--mute);font-size:19px;margin:0}

/* collections: alternating editorial rows */
.coll{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(36px,6vw,90px);align-items:center;margin-top:110px}
.coll:nth-of-type(even){grid-template-columns:1fr 1.15fr}
.coll:nth-of-type(even) .pic{order:2}
.pic{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/5;background:var(--navy2);box-shadow:0 40px 90px rgba(0,0,0,.5)}
.pic img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.6s var(--ease)}
.coll:hover .pic img{transform:scale(1.1)}
.pic.soon{display:grid;place-items:center;text-align:center;padding:30px;
  background:radial-gradient(120% 80% at 20% 10%,#5528BA 0%,transparent 55%),radial-gradient(90% 70% at 90% 90%,#AE92DB55 0%,transparent 60%),var(--navy2)}
.pic.soon .t{font:italic 400 clamp(34px,4vw,54px)/1.05 var(--serif)}
.pic.soon .s{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);margin-top:16px}
.num{font:italic 400 18px var(--serif);color:var(--lav);margin-bottom:14px}
.coll p{color:var(--mute);margin:0 0 26px}
.items{list-style:none;padding:0;margin:0 0 34px;border-top:1px solid var(--line)}
.items li{border-bottom:1px solid var(--line)}
.items a{display:flex;justify-content:space-between;gap:16px;padding:15px 2px;text-decoration:none;transition:padding .4s var(--ease),color .3s}
.items a::after{content:"→";color:var(--lav);opacity:0;transform:translateX(-8px);transition:all .4s var(--ease)}
.items a:hover{padding-left:10px;color:#fff}
.items a:hover::after{opacity:1;transform:none}
.items small{color:var(--mute);font-size:13px;margin-left:auto}
.credit{position:absolute;right:14px;bottom:12px;font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.75);
  text-shadow:0 1px 6px rgba(0,0,0,.8);text-decoration:none}

/* craft band */
.craft{background:linear-gradient(180deg,var(--navy),var(--navy2) 30%,var(--navy2) 70%,var(--navy))}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;margin-top:64px}
.fact{border-top:1px solid var(--lav);padding-top:22px}
.fact h3{font:400 26px/1.2 var(--serif);margin:0 0 10px}
.fact p{color:var(--mute);margin:0;font-size:16px}

/* services */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:60px}
.card{position:relative;border:1px solid var(--line);border-radius:22px;padding:40px;overflow:hidden;text-decoration:none;
  background:linear-gradient(160deg,rgba(85,40,186,.18),transparent 60%);transition:all .5s var(--ease)}
.card:hover{border-color:var(--lav);transform:translateY(-4px)}
.card .tag{display:inline-block;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--lav);border:1px solid var(--line);border-radius:999px;padding:5px 12px;margin-bottom:22px}
.card h3{font:400 34px/1.1 var(--serif);margin:0 0 12px}
.card p{color:var(--mute);margin:0 0 24px}
.card .go{font-size:13px;letter-spacing:.16em;text-transform:uppercase}

/* visit */
.visit{text-align:center}
.visit h2{margin-bottom:18px}
.visit .intro{margin:0 auto 44px}
.visit .btns{justify-content:center}

footer{border-top:1px solid var(--line);padding:40px 0 60px;color:var(--mute);font-size:13px}
footer .wrap{display:flex;gap:18px 34px;flex-wrap:wrap;align-items:center}
footer a{color:var(--mute)}
footer .sp{flex:1}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(34px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .aurora b,.scrollcue::after{animation:none}
  .rv{opacity:1;transform:none;transition:none}
  .pic img,.coll:hover .pic img{transform:none;transition:none}
}
@media (max-width:860px){
  nav{display:none}
  section{padding:90px 0}
  .coll,.coll:nth-of-type(even){grid-template-columns:1fr;margin-top:80px}
  .coll:nth-of-type(even) .pic{order:0}
  .pic{aspect-ratio:4/3}
  .facts,.cards{grid-template-columns:1fr}
}
@media (max-width:520px){
  .wrap{padding:0 18px}
  .brand span{letter-spacing:.2em}
  .card{padding:30px 24px}
}

/* ---- The maker (about page), v0.2 27 Sept ---- */
.hero.short{min-height:78vh;min-height:78svh}
.story{max-width:760px;margin:0 auto}
.chapter{display:grid;grid-template-columns:90px 1fr;gap:28px;padding:54px 0;border-top:1px solid var(--line)}
.chapter:first-child{border-top:none}
.chapter .n{font:italic 400 44px/1 var(--serif);color:var(--lav)}
.chapter h2{font-size:clamp(28px,3.6vw,42px);margin:0 0 14px}
.chapter p{color:var(--mute);margin:0 0 14px}
.chapter p:last-child{margin-bottom:0}
.pull{max-width:900px;margin:40px auto;text-align:center;font:italic 400 clamp(28px,4vw,48px)/1.2 var(--serif)}
.pull em{color:var(--lav)}
.timeline{display:grid;grid-template-columns:repeat(6,1fr);gap:0;margin:70px 0 0;position:relative}
.timeline::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:linear-gradient(90deg,transparent,var(--lav),transparent)}
.tl{position:relative;padding:30px 10px 0;text-align:center}
.tl::before{content:"";position:absolute;left:50%;top:0;width:15px;height:15px;margin-left:-7.5px;border-radius:50%;background:var(--navy);border:2px solid var(--lav)}
.tl b{display:block;font:400 22px/1.2 var(--serif);margin-bottom:6px}
.tl span{font-size:13px;color:var(--mute)}
.sig{margin-top:50px;font:italic 400 30px var(--serif);color:var(--lav)}
.sig small{display:block;font:13px var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);font-style:normal;margin-top:6px}
.teaser{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.teaser .big{font:400 clamp(90px,14vw,190px)/.9 var(--serif);color:transparent;-webkit-text-stroke:1px var(--lav);letter-spacing:-.02em}
.teaser p{color:var(--mute);margin:0 0 28px}
@media (max-width:860px){
  .chapter{grid-template-columns:1fr;gap:6px;padding:40px 0}
  .timeline{grid-template-columns:1fr 1fr 1fr;row-gap:34px}
  .timeline::before{display:none}
  .teaser{grid-template-columns:1fr}
}
@media (max-width:520px){ .timeline{grid-template-columns:1fr 1fr} }
.tiers{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:22px 0 24px}
.tiers>div{border:1px solid var(--line);border-radius:18px;padding:22px 24px;background:linear-gradient(160deg,rgba(85,40,186,.16),transparent 65%)}
.tiers h3{font:400 24px/1.2 var(--serif);margin:0 0 8px}
.tiers h3 em{color:var(--lav)}
.tiers p{margin:0;font-size:15.5px}
@media (max-width:640px){.tiers{grid-template-columns:1fr}}