/* AutomatesTime revamp kit. Layering after refabrika.com (pinned giant type, word reveals,
   physics pills, hairline stripes) on a quiet-luxury palette: cream, beige, chocolate, espresso. */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; letter-spacing:0 !important; }
html { -webkit-font-smoothing:antialiased; }
:root {
  --cream:#F6F1EA; --beige:#EDE4D8; --paper:#FFFDF9;
  --espresso:#2B1E17; --espresso-2:#35261D; --choc:#4A3326; --choc-2:#3A281E; --caramel:#B98B5E;
  --ink:#2B1E17; --text:#4B3E35; --text-soft:#85756A; --hair:#E3D8CA;
  --sage:#4E6A4B; --sage-wash:#E6ECE1; --terra:#A45A43; --terra-wash:#F4E4DC;
  --on-dark:#F6F1EA; --on-dark-soft:rgba(246,241,234,.72); --on-dark-faint:rgba(246,241,234,.5); --dark-line:rgba(246,241,234,.12);
  --font:'Satoshi',-apple-system,'Segoe UI',Roboto,sans-serif;
  --serif:'Instrument Serif',Georgia,serif;
  --r:16px; --r-lg:24px;
  --shadow-sm:0 1px 2px rgba(43,30,23,.05), 0 6px 16px rgba(43,30,23,.05);
  --shadow-md:0 2px 4px rgba(43,30,23,.04), 0 18px 48px rgba(43,30,23,.10);
  --shadow-lg:0 4px 10px rgba(43,30,23,.05), 0 40px 90px rgba(43,30,23,.16);
  --maxw:1320px; --gut:clamp(16px,2.4vw,36px);
}
body { font-family:var(--font); font-weight:400; background:var(--cream); color:var(--ink); line-height:1.55; overflow-x:clip; }
a { text-decoration:none; color:inherit; } ul { list-style:none; }
img, svg { display:block; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 var(--gut); }
h1, h2, h3 { font-weight:500; line-height:1.04; color:inherit; }
h2 { font-size:clamp(2.2rem,4.6vw,3.9rem); }
.serif { font-family:var(--serif); font-weight:400; font-style:italic; }
.grey { color:var(--text-soft); }
.band-dark .grey { color:var(--on-dark-faint); }

/* eyebrow: sentence case, full size (the reference's tiny tracked capitals are converted) */
.eyebrow { display:block; font-size:1rem; font-weight:500; color:var(--choc); margin-bottom:1rem; }
.eyebrow::before { content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--caramel); margin-right:.6rem; transform:translateY(-1px); }
.band-dark .eyebrow { color:var(--on-dark); }

/* ---------- bands ---------- */
.band { position:relative; padding:clamp(5rem,9vw,8.5rem) 0; }
.band-cream { background:var(--cream); }
.band-beige { background:var(--beige); }
.band-paper { background:var(--paper); }
.band-dark { background:var(--espresso); color:var(--on-dark); }
.band-dark p { color:var(--on-dark-soft); }
.lede-l { font-size:clamp(1.08rem,1.4vw,1.25rem); font-weight:400; line-height:1.6; color:var(--text); }
.band-dark .lede-l { color:var(--on-dark-soft); }

/* hairline stripe divider (refabrika) */
.stripes { height:28px; background:repeating-linear-gradient(180deg, var(--hair) 0 1px, transparent 1px 5px); opacity:.9; }
.band-dark .stripes { background:repeating-linear-gradient(180deg, var(--dark-line) 0 1px, transparent 1px 5px); }

/* ---------- buttons: label + detached circle arrow ---------- */
.btn { display:inline-flex; align-items:center; gap:.45rem; font-family:var(--font); font-weight:500; font-size:1rem; line-height:1.2; cursor:pointer; border:0; background:none; color:var(--ink); }
.btn .lbl { display:inline-flex; align-items:center; padding:.85rem 1.35rem; border-radius:999px; border:1px solid currentColor; transition:background .25s ease, color .25s ease, border-color .25s ease; }
.btn .go { width:46px; height:46px; border-radius:50%; border:1px solid currentColor; display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto; transition:transform .35s cubic-bezier(.2,.7,.2,1), background .25s ease, color .25s ease; }
.btn .go svg { width:14px; height:14px; stroke:currentColor; }
.btn:hover .go { transform:rotate(45deg); }
.btn-primary { color:var(--espresso); }
.btn-primary .lbl, .btn-primary .go { background:var(--espresso); color:var(--cream); border-color:var(--espresso); }
.btn-primary:hover .lbl, .btn-primary:hover .go { background:var(--choc); border-color:var(--choc); }
.btn-ghost .lbl { border-color:var(--hair); background:var(--paper); }
.btn-ghost:hover .lbl { border-color:var(--espresso); }
.btn-light .lbl, .btn-light .go { background:var(--cream); color:var(--espresso); border-color:var(--cream); }
.btn-light:hover .lbl, .btn-light:hover .go { background:#fff; border-color:#fff; }
.btn-outline-light { color:var(--cream); }
.btn-outline-light .lbl { border-color:var(--dark-line); }
.btn-outline-light:hover .lbl { border-color:var(--cream); }
.btn-lg .lbl { padding:1rem 1.55rem; font-size:1.05rem; } .btn-lg .go { width:52px; height:52px; }

.contact-fallback { font-size:.95rem; color:var(--text-soft); }
.contact-fallback a { color:var(--choc); font-weight:500; text-decoration:underline; text-decoration-color:var(--hair); text-underline-offset:3px; }
.band-dark .contact-fallback { color:var(--on-dark-faint); }
.band-dark .contact-fallback a { color:var(--on-dark); text-decoration-color:var(--dark-line); }

/* ---------- nav ---------- */
.nav { position:fixed; top:0; left:0; right:0; z-index:100; padding:14px 0; pointer-events:none; }
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.nav-logo, .nav-links, .nav-toggle { pointer-events:auto; }
.nav-logo, .nav-links, .nav-toggle { background:rgba(246,241,234,.78); -webkit-backdrop-filter:blur(18px) saturate(140%); backdrop-filter:blur(18px) saturate(140%); border:1px solid rgba(43,30,23,.08); box-shadow:0 6px 24px rgba(43,30,23,.06); }
.nav-logo { display:inline-flex; align-items:center; gap:.55rem; font-weight:700; font-size:1.12rem; color:var(--espresso); padding:.62rem 1.05rem; border-radius:999px; }
.nav-logo .dot { width:10px; height:10px; border-radius:3px; background:var(--espresso); }
.nav-links { display:flex; align-items:center; gap:.15rem; padding:.3rem; border-radius:999px; }
.nav-links > a:not(.nav-cta), .nav-dd > summary { font-size:.95rem; font-weight:500; color:var(--text); padding:.55rem .95rem; border-radius:999px; transition:color .2s ease, background .2s ease; }
.nav-links > a:not(.nav-cta):hover, .nav-dd > summary:hover { color:var(--espresso); background:rgba(43,30,23,.06); }
.nav-cta { display:inline-flex; align-items:center; gap:.5rem; font-size:.95rem; font-weight:500; color:var(--cream); background:var(--espresso); padding:.55rem .6rem .55rem 1.05rem; border-radius:999px; transition:background .2s ease; }
.nav-cta:hover { background:var(--choc); }
.nav-cta .go { width:24px; height:24px; border-radius:50%; background:var(--cream); display:inline-flex; align-items:center; justify-content:center; }
.nav-cta .go svg { width:10px; height:10px; stroke:var(--espresso); }
.nav-toggle { display:none; width:48px; height:48px; border-radius:50%; cursor:pointer; align-items:center; justify-content:center; }
.nav-toggle span { display:block; width:18px; height:2px; background:var(--espresso); border-radius:2px; position:relative; }
.nav-toggle span::before, .nav-toggle span::after { content:""; position:absolute; left:0; width:18px; height:2px; background:var(--espresso); border-radius:2px; transition:transform .25s ease; }
.nav-toggle span::before { top:-6px; } .nav-toggle span::after { top:6px; }
.nav-toggle[aria-expanded="true"] span { background:transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { transform:translateY(-6px) rotate(-45deg); }
.nav-dd { position:relative; }
.nav-dd > summary { list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:.4rem; }
.nav-dd > summary::-webkit-details-marker { display:none; }
.nav-dd > summary::after { content:""; width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); }
.nav-dd-menu { position:absolute; top:calc(100% + .7rem); left:0; min-width:260px; padding:.45rem; display:flex; flex-direction:column; z-index:20; border-radius:18px; background:var(--paper); border:1px solid var(--hair); box-shadow:var(--shadow-md); }
.nav-dd-menu a { font-size:.98rem; color:var(--text); padding:.65rem .8rem; border-radius:10px; }
.nav-dd-menu a:hover, .nav-dd-menu a[aria-current="page"] { background:var(--beige); color:var(--espresso); }
@media (max-width:900px){
  .nav-toggle { display:inline-flex; }
  .nav-links { display:none; position:absolute; top:76px; left:var(--gut); right:var(--gut); flex-direction:column; align-items:stretch; padding:.6rem; border-radius:22px; background:rgba(246,241,234,.97); }
  .nav-links.open { display:flex; }
  .nav-links > a:not(.nav-cta), .nav-dd > summary { padding:.9rem .9rem; font-size:1.05rem; border-radius:12px; }
  .nav-dd-menu { position:static; background:none; border:none; box-shadow:none; padding:0 0 .3rem .8rem; min-width:0; }
  .nav-cta { justify-content:center; margin-top:.4rem; padding:.9rem; font-size:1.05rem; }
}

/* ---------- reveals ---------- */
.anim .reveal { opacity:0; transform:translateY(34px); transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.anim .reveal.in { opacity:1; transform:none; }
.anim .reveal.d1 { transition-delay:.08s; } .anim .reveal.d2 { transition-delay:.16s; } .anim .reveal.d3 { transition-delay:.24s; }
/* word-by-word colour reveal on scroll (refabrika) */
.wreveal .w { transition:color .35s ease; }
.anim .wreveal .w { color:rgba(43,30,23,.18); }
.anim .band-dark .wreveal .w { color:rgba(246,241,234,.16); }
.anim .wreveal .w.lit { color:inherit; }

/* ---------- sticky split ---------- */
.split { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
.split-head { position:sticky; top:120px; }
.split-head h2 { margin-bottom:1.25rem; }
@media (max-width:900px){ .split { grid-template-columns:1fr; } .split-head { position:static; } }

/* ---------- pinned giant type (refabrika "2009 - 2026" track) ---------- */
.gtype { position:relative; height:260vh; }
.gtype-pin { position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding-bottom:clamp(2.5rem,6vh,5rem); }
.gtype-track { position:absolute; left:0; top:50%; transform:translate3d(30vw,-58%,0); white-space:nowrap; font-size:clamp(7rem,21vw,24rem); font-weight:500; line-height:.9; will-change:transform; pointer-events:none; }
.gtype-layer { width:100%; position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem; align-items:end; }
@media (max-width:760px){ .gtype { height:220vh; } .gtype-track { font-size:34vw; top:40%; } .gtype-layer { grid-template-columns:1fr; } }


/* ---------- page hero (inner pages) ---------- */
.phero { padding:170px 0 clamp(3rem,6vw,5rem); }
.phero h1 { font-size:clamp(2.7rem,6.4vw,6rem); max-width:17ch; margin-bottom:2.2rem; }
.phero-meta { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:2rem; align-items:end; padding-top:1.6rem; border-top:1px solid var(--hair); }
.phero .ctas { display:flex; gap:.7rem; flex-wrap:wrap; margin:1.5rem 0 1rem; }
@media (max-width:900px){ .phero { padding-top:130px; } .phero-meta { grid-template-columns:1fr; } }

/* ---------- finale + footer ---------- */
.finale { padding:clamp(6rem,12vw,10rem) 0 0; }
.finale h2 { font-size:clamp(3rem,9vw,8.5rem); line-height:.95; margin-bottom:2rem; }
.finale h2 .arrow { display:inline-block; width:.62em; height:.62em; vertical-align:.02em; margin-left:.12em; }
.finale h2 .arrow svg { width:100%; height:100%; stroke:currentColor; }
.finale h2 .ul { display:inline-block; border-bottom:.05em solid currentColor; padding-bottom:.04em; }
.finale .fin-meta { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2rem; align-items:end; }
.finale .ctas { display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:1rem; }
.site-foot { padding:clamp(4rem,8vw,6rem) 0 2rem; font-size:.95rem; }
.foot-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem; align-items:start; padding-top:2.5rem; }
.foot-brand { font-size:1.4rem; font-weight:700; color:var(--on-dark); margin-bottom:.5rem; }
.foot-col b { display:block; color:var(--on-dark); font-weight:500; margin-bottom:.7rem; }
.foot-col a, .foot-contact a { display:block; color:var(--on-dark-soft); padding:.18rem 0; }
.foot-contact { color:var(--on-dark-soft); } .foot-contact a { display:inline; }
.foot-col a:hover, .foot-contact a:hover { color:var(--on-dark); }
@media (max-width:760px){ .foot-grid { grid-template-columns:1fr 1fr; } .foot-grid > :first-child { grid-column:1 / -1; } .finale .fin-meta { grid-template-columns:1fr; } }

@media (prefers-reduced-motion:reduce){
  .anim .reveal { opacity:1; transform:none; transition:none; }
  .anim .wreveal .w { color:inherit; }
}

/* ===== after wearemox.com: full-screen menu, numbered rows that open one at a time, page transitions ===== */
.menu-panel { position:fixed; inset:0; z-index:200; background:var(--espresso); color:var(--cream); display:flex; flex-direction:column; justify-content:space-between; padding:18px var(--gut) 28px;
  clip-path:inset(100% 0 0 0); visibility:hidden; transition:clip-path .7s cubic-bezier(.76,0,.24,1), visibility 0s linear .7s; }
.menu-panel.open { clip-path:inset(0 0 0 0); visibility:visible; transition:clip-path .7s cubic-bezier(.76,0,.24,1), visibility 0s; }
.menu-top { display:flex; align-items:center; justify-content:space-between; }
.menu-top .nav-logo { background:rgba(246,241,234,.08); color:var(--cream); border-color:rgba(246,241,234,.12); box-shadow:none; }
.menu-top .nav-logo .dot { background:var(--cream); }
.menu-close { min-height:48px; padding:0 1.2rem; border-radius:999px; border:1px solid rgba(246,241,234,.25); background:none; color:var(--cream); font-family:var(--font); font-size:1rem; cursor:pointer; }
.menu-links { display:flex; flex-direction:column; gap:.2rem; }
.menu-links a { display:block; overflow:clip; font-size:clamp(2.6rem,11vw,5.5rem); font-weight:500; line-height:1.08; color:var(--cream); }
.menu-links a span { display:inline-block; transform:translateY(105%); transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.menu-panel.open .menu-links a span { transform:none; }
.menu-panel.open .menu-links a:nth-child(1) span { transition-delay:.25s; } .menu-panel.open .menu-links a:nth-child(2) span { transition-delay:.31s; }
.menu-panel.open .menu-links a:nth-child(3) span { transition-delay:.37s; } .menu-panel.open .menu-links a:nth-child(4) span { transition-delay:.43s; }
.menu-panel.open .menu-links a:nth-child(5) span { transition-delay:.49s; }
.menu-foot { display:flex; flex-direction:column; gap:.9rem; color:var(--on-dark-soft); font-size:1rem; }
.menu-foot a { color:var(--cream); }
html.menu-lock, html.menu-lock body { overflow:hidden; }
@media (max-width:900px){ .nav-links { display:none !important; } }

.rows { border-top:1px solid var(--hair); }
.row { border-bottom:1px solid var(--hair); }
.row-btn { width:100%; display:grid; grid-template-columns:3.2rem minmax(0,1fr) 2rem; align-items:center; gap:1rem; padding:1.35rem 0; background:none; border:0; cursor:pointer; font-family:var(--font); color:var(--ink); text-align:left; }
.row-n { font-size:1rem; color:var(--text-soft); }
.row-t { font-size:clamp(1.4rem,2.4vw,2.1rem); font-weight:500; line-height:1.15; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.row-btn:hover .row-t { transform:translateX(.4rem); }
.row-x { position:relative; width:18px; height:18px; justify-self:end; transition:transform .5s cubic-bezier(.76,0,.24,1); }
.row-x::before, .row-x::after { content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; margin-top:-.75px; background:currentColor; }
.row-x::after { transform:rotate(90deg); }
.row.open .row-x { transform:rotate(45deg); }
.row-body { display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s cubic-bezier(.76,0,.24,1); }
.row.open .row-body { grid-template-rows:1fr; }
.row-inner { overflow:hidden; min-height:0; }
.row-content { padding:0 0 1.8rem 4.2rem; opacity:0; transform:translateY(10px); transition:opacity .35s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
.row.open .row-content { opacity:1; transform:none; transition-delay:.18s; }
@media (max-width:640px){ .row-btn { grid-template-columns:2.2rem minmax(0,1fr) 1.6rem; } .row-content { padding-left:0; } }

/* cross-page transition (Chrome, Safari 18.2+; others simply navigate) */
@view-transition { navigation:auto; }
::view-transition-old(root) { animation:vtOut .45s cubic-bezier(.76,0,.24,1) both; }
::view-transition-new(root) { animation:vtIn .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vtOut { to { opacity:0; transform:translateY(-24px); } }
@keyframes vtIn { from { opacity:0; transform:translateY(32px); } }
@media (prefers-reduced-motion:reduce){ .menu-panel, .menu-links a span, .row-body, .row-content, .row-x { transition:none !important; } ::view-transition-old(root), ::view-transition-new(root) { animation:none; } }