/* Catchly — industry landing pages.
   Shared by /removalists.html … /freight.html and their /cn/ counterparts.

   One stylesheet, twelve pages, same reasoning as legal.css: before this there
   was no per-industry page at all, and hand-writing twelve would guarantee
   twelve slightly different looks within a month.

   Tokens are the Warm Craft half of the main site's palette. Like the legal
   pages there is NO time-of-day theme switch here, and that is deliberate:
   these are the pages a stranger arrives on from a Google result, often the
   only page of the site they will ever see. It should look the same to the
   person who lands at 9am and the one who lands at 4pm.

   The whole file is written mobile-first — these pages get most of their
   traffic from a phone, usually from someone standing next to a ute. */

:root {
  --paper: #FBF7EF;
  --cream: #F1E9DA;
  --ink:   #2A2219;
  --ink-2: #4A3C2C;
  --muted: #7A6B58;
  --rule:  #E3D7C1;
  --brand: #8A6A45;
  --brand-2: #6B4F2A;
  --accent-2: #A8814F;
  /* --accent-2 is the decorative gold. At 11-12px on the paper ground it
     measures 3.3:1 — below the 4.5:1 WCAG AA floor for small text, and it
     reads as washed out on a phone in daylight, which is where these pages
     are actually opened. --accent-ink is the same hue carried down to 5.5:1
     for text; --accent-lift is the same hue carried UP for the dark bands. */
  --accent-ink: #7D5F3C;
  --accent-lift: #C79A5E;
  --soft:  #F6EFE2;
  --dark:  #241D15;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC";
  --shadow: 0 1px 2px rgba(42,34,25,.04), 0 8px 24px rgba(42,34,25,.06);
}

/* Fraunces and DM Sans carry no CJK glyphs whatsoever. Without naming a stack,
   every Chinese character on the /cn/ pages falls through to whatever the
   device happens to have installed — which on Android is frequently ugly and
   on some devices is a fallback box. Latin tracking also reads as broken
   spacing between square Hanzi, so the letter-spacing is zeroed too. */
html[lang^="zh"] {
  --font-display: 'Fraunces', var(--cjk), Georgia, serif;
  --font-body: 'DM Sans', var(--cjk), -apple-system, sans-serif;
}
html[lang^="zh"] h1,
html[lang^="zh"] h2,
html[lang^="zh"] h3,
html[lang^="zh"] .ind-brand .c { letter-spacing: 0; }
html[lang^="zh"] .kicker { letter-spacing: 0.1em; }
/* Fraunces has no CJK italic either, so an <em> holding Chinese gets a
   SYNTHESISED slant — the browser shears the Hanzi and it reads as a
   rendering fault rather than as emphasis. The accent colour carries it. */
html[lang^="zh"] em { font-style: normal; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  /* Belt and braces against the horizontal-scroll bug that keeps coming back
     on phones the moment one child overflows its parent. */
  overflow-x: hidden;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-display); color: var(--ink); }
em { font-style: italic; color: var(--brand); }

.row { max-width: 1080px; margin-inline: auto; padding: 0 22px; }
.narrow { max-width: 760px; }

.kicker {
  font-family: var(--font-mono);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 12px;
}

/* ---------------------------------------------------------------- header */
.ind-nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 22px; border-bottom: 1px solid var(--rule);
  max-width: 1080px; margin-inline: auto; flex-wrap: wrap;
}
.ind-brand { display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink); }
.ind-brand:hover { text-decoration: none; }
.ind-brand .c {
  font-family: var(--font-display); font-weight: 800; font-size: 23px;
  letter-spacing: -0.02em; line-height: 1;
}
.ind-brand .s { font-size: 13px; color: var(--muted); white-space: nowrap; }
/* wrap, not nowrap: the English call pill ("Hear her: 07 3132 1165") plus the
   other two is 389px of content, which overflows a 360px phone and gives the
   whole page a sideways scroll. Letting the row wrap is the fix; the rule at
   the bottom of this file then gives the call pill its own full-width line so
   the wrap reads as a deliberate layout rather than as something broken. */
.ind-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ind-actions a {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 999px; padding: 8px 14px;
  white-space: nowrap;
}
.ind-actions a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); text-decoration: none; }
.ind-actions a.call { background: var(--brand); border-color: var(--brand); color: #fff; }
.ind-actions a.call:hover { background: var(--brand-2); border-color: var(--brand-2); }

/* ------------------------------------------------------------------ hero */
.hero { padding: 54px 0 8px; }
.hero h1 {
  font-weight: 400; font-size: clamp(31px, 6vw, 52px); line-height: 1.1;
  letter-spacing: -0.025em; margin: 0 0 16px;
}
.hero .lede { font-size: clamp(16.5px, 2.2vw, 19px); color: var(--ink-2); margin: 0 0 26px; max-width: 620px; }
.hero-figure { margin: 30px 0 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--rule); box-shadow: var(--shadow); }
.hero-figure img { width: 100%; aspect-ratio: 16/7; object-fit: cover; }

/* The drawn hero panel used by the pages that have no photograph. The svg is
   sized explicitly rather than left to its intrinsic size, because an inline
   SVG with no width defaults to 300px in some engines and the panel would sit
   as a small square in the corner. The ratio matches the viewBox, so nothing
   is letterboxed. */
.hero-art { position: relative; }
.hero-art svg { display: block; width: 100%; height: auto; aspect-ratio: 16/7; }
.hero-art figcaption {
  padding: 14px 20px 16px; background: var(--paper);
  border-top: 1px solid var(--rule);
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
}

.cta-set { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; font-size: 15px; border-radius: 999px;
  padding: 13px 24px; border: 1px solid transparent; cursor: pointer;
  /* A tap target under 44px fails on a phone held in one hand in a carpark. */
  min-height: 46px;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-2); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-outline:hover { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.cta-note { font-size: 13px; color: var(--muted); margin: 14px 0 0; }

/* ----------------------------------------------------------------- bands */
section { padding: 58px 0; }
section.soft { background: var(--soft); border-block: 1px solid var(--rule); }
section.dark { background: var(--dark); color: #E8DECE; border-block: 1px solid #3A2F22; }
section.dark h2, section.dark h3 { color: #FBF7EF; }
section.dark p { color: #CDBFA9; }
section.dark em { color: var(--accent-lift); }
section.dark .kicker { color: var(--accent-lift); }

/* Every component below sets an explicit colour that assumes the paper ground.
   Dropped into a dark band those colours do not merely look wrong — some of
   them vanish. The "Book a walkthrough" button shipped invisible for exactly
   this reason: .btn-outline paints var(--ink) #2A2219 onto var(--dark)
   #241D15, a contrast ratio of 1.05:1. Two near-blacks. The text was there,
   the link worked, and nobody could read it.
   So the rule is: anything that names a colour for the light ground must name
   its counterpart here, and check-contrast.mjs now fails the build if a pair
   like that ever appears again. */
section.dark .btn-outline { color: #FBF7EF; border-color: rgba(251,247,239,.38); }
section.dark .btn-outline:hover { background: #FBF7EF; color: var(--dark); border-color: #FBF7EF; }
section.dark .cta-note { color: #B8A991; }
section.dark .step p { color: #CDBFA9; }
section.dark .step::before { border-color: #4A3D2C; }
section.dark .faq details { border-bottom-color: #3F3427; }
section.dark .faq summary { color: #F1E9DA; }
section.dark .faq details[open] summary { color: var(--accent-lift); }
section.dark .faq .a { color: #CDBFA9; }
section.dark .script-note { color: #B8A991; }
section.dark .script .who { color: var(--accent-lift); }
section.dark .step::before { color: var(--accent-lift); }

h2.title {
  font-weight: 400; font-size: clamp(25px, 3.6vw, 36px); line-height: 1.18;
  letter-spacing: -0.02em; margin: 0 0 14px;
}
p.lede { font-size: 17px; color: var(--ink-2); margin: 0 0 30px; max-width: 660px; }
section.dark p.lede { color: #CDBFA9; }

/* --------------------------------------------------------- the cost grid */
.cost-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .cost-grid { grid-template-columns: repeat(3, 1fr); } }
.cost {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 16px;
  padding: 24px 22px;
}
section.dark .cost { background: #2E251B; border-color: #3F3427; }
.cost h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; }
.cost p { font-size: 14.5px; color: var(--muted); line-height: 1.65; margin: 0; }
section.dark .cost p { color: #B8A991; }

/* ------------------------------------------------------------ the steps */
.steps { display: grid; gap: 18px; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding-top: 46px; }
.step::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  position: absolute; top: 0; left: 0;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em;
  color: var(--accent-ink); border: 1px solid var(--rule);
  border-radius: 999px; padding: 6px 12px;
}
.step h3 { font-size: 18.5px; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; }
.step p { font-size: 15px; color: var(--ink-2); margin: 0; }

/* --------------------------------------------------------- what she asks */
.asks { display: grid; gap: 10px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; }
@media (min-width: 700px) { .asks { grid-template-columns: 1fr 1fr; } }
.asks li {
  display: flex; gap: 11px; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 12px;
  padding: 14px 16px; font-size: 15px; color: var(--ink-2);
}
.asks li svg { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 3px; stroke: var(--brand); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.asks li strong { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------- transcript */
.script {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 18px;
  padding: 26px 22px; box-shadow: var(--shadow); max-width: 620px;
  color: var(--ink);   /* same reason as .pricebar above */
}
.script .who {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--accent-ink); margin: 0 0 4px;
}
.script .line { margin: 0 0 18px; font-size: 15.5px; color: var(--ink-2); line-height: 1.65; }
.script .line:last-child { margin-bottom: 0; }
.script .amy { color: var(--ink); }
.script-note { font-size: 13px; color: var(--muted); margin: 16px 0 0; max-width: 620px; }

/* ------------------------------------------------------------- price bar */
.pricebar {
  display: flex; flex-wrap: wrap; gap: 18px 34px; align-items: baseline;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 18px;
  padding: 26px 24px; box-shadow: var(--shadow);
  /* This card keeps its paper background even inside a dark band, so it must
     also state its own text colour. Without this line it INHERITS the dark
     band's #E8DECE and the price renders cream-on-cream at 1.25:1 — the
     A$199 was invisible on all fifteen industry pages. A card that overrides
     the background must override the foreground in the same breath. */
  color: var(--ink);
}
.pricebar .amt { font-family: var(--font-display); font-size: 34px; font-weight: 600; letter-spacing: -0.02em; }
.pricebar .amt span { font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 6px; }
.pricebar .terms { font-size: 14.5px; color: var(--ink-2); flex: 1 1 260px; margin: 0; }

/* ------------------------------------------------------------------- faq */
.faq { max-width: 780px; }
.faq details {
  border-bottom: 1px solid var(--rule); padding: 4px 0;
}
.faq details[open] summary { color: var(--brand); }
.faq summary {
  cursor: pointer; list-style: none; padding: 17px 34px 17px 0; position: relative;
  font-family: var(--font-display); font-size: 17.5px; font-weight: 600;
  letter-spacing: -0.01em; color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 2px solid var(--accent-2); border-bottom: 2px solid var(--accent-2);
  transform: rotate(45deg); transition: transform 180ms ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq .a { padding: 0 8px 20px 0; margin: 0; font-size: 15.5px; color: var(--ink-2); }
.faq .a + .a { padding-top: 0; margin-top: -8px; }

/* ---------------------------------------------------------- other trades */
.trades { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 6px; }
.trades a {
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 999px; padding: 9px 15px;
  background: var(--paper);
}
.trades a:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); text-decoration: none; }

/* ------------------------------------------------------------------ foot */
footer.ind-foot {
  border-top: 1px solid var(--rule); padding: 30px 0 44px;
  font-size: 14px; color: var(--muted);
}
footer.ind-foot .fl { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; }
footer.ind-foot p { margin: 0; font-size: 13px; line-height: 1.7; }

@media (max-width: 480px) {
  .row { padding: 0 18px; }
  .ind-nav { padding: 16px 18px; }
  .ind-brand .s { display: none; }
  /* Phone-width header: brand and the two small links share the top row, and
     the call pill takes a full-width line of its own. On these pages ringing
     the demo line IS the conversion, so on a phone it gets the biggest target
     on the screen rather than being the pill that fell off the end. */
  .ind-nav { gap: 10px; }
  .ind-actions { width: 100%; }
  .ind-actions a.call { flex: 1 1 100%; justify-content: center; text-align: center; }
  .hero { padding: 34px 0 4px; }
  section { padding: 44px 0; }
  .btn { width: 100%; justify-content: center; }
  .cta-set { gap: 10px; }
  .pricebar { padding: 22px 20px; }
  .script { padding: 22px 18px; }
}