/* Cube Automation — site styles
   Minimal, editorial, prestige. Black + bone + sparing orange. */

@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --orange:#F26F21;
  --orange-soft:#FFF1E6;
  --ink:#0E0E10;
  --ink-2:#1F2024;
  --ink-3:#4A4E55;
  --ink-4:#6B7079;
  --ink-5:#9AA0A6;
  --line:rgba(14,14,16,.10);
  --line-soft:rgba(14,14,16,.06);
  --bone:#F7F5F0;
  --paper:#FBFAF6;
  --white:#FFFFFF;

  --display:"Archivo Black","Inter Tight",system-ui,sans-serif;
  --sans:"Inter",-apple-system,system-ui,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;

  --maxw:1240px;
  --pad:48px;
}
@media (max-width: 760px){ :root{ --pad:22px } }

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{font-size:16px;line-height:1.6;font-weight:400}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

/* Top accent rule — the ONE place orange shows in chrome */
.accent-rule{height:2px;background:var(--orange)}

/* ===== Header ===== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(251,250,246,.88);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.site-header .inner{max-width:var(--maxw);margin:0 auto;padding:18px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px}
.site-header .brand{display:flex;align-items:center;gap:14px}
.site-header .brand img{height:36px}
.site-header nav{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.site-header nav a{font-size:13px;font-weight:500;color:var(--ink-2);padding:8px 12px;border-radius:6px;letter-spacing:.005em}
.site-header nav a:hover{background:var(--bone);color:var(--ink)}
.site-header nav a.active{color:var(--ink)}
.site-header nav a.active::after{content:"";display:block;height:2px;background:var(--orange);margin-top:6px}
.site-header .cta{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;padding:11px 18px;border:1px solid var(--ink);color:var(--ink);transition:.2s}
.site-header .cta:hover{background:var(--ink);color:var(--white)}
.menu-toggle{display:none;background:none;border:0;font-size:24px;cursor:pointer}
@media (max-width: 900px){
  .site-header nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;align-items:stretch;padding:14px var(--pad);border-bottom:1px solid var(--line)}
  .site-header nav.open{display:flex}
  .site-header nav a{padding:14px 8px;border-bottom:1px solid var(--line-soft)}
  .site-header .cta{display:none}
  .menu-toggle{display:block}
}

/* ===== Layout primitives ===== */
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
section{padding:96px 0}
section.tight{padding:64px 0}
section.bone{background:var(--bone)}
section.ink{background:var(--ink);color:#EEEAE0}
section.ink .eyebrow{color:var(--orange)}
section.ink h2, section.ink h3{color:#fff}
section.ink p{color:#C7C3BA}
section + section{border-top:1px solid var(--line-soft)}

@media (max-width:760px){ section{padding:64px 0} }

/* ===== Typography ===== */
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-4);margin:0 0 22px;font-weight:500}
.eyebrow .num{color:var(--orange);margin-right:10px}
h1,h2,h3,h4{font-family:var(--display);font-weight:900;letter-spacing:-.02em;line-height:1;color:var(--ink);margin:0}
h1{font-size:clamp(54px, 8vw, 112px);line-height:.92;text-wrap:balance}
h2{font-size:clamp(36px, 4.6vw, 64px);line-height:.96;text-wrap:balance}
h3{font-size:clamp(24px, 2.4vw, 32px);line-height:1.05;letter-spacing:-.015em}
h4{font-size:18px;letter-spacing:-.005em;line-height:1.2}
.lede{font-size:clamp(18px, 1.8vw, 22px);line-height:1.55;color:var(--ink-3);max-width:60ch;text-wrap:pretty;font-weight:400}
.lede.large{font-size:clamp(20px, 2.2vw, 28px);color:var(--ink-2);font-weight:400;line-height:1.45}
p{margin:0 0 16px;text-wrap:pretty}
small,.small{font-size:13px;color:var(--ink-4)}
em.accent{font-style:normal;color:var(--orange)}
strong{font-weight:600;color:var(--ink)}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;padding:18px 28px;border-radius:0;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;transition:.2s;font-weight:500}
.btn:hover{background:transparent;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.orange{background:var(--orange);border-color:var(--orange);color:#fff}
.btn.orange:hover{background:#B14808;border-color:#B14808;color:#fff}
.btn .arr{font-size:14px;letter-spacing:0;font-family:var(--sans)}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* ===== Hero ===== */
.hero{padding:120px 0 96px;position:relative;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.3fr .7fr;gap:80px;align-items:end}
.hero h1 em{font-style:normal;display:inline}
.hero .right{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.hero .meta{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);border-left:2px solid var(--orange);padding:6px 0 6px 14px;line-height:1.7}
@media (max-width:900px){ .hero{padding:80px 0 60px} .hero .grid{grid-template-columns:1fr;gap:40px} }

/* ===== Section head ===== */
.section-head{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;margin-bottom:56px;align-items:end}
.section-head .right{max-width:55ch}
@media (max-width:900px){ .section-head{grid-template-columns:1fr;gap:18px} }

/* ===== Cards / lists ===== */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.cards .card{background:var(--paper);padding:40px 36px;display:flex;flex-direction:column;gap:14px}
.cards .card .idx{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--ink-5)}
.cards .card h3{margin:6px 0 0}
.cards .card p{color:var(--ink-3);font-size:15px;margin:0}
.cards .card a.more{margin-top:auto;padding-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);display:inline-flex;gap:8px;align-items:center}
.cards .card a.more::after{content:"→"}
.cards .card a.more:hover{color:var(--orange)}
.cards.cols-4{grid-template-columns:repeat(4,1fr)}
.cards.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){ .cards,.cards.cols-3,.cards.cols-4{grid-template-columns:1fr} }

/* ===== Numbered editorial list ===== */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.steps .step{padding:32px 28px 28px;border-left:1px solid var(--line);position:relative}
.steps .step:first-child{border-left:0;padding-left:0}
.steps .step .n{font-family:var(--display);font-size:14px;color:var(--orange);letter-spacing:.04em}
.steps .step h4{margin:18px 0 8px}
.steps .step p{color:var(--ink-3);font-size:14.5px}
@media (max-width:900px){ .steps{grid-template-columns:1fr} .steps .step{border-left:0;border-top:1px solid var(--line);padding:24px 0} .steps .step:first-child{border-top:0;padding-top:0} }

/* ===== Stats / quote ===== */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;border-top:1px solid var(--line);padding-top:32px}
.stat-grid .stat .v{font-family:var(--display);font-size:clamp(40px, 5vw, 72px);line-height:1;letter-spacing:-.03em}
.stat-grid .stat .v em{font-style:normal;color:var(--orange)}
.stat-grid .stat .l{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin-top:14px}
@media (max-width:900px){ .stat-grid{grid-template-columns:repeat(2,1fr);gap:28px} }

blockquote.pull{margin:0;padding:48px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
blockquote.pull p{font-family:var(--display);font-size:clamp(26px,2.6vw,40px);line-height:1.1;letter-spacing:-.02em;color:var(--ink);max-width:24ch;margin:0 0 24px;text-wrap:balance}
blockquote.pull cite{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);font-style:normal}

.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.testimonials .t{padding:32px 28px;border-left:1px solid var(--line)}
.testimonials .t:first-child{border-left:0;padding-left:0}
.testimonials .t p{font-size:16px;line-height:1.55;color:var(--ink-2);margin:0 0 20px;text-wrap:pretty}
.testimonials .t cite{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);font-style:normal}
@media (max-width:900px){ .testimonials{grid-template-columns:1fr} .testimonials .t{border-left:0;border-top:1px solid var(--line);padding:28px 0} .testimonials .t:first-child{border-top:0;padding-top:0} }

/* ===== Tables ===== */
table.data{width:100%;border-collapse:collapse;font-size:14.5px}
table.data th, table.data td{padding:16px 18px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
table.data th{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);font-weight:500}
table.data tr:last-child td{border-bottom:0}
table.data td.num{font-variant-numeric:tabular-nums;font-weight:500}
.table-wrap{border:1px solid var(--line);background:var(--paper)}
section.ink table.data th, section.ink table.data td{border-color:rgba(255,255,255,.10);color:#E7E3D9}
section.ink table.data th{color:#A8A39A}

/* ===== Two column body content ===== */
.long{display:grid;grid-template-columns:.7fr 1.3fr;gap:64px;align-items:start}
.long .key h2{margin-bottom:12px}
.long .body p{margin:0 0 18px;font-size:17px;line-height:1.65;color:var(--ink-2)}
.long .body h3{margin:36px 0 14px;font-size:22px}
.long .body ul{margin:0 0 22px;padding:0;list-style:none}
.long .body ul li{position:relative;padding:8px 0 8px 24px;border-bottom:1px solid var(--line-soft)}
.long .body ul li::before{content:"";position:absolute;left:0;top:18px;width:10px;height:1px;background:var(--orange)}
.long .body ul li:last-child{border-bottom:0}
@media (max-width:900px){ .long{grid-template-columns:1fr;gap:24px} }

/* ===== Pill / tag ===== */
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:5px 10px;border:1px solid var(--line);color:var(--ink-3);border-radius:999px}

/* ===== Suburb groups (location pages) ===== */
.suburbs{display:grid;grid-template-columns:repeat(2,1fr);gap:0}
.suburbs .group{padding:28px 32px;border-left:1px solid var(--line);border-top:1px solid var(--line)}
.suburbs .group:nth-child(odd){border-left:0}
.suburbs .group:nth-child(-n+1){border-top:0}
.suburbs .group .label{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.suburbs .group .list{font-size:15px;color:var(--ink-2);line-height:1.6}
@media (min-width:761px){
  .suburbs .group:nth-child(1),.suburbs .group:nth-child(2){border-top:0}
}
@media (max-width:760px){ .suburbs{grid-template-columns:1fr} .suburbs .group{border-left:0;border-top:1px solid var(--line);padding:24px 0} .suburbs .group:first-child{border-top:0;padding-top:0} }

/* ===== FAQ ===== */
details.faq{border-bottom:1px solid var(--line);padding:0}
details.faq summary{padding:26px 0;cursor:pointer;list-style:none;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;font-family:var(--display);font-size:20px;letter-spacing:-.01em;line-height:1.2}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-family:var(--display);font-weight:900;color:var(--orange);font-size:24px;line-height:1;flex-shrink:0;transition:.2s}
details.faq[open] summary::after{content:"–"}
details.faq .content{padding:0 0 28px;color:var(--ink-3);max-width:65ch;font-size:16px;line-height:1.6}
details.faq .content p{margin:0 0 12px}

/* ===== Forms ===== */
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 24px}
.form-grid .full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:8px}
.field label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4)}
.field input, .field select, .field textarea{font-family:var(--sans);font-size:15px;padding:14px 16px;border:1px solid var(--line);background:var(--white);color:var(--ink);border-radius:0;outline:none;transition:.15s}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--ink)}
.field textarea{min-height:120px;resize:vertical;font-family:var(--sans)}
.radio-group{display:flex;flex-wrap:wrap;gap:8px}
.radio-group label{padding:10px 14px;border:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.radio-group label input{accent-color:var(--orange)}
.radio-group label:has(input:checked){border-color:var(--ink);background:var(--ink);color:#fff}
@media (max-width:760px){ .form-grid{grid-template-columns:1fr} }

/* ===== Contact form (stepped) ===== */
.field[data-step]{padding:28px 0;border-top:1px solid var(--line-soft)}
.field[data-step]:first-child{border-top:0}
.field[data-step] > label{display:block;font-family:var(--display);font-size:18px;letter-spacing:-.01em;text-transform:none;color:var(--ink);margin-bottom:16px;font-weight:500}
.radios{display:flex;flex-wrap:wrap;gap:8px}
.radios > label{padding:10px 16px;border:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;display:inline-flex;gap:8px;align-items:center;background:var(--white);transition:.15s}
.radios > label input{accent-color:var(--orange);width:14px;height:14px;margin:0}
.radios > label:has(input:checked){border-color:var(--ink);background:var(--ink);color:#fff}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid2 input{font-family:var(--sans);font-size:15px;padding:14px 16px;border:1px solid var(--line);background:var(--white);color:var(--ink);border-radius:0;outline:none;transition:.15s}
.grid2 input:focus{border-color:var(--ink)}
#quoteForm textarea{font-family:var(--sans);font-size:15px;padding:14px 16px;border:1px solid var(--line);background:var(--white);color:var(--ink);border-radius:0;outline:none;width:100%;resize:vertical}
#quoteForm textarea:focus{border-color:var(--ink)}
@media (max-width:760px){ .grid2{grid-template-columns:1fr} }

.cinfo{padding:24px 0;border-top:1px solid var(--line)}
.cinfo:first-child{border-top:0;padding-top:0}
.cinfo-label{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);margin-bottom:8px}
.cinfo-value{font-family:var(--display);font-size:28px;letter-spacing:-.02em;line-height:1.1}
.cinfo-value a{color:var(--ink)}
.cinfo-value a:hover{color:var(--orange)}
.cinfo-sub{font-size:13px;color:var(--ink-3);margin-top:6px}
@media (max-width:900px){ body[data-page="contact"] .container > div[style*="grid-template-columns"]{grid-template-columns:1fr !important;gap:48px !important} }

/* ===== Footer ===== */
.site-footer{background:var(--ink);color:#C7C3BA;padding:96px 0 32px;margin-top:0}
.site-footer a{color:#C7C3BA}
.site-footer a:hover{color:#fff}
.site-footer .grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:48px}
.site-footer h5{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#A8A39A;font-weight:500;margin:0 0 16px}
.site-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px;font-size:14px}
.site-footer .brand img{height:40px;margin-bottom:18px}
.site-footer .brand p{font-size:14px;color:#A8A39A;max-width:32ch;margin:0 0 18px}
.site-footer .legal{margin-top:64px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);display:flex;justify-content:space-between;gap:24px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#7E7A72;flex-wrap:wrap}
@media (max-width:900px){ .site-footer .grid{grid-template-columns:1fr 1fr;gap:36px} }
@media (max-width:600px){ .site-footer .grid{grid-template-columns:1fr} }

/* ===== Page header banner ===== */
.page-banner{padding:96px 0 48px;border-bottom:1px solid var(--line)}
.page-banner .crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-4);margin-bottom:24px}
.page-banner .crumbs a:hover{color:var(--orange)}
.page-banner h1{font-size:clamp(44px,6vw,84px)}
.page-banner .lede{margin-top:24px}
@media (max-width:760px){ .page-banner{padding:64px 0 36px} }

/* ===== Util ===== */
.divider{height:1px;background:var(--line);margin:0}
.spacer-sm{height:24px} .spacer-md{height:48px} .spacer-lg{height:80px}
.center{text-align:center}
.muted{color:var(--ink-4)}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange)}

/* Inline hairline number (editorial) */
.bignum{font-family:var(--display);font-size:clamp(80px,12vw,180px);line-height:.85;letter-spacing:-.04em;color:var(--ink)}
.bignum em{color:var(--orange);font-style:normal}

/* Card list of installs */
.installs{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.installs .ins{padding:28px 32px;border-left:1px solid var(--line)}
.installs .ins:first-child{border-left:0;padding-left:0}
.installs .ins .ttl{font-family:var(--display);font-size:18px;letter-spacing:-.01em;margin-bottom:8px}
.installs .ins .desc{color:var(--ink-3);font-size:14px;line-height:1.55}
@media (max-width:900px){ .installs{grid-template-columns:1fr} .installs .ins{border-left:0;border-top:1px solid var(--line);padding:24px 0} .installs .ins:first-child{border-top:0;padding-top:0} }