/* ══════════════════════════════════════════════════════════════════════
   ACME PROJECT SERVICES (APS)
   Every brand decision is a variable in :root. Change those nine values and
   the whole site re-skins. Every photo is a --img-* variable further down —
   drop a URL in and it appears.
   ══════════════════════════════════════════════════════════════════════ */
:root{
	--brand:#132558;          /* APS navy — sampled off the supplied logo */
	--ink:#1a2033;            /* headings + body text            */
	--ink-soft:#566072;       /* secondary copy                  */
	--muted:#8b93a3;          /* captions, meta                  */
	--line:#e3e6ec;           /* hairlines                       */
	--accent:#132558;         /* the one colour — brand navy     */
	--accent-d:#0c1838;
	--paper:#ffffff;
	--paper-alt:#f5f7fa;      /* alternating band                */
	--deep:#12192e;           /* footer / deep band              */
	--wash:rgba(228,234,244,.66);  /* the pale overlay on hero photos */
	/* The supplied transparent PNG, cropped to the ink and inlined so the page
	 stays one self-contained file. Defined once here, used in both placements. */
	--logo:url(https://acmeps.com.au/img/logo.svg);
	--logo-ar:729/325;

	--wrap:1020px;            /* content column                  */
	--gut:26px;
	--hdr:104px;              /* fixed header height             */
	--hdr-sm:74px;            /* after scroll                    */

	/* ── PHOTOGRAPHY ──────────────────────────────────────────────────
	 Placeholders. Replace url(...) with your own licensed images —
	 do not hotlink someone else's stock, that licence is not yours. */
	--img-hero:linear-gradient(135deg,#b7c1d8 0%,#8d9ab9 40%,#6b7a9d 100%);
	--img-band-1:linear-gradient(140deg,#9daac6 0%,#7787ab 100%);
	--img-band-2:linear-gradient(140deg,#a6b1c9 0%,#7d8cae 100%);
	--img-band-3:linear-gradient(140deg,#93a2c1 0%,#6f7fa4 100%);
	--img-band-4:linear-gradient(140deg,#a8b2c6 0%,#8492b1 100%);
	--img-card-1:linear-gradient(160deg,#c2ccdf,#8b9ac0);
	--img-card-2:linear-gradient(160deg,#bcc8e0,#7c8db8);
	--img-card-3:linear-gradient(160deg,#c6cedd,#8f9cbb);
	--img-card-4:linear-gradient(160deg,#cdd3e2,#98a4c2);
	--img-inline:linear-gradient(150deg,#ced5e4,#96a3c1);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{scroll-behavior:smooth;scroll-padding-top:var(--hdr-sm)}
body{font-family:'Jost',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink);background:var(--paper);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}

/* ── TYPE SCALE ── lifted straight from the reference: light weights,
      generous line-height, wide-tracked uppercase for small labels ── */
h1,h2,h3,h4{font-weight:300;color:var(--ink);letter-spacing:-.2px}
.d1{font-size:clamp(38px,6.2vw,68px);line-height:1.12;font-weight:200}
.d2{font-size:clamp(28px,3.7vw,42px);line-height:1.2;font-weight:200}
.d3{font-size:clamp(22px,2.7vw,32px);line-height:1.22;font-weight:300}
.eyebrow{font-size:clamp(12px,1.5vw,17px);font-weight:400;letter-spacing:.28em;
  text-transform:uppercase;color:var(--ink)}
.label{font-size:13px;font-weight:400;letter-spacing:.26em;text-transform:uppercase;color:var(--ink)}
.lead{font-size:clamp(17px,1.6vw,20px);line-height:1.62;color:var(--ink-soft);font-weight:300}
p{font-weight:300;color:var(--ink-soft)}
p+p{margin-top:1.05em}

/* ── BUTTONS ── the reference uses a hairline ghost button everywhere ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1px solid currentColor;background:none;cursor:pointer;font-family:inherit;
  padding:15px 34px;font-size:13px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink);transition:background .25s,color .25s,border-color .25s}
.btn:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn.light{color:#fff}
.btn.light:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn.fill{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.fill:hover{background:var(--accent-d);border-color:var(--accent-d)}

/* ══════════ HEADER — fixed, white, shrinks on scroll ══════════ */
header{position:fixed;top:0;left:0;right:0;z-index:90;background:#fff;
  height:var(--hdr);display:flex;align-items:center;
  border-bottom:1px solid transparent;transition:height .3s,box-shadow .3s,border-color .3s}
header.small{height:var(--hdr-sm);box-shadow:0 1px 18px rgba(0,0,0,.07);border-bottom-color:var(--line)}
.hd{max-width:1280px;margin:0 auto;padding:0 30px;width:100%;display:flex;align-items:center;gap:26px}

/* Logo: the supplied PNG, sized on height. It is navy on transparent, so the
   footer copy is flipped to solid white with a filter rather than shipping a
   second file — brightness(0) crushes it to black, invert(1) lifts it to white,
   and the transparent counters stay transparent either way. */
.brand{display:flex;align-items:center;flex-shrink:0}
.logo{display:block;height:58px;aspect-ratio:var(--logo-ar);
  background:var(--logo) left center/contain no-repeat;transition:height .3s}
header.small .logo{height:44px}
@media(max-width:420px){.logo{height:44px}}

nav.main{margin-left:auto;display:flex;align-items:center;gap:4px}
nav.main>a,nav.main>.drop>button{
  font-family:inherit;background:none;border:none;cursor:pointer;
  padding:12px 15px;font-size:13px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);transition:color .2s;white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
nav.main>a:hover,nav.main>.drop>button:hover,nav.main>a.on{color:var(--ink)}
nav.main>a.on{font-weight:500}
.drop{position:relative}
.drop>button svg{width:9px;height:9px;transition:transform .25s;opacity:.6}
.drop.open>button svg{transform:rotate(180deg)}
.drop.open>button{color:var(--ink)}
.dropmenu{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-8px);
  background:#fff;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.13);
  min-width:270px;padding:9px 0;opacity:0;visibility:hidden;transition:.22s}
.drop.open .dropmenu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.dropmenu a{display:block;padding:11px 24px;font-size:12.5px;font-weight:400;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-soft);transition:.16s}
.dropmenu a:hover{color:var(--ink);background:var(--paper-alt);padding-left:29px}
.hd .btn{padding:12px 24px;font-size:11.5px;margin-left:10px;flex-shrink:0}

.burger{display:none;margin-left:auto;width:44px;height:44px;border:none;background:none;
  cursor:pointer;flex-direction:column;justify-content:center;gap:6px;align-items:center}
.burger i{display:block;width:24px;height:1.5px;background:var(--ink);transition:.3s}
.burger.x i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.x i:nth-child(2){opacity:0}
.burger.x i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* mobile drawer */
.drawer{position:fixed;inset:var(--hdr-sm) 0 0;background:#fff;z-index:89;overflow-y:auto;
  padding:26px 30px 60px;transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1);visibility:hidden}
.drawer.on{transform:none;visibility:visible}
.drawer a{display:block;padding:15px 0;border-bottom:1px solid var(--line);
  font-size:15px;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--ink)}
.drawer .sub a{padding-left:18px;font-size:13px;color:var(--ink-soft);letter-spacing:.11em}
.drawer .gp{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
  padding:24px 0 6px;font-weight:500}
.drawer .btn{width:100%;margin-top:26px}
@media(max-width:1040px){ nav.main,.hd>.btn{display:none} .burger{display:flex} }

/* ══════════ HERO ══════════ */
.hero{position:relative;min-height:min(86vh,720px);display:flex;align-items:center;
  text-align:left;margin-top:var(--hdr);overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 58px))}
.hero .bg{position:absolute;inset:0;background:var(--img-hero);background-size:cover;background-position:center}
.hero .bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(19,37,88,.95) 0%,rgba(19,37,88,.74) 46%,rgba(19,37,88,.42) 100%)}
.hero .inner{position:relative;z-index:2;width:100%;max-width:var(--wrap);
  margin:0 auto;padding:clamp(70px,10vw,120px) var(--gut)}
.hero .eyebrow{margin-bottom:20px;display:block;color:rgba(255,255,255,.72);font-size:12.5px;letter-spacing:.32em}
.hero .rule{width:66px;height:3px;background:#fff;opacity:.5;margin-bottom:30px}
.hero h1{margin-bottom:38px;color:#fff;max-width:15ch}
.hero .btn{border-color:rgba(255,255,255,.65);color:#fff}
.hero .btn:hover{background:#fff;color:var(--brand);border-color:#fff}

/* ══════════ SECTION SHELL ══════════ */
section{padding:clamp(64px,9vw,118px) 0}
section.alt{background:var(--paper-alt)}
section.tight{padding:clamp(44px,6vw,72px) 0}
.sechead{text-align:left;max-width:720px;margin:0 0 clamp(40px,5.5vw,64px)}
.sechead .eyebrow{display:block;margin-bottom:13px;color:var(--accent);font-size:12px;letter-spacing:.3em}
.sechead .rule{width:54px;height:3px;background:var(--accent);margin-bottom:22px}
.sechead p{margin-top:18px}
.sechead.mid{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}
.sechead.mid .rule{margin-left:auto;margin-right:auto}

/* ══════════ CAPABILITY CARDS — the "What do we do?" row ══════════ */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,38px)}
.card{text-align:center}
.card .pic{aspect-ratio:1/1;background:var(--img-card-1);background-size:cover;background-position:center;
  margin-bottom:24px;transition:transform .5s cubic-bezier(.2,.7,.2,1),filter .5s;filter:saturate(.82)}
.card:nth-child(2) .pic{background-image:var(--img-card-2)}
.card:nth-child(3) .pic{background-image:var(--img-card-3)}
.card:nth-child(4) .pic{background-image:var(--img-card-4)}
.card:hover .pic{transform:translateY(-6px);filter:saturate(1)}
.card .label{display:block;margin-bottom:14px;line-height:1.5}
.card p{font-size:14.5px;line-height:1.65}
@media(max-width:900px){.cards{grid-template-columns:1fr 1fr;gap:34px}}
@media(max-width:520px){.cards{grid-template-columns:1fr;gap:44px}}

/* ══════════ SECTOR BAND — solid navy, angled edge ══════════
   Deliberately NOT a pale wash over a photo. The photo sits at low opacity
   under a heavy navy gradient, and the block is cut on a diagonal that
   alternates direction so the sections interlock instead of fading. */
.band{position:relative;background:var(--brand);overflow:hidden;
  padding:clamp(58px,7.5vw,96px) 0 clamp(78px,10vw,124px);
  clip-path:polygon(0 0,100% 0,100% 100%,0 calc(100% - 54px))}
.band.b2,.band.b4{clip-path:polygon(0 0,100% 0,100% calc(100% - 54px),0 100%)}
.band .bg{position:absolute;inset:0;background:var(--img-band-1);
  background-size:cover;background-position:center;opacity:.3}
.band .bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(102deg,rgba(19,37,88,.93) 0%,rgba(19,37,88,.58) 100%)}
.band.b2 .bg{background-image:var(--img-band-2)}
.band.b3 .bg{background-image:var(--img-band-3)}
.band.b4 .bg{background-image:var(--img-band-4)}
.band .inner{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;
  padding:0 var(--gut);text-align:left}
.band .num{display:block;font-size:12px;font-weight:500;letter-spacing:.32em;
  text-transform:uppercase;color:rgba(255,255,255,.58);margin-bottom:15px}
.band h2{color:#fff;max-width:18ch}
.band .rule{width:66px;height:3px;background:#fff;opacity:.4;margin-top:26px}

/* ══════════ SECTOR CONTENT — asymmetric split ══════════
   Heading and copy sit in two unequal columns that swap sides each section,
   instead of one narrow centred column repeated down the page. */
.split{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(26px,5vw,68px);align-items:start}
.split .sp-a .num{display:block;font-size:clamp(46px,6.5vw,78px);font-weight:200;
  color:var(--line);line-height:.95;margin-bottom:10px}
.split .sp-a .rule{width:54px;height:3px;background:var(--accent);margin:20px 0 0}
.split .sp-b p{font-size:15.5px;line-height:1.75}
.split .pic{aspect-ratio:16/10;background:var(--img-inline);background-size:cover;
  background-position:center;margin-top:30px;filter:saturate(.85)}
@media(max-width:820px){
  .split{grid-template-columns:1fr;gap:22px}
  .split .sp-a .num{font-size:44px}
}
/* flipped sections put the copy on the left — desktop only, so the reading
   order on a phone stays heading-then-copy */
@media(min-width:821px){
  .split.flip{grid-template-columns:1.18fr .82fr}
  .split.flip .sp-a{order:2}
  .split.flip .sp-b{order:1}
}

/* capabilities as a hairline box grid, not a bulleted list */
.capbox{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:clamp(32px,4.5vw,54px)}
.capbox div{background:var(--paper);padding:19px 21px;font-size:14px;font-weight:300;
  color:var(--ink-soft);display:flex;gap:12px;align-items:flex-start;transition:.2s}
.capbox div:hover{background:var(--paper-alt);color:var(--ink)}
.capbox div b{font-size:10.5px;font-weight:600;color:var(--accent);letter-spacing:.08em;
  flex-shrink:0;padding-top:3px;font-variant-numeric:tabular-nums}
section.alt .capbox div{background:var(--paper-alt)}
section.alt .capbox div:hover{background:var(--paper)}
@media(max-width:820px){.capbox{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.capbox{grid-template-columns:1fr}}

/* ══════════ VALUES / PURPOSE ══════════ */
.pvm{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);margin-bottom:clamp(38px,5vw,60px)}
.pvm div{background:var(--paper);padding:clamp(24px,3vw,34px) clamp(22px,2.6vw,30px)}
.pvm div .label{display:block;color:var(--accent);margin-bottom:12px}
.pvm div p{font-size:16px;line-height:1.6;color:var(--ink);font-weight:300}
@media(max-width:760px){.pvm{grid-template-columns:1fr}}
.values{display:flex;flex-wrap:wrap;gap:12px}
.values span{border:1px solid var(--line);padding:12px 24px;font-size:13.5px;font-weight:300;
  letter-spacing:.05em;color:var(--ink);transition:.2s}
.values span:hover{border-color:var(--accent);color:var(--accent)}

/* ══════════ TEAM ══════════ */
.teamgroup{margin-bottom:44px}
.teamgroup>.label{display:block;color:var(--accent);margin-bottom:22px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.6vw,32px)}
.member{text-align:center}
.member .av{aspect-ratio:1/1;background:linear-gradient(150deg,#dfe4e6,#b8c3c8);margin-bottom:14px;
  display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:200;color:#fff;letter-spacing:1px}
.member b{display:block;font-size:15px;font-weight:400;color:var(--ink)}
.member span{font-size:12.5px;font-weight:300;color:var(--muted)}
@media(max-width:820px){.team{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.team{grid-template-columns:1fr 1fr}}

/* ══════════ CONTACT ══════════ */
.contact{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(34px,6vw,80px);align-items:start}
@media(max-width:860px){.contact{grid-template-columns:1fr;gap:44px}}
.cinfo .label{display:block;color:var(--accent);margin-bottom:18px}
.cinfo address{font-style:normal;font-size:16px;font-weight:300;line-height:1.85;color:var(--ink-soft)}
.cinfo address b{display:block;font-weight:400;color:var(--ink);margin-bottom:6px}
.cinfo a{border-bottom:1px solid var(--line);transition:.2s}
.cinfo a:hover{border-color:var(--accent);color:var(--accent)}
form{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.f{display:flex;flex-direction:column;gap:8px}
.f.full{grid-column:1/-1}
.f label{font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.f input,.f textarea,.f select{font-family:inherit;font-size:15px;font-weight:300;color:var(--ink);
  border:none;border-bottom:1px solid var(--line);background:none;padding:11px 2px;outline:none;transition:.2s;width:100%}
.f textarea{min-height:110px;resize:vertical;line-height:1.6}
.f input:focus,.f textarea:focus,.f select:focus{border-bottom-color:var(--accent)}
.f input.bad,.f textarea.bad{border-bottom-color:#c0392b}
form .btn{grid-column:1/-1;justify-self:start;margin-top:10px}
.fmsg{grid-column:1/-1;font-size:13.5px;font-weight:400;padding:13px 16px;display:none}
.fmsg.on{display:block}
.fmsg.err{background:#fdeced;color:#c0392b}
.fmsg.ok{background:#eaf4ee;color:#2e7d4f}
@media(max-width:560px){form{grid-template-columns:1fr}}

/* ══════════ FOOTER ══════════ */
footer{background:var(--deep);color:#cfc9c4;padding:clamp(50px,7vw,82px) 0 34px}
footer .fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,5vw,60px);margin-bottom:48px}
@media(max-width:760px){footer .fgrid{grid-template-columns:1fr;gap:34px}}
footer .logo{height:66px;filter:brightness(0) invert(1)}
footer p{color:#a49d97;font-size:14.5px;margin-top:20px;max-width:340px}
footer .label{display:block;color:#fff;margin-bottom:16px;font-size:11.5px}
footer nav a{display:block;padding:6px 0;font-size:14px;font-weight:300;color:#a49d97;transition:.2s}
footer nav a:hover{color:#fff}
.fbot{border-top:1px solid rgba(255,255,255,.11);padding-top:26px;display:flex;
  align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.fbot small{font-size:12.5px;color:#7d7671;font-weight:300}
.fsoc{display:flex;gap:10px}
.fsoc a{width:36px;height:36px;border:1px solid rgba(255,255,255,.2);display:flex;
  align-items:center;justify-content:center;transition:.2s}
.fsoc a:hover{background:#fff;border-color:#fff}
.fsoc svg{width:15px;height:15px;color:#cfc9c4}
.fsoc a:hover svg{color:var(--deep)}

/* back to top */
#top{position:fixed;right:24px;bottom:24px;z-index:80;width:46px;height:46px;
  background:var(--ink);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;
  justify-content:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:.28s}
#top.on{opacity:1;visibility:visible;transform:none}
#top:hover{background:var(--accent)}
#top svg{width:16px;height:16px}

/* ══════════ SCROLL REVEAL — a wipe, not a fade ══════════
   Ends on a NEGATIVE inset rather than 0, so once revealed the clip box sits
   outside the element and hover transforms (the cards lift 6px) are not
   clipped off. Animating to inset(0) would shear them. */
.rv{clip-path:inset(0 0 100% 0);transition:clip-path .8s cubic-bezier(.22,.61,.36,1)}
.rv.in{clip-path:inset(-40% -40% -40% -40%)}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{clip-path:none;transition:none}
  .card .pic,.drawer,header{transition:none}
}