/* ====================================================================
   MT&T HOUSE STYLE — 8 post templates (Peter, 19 Oct 2026)
   Built from the 9m x 24m Framed Marquee flyer: photo on top, teal wave,
   big title + script line, teal-circle icon panel, teal price band,
   footer bar with phone / email / address.
   Colours: MT&T blue, grey and teal (Peter: "retain blue, grey and teal").
   Every size is in cqmin so one design fits 1:1, 9:16, 4:3 and 1.91:1.
   ==================================================================== */
.cv.hs{
  --hs-blue:#163454; --hs-blue2:#1f4e8c; --hs-teal:#127179; --hs-teal-dk:#0b4f55; --hs-teal-lt:#4C7A76;
  --hs-grey:#eceef1; --hs-grey-dk:#5b6270; --hs-ink:#16202c; --hs-gold:#e1a93b;
  container-type:size; display:flex; flex-direction:column; background:#fff;
  font-family:Inter,system-ui,sans-serif; color:var(--hs-ink);
}
.cv.hs *{box-sizing:border-box}
.cv.hs .hs-media{position:relative;flex:0 0 43%;background:#cfd6dc center/cover no-repeat;overflow:hidden}
.cv.hs .hs-media .ph{position:absolute;background:#cfd6dc center/cover no-repeat}
.cv.hs .hs-body{flex:1;min-height:0;overflow:hidden;position:relative;padding:3.2cqmin 5cqmin 2.6cqmin}
.cv.hs .hs-wave{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:9cqmin;display:block}

/* brand badge (logo + name) */
.cv.hs .hs-brand{position:absolute;top:3.4cqmin;left:3.4cqmin;z-index:2;display:flex;align-items:center;gap:1.6cqmin;
  background:rgba(255,255,255,.94);border-radius:1.8cqmin;padding:1.4cqmin 2.4cqmin 1.4cqmin 1.8cqmin;box-shadow:0 .6cqmin 2cqmin rgba(0,0,0,.18)}
.cv.hs .hs-brand img{height:7.4cqmin;width:auto;display:block}
.cv.hs .hs-brand b{white-space:nowrap;display:block;font-weight:800;font-size:3.6cqmin;letter-spacing:.06em;color:var(--hs-teal-dk);line-height:1}
.cv.hs .hs-brand span{white-space:nowrap;display:block;font-weight:800;font-size:2.5cqmin;letter-spacing:.12em;color:var(--hs-teal);margin-top:.5cqmin;line-height:1}
.cv.hs .hs-slogan{position:absolute;top:3cqmin;right:3.4cqmin;z-index:2;font-family:'Dancing Script',cursive;font-weight:700;
  font-size:5.4cqmin;line-height:1;color:#fff;text-align:right;text-shadow:0 .4cqmin 1.6cqmin rgba(0,0,0,.55);transform:rotate(-6deg);white-space:nowrap}
.cv.hs .hs-pill{position:absolute;z-index:2;background:var(--hs-teal);color:#fff;font-weight:800;font-size:2.6cqmin;letter-spacing:.14em;
  text-transform:uppercase;padding:1.3cqmin 2.6cqmin;border-radius:99px;white-space:nowrap}

/* shared text */
.cv.hs .t-big{font-family:Fraunces,Georgia,serif;font-weight:800;color:var(--hs-blue);line-height:.95;letter-spacing:-.01em}
.cv.hs .t-script{font-family:'Dancing Script',cursive;font-weight:700;color:var(--hs-teal);line-height:1}
.cv.hs .t-caps{font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--hs-ink)}
.cv.hs .t-eyebrow{font-weight:800;text-transform:uppercase;letter-spacing:.16em;color:var(--hs-teal);font-size:2.5cqmin}
.cv.hs .t-soft{color:var(--hs-grey-dk)}

/* icon circle + list */
.cv.hs .ic{flex:none;width:6.4cqmin;height:6.4cqmin;border-radius:50%;background:var(--hs-teal);color:#fff;display:flex;align-items:center;justify-content:center}
.cv.hs .ic svg{width:58%;height:58%}
.cv.hs .feat{display:flex;align-items:center;gap:1.8cqmin}
.cv.hs .feat b{display:block;font-size:2.6cqmin;font-weight:800;color:var(--hs-blue);text-transform:uppercase;letter-spacing:.03em;line-height:1.05}
.cv.hs .feat span{display:block;font-size:2.35cqmin;color:var(--hs-ink);line-height:1.15}
.cv.hs .checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:.9cqmin 3cqmin;align-content:start}
.cv.hs .checks li{display:flex;gap:1.2cqmin;align-items:flex-start;font-size:2.7cqmin;font-weight:600;line-height:1.2}
.cv.hs .checks li i{flex:none;width:3.4cqmin;height:3.4cqmin;border-radius:50%;background:var(--hs-teal);color:#fff;display:flex;align-items:center;justify-content:center;margin-top:.1cqmin}
.cv.hs .checks li i svg{width:70%;height:70%}

/* price band + valid tag */
.cv.hs .band{display:inline-block;background:var(--hs-teal);color:#fff;padding:1.1cqmin 4cqmin 1.3cqmin 3cqmin;
  border-radius:1.2cqmin 5cqmin 1.6cqmin 4cqmin;transform:rotate(-1.2deg);box-shadow:0 .8cqmin 0 var(--hs-teal-dk)}
.cv.hs .band small{display:block;font-size:2.3cqmin;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.92}
.cv.hs .band b{display:block;font-family:Fraunces,Georgia,serif;font-size:6.2cqmin;white-space:nowrap;font-weight:800;line-height:1}
.cv.hs .valid{display:inline-flex;align-items:center;gap:1.2cqmin;background:var(--hs-gold);color:var(--hs-blue);font-weight:800;font-size:2.5cqmin;
  text-transform:uppercase;letter-spacing:.05em;padding:1.2cqmin 2.2cqmin;border-radius:1cqmin;line-height:1.1}
.cv.hs .valid svg{width:3.6cqmin;height:3.6cqmin;flex:none}
.cv.hs .ctabar{background:var(--hs-blue);color:#fff;text-align:center;font-weight:800;font-size:2.8cqmin;letter-spacing:.08em;text-transform:uppercase;
  padding:1.2cqmin 2cqmin;border-radius:1cqmin}

/* footer */
.cv.hs .hs-foot{flex:none;display:flex;align-items:center;gap:3cqmin;background:linear-gradient(90deg,var(--hs-teal-dk),var(--hs-teal) 60%,var(--hs-blue2));
  color:#fff;padding:1.8cqmin 4cqmin;border-top:.7cqmin solid var(--hs-gold)}
.cv.hs .hs-foot .ph{display:flex;align-items:center;gap:1.6cqmin;padding-right:3cqmin;border-right:.3cqmin solid rgba(255,255,255,.45)}
.cv.hs .hs-foot .ph .ring{width:6cqmin;height:6cqmin;border-radius:50%;border:.5cqmin solid #fff;display:flex;align-items:center;justify-content:center;flex:none}
.cv.hs .hs-foot .ph .ring svg{width:55%;height:55%}
.cv.hs .hs-foot .ph small{white-space:nowrap;display:block;font-size:2.2cqmin;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.92;line-height:1.1}
.cv.hs .hs-foot .ph b{display:block;font-size:4cqmin;font-weight:800;line-height:1.05;white-space:nowrap}
.cv.hs .hs-foot .ph b.ph-cell{font-size:2.6cqmin;font-weight:700;opacity:.92;margin-top:.3cqmin}
.cv.hs .hs-foot .ad{font-size:2.2cqmin;line-height:1.3;min-width:0}
.cv.hs .hs-foot .ad div{display:flex;gap:1cqmin;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cv.hs .hs-foot .ad svg{width:2.8cqmin;height:2.8cqmin;flex:none}
.cv.hs .hs-foot .ad i{display:block;font-weight:600;opacity:.95;margin-top:.3cqmin}

/* 1 · Special / promotion */
.cv.hs.t-hs-special .hs-body{display:grid;grid-template-columns:1.2fr 1fr;gap:3cqmin;padding-top:1.4cqmin}
.cv.hs.t-hs-special .sp-t{font-size:8.6cqmin;white-space:nowrap}
.cv.hs.t-hs-special .sp-s{font-size:7cqmin;margin:.2cqmin 0 .8cqmin;white-space:nowrap}
.cv.hs.t-hs-special .sp-sub{font-size:2.4cqmin;margin-bottom:1.8cqmin;line-height:1.3}
.cv.hs.t-hs-special .sp-r{display:flex;flex-direction:column;justify-content:center;gap:1.1cqmin;border-left:.35cqmin solid var(--hs-teal);padding-left:3cqmin}

/* 2 · Blog */
.cv.hs.t-hs-blog .hs-media{flex-basis:50%}
.cv.hs.t-hs-blog .hs-pill{top:3.6cqmin;right:3.4cqmin}
.cv.hs.t-hs-blog .hs-body{display:flex;flex-direction:column;gap:1.2cqmin}
.cv.hs.t-hs-blog .bl-t{font-size:6cqmin;line-height:1.02}
.cv.hs.t-hs-blog .bl-i{font-size:2.8cqmin;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cv.hs.t-hs-blog .bl-r{margin-top:auto;display:flex;align-items:center;gap:1.4cqmin;font-weight:800;font-size:2.8cqmin;color:var(--hs-teal-dk)}
.cv.hs.t-hs-blog .bl-r::after{content:"";flex:1;height:.4cqmin;background:var(--hs-teal);border-radius:9px}

/* 3 · General info / services */
.cv.hs.t-hs-info .hs-media{flex-basis:40%}
.cv.hs.t-hs-info .hs-body{display:flex;flex-direction:column;gap:1.4cqmin}
.cv.hs.t-hs-info .in-t{font-size:6.2cqmin}
.cv.hs.t-hs-info .in-s{font-size:2.7cqmin;line-height:1.35;margin-top:-.2cqmin}
.cv.hs.t-hs-info .grid4{display:grid;grid-template-columns:1fr 1fr;gap:1.1cqmin 3cqmin;flex:1;align-content:center}

/* 4 · New product launch */
.cv.hs.t-hs-launch .hs-media{flex-basis:44%;background:#fff}
.cv.hs.t-hs-launch .hs-media .ph.a{left:0;top:0;bottom:0;width:50%}
.cv.hs.t-hs-launch .hs-media .ph.b{right:0;top:0;bottom:0;width:calc(50% - .8cqmin)}
.cv.hs.t-hs-launch .ribbon{position:absolute;z-index:2;right:0;left:auto;width:max-content;top:3.4cqmin;background:var(--hs-blue);color:#fff;font-weight:800;font-size:3.6cqmin;letter-spacing:.06em;
  text-transform:uppercase;padding:1.6cqmin 3.4cqmin 1.6cqmin 5cqmin;border-radius:5cqmin 0 0 5cqmin;line-height:1.05;text-align:right;border-bottom:.7cqmin solid var(--hs-teal)}
.cv.hs.t-hs-launch .hs-body{display:flex;flex-direction:column;gap:1.8cqmin}
.cv.hs.t-hs-launch .la-t{font-size:5.6cqmin;text-transform:uppercase;line-height:1}
.cv.hs.t-hs-launch .la-row{display:flex;align-items:center;gap:3cqmin;flex-wrap:wrap}
.cv.hs.t-hs-launch .la-row .note{font-size:2.6cqmin;font-weight:700;color:var(--hs-grey-dk)}
.cv.hs.t-hs-launch .checks{grid-template-columns:1fr 1fr 1fr}

/* 5 · Discount */
.cv.hs.t-hs-discount .hs-media{flex-basis:37%}
.cv.hs.t-hs-discount .disc{position:absolute;z-index:3;right:5cqmin;top:26%;width:22cqmin;height:22cqmin;border-radius:50%;background:var(--hs-blue);color:#fff;
  border:1cqmin solid #fff;box-shadow:0 1cqmin 3cqmin rgba(0,0,0,.25);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.cv.hs.t-hs-discount .disc b{font-family:Fraunces,Georgia,serif;font-size:8.6cqmin;line-height:.9;font-weight:800}
.cv.hs.t-hs-discount .disc span{font-size:2.6cqmin;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-top:.6cqmin;color:#bfe3e5}
.cv.hs.t-hs-discount .hs-body{display:flex;flex-direction:column;gap:1.2cqmin;padding-right:28cqmin}
.cv.hs.t-hs-discount .di-t{font-size:5.8cqmin}
.cv.hs.t-hs-discount .di-s{font-size:2.7cqmin;font-weight:600}
.cv.hs.t-hs-discount .checks{grid-template-columns:1fr 1fr}
.cv.hs.t-hs-discount .di-on{font-size:2.7cqmin;font-weight:800;color:var(--hs-teal-dk);text-transform:uppercase;letter-spacing:.06em}

/* 6 · Service / refurbishment */
.cv.hs.t-hs-service .hs-media{flex-basis:38%;background:#fff}
.cv.hs.t-hs-service .hs-media .ph.a{left:0;top:0;bottom:0;width:58%}
.cv.hs.t-hs-service .hs-media .ph.b{right:0;top:0;bottom:0;width:calc(42% - .8cqmin)}
.cv.hs.t-hs-service .hs-body{display:flex;flex-direction:column;gap:1.3cqmin}
.cv.hs.t-hs-service .se-t{font-size:6cqmin}
.cv.hs.t-hs-service .se-s{font-size:2.7cqmin;line-height:1.35}
.cv.hs.t-hs-service .checks{margin:.6cqmin 0 auto}

/* 7 · Did you know / tip */
.cv.hs.t-hs-tip .hs-media{flex-basis:34%}
.cv.hs.t-hs-tip .hs-body{background:linear-gradient(160deg,var(--hs-teal) 0%,var(--hs-teal-dk) 70%,var(--hs-blue) 100%);color:#fff;
  display:flex;flex-direction:column;justify-content:center;gap:2cqmin;padding:3cqmin 6cqmin}
.cv.hs.t-hs-tip .tip-h{display:flex;align-items:center;gap:2.4cqmin}
.cv.hs.t-hs-tip .tip-h .ic{width:11cqmin;height:11cqmin;background:#fff;color:var(--hs-teal)}
.cv.hs.t-hs-tip .t-eyebrow{color:#bfe3e5;font-size:3cqmin}
.cv.hs.t-hs-tip .tip-q{font-family:Fraunces,Georgia,serif;font-weight:800;font-size:6.6cqmin;line-height:1.05}
.cv.hs.t-hs-tip .tip-a{font-size:3.4cqmin;line-height:1.45;color:#e8f4f5}
.cv.hs.t-hs-tip .hs-wave path:first-child{fill:var(--hs-teal)}

/* 8 · Recently delivered / project */
.cv.hs.t-hs-project .hs-media{flex-basis:52%;background:#fff}
.cv.hs.t-hs-project .hs-media .ph.a{left:0;top:0;bottom:0;width:62%}
.cv.hs.t-hs-project .hs-media .ph.b{right:0;top:0;height:calc(50% - .5cqmin);width:calc(38% - 1cqmin)}
.cv.hs.t-hs-project .hs-media .ph.c{right:0;bottom:0;height:calc(50% - .5cqmin);width:calc(38% - 1cqmin)}
.cv.hs.t-hs-project .hs-pill{bottom:8cqmin;left:3.4cqmin;background:var(--hs-blue)}
.cv.hs.t-hs-project .hs-body{display:flex;flex-direction:column;gap:1.2cqmin}
.cv.hs.t-hs-project .pr-t{font-size:6cqmin;line-height:1}
.cv.hs.t-hs-project .pr-w{display:flex;gap:1.2cqmin;align-items:center;font-size:2.9cqmin;font-weight:700;color:var(--hs-teal-dk)}
.cv.hs.t-hs-project .pr-w svg{width:3.4cqmin;height:3.4cqmin}
.cv.hs.t-hs-project .pr-q{font-family:'Dancing Script',cursive;font-weight:700;font-size:4.4cqmin;color:var(--hs-teal);line-height:1.1;margin-top:auto}

/* Portrait (Story / WhatsApp): more room, so the photo takes a bit less */
.canvas-story.cv.hs .hs-media, .canvas-wa.cv.hs .hs-media{flex-basis:50%}
.canvas-story.cv.hs .hs-body, .canvas-wa.cv.hs .hs-body{align-content:center;justify-content:center;padding-top:4cqmin;padding-bottom:4cqmin}
/* Wide (LinkedIn 1.91:1, Google 4:3): photo left, words right */
.canvas-li.cv.hs, .canvas-gb.cv.hs{display:grid;grid-template-columns:44% 1fr;grid-template-rows:1fr auto}
.canvas-li.cv.hs .hs-media, .canvas-gb.cv.hs .hs-media{grid-row:1;grid-column:1}
.canvas-li.cv.hs .hs-body, .canvas-gb.cv.hs .hs-body{grid-row:1;grid-column:2}
.canvas-li.cv.hs .hs-foot, .canvas-gb.cv.hs .hs-foot{grid-row:2;grid-column:1 / span 2}
.canvas-li.cv.hs .hs-wave, .canvas-gb.cv.hs .hs-wave{display:none}
.canvas-li.cv.hs.t-hs-special .hs-body, .canvas-gb.cv.hs.t-hs-special .hs-body{grid-template-columns:1fr}
.canvas-li.cv.hs.t-hs-special .sp-r, .canvas-gb.cv.hs.t-hs-special .sp-r{display:none}

/* ---- composer UI for the house style ---- */
.tpl-group{grid-column:1 / -1;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);margin:4px 0 -2px}
.tpl .thumb.hsthumb{aspect-ratio:auto;height:64px;flex-direction:column;gap:4px;text-align:center;line-height:1.15}
.tpl .thumb.hsthumb small{font-weight:600;font-size:9px;letter-spacing:.04em;opacity:.85;text-transform:none}
.hs-slots{display:flex;gap:6px;margin:0 0 8px}
.hs-slots button{padding:6px 11px;border-radius:99px;border:1.5px solid var(--line);background:#fff;font-size:11.5px;font-weight:600;color:var(--ink-soft)}
.hs-slots button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.design-for{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#e9f4f3;border:1.5px solid #127179;border-radius:12px;padding:12px 16px;margin-bottom:14px;font-size:13px}
.design-for b{color:#0b4f55}
.design-for .sp{flex:1}