/* Generated from measurement layout; all theme colours inherit Oz tokens. */
.oz-floorplan-tool,.oz-floorplan-tool :where(*),.oz-floorplan-tool :where(*)::before,.oz-floorplan-tool :where(*)::after{all:revert}
.oz-floorplan-tool{
--bg:var(--canvas);--text:var(--ink);--surface-strong:var(--surface);--surface-soft:var(--stone);--brand-soft:color-mix(in srgb,var(--brand) 6%,transparent);--warn:var(--bronze-text);--danger:var(--brand-dark);--success:var(--brand);--shadow:var(--shadow-soft);--radius-xl:var(--radius-feature);--radius-lg:var(--radius-card);--radius-md:var(--radius-control);--max-width:1080px;--hero-width:1080px;--font-sans:inherit;


    * {
      box-sizing: border-box;
    }

     & {
      scroll-behavior: smooth;
      max-width: 100%;
      overflow-x: clip;
    }

     & {
      margin: 0;
      color: var(--text);
      font-family: var(--font-sans);
      background: var(--bg);
      min-height: 100vh;
      max-width: 100%;
      overflow-x: clip;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    [hidden] {
      display: none !important;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    button,
    input,
    select {
      font: inherit;
    }

    button {
      border: 0;
      cursor: pointer;
    }

    .shell,
    .container {
      width: min(var(--max-width), calc(100% - 40px));
      margin: 0 auto;
    }

    .site-header .shell {
      width: min(var(--header-width), calc(100% - 32px));
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 20;
      background: color-mix(in srgb, var(--surface) 94%, transparent);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line);
    }

    .nav {
      min-height: 74px;
      display: grid;
      grid-template-columns: minmax(220px, 300px) minmax(0, 1fr) auto;
      align-items: center;
      gap: 18px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      width: clamp(232px, 22vw, 300px);
      min-height: 63px;
      background: left center / 100% auto no-repeat url("/assets/brand/oz-timber-floor-logo.webp");
      color: transparent;
      font-size: 0;
      letter-spacing: 0;
      text-transform: none;
      line-height: 0;
      overflow: hidden;
      white-space: nowrap;
      gap: 0;
      flex: none;
    }

    .brand-mark {
      display: none;
    }

    .nav-links {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: clamp(14px, 1.6vw, 22px);
      color: var(--muted);
      font-size: 0.95rem;
      font-weight: 500;
      flex-wrap: nowrap;
    }

    .nav-links a {
      white-space: nowrap;
    }

    .nav-toggle {
      display: none;
      width: 50px;
      height: 50px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent url("./vendor/mobile-menu-icon.png") center / 34px 34px no-repeat;
      color: var(--text);
      align-items: center;
      justify-content: center;
    }

    .nav-toggle span {
      display: none;
    }

    .header-quote-button {
      min-width: 132px;
      white-space: nowrap;
    }

    .header-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 10px;
    }

    .header-phone {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 46px;
      padding: 12px 16px;
      border-radius: 14px;
      border: 1px solid var(--line);
      color: var(--brand);
      font-weight: 700;
      white-space: nowrap;
    }

    .site-header .button {
      white-space: nowrap;
    }

    .button,
    .button-secondary,
    .button-quiet,
    .button-danger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      min-height: 52px;
      padding: 14px 24px;
      border-radius: 14px;
      font-weight: 650;
      transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
    }

    .button {
      background: var(--brand);
      color: var(--surface);
    }

    .button-secondary {
      background: var(--surface-strong);
      color: var(--text);
      border: 1px solid var(--line);
    }

    .button-quiet {
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--line);
    }

    .button-danger {
      background: color-mix(in srgb, var(--accent) 8%, transparent);
      color: var(--danger);
      border: 1px solid color-mix(in srgb, var(--accent) 14%, transparent);
    }

    .button-step-active {
      background: var(--brand);
      color: var(--surface);
      border: 1px solid transparent;
    }

    .button:disabled,
    .button-secondary:disabled,
    .button-quiet:disabled,
    .button-danger:disabled,
    button:disabled {
      cursor: not-allowed;
      opacity: 0.55;
      transform: none;
      box-shadow: none;
    }




    .hero-grid,
    .layout,
    .grid-2,
    .grid-3,
    .form-grid,
    .link-grid,
    .trust-card-grid {
      display: grid;
      gap: 20px;
    }

    .layout {
      grid-template-columns: 1fr;
      align-items: start;
    }

    .layout > * {
      min-width: 0;
    }

    .hero-grid {
      grid-template-columns: 1fr;
    }

    .grid-2 {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid-3 {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .link-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .trust-card-grid {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .link-card,
    .trust-card {
      display: grid;
      gap: 10px;
      padding: 18px;
      border-radius: 18px;
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
    }

    .link-card strong,
    .trust-card h3 {
      color: var(--text);
    }

    .link-card span,
    .trust-card p {
      color: var(--muted);
      margin: 0;
      line-height: 1.6;
    }
    .mini-card {
      background: var(--surface);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      border-radius: var(--radius-xl);
    }


    .mini-card {
      padding: 18px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 8px 12px;
      border-radius: 999px;
      background: var(--brand-soft);
      color: var(--brand);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }

    h1,
    h2,
    h3,
    h4 {
      margin: 0;
      color: var(--text);
      line-height: 1.08;
      letter-spacing: -0.03em;
    }

    h1 {
      margin-top: 18px;
      font-size: clamp(2.25rem, 4.8vw, 3.4rem);
      max-width: 12ch;
    }

    h2 {
      font-size: clamp(1.5rem, 3vw, 1.75rem);
    }

    h3 {
      font-size: 1.12rem;
    }

    p,
    li,
    .helper,
    .status,
    .tiny {
      color: var(--muted);
      line-height: 1.7;
      font-size: 0.98rem;
    }
    .action-row,
    .pill-row {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
    }



    .hero-mini-panel {
      padding: 20px;
      border-radius: 16px;
      background: color-mix(in srgb, var(--stone) 92%, transparent);
      border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
    }

    .hero-mini-panel strong {
      display: block;
      margin-bottom: 12px;
      color: var(--text);
      font-size: 1rem;
    }

    .hero-mini-steps {
      display: grid;
      gap: 10px;
      margin: 0;
      padding: 0;
      list-style: none;
      color: var(--muted);
    }

    .hero-mini-steps li {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .hero-mini-steps span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: color-mix(in srgb, var(--brand) 12%, transparent);
      color: var(--brand);
      font-size: 0.88rem;
      font-weight: 700;
      flex: none;
    }

    .hero-stats {
      margin-top: 24px;
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
    }

    .hero-stat,
    .metric,
    .step-card {
      padding: 18px;
      border-radius: 16px;
      background: color-mix(in srgb, var(--surface) 88%, transparent);
      border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
    }

    .hero-stat strong,
    .metric strong,
    .step-card strong {
      display: block;
      margin-bottom: 6px;
      color: var(--text);
      font-size: 1rem;
    }

    .status {
      margin-top: 14px;
      padding: 12px 14px;
      border-radius: 14px;
      background: color-mix(in srgb, var(--brand) 8%, transparent);
      color: var(--brand);
    }

    .status.status-next {
      background: color-mix(in srgb, var(--brand) 12%, transparent);
      border: 1px solid color-mix(in srgb, var(--brand) 14%, transparent);
      color: var(--text);
    }

    .status.status-next strong {
      display: block;
      margin-bottom: 4px;
      color: var(--brand);
    }

    .step-grid {
      margin-top: 20px;
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
    }

    .process-banner {
      margin-top: 16px;
      padding: 14px 16px;
      border-radius: 14px;
      background: color-mix(in srgb, var(--brand) 8%, transparent);
      color: var(--brand);
      border: 1px solid color-mix(in srgb, var(--brand) 10%, transparent);
    }

    .upload-flow {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .upload-flow-step,
    .confidence-item {
      padding: 10px;
      border-radius: 12px;
      background: color-mix(in srgb, var(--surface) 90%, transparent);
      border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    }

    .upload-flow-step strong,
    .confidence-item strong {
      display: block;
      margin-bottom: 4px;
      color: var(--text);
      font-size: 0.92rem;
    }

    .upload-flow-step span,
    .confidence-item span {
      display: block;
      color: var(--muted);
      font-size: 0.8rem;
      line-height: 1.35;
    }

    .upload-flow-step.is-active {
      border-color: color-mix(in srgb, var(--brand) 32%, transparent);
      background: color-mix(in srgb, var(--stone) 96%, transparent);
    }

    .upload-flow-step.is-complete {
      border-color: color-mix(in srgb, var(--brand) 22%, transparent);
      background: color-mix(in srgb, var(--stone) 90%, transparent);
    }

    .confidence-panel {
      display: grid;
      gap: 12px;
    }

    .confidence-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }

    .confidence-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .confidence-item.is-complete {
      background: color-mix(in srgb, var(--stone) 90%, transparent);
      border-color: color-mix(in srgb, var(--brand) 20%, transparent);
    }

    .confidence-item.is-warning {
      background: color-mix(in srgb, var(--accent) 8%, transparent);
      border-color: color-mix(in srgb, var(--accent) 18%, transparent);
    }

    .room-label-row {
      display: grid;
      grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr);
      gap: 10px;
    }

    .section-card + .section-card {
      margin-top: 20px;
    }

    .field {
      display: grid;
      gap: 8px;
      margin-bottom: 16px;
    }

    .field label {
      font-size: 0.94rem;
      font-weight: 600;
      color: var(--text);
    }

    .field input,
    .field select {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      min-height: 50px;
      padding: 14px 15px;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent);
      background: color-mix(in srgb, var(--surface) 96%, transparent);
      color: var(--text);
      outline: none;
      transition: border-color 160ms ease, box-shadow 160ms ease;
    }

    .field input:focus,
    .field select:focus {
      border-color: color-mix(in srgb, var(--brand) 40%, transparent);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 12%, transparent);
    }

    .field input[type="file"] {
      display: block;
      width: 100%;
      max-width: 100%;
      overflow: hidden;
    }

    .mode-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
      margin-top: 20px;
    }

    .mode-chip {
      width: 100%;
      padding: 18px;
      text-align: left;
      border-radius: 20px;
      border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
      background: color-mix(in srgb, var(--surface) 82%, transparent);
      color: var(--text);
    }

    .mode-chip.active {
      border-color: color-mix(in srgb, var(--brand) 36%, transparent);
      background: color-mix(in srgb, var(--stone) 96%, transparent);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent);
    }

    .mode-chip strong {
      display: block;
      margin-bottom: 8px;
    }

    .mode-panel {
      display: none;
      margin-top: 18px;
    }

    .mode-panel.active {
      display: block;
    }

    .tool-subsection {
      display: grid;
      gap: 12px;
      padding: 16px;
      border-radius: 18px;
      background: color-mix(in srgb, var(--stone) 74%, transparent);
      border: 1px solid var(--line);
    }

    .tool-subsection-header {
      display: grid;
      gap: 4px;
    }

    .tool-subsection-title {
      margin: 0;
      color: var(--text);
      font-size: 1rem;
      font-weight: 700;
    }

    .tool-subsection .status {
      margin-top: 0;
      padding: 10px 12px;
      font-size: 0.95rem;
      line-height: 1.5;
    }



    canvas {
      display: block;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      height: auto;
      background:
        linear-gradient(90deg, color-mix(in srgb, var(--brand) 4%, transparent) 1px, transparent 1px),
        linear-gradient(color-mix(in srgb, var(--brand) 4%, transparent) 1px, transparent 1px),
        linear-gradient(180deg, color-mix(in srgb, var(--brand) 2%, transparent), color-mix(in srgb, var(--brand) 2%, transparent));
      background-size: 28px 28px, 28px 28px, 100% 100%;
      cursor: crosshair;
    }


    .summary-box {
      margin-top: 16px;
      padding: 18px;
      border-radius: 16px;
      background: color-mix(in srgb, var(--surface) 82%, transparent);
      border: 1px solid var(--line);
    }

    .summary-total {
      margin: 10px 0 4px;
      font-size: clamp(2.4rem, 4vw, 3.6rem);
      line-height: 0.96;
      letter-spacing: -0.05em;
      color: var(--brand);
    }

    .metric-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 14px;
      margin-top: 16px;
    }

    .pill {
      display: inline-flex;
      align-items: center;
      min-height: 36px;
      padding: 8px 12px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
      background: color-mix(in srgb, var(--surface) 94%, transparent);
      color: var(--muted);
      font-size: 0.9rem;
      font-weight: 600;
    }

    .pill.good {
      background: color-mix(in srgb, var(--brand) 10%, transparent);
      color: var(--success);
      border-color: color-mix(in srgb, var(--brand) 16%, transparent);
    }

    .pill.warn {
      background: color-mix(in srgb, var(--accent) 10%, transparent);
      color: var(--warn);
      border-color: color-mix(in srgb, var(--accent) 16%, transparent);
    }

    .rooms-table {
      display: grid;
      gap: 12px;
      margin-top: 14px;
    }

    .room-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 12px;
      align-items: center;
      padding: 14px 16px;
      border-radius: 16px;
      background: color-mix(in srgb, var(--surface) 94%, transparent);
      border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    }

    .room-main {
      display: grid;
      gap: 8px;
    }

    .room-side {
      display: grid;
      gap: 10px;
      justify-items: end;
      align-items: center;
    }

    .room-main input[type="text"] {
      min-height: 42px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
      background: var(--surface);
    }

    .room-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      color: var(--muted);
      font-size: 0.92rem;
    }

    .room-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 118px;
      justify-content: flex-end;
    }

    .room-toggle input {
      width: 18px;
      height: 18px;
      accent-color: var(--brand);
    }

    .room-delete {
      min-height: 42px;
      padding: 10px 12px;
      border-radius: 12px;
      background: color-mix(in srgb, var(--accent) 8%, transparent);
      color: var(--danger);
      border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
    }

    .hidden {
      display: none !important;
    }

    .quick-room-hidden {
      display: none !important;
    }

    body.floorplan-dev-mode & .mode-row.quick-room-hidden {
      display: grid !important;
    }

    body.floorplan-dev-mode & .mode-panel.quick-room-hidden.active {
      display: block !important;
    }

    .scale-detail-grid,
    .trace-detail-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }

    .scale-detail-grid span,
    .trace-detail-grid span {
      display: block;
      color: var(--muted);
      font-size: 0.86rem;
      margin-bottom: 4px;
    }

    .scale-warning,
    .trace-warning {
      color: var(--warn);
      font-weight: 600;
      line-height: 1.45;
    }

    .quick-status-grid {
      display: grid;
      gap: 12px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      margin-top: 16px;
    }

    .quick-status-card {
      padding: 16px;
      border-radius: 18px;
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
    }

    .quick-status-card strong {
      display: block;
      margin-bottom: 6px;
      color: var(--text);
      font-size: 0.98rem;
    }

    .quick-suggestion-card {
      display: grid;
      gap: 12px;
      margin-top: 16px;
      padding: 16px;
      border-radius: 18px;
      background: color-mix(in srgb, var(--surface) 94%, transparent);
      border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
      box-shadow: 0 12px 26px color-mix(in srgb, var(--ink) 6%, transparent);
    }

    .quick-suggestion-card[data-confidence="Low"] {
      border-color: color-mix(in srgb, var(--accent) 28%, transparent);
      background: color-mix(in srgb, var(--stone) 96%, transparent);
    }

    .quick-suggestion-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
    }

    .quick-reason-list {
      margin: 0;
      padding-left: 18px;
      color: var(--muted);
    }

    .quick-reason-list li {
      font-size: 0.9rem;
      line-height: 1.45;
    }

    .quick-preview-stage {
      overflow: auto;
      border-radius: 18px;
      border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
      background: var(--stone);
    }

    #quickPreviewCanvas {
      display: block;
      width: 100%;
      height: auto;
      background: var(--stone);
    }

    details.advanced-panel {
      margin-top: 18px;
      padding: 16px 18px;
      border-radius: 20px;
      background: color-mix(in srgb, var(--surface) 80%, transparent);
      border: 1px solid color-mix(in srgb, var(--ink) 6%, transparent);
    }

    details.advanced-panel summary {
      cursor: pointer;
      font-weight: 700;
      color: var(--text);
    }

    .range-field input[type="range"] {
      width: 100%;
      margin: 6px 0 0;
    }

    .overlay {
      position: fixed;
      inset: 0;
      z-index: 40;
      display: none;
      align-items: center;
      justify-content: center;
      background: color-mix(in srgb, var(--ink) 42%, transparent);
      padding: 20px;
    }

    .overlay.active {
      display: flex;
    }

    .modal {
      width: min(420px, 100%);
      padding: 24px;
      border-radius: 24px;
      background: color-mix(in srgb, var(--surface) 98%, transparent);
      box-shadow: 0 20px 60px color-mix(in srgb, var(--ink) 24%, transparent);
      border: 1px solid color-mix(in srgb, var(--surface) 80%, transparent);
    }

    .modal h3 {
      font-size: 1.3rem;
    }

    .site-footer {
      background: var(--brand);
      color: var(--surface);
      padding: 64px 0 20px;
    }

    .site-footer .container {
      width: min(1180px, calc(100% - 32px));
      margin: 0 auto;
    }

    .site-footer.footer-contained {
      width: min(1360px, calc(100% - 80px));
      margin: 64px auto 80px;
      border-radius: 30px;
      overflow: hidden;
      box-shadow: 0 18px 48px color-mix(in srgb, var(--brand) 16%, transparent);
    }

    .footer-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 0.9fr));
      gap: 28px 36px;
      align-items: start;
    }

    .footer-brand-block {
      display: grid;
      gap: 16px;
      max-width: 300px;
    }

    .footer-logo {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 188px;
      min-height: 58px;
      padding: 14px 16px;
      border-radius: 18px;
      background: color-mix(in srgb, var(--surface) 96%, transparent);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 6%, transparent);
    }

    .footer-logo img {
      display: block;
      width: 154px;
      height: auto;
    }

    .footer-brand-copy {
      margin: 0;
      color: color-mix(in srgb, var(--surface) 76%, transparent);
      font-size: 0.95rem;
      line-height: 1.7;
    }

    .footer-brand-cta {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: fit-content;
      min-height: 44px;
      padding: 0 16px;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--surface) 18%, transparent);
      background: color-mix(in srgb, var(--surface) 8%, transparent);
      color: var(--surface);
      font-size: 0.92rem;
      font-weight: 700;
      text-decoration: none;
      transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
    }

    .footer-brand-cta:hover {
      background: color-mix(in srgb, var(--surface) 14%, transparent);
      border-color: color-mix(in srgb, var(--surface) 28%, transparent);
      color: var(--surface);
    }

    .footer-col h3,
    .footer-col h4 {
      margin: 0 0 14px;
      color: var(--surface);
      font-size: 1rem;
      font-weight: 700;
    }

    .footer-col p {
      margin: 0;
      color: color-mix(in srgb, var(--surface) 76%, transparent);
      font-size: 0.95rem;
      line-height: 1.7;
    }

    .footer-col ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 10px;
    }

    .footer-col li {
      margin: 0;
    }

    .footer-col a,
    .footer-legal a {
      color: color-mix(in srgb, var(--surface) 80%, transparent);
      text-decoration: none;
      font-size: 0.95rem;
      font-weight: 500;
      line-height: 1.45;
      transition: color 0.18s ease, opacity 0.18s ease;
    }

    .footer-col a:hover,
    .footer-legal a:hover {
      color: var(--surface);
    }

    .footer-bottom {
      border-top: 1px solid color-mix(in srgb, var(--surface) 16%, transparent);
      margin-top: 36px;
      padding-top: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      color: color-mix(in srgb, var(--surface) 62%, transparent);
      font-size: 0.84rem;
    }

    .footer-bottom p {
      margin: 0;
      color: color-mix(in srgb, var(--surface) 62%, transparent);
    }

    .footer-legal {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
    }










    .summary-heading {
      display: grid;
      gap: 10px;
    }

    .summary-actions {
      display: grid;
      gap: 12px;
    }

    .support-copy {
      max-width: 760px;
    }

    .tool-button-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }

    .tool-button-row.compact {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tool-button-row .button-secondary,
    .tool-button-row .button-quiet,
    .tool-button-row .button-danger,
    .tool-button-row .button {
      width: 100%;
    }


    .room-list-panel summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      cursor: pointer;
      list-style: none;
    }

    .room-list-panel summary::-webkit-details-marker {
      display: none;
    }

    .room-list-panel summary strong {
      color: var(--text);
    }

    .room-list-panel[open] summary {
      margin-bottom: 14px;
    }

    body.floorplan-workspace-active & {
      --max-width: 1080px;
      background:
        radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 30%),
        linear-gradient(180deg, var(--surface) 0%, var(--canvas) 100%);
    }





























    @media (max-width: 1120px) {
      .nav-links {
        gap: 16px;
        font-size: 0.9rem;
      }

      .site-header .button {
        min-height: 46px;
        padding: 12px 18px;
      }

      .header-phone {
        padding-inline: 14px;
      }
    }

    @media (max-width: 1080px) {
      .hero-grid,
      .layout,
      .grid-2,
      .metric-grid {
        grid-template-columns: 1fr;
      }

      .grid-3,
      .link-grid,
      .trust-card-grid,
      .step-grid,
      .hero-stats,
      .upload-flow,
      .footer-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .footer-brand-block {
        grid-column: 1 / -1;
        max-width: 420px;
      }

      .site-footer.footer-contained {
        width: calc(100% - 24px);
        margin: 44px auto 24px;
        border-radius: 22px;
      }









    }

    @media (max-width: 980px) {
      .nav {
        min-height: 68px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        padding: 12px 0;
      }

      .brand {
        width: clamp(190px, 58vw, 260px);
        min-height: 51px;
      }

      .nav-toggle {
        display: inline-flex;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: center;
      }

      .nav-links {
        display: none;
        width: 100%;
        grid-column: 1 / -1;
        grid-row: 2;
        gap: 8px;
        padding-top: 12px;
        flex-direction: column;
        align-items: stretch;
      }

      .site-header.mobile-nav-open .nav-links {
        display: flex;
      }

      .nav-links a {
        white-space: normal;
        padding: 12px 14px;
        border-radius: 14px;
        background: color-mix(in srgb, var(--surface) 92%, transparent);
        border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
      }

      .nav-toggle[aria-expanded="true"] {
        background: transparent;
        position: relative;
      }

      .nav-toggle[aria-expanded="true"]::before,
      .nav-toggle[aria-expanded="true"]::after {
        content: "";
        position: absolute;
        width: 28px;
        height: 2.5px;
        border-radius: 999px;
        background: var(--ink);
        top: 50%;
        left: 50%;
        transform-origin: center;
      }

      .nav-toggle[aria-expanded="true"]::before {
        transform: translate(-50%, -50%) rotate(45deg);
      }

      .nav-toggle[aria-expanded="true"]::after {
        transform: translate(-50%, -50%) rotate(-45deg);
      }

      .site-header .button {
        display: none;
      }

      .header-actions {
        display: none;
      }

      canvas {
        min-width: 0;
      }

      .tool-button-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 820px) {
      .link-grid,
      .trust-card-grid {
        grid-template-columns: 1fr;
      }


      .tool-subsection {
        padding: 16px;
      }

      .hero-actions .button,
      .hero-actions .button-secondary {
        width: 100%;
      }

      .action-row .button,
      .action-row .button-secondary,
      .action-row .button-quiet,
      .action-row .button-danger,
      .tool-button-row .button,
      .tool-button-row .button-secondary,
      .tool-button-row .button-quiet,
      .tool-button-row .button-danger {
        width: 100%;
      }

      .room-row {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
      }

      .room-toggle {
        justify-content: flex-start;
      }

      .room-side {
        justify-items: stretch;
      }

      .room-delete {
        width: 100%;
      }

      .step-grid,
      .hero-stats,
      .upload-flow,
      .confidence-grid,
      .room-label-row,
      .footer-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 640px) {



      .tool-subsection {
        padding: 12px;
        border-radius: 16px;
      }

      h1 {
        font-size: clamp(2rem, 10vw, 2.55rem);
      }

      .hero-mini-panel {
        display: none;
      }


      .hero-copy-block p {
        line-height: 1.45;
      }





      #floorplanGuideSection h2,
      #floorplanTrustSection h2 {
        font-size: 1.35rem;
      }

      canvas {
        min-width: 0;
      }


      .mode-row {
        grid-template-columns: 1fr;
      }

      .tool-button-row,
      .tool-button-row.compact {
        grid-template-columns: 1fr;
      }

      .site-footer {
        padding: 52px 0 18px;
      }

      .site-footer.footer-contained {
        margin: 44px auto 24px;
        border-radius: 22px;
      }

      .footer-brand-block {
        max-width: none;
      }


      .rooms-table {
        gap: 14px;
      }

      .room-row {
        padding: 18px;
        border-radius: 18px;
      }

      .room-main {
        gap: 10px;
      }

      .room-main input[type="text"] {
        min-height: 46px;
        font-size: 1rem;
      }

      .room-meta {
        display: grid;
        gap: 6px;
        align-items: start;
      }

      .room-meta strong {
        font-size: 1rem;
        color: var(--text);
      }

      .room-side {
        gap: 12px;
      }

      .room-toggle {
        min-height: 46px;
        width: 100%;
        justify-content: space-between;
        padding: 12px 14px;
        border-radius: 12px;
        background: color-mix(in srgb, var(--stone) 90%, transparent);
        border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
      }

      .room-delete {
        min-height: 46px;
      }

      .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        text-align: left;
      }

      .footer-legal {
        justify-content: flex-start;
        flex-wrap: wrap;
      }

      .brand {
        width: clamp(188px, 62vw, 250px);
        min-height: 51px;
      }









    }

    @media (max-width: 420px) {
    .tool-button-row,
    .tool-button-row.compact {
        grid-template-columns: 1fr;
      }

    }

/* Page presentation lives inside the tool's isolated scope. Shared Oz chrome
   stays outside it. DOM order is also the visual and keyboard reading order. */
main { display:block; padding:48px 0; }
main > section + section { margin-top:48px; }
.hero, .tool-section, main > .section { padding:0; }
.hero-card, .workspace-card, .workspace-summary {
  min-width:0; margin:0; padding:0; border:0; box-shadow:none;
  background:transparent; border-radius:0;
}
.hero-content-row { display:block; margin-top:12px; }
.hero-copy-block { max-width:760px; }
.hero-copy-block h1 { margin:0; max-width:20ch; }
.hero-copy-block p { margin:12px 0 0; }
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }
.workflow-steps {
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  list-style:none; margin:0; padding:0; gap:24px;
}
.workflow-steps li { display:grid; align-content:start; gap:8px; margin:0; }
.workflow-steps strong { color:var(--text); }
.workflow-steps span { color:var(--muted); line-height:1.5; }
#measurementTool { scroll-margin-top:112px; }
#measurementTool > .layout {
  display:grid; grid-template-columns:minmax(0,1fr); gap:24px;
  padding:32px; border:1px solid var(--line);
  border-radius:var(--radius-xl); background:var(--surface);
}
.workspace-card { display:block; }
.tool-header { display:grid; gap:12px; margin-bottom:24px; }
.tool-header > .eyebrow { justify-self:start; }
.tool-header p, .summary-heading p { margin:0; }
.workspace-main {
  display:grid; grid-template-columns:minmax(264px,304px) minmax(0,1fr);
  gap:24px; align-items:start; min-width:0;
}
.tool-panel-shell { display:grid; gap:24px; min-width:0; align-content:start; }
.tool-subsection-header { gap:12px; }
.plan-privacy { margin:0; }
body.floorplan-workspace-active & .upload-field { display:none; }
.workspace-stage {
  position:sticky; top:112px; display:grid; gap:12px;
  align-content:start; min-width:0;
}
.workspace-stage:has(.port-keyboard[open]) { position:static; }
.workspace-stage .status { margin-top:0; }
.canvas-shell { width:100%; min-width:0; padding:0; border:0; background:transparent; }
.canvas-stage {
  position:relative; display:flex; align-items:center; justify-content:center;
  width:100%; min-width:0; max-width:100%; min-height:240px;
  overflow:hidden; border:1px solid var(--line);
  border-radius:var(--radius-md); background:var(--stone);
}
.canvas-stage canvas { width:auto; height:auto; max-width:100%; max-height:min(64dvh,680px); }
.tool-button-row :is(.button,.button-secondary,.button-quiet,.button-danger) {
  min-height:44px; padding:10px; font-size:.95rem;
}
.workspace-summary { position:static; padding-top:24px; border-top:1px solid var(--line); }
.workspace-summary .summary-box {
  margin-top:24px; padding:0; border:0; border-radius:0; background:transparent;
}
.workspace-summary .metric { border:0; background:var(--stone); }
.workspace-summary .summary-heading { gap:12px; }
.estimate-limits { margin:12px 0; }
.floorplan-guidance > .shell { display:grid; gap:24px; }
.measurement-help { padding:0; }
.measurement-help summary, .faq-content summary { cursor:pointer; padding:16px 0; }
.help-content { max-width:760px; }
.help-content p { margin:12px 0; }
.floorplan-guidance a { text-decoration:underline; text-underline-offset:4px; }
.plan-guidance-copy { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.plan-guidance-copy h2, .planning-links h2 { font-size:1.25rem; line-height:1.3; }
.plan-guidance-copy p { margin:12px 0 0; }
.planning-link-list { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:12px; }
.planning-link-list a { display:inline-flex; align-items:center; min-height:44px; }
.section-heading { margin-top:12px; }
.faq-content > .rooms-table { margin-top:24px; }
.faq-content .summary-box {
  margin:0; padding:0; border:0; border-bottom:1px solid var(--line);
  border-radius:0; background:transparent;
}
.faq-content .summary-box > p { margin:0 0 16px; }
@media (max-width:1080px) {
  .workspace-main { grid-template-columns:minmax(0,1fr); }
  .workspace-stage { position:static; }
}
@media (max-width:640px) {
  main { padding:32px 0; }
  main > section + section { margin-top:32px; }
  .workflow-steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
  #measurementTool > .layout { padding:20px; gap:20px; }
  .workspace-main, .tool-panel-shell { gap:20px; }
  .workspace-summary { padding-top:20px; }
  .workspace-summary .summary-box { margin-top:20px; }
  .tool-header { margin-bottom:20px; }
  .plan-guidance-copy { grid-template-columns:minmax(0,1fr); gap:20px; }
  .floorplan-guidance > .shell { gap:20px; }
  .canvas-stage { min-height:200px; }
  .canvas-stage canvas { max-height:min(60dvh,500px); }
}

.oz-source-style-1:not(#oz-inline-specificity-a):not(#oz-inline-specificity-b):not(#oz-inline-specificity-c){margin-top: 14px;}
.oz-source-style-3:not(#oz-inline-specificity-a):not(#oz-inline-specificity-b):not(#oz-inline-specificity-c){margin-top: 18px;}
.oz-source-style-6:not(#oz-inline-specificity-a):not(#oz-inline-specificity-b):not(#oz-inline-specificity-c){margin-bottom: 20px;}
.oz-source-style-7:not(#oz-inline-specificity-a):not(#oz-inline-specificity-b):not(#oz-inline-specificity-c){display: block; margin-bottom: 8px; color: var(--text);}
.oz-source-style-8:not(#oz-inline-specificity-a):not(#oz-inline-specificity-b):not(#oz-inline-specificity-c){margin: 0;}
.oz-source-style-9:not(#oz-inline-specificity-a):not(#oz-inline-specificity-b):not(#oz-inline-specificity-c){margin-top: 0;}
.oz-source-style-10:not(#oz-inline-specificity-a):not(#oz-inline-specificity-b):not(#oz-inline-specificity-c){margin-top: 4px;}
.oz-source-style-11:not(#oz-inline-specificity-a):not(#oz-inline-specificity-b):not(#oz-inline-specificity-c){margin-top: 12px;}
.oz-source-style-12:not(#oz-inline-specificity-a):not(#oz-inline-specificity-b):not(#oz-inline-specificity-c){margin: 12px 0 0;}
.oz-source-style-13:not(#oz-inline-specificity-a):not(#oz-inline-specificity-b):not(#oz-inline-specificity-c){margin-top: 2px;}
.oz-source-style-14:not(#oz-inline-specificity-a):not(#oz-inline-specificity-b):not(#oz-inline-specificity-c){margin: 8px 0 12px;}
.oz-source-style-15:not(#oz-inline-specificity-a):not(#oz-inline-specificity-b):not(#oz-inline-specificity-c){margin: 8px 0 0;}
.oz-source-style-16:not(#oz-inline-specificity-a):not(#oz-inline-specificity-b):not(#oz-inline-specificity-c){font-size: 1.8rem;}
.oz-source-style-17:not(#oz-inline-specificity-a):not(#oz-inline-specificity-b):not(#oz-inline-specificity-c){display: flex; align-items: center; justify-content: space-between; gap: 12px;}
.oz-source-style-18:not(#oz-inline-specificity-a):not(#oz-inline-specificity-b):not(#oz-inline-specificity-c){margin: 10px 0 0;}
.oz-source-style-19:not(#oz-inline-specificity-a):not(#oz-inline-specificity-b):not(#oz-inline-specificity-c){margin: 12px 0 6px;}
.oz-source-style-20:not(#oz-inline-specificity-a):not(#oz-inline-specificity-b):not(#oz-inline-specificity-c){margin: 0; padding-left: 18px;}
.oz-source-style-21:not(#oz-inline-specificity-a):not(#oz-inline-specificity-b):not(#oz-inline-specificity-c){margin-top: 16px;}
.room-row[data-selected="true"]{border-color:color-mix(in srgb, var(--brand) 34%, transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent)}


.brand{background-size:contain}
.port-skip{position:fixed;top:8px;left:8px;z-index:1000;padding:12px;background:white;color:var(--ink);transform:translateY(-200%)}.port-skip:focus{transform:none}
:focus-visible,.field :is(input,select):focus-visible{outline:3px solid var(--brand);outline-offset:3px}
dialog.overlay{border:0;padding:20px;width:100%;height:100%;max-width:none;max-height:none;margin:0}dialog.overlay::backdrop{background:transparent}
.port-keyboard{margin-top:14px}.port-keyboard summary{cursor:pointer}.port-keyboard input{max-width:100%}
.port-keyboard input,.port-keyboard button{scroll-margin-block:100px}
.port-consent{display:flex;gap:10px;font-size:.95rem;line-height:1.6;align-items:flex-start}.port-consent input{width:20px;height:20px;flex:none;margin-top:4px}
.port-enquiry-fallback{display:block;text-decoration:underline;font-size:.9rem;line-height:1.5;margin-top:12px}
.port-pdf-pages{display:grid;gap:6px;margin-top:12px}.room-main input{max-width:100%}
@media(prefers-reduced-motion:reduce){ &{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
@media(max-width:420px){.port-keyboard .form-grid{grid-template-columns:1fr}.modal{max-height:calc(100dvh - 40px);overflow:auto}}

}
.oz-floorplan-tool :is(.button,.button-secondary,.button-quiet,.button-danger){border-radius:var(--radius-control);font-family:inherit}
.oz-floorplan-tool :focus-visible{outline-color:var(--brand)}
.oz-floorplan-tool .port-skip{color:var(--ink);background:var(--surface)}
.oz-floorplan-tool :is(h1,h2,h3,h4){font-family:revert-layer;font-weight:revert-layer;letter-spacing:revert-layer}