/* Automation projects — on top of /portal/assets/portal.css (tokens, header, footer, fields, buttons).
   Colour chapters: night (the opening), deep, ice, paper, amber (the claim), paper (the enquiry). */

/* ---------- the header takes the colours of whatever is under each half of it (as on the home page) ---------- */
.au-page .site-head { background: none; color: var(--hr-ink, var(--frost)); transition: color 300ms ease; }
.au-page .site-head::before, .au-page .site-head::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: -1; transition: background-color 300ms ease; }
.au-page .site-head::before { left: 0; width: var(--split, 50%); background: var(--hl, var(--night)); }
.au-page .site-head::after { left: var(--split, 50%); right: 0; background: var(--hr, var(--night)); }
.au-page .site-head .wordmark { color: var(--hl-ink, var(--frost)); transition: color 300ms ease; }
.au-page .site-head.open .site-nav { color: var(--frost); }
/* near a heading (2 cm) its section swaps to a partner colour; the heading leans toward the pointer */
[data-swap] { transition: background-color 450ms ease; }
.au-hero.is-swapped { background: var(--deep); }
.au-band.deep.is-swapped { background: var(--night); }
.au-band.ice.is-swapped, .au-ten.is-swapped { background: var(--lime); }
.au-band.paper.is-swapped, .au-how.is-swapped, .au-form.is-swapped { background: var(--ice); }
.tilt { transform-origin: 50% 60%; }

/* ---------- the opening ---------- */
/* the heading runs across the top; the words sit left of the drawing */
.au-hero { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-content: center; align-items: start; min-height: calc(100svh - var(--header)); padding: 64px var(--m) 88px; background: var(--night); color: var(--frost); overflow: hidden; }
.au-hero-copy { display: contents; }
.au-hero h1 { grid-column: 1 / -1; font-size: clamp(2.1rem, 0.6rem + 5.2vw, 6.6rem); line-height: 0.9; }
.au-sub, .au-actions, .au-claim { grid-column: 1 / span 6; }
.au-sub { margin-top: 32px; max-width: 34rem; font-size: var(--step-lead); line-height: 1.35; color: var(--frost-soft); }
.au-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 36px; }
.au-link { font-weight: 500; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.22em; text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); transition: text-decoration-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) { .au-link:hover { text-decoration-color: currentColor; } }
.au-claim { margin-top: 40px; max-width: 34rem; font-size: var(--step-small); color: var(--frost-soft); }
.au-claim b { display: block; margin-bottom: 4px; color: var(--lime); font-size: var(--step-body); font-weight: 500; }
@media (prefers-reduced-motion: no-preference) {
  .au-load { opacity: 0; transform: translateY(18px); animation: au-load 760ms var(--ease-out) forwards; animation-delay: calc(var(--d, 0) * 90ms + 80ms); }
}
@keyframes au-load { to { opacity: 1; transform: none; } }

/* the workflow drawing: packets run along the wires, the outputs light in turn */
.au-flow { grid-column: 7 / -1; grid-row: 2 / span 3; align-self: center; margin: 32px 0 0; }
.au-flow svg { width: 100%; height: auto; display: block; overflow: visible; }
.au-flow .wires path { fill: none; stroke: color-mix(in srgb, var(--frost) 26%, transparent); stroke-width: 2; }
.au-flow .run { fill: none; stroke: var(--lime); stroke-width: 4; stroke-linecap: square; stroke-dasharray: 18 400; stroke-dashoffset: 18; opacity: 0; }
.au-flow .node rect { fill: color-mix(in srgb, var(--frost) 8%, var(--night)); }
.au-flow .node text { fill: var(--frost); font: 500 15px var(--font-text); }
.au-flow .core rect { fill: var(--deep); }
.au-flow .core text { font: 900 18px var(--font-display); text-transform: uppercase; letter-spacing: -0.01em; }
.au-flow .out rect { transition: fill 300ms ease; }
.au-flow .out.lit rect { fill: var(--lime); }
.au-flow .out.lit text { fill: var(--on-bright); }
@media (prefers-reduced-motion: no-preference) {
  .au-flow .run { animation: run 3.6s var(--ease-in-out) infinite; }
  .au-flow .r2 { animation-delay: 0.25s; } .au-flow .r3 { animation-delay: 0.5s; }
  .au-flow .r4, .au-flow .r5, .au-flow .r6 { animation-name: run-out; }
  .au-flow .r5 { animation-delay: 0.25s; } .au-flow .r6 { animation-delay: 0.5s; }
}
@keyframes run { 0% { stroke-dashoffset: 18; opacity: 1; } 40% { stroke-dashoffset: -190; opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes run-out { 0%, 48% { stroke-dashoffset: 18; opacity: 0; } 49% { opacity: 1; } 88% { stroke-dashoffset: -260; opacity: 1; } 89%, 100% { opacity: 0; } }

/* ---------- the three bands ---------- */
.au-band { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: 40px; align-items: center; padding: clamp(80px, 12vh, 140px) var(--m); }
.au-band.deep { background: var(--deep); color: var(--frost); }
.au-band.ice { background: var(--ice); }
.au-band.paper { background: var(--paper); }
.au-copy { grid-column: 1 / span 6; }
.au-copy h2 { font-size: clamp(2rem, 1rem + 2.6vw, 3.6rem); }
.au-copy p { margin-top: 24px; max-width: 34rem; font-size: var(--step-lead); line-height: 1.4; }
.au-band.deep .au-copy p { color: var(--frost-soft); }
.au-band > :last-child { grid-column: 8 / -1; }

/* your data, or the open web: two lists feed one table */
.au-merge { display: grid; grid-template-columns: 1fr 48px 1fr; grid-template-rows: auto auto; gap: 12px; }
.mg-col { display: grid; gap: 6px; align-content: start; }
.mg-h { margin-bottom: 4px; font-size: var(--step-small); color: var(--frost-soft); }
.mg-col i { padding: 10px 12px; background: color-mix(in srgb, var(--frost) 9%, transparent); font-style: normal; font-weight: 500; transition: background-color 300ms ease, color 300ms ease, transform 300ms var(--ease-out); }
.mg-col i.on { background: var(--lime); color: var(--ink); transform: translateX(4px); }
.mg-mid { display: grid; place-items: center; }
.mg-arrow { width: 2px; height: 70%; background: color-mix(in srgb, var(--frost) 26%, transparent); }
.mg-out { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 12px; padding: 16px 18px; background: var(--paper); color: var(--ink); }
.mg-out b { font: 900 clamp(2rem, 1.4rem + 1.8vw, 3rem)/1 var(--font-display); }
.mg-out span { font-size: var(--step-small); color: var(--soft); }

/* the AI receptionist: a call card with a live waveform and the transcript typing in */
.au-call { padding: 22px; background: var(--slab); color: var(--frost); }
.cl-top { display: flex; align-items: center; gap: 10px; font-size: var(--step-small); }
.cl-top b { font-weight: 500; }
.cl-dot { width: 9px; height: 9px; flex: none; background: var(--lime); }
.cl-time { margin-left: auto; color: #a7abb1; }
.cl-wave { display: flex; align-items: center; gap: 4px; height: 44px; margin: 18px 0; }
.cl-wave i { flex: 1; height: 100%; background: var(--lime); transform: scaleY(0.12); transform-origin: 50% 50%; }
.au-call.live .cl-wave i { animation: wave 1.1s ease-in-out infinite; }
.au-call.live .cl-wave i:nth-child(3n) { animation-delay: -0.3s; } .au-call.live .cl-wave i:nth-child(3n + 1) { animation-delay: -0.6s; } .au-call.live .cl-wave i:nth-child(4n) { animation-duration: 0.9s; }
@keyframes wave { 0%, 100% { transform: scaleY(0.15); } 50% { transform: scaleY(0.95); } }
.cl-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; min-height: 12.5em; }
.cl-lines li { max-width: 88%; padding: 10px 12px; font-size: var(--step-small); opacity: 0; transform: translateY(8px); transition: opacity 360ms ease, transform 360ms var(--ease-out); }
.cl-lines li.a { background: color-mix(in srgb, var(--frost) 10%, transparent); }
.cl-lines li.b { justify-self: end; background: var(--ice); color: var(--ink); }
.cl-lines li.in { opacity: 1; transform: none; }
.cl-done { margin-top: 14px; padding: 10px 12px; background: var(--lime); color: var(--ink); font-weight: 500; opacity: 0; transform: scale(0.97); transition: opacity 300ms ease, transform 300ms var(--ease-out); }
.cl-done.in { opacity: 1; transform: none; }

/* client holdings: a small interactive report; tap a bar to read it */
.au-hold { padding: 24px; background: var(--paper-2); }
.hd-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hd-top b { font: 900 1.5rem/1 var(--font-display); text-transform: uppercase; }
.hd-top span { font-size: var(--step-small); color: var(--soft); }
.hd-tabs { display: inline-flex; margin-top: 16px; padding: 3px; background: var(--paper-3); }
.hd-tabs button { min-height: 32px; padding: 0 12px; border: 0; background: transparent; font-size: 13px; font-weight: 500; color: var(--soft); cursor: pointer; transition: background-color 160ms ease, color 160ms ease; }
.hd-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.hd-bars { display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 10px; height: 220px; margin-top: 22px; }
.hd-bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.hd-bar i { display: block; width: 100%; height: calc(var(--v) * 1% * 100 / 58); background: var(--ink); transform: scaleY(0); transform-origin: 50% 100%; transition: transform 900ms var(--ease-out), background-color 200ms ease; }
.au-hold.in .hd-bar i { transform: none; }
.au-hold.in .hd-bar:nth-child(2) i { transition-delay: 80ms; } .au-hold.in .hd-bar:nth-child(3) i { transition-delay: 160ms; } .au-hold.in .hd-bar:nth-child(4) i { transition-delay: 240ms; }
.hd-bar span { margin-top: 8px; font-size: var(--step-small); font-weight: 500; text-align: left; }
.hd-bar[aria-pressed="true"] i { background: var(--lime); outline: 2px solid var(--ink); outline-offset: -2px; }
.hd-bar:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hd-read { margin-top: 16px; padding: 10px 12px; background: var(--paper); font-size: var(--step-small); }
.hd-read b { font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .hd-bar:hover i { background: var(--deep); } .hd-bar[aria-pressed="true"]:hover i { background: var(--lime); } }

/* ---------- anything your team repeats (round seven): the jobs we automate often, each one starts the enquiry ---------- */
.au-more { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: 40px; padding: clamp(88px, 13vh, 150px) var(--m); background: var(--night); color: var(--frost); }
.au-more.is-swapped { background: var(--deep); }
.more-head { grid-column: 1 / span 5; align-self: start; position: sticky; top: calc(var(--header) + 32px); }
.more-head h2 { font-size: clamp(2rem, 1rem + 2.6vw, 3.6rem); }
.more-head p { margin-top: 24px; max-width: 30rem; font-size: var(--step-lead); line-height: 1.4; color: var(--frost-soft); }
.more-list { grid-column: 6 / -1; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.more-list li:nth-child(4n + 1), .more-list li:nth-child(4n) { --tone: 9%; }
.more-item {
  position: relative; display: grid; align-content: start; gap: 10px; width: 100%; height: 100%; min-height: 172px; padding: 22px 22px 52px; border: 0; border-radius: 0; text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--frost) var(--tone, 5%), transparent); color: var(--frost);
  transition: background-color 260ms ease, color 260ms ease, transform var(--t-press, 160ms) var(--ease-out);
}
.more-item:active { transform: scale(0.98); }
.more-item b { font: 900 clamp(1.25rem, 1rem + 0.8vw, 1.75rem)/1 var(--font-display); letter-spacing: -0.02em; text-transform: uppercase; }
.more-item span { font-size: var(--step-small); line-height: 1.5; color: var(--frost-soft); transition: color 260ms ease; }
.more-item em { position: absolute; left: 22px; bottom: 18px; font-style: normal; font-size: var(--step-small); font-weight: 500; color: var(--lime); transition: transform 300ms var(--ease-out), color 260ms ease; }
.more-item em::after { content: " \2192"; }
.more-any { grid-column: 1 / -1; }
.more-any .more-item { min-height: 0; background: var(--lime); color: var(--on-bright); }
.more-any .more-item span { color: color-mix(in srgb, var(--on-bright) 72%, var(--lime)); }
.more-any .more-item em { color: var(--on-bright); }
@media (hover: hover) and (pointer: fine) {
  .more-item:hover { background: var(--lime); color: var(--on-bright); }
  .more-item:hover span { color: color-mix(in srgb, var(--on-bright) 72%, var(--lime)); }
  .more-item:hover em { color: var(--on-bright); transform: translateX(4px); }
  .more-any .more-item:hover { background: var(--frost); }
}
.more-item:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.more-list li.rv:nth-child(2) { transition-delay: 60ms; } .more-list li.rv:nth-child(3) { transition-delay: 120ms; } .more-list li.rv:nth-child(4) { transition-delay: 180ms; }
@media (max-width: 1080px) {
  .au-more { grid-template-columns: 1fr; }
  .more-head { grid-column: 1; position: static; }
  .more-list { grid-column: 1; }
}
@media (max-width: 720px) {
  .more-list { grid-template-columns: 1fr; }
  .more-list li { --tone: 5%; }
  .more-list li:nth-child(even) { --tone: 9%; }
  .more-item { min-height: 0; }
}

/* ---------- how a project runs ---------- */
.au-how { padding: clamp(80px, 12vh, 140px) var(--m); background: var(--paper-2); }
.au-how h2 { font-size: clamp(2rem, 1rem + 2.6vw, 3.6rem); }
.how-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); margin-top: 48px; }
.how-step { padding: 24px; background: var(--paper); }
.how-step h3 { font-size: 1.6rem; }
.how-step p { margin-top: 12px; color: var(--soft); }
.how-step:nth-child(2) { transition-delay: 90ms; } .how-step:nth-child(3) { transition-delay: 180ms; }

/* ---------- the claim ---------- */
.au-ten { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: center; padding: clamp(64px, 10vh, 120px) var(--m); background: var(--amber); overflow: hidden; }
.ten-big { grid-column: 1 / span 6; font: 900 clamp(7rem, 2rem + 18vw, 20rem)/0.8 var(--font-display); letter-spacing: -0.06em; }
.ten-copy { grid-column: 7 / -1; }
.ten-copy h2 { font-size: clamp(2rem, 1rem + 2.8vw, 3.6rem); }
.ten-copy p { margin-top: 20px; max-width: 34rem; font-size: var(--step-lead); line-height: 1.4; }

/* ---------- the enquiry ---------- */
.au-form { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: 32px; padding: clamp(80px, 12vh, 140px) var(--m); background: var(--paper); }
.enq-copy { grid-column: 1 / span 6; }
.enq-copy h2 { font-size: clamp(2rem, 1rem + 2.6vw, 3.6rem); }
.enq-copy p { margin-top: 20px; max-width: 30rem; font-size: var(--step-lead); line-height: 1.4; color: var(--soft); }
.enq { grid-column: 8 / -1; }
.enq .btn-lg { margin-top: 8px; }
.enq-fine { margin-top: 12px; font-size: 13px; color: var(--soft); }
.enq-done { padding: 28px; background: var(--lime); }
.enq-done h3 { font-size: 1.8rem; }
.enq-done p { margin-top: 10px; }

/* ---------- dark theme: the bright fields keep their light tokens ---------- */
:root[data-theme="dark"] :is(.au-ten, .cl-done, .enq-done, .mg-col i.on, .au-band.ice.is-swapped, .mg-out) {
  --ink: #0a0b0d; --soft: #4b4f55; --paper: #f4f4f1; --paper-2: #e8e8e2; --paper-3: #dcddd5; --ice: #bfe3ee;
  color: var(--ink);
}

/* ---------- tablet and phone ---------- */
@media (max-width: 1080px) {
  .au-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 56px; }
  .au-sub, .au-actions, .au-claim, .au-flow { grid-column: 1; }
  .au-flow { grid-row: auto; margin-top: 48px; }
  .au-band, .au-ten, .au-form { grid-template-columns: 1fr; }
  .au-copy, .au-band > :last-child, .ten-big, .ten-copy, .enq-copy, .enq { grid-column: 1; }
  .how-row { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .au-hero { padding: 40px var(--m) 56px; }
  .au-merge { grid-template-columns: 1fr 1fr; }
  .mg-mid { display: none; }
  .au-flow .node text { font-size: 17px; }
  .hd-bars { height: 180px; }
}