/* FLUXUS AUTOMATION
   A restrained, editorial design. Layout and interactions are component-based.
   Color, space, and typography tokens live here for easy maintenance. */ :root {
  --paper:#f6f5f2;
  --white:#fff;
  --ink:#161717;
  --muted:#646964;
  --line:#deded8;
  --orange:#c9693c;
  --soft:#efede8;
  --dark:#151717;
  --blue:#284fbb;
  --radius:7px;
  --wrap:1240px;
  --header:76px;
  --font:'DM Sans',Arial,sans-serif;
  --display:'Space Grotesk','Arial Narrow',Arial,sans-serif
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header) + 24px)
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.6 var(--font);
  -webkit-font-smoothing:antialiased
}
body.dialog-open {
  overflow:hidden
}
a {
  color:inherit;
  text-decoration:none
}
button,input,select,textarea {
  font:inherit
}
button {
  cursor:pointer
}
button:disabled {
  opacity:.5;
  cursor:not-allowed
}
img,svg {
  max-width:100%
}
svg {
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round
}
::selection {
  background:#ecd4c5;
  color:#111
}
.wrap {
  width:min(calc(100% - 88px),var(--wrap));
  margin-inline:auto
}
h1,h2,h3,p {
  margin-top:0
}
h1,h2,h3 {
  font-family:var(--display);
  font-weight:600;
  letter-spacing:-.057em;
  line-height:1.055
}
h1 {
  font-size:clamp(4rem,7vw,7.9rem)
}
h2 {
  font-size:clamp(3rem,5.8vw,6.2rem)
}
h3 {
  font-size:1.6rem
}
p {
  color:var(--muted)
}
:focus-visible {
  outline:3px solid #bb5b30;
  outline-offset:4px
}
.skip-link {
  position:fixed;
  left:20px;
  top:-100px;
  z-index:1000;
  background:#fff;
  padding:12px
}
.skip-link:focus {
  top:15px
}
.serif-accent {
  font-family:Georgia,'Times New Roman',serif;
  font-style:italic;
  font-weight:400;
  letter-spacing:-.075em
}
.eyebrow {
  display:flex;
  align-items:center;
  gap:12px;
  text-transform:uppercase;
  letter-spacing:.15em;
  font-family:var(--display);
  font-weight:600;
  font-size:11px;
  line-height:1.5;
  color:#555c57
}
.eyebrow .dot {
  width:7px;
  height:7px;
  background:var(--orange);
  border-radius:50%
}
.eyebrow-light {
  color:#acb1af
}
/* Navigation */ .site-header {
  height:var(--header);
  position:sticky;
  top:0;
  background:rgba(246,245,242,.93);
  z-index:50;
  border-bottom:1px solid rgba(24,24,24,.12);
  backdrop-filter:blur(18px)
}
.nav-wrap {
  height:100%;
  display:flex;
  align-items:center;
  gap:50px
}
.brand {
  font:600 19px/1 var(--display);
  letter-spacing:-.045em;
  display:flex;
  align-items:center;
  gap:11px;
  white-space:nowrap
}
.brand-mark {
  font:700 23px/.9 var(--display);
  letter-spacing:-.16em;
  padding-right:2px;
  display:inline-block;
  transform:skewX(-12deg)
}
.brand-light {
  font-weight:400
}
.main-nav {
  margin-left:auto;
  display:flex;
  gap:28px;
  align-items:center
}
.main-nav a {
  font-size:13px;
  font-weight:600;
  color:#3e4240;
  transition:color .2s
}
.main-nav a:hover,.footer a:hover {
  color:var(--orange)
}
.nav-cta {
  background:var(--ink);
  color:#fff;
  padding:11px 17px;
  font-size:13px;
  font-weight:700;
  border-radius:4px;
  white-space:nowrap;
  transition:background .2s,transform .2s
}
.nav-cta span {
  margin-left:18px
}
.nav-cta:hover {
  background:#454746;
  transform:translateY(-2px)
}
.menu-toggle {
  display:none;
  background:none;
  border:0;
  padding:12px;
  margin-left:auto
}
.menu-toggle span {
  display:block;
  width:26px;
  height:2px;
  background:var(--ink);
  margin:6px
}
.mobile-nav {
  position:absolute;
  top:var(--header);
  left:0;
  right:0;
  padding:12px 32px 25px;
  background:var(--paper);
  border-bottom:1px solid var(--line);
  box-shadow:0 20px 30px #0001
}
.mobile-nav[hidden] {
  display:none
}
.mobile-nav a {
  display:block;
  padding:13px 4px;
  border-bottom:1px solid var(--line);
  font-weight:600
}
/* Page transition: fast, nonblocking, and optional */ .page-loader {
  position:fixed;
  inset:0;
  z-index:300;
  background:var(--paper);
  display:grid;
  place-items:center;
  pointer-events:none;
  opacity:0;
  visibility:hidden
}
.page-loader.active {
  opacity:1;
  visibility:visible;
  transition:opacity .23s ease
}
.page-loader.leaving {
  opacity:0;
  visibility:hidden;
  transition:opacity .32s ease
}
.loading-mark {
  font:700 64px var(--display);
  letter-spacing:-.12em
}
.loading-mark span {
  color:var(--orange)
}
/* Hero */ .hero {
  display:grid;
  grid-template-columns:47% 53%;
  gap:15px;
  min-height:735px;
  align-items:center;
  padding-block:80px 94px
}
.hero-content {
  padding-right:32px
}
.hero h1 {
  margin:28px 0 26px;
  letter-spacing:-.07em;
  line-height:.98
}
.hero h1 .serif-accent {
  white-space:nowrap
}
.hero-description {
  font-size:19px;
  line-height:1.62;
  max-width:510px;
  color:#4b4f4c
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:30px;
  margin-top:32px
}
.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:28px;
  padding:15px 21px;
  border:1px solid transparent;
  border-radius:4px;
  font:700 13px/1.2 var(--font);
  white-space:nowrap;
  min-height:49px;
  transition:background .22s,transform .22s,color .22s,box-shadow .22s
}
.btn span {
  font-size:18px;
  font-weight:400
}
.btn:hover {
  transform:translateY(-3px)
}
.btn-dark {
  background:#191a1a;
  color:white
}
.btn-dark:hover {
  background:#333536;
  box-shadow:0 14px 28px #0002
}
.btn-white {
  background:#f9f8f4;
  color:#111
}
.btn-white:hover {
  background:#dcdad4
}
.text-link {
  border-bottom:1px solid var(--ink);
  font-size:13px;
  font-weight:700;
  padding-block:7px;
  white-space:nowrap
}
.text-link span {
  margin-left:18px
}
.hero-footnote {
  display:flex;
  align-items:center;
  gap:13px;
  margin-top:62px;
  color:#797e77;
  font-size:12px
}
.divider-line {
  width:30px;
  height:1px;
  background:#a7a8a2
}
.hero-visual {
  align-self:center;
  min-width:0;
  padding-top:35px
}
.graphic-stamp,.visual-caption {
  font:600 10px var(--display);
  letter-spacing:.15em;
  color:#696e67;
  display:flex;
  justify-content:space-between
}
.graphic-stamp {
  padding:0 0 14px 12px
}
.software-preview {
  height:410px;
  border:1px solid #303536;
  background:#171a1b;
  color:#e8edea;
  box-shadow:25px 28px 50px rgba(33,36,33,.18),-16px -18px 0 rgba(194,196,189,.25);
  border-radius:11px;
  overflow:hidden;
  transform:perspective(1300px) rotateY(-6deg) rotateX(3deg);
  transition:transform .6s
}
.software-preview:hover {
  transform:perspective(1300px) rotateY(-1deg) rotateX(0)
}
.window-toolbar {
  height:52px;
  padding:0 22px;
  display:flex;
  align-items:center;
  gap:30px;
  border-bottom:1px solid #333737;
  background:#1e2223
}
.mini-logo {
  font:700 18px var(--display);
  letter-spacing:-.09em
}
.window-breadcrumb {
  font-size:11px;
  color:#acb5af
}
.window-breadcrumb span {
  color:#69716c;
  margin:0 10px
}
.window-demo {
  font-size:10px;
  color:#a9b4ac;
  margin-left:auto
}
.app-layout {
  display:flex;
  height:calc(100% - 52px)
}
.app-sidebar {
  width:132px;
  flex-shrink:0;
  border-right:1px solid #333737;
  padding:25px 12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:11px;
  color:#8f9992
}
.app-sidebar span {
  padding:8px
}
.app-sidebar .side-active {
  background:#313636;
  color:white;
  border-radius:4px
}
.app-sidebar i {
  font-style:normal;
  margin-left:8px
}
.app-content {
  flex:1;
  min-width:0;
  padding:22px
}
.app-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  font-weight:700
}
.app-status {
  font-size:9px;
  font-weight:400;
  color:#9aa6a0
}
.app-status b,.pulse-dot {
  display:inline-block;
  width:7px;
  height:7px;
  background:#c5a06e;
  border-radius:50%;
  margin-right:6px
}
.app-metrics {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:20px 0 16px
}
.app-metrics>div {
  border:1px solid #39403d;
  background:#242929;
  padding:14px
}
.app-metrics span,.app-metrics small {
  display:block;
  color:#a0aca4;
  font-size:10px
}
.app-metrics strong {
  display:block;
  font:600 23px var(--display);
  letter-spacing:-.04em;
  color:#e9f0ea;
  margin:4px 0
}
.app-flow {
  border:1px solid #39403d;
  padding:13px 14px
}
.flow-heading,.workflow-art-top {
  font:600 10px var(--display);
  letter-spacing:.05em;
  display:flex;
  justify-content:space-between
}
.flow-heading span {
  color:#c78764;
  font-size:9px
}
.flow-steps {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:4px;
  margin:22px 0 2px
}
.flow-steps>div {
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:5px;
  text-align:center
}
.flow-steps>i {
  width:24px;
  height:1px;
  align-self:center;
  background:#59635b
}
.flow-check {
  border:1px solid #ce9171;
  border-radius:50%;
  font-size:12px;
  color:#e09a75;
  width:24px;
  height:24px;
  display:grid;
  place-items:center
}
.flow-steps strong {
  font-size:10px;
  white-space:nowrap
}
.flow-steps small {
  color:#8c998f;
  font-size:9px
}
.app-bottom {
  font-size:10px;
  color:#abb5ab;
  margin-top:15px
}
.visual-caption {
  padding:23px 0 0 12px
}
/* Reusable sections */ .light-strip {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)
}
.strip-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:24px;
  gap:24px
}
.strip-inner>span {
  font-size:13px;
  color:#777b76
}
.strip-inner div {
  display:flex;
  gap:44px;
  flex-wrap:wrap
}
.strip-inner b {
  font:500 14px var(--display)
}
.section {
  padding-block:135px
}
.section-head {
  display:flex;
  justify-content:space-between;
  gap:60px;
  align-items:end;
  margin-bottom:65px
}
.section-head h2 {
  margin:22px 0 0
}
.section-head>p {
  max-width:345px;
  margin:0 0 7px;
  font-size:16px
}
.service-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}
.service-card {
  position:relative;
  min-height:365px;
  padding:25px;
  background:#fff;
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  transition:transform .3s,border-color .3s,box-shadow .3s
}
.service-card:hover {
  transform:translateY(-8px);
  border-color:#b6a89b;
  box-shadow:0 25px 30px #0000000d
}
.service-no {
  font:600 10px var(--display);
  letter-spacing:.12em;
  color:#7c817b
}
.service-icon {
  width:65px;
  height:65px;
  background:#f3f1ed;
  border:1px solid #ebe9e2;
  margin:45px 0 24px;
  display:grid;
  place-items:center
}
.service-icon svg {
  width:30px;
  height:30px
}
.service-card h3 {
  font-size:23px;
  letter-spacing:-.05em;
  margin:0 0 12px
}
.service-card p {
  font-size:14px;
  line-height:1.65;
  flex:1;
  margin:0
}
.card-link {
  font-size:12px;
  font-weight:700;
  display:flex;
  justify-content:space-between;
  border-top:1px solid #e5e5df;
  padding-top:18px;
  margin-top:22px
}
.card-link span {
  font-size:18px
}
/* Dark graphic feature */ .dark-feature {
  background:#17191a;
  color:#fff;
  padding:120px 0;
  overflow:hidden
}
.feature-layout {
  display:grid;
  grid-template-columns:.95fr 1fr;
  gap:12%;
  align-items:center
}
.feature-copy h2 {
  margin:26px 0
}
.feature-copy p {
  color:#b5b9b5;
  max-width:440px;
  font-size:17px
}
.feature-copy .btn {
  margin-top:25px
}
.workflow-art {
  background:#222526;
  border:1px solid #434747;
  padding:30px;
  max-width:520px;
  justify-self:end;
  width:100%;
  box-shadow:24px 24px 0 #303131
}
.workflow-art-top {
  color:#a9b2ad;
  margin-bottom:25px
}
.art-node {
  display:flex;
  align-items:center;
  gap:22px;
  background:#2b3030;
  border:1px solid #515b57;
  padding:16px
}
.art-node>span {
  color:#9eaba2;
  font:500 12px var(--display)
}
.art-node div {
  flex:1;
  display:flex;
  flex-direction:column
}
.art-node strong {
  font-size:14px
}
.art-node small {
  font-size:11px;
  color:#9da8a0
}
.art-node.is-active {
  border-color:#b97853;
  background:#35312e
}
.node-indicator {
  width:7px;
  height:7px;
  background:#c99475;
  border-radius:50%
}
.art-connector {
  height:28px;
  width:1px;
  background:#666e66;
  margin-inline:auto;
  position:relative
}
.art-connector:after {
  content:'';
  position:absolute;
  bottom:-1px;
  left:-3px;
  border-top:5px solid #aaa;
  border-left:3px solid transparent;
  border-right:3px solid transparent
}
.art-footnote {
  font-size:11px;
  color:#9da59e;
  margin:25px 0 0
}
.process-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--line)
}
.process-item {
  padding:25px 30px 0 0
}
.process-item+ .process-item {
  padding-left:30px;
  border-left:1px solid var(--line)
}
.process-item>span {
  font:500 13px var(--display);
  color:var(--orange)
}
.process-item h3 {
  font-size:22px;
  margin:45px 0 13px
}
.process-item p {
  font-size:14px
}
/* Video concept */ .film-section {
  background:#e9e7e1;
  padding:120px 0 130px
}
.film-heading {
  max-width:620px;
  margin-bottom:48px
}
.film-heading h2 {
  margin:20px 0
}
.film-heading p {
  max-width:520px
}
.film-stage {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  aspect-ratio:2.3 / 1;
  overflow:hidden;
  color:#fff;
  background:radial-gradient(circle at 50% 60%,#343536,#101213 70%);
  border:0;
  padding:0;
  text-align:left
}
.film-stage:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 15%,#ffffff0d 48%,transparent 57%);
  transform:translateX(-130%);
  transition:transform .9s
}
.film-stage:hover:after {
  transform:translateX(130%)
}
.film-pattern {
  position:absolute;
  inset:0;
  opacity:.2;
  background-image:linear-gradient(90deg,#fff1 1px,transparent 1px),linear-gradient(#fff1 1px,transparent 1px);
  background-size:60px 60px
}
.film-wordmark {
  font:600 clamp(4rem,12vw,13rem)/1 var(--display);
  letter-spacing:-.09em;
  color:#e8e8e3
}
.film-wordmark span {
  font-size:15px;
  vertical-align:top;
  letter-spacing:0
}
.film-play {
  z-index:2;
  position:absolute;
  display:grid;
  place-items:center;
  width:80px;
  height:80px;
  border:1px solid #ffffff80;
  border-radius:50%;
  background:#ffffff20;
  backdrop-filter:blur(8px);
  transition:transform .25s,background .25s
}
.film-play svg {
  width:26px;
  fill:#fff;
  stroke:none;
  margin-left:3px
}
.film-stage:hover .film-play {
  transform:scale(1.13);
  background:#ffffff40
}
.film-footer {
  position:absolute;
  bottom:24px;
  left:28px;
  right:28px;
  display:flex;
  justify-content:space-between;
  color:#ced0cd;
  font:600 10px var(--display);
  letter-spacing:.1em;
  z-index:2
}
.small-note {
  font-size:12px;
  margin:16px 0 0
}
.cta-section {
  padding:130px 0
}
.cta-layout {
  border-top:1px solid var(--ink);
  display:grid;
  grid-template-columns:1fr 360px;
  gap:100px;
  padding-top:35px;
  align-items:end
}
.cta-layout h2 {
  margin:25px 0 0
}
.cta-layout p {
  margin-bottom:26px
}
.cta-layout .inline-subtle {
  display:block;
  font-size:13px;
  color:#666;
  margin-top:18px
}
.dialog-backdrop {
  position:fixed;
  inset:0;
  z-index:200;
  background:#0a0b0bcb;
  display:grid;
  place-items:center;
  padding:25px
}
.dialog-backdrop[hidden] {
  display:none
}
.film-dialog {
  width:min(780px,100%);
  background:#f6f5f2;
  padding:36px;
  position:relative
}
.dialog-close {
  position:absolute;
  right:25px;
  top:19px;
  background:none;
  border:0;
  font-size:31px
}
.dialog-topline {
  display:flex;
  justify-content:space-between;
  font:700 11px var(--display);
  letter-spacing:.1em;
  margin-top:15px
}
.dialog-slide {
  min-height:360px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding-block:45px
}
.dialog-slide>span {
  font:700 12px var(--display);
  color:var(--orange);
  letter-spacing:.12em
}
.dialog-slide h2 {
  font-size:clamp(2.5rem,5vw,4.7rem);
  margin:20px 0
}
.dialog-slide p {
  max-width:530px
}
.dialog-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:20px
}
.dialog-controls button {
  background:none;
  border:0;
  font-size:13px;
  font-weight:700
}
.film-dots {
  display:flex;
  gap:6px
}
.film-dots span {
  width:7px;
  height:7px;
  border-radius:50%;
  background:#d2d1c9
}
.film-dots span.active {
  background:var(--ink)
}
.dialog-disclaimer {
  font-size:11px;
  margin:22px 0 0
}
/* Contact page */ .contact-hero {
  min-height:calc(100vh - var(--header));
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  gap:10%;
  align-items:start;
  padding:105px 0 120px
}
.contact-intro h1 {
  font-size:clamp(4.2rem,7.5vw,8rem);
  margin:28px 0
}
.contact-intro>p {
  font-size:18px;
  max-width:430px
}
.contact-detail {
  margin-top:38px;
  display:flex;
  flex-direction:column;
  gap:6px
}
.contact-detail span {
  font:600 11px var(--display);
  letter-spacing:.12em;
  color:#838881
}
.contact-detail a {
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:5px
}
.contact-detail strong {
  font-weight:500
}
.contact-side-note {
  font:italic 25px Georgia,serif;
  color:#99958c;
  margin-top:100px;
  max-width:300px
}
.contact-panel {
  border:1px solid #d5d5d0;
  background:#fff;
  padding:42px 45px;
  box-shadow:20px 20px 0 #eeece6
}
.form-panel-head {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  margin-bottom:27px;
  padding-bottom:20px
}
.form-panel-head h2 {
  font-size:clamp(2.25rem,3.4vw,3.5rem);
  margin:12px 0 0
}
.panel-asterisk {
  font-size:42px;
  color:var(--orange);
  line-height:1
}
.form-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.contact-panel label,.quote-details label {
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:13px;
  font-weight:700
}
.contact-panel label>span[aria-hidden] {
  color:#b96543
}
.contact-panel label small {
  font-weight:400;
  color:#8a8e88
}
.contact-panel input:not([type=checkbox]),.contact-panel select,.contact-panel textarea,.quote-details input,.quote-note textarea,.usage-field input {
  width:100%;
  border:1px solid #cdd1cd;
  border-radius:2px;
  background:#fff;
  min-height:51px;
  padding:13px 14px;
  color:#202323;
  outline:0;
  font-size:14px;
  transition:border-color .2s,box-shadow .2s
}
.contact-panel input:focus,.contact-panel select:focus,.contact-panel textarea:focus,.quote-details input:focus,.quote-note textarea:focus {
  border-color:#9e745f;
  box-shadow:0 0 0 3px #d9b5a54a
}
.contact-panel textarea {
  resize:vertical;
  min-height:150px
}
.contact-panel .form-full {
  margin-top:21px
}
.consent-label {
  margin:21px 0;
  display:flex!important;
  flex-direction:row!important;
  align-items:flex-start;
  gap:12px!important;
  font-weight:400!important;
  font-size:12px!important;
  color:#666a66
}
.consent-label input {
  margin:4px 0 0;
  accent-color:var(--ink);
  flex-shrink:0
}
.consent-label a {
  text-decoration:underline
}
.form-action-row {
  display:flex;
  align-items:center;
  gap:20px
}
.form-action-row p {
  font-size:11px;
  margin:0
}
.form-feedback {
  font-size:13px;
  min-height:27px;
  margin-top:20px;
  font-weight:600
}
.form-feedback.success {
  color:#226a4a
}
.form-feedback.error {
  color:#a33d2d
}
.honeypot {
  position:absolute;
  left:-10000px;
  opacity:0;
  pointer-events:none
}
.contact-footer-section {
  padding:70px 0;
  background:#e9e8e2
}
.contact-footer-section h2 {
  font-size:clamp(2.2rem,4vw,4rem);
  margin:20px 0
}
/* Pricing wizard */ .pricing-intro {
  padding:94px 0 56px;
  max-width:1000px;
  text-align:center
}
.pricing-intro>.eyebrow {
  justify-content:center
}
.pricing-intro h1 {
  font-size:clamp(4rem,7vw,7.5rem);
  margin:20px 0
}
.pricing-intro p {
  max-width:620px;
  margin-inline:auto;
  font-size:17px
}
.quote-section {
  padding-bottom:80px
}
.quote-shell {
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  min-height:610px;
  border:1px solid #d4d5cd;
  background:white
}
.quote-side {
  background:#eae9e3;
  padding:34px 24px;
  display:flex;
  flex-direction:column;
  border-right:1px solid #d4d5cd
}
.quote-side-top {
  display:flex;
  align-items:center;
  gap:15px;
  font:700 10px var(--display);
  letter-spacing:.1em
}
.quote-side-logo {
  font:700 22px var(--display);
  letter-spacing:-.13em
}
.quote-steps {
  list-style:none;
  padding:0;
  margin:70px 0 0;
  display:flex;
  flex-direction:column;
  gap:8px
}
.quote-steps li {
  padding:11px 14px;
  border-left:2px solid transparent;
  font:600 13px var(--font);
  color:#70746f
}
.quote-steps li.active {
  background:#fff;
  border-left-color:var(--orange);
  color:#1a1c1a
}
.quote-steps li.done {
  color:#3c403b
}
.quote-steps li span {
  font:500 11px var(--display);
  margin-right:15px;
  color:#9d9b93
}
.quote-help {
  margin-top:auto;
  font-size:12px;
  color:#777c76
}
.quote-help a {
  font-weight:700;
  display:block;
  margin-top:7px;
  text-decoration:underline
}
.quote-main {
  min-width:0;
  padding:38px 43px 28px;
  display:flex;
  flex-direction:column
}
.quote-progress {
  display:flex;
  align-items:center;
  gap:30px;
  font:700 11px var(--display);
  letter-spacing:.1em;
  color:#7c817b
}
.progress-track {
  height:2px;
  flex:1;
  background:#ebebe6
}
.progress-track span {
  display:block;
  width:20%;
  height:100%;
  background:var(--orange);
  transition:width .32s
}
.quote-content {
  animation:panelIn .24s ease
}
.quote-content h2 {
  font-size:clamp(2rem,3.2vw,3.5rem);
  margin:30px 0 12px
}
.quote-content>p {
  max-width:600px;
  font-size:14px;
  margin-bottom:27px
}
.service-choices {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}
.choice-btn {
  border:1px solid #d8dad3;
  background:white;
  min-height:140px;
  padding:21px;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:9px;
  color:#222;
  transition:border-color .2s,background .2s,transform .2s
}
.choice-btn:hover {
  border-color:#8d9189;
  transform:translateY(-2px)
}
.choice-btn.selected {
  background:#f8f0e9;
  border-color:#b97b52;
  box-shadow:inset 0 0 0 1px #c78b61
}
.choice-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  font:700 16px var(--display)
}
.choice-description {
  font-size:12px;
  color:#737871
}
.choice-price {
  margin-top:auto;
  font-size:12px;
  color:#ab5d35
}
.quote-actions {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-top:auto;
  padding-top:25px;
  border-top:1px solid #e8e8e3
}
.quiet-btn {
  border:0;
  background:none;
  padding:11px;
  font-size:13px;
  font-weight:700
}
.quote-error {
  font-size:13px;
  font-weight:600;
  color:#a33d2d;
  margin-top:12px;
  min-height:22px
}
.quote-options {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px
}
.feature-toggle {
  display:flex;
  align-items:center;
  gap:12px;
  padding:19px;
  border:1px solid #dddeda;
  cursor:pointer;
  font-size:14px;
  font-weight:600
}
.feature-toggle:has(input:checked) {
  border-color:#c67a50;
  background:#f9f1e9
}
.feature-toggle input {
  accent-color:#bd683d;
  width:17px;
  height:17px
}
.usage-card {
  padding:26px;
  border:1px solid var(--line);
  background:#f9f9f6
}
.usage-top {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center
}
.usage-top strong {
  font:600 27px var(--display)
}
.usage-card input[type=range] {
  width:100%;
  accent-color:var(--orange);
  margin:29px 0 12px
}
.usage-ticks {
  display:flex;
  justify-content:space-between;
  font-size:11px;
  color:#777
}
.usage-field {
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:28px
}
.usage-field label {
  font-size:13px;
  font-weight:700
}
.usage-field input {
  width:170px;
  min-height:45px
}
.usage-field small {
  font-size:12px;
  color:#777
}
.quote-note {
  margin-top:20px
}
.quote-note textarea {
  min-height:95px;
  resize:vertical
}
.quote-note label {
  font-size:13px;
  font-weight:700;
  display:block;
  margin-bottom:7px
}
.quote-details {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.quote-review {
  border:1px solid #e1e3dd;
  background:#fafaf8;
  padding:24px
}
.quote-review .total-price {
  font:600 clamp(2rem,4vw,3.8rem)/1.1 var(--display);
  letter-spacing:-.05em;
  margin:13px 0 5px
}
.quote-review .total-price>span {
  font:500 16px var(--font)
}
.quote-review small {
  color:#777
}
.review-rows {
  margin-top:25px;
  border-top:1px solid #dadad4
}
.review-rows>div {
  display:flex;
  justify-content:space-between;
  gap:25px;
  padding:11px 0;
  border-bottom:1px solid #e2e2dc;
  font-size:13px
}
.review-rows strong {
  text-align:right
}
.quote-consent {
  display:flex;
  gap:10px;
  font-size:13px;
  margin:15px 0
}
.quote-consent a {
  text-decoration:underline
}
.quote-consent input {
  accent-color:#bd683d
}
.submit-quote {
  margin-top:18px
}
.quote-success {
  padding:25px;
  border:1px solid #99b99d;
  background:#eef8ee;
  font-size:14px;
  color:#2e6540
}
.pricing-disclaimer {
  font-size:12px;
  color:#777;
  margin:18px 0
}
.price-overview {
  padding:45px 0 125px
}
.overview-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:20px;
  border-top:1px solid var(--line);
  border-left:1px solid var(--line)
}
.overview-grid>div {
  padding:25px 22px;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:10px
}
.overview-grid>div>span {
  font-size:13px;
  font-weight:700
}
.overview-grid strong {
  font:600 27px var(--display);
  letter-spacing:-.05em
}
.overview-grid strong span {
  font:400 13px var(--font)
}
.overview-grid small {
  font-size:11px;
  color:#777
}
/* Legal and support pages */ .legal {
  max-width:920px;
  padding:90px 0 130px
}
.legal h1 {
  font-size:clamp(4rem,6.5vw,7rem);
  margin:24px 0 30px
}
.legal-lead {
  font-size:20px;
  max-width:700px;
  line-height:1.65
}
.legal-meta {
  margin:25px 0 65px;
  font-size:12px;
  letter-spacing:.04em;
  color:#888
}
.legal h2 {
  font-size:30px;
  letter-spacing:-.04em;
  margin:40px 0 13px
}
.legal p {
  line-height:1.85
}
.legal a {
  text-decoration:underline;
  text-underline-offset:4px
}
.legal-note {
  border-left:3px solid #b96a40;
  background:#edeae3;
  padding:20px;
  margin-top:55px;
  font-size:13px;
  color:#545b54
}
.not-found {
  padding:140px 0 190px
}
.not-found h1 {
  margin:20px 0
}
.not-found .btn {
  margin-top:25px
}
/* Footer */ .footer {
  border-top:1px solid #d6d8d0;
  padding-top:70px;
  background:#ecebe6
}
.footer-head {
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:60px;
  padding-bottom:90px
}
.footer-brand {
  font-size:21px
}
.footer-head>div>p {
  max-width:280px;
  font-size:14px;
  margin-top:25px
}
.footer-links {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px
}
.footer-links>div {
  display:flex;
  flex-direction:column;
  gap:12px;
  font-size:12px
}
.footer-links strong {
  font-size:12px;
  margin-bottom:15px
}
.footer-links span {
  color:#858983
}
.footer-bottom {
  border-top:1px solid #d3d5ce;
  min-height:65px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  font-size:12px;
  color:#71756f
}
/* Scroll reveal is optional, never hidden if JS fails. */ .js-ready .reveal {
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.22,.8,.3,1)
}
.js-ready .reveal.in-view {
  opacity:1;
  transform:none
}
@keyframes panelIn {
  from {
    opacity:.6;
    transform:translateY(7px)
  }
  to {
    opacity:1;
    transform:none
  }
}
/* Tablet */ @media(max-width:1100px) {
  .wrap {
    width:min(calc(100% - 50px),var(--wrap))
  }
  .main-nav {
    gap:16px
  }
  .nav-wrap {
    gap:25px
  }
  .hero {
    grid-template-columns:1fr 1fr;
    min-height:650px
  }
  .hero h1 {
    font-size:clamp(3.7rem,6.7vw,6rem)
  }
  .software-preview {
    height:370px
  }
  .app-sidebar {
    width:70px
  }
  .app-sidebar i {
    display:none
  }
  .service-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .service-card {
    min-height:300px
  }
  .service-icon {
    margin:26px 0
  }
  .contact-hero {
    gap:5%
  }
}
@media(max-width:820px) {
  :root {
    --header:68px
  }
  .main-nav,.nav-cta {
    display:none
  }
  .menu-toggle {
    display:block
  }
  .hero {
    grid-template-columns:1fr;
    padding:75px 0 85px;
    gap:50px
  }
  .hero-content {
    padding-right:0
  }
  .hero h1 {
    font-size:clamp(4.5rem,10vw,7rem)
  }
  .hero-visual {
    padding-top:0;
    max-width:650px;
    width:100%;
    justify-self:center
  }
  .software-preview {
    transform:none
  }
  .software-preview:hover {
    transform:none
  }
  .section {
    padding-block:90px
  }
  .section-head {
    align-items:start;
    flex-direction:column;
    gap:17px;
    margin-bottom:35px
  }
  .section-head>p {
    max-width:600px
  }
  .feature-layout {
    grid-template-columns:1fr;
    gap:60px
  }
  .workflow-art {
    justify-self:start;
    max-width:650px
  }
  .process-grid {
    grid-template-columns:repeat(2,1fr);
    row-gap:40px
  }
  .process-item:nth-child(3) {
    padding-left:0;
    border-left:0
  }
  .cta-layout {
    grid-template-columns:1fr;
    gap:35px
  }
  .contact-hero {
    grid-template-columns:1fr;
    padding-top:80px;
    gap:65px
  }
  .contact-intro h1 {
    font-size:clamp(4.5rem,10vw,7rem)
  }
  .contact-side-note {
    margin-top:35px
  }
  .quote-shell {
    grid-template-columns:1fr
  }
  .quote-side {
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:20px
  }
  .quote-steps {
    flex-direction:row;
    margin:25px 0 0;
    gap:5px;
    justify-content:space-between
  }
  .quote-steps li {
    padding:9px 7px;
    font-size:11px
  }
  .quote-steps li span {
    display:none
  }
  .quote-help {
    display:none
  }
  .quote-main {
    min-height:540px;
    padding:30px
  }
  .overview-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .footer-head {
    grid-template-columns:1fr
  }
  .footer-links {
    grid-template-columns:repeat(3,1fr)
  }
}
@media(max-width:560px) {
  .wrap {
    width:calc(100% - 36px)
  }
  .brand {
    font-size:16px
  }
  .brand-mark {
    font-size:22px
  }
  .hero {
    padding-top:60px
  }
  .hero h1 {
    font-size:clamp(3.5rem,13.5vw,5rem)
  }
  .hero h1 .serif-accent {
    white-space:normal
  }
  .hero-description {
    font-size:16px
  }
  .hero-actions {
    gap:14px;
    flex-wrap:wrap
  }
  .hero-footnote {
    margin-top:35px
  }
  .software-preview {
    height:335px
  }
  .app-content {
    padding:13px
  }
  .app-sidebar {
    width:42px;
    padding:18px 4px
  }
  .app-sidebar span {
    padding:6px
  }
  .app-metrics strong {
    font-size:18px
  }
  .app-metrics {
    margin:14px 0 12px
  }
  .window-toolbar {
    padding:0 13px;
    gap:15px
  }
  .window-demo {
    display:none
  }
  .flow-steps strong {
    font-size:9px
  }
  .flow-steps small {
    font-size:8px
  }
  .flow-steps>i {
    width:6px
  }
  .strip-inner {
    align-items:start;
    flex-direction:column
  }
  .strip-inner div {
    gap:14px 25px
  }
  .service-grid,.process-grid {
    grid-template-columns:1fr
  }
  .service-card {
    min-height:280px
  }
  .process-item,.process-item+ .process-item {
    border-left:0;
    padding:25px 0 0;
    border-top:1px solid var(--line)
  }
  .process-item h3 {
    margin-top:20px
  }
  .dark-feature {
    padding:85px 0
  }
  .workflow-art {
    padding:18px;
    box-shadow:9px 9px 0 #303131
  }
  .film-section {
    padding:75px 0
  }
  .film-stage {
    aspect-ratio:1.45
  }
  .film-wordmark {
    font-size:clamp(3rem,17vw,6rem)
  }
  .film-footer {
    bottom:15px;
    left:16px;
    right:16px;
    font-size:8px
  }
  .cta-section {
    padding:90px 0
  }
  .contact-hero {
    padding-top:70px
  }
  .contact-intro h1 {
    font-size:clamp(3.6rem,13vw,5rem)
  }
  .contact-panel {
    padding:23px 20px;
    box-shadow:8px 8px 0 #eeece6
  }
  .form-grid,.quote-details,.service-choices,.quote-options {
    grid-template-columns:1fr
  }
  .form-action-row {
    align-items:start;
    flex-direction:column
  }
  .contact-footer-section {
    padding:55px 0
  }
  .quote-steps {
    gap:0
  }
  .quote-steps li {
    font-size:0
  }
  .quote-steps li span {
    display:block;
    font-size:11px;
    margin:0
  }
  .quote-steps li.active {
    font-size:11px
  }
  .quote-steps li.active span {
    display:inline;
    margin-right:6px
  }
  .pricing-intro {
    padding:65px 0 37px
  }
  .pricing-intro h1 {
    font-size:clamp(3.5rem,12vw,5.5rem)
  }
  .quote-main {
    padding:24px 18px
  }
  .quote-content h2 {
    font-size:2.3rem
  }
  .choice-btn {
    min-height:105px
  }
  .usage-top {
    flex-direction:column;
    align-items:start
  }
  .usage-field {
    flex-wrap:wrap
  }
  .overview-grid {
    grid-template-columns:1fr
  }
  .legal {
    padding:65px 0 100px
  }
  .legal h1 {
    font-size:clamp(3.5rem,12vw,5rem)
  }
  .footer-head {
    padding-bottom:45px
  }
  .footer-links {
    grid-template-columns:1fr 1fr;
    gap:30px
  }
  .footer-bottom {
    flex-wrap:wrap;
    justify-content:flex-start;
    padding-block:22px
  }
  .footer-bottom a {
    margin-left:auto
  }
  .film-dialog {
    padding:24px
  }
  .dialog-slide {
    min-height:300px
  }
  .dialog-slide h2 {
    font-size:2.6rem
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    transition-duration:.01ms!important
  }
  .js-ready .reveal {
    opacity:1;
    transform:none
  }
}
/* Actual Fluxus FA mark prepared from the supplied logo artwork. */ .brand-logo {
  width:36px;
  height:23px;
  object-fit:contain;
  display:block
}
.mini-logo-img {
  width:31px;
  height:20px;
  object-fit:contain;
  display:block
}
.quote-side-logo-img {
  width:33px;
  height:24px;
  object-fit:contain
}
.hero h1 {
  font-size:clamp(4rem,5.8vw,6.6rem)
}
@media(max-width:820px) {
  .hero h1 {
    font-size:clamp(4.2rem,9vw,6.4rem)
  }
}
@media(max-width:560px) {
  .hero h1 {
    font-size:clamp(3.5rem,13vw,4.9rem)
  }
}
.turnstile-box {
  margin:16px 0
}
.turnstile-box:empty {
  display:none
}
/* Hidden must win over component display declarations (including .btn). */ [hidden] {
  display:none!important
}

/* Contact wizard — calm editorial layout inspired by one-question-at-a-time forms */
.contact-wizard-section {
  padding: clamp(70px, 9vw, 135px) 0 140px;
  min-height: calc(100vh - var(--header));
  background: #f6f5f2;
}
.contact-wizard-layout {
  display: grid;
  grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr);
  align-items: start;
  gap: clamp(50px, 7vw, 120px);
}
.contact-wizard-intro { padding-top: 46px; }
.contact-wizard-intro h1 {
  font-size: clamp(3.7rem, 6vw, 7rem);
  line-height: 1.03;
  max-width: 650px;
  margin: 26px 0;
}
.contact-wizard-intro>p { max-width: 430px; color: #62645f; font-size: 18px; }
.contact-wizard-aside { margin-top: 70px; display: grid; gap: 8px; }
.contact-wizard-aside a { font-weight: 650; border-bottom: 1px solid #a4a5a1; width: fit-content; }
.mini-label { font: 600 11px var(--display); letter-spacing: .13em; color: #6a6b65; }
.inquiry-wizard { max-width: 700px; width: 100%; min-width: 0; }
.inquiry-caption { text-align: center; font-size: 13px; color: #7c7e7a; margin: 0 0 11px; }
.inquiry-surface {
  background: #fff;
  border: 1px solid #d9d9d5;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 55px rgba(25, 25, 25, .075), 0 0 0 10px rgba(255,255,255,.45);
}
.inquiry-topline { display: flex; align-items: center; justify-content: space-between; padding: 26px 31px; }
.wizard-brand { display:flex; gap:10px; align-items:center; font-family:var(--display); font-weight:700; letter-spacing:-.025em; }
.wizard-brand img { object-fit:contain; max-width:42px; }
.step-count { color:#696b67; font-size:13px; font-variant-numeric:tabular-nums; }
.inquiry-track { height: 3px; background:#ededeb; }
.inquiry-track-fill { height:100%; width: 16.666%; background:#222323; transition:width .35s cubic-bezier(.22,.8,.2,1); }
.inquiry-step { min-height:380px; padding:34px 32px 18px; animation: inquiryAppear .24s ease both; }
@keyframes inquiryAppear { from { opacity:.1; transform:translateY(10px); } to { opacity:1; transform:none; } }
.step-kicker { display:block; color:#747672; font-size:10px; font-weight:700; letter-spacing:.13em; margin-bottom:12px; }
.inquiry-step h2 { font-size:clamp(2rem, 3.1vw, 2.85rem); letter-spacing:-.06em; margin:0 0 8px; }
.inquiry-step .step-desc { font-size:14px; color:#737772; margin-bottom:25px; }
.inquiry-choices { display:flex; align-items:flex-start; flex-direction:column; gap:10px; }
.inquiry-choice {
  display:flex; align-items:center; gap:13px;
  background:#fff; border:1px solid #dedfdb; border-radius:999px;
  padding:12px 19px 12px 14px; min-height:48px;
  color:#303331; cursor:pointer; font-size:14px;
  transition: background .2s, border-color .2s, transform .2s;
}
.inquiry-choice:hover { border-color:#878986; transform:translateX(2px); }
.inquiry-choice:has(input:checked) { background:#202222; color:white; border-color:#202222; }
.inquiry-choice:focus-within { outline:3px solid #c2c7d0; outline-offset:2px; }
.inquiry-choice input { position:absolute; width:1px; height:1px; opacity:0; }
.option-icon { font-size:16px; display:inline-grid; place-items:center; width:22px; height:22px; flex:none; }
.inquiry-field { display:flex; flex-direction:column; gap:9px; font-size:13px; font-weight:700; color:#303432; }
.inquiry-field input, .inquiry-field textarea {
  width:100%; color:#222; border:1px solid #cccfc9; background:#fff; border-radius:10px;
  padding:15px 17px; min-height:53px; font-size:15px; font-weight:400; outline:none;
}
.inquiry-field textarea { min-height:180px; resize:vertical; }
.inquiry-field input:focus, .inquiry-field textarea:focus { border-color:#555; box-shadow:0 0 0 3px #30343014; }
.inquiry-fields { display:grid; gap:17px; }
.inquiry-hint, .optional-text { color:#7b7e7a; font-weight:400; font-size:12px; }
.inquiry-review { display:grid; grid-template-columns: 130px minmax(0,1fr); gap:10px 16px; margin:0 0 24px; }
.inquiry-review dt { color:#747773; font-size:12px; }
.inquiry-review dd { font-size:13px; margin:0; overflow-wrap:anywhere; white-space:pre-wrap; }
.inquiry-consent { display:flex; align-items:flex-start; gap:12px; font-size:13px; line-height:1.5; margin-top:24px; }
.inquiry-consent input { flex:none; accent-color:#222; width:17px; height:17px; margin:2px 0 0; }
.inquiry-consent a { text-decoration:underline; text-underline-offset:3px; }
.inquiry-alert { min-height:22px; margin:0 32px 8px; font-size:13px; font-weight:600; }
.inquiry-alert.error { color:#a13726; }
.inquiry-alert.success { color:#286c49; }
.inquiry-footer { padding:14px 31px 27px; display:flex; gap:12px; justify-content:space-between; align-items:center; }
.inquiry-back { background:none; border:none; color:#4c504c; padding:12px 0; }
.inquiry-next { display:flex; justify-content:center; align-items:center; gap:15px; margin-left:auto; min-width:150px; padding:14px 22px; border:none; border-radius:999px; background:#1c1e1e; color:white; font-size:14px; font-weight:700; }
.inquiry-next:hover:not(:disabled) { background:#333; }
.inquiry-next:disabled { background:#d5d6d4; color:#747672; opacity:1; }
.inquiry-assurance { text-align:center; margin-top:22px; font-size:12px; color:#797c77; }
@media(max-width:900px) {
  .contact-wizard-layout { grid-template-columns:1fr; gap:48px; }
  .contact-wizard-intro { padding-top:0; }
  .contact-wizard-intro h1 { font-size:clamp(3.3rem,9vw,6rem); }
  .contact-wizard-aside { margin-top:25px; }
  .inquiry-wizard { max-width:680px; margin-inline:auto; }
}
@media(max-width:560px) {
  .contact-wizard-section { padding:42px 0 75px; }
  .contact-wizard-intro h1 { font-size:clamp(2.9rem,13vw,4.5rem); }
  .contact-wizard-intro>p { font-size:16px; }
  .inquiry-topline { padding:20px; }
  .inquiry-step { padding:25px 20px 10px; min-height:350px; }
  .inquiry-step h2 { font-size:clamp(1.9rem,8vw,2.7rem); }
  .inquiry-footer { padding:14px 20px 20px; }
  .inquiry-review { grid-template-columns:1fr; gap:4px; }
  .inquiry-review dd { margin-bottom:9px; }
  .inquiry-alert { margin-inline:20px; }
  .inquiry-next { min-width:130px; }
  .inquiry-choice { max-width:100%; }
}
@media(prefers-reduced-motion:reduce) {
  .inquiry-step { animation:none; }
  .inquiry-track-fill,.inquiry-choice { transition:none; }
}

/* ============================================================
   Final polish | hero, FAQ, Canadian flag, and color themes
   The default is the original warm editorial light palette.
   Theme colors are scoped here, leaving the product mockups dark.
   ============================================================ */
:root {
  --header-bg: rgba(246, 245, 242, .94);
  --panel: #ffffff;
  --panel-soft: #f0eee9;
  --text-soft: #515853;
}

/* Make the headline and dashboard true adjacent columns, not overlapping layers. */
@media (min-width: 1101px) {
  .hero {
    grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
    column-gap: clamp(55px, 5vw, 86px);
  }
  .hero-content {
    min-width: 0;
    padding-right: 0;
  }
  .hero h1 {
    font-size: clamp(3.5rem, 4.9vw, 5.3rem);
    line-height: 1.015;
  }
  .hero h1 .serif-accent {
    white-space: nowrap;
    font-size: .94em;
    letter-spacing: -.09em;
  }
  .hero-visual { min-width: 0; }
}
@media (min-width: 821px) and (max-width: 1100px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 38px;
  }
  .hero h1 { font-size: clamp(3rem, 4.7vw, 4rem); }
  .hero h1 .serif-accent { white-space: normal; }
}
@media (max-width: 820px) {
  .hero { column-gap: 0; }
  .hero h1 .serif-accent { white-space: normal; }
}

/* Canadian flag is the only flag/emoji in the UI. */
.canada-signature {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  white-space: nowrap;
}
.canada-flag {
  display: block;
  font-size: 17px;
  line-height: 1;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* No artificial gradient or overly styled toggle. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  flex: none;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: transparent;
  color: var(--ink);
  font: 600 11px/1 var(--font);
  cursor: pointer;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle:hover { background: var(--panel-soft); }
.nav-wrap { gap: clamp(12px, 2vw, 32px); }
@media (max-width: 820px) {
  .theme-toggle { margin-left: auto; }
  .menu-toggle { margin-left: 0; }
}
@media (max-width: 370px) {
  .theme-toggle-label { display: none; }
  .theme-toggle { padding: 8px; }
}

/* Theme transition applies only to color surfaces, not to geometric positioning. */
body, .site-header, .footer, .page-loader, .mobile-nav,
.service-card, .quote-shell, .quote-side, .quote-main,
.faq-section, .faq-item, .inquiry-surface, .inquiry-choice,
.inquiry-field input, .inquiry-field textarea,
.theme-toggle, .film-section, .film-dialog {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* Dark palette: preserve existing dark demo panels; invert only light surfaces. */
html[data-theme='dark'] {
  --paper: #141615;
  --white: #1e2220;
  --ink: #f0f0eb;
  --muted: #afb5ad;
  --line: #3c4240;
  --soft: #252a27;
  --panel: #202422;
  --panel-soft: #2a302d;
  --text-soft: #b2b8b0;
  --header-bg: rgba(20, 22, 21, .95);
}
html[data-theme='dark'] body { background: var(--paper); color: var(--ink); }
html[data-theme='dark'] .site-header { background: var(--header-bg); border-bottom-color: var(--line); }
html[data-theme='dark'] .main-nav a { color: #d3d6d1; }
html[data-theme='dark'] .mobile-nav,
html[data-theme='dark'] .page-loader { background: var(--paper); }
html[data-theme='dark'] .menu-toggle span { background: var(--ink); }
html[data-theme='dark'] .nav-cta,
html[data-theme='dark'] .btn-dark { background: #f2f2ec; color: #151615; }
html[data-theme='dark'] .nav-cta:hover,
html[data-theme='dark'] .btn-dark:hover { background: #d3d5cf; }
html[data-theme='dark'] .eyebrow,
html[data-theme='dark'] .graphic-stamp,
html[data-theme='dark'] .visual-caption,
html[data-theme='dark'] .hero-footnote,
html[data-theme='dark'] .hero-description { color: #b5bab2; }
html[data-theme='dark'] .service-card,
html[data-theme='dark'] .quote-shell,
html[data-theme='dark'] .quote-side,
html[data-theme='dark'] .quote-main,
html[data-theme='dark'] .inquiry-surface { background: var(--panel); border-color: var(--line); color: var(--ink); }
html[data-theme='dark'] .service-card p,
html[data-theme='dark'] .service-no,
html[data-theme='dark'] .small-note { color: var(--muted); }
html[data-theme='dark'] .service-icon,
html[data-theme='dark'] .industry-card { background: var(--panel-soft); }
html[data-theme='dark'] .film-section,
html[data-theme='dark'] .contact-wizard-section,
html[data-theme='dark'] .contact-footer-section,
html[data-theme='dark'] .footer,
html[data-theme='dark'] .legal-note { background: #1b1e1c; color: var(--ink); }
html[data-theme='dark'] .film-dialog { background: var(--panel); color: var(--ink); }
html[data-theme='dark'] .footer-bottom { color: #b5bbb3; border-color: var(--line); }
html[data-theme='dark'] .footer-links span,
html[data-theme='dark'] .contact-wizard-intro > p,
html[data-theme='dark'] .inquiry-caption,
html[data-theme='dark'] .mini-label,
html[data-theme='dark'] .inquiry-hint,
html[data-theme='dark'] .inquiry-assurance,
html[data-theme='dark'] .inquiry-step .step-desc { color: var(--muted); }
html[data-theme='dark'] .inquiry-choice,
html[data-theme='dark'] .inquiry-field input,
html[data-theme='dark'] .inquiry-field textarea,
html[data-theme='dark'] .contact-panel input,
html[data-theme='dark'] .contact-panel textarea,
html[data-theme='dark'] .contact-panel select,
html[data-theme='dark'] .form-grid input,
html[data-theme='dark'] .form-full select,
html[data-theme='dark'] .form-full textarea,
html[data-theme='dark'] .choice-card,
html[data-theme='dark'] .detail-field select,
html[data-theme='dark'] .detail-field input,
html[data-theme='dark'] .quote-input,
html[data-theme='dark'] .overview-card,
html[data-theme='dark'] .legal-note {
  background: #242925;
  color: #f2f3ee;
  border-color: #4c5550;
}
html[data-theme='dark'] .inquiry-choice:has(input:checked) { background:#e9e9e2; color:#131514; }
html[data-theme='dark'] .inquiry-field,
html[data-theme='dark'] .inquiry-choice,
html[data-theme='dark'] .quote-step-label,
html[data-theme='dark'] .quote-side { color: var(--ink); }
html[data-theme='dark'] input::placeholder,
html[data-theme='dark'] textarea::placeholder { color:#a9b1a7; }
html[data-theme='dark'] .inquiry-track,
html[data-theme='dark'] .quote-progress { background:#3c413d; }
html[data-theme='dark'] .inquiry-track-fill { background:#f2f2eb; }
html[data-theme='dark'] .inquiry-next,
html[data-theme='dark'] .quote-next { background:#f1f2ec; color:#171918; }
html[data-theme='dark'] .inquiry-next:disabled { background:#454b46; color:#c4cbc3; }
html[data-theme='dark'] .step-kicker,
html[data-theme='dark'] .step-count,
html[data-theme='dark'] .optional-text,
html[data-theme='dark'] .inquiry-review dt { color:#adb5ad; }
html[data-theme='dark'] .legal { color:var(--ink); }
html[data-theme='dark'] .theme-toggle:hover { background:var(--panel-soft); }

@media (prefers-reduced-motion: reduce) {
  .faq-item summary:after,
  .theme-toggle,
  body, .site-header, .footer, .page-loader, .mobile-nav,
  .service-card, .quote-shell, .quote-side, .quote-main,
  .faq-section, .faq-item, .inquiry-surface, .inquiry-choice,
  .inquiry-field input, .inquiry-field textarea,
  .film-section, .film-dialog { transition: none !important; }
}
/* Keep the same brand mark legible on both themes. */
html[data-theme='dark'] .brand-logo,
html[data-theme='dark'] .wizard-brand img { filter: invert(1); }
/* Pricing-specific dark surfaces and readable selected states. */
html[data-theme='dark'] .quote-side { background: #1b201d; }
html[data-theme='dark'] .quote-steps li { color: #aeb6ae; }
html[data-theme='dark'] .quote-steps li.done { color: #d6ddd5; }
html[data-theme='dark'] .quote-steps li.active { background: #333a34; color: #fff; }
html[data-theme='dark'] .quote-steps li span,
html[data-theme='dark'] .quote-help,
html[data-theme='dark'] .quote-progress,
html[data-theme='dark'] .choice-description,
html[data-theme='dark'] .usage-ticks,
html[data-theme='dark'] .usage-field small,
html[data-theme='dark'] .quote-review small,
html[data-theme='dark'] .pricing-disclaimer,
html[data-theme='dark'] .overview-grid small { color: #b8bdb7; }
html[data-theme='dark'] .progress-track { background: #444b44; }
html[data-theme='dark'] .choice-btn,
html[data-theme='dark'] .feature-toggle,
html[data-theme='dark'] .usage-card,
html[data-theme='dark'] .quote-review { background: #222723; border-color: #49524a; color: #f3f4ef; }
html[data-theme='dark'] .choice-btn.selected,
html[data-theme='dark'] .feature-toggle:has(input:checked) { background: #44342a; border-color: #c78b61; }
html[data-theme='dark'] .choice-btn.selected .choice-description { color: #e0d0c3; }
html[data-theme='dark'] .quote-actions { border-color: var(--line); }
html[data-theme='dark'] .quiet-btn { color: var(--ink); }
html[data-theme='dark'] .usage-field input,
html[data-theme='dark'] .quote-details input,
html[data-theme='dark'] .quote-note textarea { background:#252b27; color:#f3f4ee; border:1px solid #596158; }
html[data-theme='dark'] .quote-success { background:#1e3529; border-color:#487354; color:#d4f4da; }
html[data-theme='dark'] .review-rows,
html[data-theme='dark'] .review-rows>div { border-color: var(--line); }
html[data-theme='dark'] .choice-price { color: #e2a17b; }
html[data-theme='dark'] .quote-error { color: #ffad98; }


/* FINAL FIX | Hero stays within its text column at all desktop widths. */
.hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(44px, 5.5vw, 100px); }
.hero-content, .hero-visual { min-width: 0; }
.hero-content { padding-right: 0; }
.hero h1 { font-size: clamp(3.1rem, 5vw, 5.2rem); }
.hero h1 .serif-accent { font-size: .83em; letter-spacing: -.075em; white-space: normal; overflow-wrap: normal; }
@media (min-width: 821px) and (max-width: 1200px) { .hero h1 { font-size: clamp(3rem, 4.7vw, 4.4rem); } }
@media (max-width: 820px) { .hero { grid-template-columns: 1fr; } .hero h1 .serif-accent { font-size: .96em; } }
/* Our help center draws on readable support center patterns, not homepage cards. */
.sr-only { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.help-hero { border-bottom:1px solid var(--line); padding:clamp(65px,9vw,120px) 0 74px; }
.help-hero h1 { margin:26px 0 14px; font-size:clamp(3.5rem, 6.4vw, 6.8rem); letter-spacing:-.072em; }
.help-hero> .wrap>p { max-width:640px; font-size:17px; }
.help-search-wrap { display:flex; align-items:center; gap:14px; width:min(100%,790px); height:68px; margin-top:38px; padding:0 22px; background:var(--panel,#fff); border:1px solid var(--line); border-radius:8px; box-shadow:0 14px 40px rgba(30,32,31,.045); }
.help-search-wrap:focus-within { outline:2px solid var(--orange); outline-offset:2px; }
.help-search-wrap input { border:0; outline:0; background:transparent; min-width:0; flex:1; color:var(--ink); font-size:17px; }
.help-search-wrap input::placeholder { color:var(--muted); }
.help-search-wrap svg { flex:none; width:22px; height:22px; }
.help-search-wrap kbd { background:var(--soft); border:1px solid var(--line); border-radius:4px; padding:1px 8px; color:var(--muted); font-size:13px; }
.help-hero .help-search-hint { font-size:13px; margin:12px 0 0; }
.help-layout { display:grid; grid-template-columns:255px minmax(0,1fr); gap:clamp(46px,7vw,110px); padding-top:76px; padding-bottom:110px; align-items:start; }
.help-sidebar { position:sticky; top:calc(var(--header) + 28px); }
.help-sidebar-title { font:700 12px var(--display); letter-spacing:.14em; text-transform:uppercase; margin:0 0 16px; color:var(--muted); }
.help-topics { display:grid; gap:4px; }
.help-topic { display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; padding:13px 16px; border:0; background:transparent; color:var(--ink); border-radius:5px; font-size:14px; font-weight:600; }
.help-topic span { font-size:12px; color:var(--muted); }
.help-topic:hover { background:var(--soft); }
.help-topic.is-selected { background:var(--ink); color:var(--paper); }
.help-topic.is-selected span { color:var(--paper); opacity:.73; }
.help-aside-note { border-top:1px solid var(--line); padding:28px 5px; margin-top:36px; }
.help-aside-note strong { font:600 19px var(--display); }
.help-aside-note p { font-size:14px; line-height:1.7; margin:10px 0 15px; }
.help-aside-note a { display:inline-flex; gap:12px; border-bottom:1px solid currentColor; font-size:13px; font-weight:700; padding-bottom:3px; }
.help-category { margin-bottom:65px; }
.help-category-head { display:flex; align-items:baseline; gap:16px; border-bottom:1px solid var(--line); padding-bottom:23px; }
.help-category-head span { font:600 12px var(--display); color:var(--orange); }
.help-category-head h2 { font-size:clamp(2rem,3vw,2.8rem); letter-spacing:-.045em; margin:0; }
.help-question { border-bottom:1px solid var(--line); }
.help-question summary { cursor:pointer; display:flex; justify-content:space-between; gap:22px; align-items:center; padding:23px 4px; list-style:none; font-weight:600; font-size:17px; line-height:1.45; }
.help-question summary::-webkit-details-marker { display:none; }
.help-plus { flex:none; width:21px; height:21px; position:relative; }
.help-plus:before,.help-plus:after { content:''; position:absolute; top:10px; left:4px; width:14px; height:1.5px; background:currentColor; transition:transform .2s ease; }
.help-plus:after { transform:rotate(90deg); }
.help-question[open] .help-plus:after { transform:rotate(0); }
.help-answer { padding:0 47px 23px 4px; }
.help-answer p { font-size:15px; line-height:1.85; margin:0; max-width:660px; }
.help-empty { border:1px solid var(--line); padding:36px; border-radius:7px; }
.help-empty h2 { font-size:28px; }
.help-empty p { font-size:15px; }
.help-end { border-top:1px solid var(--line); padding-top:52px; padding-bottom:110px; display:flex; align-items:center; justify-content:space-between; gap:25px; }
.help-end h2 { margin:12px 0; font-size:clamp(2.1rem,4vw,3.5rem); }
.help-end p { margin:0; }
.help-end .btn { flex:none; }
html[data-theme='dark'] .help-search-wrap { background:var(--panel); border-color:var(--line); box-shadow:none; }
html[data-theme='dark'] .help-topic.is-selected { background:#e9e9e2; color:#141615; }
html[data-theme='dark'] .help-topic.is-selected span { color:#141615; }
html[data-theme='dark'] .help-topic:hover:not(.is-selected) { background:var(--panel-soft); }
html[data-theme='dark'] .help-search-wrap kbd { background:var(--panel-soft); color:var(--muted); }
@media(max-width:820px) { .help-layout { grid-template-columns:1fr; gap:34px; padding-top:42px; } .help-sidebar { position:static; } .help-topics { grid-template-columns:repeat(2,minmax(0,1fr)); } .help-aside-note { display:none; } .help-category { margin-bottom:50px; } }
@media(max-width:560px) { .help-hero { padding:58px 0 45px; } .help-hero h1 { font-size:clamp(3rem,12vw,4rem); } .help-search-wrap { height:57px; } .help-layout { padding-bottom:48px; } .help-end { flex-direction:column; align-items:flex-start; padding-bottom:75px; } .help-end .btn { width:100%; } .help-question summary { font-size:15px; } }
[hidden] { display:none!important; }
/* Restore the original bold editorial hero scale while containing the italic line. */
@media(min-width:1101px) {
  .hero h1 { font-size:clamp(4.75rem,6.25vw,6.65rem); }
  .hero h1 .serif-accent { font-size:.74em; }
}