/* Commercial Renovation — /factory-renovations-melbourne (v3, docs/DESIGN-V3.md §8.5). Loaded after assets/css/v3/base.css.
   This page only: the hero extras, the 24-hour shift timeline (the page's signature, §6.5: a clock scrubs 6am → 6am over a
   sticky warehouse photo whose bays light up one by one after hours), the scope register (photos open down from the floor
   line), the worries list and the work-order layout. Class prefix f-.
   Start states apply only under html.a-motion; html.a-noanim / .no-js / .a-late get the designed static state: the hall at
   night with all four bays lit and labelled, the readout "6pm–6am", the printed schedule with every bay marker on. */

/* ------------------------------------------------------------------ hero (factory floor, LCP) */
.f-hero .a-h1 { max-width: 18ch; }
.f-hero__trust { display: flex; align-items: center; gap: 10px; margin-top: 22px; font-size: 14px; line-height: 1.4; color: rgba(255, 255, 255, .84); }
.f-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-2); box-shadow: 0 0 0 4px rgba(232, 190, 87, .18); }
.a-motion .f-hero__trust { animation: aUp .8s .36s var(--ease) both; }
.f-hero__chip { right: max(var(--gut), calc((100% - var(--max)) / 2)); bottom: clamp(52px, 9vh, 104px); z-index: 2; }
.a-motion .f-hero__chip { animation: aUp .9s .5s var(--ease) both; }
@media (max-width: 1023px) { .f-hero__chip { display: none; } }
@media (max-width: 767px) { .f-hero__trust { margin-top: 16px; font-size: 13px; } }

/* ------------------------------------------------------------------ 01 built around your shifts (the signature) */
/* One photo in a 4:3 "cover box" (the photo's own ratio) that always covers its window, so the bays (left/width in % of the
   photo) stay on the piers at every size. The window is a 21:9 frame in the static layout, a full-bleed 4:3 band on phones and
   the whole sticky screen on wide screens with motion. */
.f-shift { background: var(--ink); color: var(--on-dark); }
.f-shift__stage { position: relative; }
.f-shift__win { width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.f-shift__frame { position: relative; width: 100%; overflow: hidden; aspect-ratio: 21 / 9; border-radius: var(--r); background: var(--ink-3); container-type: size; isolation: isolate; }
.f-shift__box { position: absolute; left: 50%; top: var(--fy, 58%); width: 100%; aspect-ratio: 4 / 3; transform: translate(-50%, calc(var(--fy, 58%) * -1)); }
@supports (width: 1cqw) { .f-shift__box { width: max(100cqw, 133.334cqh); height: max(100cqh, 75cqw); aspect-ratio: auto; } }
.f-shift__layers { position: absolute; inset: 0; transform-origin: 50% 62%; }
.f-shift__photo, .f-shift__photo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.f-shift__photo img { object-fit: cover; }
.f-shift__night { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(3, 5, 10, .94) 0%, rgba(4, 7, 13, .88) 50%, rgba(6, 9, 15, .84) 100%); }
/* a bay: the same photo, warm and bright, seen through the bay's slot between two piers (edges feathered, roof left dark) */
.f-bay { position: absolute; top: 0; bottom: 0; left: calc(var(--l) * 1%); width: calc(var(--w) * 1%); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 22%, #000 50%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 22%, #000 50%);
  mask-composite: intersect; }
.f-bay__img { position: absolute; top: 0; height: 100%; max-width: none; width: calc(100% * 100 / var(--w)); left: calc(-100% * var(--l) / var(--w)); object-fit: cover;
  filter: brightness(1.2) saturate(1.16) sepia(.22); }
.f-bay__glow { position: absolute; inset: 0; mix-blend-mode: screen;
  background: radial-gradient(90% 30% at 50% 50%, rgba(255, 204, 118, .42), rgba(255, 204, 118, 0) 72%), radial-gradient(130% 24% at 50% 100%, rgba(255, 188, 92, .3), rgba(255, 188, 92, 0) 72%); }
.no-js .f-bay__img { display: none; }
/* bay labels, at the base of the arches (outside the scaled layers, so type never scales) */
.f-chip { position: absolute; left: calc(var(--x) * 1%); top: 57%; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px;
  transform: translateX(calc(var(--ax, 50%) * -1)); font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  color: #fff; background: rgba(10, 12, 14, .58); border-radius: 2px; transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease); }
.f-chip__n { font-weight: 500; color: var(--gold-2); transition: color .45s var(--ease); }
.f-chip__night i { font-style: normal; opacity: .72; margin-left: 6px; }
.f-chip:not(.is-lit) .f-chip__night { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.f-chip.is-lit, html:not(.a-motion) .f-chip { color: var(--ink); background: var(--gold); box-shadow: 0 10px 30px -8px rgba(232, 170, 60, .55); }
.f-chip.is-lit .f-chip__n, html:not(.a-motion) .f-chip .f-chip__n { color: var(--ink); }
.f-chip.is-lit .f-chip__day, html:not(.a-motion) .f-chip__day { display: none; }
html:not(.a-motion) .f-chip:not(.is-lit) .f-chip__night { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.f-chip.is-idle { background: rgba(10, 12, 14, .42); color: rgba(255, 255, 255, .6); }
.f-chip.is-idle .f-chip__day { display: none; }
.a-motion .f-chip.is-lit { animation: fChipOn .6s var(--ease) both; }
@keyframes fChipOn { from { transform: translateX(calc(var(--ax, 50%) * -1)) translateY(8px) scale(.94); } to { transform: translateX(calc(var(--ax, 50%) * -1)); } }
/* a narrow window (phones, upright tablets): the labels keep their bay number only; the readout names the work */
@container (max-width: 900px) {
  .f-chip { padding: 6px 7px; letter-spacing: .08em; }
  .f-chip__day, .f-chip__night { display: none !important; }
}
/* shades that keep the type legible over the photo (wide motion layout only) */
.f-shift__shade { display: none; }

/* head, readout and the printed schedule */
.f-shift__head .a-lead { margin-top: 20px; max-width: 34ch; }
.f-shift__panel { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 28px; align-items: end; }
.f-read { grid-column: span 4; }
.f-tl { grid-column: span 8; }
.f-read__time { display: flex; align-items: baseline; gap: .14em; white-space: nowrap; font-size: clamp(52px, 5.6vw, 92px); font-weight: 600; font-stretch: 108%; letter-spacing: -.04em; line-height: .9; font-variant-numeric: tabular-nums; color: #fff; }
.f-read__time small { font-size: .3em; font-weight: 500; letter-spacing: .02em; font-stretch: 100%; color: var(--gold-2); }
.f-read__status { margin-top: 14px; min-height: 1.5em; font-size: 15px; line-height: 1.5; color: var(--on-dark-2); }
.f-read__live { display: none; }
.a-motion .f-read__live { display: block; }
.a-motion .f-read__static { display: none; }
.f-tl__rows { position: relative; display: grid; gap: 6px; }
.f-tl__bar { display: flex; height: 36px; }
.f-tl__seg { display: flex; align-items: center; flex: 1 1 50%; min-width: 0; padding: 0 12px; overflow: hidden; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.f-tl__seg--prod { background: rgba(242, 238, 231, .13); color: var(--on-dark); border-radius: 2px 0 0 2px; }
.f-tl__seg--noisy { background: var(--gold); color: var(--ink); border-radius: 0 2px 2px 0; }
.f-tl__sub { position: relative; height: 24px; }
.f-tl__quiet { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; display: flex; align-items: center; padding: 0 12px; border: 1px dashed rgba(242, 238, 231, .34); border-radius: 2px;
  font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; overflow: hidden; color: var(--on-dark-2); }
.f-tl__short { display: none; }
.f-tl__pin { position: absolute; top: 0; bottom: 0; left: calc(var(--t) * 1%); display: flex; align-items: center; padding: 0 6px; transform: translateX(-50%);
  font: 500 11px/1 var(--mono); letter-spacing: .06em; color: var(--gold-2); border: 1px solid rgba(232, 190, 87, .45); border-radius: 2px;
  transition: background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); }
.f-tl__pin.is-on, html:not(.a-motion) .f-tl__pin { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.f-tl__ticks { position: relative; height: 12px; margin-top: 12px; }
.f-tl__ticks li { position: absolute; top: 0; left: calc(var(--t) * 1%); transform: translateX(-50%); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-dark-2); white-space: nowrap; }
.f-tl__ticks li:first-child { transform: none; }
.f-tl__ticks li:last-child { transform: translateX(-100%); }
.f-tl__head { display: none; }
.a-motion .f-tl__head { display: block; position: absolute; left: 0; top: -8px; bottom: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(7, 9, 12, .35), 0 0 18px rgba(255, 255, 255, .45); will-change: transform; }
.a-motion .f-tl__head::before { content: ''; position: absolute; left: 50%; top: -3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #fff; }

/* static layout (motion off): a normal section, the photo in a 21:9 window on the container */
html:not(.a-motion) .f-shift { padding: var(--sec) 0; }
html:not(.a-motion) .f-shift__panel { margin-top: clamp(28px, 3vw, 44px); }

/* motion, every size: the sticky stage (one screen + the run) */
.a-motion .f-shift { --run: 135vh; }
.a-motion .f-shift__layers { will-change: transform; }
.a-motion :is(.f-shift__night, .f-bay) { will-change: opacity; }   /* the scene only ever changes transform and opacity */
.a-motion .f-shift__stage { display: flex; flex-direction: column; }

/* motion, wide screens: the photo fills the screen; head at the top, readout + schedule along the bottom */
@media (min-width: 768px) and (min-aspect-ratio: 5/4) {
  .a-motion .f-shift__win { position: absolute; inset: 0; max-width: none; padding: 0; }
  .a-motion .f-shift__frame { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
  .a-motion .f-shift__box { --fy: 50%; }
  .a-motion .f-shift__shade { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: radial-gradient(62% 66% at 0% 0%, rgba(7, 9, 12, .9) 0%, rgba(7, 9, 12, .72) 40%, rgba(7, 9, 12, 0) 76%),
      linear-gradient(0deg, rgba(7, 9, 12, .94) 0%, rgba(7, 9, 12, .7) 20%, rgba(7, 9, 12, 0) 42%),
      linear-gradient(180deg, rgba(7, 9, 12, .5) 0%, rgba(7, 9, 12, 0) 16%); }
  .a-motion .f-shift__stage { justify-content: space-between; }
  .a-motion .f-shift__head { position: relative; z-index: 4; padding-top: calc(var(--head-h) + clamp(24px, 4.4vh, 48px)); }
  .a-motion .f-shift__panel { position: relative; z-index: 4; padding-bottom: clamp(28px, 5vh, 52px); }
  .a-motion .f-shift__head .a-head2 { margin-bottom: 0; }
  .a-motion .f-shift__head .a-h2 { max-width: 13ch; }
  .a-motion .f-shift__head :is(.a-h2, .a-lead) { text-shadow: 0 2px 24px rgba(0, 0, 0, .55); }
  .a-motion .f-shift__head .a-lead { color: rgba(255, 255, 255, .86); }
  .a-motion .f-read__status { color: rgba(255, 255, 255, .8); }
}

/* phones and upright tablets */
@media (max-width: 767px), (max-aspect-ratio: 5/4) {
  .f-read, .f-tl { grid-column: span 12; }
  .f-shift__panel { row-gap: 20px; }
  .f-read { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
  .f-read__time { font-size: clamp(40px, 11vw, 64px); }
  .f-read__status { margin: 0 0 4px; text-align: right; max-width: 22ch; font-size: 14px; }
  .a-motion .f-shift { --run: 105vh; }
  .a-motion .f-shift__stage { justify-content: center; gap: 18px; padding: var(--head-h) 0 12px; }
  @media (max-width: 767px) { .a-motion .f-shift__stage { padding-bottom: 78px; gap: 16px; } }   /* clear of the phone call bar */
  .a-motion .f-shift__win { padding: 0; max-width: none; }
  .a-motion .f-shift__frame { aspect-ratio: 4 / 3; max-height: 48svh; border-radius: 0; }
  .a-motion .f-shift__head .a-head2 { margin-bottom: 0; }
  .a-motion .f-shift__head .a-label { margin-bottom: 14px; }
}
@media (max-width: 767px) {
  html:not(.a-motion) .f-shift__win { padding: 0; }
  html:not(.a-motion) .f-shift__frame { aspect-ratio: 4 / 3; border-radius: 0; }
  .f-shift__head .a-lead { margin-top: 12px; font-size: 15px; }
  .f-tl__bar { height: 30px; }
  .f-tl__seg, .f-tl__quiet { padding: 0 8px; letter-spacing: .08em; }
  .f-tl__long { display: none; }
  .f-tl__short { display: inline; }
  .f-tl__pin { padding: 0 4px; font-size: 10px; letter-spacing: 0; }
}
@media (max-width: 767px) and (max-height: 740px) {
  .a-motion .f-shift__head .a-lead { display: none; }
  .a-motion .f-shift__frame { aspect-ratio: 16 / 10; }
}

/* ------------------------------------------------------------------ 02 what we add (photos open down from the floor line) */
.f-add__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.f-add__item { display: flex; flex-direction: column; min-width: 0; }
/* top-aligned: every numeral sits on one line and every title starts on one line; the min-height (numeral + two title lines)
   keeps the rule and the photos level across the row whether a title takes one line or two */
.f-add__cap { display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; min-height: calc(var(--fs-h3) * 2.24 + 40px); padding-bottom: 16px; border-bottom: 1px solid rgba(18, 20, 23, .28); }
.f-add__n { font: 500 12px/1 var(--mono); letter-spacing: .14em; color: var(--gold-ink); }
.f-add__link { display: inline-flex; align-items: baseline; gap: 8px; transition: color .3s; }
.f-add__link .icon { flex: none; width: .72em; height: .72em; color: var(--gold-ink); transition: transform .45s var(--ease); }
.f-add__link:hover { color: var(--gold-ink); }
.f-add__link:hover .icon { transform: translate(3px, -3px); }
.f-add__frame { margin-top: 14px; }
.f-add__img { transform-origin: 50% 0; }
.f-add__img img { object-position: var(--pos, 50% 50%); }
.a-motion .f-add__frame { clip-path: inset(0 0 100% 0); }
@media (max-width: 1023px) {
  .f-add__row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s7); }
}
@media (max-width: 767px) {
  .f-add__row.a-rail { grid-template-columns: none; grid-auto-columns: 74%; row-gap: 0; }
  .f-add__cap { min-height: calc(21px * 2.24 + 40px); }
}

/* ------------------------------------------------------------------ 03 your worries, answered */
.f-worry__head .a-h2 { max-width: 11ch; }
.f-worry__call { margin-top: clamp(28px, 3.4vw, 44px); }
.f-worry__list { display: grid; }
.f-worry__row { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 8px; padding: 26px 0 28px; border-top: 1px solid var(--line-dark); }
.f-worry__row:last-child { border-bottom: 1px solid var(--line-dark); }
.f-worry__n { grid-row: span 2; padding-top: 7px; font: 500 12px/1 var(--mono); letter-spacing: .14em; color: var(--gold-2); }
.f-worry__q { color: #fff; }
.f-worry__a { margin: 10px 0 0; }
.f-worry__a .c-chip { margin-right: 0; }
@media (max-width: 1023px) { .f-worry .a-split { gap: 36px; } }
@media (max-width: 767px) {
  .f-worry__row { grid-template-columns: 40px minmax(0, 1fr); padding: 22px 0 24px; }
  .f-worry__call .a-btn { width: 100%; height: 56px; }
}

/* ------------------------------------------------------------------ 04 work order (the form) */
.f-quote__text .a-lead { margin-top: 20px; }
.f-quote__call { display: grid; justify-items: start; gap: 8px; margin-top: clamp(32px, 4vw, 52px); padding-top: 26px; border-top: 1px solid var(--line); }
.f-quote__or { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.f-quote__tel { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; font-size: clamp(34px, 3.6vw, 54px); font-weight: 600; letter-spacing: -.025em; font-variant-numeric: tabular-nums; line-height: 1.1; transition: color .3s; }
.f-quote__tel .icon { width: .62em; height: .62em; color: var(--gold); transition: transform .5s var(--ease); }
.f-quote__tel:hover .icon { transform: translate(3px, -3px); }
.f-quote__mail { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: 16px; text-decoration: underline; text-decoration-color: rgba(18, 20, 23, .25); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.f-quote__mail:hover { color: var(--text); text-decoration-color: var(--text); }
.f-quote__about { margin-top: clamp(24px, 3vw, 36px); }
@media (max-width: 767px) { .f-quote__call { margin-top: 24px; padding-top: 20px; } }