// cms-skin-calm.jsx — TechReady "Calm & Clear" skin (a contrasting option).
// Same content document, a lighter / airier look. Scoped under `.trc`.
// All top-level identifiers are unique (calm*) so they never clash with the
// soft skin's globals — sibling Babel scripts share one top-level scope.
//
// Load AFTER React + tr-icons.js + cms-core.js + cms-data.js.

const { useState: useCalmState, useEffect: useCalmEffect } = React;

(function () {
  if (document.getElementById("trc-css")) return;
  const s = document.createElement("style");
  s.id = "trc-css";
  s.textContent = `
  .trc{ --blue:#00A8E8; --blue-700:#0079ad; --blue-50:#e9f7fe; --blue-100:#d2eefb;
    --ink:#16242c; --soft:#48606c; --line:#e3ebef; --bg-soft:#f5fafd; --paper:#fff;
    --radius:18px; --shadow:0 18px 40px -24px rgba(16,60,80,.35); --hw:var(--trc-hw,700); }
  .trc a{ color:inherit; text-decoration:none; }
  .trc h1,.trc h2,.trc h3{ font-family:var(--fg-head,'Plus Jakarta Sans',sans-serif); font-weight:var(--hw); line-height:1.12; letter-spacing:-.02em; }
  .trc .wrap{ max-width:1160px; margin:0 auto; padding:0 clamp(28px,5vw,44px); }
  .trc section{ padding:96px 0; }
  .trc .ico{ flex:none; }
  .trc .btn{ display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:16px; padding:15px 26px; border-radius:999px; border:2px solid transparent; cursor:pointer; transition:.18s ease; white-space:nowrap; }
  .trc .btn-primary{ background:var(--blue); color:#fff; }
  .trc .btn-primary:hover{ background:var(--blue-700); transform:translateY(-2px); }
  .trc .btn-ghost{ background:#fff; color:var(--blue-700); border-color:var(--blue-100); }
  .trc .btn-ghost:hover{ border-color:var(--blue); transform:translateY(-2px); }
  .trc .eyebrow{ display:inline-flex; align-items:center; gap:8px; font-weight:700; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--blue-700); }
  .trc .eyebrow::before{ content:""; width:26px; height:2px; background:var(--blue); border-radius:2px; }
  .trc .hl{ color:var(--blue); }

  /* NAV */
  .trc .nav{ position:sticky; top:var(--fg-nav-top,0); z-index:60; background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  .trc .nav-inner{ display:flex; align-items:center; justify-content:space-between; height:74px; }
  .trc .brand img{ height:36px; width:auto; display:block; }
  .trc .nav-links{ display:flex; gap:30px; align-items:center; font-weight:600; font-size:15px; color:var(--soft); }
  .trc .nav-links a:hover{ color:var(--blue-700); }
  .trc .nav .btn{ padding:11px 20px; font-size:15px; }
  .trc .nav-burger{ display:none; width:42px; height:42px; border:none; background:transparent; cursor:pointer; flex-direction:column; gap:5px; align-items:center; justify-content:center; padding:0; }
  .trc .nav-burger span{ width:22px; height:2.5px; background:var(--ink); border-radius:2px; transition:.2s; }
  .trc .nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .trc .nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .trc .nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
  .trc .nav-mobile{ display:none; flex-direction:column; padding:6px 28px 20px; background:rgba(255,255,255,.97); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
  .trc .nav-mobile a:not(.btn){ padding:14px 2px; font-weight:700; font-size:16px; color:var(--ink); border-bottom:1px solid var(--line); }
  .trc .nav-mobile .btn{ margin-top:14px; justify-content:center; }
  @media(max-width:880px){
    .trc .nav-links,.trc .nav-cta{ display:none; }
    .trc .nav-burger{ display:flex; }
    .trc .nav-mobile.open{ display:flex; }
  }

  /* HERO */
  .trc .hero{ background:linear-gradient(180deg,var(--blue-50),#fff 78%); padding:84px 0 64px; }
  .trc .hero-grid{ display:grid; grid-template-columns:1.05fr .95fr;
    grid-template-areas:"eyebrow art" "title art" "lead art" "feats art" "cta art";
    column-gap:56px; row-gap:0; align-items:start; }
  .trc .h-eyebrow{ grid-area:eyebrow; }
  .trc .h-title{ grid-area:title; margin-top:12px; }
  .trc .h-lead{ grid-area:lead; }
  .trc .h-cta{ grid-area:cta; margin-top:30px; }
  .trc .h-feats{ grid-area:feats; }
  .trc .hero h1{ font-size:clamp(38px,5vw,60px); color:var(--ink); }
  .trc .hero .lead{ font-size:20px; color:var(--soft); margin:22px 0 0; max-width:32ch; }
  .trc .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
  .trc .trust{ display:flex; gap:24px; margin-top:30px; flex-wrap:wrap; }
  .trc .trust span{ display:flex; align-items:center; gap:9px; font-size:14px; font-weight:600; color:var(--soft); }
  .trc .trust .feat-label{ color:var(--ink); font-weight:700; }
  .trc .trust .ico{ color:var(--blue); }
  .trc .hero-art{ grid-area:art; align-self:center; position:relative; display:grid; place-items:center; }
  .trc .blob{ position:absolute; inset:6% 4% 8% 6%; background:radial-gradient(circle at 35% 30%,#bfe9fb,#8fd6f6); border-radius:46% 54% 58% 42%/50% 44% 56% 50%; }
  .trc .hero-card{ position:relative; background:#fff; border-radius:24px; box-shadow:var(--shadow); padding:24px; width:80%; border:1px solid var(--line); }
  .trc .hero-card .row{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
  .trc .hero-card .row:last-child{ border-bottom:0; }
  .trc .hero-card .dot{ width:42px; height:42px; border-radius:12px; background:var(--blue-50); display:grid; place-items:center; color:var(--blue-700); flex:none; }
  .trc .hero-card .t{ font-weight:700; font-size:15px; color:var(--ink); }
  .trc .hero-card .sld{ font-size:13px; color:var(--soft); }
  .trc .hero-card .ok{ margin-left:auto; width:22px; height:22px; border-radius:50%; background:#e6f8ee; display:grid; place-items:center; color:#1c9d5e; flex:none; }
  .trc .badge-float{ position:absolute; right:-6px; bottom:8%; background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); border-radius:16px; padding:14px 18px; display:flex; gap:10px; align-items:center; }
  .trc .badge-float b{ font-size:22px; color:var(--blue); } .trc .badge-float em{ font-style:normal; font-size:12px; color:var(--soft); line-height:1.25; }

  /* CHIPS band (technologies) */
  .trc .chips-band{ background:var(--bg-soft); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:54px 0; }
  .trc .chips-head{ text-align:center; margin-bottom:30px; font-weight:700; color:var(--soft); font-size:15px; }
  .trc .chips{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
  .trc .chip{ display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:11px 18px; font-weight:600; font-size:15px; color:var(--ink); }
  .trc .chip .ico{ color:var(--blue); }

  /* HELP */
  .trc .center{ text-align:center; max-width:620px; margin:0 auto 54px; }
  .trc .center h2{ font-size:clamp(30px,3.6vw,42px); margin:14px 0 14px; color:var(--ink); }
  .trc .center p{ color:var(--soft); font-size:18px; }
  .trc .cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
  .trc .card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:.2s ease; }
  .trc .card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); border-color:var(--blue-100); }
  .trc .card .ph{ aspect-ratio:16/9; background:var(--blue-50); display:grid; place-items:center; border-bottom:1px solid var(--line); }
  .trc .card .ph .glyph{ width:64px; height:64px; border-radius:18px; background:#fff; border:1px solid var(--blue-100); display:grid; place-items:center; color:var(--blue); }
  .trc .card .body{ padding:24px 24px 28px; }
  .trc .card h3{ font-size:21px; margin-bottom:10px; color:var(--ink); }
  .trc .card p{ color:var(--soft); font-size:15px; }

  /* WHY */
  .trc .why{ background:var(--blue-50); position:relative; overflow:hidden; }
  .trc .why .wrap{ position:relative; z-index:1; }
  .trc .why-bg{ position:absolute; left:-22px; bottom:-86px; color:var(--blue); opacity:.06; line-height:0; pointer-events:none; z-index:0; transform:rotate(-5deg); transform-origin:bottom left; }
  @media(max-width:760px){ .trc .why-bg{ display:none; } }
  .trc .why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px; margin-top:14px; }
  .trc .why-creds{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:26px; }
  .trc .why-cred{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 15px; font-weight:700; font-size:13.5px; color:var(--ink); }
  .trc .why-cred .ico{ color:var(--blue-700); }
  .trc .feat{ background:#fff; border-radius:var(--radius); padding:26px; border:1px solid #d8eefb; display:flex; gap:18px; }
  .trc .feat .ic{ width:50px; height:50px; flex:none; border-radius:14px; background:var(--blue); display:grid; place-items:center; color:#fff; }
  .trc .feat h3{ font-size:19px; margin-bottom:6px; color:var(--ink); }
  .trc .feat p{ color:var(--soft); font-size:15px; }
  .trc .feat.wide{ grid-column:1/-1; background:var(--blue); color:#fff; align-items:center; }
  .trc .feat.wide .ic{ background:rgba(255,255,255,.18); }
  .trc .feat.wide h3{ color:#fff; } .trc .feat.wide p{ color:rgba(255,255,255,.9); }
  .trc .feat.wide .seal{ width:64px; height:64px; flex:none; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; text-align:center; line-height:.95; }
  .trc .feat.wide .seal b{ font-size:23px; display:block; } .trc .feat.wide .seal span{ font-size:10px; }

  /* AREA */
  .trc .area-grid{ display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:start; }
  .trc .map{ position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); aspect-ratio:4/3; background:linear-gradient(180deg,#eef6ea,#e7f1ea); }
  .trc .map .roads{ position:absolute; inset:0; opacity:.5; }
  .trc .map .water{ position:absolute; right:-10%; bottom:-15%; width:60%; height:55%; background:#9fd6ef; border-radius:50% 50% 40% 60%; }
  .trc .map .zone{ position:absolute; left:14%; top:20%; width:46%; height:50%; border:2px dashed var(--blue-700); background:rgba(0,168,232,.14); border-radius:42% 58% 50% 50%; }
  .trc .map .pin{ position:absolute; left:33%; top:40%; width:34px; height:34px; background:var(--blue); border-radius:50% 50% 50% 0; transform:rotate(-45deg); box-shadow:var(--shadow); display:grid; place-items:center; }
  .trc .map .pin::after{ content:""; width:12px; height:12px; background:#fff; border-radius:50%; }
  .trc .map .cbd-city{ position:absolute; right:9%; top:16%; width:50px; height:auto; color:var(--ink); opacity:.5; }
  .trc .area h2{ font-size:clamp(28px,3.4vw,38px); margin:14px 0 16px; color:var(--ink); }
  .trc .area p{ color:var(--soft); font-size:16px; margin-bottom:14px; }
  .trc .area .note{ background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:16px 18px; font-size:15px; color:var(--ink); }
  .trc .pc-check{ margin-top:18px; background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px; transition:background-color .45s ease, border-color .45s ease; }
  .trc .pc-check.is-onsite{ background:#e6f8ee; border-color:transparent; }
  .trc .pc-check.is-remote{ background:var(--blue-50); border-color:transparent; }
  .trc .pc-check.is-invalid{ background:#fff4e6; border-color:transparent; }
  .trc .pc-h{ font-weight:700; font-size:16px; margin-bottom:12px; color:var(--ink); }
  .trc .pc-form{ display:flex; gap:10px; background:transparent; border:0; box-shadow:none; padding:0; border-radius:0; }
  .trc .pc-input{ flex:1; min-width:0; border:1px solid var(--line); border-radius:12px; padding:12px 15px; font:inherit; font-size:15px; background:#fff; color:var(--ink); }
  .trc .pc-input:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 4px var(--blue-50); }
  .trc .pc-btn{ flex:none; background:var(--blue); color:#fff; border:none; border-radius:12px; font-weight:700; font-size:15px; padding:0 24px; cursor:pointer; transition:.18s; }
  .trc .pc-btn:hover{ background:var(--blue-700); }
  .trc .pc-reveal{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s ease; }
  .trc .pc-reveal.open{ grid-template-rows:1fr; }
  .trc .pc-reveal-in{ overflow:hidden; min-height:0; }
  .trc .pc-result{ margin-top:14px; font-size:14.5px; }
  .trc .pc-result p{ margin:0; }
  .trc .pc-fine{ margin-top:8px !important; font-size:13px; opacity:.82; }
  .trc .pc-result.invalid{ color:#9a5b00; }
  .trc .pc-result.onsite{ color:#14653f; }
  .trc .pc-result.remote{ color:var(--blue-ink,#0a4866); }
  .trc .pc-badges{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
  .trc .pc-badge{ display:inline-flex; align-items:center; gap:7px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:6px 12px; font-weight:700; font-size:13px; color:var(--ink); }
  .trc .pc-badge .ico{ color:var(--blue-700); }
  .trc .pc-badge.ok .ico{ color:#1c9d5e; }

  /* PRICING */
  .trc .pricing{ background:var(--bg-soft); border-top:1px solid var(--line); }
  .trc .price-intro{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-bottom:40px; }
  .trc .pill{ background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 18px; font-weight:600; font-size:14px; display:flex; gap:8px; align-items:center; color:var(--ink); }
  .trc .pill .ico{ color:var(--blue); }
  .trc .price-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; max-width:880px; margin:0 auto; }
  .trc .plan{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; }
  .trc .plan.feature{ border:2px solid var(--blue); position:relative; }
  .trc .plan.feature .tagtop{ position:absolute; top:-13px; left:30px; background:var(--blue); color:#fff; font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px; }
  .trc .plan h3{ font-size:22px; display:flex; align-items:center; gap:10px; color:var(--ink); }
  .trc .plan h3 .ico{ color:var(--blue); }
  .trc .plan .priceline{ display:flex; justify-content:space-between; padding:14px 0; border-bottom:1px solid var(--line); font-size:15px; color:var(--ink); }
  .trc .plan .priceline:last-of-type{ border-bottom:0; }
  .trc .plan .grp{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-700); font-weight:700; margin:16px 0 4px; }
  .trc .plan .gst{ font-size:13px; color:var(--soft); margin-top:14px; }

  /* FINAL */
  .trc .final{ background:var(--blue); color:#fff; text-align:center; }
  .trc .final h2{ font-size:clamp(30px,4vw,46px); color:#fff; }
  .trc .final p{ font-size:19px; color:rgba(255,255,255,.92); margin:16px auto 30px; max-width:46ch; }
  .trc .final .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
  .trc .final .btn-primary{ background:#fff; color:var(--blue-700); }
  .trc .final .btn-primary:hover{ background:#eaf7fd; }
  .trc .final .btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.55); }
  .trc .final .btn-ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

  /* FORM */
  .trc .form-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:54px; align-items:start; }
  .trc .form-aside h2{ font-size:clamp(28px,3.4vw,40px); margin-bottom:16px; color:var(--ink); }
  .trc .form-aside p{ color:var(--soft); font-size:17px; margin-bottom:24px; }
  .trc .contact-row{ display:flex; align-items:center; gap:14px; padding:14px 0; border-top:1px solid var(--line); }
  .trc .contact-row .ic{ width:44px; height:44px; border-radius:12px; background:var(--blue-50); display:grid; place-items:center; color:var(--blue-700); flex:none; }
  .trc .contact-row b{ display:block; font-size:15px; color:var(--ink); } .trc .contact-row span{ font-size:14px; color:var(--soft); }
  .trc form{ color-scheme:light; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }
  .trc .field{ margin-bottom:18px; }
  .trc .field label{ display:block; font-weight:600; font-size:14px; margin-bottom:7px; color:var(--ink); }
  .trc .field input,.trc .field select,.trc .field textarea{ width:100%; border:1px solid var(--line); border-radius:12px; padding:13px 15px; font:inherit; font-size:15px; background:var(--bg-soft); transition:.15s; color:var(--ink); }
  .trc .field input:focus,.trc .field select:focus,.trc .field textarea:focus{ outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 4px var(--blue-50); }
  .trc .field textarea{ resize:vertical; min-height:120px; }
  .trc .two{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .trc .robot{ display:flex; align-items:center; gap:10px; font-size:14px; color:var(--soft); margin:6px 0 18px; }
  .trc .robot input{ width:18px; height:18px; accent-color:var(--blue); }
  .trc form .btn-primary{ width:100%; justify-content:center; }
  .trc form .btn-primary:disabled{ opacity:.6; cursor:default; }
  .trc .field select{ color-scheme:light; -webkit-appearance:none; appearance:none; background-color:var(--bg-soft); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%2348606c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1.5l5 5 5-5'/></svg>"); background-repeat:no-repeat; background-position:right 14px center; padding-right:40px; }
  .trc .hp{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
  .trc .form-err{ background:#fff4e6; color:#9a5b00; border-radius:12px; padding:10px 14px; font-size:14px; margin-bottom:12px; }
  .trc .form-done{ display:flex; gap:13px; align-items:center; background:#e6f8ee; border-radius:14px; padding:20px 22px; }
  .trc .form-done-ico{ width:38px; height:38px; flex:none; border-radius:50%; background:#fff; display:grid; place-items:center; color:#1c9d5e; }
  .trc .form-done p{ margin:0; font-weight:700; font-size:16px; color:#14653f; }

  /* FOOTER */
  .trc .foot{ background:var(--ink); color:#cfdbe2; padding:48px 0; }
  .trc .foot-inner{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; }
  .trc .foot .brand img{ height:28px; filter:brightness(0) invert(1); opacity:.95; }
  .trc .foot small{ font-size:13px; color:#8ea3ad; }
  .trc .foot-links{ display:flex; gap:22px; font-size:14px; }
  .trc .foot-links a:hover{ color:#fff; }

  @media(max-width:1024px){
    .trc .hero-grid{ display:flex; flex-direction:column; align-items:flex-start; }
    .trc .h-eyebrow{ order:1; } .trc .h-title{ order:2; width:100%; } .trc .h-lead{ order:3; width:100%; }
    .trc .h-feats{ order:4; }
    .trc .h-cta{ order:5; }
    .trc .hero-art{ order:6; margin-top:30px; width:100%; max-width:420px; align-self:flex-start; }
  }
  @media(max-width:880px){
    .trc .area-grid,.trc .form-grid{ grid-template-columns:1fr; gap:40px; }
    .trc .cards{ grid-template-columns:1fr; }
    .trc .why-grid,.trc .price-grid,.trc .two{ grid-template-columns:1fr; }
    .trc section{ padding:64px 0; }
  }
  @media(max-width:560px){
    .trc section{ padding:52px 0; }
    .trc .hero{ padding:58px 0 46px; }
    .trc .hero .lead{ font-size:18px; }
    .trc .hero-cta{ gap:10px; }
    .trc .hero-cta .btn{ flex:1 1 auto; justify-content:center; }
    .trc .trust{ gap:14px 18px; margin-top:24px; }
    .trc .chips-band{ padding:40px 0; }
    .trc .center{ margin-bottom:36px; }
    .trc .center h2{ font-size:26px; }
    .trc .center p{ font-size:16px; }
    .trc .cards{ gap:18px; }
    .trc .feat{ padding:22px; }
    .trc .feat.wide{ flex-direction:column; text-align:left; }
    .trc .price-grid{ gap:18px; }
    .trc .plan{ padding:24px; }
    .trc form{ padding:24px; }
    .trc .foot-inner{ flex-direction:column; align-items:flex-start; gap:16px; }
    /* Hero art card spans the same width as the hero text/buttons on phones. */
    .trc .hero-art{ max-width:none; }
    .trc .hero-card{ width:100%; }
    /* iOS Safari auto-zooms on focus of any input under 16px and never zooms back. */
    .trc .pc-input,.trc .field input,.trc .field select,.trc .field textarea{ font-size:16px; }
  }
  .trc .x-narrow{ max-width:800px; }
  .trc section.x-tint{ background:var(--blue-50); }
  .trc .x-tgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .trc .x-tcard{ margin:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px; box-shadow:var(--shadow); }
  .trc .x-stars{ display:flex; gap:2px; font-size:16px; margin-bottom:12px; }
  .trc .x-stars span{ color:var(--line); } .trc .x-stars .on{ color:#f5a623; }
  .trc .x-tcard blockquote{ margin:0 0 16px; font-size:16px; line-height:1.6; color:var(--ink); }
  .trc .x-tcard figcaption b{ font-size:15px; color:var(--ink); display:block; }
  .trc .x-tcard figcaption span{ font-size:13px; color:var(--soft); }
  .trc .x-steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .trc .x-step{ position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px 26px 28px; text-align:center; }
  .trc .x-stepnum{ position:absolute; top:-16px; left:50%; transform:translateX(-50%); width:34px; height:34px; border-radius:50%; background:var(--blue); color:#fff; font-weight:700; display:grid; place-items:center; }
  .trc .x-stepic{ display:grid; place-items:center; width:60px; height:60px; border-radius:16px; background:var(--blue-50); color:var(--blue-700); margin:6px auto 16px; }
  .trc .x-step h3{ font-size:20px; color:var(--ink); margin-bottom:8px; }
  .trc .x-step p{ color:var(--soft); font-size:15px; }
  .trc .x-faq{ display:flex; flex-direction:column; gap:10px; }
  .trc .x-faqitem{ background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; }
  .trc .x-faqq{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; background:none; border:0; cursor:pointer; padding:18px 20px; font-weight:700; font-size:16px; color:var(--ink); text-align:left; }
  .trc .x-faqplus{ position:relative; width:16px; height:16px; flex:none; }
  .trc .x-faqplus::before,.trc .x-faqplus::after{ content:""; position:absolute; background:var(--blue); border-radius:2px; }
  .trc .x-faqplus::before{ left:0; top:7px; width:16px; height:2px; }
  .trc .x-faqplus::after{ left:7px; top:0; width:2px; height:16px; transition:transform .2s; }
  .trc .x-faqitem.open .x-faqplus::after{ transform:scaleY(0); }
  .trc .x-faqa{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .24s ease; }
  .trc .x-faqitem.open .x-faqa{ grid-template-rows:1fr; }
  .trc .x-faqa-in{ overflow:hidden; }
  .trc .x-faqa p{ margin:0; padding:0 20px 18px; color:var(--soft); font-size:15px; line-height:1.6; }
  .trc .x-team{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
  .trc .x-tm{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; text-align:center; box-shadow:var(--shadow); }
  .trc .x-av{ width:62px; height:62px; border-radius:50%; display:grid; place-items:center; margin:0 auto 14px; font-weight:700; font-size:22px; color:#fff; background:var(--blue); }
  .trc .x-av[data-i="1"]{ background:#27b083; } .trc .x-av[data-i="2"]{ background:#f0954b; } .trc .x-av[data-i="3"]{ background:#5b8dff; }
  .trc .x-tm b{ font-size:18px; color:var(--ink); display:block; }
  .trc .x-role{ font-size:13px; color:var(--blue-700); font-weight:700; display:block; margin:2px 0 10px; }
  .trc .x-tm p{ color:var(--soft); font-size:14.5px; }
  .trc .x-sup{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .trc .x-sup-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:30px; }
  .trc section.x-tint .x-sup-card{ border-color:#fff; box-shadow:var(--shadow); }
  .trc .x-sup-top{ display:flex; align-items:center; gap:15px; margin-bottom:16px; }
  .trc .x-sup-ic{ width:56px; height:56px; flex:none; border-radius:16px; background:var(--blue-50); color:var(--blue-700); display:grid; place-items:center; }
  .trc .x-sup-ht{ display:flex; flex-direction:column; gap:3px; }
  .trc .x-sup-ht h3{ font-size:21px; color:var(--ink); line-height:1.12; }
  .trc .x-sup-tag{ font-weight:700; font-size:13.5px; color:var(--blue-700); }
  .trc .x-sup-body{ color:var(--soft); font-size:15.5px; margin-bottom:18px; }
  .trc .x-sup-points{ list-style:none; display:flex; flex-direction:column; gap:11px; }
  .trc .x-sup-points li{ display:flex; gap:11px; align-items:flex-start; font-size:15px; color:var(--ink); }
  .trc .x-sup-points .ico{ color:#1c9d5e; flex:none; margin-top:3px; }
  @media(max-width:760px){ .trc .x-sup{ grid-template-columns:1fr; } }
  .trc .x-sup-where{ position:relative; overflow:hidden; margin-top:24px; border-radius:var(--radius); padding:34px 36px;
    background:linear-gradient(150deg,var(--blue),var(--blue-700)); color:#fff; }
  .trc .x-sup-where-bg{ position:absolute; left:18px; bottom:-46px; color:#fff; opacity:.065; transform:rotate(-5deg); transform-origin:bottom left; line-height:0; pointer-events:none; z-index:0; }
  .trc .x-sup-where-grid{ position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; align-items:start; }
  .trc .x-sup-where-intro h3{ color:#fff; font-size:23px; line-height:1.14; }
  .trc .x-sup-where-intro p{ color:rgba(255,255,255,.9); font-size:15.5px; margin-top:10px; }
  .trc .x-sup-checker{ background:#fff; border-radius:16px; padding:22px; transition:background-color .45s ease; box-shadow:var(--shadow); }
  .trc .x-sup-checker.is-onsite{ background:#e6f8ee; }
  .trc .x-sup-checker.is-remote{ background:var(--blue-50); }
  .trc .x-sup-checker.is-invalid{ background:#fff4e6; }
  @media(max-width:760px){ .trc .x-sup-where{ padding:26px 22px; } .trc .x-sup-where-grid{ grid-template-columns:minmax(0,1fr); gap:22px; } .trc .x-sup-where-bg{ display:none; } }
  .trc .x-trust{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
  .trc .x-tb{ display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:11px 18px; font-weight:600; font-size:15px; color:var(--ink); }
  .trc .x-tb .ico{ color:var(--blue-700); }
  .trc .x-plat{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; margin-top:26px; padding-top:24px; border-top:1px solid var(--line); }
  .trc .x-plat-label{ font-size:14px; color:var(--soft); font-weight:600; }
  .trc .x-plat-list{ display:flex; gap:10px; flex-wrap:wrap; }
  .trc .x-pl{ font-weight:600; font-size:15px; color:var(--ink); background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:8px 14px; }
  @media(max-width:880px){ .trc .x-tgrid,.trc .x-steps,.trc .x-team{ grid-template-columns:1fr; } }
`;
  document.head.appendChild(s);
})();

function calmAccent(text) {
  return String(text == null ? "" : text).split(/(\*[^*\n]+\*)/g).map((chunk, i) =>
    /^\*[^*\n]+\*$/.test(chunk)
      ? <span key={i} className="hl">{chunk.slice(1, -1)}</span>
      : <React.Fragment key={i}>{chunk}</React.Fragment>);
}
const CI = (name, size, sw) => window.TRIcon(name, { size: size || 20, sw: sw || 2, className: "ico" });
const calmWrap = (theme, children) => (
  <div className="trc" style={{ "--trc-hw": (theme && theme.headlineWeight) || 700 }}>{children}</div>
);
const CHECK = <svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M20 6 9 17l-5-5" /></svg>;

function CalmNav({ content, theme }) {
  const [menu, setMenu] = useCalmState(false);
  const links = content.links || [];
  return calmWrap(theme, (
    <header className="nav">
      <div className="wrap nav-inner">
        <a className="brand" href="#top" aria-label="TechReady home"><img src="assets/tech-ready-logo.svg?v=36" alt="TechReady" /></a>
        <nav className="nav-links">{links.map((l, i) => <a key={i} href={"#" + (l.target || "")}>{l.label}</a>)}</nav>
        <a href="#contact" className="btn btn-primary nav-cta">{CI("phoneCall", 18)}{content.cta}</a>
        <button className="nav-burger" type="button" aria-label="Menu" aria-expanded={menu} onClick={() => setMenu((m) => !m)}><span /><span /><span /></button>
      </div>
      <div className={"nav-mobile" + (menu ? " open" : "")}>
        {links.map((l, i) => <a key={i} href={"#" + (l.target || "")} onClick={() => setMenu(false)}>{l.label}</a>)}
        <a href="#contact" className="btn btn-primary" onClick={() => setMenu(false)}>{CI("phoneCall", 18)}{content.cta}</a>
      </div>
    </header>
  ));
}

function CalmHero({ content, theme }) {
  return calmWrap(theme, (
    <React.Fragment>
      <section className="hero" id="top">
        <div className="wrap hero-grid">
          {content.eyebrow ? <span className="eyebrow h-eyebrow">{content.eyebrow}</span> : null}
          <h1 className="h-title">{calmAccent(content.headline)}</h1>
          {content.lead ? <p className="lead h-lead">{content.lead}</p> : null}
          <div className="hero-art">
            <div className="blob" />
            <div className="hero-card">
              {(content.bubbles || []).map((b, i) => (
                <div className="row" key={i}>
                  <span className="dot">{CI(b.icon, 20)}</span>
                  <div><div className="t">{b.title}</div><div className="sld">{b.sub}</div></div>
                  <span className="ok">{CHECK}</span>
                </div>
              ))}
            </div>
          </div>
          <div className="hero-cta h-cta">
            <a {...window.TR_callHref(content.phone)} className="btn btn-primary">{CI("phoneCall", 18)}{content.primaryCta}</a>
            <a href="#contact" className="btn btn-ghost">{content.secondaryCta}</a>
          </div>
          {(content.features || []).length > 0 && (
            <div className="trust h-feats">{content.featuresLabel ? <span className="feat-label">{content.featuresLabel}</span> : null}{content.features.map((f, i) => <span key={i}>{CI(f.icon, 18)}{f.label}</span>)}</div>
          )}
        </div>
      </section>
      {(content.technologies || []).length > 0 && (
        <div className="chips-band">
          <div className="wrap">
            <p className="chips-head">{content.techHeading || "Everything we help with"}</p>
            <div className="chips">
              {content.technologies.map((t, i) => <span className="chip" key={i}>{CI(t.icon, 17)}{t.label}</span>)}
            </div>
          </div>
        </div>
      )}
    </React.Fragment>
  ));
}

function CalmHelp({ content, theme }) {
  return calmWrap(theme, (
    <section id="help">
      <div className="wrap">
        <div className="center">
          {content.eyebrow ? <span className="eyebrow">{content.eyebrow}</span> : null}
          <h2>{content.heading}</h2>
          {content.sub ? <p>{content.sub}</p> : null}
        </div>
        <div className="cards">
          {(content.cards || []).map((c, i) => (
            <article className="card" key={i}>
              <div className="ph"><span className="glyph">{CI(c.icon, 30)}</span></div>
              <div className="body"><h3>{c.title}</h3><p>{c.body}</p></div>
            </article>
          ))}
        </div>
      </div>
    </section>
  ));
}

function CalmWhy({ content, theme }) {
  return calmWrap(theme, (
    <section className="why" id="why">
      <div className="wrap">
        {content.bgIcon ? <span className="why-bg" aria-hidden="true">{CI(content.bgIcon, 380, 1)}</span> : null}
        <div className="center">
          {content.eyebrow ? <span className="eyebrow">{content.eyebrow}</span> : null}
          <h2>{content.heading}</h2>
          {content.lead ? <p>{content.lead}</p> : null}
        </div>
        <div className="why-grid">
          {(content.rows || []).map((r, i) => (
            <div className="feat" key={i}>
              <span className="ic">{CI(r.icon, 24)}</span>
              <div><h3>{r.title}</h3><p>{r.body}</p></div>
            </div>
          ))}
        </div>
        {(content.credentials || []).length > 0 && (
          <div className="why-creds">
            {content.credentials.map((c, i) => (
              <span className="why-cred" key={i}>{CI(c.icon, 17)}{c.label}</span>
            ))}
          </div>
        )}
      </div>
    </section>
  ));
}

function CalmArea({ content, theme }) {
  const [pc, setPc] = useCalmState("");
  const [res, setRes] = useCalmState(null);
  const approved = (content.approvedPostcodes || []).map((p) => String(p).trim());
  const check = (e) => { e.preventDefault(); const v = pc.trim(); if (!/^\d{3,4}$/.test(v)) { setRes("invalid"); return; } setRes(approved.indexOf(v) >= 0 ? "onsite" : "remote"); };
  return calmWrap(theme, (
    <section id="area">
      <div className="wrap area-grid">
        <div className="map">
          <svg className="roads" viewBox="0 0 200 150" preserveAspectRatio="none"><g stroke="#fff" strokeWidth="2" fill="none"><path d="M0 40h200M0 90h200M40 0v150M120 0v150" /></g></svg>
          <div className="water" /><div className="zone" /><div className="pin" />
          <svg className="cbd-city" viewBox="0 0 48 40" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
            <path d="M2 38h44" />
            <path d="M6 38V20h10v18" /><path d="M16 38V8h14v30" /><path d="M30 38V16h12v22" />
            <path d="M9 25h1M12 25h1M9 30h1M12 30h1" />
            <path d="M20 14h1.5M25 14h1.5M20 20h1.5M25 20h1.5M20 26h1.5M25 26h1.5M20 32h1.5M25 32h1.5" />
            <path d="M34 22h1.5M38 22h1.5M34 28h1.5M38 28h1.5M34 34h1.5M38 34h1.5" />
          </svg>
        </div>
        <div className="area">
          {content.eyebrow ? <span className="eyebrow">{content.eyebrow}</span> : null}
          <h2>{content.heading}</h2>
          {content.body ? <p>{content.body}</p> : null}
          {content.note ? <div className="note">{content.note}</div> : null}
          {(content.checkHeading || (content.approvedPostcodes || []).length > 0) && (
            <div className={"pc-check" + (res ? " is-" + res : "")}>
              {content.checkHeading ? <div className="pc-h">{content.checkHeading}</div> : null}
              <form className="pc-form" onSubmit={check}>
                <input className="pc-input" value={pc} inputMode="numeric" aria-label="Postcode" placeholder="Your postcode" maxLength={4}
                  onChange={(e) => { setPc(e.target.value.replace(/\D/g, "").slice(0, 4)); setRes(null); }} />
                <button className="pc-btn" type="submit">Check</button>
              </form>
              <div className={"pc-reveal" + (res ? " open" : "")}>
                <div className="pc-reveal-in">
                  {res === "invalid" && <div className="pc-result invalid">Please enter a valid 4-digit postcode.</div>}
                  {res === "onsite" && (
                    <div className="pc-result onsite">
                      <div className="pc-badges">
                        <span className="pc-badge ok">{CI("home", 16)}On-site visits</span>
                        <span className="pc-badge ok">{CI("laptop", 16)}Remote support</span>
                      </div>
                      {content.onsiteMsg ? <p>{content.onsiteMsg}</p> : null}
                    </div>
                  )}
                  {res === "remote" && (
                    <div className="pc-result remote">
                      <div className="pc-badges"><span className="pc-badge">{CI("laptop", 16)}Remote support</span></div>
                      {content.remoteMsg ? <p>{content.remoteMsg}</p> : null}
                      {content.outsideNote ? <p className="pc-fine">{content.outsideNote}</p> : null}
                    </div>
                  )}
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  ));
}

function CalmPricing({ content, theme }) {
  return calmWrap(theme, (
    <section className="pricing" id="pricing">
      <div className="wrap">
        <div className="center">
          {content.eyebrow ? <span className="eyebrow">{content.eyebrow}</span> : null}
          <h2>{content.heading}</h2>
        </div>
        {(content.badges || []).length > 0 && (
          <div className="price-intro">
            {content.badges.map((b, i) => <span className="pill" key={i}>{CI(b.icon, 16)}{b.label}</span>)}
          </div>
        )}
        <div className="price-grid">
          {(content.plans || []).map((p, i) => (
            <div className={"plan" + (p.featured === "yes" ? " feature" : "")} key={i}>
              {p.featured === "yes" && p.tag ? <span className="tagtop">{p.tag}</span> : null}
              <h3>{CI(p.icon, 22)}{p.title}</h3>
              <p className="grp">Weekdays</p>
              <div className="priceline"><span>First hour</span><b>{p.weekdayHour}</b></div>
              <div className="priceline"><span>Each extra 30 min</span><b>{p.weekdayHalf}</b></div>
              <p className="grp">Weekends &amp; public holidays</p>
              <div className="priceline"><span>First hour</span><b>{p.weekendHour}</b></div>
              <div className="priceline"><span>Each extra 30 min</span><b>{p.weekendHalf}</b></div>
              {p.note ? <p className="gst">{p.note}</p> : null}
            </div>
          ))}
        </div>
      </div>
    </section>
  ));
}

function CalmFinalCta({ content, theme }) {
  return calmWrap(theme, (
    <section className="final">
      <div className="wrap">
        <h2>{content.heading}</h2>
        {content.body ? <p>{content.body}</p> : null}
        <div className="hero-cta">
          <a {...window.TR_callHref(content.phone)} className="btn btn-primary">{CI("phoneCall", 18)}{content.primaryCta}</a>
          <a href="#contact" className="btn btn-ghost">{content.secondaryCta}</a>
        </div>
      </div>
    </section>
  ));
}

function CalmContact({ content, theme }) {
  const [sent, setSent] = useCalmState(false);
  return calmWrap(theme, (
    <section id="contact">
      <div className="wrap form-grid">
        <div className="form-aside">
          {content.eyebrow ? <span className="eyebrow">{content.eyebrow}</span> : null}
          <h2>{content.heading}</h2>
          {content.body ? <p>{content.body}</p> : null}
          {(content.methods || []).map((m, i) => (
            <div className="contact-row" key={i}>
              <span className="ic">{CI(m.icon, 20)}</span>
              <div><b>{m.label}</b><span>{(m.value||'').indexOf('@')>=0 ? window.TR_ObfEmail(m.value) : /call|phone|mobile|tel/i.test(m.label||'') ? window.TR_ObfPhone(m.value) : m.value}</span></div>
            </div>
          ))}
        </div>
        {React.createElement(window.TRContactForm, { content })}
      </div>
    </section>
  ));
}

function CalmFooter({ content, theme }) {
  return calmWrap(theme, (
    <footer className="foot">
      <div className="wrap foot-inner">
        <a className="brand" href="#top" aria-label="TechReady home"><img src="assets/tech-ready-logo.svg?v=36" alt="TechReady" /></a>
        <div className="foot-links">{(content.links || []).map((l, i) => <a key={i} href={"#" + (l.target || "")}>{l.label}</a>)}</div>
        <small>{content.copyright}</small>
      </div>
    </footer>
  ));
}

window.CMS.defineSkin("calm", {
  label: "Calm & Clear",
  components: {
    nav: CalmNav, hero: CalmHero, help: CalmHelp, why: CalmWhy,
    pricing: CalmPricing, finalcta: CalmFinalCta, contact: CalmContact, footer: CalmFooter,
    testimonials: (p) => calmWrap(p.theme, React.createElement(window.TRTestimonials, p)),
    process: (p) => calmWrap(p.theme, React.createElement(window.TRProcess, p)),
    support: (p) => calmWrap(p.theme, React.createElement(window.TRSupport, p)),
    faq: (p) => calmWrap(p.theme, React.createElement(window.TRFaq, p)),
    about: (p) => calmWrap(p.theme, React.createElement(window.TRAbout, p)),
  },
});