:root{
  --bg:#e3e2de; --ink:#141414; --accent:#0870bc; --muted:#6f6e6a;
  --line:rgba(20,20,20,.18); --card:#eceae5;
}
[data-theme="dark"]{
  --bg:#101114; --ink:#e3e2de; --accent:#3d96d9; --muted:#8b8c90;
  --line:rgba(227,226,222,.16); --card:#17181c;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:'IBM Plex Serif',Georgia,serif;transition:background .5s,color .5s;overflow-x:hidden}
.anton{font-family:'Bebas Neue',sans-serif;text-transform:uppercase;line-height:.92;letter-spacing:.01em}

/* blue grid (56px, approved) */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;opacity:.35;
  background-image:
    linear-gradient(to right,color-mix(in srgb,var(--accent) 30%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in srgb,var(--accent) 30%,transparent) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 40%,transparent 90%);
  mask-image:radial-gradient(ellipse at 50% 30%,#000 40%,transparent 90%);}
[data-theme="dark"] body::before{opacity:.3}

/* grain */
body::after{content:"";position:fixed;inset:0;pointer-events:none;opacity:.04;z-index:99;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E")}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;justify-content:space-between;align-items:center;padding:20px clamp(20px,4vw,56px);backdrop-filter:blur(8px);background:color-mix(in srgb,var(--bg) 78%,transparent);border-bottom:1px solid var(--line)}
.wordmark{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-decoration:none}
.wordmark span{color:var(--accent)}
.wordmark img{height:38px;display:block;width:auto}
[data-theme="dark"] .wordmark img{content:url("logo-dark.svg")}
nav .links{display:flex;gap:28px;font-size:13px;font-weight:500}
nav .links a{color:var(--ink);text-decoration:none;position:relative}
nav .links a::after{content:"";position:absolute;left:0;bottom:-4px;height:1.5px;width:0;background:var(--accent);transition:width .3s}
nav .links a:hover::after,nav .links a.active::after{width:100%}
.navright{display:flex;align-items:center;gap:14px}
.btn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);border-radius:999px;padding:11px 26px;font-size:13px;font-weight:500;color:var(--ink);text-decoration:none;background:transparent;cursor:pointer;transition:.3s;will-change:transform}
.btn.solid{background:var(--ink);color:var(--bg)}
.btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
#themeToggle{border:1.5px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);width:40px;height:40px;cursor:pointer;font-size:15px}
@media(max-width:760px){nav .links{display:none}}
#mBtn{display:none;border:1.5px solid var(--line);border-radius:999px;background:transparent;color:var(--ink);width:40px;height:40px;cursor:pointer;font-size:16px;line-height:1}
@media(max-width:760px){#mBtn{display:inline-flex;align-items:center;justify-content:center}}
#mMenu{position:fixed;inset:0;background:var(--bg);z-index:200;display:flex;flex-direction:column;justify-content:center;padding:32px;gap:6px;transform:translateY(-102%);transition:transform .45s cubic-bezier(.76,0,.24,1)}
#mMenu.open{transform:none}
#mMenu a{font-family:'Bebas Neue',sans-serif;text-transform:uppercase;font-size:42px;color:var(--ink);text-decoration:none;padding:10px 0;border-bottom:1px solid var(--line)}
#mMenu a:active,#mMenu a:hover{color:var(--accent)}
#mMenu .mclose{position:absolute;top:22px;right:22px;font-size:26px;background:none;border:none;color:var(--ink);cursor:pointer}
#mMenu .msmall{font-family:'IBM Plex Serif',Georgia,serif;text-transform:none;font-size:14px;color:var(--muted);border:none;margin-top:18px}

section{padding:clamp(72px,11vw,160px) clamp(20px,4vw,56px);border-bottom:1px solid var(--line);position:relative}
.pagehero{padding-top:clamp(150px,20vw,240px)}
.pagehero h1{font-size:clamp(44px,8vw,110px)}
.pagehero .sub{margin-top:28px;max-width:480px;color:var(--muted);font-size:15px;line-height:1.7}
.kicker{font-size:11px;letter-spacing:.3em;color:var(--accent);font-weight:600;margin-bottom:22px;display:block}

/* reveal */
.rv{opacity:0;transform:translateY(36px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}

/* service rows */
.svcrow{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:30px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--ink);transition:padding .3s}
.svcrow:first-of-type{border-top:1px solid var(--line)}
.svcrow:hover{padding-left:16px}
.svcrow .take{font-size:11px;letter-spacing:.25em;color:var(--muted);width:90px;flex-shrink:0}
.svcrow h3{font-size:clamp(22px,3.4vw,40px);font-family:'Bebas Neue',sans-serif;text-transform:uppercase;flex:1;font-weight:400}
.svcrow:hover h3{color:var(--accent)}
.svcrow .arr{font-size:22px;transition:transform .3s}
.svcrow:hover .arr{transform:translateX(8px)}
.svcrow .d{font-size:12.5px;color:var(--muted);max-width:230px;display:none}
@media(min-width:900px){.svcrow .d{display:block}}

/* cards & grids */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,32px)}
@media(max-width:760px){.grid2,.grid3,.grid4{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:26px;transition:transform .35s}
.card:hover{transform:translateY(-6px)}
.card h4{font-family:'Bebas Neue',sans-serif;text-transform:uppercase;font-size:16px;letter-spacing:.03em;margin-bottom:10px;font-weight:400}
.card p{font-size:13.5px;color:var(--muted);line-height:1.65}
.card .tick{color:var(--accent);font-weight:600}

/* scene numbers */
.scene .n{font-family:'Bebas Neue',sans-serif;font-size:52px;color:transparent;-webkit-text-stroke:1.2px var(--accent)}
.scene h4{font-size:16px;margin:12px 0 8px;text-transform:uppercase;font-family:'Bebas Neue',sans-serif;letter-spacing:.03em;font-weight:400}
.scene p{font-size:13.5px;color:var(--muted);line-height:1.65}
.scene .tf{font-size:10.5px;letter-spacing:.2em;color:var(--accent);margin-top:8px;display:block}

/* marquee */
.marquee{overflow:hidden;padding:26px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.marquee .track{display:inline-block;animation:scroll 22s linear infinite;font-family:'Bebas Neue',sans-serif;font-size:clamp(34px,6vw,72px);text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.marquee .track b{color:var(--accent);-webkit-text-stroke:0;font-weight:400}
.marquee:hover .track{animation-play-state:paused}
@keyframes scroll{to{transform:translateX(-50%)}}

/* forms */
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.field label{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.field input,.field select,.field textarea{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px 16px;font-family:'IBM Plex Serif',Georgia,serif;font-size:14px;color:var(--ink);outline:none;transition:border-color .3s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent)}
.field textarea{min-height:120px;resize:vertical}
.pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{border:1.5px solid var(--line);border-radius:999px;padding:9px 18px;font-size:12.5px;cursor:pointer;transition:.25s;background:transparent;color:var(--ink);font-family:'IBM Plex Serif',Georgia,serif}
.pill:hover,.pill.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)}
.err{font-size:12px;color:#c0392b;display:none}

/* faq accordion */
.faq{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;padding:20px 0;cursor:pointer;list-style:none;font-size:15px;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;color:var(--accent);transition:transform .3s}
.faq[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 20px;font-size:14px;color:var(--muted);line-height:1.7;max-width:640px}

/* avatars */
.avatar{width:88px;height:88px;border-radius:50%;background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--accent) 85%,#fff),var(--accent) 55%,color-mix(in srgb,var(--accent) 55%,#000));margin-bottom:14px;transition:border-radius .5s,transform .5s}
.card:hover .avatar{border-radius:46% 54% 60% 40%/48% 42% 58% 52%;transform:rotate(8deg)}

/* cta + footer */
.ctasec{text-align:center}
.ctasec h2{font-size:clamp(36px,7vw,96px)}
.ctasec .hl{color:var(--accent)}
.ctarow{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
footer{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:26px clamp(20px,4vw,56px);font-size:12px;color:var(--muted)}
footer a{color:var(--muted);text-decoration:none}
footer a:hover{color:var(--accent)}

/* cursor */
#cursor{position:fixed;width:34px;height:34px;border:1.5px solid var(--accent);border-radius:50%;pointer-events:none;z-index:998;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s;display:none;left:-100px;top:-100px}
@media(pointer:fine){#cursor{display:block}}
#cursor.big{width:64px;height:64px;background:color-mix(in srgb,var(--accent) 18%,transparent)}

/* page transition */
#wipe{position:fixed;inset:0;background:var(--ink);z-index:999;transform:translateY(100%);pointer-events:none}
#wipe.go{transition:transform .45s cubic-bezier(.76,0,.24,1);transform:translateY(0)}
body.entering #wipe{transform:translateY(0);animation:wipeout .6s cubic-bezier(.76,0,.24,1) .05s forwards}
@keyframes wipeout{to{transform:translateY(-100%)}}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  #wipe{display:none}
}


/* ============ CENTRE-ALIGNED LAYOUT (all screen sizes) ============ */
body{text-align:center}

/* nav bar keeps its logo-left / controls-right layout */
nav{text-align:left}

/* re-centre anything width-capped that was left-anchored */
.pagehero .sub,.heroSub,.faq .a,.tquote,.card p,.scene p,
section p,section h1,section h2,section h3,section h4{margin-left:auto;margin-right:auto}

/* flex rows */
.heroCtas,.ctarow,.pills,.logorow{justify-content:center!important}
footer{justify-content:center!important;gap:10px 26px;text-align:center}

/* service rows: keep the row, cluster it centred */
.svcrow{justify-content:center;gap:26px}
.svcrow h3{flex:none}
.svcrow .take{width:auto}
.svcrow:hover{padding-left:0}

/* lists: inline markers so the whole line centres */
ul,ol{list-style-position:inside;padding-left:0}

/* faq: question and + sit together, centred */
.faq summary{justify-content:center;gap:12px}

/* forms stay usable - labels centred, fields full width, typed text left */
.field{align-items:center}
.field input,.field select,.field textarea{width:100%;text-align:left}

#mMenu{text-align:center}

@media(max-width:760px){
  /* on phones the service rows stack instead */
  .svcrow{flex-direction:column;align-items:center;gap:6px}
  footer{flex-direction:column;align-items:center}
}

/* ---- sub-headings / decks: IBM Plex Serif Thin ---- */
.pagehero .sub,.heroSub,.subhead{
  font-family:'IBM Plex Serif',Georgia,serif;
  font-weight:100;
  font-size:19px;
  line-height:1.62;
  letter-spacing:.005em;
}
.pagehero .sub{max-width:560px}
@media(max-width:760px){
  .pagehero .sub,.heroSub,.subhead{font-size:17.5px;line-height:1.6}
}