/* Buildcrew website v3 (28 Oct 2026). Brand tokens locked 12 Sep 2026 (brand/tokens.json).
   One stylesheet for the new home, industry pages and anything that uses the office demo.
   Old pages (guides, case studies, /desk) keep styles.css and are not affected by this file. */

@font-face{font-family:'Satoshi';src:url(/assets/fonts/satoshi-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url(/assets/fonts/satoshi-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url(/assets/fonts/satoshi-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url(/assets/fonts/dmsans-latin.woff2) format('woff2');font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --orange:#FF6900; --orange-600:#F54900; --orange-700:#CA3500; --orange-50:#FFF7ED; --orange-100:#FFEDD4; --orange-200:#FFD6A8;
  --ink:#0A0A0A; --white:#FFFFFF;
  --n50:#FAFAFA; --n100:#F5F5F5; --n150:#F0F0F0; --n200:#E5E5E5; --n300:#D4D4D4; --n400:#A1A1A1; --n500:#737373; --n600:#525252; --n700:#404040; --n800:#262626; --n900:#171717;
  --head:'Satoshi','DM Sans',system-ui,sans-serif; --body:'DM Sans',system-ui,sans-serif;
  --container:1200px; --gutter:24px;
  --r-sm:10px; --r:16px; --r-lg:24px;
  --ease:cubic-bezier(.2,.7,.2,1); --ease-out:cubic-bezier(.16,1,.3,1);
  --shadow-sm:0 1px 2px rgba(10,10,10,.06),0 1px 1px rgba(10,10,10,.03);
  --shadow:0 14px 34px -14px rgba(10,10,10,.2),0 2px 6px rgba(10,10,10,.05);
  --shadow-lg:0 50px 100px -40px rgba(10,10,10,.32),0 14px 30px -14px rgba(10,10,10,.12);
  /* The office demo is drawn as plain office software: light blue jobs, thin grey lines. */
  --job:#EDF4FF; --job-bar:#2F74F0; --job-ink:#0F2547; --job-mute:#4F6385; --grid:#E6EAF0; --off:#F3F4F6;
  --red:#DC3B40; --red-50:#FFF1F1; --amber:#A85A00; --amber-50:#FFF6E5; --amber-200:#F8D9A3; --green:#15803D; --green-50:#EAF6EE; --green-200:#BFE3CB;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{font-family:var(--body);font-size:16px;line-height:1.6;color:var(--ink);background:var(--white);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.section{padding:120px 0;position:relative}
.section--tint{background:var(--n50)}
.section--dark{background:var(--ink);color:var(--white)}

h1,h2,h3{font-family:var(--head);font-weight:500;letter-spacing:-.025em;line-height:1.05}
h1,h2{text-wrap:balance}
h1{font-size:clamp(40px,5.4vw,70px)}
h2{font-size:clamp(32px,4vw,54px)}
h3{font-size:20px;line-height:1.25;letter-spacing:-.015em;font-weight:700}
p{text-wrap:pretty}
.lead{font-size:clamp(17px,1.5vw,20px);line-height:1.5;color:var(--n600);max-width:56ch}
.section--dark .lead{color:var(--n400)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--orange-600)}
.eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}
.section-head{max-width:760px;margin:0 auto 56px;text-align:center;display:grid;justify-items:center;gap:16px}
.section-head .lead{margin:0 auto}

/* Buttons. One call to action on every page: Book a FREE demo. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--body);font-weight:700;border-radius:999px;white-space:nowrap;transition:transform .2s var(--ease),background-color .2s,box-shadow .2s,color .2s}
.btn--primary{background:var(--orange);color:var(--ink);box-shadow:0 1px 0 rgba(0,0,0,.05),0 10px 28px -12px rgba(255,105,0,.65)}
.btn--primary:hover{background:var(--orange-600);transform:translateY(-1px);box-shadow:0 16px 34px -14px rgba(255,105,0,.75)}
.btn--primary:active{transform:translateY(0)}
.btn--sm{font-size:14px;padding:10px 18px}
.btn--lg{font-size:17px;padding:17px 30px}
.btn__arrow{transition:transform .2s var(--ease)}
.btn:hover .btn__arrow{transform:translateX(3px)}

/* Scroll reveals. Hidden only once scripts run, so the page is never blank without them. */
:where(.js) [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
[data-reveal].is-in{opacity:1;transform:none}

/* ---------- Header ---------- */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.86);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s}
.hdr.is-stuck{border-bottom-color:var(--n200)}
.hdr__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:70px}
.hdr__logo{justify-self:start}
.hdr__logo img{height:27px;width:auto}
.hdr__nav{display:flex;align-items:center;justify-content:center;gap:4px}
.hdr__link,.dd__btn{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:500;color:var(--n700);padding:9px 14px;border-radius:999px;transition:color .2s,background-color .2s}
.hdr__link:hover,.dd__btn:hover,.dd.is-open .dd__btn{color:var(--ink);background:var(--n100)}
.dd{position:relative}
.dd__btn svg{width:12px;height:12px;transition:transform .25s var(--ease)}
.dd.is-open .dd__btn svg{transform:rotate(180deg)}
.dd__panel{position:absolute;top:calc(100% + 10px);left:50%;margin-left:-180px;width:360px;padding:8px;background:var(--white);border:1px solid var(--n200);border-radius:18px;box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .25s var(--ease),visibility 0s .25s}
.dd__panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.dd.is-open .dd__panel{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .25s var(--ease)}
.dd__item{display:flex;gap:14px;align-items:flex-start;padding:12px;border-radius:12px;transition:background-color .15s}
.dd__item:hover,.dd__item:focus-visible{background:var(--n50)}
.dd__ic{flex-shrink:0;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--orange-50);color:var(--orange-700);border:1px solid var(--orange-100)}
.dd__ic svg{width:18px;height:18px}
.dd__item b{display:block;font-size:15px;font-weight:700;line-height:1.3}
.dd__item small{display:block;font-size:13px;color:var(--n500);line-height:1.4;margin-top:2px}
.hdr__cta{justify-self:end}
.hdr__burger{display:none;width:42px;height:42px;border-radius:12px;position:relative;margin-right:-8px}
.hdr__burger span{position:absolute;left:11px;right:11px;height:2px;border-radius:2px;background:var(--ink);transition:transform .3s var(--ease),top .3s var(--ease)}
.hdr__burger span:first-child{top:16px}
.hdr__burger span:last-child{top:24px}
.hdr__burger[aria-expanded="true"] span:first-child{top:20px;transform:rotate(45deg)}
.hdr__burger[aria-expanded="true"] span:last-child{top:20px;transform:rotate(-45deg)}
.mnav{position:fixed;inset:70px 0 0;z-index:59;background:var(--white);overflow-y:auto;overscroll-behavior:contain;padding:12px var(--gutter) 120px;border-top:1px solid var(--n200)}
.mnav[hidden]{display:none}
.mnav__group{border-bottom:1px solid var(--n200)}
.mnav__group>button,.mnav__link{display:flex;width:100%;justify-content:space-between;align-items:center;padding:18px 2px;font-family:var(--head);font-size:22px;font-weight:500;letter-spacing:-.01em;text-align:left}
.mnav__group>button svg{width:16px;height:16px;transition:transform .25s var(--ease)}
.mnav__group>button[aria-expanded="true"] svg{transform:rotate(180deg)}
.mnav__sub{display:grid;gap:2px;padding:0 0 14px}
.mnav__sub[hidden]{display:none}
.mnav__sub a{display:block;padding:10px 2px;font-size:16px;color:var(--n700)}
.mnav__link{border-bottom:1px solid var(--n200)}
.mnav__cta{margin-top:28px;width:100%}
body.is-menu{overflow:hidden}

/* ---------- Office demo: "Try the office" ---------- */
.office{overflow:hidden}
.office__glow{position:absolute;width:900px;height:900px;left:50%;top:180px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,105,0,.13),rgba(255,105,0,0));pointer-events:none}
.ofc{position:relative;max-width:1152px;margin:0 auto}
.ofc-tabs{position:relative;display:flex;gap:4px;width:max-content;max-width:100%;margin:0 auto 22px;padding:5px;background:var(--n100);border:1px solid var(--n200);border-radius:999px;overflow-x:auto;scrollbar-width:none}
.ofc-tabs::-webkit-scrollbar{display:none}
.ofc-tab{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:999px;font-size:15px;font-weight:600;color:var(--n600);white-space:nowrap;transition:color .25s}
.ofc-tab svg{width:17px;height:17px;flex-shrink:0}
.ofc-tab[aria-selected="true"]{color:var(--ink)}
.ofc-tab:hover{color:var(--ink)}
.ofc-tabs__pill{position:absolute;z-index:0;top:5px;left:0;height:calc(100% - 10px);border-radius:999px;background:var(--white);box-shadow:0 1px 2px rgba(10,10,10,.08),0 4px 12px -4px rgba(10,10,10,.12);transition:transform .45s var(--ease-out),width .45s var(--ease-out)}
.ofc-frame{position:relative;background:var(--white);border:1px solid var(--n200);border-radius:22px;box-shadow:var(--shadow-lg);overflow:hidden;min-height:600px}
.ofc-panel[hidden]{display:none}
.ofc-panel{animation:ofc-in .45s var(--ease) both}
@keyframes ofc-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.ofc-noscript{padding:40px;text-align:center;color:var(--n500)}

/* App toolbar: Today, arrows, the date, view switch. */
.ofc-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--grid);background:#FBFCFD}
.ofc-bar__nav{display:flex;align-items:center;gap:6px}
.ofc-btn{font-size:13px;font-weight:600;padding:6px 12px;border:1px solid var(--n300);border-radius:8px;background:var(--white);color:var(--n800)}
.ofc-btn:hover{background:var(--n50)}
.ofc-ico{width:30px;height:30px;display:grid;place-items:center;border-radius:8px;color:var(--n600)}
.ofc-ico:hover{background:var(--n100);color:var(--ink)}
.ofc-ico svg{width:16px;height:16px}
.ofc-bar__date{position:relative;font-weight:700;font-size:15px;letter-spacing:-.01em;text-align:center;white-space:nowrap}
.ofc-bar__note{position:absolute;left:50%;top:calc(100% + 6px);transform:translate(-50%,-4px);font-size:12px;font-weight:500;color:var(--n500);background:var(--white);border:1px solid var(--n200);border-radius:8px;padding:3px 8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5}
.ofc-bar__note.is-on{opacity:1;transform:translate(-50%,0)}
.ofc-views{justify-self:end;display:flex;padding:3px;border:1px solid var(--n300);border-radius:9px;background:var(--white)}
.ofc-views button{font-size:12.5px;font-weight:600;color:var(--n600);padding:4px 10px;border-radius:6px}
.ofc-views button[aria-pressed="true"]{background:var(--job);color:var(--job-bar)}

/* Status line + the AI button. */
.ofc-act{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid var(--grid)}
.ofc-status{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;color:var(--n700);min-width:0}
.ofc-status__dot{flex-shrink:0;width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px var(--red-50);transition:background-color .4s,box-shadow .4s}
.ofc-status.is-ok .ofc-status__dot{background:#22A55A;box-shadow:0 0 0 4px var(--green-50)}
.ofc-status b{font-weight:700;color:var(--ink)}
.ofc-status__sep{color:var(--n300);margin:0 2px}
.ofc-act__btns{display:flex;align-items:center;gap:14px;flex-shrink:0}
.btn--ai{position:relative;font-size:15px;padding:12px 22px;background:var(--ink);color:var(--white);box-shadow:0 10px 26px -12px rgba(10,10,10,.55)}
.btn--ai:hover{transform:translateY(-1px);background:#1d1d1d}
.btn--ai svg{width:17px;height:17px;color:var(--orange)}
.btn--ai[disabled]{cursor:default;transform:none}
.btn--ai.is-busy{background:var(--n800)}
.btn--ai.is-busy svg{animation:spin 1s linear infinite}
.btn--ai.is-done{background:var(--green);box-shadow:none}
.btn--ai.is-done svg{color:var(--white)}
.btn--ai>i,.btn--ai>span{position:relative}
.btn__fill{position:absolute;inset:0;border-radius:inherit;background:var(--orange-600);clip-path:inset(0 100% 0 0);pointer-events:none}
.btn--ai.is-count svg{color:var(--white)}
.ofc-foot p.is-nudge{color:var(--orange-700);font-weight:600;animation:foot-nudge 1.2s var(--ease) 2}
@keyframes foot-nudge{50%{transform:translateX(4px)}}
.btn--ai.is-pulse::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid var(--orange);opacity:0;animation:ai-ring 2.4s var(--ease) infinite}
@keyframes ai-ring{0%{opacity:.7;transform:scale(.96)}70%{opacity:0;transform:scale(1.12)}100%{opacity:0}}
@keyframes spin{to{transform:rotate(360deg)}}
.ofc-reset{font-size:14px;font-weight:600;color:var(--n600);text-decoration:underline;text-underline-offset:3px}
.ofc-reset:hover{color:var(--ink)}
.ofc-reset[hidden]{display:none}

/* The dispatch board. Jobs sit on one absolutely placed layer and move by transform only. */
.ofc-board{position:relative;--row:86px;--hour:46px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.ofc-tray{position:relative;display:flex;align-items:stretch;border-bottom:1px solid var(--grid);background:repeating-linear-gradient(135deg,#FCFCFD 0 10px,#F7F8FA 10px 20px)}
.ofc-tray__label{flex-shrink:0;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:0 14px;font-size:12px;font-weight:700;color:var(--n700);border-right:1px solid var(--grid);background:#FBFCFD}
.ofc-tray__label b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--amber-50);color:var(--amber);border:1px solid var(--amber-200);font-size:11.5px;width:max-content}
.ofc-tray__label b.is-zero{background:var(--green-50);color:var(--green);border-color:var(--green-200)}
.ofc-tray__space{flex:1;min-height:76px}
.ofc-tray__empty{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-size:13px;color:var(--n400);opacity:0;transition:opacity .4s}
.ofc-tray.is-empty .ofc-tray__empty{opacity:1}
.ofc-grid{display:grid}
.ofc-head{display:grid;background:#FBFCFD;border-bottom:1px solid var(--grid)}
.ofc-head span{font-size:11.5px;font-weight:600;color:var(--n500);white-space:nowrap}
.ofc-side{display:grid;background:#FBFCFD}
.ofc-who{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;color:var(--n800);min-width:0}
.ofc-av{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700}
.ofc-lanes{position:relative;overflow:hidden}
.ofc-lane{position:relative;border-color:var(--grid);border-style:solid;border-width:0}
.ofc-lane__empty{position:absolute;font-size:12.5px;color:var(--n400);white-space:nowrap;transition:opacity .4s;pointer-events:none}
.ofc-lane.has-jobs .ofc-lane__empty{opacity:0}
.ofc-offhours{position:absolute;background:var(--off);background-image:repeating-linear-gradient(135deg,rgba(0,0,0,.025) 0 6px,transparent 6px 12px);pointer-events:none}
.ofc-now{position:absolute;z-index:1;background:var(--orange);pointer-events:none}
.ofc-now::before{content:"";position:absolute;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.ofc-stage{position:absolute;inset:0;pointer-events:none}
.ofc-stage>*{pointer-events:auto}

/* Horizontal: staff down the side, hours across the top (desktop). */
.ofc-board[data-orient="h"] .ofc-tray__label{width:120px}
.ofc-board[data-orient="h"] .ofc-grid{grid-template-columns:120px 1fr;grid-template-rows:34px auto}
.ofc-board[data-orient="h"] .ofc-head{grid-column:2;grid-template-columns:repeat(var(--hours),1fr);align-items:center}
.ofc-board[data-orient="h"] .ofc-head span{padding-left:6px;border-left:1px solid var(--grid);line-height:34px}
.ofc-board[data-orient="h"] .ofc-corner{grid-column:1;grid-row:1;border-bottom:1px solid var(--grid);border-right:1px solid var(--grid);background:#FBFCFD;font-size:11.5px;font-weight:600;color:var(--n500);padding:0 14px;line-height:34px}
.ofc-board[data-orient="h"] .ofc-side{grid-column:1;grid-row:2;border-right:1px solid var(--grid)}
.ofc-board[data-orient="h"] .ofc-who{height:var(--row);padding:0 14px;border-bottom:1px solid var(--grid)}
.ofc-board[data-orient="h"] .ofc-who:last-child{border-bottom:0}
.ofc-board[data-orient="h"] .ofc-lanes{grid-column:2;grid-row:2;background-image:linear-gradient(to right,var(--grid) 1px,transparent 1px);background-size:calc(100% / var(--hours)) 100%}
.ofc-board[data-orient="h"] .ofc-lane{height:var(--row);border-bottom-width:1px}
.ofc-board[data-orient="h"] .ofc-lane:last-child{border-bottom-width:0}
.ofc-board[data-orient="h"] .ofc-lane__empty{left:calc(100% * 2 / var(--hours) + 14px);top:50%;transform:translateY(-50%)}
.ofc-board[data-orient="h"] .ofc-offhours{top:0;bottom:0}
.ofc-board[data-orient="h"] .ofc-now{top:0;bottom:0;width:2px;margin-left:-1px}
.ofc-board[data-orient="h"] .ofc-now::before{top:-4px;left:-3px}

/* Vertical: staff across the top, hours down the side (phones and narrow tablets). */
.ofc-board[data-orient="v"] .ofc-tray{flex-direction:column}
.ofc-board[data-orient="v"] .ofc-tray__label{flex-direction:row;align-items:center;justify-content:space-between;padding:8px 12px 0;border-right:0;background:none}
.ofc-board[data-orient="v"] .ofc-tray__space{min-height:78px}
.ofc-board[data-orient="v"] .ofc-grid{grid-template-columns:44px 1fr;grid-template-rows:58px auto}
.ofc-board[data-orient="v"] .ofc-corner{grid-column:1;grid-row:1;border-bottom:1px solid var(--grid);border-right:1px solid var(--grid);background:#FBFCFD}
.ofc-board[data-orient="v"] .ofc-head{grid-column:2;grid-row:1;grid-template-columns:repeat(var(--staff),1fr)}
.ofc-board[data-orient="v"] .ofc-head .ofc-who{flex-direction:column;justify-content:center;gap:4px;font-size:12.5px;border-left:1px solid var(--grid)}
.ofc-board[data-orient="v"] .ofc-head .ofc-who:first-child{border-left:0}
.ofc-board[data-orient="v"] .ofc-side{grid-column:1;grid-row:2;grid-template-rows:repeat(var(--hours),var(--hour));border-right:1px solid var(--grid)}
.ofc-board[data-orient="v"] .ofc-side span{font-size:10.5px;font-weight:600;color:var(--n500);text-align:right;padding:2px 6px 0 0;border-top:1px solid var(--grid);white-space:nowrap}
.ofc-board[data-orient="v"] .ofc-side span:first-child{border-top:0}
.ofc-board[data-orient="v"] .ofc-lanes{grid-column:2;grid-row:2;display:grid;grid-template-columns:repeat(var(--staff),1fr);height:calc(var(--hours) * var(--hour));background-image:linear-gradient(to bottom,var(--grid) 1px,transparent 1px);background-size:100% var(--hour)}
.ofc-board[data-orient="v"] .ofc-lane{border-left-width:1px}
.ofc-board[data-orient="v"] .ofc-lane:first-child{border-left-width:0}
.ofc-board[data-orient="v"] .ofc-lane__empty{top:calc(var(--hour) * 2 + 12px);left:0;right:0;text-align:center;white-space:normal;padding:0 6px;font-size:11.5px}
.ofc-board[data-orient="v"] .ofc-offhours{left:0;right:0}
.ofc-board[data-orient="v"] .ofc-now{left:0;right:0;height:2px;margin-top:-1px}
.ofc-board[data-orient="v"] .ofc-now::before{left:-4px;top:-3px}

/* A job block. Light blue, solid blue bar on the left, time, client, job number, suburb. */
.job{position:absolute;left:0;top:0;display:flex;flex-direction:column;gap:0;padding:5px 7px 5px 10px;border-radius:7px;background:var(--job);color:var(--job-ink);font-size:12px;line-height:1.3;overflow:hidden;cursor:grab;touch-action:manipulation;box-shadow:0 1px 0 rgba(15,37,71,.05),inset 0 0 0 1px rgba(47,116,240,.14);transition:box-shadow .3s,background-color .3s,opacity .3s;will-change:transform}
.job::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--job-bar);transition:background-color .3s}
.job>span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.job__time{font-weight:700;font-size:12px;color:var(--job-ink)}
.job__client{font-weight:600}
.job__type{color:var(--job-mute)}
.job__no{color:var(--job-mute);font-size:11.5px}
.job__place{font-size:10.5px;font-weight:700;letter-spacing:.06em;color:#3B5B95}
.job__tag{position:absolute!important;top:4px;right:4px;font-size:10px;font-weight:700;letter-spacing:.02em;line-height:1;padding:3px 6px;border-radius:5px;opacity:0;transform:scale(.8);transition:opacity .3s,transform .3s var(--ease)}
.job.is-clash{background:var(--red-50);box-shadow:0 1px 0 rgba(15,37,71,.05),inset 0 0 0 1px rgba(220,59,64,.45)}
.job.is-clash::before{background:var(--red)}
.job.is-clash .job__tag{opacity:1;transform:none;background:var(--red);color:var(--white)}
.job.is-after{background:#FFF9EE;box-shadow:0 1px 0 rgba(15,37,71,.05),inset 0 0 0 1px rgba(168,90,0,.35)}
.job.is-after::before{background:#E08A00}
.job.is-after .job__tag{opacity:1;transform:none;background:var(--amber-50);color:var(--amber);border:1px solid var(--amber-200)}
.job.is-tray{box-shadow:0 1px 2px rgba(15,37,71,.08),inset 0 0 0 1px rgba(47,116,240,.22);background:var(--white)}
.job.is-tray .job__time{color:var(--amber)}
.job:hover{box-shadow:0 6px 16px -8px rgba(15,37,71,.35),inset 0 0 0 1px rgba(47,116,240,.3)}
.job.is-dragging{z-index:30;cursor:grabbing;box-shadow:0 22px 40px -16px rgba(15,37,71,.5),inset 0 0 0 1px rgba(47,116,240,.45);opacity:.96}
.job.is-picked{z-index:25;box-shadow:0 0 0 2px var(--orange),0 16px 30px -14px rgba(15,37,71,.45)}
.job.is-moving{z-index:20}
.job.is-touched{animation:job-touched 1.1s var(--ease)}
@keyframes job-touched{0%{box-shadow:0 0 0 3px rgba(255,105,0,.55),0 18px 30px -16px rgba(15,37,71,.4)}100%{box-shadow:0 0 0 12px rgba(255,105,0,0),0 1px 0 rgba(15,37,71,.05)}}
.job:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* Horizontal blocks show four short lines. Narrow phones show time, client, suburb. */
.ofc-board[data-orient="h"] .job__type{order:3}
.ofc-board[data-orient="h"] .job__no{order:4;display:none}
.ofc-board[data-orient="h"] .job__place{order:5}
.ofc-board[data-orient="v"] .job{padding:4px 5px 4px 8px;font-size:11px;line-height:1.25}
.ofc-board[data-orient="v"] .job__time{font-size:11px}
.ofc-board[data-orient="v"] .job__place{order:3;font-size:9.5px;letter-spacing:.03em}
.ofc-board[data-orient="v"] .job__type{order:4;font-size:10.5px}
.ofc-board[data-orient="v"] .job__no{order:5;font-size:10.5px}
.ofc-board[data-orient="v"] .job__tag{top:auto;bottom:3px;right:3px;font-size:9px;padding:2px 4px}
.job.is-tray .job__type{order:2}
.ofc-board[data-orient="v"] .job.is-tray .job__type,.ofc-board[data-orient="v"] .job.is-tray .job__no{display:none}
.ofc-board[data-orient="v"] .job.is-tray{padding:6px 6px 6px 9px;justify-content:center;gap:1px}

/* Drive time warnings between two jobs, drop target and the "AI is working" sweep. */
.ofc-drive{position:absolute;left:0;top:0;z-index:15;display:flex;align-items:center;justify-content:center;pointer-events:none;transition:opacity .35s}
.ofc-drive::before{content:"";position:absolute;border:0 dashed #E08A00}
.ofc-board[data-orient="h"] .ofc-drive::before{left:0;right:0;top:50%;border-top-width:2px}
.ofc-board[data-orient="v"] .ofc-drive::before{top:0;bottom:0;left:50%;border-left-width:2px}
.ofc-drive span{position:relative;display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:700;color:var(--amber);background:var(--amber-50);border:1px solid var(--amber-200);border-radius:999px;padding:2px 7px;white-space:nowrap;box-shadow:0 2px 6px -2px rgba(168,90,0,.3)}
.ofc-drive span svg{width:11px;height:11px}
.ofc-drive.is-gone{opacity:0}
.ofc-ghost{position:absolute;left:0;top:0;z-index:10;border:2px dashed var(--job-bar);border-radius:7px;background:rgba(47,116,240,.06);pointer-events:none;opacity:0;transition:opacity .15s}
.ofc-ghost.is-on{opacity:1}
.ofc-ghost.is-bad{border-color:var(--red);background:rgba(220,59,64,.06)}
.ofc-sweep{position:absolute;inset:0;z-index:12;pointer-events:none;overflow:hidden;opacity:0}
.ofc-sweep::before{content:"";position:absolute;top:0;bottom:0;left:-40%;width:40%;background:linear-gradient(90deg,rgba(255,105,0,0),rgba(255,105,0,.12) 60%,rgba(255,105,0,0))}
.ofc-sweep.is-on{opacity:1}
.ofc-sweep.is-on::before{animation:sweep .9s var(--ease) forwards}
@keyframes sweep{to{transform:translateX(350%)}}
.ofc-board[data-orient="v"] .ofc-sweep::before{left:0;right:0;width:auto;top:-40%;bottom:auto;height:40%;background:linear-gradient(180deg,rgba(255,105,0,0),rgba(255,105,0,.12) 60%,rgba(255,105,0,0))}
.ofc-board[data-orient="v"] .ofc-sweep.is-on::before{animation:sweep-v .9s var(--ease) forwards}
@keyframes sweep-v{to{transform:translateY(350%)}}

/* Hover card with the full job details (mouse only). */
.ofc-tip{position:absolute;left:0;top:0;z-index:40;width:max-content;max-width:240px;padding:10px 12px;border-radius:12px;background:var(--ink);color:var(--white);font-size:12.5px;line-height:1.45;box-shadow:var(--shadow);pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .15s,transform .15s}
.ofc-tip.is-on{opacity:1;transform:none}
.ofc-tip b{display:block;font-size:13.5px}
.ofc-tip span{color:var(--n400)}

.ofc-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;font-size:13px;color:var(--n500);border-top:1px solid var(--grid);background:#FBFCFD}
.ofc-foot svg{width:15px;height:15px;flex-shrink:0}
.ofc-foot p{display:flex;align-items:center;gap:8px}

/* Toasts that stack in the corner after the AI acts. */
.ofc-toasts{position:absolute;right:16px;bottom:16px;z-index:50;display:flex;flex-direction:column;align-items:flex-end;gap:8px;pointer-events:none}
.ofc-toast{display:flex;align-items:center;gap:10px;padding:10px 14px 10px 10px;border-radius:14px;background:var(--ink);color:var(--white);font-size:14px;font-weight:500;box-shadow:0 18px 36px -16px rgba(10,10,10,.55);animation:toast-in .5s var(--ease-out) both}
.ofc-toast.is-out{animation:toast-out .45s var(--ease) both}
.ofc-toast i{flex-shrink:0;width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(255,105,0,.18);color:var(--orange)}
.ofc-toast i svg{width:16px;height:16px}
@keyframes toast-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes toast-out{to{opacity:0;transform:translateY(8px) scale(.97)}}

/* ---------- Job board (Enquiry to Paid) ---------- */
.kb{position:relative;padding:16px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.kb-cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.kb-col{display:flex;flex-direction:column;border-radius:14px;background:var(--n50);border:1px solid var(--n150);transition:background-color .2s,border-color .2s,box-shadow .2s}
.kb-col__head{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:10px 12px 8px;font-size:13px;font-weight:700;color:var(--n800)}
.kb-col__head i{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-right:7px}
.kb-col__head span{display:flex;align-items:center;min-width:0;white-space:nowrap}
.kb-col__head b{font-size:12px;font-weight:600;color:var(--n500);background:var(--white);border:1px solid var(--n200);border-radius:999px;padding:0 7px;line-height:18px}
.kb-col__body{position:relative;height:var(--kb-body)}
.kb-col.is-over{background:var(--orange-50);border-color:var(--orange-200);box-shadow:inset 0 0 0 1px var(--orange-200)}
.kb-col.is-target{border-style:dashed;border-color:var(--n300)}
.kb-col.is-invite{animation:invite 2.2s ease-in-out infinite}
@keyframes invite{50%{border-color:var(--orange-200);background:#FFFBF7}}
.kb-col__drop{position:absolute;inset:8px;display:grid;place-items:center;text-align:center;font-size:12.5px;color:var(--n400);border:1.5px dashed var(--n300);border-radius:12px;transition:opacity .3s;padding:8px}
.kb-col.has-cards .kb-col__drop{opacity:0}
.kb-stage{position:absolute;inset:0;pointer-events:none}
.kb-stage>*{pointer-events:auto}
.kc{position:absolute;left:0;top:0;display:flex;flex-direction:column;justify-content:space-between;padding:10px 11px 9px;border-radius:12px;background:var(--white);border:1px solid var(--n200);box-shadow:0 1px 2px rgba(10,10,10,.05);font-size:12.5px;line-height:1.3;cursor:grab;touch-action:manipulation;transition:box-shadow .25s,border-color .25s;will-change:transform}
.kc:hover{box-shadow:0 10px 22px -12px rgba(10,10,10,.3)}
.kc__type{font-weight:700;font-size:13px;color:var(--ink);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kc__who{color:var(--n500);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc__note{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--n600);white-space:nowrap;overflow:hidden;min-height:18px}
.kc__note>span{overflow:hidden;text-overflow:ellipsis}
.kc__note svg{width:13px;height:13px;flex-shrink:0}
.kc__note.is-ai{color:var(--orange-700)}
.kc__note.is-ok{color:var(--n800)}
.kc__note.is-ok svg{color:#22A55A}
.kc__note.is-paid{color:var(--green)}
.kc__note.is-flash{animation:note-flash .9s var(--ease)}
@keyframes note-flash{0%{background:var(--orange-100)}100%{background:transparent}}
.kc__amt{font-variant-numeric:tabular-nums}
.kc.is-dragging{z-index:30;cursor:grabbing;box-shadow:0 24px 44px -18px rgba(10,10,10,.45);border-color:var(--n300)}
.kc.is-picked{z-index:25;border-color:var(--orange);box-shadow:0 0 0 2px var(--orange),0 16px 30px -14px rgba(10,10,10,.35)}
.kc.is-ai{border-color:var(--orange-200);box-shadow:0 0 0 3px rgba(255,105,0,.14),0 12px 26px -14px rgba(255,105,0,.45)}
.kc.is-paid{border-color:var(--green-200)}
.kc__ping{position:absolute;right:-6px;top:-10px;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;color:var(--white);background:var(--ink);border-radius:999px;padding:4px 8px 4px 6px;box-shadow:0 8px 18px -8px rgba(10,10,10,.5);animation:ping-in .5s var(--ease-out) both}
.kc__ping svg{width:12px;height:12px;color:var(--orange)}
.kc__ping.is-out{animation:toast-out .4s var(--ease) both}
@keyframes ping-in{0%{opacity:0;transform:translateY(6px) scale(.8)}60%{transform:translateY(-2px) scale(1.06)}100%{opacity:1;transform:none}}
.kb-stage>.kb-hand{position:absolute;left:0;top:0;width:30px;height:30px;z-index:50;pointer-events:none;transform-origin:13px 4px;filter:drop-shadow(0 6px 8px rgba(10,10,10,.28))}
.kb-hand svg{display:block;width:100%;height:100%}
.kc__hint{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);display:inline-flex;align-items:center;gap:6px;width:max-content;max-width:220px;white-space:normal;text-align:center;font-size:12px;font-weight:700;line-height:1.3;color:var(--white);background:var(--orange-600);border-radius:10px;padding:7px 10px;box-shadow:0 10px 22px -10px rgba(245,73,0,.7);animation:hint-bob 2.2s ease-in-out infinite;pointer-events:none;z-index:2}
.kc__hint::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:var(--orange-600)}
@keyframes hint-bob{50%{transform:translate(-50%,-4px)}}
.kb-cap{display:flex;align-items:center;justify-content:center;gap:10px;min-height:44px;margin-top:12px;font-size:14px;font-weight:600;color:var(--n600);text-align:center}
.kb-cap svg{width:16px;height:16px;color:var(--orange-600);flex-shrink:0}
.kb-cap.is-win{color:var(--ink);animation:ofc-in .5s var(--ease) both}

/* ---------- Enquiries ---------- */
.enq{padding:16px;--enq-h:74px}
.enq__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:4px 4px 14px}
.enq__head h3{font-family:var(--body);font-size:15px;font-weight:700;letter-spacing:0}
.enq__live{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:var(--green)}
.enq__live i{width:8px;height:8px;border-radius:50%;background:#22A55A;box-shadow:0 0 0 0 rgba(34,165,90,.5);animation:live 1.8s ease-out infinite}
@keyframes live{70%{box-shadow:0 0 0 8px rgba(34,165,90,0)}100%{box-shadow:0 0 0 0 rgba(34,165,90,0)}}
.enq__chips{display:flex;flex-wrap:wrap;gap:6px}
.enq__chips span{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--n600);background:var(--n50);border:1px solid var(--n200);border-radius:999px;padding:4px 10px 4px 6px}
.enq__chips svg{width:14px;height:14px}
.enq__list{position:relative;height:calc(var(--enq-h) * var(--enq-n,6) + (var(--enq-n,6) - 1) * 8px);overflow:hidden;border-radius:14px}
.enq__item{position:absolute;left:0;right:0;top:0;height:var(--enq-h);display:grid;grid-template-columns:40px 1fr auto;gap:14px;align-items:center;padding:0 16px 0 12px;background:var(--white);border:1px solid var(--n200);border-radius:14px;will-change:transform,opacity}
.enq__item.is-new{animation:enq-flash 2.4s var(--ease)}
@keyframes enq-flash{0%,30%{background:var(--orange-50);border-color:var(--orange-200)}100%{background:var(--white);border-color:var(--n200)}}
.enq__ch{width:40px;height:40px;border-radius:12px;display:grid;place-items:center}
.enq__ch svg{width:20px;height:20px}
.enq__ch--call{background:#E9F7EF;color:#15803D}
.enq__ch--sms{background:#EAF2FF;color:#2F74F0}
.enq__ch--email{background:#FDECEC;color:#C5221F}
.enq__ch--fb{background:#E9F0FE;color:#1877F2}
.enq__ch--web{background:var(--orange-50);color:var(--orange-700)}
.enq__txt{min-width:0}
.enq__txt b{display:block;font-size:14.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enq__did{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--n600);min-width:0}
.enq__did svg{width:15px;height:15px;color:#22A55A;flex-shrink:0}
.enq__did span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.enq__meta{text-align:right;font-size:12px;color:var(--n500);white-space:nowrap;line-height:1.5}
.enq__meta strong{display:block;font-size:12px;font-weight:700;color:var(--ink)}

/* ---------- Quotes and invoices ---------- */
.qi{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr) minmax(0,.85fr);gap:18px;padding:20px;align-items:start}
.qi__col{display:grid;gap:12px}
.qi__label{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--n500)}
.qi-chat{display:grid;gap:10px;padding:16px;border-radius:18px;background:#F4F1EC;min-height:230px;align-content:start}
.qi-voice{justify-self:end;display:grid;gap:8px;width:min(100%,280px);padding:10px 12px;border-radius:16px 16px 4px 16px;background:#DCF8C6;box-shadow:0 1px .5px rgba(0,0,0,.12)}
.qi-voice__row{display:flex;align-items:center;gap:10px}
.qi-voice__play{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#1F8F5A;color:var(--white)}
.qi-voice__play svg{width:13px;height:13px}
.qi-wave{flex:1;display:flex;align-items:center;gap:2px;height:26px}
.qi-wave i{flex:1;border-radius:2px;background:#8BB89A;transition:background-color .2s}
.qi-wave i.is-on{background:#1F6B45}
.qi-voice__t{font-size:11.5px;color:#4F6B57;font-variant-numeric:tabular-nums}
.qi-voice__text{font-size:13.5px;line-height:1.45;color:#22382A;min-height:40px}
.qi-voice__text::after{content:"";display:inline-block;width:2px;height:14px;margin-left:2px;vertical-align:-2px;background:#22382A;opacity:0}
.qi-voice__text.is-typing::after{opacity:1;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.qi-bot{justify-self:start;max-width:92%;padding:9px 12px;border-radius:16px 16px 16px 4px;background:var(--white);font-size:13.5px;line-height:1.45;box-shadow:0 1px .5px rgba(0,0,0,.1);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s var(--ease)}
.qi-bot.is-on{opacity:1;transform:none}
.qi-doc{position:relative;padding:18px 18px 16px;border-radius:16px;background:var(--white);border:1px solid var(--n200);box-shadow:var(--shadow);min-height:300px}
.qi-doc__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding-bottom:12px;border-bottom:1px solid var(--n200)}
.qi-doc__top b{display:block;font-family:var(--head);font-size:20px;font-weight:700;letter-spacing:-.02em}
.qi-doc__top small{display:block;font-size:12.5px;color:var(--n500)}
.qi-doc__brand{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--n400);text-align:right}
.qi-lines{display:grid;padding:6px 0}
.qi-line{display:flex;justify-content:space-between;gap:12px;padding:8px 0;font-size:13.5px;border-bottom:1px dashed var(--n200);opacity:0;transform:translateY(6px);transition:opacity .35s,transform .35s var(--ease)}
.qi-line.is-on{opacity:1;transform:none}
.qi-line span:last-child{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.qi-line--sub{color:var(--n500);border-bottom:0;padding:4px 0}
.qi-line--total{border-bottom:0;padding-top:10px;font-size:15px;font-weight:700}
.qi-line--total span:last-child{font-family:var(--head);font-size:22px;letter-spacing:-.02em}
.qi-doc__note{font-size:12px;color:var(--n500);margin-top:4px;opacity:0;transition:opacity .4s}
.qi-doc__note.is-on{opacity:1}
.qi-stamp{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;border-radius:12px;background:var(--green-50);border:1px solid var(--green-200);color:var(--green);font-weight:700;font-size:14px;opacity:0;transform:scale(.96);transition:opacity .35s,transform .45s var(--ease-out)}
.qi-stamp.is-on{opacity:1;transform:none}
.qi-stamp svg{width:18px;height:18px;flex-shrink:0}
.qi-card{display:grid;gap:4px;padding:16px;border-radius:16px;border:1px solid var(--n200);background:var(--white)}
.qi-card__k{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;font-weight:600;color:var(--n500)}
.qi-card__v{font-family:var(--head);font-size:26px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.qi-pill{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;border-radius:999px;padding:3px 9px}
.qi-pill svg{width:12px;height:12px}
.qi-pill--paid{background:var(--green-50);color:var(--green);border:1px solid var(--green-200)}
.qi-pill--due{background:var(--amber-50);color:var(--amber);border:1px solid var(--amber-200)}
.qi-card__sub{font-size:13px;color:var(--n600)}
.qi-dots{display:flex;gap:6px;margin-top:6px}
.qi-dots i{flex:1;height:6px;border-radius:999px;background:var(--n200);transition:background-color .4s}
.qi-dots i.is-on{background:var(--orange)}
.qi-replay{justify-self:start;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--n600);padding:6px 10px;border-radius:8px}
.qi-replay:hover{background:var(--n100);color:var(--ink)}
.qi-replay svg{width:14px;height:14px}

/* Simple app bar for the other tabs, plus the "what the AI does next" tracker on the job board. */
.ofc-bar--simple{display:flex;justify-content:space-between;align-items:center}
.ofc-bar__title{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px}
.ofc-bar__title span{font-size:12px;font-weight:600;color:var(--job-bar);background:var(--job);border-radius:6px;padding:2px 8px}
.ofc-bar__meta{font-size:13px;color:var(--n500)}
.kb-flow{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 18px;margin:4px 16px 0;padding:14px 16px;border-radius:14px;border:1px dashed var(--n300);background:#FCFCFD}
.kb-flow__label{font-size:13px;font-weight:600;color:var(--n600)}
.kb-flow ol{display:flex;flex-wrap:wrap;gap:8px}
.kb-flow li{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 8px;border-radius:999px;background:var(--white);border:1px solid var(--n200);font-size:13px;font-weight:600;color:var(--n500);transition:color .3s,border-color .3s,background-color .3s}
.kb-flow li i{position:relative;width:18px;height:18px;border-radius:50%;border:2px solid var(--n300);transition:border-color .3s,background-color .3s}
.kb-flow li.is-active{color:var(--orange-700);border-color:var(--orange-200);background:var(--orange-50)}
.kb-flow li.is-active i{border-color:var(--orange);border-top-color:transparent;animation:spin .8s linear infinite}
.kb-flow li.is-done{color:var(--green);border-color:var(--green-200);background:var(--green-50)}
.kb-flow li.is-done i{border-color:#22A55A;background:#22A55A}
.kb-flow li.is-done i::after{content:"";position:absolute;left:4.5px;top:1.5px;width:4px;height:8px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg)}
@media (min-width:761px){
  .kc__hint{left:calc(100% + 14px);bottom:auto;top:50%;transform:translateY(-50%);animation:hint-nudge 2.2s ease-in-out infinite;max-width:170px;text-align:left}
  .kc__hint::after{left:auto;right:100%;top:50%;margin:-6px 0 0;border:6px solid transparent;border-right-color:var(--orange-600)}
}
@keyframes hint-nudge{50%{transform:translate(-5px,-50%)}}
@media (max-width:760px){
  .ofc-bar__meta{display:none}
  .kb-flow{margin:4px 10px 0;justify-content:flex-start}
  .kb-flow li{font-size:12px}
}

/* ---------- Office demo on narrow screens ---------- */
@media (max-width:900px){
  .ofc-frame{min-height:0}
  .qi{grid-template-columns:1fr 1fr}
  .qi__col--side{grid-column:1/-1;grid-template-columns:1fr 1fr}
  .qi__col--side .qi__label{grid-column:1/-1}
}
@media (max-width:760px){
  .ofc-tabs{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:4px;border-radius:20px;overflow:visible}
  .ofc-tab{justify-content:center;padding:10px 8px;font-size:14px;border-radius:15px}
  .ofc-tabs__pill{border-radius:15px;transition:transform .45s var(--ease-out),width .45s var(--ease-out),height .45s var(--ease-out)}
  .ofc-frame{border-radius:18px;margin:0 calc(var(--gutter) * -1 + 8px)}
  .ofc-bar{grid-template-columns:auto 1fr;padding:10px 12px}
  .ofc-bar__date{text-align:right;font-size:14px}
  .ofc-views{display:none}
  .ofc-act{flex-direction:column;align-items:stretch;gap:12px;padding:12px}
  .ofc-act__btns{justify-content:space-between}
  .btn--ai{flex:1;padding:13px 18px}
  .ofc-status{font-size:13px;align-items:flex-start}
  .ofc-status__dot{margin-top:5px}
  .ofc-toasts{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));align-items:stretch;gap:6px}
  .ofc-toast{padding:8px 12px 8px 8px;font-size:13.5px;border-radius:12px}
  .ofc-toast i{width:24px;height:24px;border-radius:8px}
  .ofc-act__btns .ofc-reset{order:2}
  .ofc-foot{flex-direction:column;align-items:flex-start;gap:6px}
  .kb{padding:10px}
  .kb-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .kb-col__head{padding:8px 9px 6px;font-size:12px}
  .kb-col__head i{margin-right:5px}
  .kc{padding:8px 8px 7px;border-radius:10px}
  .kc__type{font-size:12px}
  .kc__who,.kc__note{font-size:11px}
  .kc__note svg{display:none}
  .kc__hint{max-width:150px;font-size:11px}
  .enq{padding:10px;--enq-h:80px;--enq-n:5}
  .enq__head{flex-direction:column;align-items:flex-start;gap:8px}
  .enq__chips{display:none}
  .enq__item{grid-template-columns:36px 1fr;gap:10px;padding:0 12px 0 10px}
  .enq__ch{width:36px;height:36px}
  .enq__meta{display:none}
  .enq__txt b{font-size:14px}
  .enq__did{font-size:13px;align-items:flex-start}
  .enq__did span{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .qi{grid-template-columns:1fr;padding:12px;gap:14px}
  .qi__col--side{grid-template-columns:1fr 1fr}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  :where(.js) [data-reveal]{opacity:1;transform:none}
}

/* ---------- Load-in for the top of the page: visible from the first frame, only slides ---------- */
.reveal{animation:rise .9s var(--ease) both;animation-delay:calc(var(--d,0) * 110ms + 60ms)}
@keyframes rise{from{transform:translateY(16px)}to{transform:none}}

/* ---------- 1. Hero ---------- */
.hero{position:relative;padding:56px 0 104px;overflow:hidden}
.hero__glow{position:absolute;width:1000px;height:1000px;right:-300px;top:-460px;border-radius:50%;background:radial-gradient(closest-side,rgba(255,105,0,.2),rgba(255,105,0,0));pointer-events:none}
.hero__grid-bg{position:absolute;inset:0;background-image:radial-gradient(ellipse 60% 70% at 78% 40%,rgba(255,255,255,0) 0%,#fff 72%),linear-gradient(var(--n150) 1px,transparent 1px),linear-gradient(90deg,var(--n150) 1px,transparent 1px);background-size:100% 100%,56px 56px,56px 56px;opacity:.7;pointer-events:none}
/* Hero cursor effects (29 Oct 2026): orange grid lights up under the cursor, soft colour brush canvas, phone tilt */
.hero__spot{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .5s var(--ease);background-image:radial-gradient(circle 260px at var(--mx,50%) var(--my,50%),rgba(255,105,0,.10),rgba(255,105,0,0) 70%),linear-gradient(rgba(255,105,0,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(255,105,0,.55) 1px,transparent 1px);background-size:100% 100%,56px 56px,56px 56px;-webkit-mask-image:radial-gradient(circle 190px at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.35) 45%,transparent 100%);mask-image:radial-gradient(circle 190px at var(--mx,50%) var(--my,50%),#000 0%,rgba(0,0,0,.35) 45%,transparent 100%)}
.hero.is-hot .hero__spot{opacity:1}
.hero__fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;filter:blur(14px);opacity:.55;mix-blend-mode:multiply}
.hero__glow{transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.hero .phone{transform:perspective(1200px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.hero__grid{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;align-items:center}
.hero__copy{display:grid;gap:24px;justify-items:start}
.hero__h{font-size:clamp(40px,4.2vw,60px);line-height:1.06;letter-spacing:-.03em}
.hero__h-a{display:block;text-wrap:balance}
.rot{display:grid;color:var(--orange-600);white-space:nowrap}
.rot__item{grid-area:1/1;opacity:0;transform:translateY(.32em);transition:opacity .5s var(--ease),transform .65s var(--ease-out)}
.rot__item.is-on{opacity:1;transform:none;transition-delay:.16s}
.rot__item.is-out{opacity:0;transform:translateY(-.32em);transition-duration:.26s,.3s}
.hero__sub{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--n600);max-width:44ch}
.hero__cta{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-top:4px}
.partner{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--n700)}
.partner__badge{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--white);border:1px solid var(--n200);box-shadow:var(--shadow-sm)}
.partner__badge img{width:17px;height:17px}

/* The phone with the owner chatting to their AI admin. */
.hero__phone{position:relative;display:flex;justify-content:center}
.hero__phone::before{content:"";position:absolute;width:420px;height:420px;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(255,105,0,.16),rgba(255,105,0,0));pointer-events:none}
.phone{position:relative;width:340px;height:664px;border:10px solid #101010;border-radius:54px;background:#F4F3F0;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 60px 100px -40px rgba(10,10,10,.45),0 24px 40px -24px rgba(10,10,10,.25),inset 0 0 0 1px rgba(0,0,0,.04)}
.phone__top{display:flex;align-items:center;justify-content:space-between;height:46px;padding:4px 26px 0;font-size:14px;font-weight:600;background:var(--white)}
.phone__island{width:96px;height:28px;border-radius:999px;background:#101010}
.phone__icons{display:flex;gap:3px;align-items:flex-end}
.phone__icons i{width:4px;border-radius:1px;background:var(--ink)}
.phone__icons i:nth-child(1){height:6px}.phone__icons i:nth-child(2){height:9px}.phone__icons i:nth-child(3){height:12px}
.chat__head{display:flex;align-items:center;gap:11px;padding:8px 18px 12px;background:var(--white);border-bottom:1px solid var(--n150)}
.chat__av{position:relative;width:38px;height:38px;border-radius:50%;background:var(--ink);display:grid;place-items:center;flex-shrink:0}
.chat__av img{width:13px;height:auto}
.chat__av::after{content:"";position:absolute;right:0;bottom:0;width:10px;height:10px;border-radius:50%;background:#22A55A;border:2px solid var(--white)}
.chat__who{display:flex;flex-direction:column;line-height:1.2}
.chat__who b{display:inline-flex;align-items:center;gap:6px;font-size:15.5px}
.chat__ai{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--orange-700);background:var(--orange-50);border:1px solid var(--orange-200);border-radius:5px;padding:1px 5px;line-height:1.3}
.chat__who small{font-size:12px;color:var(--n500);min-height:15px}
.chat__body{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:14px 12px;overflow:hidden}
.msg{max-width:84%;padding:9px 12px 10px;font-size:14px;line-height:1.42;border-radius:18px}
.msg--me{align-self:flex-end;background:var(--ink);color:var(--white);border-bottom-right-radius:6px}
.msg--ai{align-self:flex-start;background:var(--white);border:1px solid var(--n200);border-bottom-left-radius:6px;box-shadow:0 1px 2px rgba(10,10,10,.04)}
.msg__chip{display:flex;align-items:center;gap:6px;width:max-content;max-width:100%;margin-top:8px;padding:5px 9px;border-radius:9px;background:var(--orange-50);border:1px solid var(--orange-100);font-size:12px;font-weight:700;color:var(--orange-700)}
.msg__chip svg{width:13px;height:13px;flex-shrink:0}
/* With scripts on, messages are placed by transform so the phone never pushes anything around. */
.chat__body.is-live{display:block}
.chat__body.is-live .msg{position:absolute;top:0;left:12px;opacity:0;will-change:transform,opacity}
.chat__body.is-live .msg--me{left:auto;right:12px}
.typing{position:absolute;top:0;left:12px;display:flex;gap:4px;padding:12px 14px;border-radius:18px;border-bottom-left-radius:6px;background:var(--white);border:1px solid var(--n200);opacity:0;transition:opacity .25s}
.typing.is-on{opacity:1}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--n400);animation:typing 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{transform:none;opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.chat__bar{display:flex;align-items:center;gap:10px;margin:0 12px 16px;padding:10px 10px 10px 16px;border-radius:999px;background:var(--white);border:1px solid var(--n200);font-size:14px;color:var(--n400)}
.chat__bar span{flex:1}
.chat__bar i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:var(--ink)}
.chat__bar i svg{width:16px;height:16px}

/* ---------- 3. Real results ---------- */
.results{padding-bottom:104px}
.results .section-head{margin-bottom:40px}
.mq{position:relative;overflow:hidden;padding:10px 0 26px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.mq__track{display:flex;align-items:stretch;gap:16px;width:max-content;padding:0 8px}
.mq__track>li{display:flex}
.mq__track.is-looping{animation:mq var(--mq-dur,48s) linear infinite}
.mq:hover .mq__track,.mq.is-paused .mq__track,.mq:focus-within .mq__track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(calc(-50% - 8px))}}
.rcard{display:flex;flex-direction:column;gap:10px;width:286px;padding:24px 24px 18px;border-radius:22px;background:var(--white);border:1px solid var(--n200);box-shadow:var(--shadow-sm);transition:transform .25s var(--ease),box-shadow .25s,border-color .25s}
.rcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--n300)}
.rcard__n{font-family:var(--head);font-weight:700;font-size:46px;line-height:1;letter-spacing:-.04em}
.rcard__n i{font-style:normal;color:var(--orange);margin:0 .1em;font-weight:500}
.rcard__l{flex:1;font-size:15.5px;line-height:1.42;color:var(--n600)}
.rcard__who{display:flex;align-items:center;gap:9px;padding-top:14px;margin-top:4px;border-top:1px solid var(--n150);font-size:13px;font-weight:600;color:var(--n800)}
.rcard__who img{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}
.quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.quote{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:30px 28px 26px;border-radius:24px;background:var(--n50);border:1px solid var(--n150)}
.quote blockquote{font-family:var(--head);font-size:clamp(18px,1.6vw,21px);line-height:1.42;letter-spacing:-.012em;font-weight:500;color:var(--n900)}
.quote blockquote::before{content:"\201C"}
.quote blockquote::after{content:"\201D"}
.quote figcaption{display:flex;align-items:center;gap:12px}
.quote figcaption>picture img,.quote figcaption>img:first-child{width:48px;height:48px;border-radius:50%;object-fit:cover;flex-shrink:0}
.quote figcaption>span:not(.quote__badge){display:flex;flex-direction:column;line-height:1.3}
.quote figcaption b{font-size:15px}
.quote figcaption small{font-size:13px;color:var(--n500)}
.quote figcaption small a{text-decoration:underline;text-decoration-color:var(--n300);text-underline-offset:2px}
.quote__logo{margin-left:auto;height:24px;width:auto}
.quote__badge{width:48px;height:48px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:var(--ink);color:var(--white);font-family:var(--head);font-weight:700;font-size:19px}
.quote__src{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:1px;font-size:12px;font-weight:600;color:var(--n500)}
.stars{color:#00B67A;letter-spacing:1px;font-size:13px}

/* ---------- 4. What it does ---------- */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.tile{display:flex;flex-direction:column;gap:10px;padding:14px 14px 30px;border-radius:26px;background:var(--white);border:1px solid var(--n200);box-shadow:var(--shadow-sm);scroll-margin-top:96px;transition:box-shadow .3s,border-color .3s}
.tile:target{border-color:var(--orange-200);box-shadow:0 0 0 5px var(--orange-50),var(--shadow)}
.tile h3{font-family:var(--head);font-size:26px;font-weight:700;letter-spacing:-.025em;margin:18px 14px 0}
.tile p{font-size:16px;line-height:1.55;color:var(--n600);margin:0 14px;max-width:50ch}
.tile__vis{position:relative;height:210px;border-radius:18px;background:var(--n50);border:1px solid var(--n150);overflow:hidden}
.tile__vis *{animation-play-state:paused!important}
.tile__vis.is-play *{animation-play-state:running!important}

.vis-calls{display:grid;place-content:center;justify-items:center;gap:10px;padding:16px}
.vc{display:flex;align-items:center;gap:12px;width:290px;max-width:100%;padding:10px 14px;border-radius:14px;background:var(--white);border:1px solid var(--n200);box-shadow:var(--shadow-sm);font-size:13px;line-height:1.35;color:var(--n500)}
.vc i{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex-shrink:0}
.vc i svg{width:17px;height:17px}
.vc b{display:block;font-size:14px;color:var(--ink)}
.vc--missed i{background:var(--red-50);color:var(--red);animation:ring 6s var(--ease) infinite}
.vc--back{animation:pop-in 6s var(--ease) infinite}
.vc--back i{background:var(--green-50);color:var(--green)}
.vc--chips{width:auto;background:none;border:0;box-shadow:none;padding:4px 0 0;gap:6px;justify-content:center;flex-wrap:wrap}
.vc--chips span{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:var(--white);border:1px solid var(--n200);color:var(--n600);animation:chip 6s infinite}
.vc--chips span:nth-child(2){animation-delay:.25s}.vc--chips span:nth-child(3){animation-delay:.5s}.vc--chips span:nth-child(4){animation-delay:.75s}
@keyframes ring{0%,4%{transform:none}1%,3%{transform:rotate(-12deg)}2%{transform:rotate(12deg)}}
@keyframes pop-in{0%,24%{opacity:0;transform:translateY(10px) scale(.97)}32%,90%{opacity:1;transform:none}98%,100%{opacity:0;transform:translateY(-4px)}}
@keyframes chip{0%,45%{background:var(--white);border-color:var(--n200);color:var(--n600)}52%,62%{background:var(--orange-50);border-color:var(--orange-200);color:var(--orange-700)}70%,100%{background:var(--white);border-color:var(--n200);color:var(--n600)}}

.vis-sched{display:grid;align-content:center;gap:9px;padding:18px 18px 46px}
.vs-row{position:relative;height:38px;border-radius:10px;background:var(--white);border:1px solid var(--n150)}
.vs-row span{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-size:12px;font-weight:700;color:var(--n600)}
.vs-b{position:absolute;top:6px;bottom:6px;border-radius:6px;background:var(--job);box-shadow:inset 3px 0 0 var(--job-bar),inset 0 0 0 1px rgba(47,116,240,.14);animation:slot 7s var(--ease-out) infinite}
.vs-b1{left:64px;width:24%}.vs-b2{left:calc(64px + 26%);width:32%;animation-delay:.25s}
.vs-b3{left:64px;width:30%;animation-delay:.5s}.vs-b4{left:calc(64px + 33%);width:20%;animation-delay:.75s}
.vs-b5{left:calc(64px + 8%);width:36%;animation-delay:1s}
.vs-toast{position:absolute;right:16px;bottom:12px;display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:10px;background:var(--ink);color:var(--white);font-size:12px;font-weight:600;animation:pop-in 7s var(--ease) infinite;animation-delay:.6s}
.vs-toast svg{width:14px;height:14px;color:var(--orange)}
@keyframes slot{0%{opacity:0;transform:translateX(60px)}10%,90%{opacity:1;transform:none}97%,100%{opacity:0}}

.vis-quote{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:14px;padding:18px 20px 44px}
.vq-voice{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:14px 14px 4px 14px;background:#DCF8C6;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.vq-voice i{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:#1F8F5A;color:var(--white);flex-shrink:0}
.vq-voice i svg{width:11px;height:11px}
.vq-voice small{font-size:11px;color:#4F6B57}
.vq-wave{flex:1;display:flex;align-items:center;gap:2px;height:22px}
.vq-wave b{flex:1;border-radius:2px;background:#6FA383;height:40%;animation:wave 1.1s ease-in-out infinite}
.vq-wave b:nth-child(3n){height:80%;animation-delay:.2s}.vq-wave b:nth-child(4n){height:60%;animation-delay:.35s}.vq-wave b:nth-child(5n){height:95%;animation-delay:.1s}
@keyframes wave{50%{transform:scaleY(.45)}}
.vq-doc{display:grid;gap:9px;padding:14px;border-radius:12px;background:var(--white);border:1px solid var(--n200);box-shadow:var(--shadow-sm)}
.vq-l{height:7px;border-radius:4px;background:var(--n200);transform-origin:left;animation:line 6s var(--ease) infinite}
.vq-l2{width:80%;animation-delay:.3s}.vq-l3{width:60%;animation-delay:.6s}
.vq-total{justify-self:end;font-family:var(--head);font-weight:700;font-size:18px;letter-spacing:-.02em;animation:pop-in 6s var(--ease) infinite;animation-delay:.4s}
.vq-sent{position:absolute;right:18px;bottom:12px;display:flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--green-50);border:1px solid var(--green-200);color:var(--green);font-size:12px;font-weight:700;animation:pop-in 6s var(--ease) infinite;animation-delay:.9s}
.vq-sent svg{width:13px;height:13px}
@keyframes line{0%,10%{transform:scaleX(0)}25%,90%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}

.vis-reviews{display:grid;place-content:center;justify-items:center;gap:12px;padding:16px}
.vr-card{display:grid;gap:6px;padding:14px 18px;border-radius:14px;background:var(--white);border:1px solid var(--n200);box-shadow:var(--shadow-sm);width:270px;max-width:100%}
.vr-stars{display:flex;gap:3px;font-size:22px;line-height:1}
.vr-stars i{font-style:normal;color:#FBBC04;animation:star 6s infinite}
.vr-stars i:nth-child(2){animation-delay:.15s}.vr-stars i:nth-child(3){animation-delay:.3s}.vr-stars i:nth-child(4){animation-delay:.45s}.vr-stars i:nth-child(5){animation-delay:.6s}
.vr-line{font-size:13px;color:var(--n600);animation:pop-in 6s var(--ease) infinite;animation-delay:.6s}
.vr-sent{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;background:var(--ink);color:var(--white);font-size:12px;font-weight:600;animation:pop-in 6s var(--ease) infinite;animation-delay:-1.4s}
.vr-sent svg{width:13px;height:13px;color:var(--orange)}
@keyframes star{0%,20%{color:var(--n200);transform:scale(.9)}28%,92%{color:#FBBC04;transform:none}100%{color:var(--n200)}}

.more{display:grid;justify-items:center;margin-top:36px}
.more__btn{display:inline-flex;align-items:center;gap:12px;font-size:16px;font-weight:700;padding:12px 14px 12px 24px;border-radius:999px;background:var(--white);border:1px solid var(--n300);box-shadow:var(--shadow-sm);transition:border-color .2s,box-shadow .2s,transform .2s var(--ease)}
.more__btn:hover{border-color:var(--ink);transform:translateY(-1px)}
.more__plus{position:relative;width:26px;height:26px;border-radius:50%;background:var(--ink);transition:transform .35s var(--ease)}
.more__plus::before,.more__plus::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:2px;margin:-1px 0 0 -5.5px;border-radius:2px;background:var(--white)}
.more__plus::after{transform:rotate(90deg)}
.more__btn[aria-expanded="true"] .more__plus{transform:rotate(45deg)}
.more__wrap{width:100%;margin-top:28px}
.more__wrap[hidden]{display:none}
.more__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.more__grid li{display:flex;align-items:center;gap:12px;padding:16px 18px;border-radius:16px;background:var(--white);border:1px solid var(--n200);font-weight:600;font-size:15.5px;animation:ofc-in .5s var(--ease) both}
.more__grid li svg{width:20px;height:20px;color:var(--orange-600);flex-shrink:0}
.more__grid li:nth-child(3n+2){animation-delay:.05s}.more__grid li:nth-child(3n){animation-delay:.1s}
.more__grid li:nth-child(n+4){animation-delay:.12s}.more__grid li:nth-child(n+7){animation-delay:.2s}

/* ---------- 5. Tools hub ---------- */
.tools{overflow:hidden}
.hub{position:relative;width:min(100%,640px);aspect-ratio:1;margin:0 auto;container-type:inline-size}
.hub__lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hub__ring{fill:none;stroke:var(--n200);stroke-width:1;stroke-dasharray:2 7}
.hub__ring--in{stroke:var(--n150);stroke-dasharray:none}
.hub__base line{stroke:var(--n200);stroke-width:1.5}
.hub__base .hub__l--out{stroke:var(--n150)}
.hub__pulse line{stroke:var(--orange);stroke-width:3;stroke-linecap:round;stroke-dasharray:12 200;stroke-dashoffset:12;animation:pulse 4.8s var(--ease) infinite;animation-delay:calc(var(--i) * .2s)}
@keyframes pulse{0%{stroke-dashoffset:12;opacity:0}8%{opacity:1}62%{stroke-dashoffset:-100;opacity:1}63%,100%{stroke-dashoffset:-100;opacity:0}}
.hub__core{position:absolute;left:50%;top:50%;width:24%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:var(--ink);color:var(--white);display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;box-shadow:0 0 0 12px rgba(255,105,0,.08),0 0 0 26px rgba(255,105,0,.045),0 30px 60px -20px rgba(10,10,10,.5)}
.hub__core::before{content:"";position:absolute;inset:-12px;border-radius:50%;border:2px solid rgba(255,105,0,.45);animation:core 3.2s var(--ease) infinite}
@keyframes core{0%{transform:scale(.92);opacity:.9}80%,100%{transform:scale(1.28);opacity:0}}
.hub__mark img{width:clamp(16px,4.2cqw,26px);height:auto}
.hub__core b{font-size:clamp(11px,2.2cqw,14px);font-weight:700;line-height:1.2;padding:0 8px}
.hub__t{position:absolute;left:50%;top:50%;width:0;height:0;--r:42cqw;transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1))}
.hub__t--in{--r:25cqw}
.hub__logo{position:absolute;left:0;top:0;width:clamp(34px,9cqw,56px);height:clamp(34px,9cqw,56px);transform:translate(-50%,-50%);border-radius:30%;background:var(--white);border:1px solid var(--n200);box-shadow:0 14px 30px -16px rgba(10,10,10,.35),0 2px 4px rgba(10,10,10,.04);display:grid;place-items:center;transition:transform .3s var(--ease),box-shadow .3s}
.hub__t--in .hub__logo{width:clamp(34px,8.6cqw,54px);height:clamp(34px,8.6cqw,54px)}
.hub__logo img{width:54%;height:54%;object-fit:contain}
.hub__t:hover .hub__logo{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 18px 36px -16px rgba(10,10,10,.45)}
.hub__name{position:absolute;left:0;bottom:calc(clamp(34px,9cqw,56px) / 2 + 8px);z-index:3;transform:translate(-50%,4px);padding:4px 10px;border-radius:8px;background:var(--ink);color:var(--white);font-size:12.5px;font-weight:600;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s var(--ease)}
.hub__t:hover .hub__name{opacity:1;transform:translate(-50%,0)}
.hub__t:hover{z-index:5}
@supports not (width:1cqw){.hub__t{--r:230px}.hub__t--in{--r:150px}}
.tools__cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:40px}
.tcat{padding:18px 18px 16px;border-radius:20px;background:var(--n50);border:1px solid var(--n150)}
.tcat__h{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--n500);margin-bottom:12px}
.tcat ul{display:flex;flex-wrap:wrap;gap:6px}
.tcat li{display:inline-flex;align-items:center;gap:7px;padding:5px 10px 5px 6px;border-radius:999px;background:var(--white);border:1px solid var(--n200);font-size:13px;font-weight:600;color:var(--n800)}
.tcat img{width:18px;height:18px;object-fit:contain}

/* ---------- 6. How it works ---------- */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:8px}
.steps::before,.steps::after{content:"";position:absolute;left:calc(100% / 6);right:calc(100% / 6);top:31px;height:2px;border-radius:2px;background:var(--n200)}
.steps::after{background:var(--orange);transform:scaleX(0);transform-origin:left;transition:transform 1.4s var(--ease) .3s}
.steps.is-in::after{transform:scaleX(1)}
.step{position:relative;display:grid;justify-items:center;text-align:center;gap:12px}
.step__n{position:relative;z-index:1;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:2px solid var(--orange);font-family:var(--head);font-weight:700;font-size:24px;box-shadow:0 0 0 10px var(--n50)}
.step h3{font-family:var(--head);font-size:23px;font-weight:700;letter-spacing:-.02em;margin-top:8px}
.step p{font-size:16.5px;line-height:1.55;color:var(--n600);max-width:31ch}
.how__human{display:flex;align-items:center;justify-content:center;gap:12px;width:max-content;max-width:100%;margin:60px auto 0;padding:15px 24px;border-radius:999px;background:var(--white);border:1px solid var(--n200);box-shadow:var(--shadow-sm);font-weight:600;font-size:17px;text-align:center}
.how__dot{flex-shrink:0;width:10px;height:10px;border-radius:50%;background:#22A55A;box-shadow:0 0 0 4px var(--green-50)}

/* ---------- 7. Case studies ---------- */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.ccard{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:var(--white);border:1px solid var(--n200);box-shadow:var(--shadow-sm);transition:transform .3s var(--ease),box-shadow .3s}
.ccard:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.ccard__img{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--n100)}
.ccard__img>img,.ccard__poster{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.ccard:hover .ccard__img>img{transform:scale(1.04)}
.ccard__logo{position:absolute;left:14px;bottom:14px;z-index:2;display:flex;padding:8px 10px;border-radius:11px;background:rgba(255,255,255,.95);box-shadow:var(--shadow-sm)}
.ccard__logo img{height:22px;width:auto}
.ccard__img--art{display:grid;place-items:center}
.ccard__img--art svg{width:56%;height:auto}
.ccard__img--pallet{background:radial-gradient(circle at 30% 20%,#fff 0,transparent 60%),var(--orange-50);color:var(--orange-600)}
.ccard__img--print{background:radial-gradient(circle at 70% 20%,#262626 0,transparent 60%),var(--ink);color:var(--orange)}
.ccard__body{display:flex;flex-direction:column;gap:10px;flex:1;padding:20px 22px 22px}
.ccard__k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--n500)}
.ccard__r{flex:1;font-family:var(--head);font-size:21px;line-height:1.28;letter-spacing:-.015em;font-weight:700}
.ccard__by{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--n700)}
.ccard__by img,.ccard__badge{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}
.ccard__badge{display:grid;place-items:center;background:var(--ink);color:var(--white);font-size:12px;font-weight:700}
.ccard__go{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:14px;font-weight:700;color:var(--orange-700)}
.ccard__go svg{width:15px;height:15px;transition:transform .2s var(--ease)}
.ccard:hover .ccard__go svg{transform:translateX(3px)}
.ccard__vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:var(--ink);opacity:0;pointer-events:none}
.ccard__vid.is-playing video{opacity:1;pointer-events:auto}
.ccard__vid.is-playing .ccard__play,.ccard__vid.is-playing .ccard__logo,.ccard__vid.is-playing .ccard__poster{display:none}
.ccard__play{position:absolute;left:50%;top:50%;z-index:2;width:66px;height:66px;margin:-33px 0 0 -33px;border-radius:50%;display:grid;place-items:center;background:var(--orange);color:var(--ink);box-shadow:0 14px 30px -10px rgba(255,105,0,.7);transition:transform .25s var(--ease)}
.ccard__play svg{width:24px;height:24px;margin-left:3px}
.ccard__play:hover{transform:scale(1.07)}
.ccard--video .ccard__body{color:inherit}
/* Placeholders that are waiting on Parikshit. Loud on purpose so none slip into a deploy. */
.ph{display:block;padding:8px 10px;border-radius:10px;border:1.5px dashed #E08A00;background:repeating-linear-gradient(135deg,#FFF8EC 0 10px,#FFF2DB 10px 20px);color:#8A4B00;font-family:var(--body);font-size:14px;font-weight:600;letter-spacing:0;line-height:1.4}
.ph::before{content:"Placeholder · ";font-weight:800}
.also{text-align:center;margin:76px auto 26px}
.also__count{font-family:var(--head);font-size:clamp(26px,3vw,36px);font-weight:500;letter-spacing:-.025em}
.also__sub{margin-top:6px;font-size:15px;color:var(--n500)}
.tq{display:flex;flex-direction:column;justify-content:space-between;gap:16px;width:340px;padding:20px 20px 18px;border-radius:18px;background:var(--n50);border:1px solid var(--n150)}
.tq blockquote{font-size:14px;line-height:1.55;color:var(--n700)}
.tq figcaption{display:flex;align-items:center;gap:10px}
.tq img{width:36px;height:36px;border-radius:50%;object-fit:cover}
.tq figcaption span{display:flex;flex-direction:column;line-height:1.3}
.tq b{font-size:14px}
.tq small{font-size:12.5px;color:var(--n500)}

/* ---------- 8. Final call ---------- */
.final{background:var(--ink);color:var(--white);text-align:center;overflow:hidden;padding:150px 0}
.final__glow{position:absolute;width:1100px;height:1100px;left:50%;top:20%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,105,0,.3),rgba(255,105,0,0));pointer-events:none}
.final__b{position:absolute;right:-70px;bottom:-170px;width:440px;opacity:.07;pointer-events:none}
.final__in{position:relative;display:grid;justify-items:center;gap:22px}
.final h2{max-width:15ch}
.final__sub{font-size:clamp(17px,1.5vw,20px);color:var(--n400);max-width:44ch}

/* ---------- Footer ---------- */
.ftr{background:var(--ink);color:var(--n400);padding:72px 0 30px;border-top:1px solid var(--n800)}
.ftr__top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:56px}
.ftr__brand{display:grid;gap:14px;align-content:start}
.ftr__brand img{height:26px;width:auto}
.ftr__brand p{font-size:15px;line-height:1.5;max-width:30ch}
.ftr__mail{color:var(--white);font-weight:600;text-decoration:underline;text-decoration-color:var(--n600);text-underline-offset:4px;width:max-content}
.ftr__mail:hover{text-decoration-color:var(--orange)}
.ftr__cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.ftr__cols div{display:grid;gap:10px;align-content:start}
.ftr__h{color:var(--white);font-weight:700;font-size:14px;margin-bottom:4px}
.ftr__cols a{font-size:14px;transition:color .2s}
.ftr__cols a:hover{color:var(--white)}
.ftr__bot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:56px;padding-top:24px;border-top:1px solid var(--n800);font-size:13px}
.ftr__partner{display:inline-flex;align-items:center;gap:9px;padding:6px 12px 6px 8px;border-radius:999px;background:#151515;border:1px solid var(--n800);color:var(--n300);font-weight:600}
.ftr__partner img{width:16px;height:16px}

/* ---------- Industry pages ---------- */
.hero--ind .hero__h{font-size:clamp(36px,3.9vw,56px);text-wrap:balance}
.hero__k{display:block;margin-top:.4em;font-size:.56em;line-height:1.18;letter-spacing:-.02em;color:var(--orange-600);text-wrap:balance}
.proofx .section-head{margin-bottom:44px}
.pblock{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"head head" "stats quote" "more more";gap:22px 28px;padding:30px;border-radius:28px;background:var(--white);border:1px solid var(--n200);box-shadow:var(--shadow-sm)}
.pblock+.pblock{margin-top:22px}
.pblock__head{grid-area:head;display:flex;align-items:center;gap:18px}
.pblock__logo{height:40px;width:auto;flex-shrink:0;padding-right:18px;border-right:1px solid var(--n200)}
.pblock__k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--n500)}
.pblock__head h3{font-family:var(--head);font-size:clamp(22px,2.2vw,28px);font-weight:700;letter-spacing:-.02em;margin-top:2px}
.pblock__stats{grid-area:stats;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
.pblock__stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Three numbers get the full width of the card, with the quote under them, so each number stays big. */
.pblock:has(.pblock__stats--3){grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "stats" "quote" "more"}
.pstat{min-width:0;container-type:inline-size;padding:18px 18px 16px;border-radius:18px;background:var(--n50);border:1px solid var(--n150);border-left:3px solid var(--orange)}
/* Sized to its own box, so "100%→19%" fits a narrow card as well as "8→17" fits a wide one. */
.pstat__n{font-family:var(--head);font-weight:700;font-size:clamp(16px,calc(96cqi / var(--em,4.2)),40px);line-height:1.08;letter-spacing:-.035em;white-space:nowrap}
.pstat__n i{font-style:normal;color:var(--orange);margin:0 .08em;font-weight:500}
.pstat__l{margin-top:8px;font-size:14px;line-height:1.42;color:var(--n600)}
.pstat--ph{border-left-color:#E08A00}
.pstat--ph .pstat__n{color:var(--n300)}
.pblock__quote{grid-area:quote;background:var(--n50)}
.ph-q{font-family:var(--body)!important}
.ph-q::before,.ph-q::after{content:none!important}
.pblock__more{grid-area:more;justify-self:start;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;color:var(--orange-700)}
.pblock__more svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.pblock__more:hover svg{transform:translateX(3px)}
.proofx__also{max-width:var(--container);margin:64px auto 18px;padding:0 var(--gutter);text-align:center}
.proofx__also-h{font-family:var(--head);font-size:clamp(20px,2vw,26px);font-weight:500;letter-spacing:-.02em}

/* Drawings and plans (electricians page). */
.draw__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.draw__copy{display:grid;gap:18px;justify-items:start}
.draw__list{display:grid;gap:10px;margin-top:4px}
.draw__list li{position:relative;padding-left:28px;font-size:16.5px;color:var(--n700)}
.draw__list li::before{content:"";position:absolute;left:0;top:5px;width:16px;height:16px;border-radius:50%;background:var(--orange-50);border:1px solid var(--orange-200)}
.draw__list li::after{content:"";position:absolute;left:5.5px;top:8.5px;width:4px;height:7px;border:solid var(--orange-700);border-width:0 2px 2px 0;transform:rotate(45deg)}
.draw__vis{position:relative}
.draw__vis::before{content:"";position:absolute;inset:8% -4% -6% 6%;border-radius:28px;background:radial-gradient(closest-side,rgba(255,105,0,.14),rgba(255,105,0,0));pointer-events:none}
.draw__sheet{position:relative;padding:18px;border-radius:24px;background:var(--white);border:1px solid var(--n200);box-shadow:var(--shadow-lg)}
.draw__file{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;padding:6px 10px;border-radius:10px;background:var(--n50);border:1px solid var(--n200);font-size:13px;font-weight:600;color:var(--n700)}
.draw__file svg{width:15px;height:15px;color:var(--red)}
.draw__plan{width:100%;height:auto;background:#FBFCFE;border-radius:14px;border:1px solid var(--n150)}
.draw__walls rect{fill:none;stroke:#2B3A55;stroke-width:3}
.draw__labels text{font:600 11px var(--body);fill:#5B6B85;letter-spacing:.02em}
.dsym circle{fill:#FFF3E8;stroke:var(--orange);stroke-width:1.6}
.dsym path{stroke:var(--orange);stroke-width:1.4}
.psym rect{fill:#EDF4FF;stroke:var(--job-bar);stroke-width:1.4}
.psym circle{fill:var(--job-bar)}
.dsym,.psym{transform-box:fill-box;transform-origin:center;opacity:0;animation:sym-in .45s var(--ease-out) forwards paused;animation-delay:calc(var(--k) * 55ms + .2s)}
.draw__vis.is-play .dsym,.draw__vis.is-play .psym{animation-play-state:running}
@keyframes sym-in{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
.draw__totals{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.draw__t{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--n50);border:1px solid var(--n200);font-size:13px;font-weight:700;opacity:0;animation:pop-on .5s var(--ease-out) forwards paused;animation-delay:calc(var(--k) * 55ms + .3s)}
.draw__vis.is-play .draw__t{animation-play-state:running}
.draw__t svg{width:15px;height:15px}
.draw__t--ok{background:var(--green-50);border-color:var(--green-200);color:var(--green)}
.draw__dl{width:12px;height:12px;border-radius:50%;border:1.6px solid var(--orange);background:#FFF3E8}
.draw__pp{width:13px;height:9px;border-radius:2px;border:1.4px solid var(--job-bar);background:#EDF4FF}
@keyframes pop-on{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dsym,.psym,.draw__t{opacity:1;animation:none}}
@media (max-width:960px){
  .draw__grid{grid-template-columns:1fr;gap:36px}
  .pblock{grid-template-columns:1fr;grid-template-areas:"head" "stats" "quote" "more"}
}
@media (max-width:760px){
  .pblock{padding:20px 18px;border-radius:22px}
  .pblock__stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pblock__stats--3,.pblock__stats--long{grid-template-columns:minmax(0,1fr);gap:10px}
  .pstat{padding:14px 14px 12px}
  .pstat__l{font-size:13px}
  .pblock__head{flex-direction:column;align-items:flex-start;gap:10px}
  .pblock__logo{border-right:0;padding-right:0;height:34px}
  .draw__sheet{padding:12px;border-radius:20px}
}

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hdr__in{gap:20px}
  .tools__cats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quotes{grid-template-columns:1fr;max-width:720px;margin-left:auto;margin-right:auto}
}
@media (max-width:960px){
  .hero{padding:40px 0 80px}
  .hero__grid{grid-template-columns:1fr;gap:56px}
  .hero__copy{justify-items:center;text-align:center}
  .hero__h{margin:0 auto;max-width:18ch}
  .rot{justify-items:center;white-space:normal;text-wrap:balance}
  .hero__cta{align-items:center}
  .hero__grid-bg{background-image:radial-gradient(ellipse 80% 50% at 50% 30%,rgba(255,255,255,0) 0%,#fff 72%),linear-gradient(var(--n150) 1px,transparent 1px),linear-gradient(90deg,var(--n150) 1px,transparent 1px)}
  .ftr__top{grid-template-columns:1fr}
}
@media (max-width:900px){
  .hdr__in{display:flex}
  .hdr__nav{display:none}
  .hdr__burger{display:block}
  .hdr__cta{margin-left:auto}
}
@media (max-width:760px){
  :root{--gutter:20px}
  .section{padding:84px 0}
  .section-head{margin-bottom:40px}
  .hdr__in{height:64px;gap:12px}
  .hdr__logo img{height:23px}
  .hdr__cta{font-size:13px;padding:9px 14px}
  .mnav{inset:64px 0 0}
  html{scroll-padding-top:76px}
  .phone{width:310px;height:610px;border-radius:50px}
  .tiles{grid-template-columns:minmax(0,1fr)}
  .tile h3{font-size:23px}
  .tile__vis{height:190px}
  .more__grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:34px;padding-left:4px}
  .steps::before,.steps::after{left:31px;right:auto;top:32px;bottom:32px;width:2px;height:auto}
  .steps::after{transform:scaleY(0);transform-origin:top}
  .steps.is-in::after{transform:scaleY(1)}
  .step{grid-template-columns:64px 1fr;justify-items:start;text-align:left;column-gap:20px;row-gap:6px}
  .step__n{grid-row:span 2;box-shadow:0 0 0 8px var(--n50)}
  .step h3{margin-top:4px}
  .how__human{border-radius:20px;font-size:16px;text-align:left;align-items:flex-start}
  .how__dot{margin-top:7px}
  .cards{grid-template-columns:1fr}
  .rcard{width:256px;padding:20px 20px 16px}
  .rcard__n{font-size:40px}
  .tq{width:290px}
  .quote{padding:24px 22px 22px}
  .hub__name{display:none}
  .tools__cats{grid-template-columns:1fr;margin-top:28px}
  .final{padding:110px 0}
  .final__b{width:300px;bottom:-120px;right:-80px}
  .ftr__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  .ftr__bot{flex-direction:column}
}
@media (max-width:380px){
  .hdr__cta{padding:8px 12px;font-size:12.5px}
  .phone{width:296px;height:590px}
}
@media (prefers-reduced-motion:reduce){
  .mq{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .rot__item{transition:none}
}