/* ===== Brand tokens (taken from the Macquarie Tech logo) ===== */
:root{
  --black:#000000;          /* logo background */
  --panel:#0D0E10;          /* alternate sections */
  --card:#131417;
  --line:#222328;
  --line-strong:#33353B;
  --silver:#E2E2E5;         /* wordmark silver */
  --silver-warm:#F2F0EC;    /* highlight on the mark */
  --grey:#9C9EA4;           /* body copy */
  --grey-dim:#6F7177;
  --signal:#F5431A;         /* the red point on the mark */
  --signal-glow:rgba(245,67,26,.35);

  --font:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --container:1200px;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:88px;}
body{
  margin:0;
  background:var(--black);
  color:var(--grey);
  font:400 16px/1.75 var(--font);
  -webkit-font-smoothing:antialiased;
}
img,svg{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
ul,ol,dl,dd{margin:0;padding:0;list-style:none;}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;}

.container{max-width:var(--container);margin:0 auto;padding:0 32px;}

h1,h2,h3,h4{margin:0;color:var(--silver);font-family:var(--font);text-wrap:balance;}
h1{font-size:clamp(2.5rem,4.8vw,4.25rem);font-weight:300;line-height:1.1;letter-spacing:-.02em;}
h2{font-size:clamp(1.85rem,3vw,2.6rem);font-weight:300;line-height:1.2;letter-spacing:-.015em;}
h3{font-size:18px;font-weight:500;line-height:1.4;letter-spacing:.01em;}

/* Wide-tracked caps, echoing "T E C H" in the wordmark */
.eyebrow{
  display:inline-flex;
  align-items:flex-start;
  line-height:1.6;
  gap:14px;
  margin:0 0 22px;
  font-size:12px;
  font-weight:500;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--silver);
}
.eyebrow::before{
  content:"";
  flex-shrink:0;
  width:8px;
  height:8px;
  border-radius:50%;
  margin-top:5.5px;
  background:var(--signal);
  box-shadow:0 0 12px 2px var(--signal-glow);
}

/* Brushed-metal text, from the mark's silver panels */
.metal{
  display:block;
  background:linear-gradient(100deg,#7E8086 0%,#F2F0EC 38%,#B7B8BC 62%,#6B6D72 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:13px 24px;
  border:1px solid transparent;
  border-radius:4px;
  font:600 13px/1.2 var(--font);
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s;
}
.btn-lg{padding:17px 30px;}
.btn-signal{background:var(--signal);color:var(--black);}
.btn-signal:hover{box-shadow:0 0 28px var(--signal-glow);background:#FF5A33;}
.btn-outline{border-color:var(--line-strong);color:var(--silver);}
.btn-outline:hover{border-color:var(--silver);}

/* ===== Header ===== */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(0,0,0,.86);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.site-header.scrolled{border-bottom-color:var(--line);}
.header-inner{display:flex;align-items:center;gap:36px;height:84px;}
.logo img{width:auto;height:56px;}
.main-nav{display:flex;align-items:center;gap:34px;margin-left:auto;}
.main-nav a{font-size:12.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);transition:color .2s;}
.main-nav a:hover{color:var(--silver);}
.nav-contact{display:none;}
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  margin-left:auto;
  border:1px solid var(--line-strong);
  border-radius:4px;
  background:transparent;
  cursor:pointer;
}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{
  position:relative;
  display:block;
  width:18px;
  height:1.5px;
  margin:0 auto;
  background:var(--silver);
  transition:transform .2s,background .2s;
}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;}
.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);}

/* ===== Hero ===== */
.hero{
  position:relative;
  padding:64px 0 0;
  overflow:hidden;
  background:radial-gradient(55% 60% at 78% 42%,rgba(245,67,26,.09),transparent 70%),var(--black);
}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:48px;align-items:center;min-height:560px;}
.hero-lead{max-width:34em;margin:28px 0 40px;font-size:17px;}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;}
.hero-art img{width:100%;max-width:560px;height:auto;margin-left:auto;}
.capabilities{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:72px;
  border-top:1px solid var(--line);
}
.capabilities li{
  padding:26px 0;
  font-size:12px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--silver);
}
.capabilities li + li{padding-left:28px;border-left:1px solid var(--line);}

/* ===== Sections ===== */
.section{padding:112px 0;border-top:1px solid var(--line);}
.section-panel{background:var(--panel);}
.section-head{max-width:720px;margin-bottom:60px;}
.section-head p:last-child{margin:18px 0 0;font-size:16.5px;}

/* About */
.about-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.4fr);gap:48px;align-items:start;}
.statement{margin:0;font-size:clamp(1.5rem,2.4vw,2.1rem);font-weight:300;line-height:1.45;color:var(--silver);}
.about-copy{max-width:40em;margin:28px 0 0;}

/* Services */
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
.card{position:relative;padding:40px 34px;background:var(--card);transition:background-color .25s;}
.card::before{
  content:"";
  position:absolute;
  top:-1px;
  left:0;
  width:0;
  height:2px;
  background:var(--signal);
  transition:width .35s ease;
}
.card:hover{background:#17181C;}
.card:hover::before{width:100%;}
.card-icon{width:34px;height:34px;margin-bottom:28px;fill:none;stroke:var(--silver);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;}
.card-icon .dot{fill:var(--signal);stroke:none;}
.card h3{margin-bottom:12px;}
.card p{margin:0 0 22px;font-size:15px;}
.card ul{display:grid;gap:8px;padding-top:20px;border-top:1px solid var(--line);}
.card li{position:relative;padding-left:18px;font-size:14px;color:var(--silver);}
.card li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:2px;background:var(--signal);}

/* Approach — a real sequence, so the stages are numbered */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line-strong);}
.step{position:relative;padding:36px 28px 0 0;}
.step::before{
  content:"";
  position:absolute;
  top:-5px;
  left:0;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--black);
  border:1px solid var(--silver);
}
.step:first-child::before{background:var(--signal);border-color:var(--signal);box-shadow:0 0 12px 2px var(--signal-glow);}
.step-num{display:block;margin-bottom:18px;font-size:44px;font-weight:200;line-height:1;color:var(--silver);}
.step h3{margin-bottom:10px;letter-spacing:.18em;text-transform:uppercase;font-size:14px;}
.step p{margin:0;font-size:15px;}

/* Why */
.why-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:80px;align-items:start;}
.why-intro{max-width:30em;margin:22px 0 0;}
.why-list div{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:24px;padding:26px 0;border-top:1px solid var(--line);}
.why-list div:last-child{border-bottom:1px solid var(--line);}
.why-list dt{font-weight:500;color:var(--silver);}
.why-list dd{font-size:15px;}

/* Industries */
.industry-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);}
.industry-grid li{
  display:flex;
  align-items:center;
  gap:14px;
  padding:30px 28px;
  background:var(--black);
  font-size:15px;
  font-weight:500;
  letter-spacing:.04em;
  color:var(--silver);
}
.industry-grid li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--grey-dim);flex-shrink:0;}

/* CTA */
.cta{
  padding:128px 0;
  border-top:1px solid var(--line);
  text-align:center;
  background:radial-gradient(45% 70% at 50% 100%,rgba(245,67,26,.16),transparent 70%),var(--black);
}
.cta-inner{display:flex;flex-direction:column;align-items:center;}
.cta h2{max-width:18ch;font-size:clamp(2rem,3.8vw,3.2rem);}
.cta p:not(.eyebrow){max-width:36em;margin:22px 0 40px;}
.cta .btn{letter-spacing:.08em;text-transform:none;font-size:15px;}

/* Footer */
.site-footer{padding:72px 0 32px;border-top:1px solid var(--line);font-size:14.5px;}
.footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid var(--line);}
.footer-brand img{width:auto;height:52px;}
.footer-brand p{max-width:28em;margin:20px 0 0;}
.footer-col h4{margin-bottom:18px;font-size:11.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--silver);}
.footer-col li{margin-bottom:10px;}
.footer-col a:hover{color:var(--silver);}
.footer-bottom{padding-top:26px;font-size:13px;color:var(--grey-dim);}

/* ===== Responsive ===== */
@media (max-width:1080px){
  .main-nav{gap:24px;}
  .header-cta{display:none;}
  .nav-contact{display:inline;}
}
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;min-height:0;gap:24px;}
  .hero-art{order:-1;}
  .hero-art img{max-width:340px;margin:0;}
  .capabilities{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:56px;}
  .capabilities li:nth-child(3){padding-left:0;border-left:0;}
  .capabilities li:nth-child(n+3){border-top:1px solid var(--line);}
  .about-grid,.why-grid{grid-template-columns:1fr;gap:28px;}
  .service-grid,.industry-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:48px;}
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  .nav-toggle{display:grid;place-items:center;}
  .main-nav{
    position:absolute;
    top:84px;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px 24px 18px;
    background:var(--black);
    border-bottom:1px solid var(--line);
  }
  .main-nav.open{display:flex;}
  .main-nav a{padding:15px 2px;border-bottom:1px solid var(--line);font-size:13px;}
  .main-nav a:last-child{border-bottom:0;}
}
@media (max-width:640px){
  .container{padding:0 20px;}
  .header-inner{height:72px;}
  .main-nav{top:72px;}
  .logo img{height:40px;}
  .hero{padding-top:32px;}
  .hero-art img{max-width:240px;}
  .hero-lead{font-size:16px;}
  .hero-actions .btn{flex:1 1 100%;}
  .capabilities{grid-template-columns:1fr;}
  .capabilities li,.capabilities li + li{padding:18px 0;border-left:0;}
  .capabilities li + li{border-top:1px solid var(--line);}
  .section{padding:80px 0;}
  .section-head{margin-bottom:40px;}
  .service-grid,.industry-grid,.steps{grid-template-columns:1fr;}
  .card{padding:32px 24px;}
  .why-list div{grid-template-columns:1fr;gap:6px;}
  .cta{padding:96px 0;}
  .cta .btn{width:100%;}
  .footer-top{grid-template-columns:1fr;gap:32px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .card::before{transition:none;}
}