:root{
  --navy:#06172c;
  --navy-2:#0b223c;
  --gold:#e5b751;
  --gold-dark:#c89632;
  --ink:#07162e;
  --muted:#667085;
  --line:#e8ebf0;
  --soft:#f7f8fa;
  --tb-blue:#1262ed;
  --tb-blue-dark:#084ac2;
  --tb-border:#dfe5ef;
  --tb-muted:#657188;
  --tb-radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:#fff}
.site-header{z-index:1030}
.navbar-brand{color:var(--ink)}
.brand-mark{display:grid;place-items:center;width:42px;height:42px;color:var(--gold-dark);font-size:2rem}
.brand-copy{display:flex;flex-direction:column;line-height:1}.brand-copy strong{letter-spacing:.04em;font-size:1.25rem}.brand-copy small{font-size:.62rem;letter-spacing:.13em;margin-top:.25rem;color:#536078}
.nav-link{color:#172238;font-size:.95rem}.nav-link:hover{color:var(--gold-dark)}
.btn{border-radius:.55rem;font-weight:600}.btn-gold{background:linear-gradient(135deg,#f3cf78,#dda83c);border-color:#dda83c;color:#20170a}.btn-gold:hover{background:#d9a239;border-color:#d9a239;color:#111}
.hero-section{background:radial-gradient(circle at 83% 25%,#153754 0,#0a223d 30%,#06172c 70%)}
.py-lg-6{padding-top:5rem!important;padding-bottom:5rem!important}.eyebrow{color:var(--gold);font-size:.78rem;font-weight:700;letter-spacing:.06em}.hero-section h1{line-height:1.04;letter-spacing:-.035em}.hero-section h1 span{color:var(--gold)}.text-white-75{color:rgba(255,255,255,.75)}
.hero-mini-benefits .col{display:flex;align-items:center;gap:.7rem;font-size:.87rem;color:rgba(255,255,255,.85)}.hero-mini-benefits i{color:var(--gold);font-size:1.2rem}
.preview-stage{position:relative;min-height:470px}.browser-preview{position:absolute;left:0;right:4rem;top:0;border:1px solid rgba(255,255,255,.35);border-radius:1rem;overflow:hidden;background:#fff}.browser-bar{height:36px;background:#e8edf2;display:flex;align-items:center;gap:7px;padding:0 14px}.browser-bar>span{width:9px;height:9px;border-radius:50%;background:#4d6477;flex:0 0 auto}.browser-bar>span:nth-child(2){background:#9cab75}.browser-bar>span:nth-child(3){background:#d7b95d}.demo-site{background:var(--preview-primary,var(--navy))}.demo-nav{height:58px;display:flex;align-items:center;gap:20px;padding:0 22px;color:#fff;font-size:.68rem}.demo-nav strong{margin-right:auto}.demo-nav button,.demo-copy a,.phone-inner button{border:0;border-radius:.35rem;background:var(--preview-accent,var(--gold));color:var(--preview-on-accent,#17110a);font-weight:700;padding:.55rem .85rem}.demo-hero{position:relative;display:grid;grid-template-columns:48% 52%;min-height:300px}.demo-copy{padding:36px 26px;color:#fff}.demo-copy small{color:var(--preview-accent,var(--gold));font-size:.65rem}.demo-copy h2{font-size:1.85rem;margin:.8rem 0}.demo-copy p,.demo-copy li{font-size:.75rem;color:rgba(255,255,255,.78)}.demo-copy ul{padding-left:1rem;margin-bottom:1.25rem}.demo-hero img{width:100%;height:100%;min-width:0;object-fit:cover;filter:brightness(.72);transition:opacity .35s ease}
.phone-preview{position:absolute;right:0;top:92px;width:155px;background:#111;border:5px solid #111;border-radius:1.8rem;padding:8px}.phone-notch{width:48%;height:10px;background:#111;border-radius:0 0 10px 10px;margin:-8px auto 4px}.phone-inner{min-height:300px;border-radius:1.2rem;background:linear-gradient(180deg,#081a30,#102c4b);padding:26px 14px;color:#fff}.phone-inner strong{display:block;font-size:.75rem}.phone-inner small{font-size:.48rem;color:var(--gold)}.phone-inner h3{font-size:1.2rem;margin-top:2.4rem}.phone-inner p{font-size:.66rem;color:rgba(255,255,255,.7)}.phone-inner button{width:100%;margin-top:1rem}
.floating-card{position:absolute;left:34%;bottom:0;display:flex;gap:14px;align-items:center;max-width:310px;padding:18px;border:1px solid rgba(229,183,81,.35);border-radius:.75rem;background:#10283f;color:#fff}.floating-card .clock{display:grid;place-items:center;flex:0 0 46px;height:46px;border:2px solid var(--gold);border-radius:50%;color:var(--gold);font-size:1.25rem}.floating-card strong,.floating-card small{display:block}.floating-card strong{font-size:.86rem;color:var(--gold)}.floating-card small{margin-top:.25rem;font-size:.7rem;color:rgba(255,255,255,.72)}
.preview-changing{opacity:.15!important}
.quick-benefits{background:#fff}.benefit-line{display:flex;align-items:center;justify-content:center;gap:1rem}.benefit-line i{font-size:1.65rem;color:var(--gold-dark)}.benefit-line span{font-weight:600;line-height:1.2}
.section-space{padding:4rem 0}.section-heading h2{font-size:1.55rem;font-weight:700}.trade-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:1rem}.trade-card{display:flex;min-height:118px;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;border:1px solid var(--line);border-radius:.7rem;background:#fff;box-shadow:0 8px 24px rgba(10,25,49,.04)}.trade-card i{font-size:2rem;color:#182339}.trade-card span{font-size:.82rem;font-weight:600}
.process-row{position:relative}.process-step{text-align:center;padding:0 1rem}.process-step>span{display:grid;place-items:center;width:30px;height:30px;margin:0 auto 1rem;border-radius:50%;background:var(--gold-dark);color:#fff;font-weight:700}.process-step>i{display:block;font-size:2rem;margin-bottom:.8rem}.process-step h3{font-size:1rem}.process-step p{font-size:.83rem;color:var(--muted)}
.pricing-card{padding:2.2rem;border-radius:.75rem;background:linear-gradient(145deg,#07192e,#0d2947);color:#fff;box-shadow:0 18px 44px rgba(7,25,46,.18)}.price{display:flex;align-items:baseline;gap:.3rem}.price strong{font-size:3.2rem;color:var(--gold)}.price span{font-size:1rem}.pricing-list{display:grid;gap:.65rem;margin:1.5rem 0}.pricing-list i{color:var(--gold);margin-right:.6rem}.extra-pages{border:1px solid var(--gold);border-radius:.45rem;padding:.55rem .8rem;text-align:center;color:var(--gold)}
.addons-panel{padding:2rem;border:1px solid var(--line);border-radius:.75rem;background:#fbfbfc}.addons-panel h2{font-size:1.45rem}.addon-card{display:flex;align-items:center;gap:1rem;height:100%;padding:1.1rem;border:1px solid var(--line);border-radius:.65rem;background:#fff}.addon-card i{font-size:1.6rem;color:#182339}.addon-card strong,.addon-card small{display:block}.addon-card small{font-size:.75rem;color:var(--muted);margin-top:.2rem}
.final-cta{position:relative;overflow:hidden;display:grid;grid-template-columns:220px 1fr 220px;align-items:center;gap:2rem;padding:2.4rem;border-radius:.8rem;background:linear-gradient(135deg,#06172c,#0c2745)}.final-cta h2{font-size:1.75rem}.final-cta p{color:rgba(255,255,255,.72)}.cta-art{display:flex;align-items:end;justify-content:center;gap:.8rem;color:rgba(229,183,81,.55);font-size:4.5rem}.cta-art i:last-child{font-size:3rem}.cta-points{display:flex;justify-content:center;flex-wrap:wrap;gap:1.25rem;font-size:.78rem;color:rgba(255,255,255,.75)}.cta-points i{color:var(--gold);margin-right:.4rem}

/* Embedded builder */
.hero-builder{min-height:720px;background:radial-gradient(circle at 88% 18%,#1a4568 0,#0a223d 34%,#06172c 74%)}
.builder-overline{display:block;color:var(--gold);font-weight:800;font-size:.72rem;letter-spacing:.1em;margin-bottom:.25rem}
.embedded-builder-panel{display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:1rem;background:#fff;box-shadow:0 24px 70px rgba(0,0,0,.22)}
.embedded-progress{background:#fff}.embedded-progress .progress{height:7px;background:#e7ecf4}.embedded-progress .progress-bar{background:var(--tb-blue)}
.step-kicker{color:var(--tb-blue);font-weight:800;font-size:.72rem;letter-spacing:.08em}
#builderForm{display:flex;min-height:0;flex:1;flex-direction:column}
.embedded-form-body{min-height:530px;max-height:620px;overflow-y:auto;color:var(--ink);scrollbar-width:thin}
.embedded-form-actions{background:rgba(255,255,255,.98);color:var(--ink)}
.step-heading{font-size:1.75rem;font-weight:750;letter-spacing:-.025em}.step-intro{color:var(--tb-muted);font-size:.92rem}
.option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.option-card{position:relative;display:block;border:1px solid var(--tb-border);border-radius:14px;padding:14px;background:#fff;color:var(--ink);cursor:pointer;transition:.18s ease;min-height:100px}
.option-card:hover{transform:translateY(-1px);border-color:#aabce0;box-shadow:0 8px 22px rgba(15,44,88,.08)}
.option-card.selected{border:2px solid var(--tb-blue);background:#f5f9ff;padding:13px}.option-card input{position:absolute;opacity:0;pointer-events:none}.option-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#eff5ff;color:var(--tb-blue);font-size:1.15rem;margin-bottom:9px}.option-title{font-weight:700;font-size:.9rem}.option-copy{color:var(--tb-muted);font-size:.76rem;margin-top:.2rem}.check-mark{position:absolute;right:9px;top:9px;display:none;width:21px;height:21px;border-radius:50%;background:var(--tb-blue);color:#fff;place-items:center;font-size:.68rem}.selected .check-mark{display:grid}
#heroBuilder .form-control,#heroBuilder .form-select{border-color:#cfd7e5;border-radius:10px;padding:.68rem .8rem;font-size:.9rem}#heroBuilder .form-control:focus,#heroBuilder .form-select:focus{border-color:var(--tb-blue);box-shadow:0 0 0 .2rem rgba(18,98,237,.12)}
#heroBuilder .form-label{color:var(--ink);font-size:.85rem}.upload-zone{border:2px dashed #cbd5e5;border-radius:14px;padding:24px;text-align:center;background:#fbfcfe;color:var(--ink)}.palette-row{display:flex;gap:8px}.swatch{width:26px;height:26px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #cad3df}.section-row{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--tb-border);border-radius:12px;background:#fff;color:var(--ink);font-size:.88rem}.drag-handle{color:#9aa5b7;font-size:1rem}.domain-result{border:1px solid var(--tb-border);border-radius:12px;padding:13px;color:var(--ink)}.status-available{color:#0c8d5f;font-weight:700}.review-list{border:1px solid var(--tb-border);border-radius:14px;overflow:hidden}.review-item{display:flex;justify-content:space-between;gap:16px;padding:13px;border-bottom:1px solid var(--tb-border);color:var(--ink)}.review-item:last-child{border-bottom:0}.price-box{background:var(--navy);color:#fff;border-radius:14px;padding:18px}.price-box .price{font-size:2rem;font-weight:800}.image-chip{border:1px solid var(--tb-border);border-radius:12px;padding:10px;background:#fff;color:var(--ink)}.image-thumb{aspect-ratio:16/10;border-radius:8px;background:linear-gradient(135deg,#dce8fa,#f5f8fd);display:grid;place-items:center;color:#8090aa;margin-bottom:8px}.resume-code{font-size:2rem;font-weight:800;letter-spacing:.12em;background:#f0f5ff;border-radius:14px;padding:18px;text-align:center;color:var(--tb-blue)}
.live-preview-wrap{position:relative;min-height:720px;padding:18px;border:1px solid rgba(255,255,255,.16);border-radius:1rem;background:rgba(6,23,44,.38);box-shadow:inset 0 1px rgba(255,255,255,.06)}
.live-preview-label{color:rgba(255,255,255,.82);font-size:.72rem;font-weight:800;letter-spacing:.06em}.preview-domain{max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gold);font-weight:600;letter-spacing:0;text-transform:none}
.live-preview-stage{position:relative;min-height:565px;margin-top:14px}.builder-browser{right:3.5rem;top:0}.builder-browser .browser-bar{height:38px}.browser-address{min-width:0;flex:1;margin-left:8px;padding:4px 10px;border-radius:6px;background:#f8fafc;color:#64748b;font-size:.58rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-demo-site{--preview-primary:#071a38;--preview-accent:#1262ed;--preview-on-accent:#fff;background:var(--preview-primary)}.live-demo-site .demo-nav button,.live-demo-site .demo-copy a{background:var(--preview-accent);color:var(--preview-on-accent,#fff)}.live-demo-site .demo-copy small{color:var(--preview-accent)}.live-demo-hero{min-height:340px}.live-demo-hero img{filter:brightness(.68) saturate(.92)}.preview-section-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.12)}.preview-section-strip span{padding:13px 8px;background:rgba(255,255,255,.05);color:rgba(255,255,255,.75);font-size:.61rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.builder-phone{right:0;top:125px;width:145px}.builder-phone .phone-inner{background:linear-gradient(180deg,var(--phone-primary,#081a30),color-mix(in srgb,var(--phone-primary,#081a30),white 12%))}.builder-phone .phone-inner small{color:var(--phone-accent,var(--gold))}.builder-phone .phone-inner button{background:var(--phone-accent,var(--gold))}.preview-summary-row{display:flex;flex-wrap:wrap;gap:8px}.preview-summary-row span{padding:6px 9px;border:1px solid rgba(255,255,255,.14);border-radius:999px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.78);font-size:.68rem}

@media (max-width:1199.98px){.trade-grid{grid-template-columns:repeat(4,1fr)}.preview-stage{min-height:430px}.browser-preview{right:3rem}.final-cta{grid-template-columns:140px 1fr 140px}.cta-art{font-size:3.5rem}.embedded-form-body{min-height:560px}.live-preview-wrap{min-height:730px}}
@media (max-width:991.98px){.py-lg-6{padding-top:3.5rem!important;padding-bottom:3.5rem!important}.navbar-collapse{padding-top:1rem}.preview-stage{min-height:450px;margin-top:1rem}.trade-grid{grid-template-columns:repeat(4,1fr)}.final-cta{grid-template-columns:1fr}.cta-art{display:none}.hero-builder{min-height:0}.embedded-form-body{min-height:auto;max-height:none;overflow:visible}.live-preview-wrap{min-height:660px}.live-preview-stage{min-height:530px}.builder-browser{right:4rem}}
@media (max-width:767.98px){.hero-section h1{font-size:3rem}.preview-stage{min-height:470px}.browser-preview{right:0}.phone-preview{right:8px;top:155px;width:130px}.floating-card{left:16px;right:16px;bottom:0;max-width:none}.demo-nav div,.demo-nav button{display:none}.demo-hero{grid-template-columns:1fr}.demo-copy{position:absolute;z-index:2;width:64%}.demo-hero img{min-height:320px}.trade-grid{grid-template-columns:repeat(2,1fr)}.section-space{padding:3rem 0}.benefit-line{justify-content:flex-start}.final-cta{padding:2rem 1.25rem}.final-cta h2{font-size:1.5rem}.live-preview-wrap{min-height:565px;padding:12px}.live-preview-stage{min-height:460px}.builder-browser{right:0}.builder-phone{display:none}.live-demo-hero{grid-template-columns:1fr;min-height:300px}.live-demo-hero .demo-copy{width:72%}.live-demo-hero img{min-height:300px}.preview-section-strip{grid-template-columns:repeat(2,1fr)}.embedded-builder-panel{border-radius:.8rem}.step-heading{font-size:1.55rem}}
@media (max-width:575.98px){.hero-section h1{font-size:2.6rem}.preview-stage{min-height:430px}.hero-intro .browser-preview{position:relative}.hero-intro .phone-preview{display:none}.floating-card{bottom:-35px}.trade-card{min-height:105px}.brand-copy strong{font-size:1.05rem}.builder-topbar{align-items:flex-start!important}.builder-topbar .btn{font-size:.72rem}.embedded-form-body{padding:16px!important}.option-grid{grid-template-columns:1fr}.option-card{min-height:88px}.live-preview-label{align-items:flex-start!important}.preview-domain{max-width:55%}.live-preview-wrap{min-height:530px}.live-preview-stage{min-height:430px}.builder-browser{position:relative}.browser-address{display:none}.live-demo-hero .demo-copy{width:78%;padding:28px 18px}.live-demo-hero .demo-copy h2{font-size:1.5rem}.preview-section-strip{display:none}.embedded-form-actions .btn{font-size:.78rem;padding:.5rem .65rem}}
.hero-section,section[id],footer[id]{scroll-margin-top:88px}

/* Interactive device previews */
.builder-browser{
  right:5.5rem;
  height:520px;
}
.desktop-preview-scroll{
  height:calc(100% - 38px);
  overflow-y:auto;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.3) transparent;
}
.preview-desktop-nav{
  position:sticky;
  top:0;
  z-index:8;
  min-height:58px;
  height:auto;
  background:var(--preview-primary,#071a38);
  box-shadow:0 1px 0 rgba(255,255,255,.1);
}
.preview-desktop-nav strong{
  max-width:30%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.preview-desktop-links{
  display:flex;
  min-width:0;
  flex:1;
  align-items:center;
  gap:12px;
  overflow-x:auto;
  scrollbar-width:none;
  white-space:nowrap;
}
.preview-desktop-links::-webkit-scrollbar{display:none}
.preview-desktop-links a{
  color:#fff;
  font-size:.6rem;
  text-decoration:none;
  opacity:.9;
  transition:opacity .18s ease,color .18s ease;
}
.preview-desktop-links a:hover,.preview-desktop-links a:focus{color:var(--preview-accent,#1262ed);opacity:1}
.demo-nav .preview-nav-cta{
  flex:0 0 auto;
  border:0;
  border-radius:.35rem;
  padding:.55rem .8rem;
  background:var(--preview-accent,#1262ed);
  color:var(--preview-on-accent,#fff);
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.preview-pages{background:#fff;color:#182238}
.preview-page-section{
  min-height:220px;
  padding:28px 30px;
  border-top:1px solid #e8edf4;
  background:#fff;
  scroll-margin-top:58px;
}
.preview-page-section:nth-child(even){background:#f6f8fb}
.preview-page-kicker{
  display:block;
  margin-bottom:8px;
  color:var(--preview-accent,var(--phone-accent,#1262ed));
  font-size:.59rem;
  font-weight:800;
  letter-spacing:.08em;
}
.preview-page-section h3{margin:0 0 10px;font-size:1.3rem;line-height:1.15}
.preview-page-section p{max-width:520px;margin:0 0 15px;color:#647084;font-size:.75rem;line-height:1.55}
.preview-service-cards,.preview-review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.preview-service-cards article{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:5px;
  padding:13px;
  border:1px solid #e0e6ef;
  border-radius:10px;
  background:#fff;
}
.preview-service-cards i{color:var(--preview-accent,#1262ed)}
.preview-service-cards strong{font-size:.68rem}.preview-service-cards span{color:#718096;font-size:.57rem;line-height:1.4}
.preview-stat-row,.preview-badge-row,.preview-area-pills{display:flex;flex-wrap:wrap;gap:8px}
.preview-stat-row span,.preview-badge-row span,.preview-area-pills span{
  padding:8px 10px;
  border:1px solid #dfe6ef;
  border-radius:999px;
  background:#fff;
  color:#465268;
  font-size:.62rem;
}
.preview-stat-row strong{display:block;color:#172238;font-size:.86rem}
.preview-gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.preview-gallery-grid img{width:100%;aspect-ratio:4/3;border-radius:8px;object-fit:cover}
.preview-review-grid{grid-template-columns:repeat(2,1fr)}
.preview-review-grid blockquote{margin:0;padding:14px;border-radius:10px;background:#fff;border:1px solid #e0e6ef;font-size:.68rem;line-height:1.5}
.preview-review-grid cite{display:block;margin-top:8px;color:#738096;font-size:.58rem;font-style:normal}
.preview-faqs details{padding:9px 0;border-bottom:1px solid #e0e6ef;font-size:.68rem}.preview-faqs summary{font-weight:700;cursor:pointer}.preview-faqs details p{margin:6px 0 0;font-size:.63rem}
.preview-emergency{background:color-mix(in srgb,var(--preview-accent,#1262ed),white 92%)!important}.preview-emergency>a{display:inline-flex;align-items:center;gap:6px;padding:9px 12px;border-radius:8px;background:var(--preview-accent,#1262ed);color:var(--preview-on-accent,#fff);font-size:.68rem;font-weight:700;text-decoration:none}
.preview-contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}.preview-contact-grid a{display:flex;min-width:0;align-items:center;gap:7px;padding:10px;border:1px solid #dfe6ef;border-radius:8px;color:#27354a;font-size:.62rem;text-decoration:none}.preview-contact-grid span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.preview-contact button{border:0;border-radius:8px;padding:9px 13px;background:var(--preview-accent,var(--phone-accent,#1262ed));color:var(--preview-on-accent,var(--phone-on-accent,#fff));font-size:.68rem;font-weight:700}

/* iPhone frame and proportions */
.phone-preview.iphone-preview{
  position:absolute;
  width:194px;
  height:420px;
  padding:7px;
  border:2px solid #2c3036;
  border-radius:42px;
  background:linear-gradient(145deg,#1b1e22,#08090b 62%,#2c3036);
  box-shadow:0 25px 50px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.12)!important;
  overflow:visible;
}
.phone-preview.iphone-preview::before{
  content:"";
  position:absolute;
  inset:4px;
  z-index:1;
  border:1px solid rgba(255,255,255,.09);
  border-radius:36px;
  pointer-events:none;
}
.phone-preview .phone-notch{
  position:absolute;
  z-index:20;
  top:13px;
  left:50%;
  width:72px;
  height:20px;
  margin:0;
  transform:translateX(-50%);
  border-radius:999px;
  background:#050608;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.iphone-side-button{position:absolute;z-index:0;width:3px;border-radius:3px;background:#1b1d20}
.iphone-side-button-top{left:-4px;top:82px;height:28px}.iphone-side-button-middle{left:-4px;top:121px;height:48px}.iphone-side-button-power{right:-4px;top:107px;height:66px}
.phone-preview .phone-inner{
  position:relative;
  z-index:2;
  display:flex;
  width:100%;
  height:100%;
  min-height:0;
  flex-direction:column;
  overflow:hidden;
  padding:0;
  border-radius:34px;
  background:#081a30;
  color:#fff;
}
.iphone-status{
  display:flex;
  height:32px;
  flex:0 0 32px;
  align-items:center;
  justify-content:space-between;
  padding:6px 13px 3px;
  color:#fff;
  font-size:.48rem;
  font-weight:700;
}
.iphone-status i{font-size:.52rem;margin-left:2px}
.iphone-home-indicator{
  position:absolute;
  z-index:30;
  left:50%;
  bottom:5px;
  width:62px;
  height:3px;
  transform:translateX(-50%);
  border-radius:99px;
  background:rgba(255,255,255,.8);
}
.builder-phone{right:0;top:72px;width:194px!important;height:420px}
.mobile-site-header{
  position:relative;
  z-index:15;
  display:flex;
  min-height:48px;
  flex:0 0 48px;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:7px 12px;
  background:var(--phone-primary,#081a30);
  border-top:1px solid rgba(255,255,255,.05);
  border-bottom:1px solid rgba(255,255,255,.11);
}
.mobile-site-header strong{
  display:block;
  max-width:118px;
  overflow:hidden;
  color:#fff;
  font-size:.56rem;
  line-height:1.18;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mobile-menu-toggle{
  display:flex;
  width:28px;
  height:28px;
  flex:0 0 28px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  background:rgba(255,255,255,.08);
}
.mobile-menu-toggle span{display:block;width:13px;height:1.5px;border-radius:2px;background:#fff;transition:.18s ease}
.mobile-menu-toggle.is-open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}.mobile-menu-toggle.is-open span:nth-child(2){opacity:0}.mobile-menu-toggle.is-open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}
.mobile-preview-menu{
  position:absolute;
  z-index:14;
  top:80px;
  left:0;
  right:0;
  display:grid;
  max-height:0;
  overflow:hidden;
  background:color-mix(in srgb,var(--phone-primary,#081a30),black 12%);
  box-shadow:0 12px 18px rgba(0,0,0,.28);
  opacity:0;
  transform:translateY(-5px);
  transition:max-height .25s ease,opacity .2s ease,transform .2s ease;
}
.mobile-preview-menu.is-open{max-height:300px;opacity:1;transform:none}
.mobile-preview-menu a{padding:8px 13px;border-bottom:1px solid rgba(255,255,255,.09);color:#fff;font-size:.56rem;text-decoration:none}
.mobile-preview-menu a:last-child{border-bottom:0}
.mobile-site-scroll{
  min-height:0;
  flex:1;
  overflow-y:auto;
  overscroll-behavior:contain;
  scroll-behavior:smooth;
  scrollbar-width:none;
  background:#fff;
}
.mobile-site-scroll::-webkit-scrollbar{display:none}
.mobile-preview-hero{position:relative;min-height:306px;overflow:hidden;background:var(--phone-primary,#081a30)}
.mobile-preview-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,9,17,.08),rgba(3,9,17,.89) 70%)}
.mobile-preview-hero>img{width:100%;height:306px;object-fit:cover;filter:saturate(.9) brightness(.8);transition:opacity .35s ease}
.mobile-preview-copy{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:14px 13px 18px}
.mobile-preview-copy small{color:var(--phone-accent,#e5b751);font-size:.45rem;letter-spacing:.04em}
.mobile-preview-copy h3{margin:7px 0 7px;color:#fff;font-size:1.02rem;line-height:1.05}
.mobile-preview-copy p{margin:0 0 10px;color:rgba(255,255,255,.78);font-size:.55rem;line-height:1.45}
.mobile-preview-copy>a{display:inline-block;padding:7px 10px;border-radius:7px;background:var(--phone-accent,#e5b751);color:var(--phone-on-accent,#fff);font-size:.55rem;font-weight:700;text-decoration:none}
.preview-mobile-pages .preview-page-section{min-height:230px;padding:18px 14px;scroll-margin-top:0}
.preview-mobile-pages .preview-page-section h3{font-size:1rem}.preview-mobile-pages .preview-page-section p{font-size:.6rem}
.preview-mobile-pages .preview-service-cards,.preview-mobile-pages .preview-review-grid{grid-template-columns:1fr}
.preview-mobile-pages .preview-service-cards article{padding:10px}.preview-mobile-pages .preview-gallery-grid{grid-template-columns:1fr 1fr}.preview-mobile-pages .preview-gallery-grid img:last-child{grid-column:1/-1;aspect-ratio:2/1}
.preview-mobile-pages .preview-contact-grid{grid-template-columns:1fr}.preview-mobile-pages .preview-stat-row,.preview-mobile-pages .preview-badge-row,.preview-mobile-pages .preview-area-pills{gap:5px}
.preview-mobile-pages .preview-stat-row span,.preview-mobile-pages .preview-badge-row span,.preview-mobile-pages .preview-area-pills span{padding:6px 8px;font-size:.54rem}

/* Landing-page mobile mock-up now uses the same device language and cycles its image. */
.landing-phone-preview{right:0;top:72px;width:174px!important;height:378px!important}
.landing-phone-inner{background:var(--preview-primary,#081a30)!important}
.landing-phone-nav{display:flex;height:42px;flex:0 0 42px;align-items:center;justify-content:space-between;padding:6px 11px;border-bottom:1px solid rgba(255,255,255,.1)}
.landing-phone-nav strong{max-width:110px;overflow:hidden;font-size:.55rem;text-overflow:ellipsis;white-space:nowrap}
.mini-burger{display:grid;gap:3px}.mini-burger i{display:block;width:13px;height:1.5px;background:#fff;border-radius:2px}
.landing-phone-scroll{min-height:0;flex:1;overflow:hidden}.landing-phone-hero{position:relative;height:100%}.landing-phone-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,9,17,.02),rgba(3,9,17,.9) 72%)}
.landing-phone-hero img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.82);transition:opacity .35s ease}
.landing-phone-overlay{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:13px 11px 16px}.landing-phone-overlay small{color:var(--preview-accent,var(--gold));font-size:.42rem}.landing-phone-overlay h3{margin:7px 0;font-size:.94rem;line-height:1.06}.landing-phone-overlay p{margin:0 0 9px;color:rgba(255,255,255,.75);font-size:.52rem;line-height:1.4}.landing-phone-overlay button{width:100%;margin:0;padding:7px;background:var(--preview-accent,var(--gold));color:var(--preview-on-accent,#17110a);font-size:.55rem}

@media (max-width:1199.98px){
  .builder-browser{right:4.7rem}
  .builder-phone{width:178px!important;height:386px;top:92px}
}
@media (max-width:991.98px){
  .live-preview-stage{min-height:600px}
  .live-preview-wrap{min-height:700px}
  .builder-browser{right:5.2rem}
  .builder-phone{display:block;width:190px!important;height:412px;top:78px}
}
@media (max-width:767.98px){
  .builder-browser{right:0;height:500px}
  .builder-phone{display:none}
  .preview-desktop-nav strong{max-width:44%}
  .preview-desktop-links{display:none}
  .preview-page-section{padding:22px 18px}
}
.phone-inner .mobile-menu-toggle{width:28px;height:28px;margin:0;padding:0;border:1px solid rgba(255,255,255,.2);border-radius:8px;background:rgba(255,255,255,.08);color:#fff}


/* Mobile builder switches horizontally between the questions and the live site. */
.builder-view-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:0 0 14px;padding:4px;border:1px solid rgba(255,255,255,.18);border-radius:12px;background:rgba(3,16,31,.72);box-shadow:0 10px 30px rgba(0,0,0,.16);backdrop-filter:blur(12px)}
.builder-view-switch button{min-height:44px;border:0;border-radius:9px;background:transparent;color:rgba(255,255,255,.68);font-size:.82rem;font-weight:800;letter-spacing:.01em;transition:background .2s ease,color .2s ease,box-shadow .2s ease}
.builder-view-switch button:hover,.builder-view-switch button:focus-visible{color:#fff}
.builder-view-switch button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.builder-view-switch button.is-active{background:#fff;color:var(--navy);box-shadow:0 4px 14px rgba(0,0,0,.2)}
.builder-mobile-viewport{width:100%}
@media (max-width:991.98px){
  .builder-view-switch{position:sticky;top:76px;z-index:25}
  .builder-mobile-viewport{height:clamp(560px,calc(100dvh - 225px),720px);overflow:hidden}
  .builder-mobile-track{width:200%;height:100%;margin:0;--bs-gutter-x:0;--bs-gutter-y:0;flex-wrap:nowrap;align-items:flex-start!important;transform:translate3d(0,0,0);transition:transform .42s cubic-bezier(.22,.61,.36,1);will-change:transform}
  .builder-mobile-track.is-preview{transform:translate3d(-50%,0,0)}
  .builder-mobile-track>#builderQuestions,.builder-mobile-track>#builderPreview{flex:0 0 50%;width:50%;max-width:50%;height:100%;padding:0;transition:opacity .25s ease}
  .builder-mobile-track>#builderPreview{opacity:.42;pointer-events:none}
  .builder-mobile-track.is-preview>#builderQuestions{opacity:.42;pointer-events:none}
  .builder-mobile-track.is-preview>#builderPreview{opacity:1;pointer-events:auto}
  .embedded-builder-panel,.live-preview-wrap{height:100%!important;min-height:0!important}
  #builderForm{overflow:hidden}
  .embedded-form-body{min-height:0!important;max-height:none!important;flex:1;overflow-y:auto!important}
  .live-preview-wrap{display:flex;flex-direction:column}
  .live-preview-stage{min-height:0!important;flex:1}
  .builder-browser{height:100%}
}
@media (min-width:992px){
  .builder-mobile-viewport{height:auto!important;overflow:visible}
}
@media (max-width:575.98px){
  .builder-view-switch{top:68px;margin-bottom:10px}
  .builder-view-switch button{min-height:42px;font-size:.78rem}
}
@media (prefers-reduced-motion:reduce){
  .builder-mobile-track,.builder-view-switch button{transition:none}
}

#landingPreviewStage .demo-nav,#landingPreviewStage .landing-phone-nav{background:var(--preview-primary,var(--navy))}

/* Compact phone-sized builder form. Desktop and tablet layouts are unchanged. */
@media (max-width:575.98px){
  .hero-builder>.container-xl{padding-top:.75rem!important;padding-bottom:.75rem!important}
  .builder-topbar{margin-bottom:.65rem!important;gap:.5rem!important}
  .builder-overline{margin-bottom:.1rem;font-size:.56rem}
  .builder-topbar h2{font-size:1rem}
  .builder-topbar .d-flex{gap:.35rem!important}
  .builder-topbar .btn{padding:.35rem .5rem;font-size:.66rem}
  .builder-view-switch{margin-bottom:7px;padding:3px;border-radius:10px}
  .builder-view-switch button{min-height:36px;border-radius:7px;font-size:.73rem}
  .builder-mobile-viewport{height:clamp(520px,calc(100dvh - 185px),690px)}
  .embedded-builder-panel{border-radius:.7rem}
  .embedded-progress{padding:10px 12px 0!important}
  .embedded-progress .mb-2{margin-bottom:.35rem!important}
  .embedded-progress .progress{height:5px}
  .step-kicker{font-size:.58rem}
  .embedded-form-body{padding:11px!important}
  .step-heading-block{margin-bottom:11px!important}
  .step-heading-block>.step-kicker{display:none}
  .step-heading{margin-top:0!important;margin-bottom:.3rem!important;font-size:1.25rem;line-height:1.08}
  .step-intro{font-size:.75rem;line-height:1.35}
  .option-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .option-card{min-height:72px;padding:9px 28px 9px 9px;border-radius:10px}
  .option-card.selected{padding:8px 27px 8px 8px}
  .option-card.d-block.mt-3{min-height:52px;margin-top:8px!important}
  .option-icon{width:29px;height:29px;margin-bottom:5px;font-size:.9rem}
  .option-title{font-size:.77rem;line-height:1.15}
  .option-copy{margin-top:.16rem;font-size:.63rem;line-height:1.25}
  .check-mark{top:7px;right:7px;width:18px;height:18px;font-size:.58rem}
  .palette-row{gap:5px}
  .swatch{width:21px;height:21px}
  #heroBuilder .form-label{margin-bottom:.25rem;font-size:.75rem}
  #heroBuilder .form-control,#heroBuilder .form-select{padding:.52rem .65rem;border-radius:8px;font-size:.82rem}
  #stepContent .row{--bs-gutter-y:.65rem}
  #stepContent .mb-4{margin-bottom:.8rem!important}
  #stepContent .mb-3{margin-bottom:.65rem!important}
  #stepContent h2.h6{margin-bottom:.55rem!important;font-size:.78rem}
  .upload-zone{padding:13px;border-radius:10px}
  .upload-zone p{margin-bottom:.55rem!important}
  .section-row{gap:7px;padding:8px;border-radius:9px;font-size:.76rem}
  .section-row .badge{font-size:.58rem}
  .domain-result{padding:9px;border-radius:9px;font-size:.78rem}
  .review-item{padding:9px;font-size:.76rem}
  .price-box{padding:12px;border-radius:10px}
  .price-box .price{font-size:1.55rem}
  .image-chip{padding:7px;border-radius:9px}
  .embedded-form-actions{padding:9px 10px!important;gap:.5rem!important}
  .embedded-form-actions .btn{padding:.42rem .62rem;font-size:.73rem}
}
@media (max-width:390px){
  .option-card{min-height:68px;padding-right:24px}
  .option-card.selected{padding-right:23px}
  .option-copy{font-size:.6rem}
  .builder-topbar h2{font-size:.92rem}
}

/* Restore functional navigation in the responsive live preview.
   Desktop keeps its page links and CTA. At phone widths, the repeated
   header CTA is replaced by a burger that opens the same live page menu. */
.preview-desktop-menu-toggle{
  display:none;
  width:34px;
  height:34px;
  flex:0 0 34px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  margin-left:auto;
  padding:0;
  border:1px solid rgba(255,255,255,.24);
  border-radius:8px;
  background:var(--preview-accent,#1262ed);
  color:var(--preview-on-accent,#fff);
  cursor:pointer;
}
.preview-desktop-menu-toggle span{
  display:block;
  width:15px;
  height:1.5px;
  border-radius:2px;
  background:currentColor;
  transition:transform .18s ease,opacity .18s ease;
}
.preview-desktop-menu-toggle.is-open span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.preview-desktop-menu-toggle.is-open span:nth-child(2){opacity:0}
.preview-desktop-menu-toggle.is-open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

@media (max-width:767.98px){
  .preview-desktop-nav{
    position:sticky;
    min-height:58px;
    padding:0 14px;
    overflow:visible;
  }
  .preview-desktop-nav strong{
    max-width:calc(100% - 48px);
    margin-right:8px;
  }
  .preview-desktop-nav .preview-desktop-menu-toggle{display:flex!important}
  .preview-desktop-nav .preview-nav-cta{display:none}
  .preview-desktop-nav .preview-desktop-links{
    position:absolute;
    z-index:20;
    top:100%;
    right:0;
    left:0;
    display:flex!important;
    max-height:0;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    overflow:hidden;
    border-top:1px solid rgba(255,255,255,.12);
    background:var(--preview-primary,#071a38);
    box-shadow:0 14px 24px rgba(0,0,0,.28);
    opacity:0;
    pointer-events:none;
    transform:translateY(-5px);
    transition:max-height .24s ease,opacity .18s ease,transform .18s ease;
  }
  .preview-desktop-nav .preview-desktop-links.is-open{
    max-height:360px;
    opacity:1;
    pointer-events:auto;
    transform:none;
  }
  .preview-desktop-nav .preview-desktop-links a{
    width:100%;
    padding:11px 16px;
    border-bottom:1px solid rgba(255,255,255,.09);
    color:#fff;
    font-size:.72rem;
    line-height:1.2;
    text-align:left;
  }
  .preview-desktop-nav .preview-desktop-links a:last-child{border-bottom:0}
  .preview-desktop-nav .preview-desktop-links a:hover,
  .preview-desktop-nav .preview-desktop-links a:focus{
    background:rgba(255,255,255,.08);
    color:var(--preview-accent,#1262ed);
  }
}


/* Uploaded logos replace the fixed brand text in both live previews. */
.preview-brand{
  display:flex!important;
  min-width:0;
  align-items:center;
  justify-content:flex-start;
  overflow:hidden;
}
.preview-desktop-brand{
  width:184px;
  max-width:184px!important;
  height:34px;
  flex:0 1 184px;
  margin-right:0!important;
}
.preview-mobile-brand{
  width:118px;
  max-width:118px!important;
  height:27px;
  flex:1 1 118px;
}
.preview-brand-fallback{
  display:flex;
  min-width:0;
  align-items:center;
  overflow:hidden;
  color:#fff;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.preview-brand-fallback>span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.preview-logo{
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:32px;
  object-fit:contain;
  object-position:left center;
}
.preview-mobile-brand .preview-logo{max-height:23px}
.preview-logo[hidden],.preview-brand-fallback[hidden]{display:none!important}
.upload-zone.is-dragging{border-color:var(--tb-blue);background:#eef5ff}
.upload-status{color:#137452;font-weight:600;line-height:1.35}
.upload-status.is-error{color:#a33a31}

/* The service cards no longer reserve space for the removed helper copy. */
.service-option-grid .option-card{min-height:92px}
.service-option-grid .option-title{margin-top:1px}
@media (max-width:575.98px){
  .service-option-grid .option-card{min-height:62px}
  .service-option-grid .option-icon{margin-bottom:3px}
  .preview-desktop-brand{width:150px;max-width:150px!important;flex-basis:150px}
}


/* Persistent preview contact details, legal page and shared footer. */
.preview-contact-bar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  min-height:28px;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  padding:5px 22px;
  border-bottom:1px solid rgba(255,255,255,.1);
  background:color-mix(in srgb,var(--preview-primary,#071a38),black 16%);
}
.preview-contact-bar a{
  display:inline-flex;
  min-width:0;
  align-items:center;
  gap:6px;
  color:rgba(255,255,255,.88);
  font-size:.56rem;
  line-height:1;
  text-decoration:none;
}
.preview-contact-bar a:hover,.preview-contact-bar a:focus{color:var(--preview-accent,#1262ed)}
.preview-contact-bar span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-contact-bar+.preview-desktop-nav{top:28px}

.mobile-hero-contacts{
  display:grid;
  gap:4px;
  margin-top:9px;
}
.mobile-hero-contacts a{
  display:flex!important;
  max-width:100%;
  align-items:center;
  gap:6px;
  padding:0!important;
  overflow:hidden;
  border-radius:0!important;
  background:transparent!important;
  color:rgba(255,255,255,.88)!important;
  font-size:.49rem!important;
  font-weight:600!important;
  line-height:1.2;
  text-decoration:none;
}
.mobile-hero-contacts span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-preview-menu-contacts{
  display:grid;
  border-top:1px solid rgba(255,255,255,.16);
  background:rgba(0,0,0,.12);
}
.mobile-preview-menu .mobile-preview-menu-contacts a{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--phone-accent,#fff);
  font-weight:700;
}
.mobile-preview-menu .mobile-preview-menu-contacts span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-preview-menu.is-open{max-height:330px;overflow-y:auto}

.preview-terms{background:#f6f8fb!important}
.preview-terms-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.preview-terms-grid article{display:grid;gap:5px;padding:12px;border:1px solid #dfe6ef;border-radius:9px;background:#fff}
.preview-terms-grid strong{font-size:.66rem;color:#182238}
.preview-terms-grid span{color:#68758a;font-size:.58rem;line-height:1.45}
.preview-site-footer{
  display:grid;
  grid-template-columns:minmax(120px,1fr) minmax(180px,1.5fr) minmax(150px,1fr);
  gap:18px;
  align-items:start;
  padding:24px 28px 18px;
  background:color-mix(in srgb,var(--preview-primary,var(--phone-primary,#071a38)),black 14%);
  color:#fff;
}
.preview-footer-brand{display:grid;gap:5px}
.preview-footer-brand strong{font-size:.75rem}
.preview-footer-brand span{color:rgba(255,255,255,.65);font-size:.56rem;line-height:1.4}
.preview-site-footer nav{display:flex;flex-wrap:wrap;gap:6px 12px}
.preview-site-footer nav a,.preview-footer-contact a{color:rgba(255,255,255,.82);font-size:.57rem;text-decoration:none}
.preview-site-footer nav a:hover,.preview-site-footer nav a:focus,.preview-footer-contact a:hover,.preview-footer-contact a:focus{color:var(--preview-accent,var(--phone-accent,#fff))}
.preview-footer-contact{display:grid;gap:7px}
.preview-footer-contact a{display:flex;min-width:0;align-items:center;gap:7px}
.preview-footer-contact span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.preview-site-footer>small{grid-column:1/-1;padding-top:10px;border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.5);font-size:.49rem}
.legal-page-card{min-height:66px!important}

.preview-mobile-pages .preview-terms-grid{grid-template-columns:1fr}
.preview-mobile-pages .preview-terms-grid article{padding:9px}
.preview-mobile-pages .preview-terms-grid strong{font-size:.59rem}
.preview-mobile-pages .preview-terms-grid span{font-size:.53rem}
.preview-mobile-pages .preview-site-footer{grid-template-columns:1fr;gap:11px;padding:17px 14px 20px}
.preview-mobile-pages .preview-site-footer nav{gap:5px 9px}
.preview-mobile-pages .preview-site-footer nav a,.preview-mobile-pages .preview-footer-contact a{font-size:.53rem}
.preview-mobile-pages .preview-site-footer>small{grid-column:auto;font-size:.46rem}

@media (max-width:767.98px){
  .preview-contact-bar{display:none}
  .preview-contact-bar+.preview-desktop-nav{top:0}
}

/* Design choices, supplied-work previews and generated project showcase. */
.design-style-grid .design-choice-card{min-height:132px}
.design-mini-preview{display:grid;height:48px;margin-bottom:10px;grid-template-columns:1.2fr .8fr;grid-template-rows:13px 1fr;gap:4px;overflow:hidden;border:1px solid #d7deea;border-radius:8px;background:#f7f9fc;padding:5px}
.design-mini-preview i{display:block;background:#d9e1ed}
.design-mini-preview i:first-child{grid-column:1/-1}
.design-choice-bold .design-mini-preview{border-radius:2px;background:#172238;transform:skewX(-2deg)}
.design-choice-bold .design-mini-preview i:first-child{background:#f0b323}.design-choice-bold .design-mini-preview i:nth-child(2){background:#fff}.design-choice-bold .design-mini-preview i:nth-child(3){background:#526071}
.design-choice-premium .design-mini-preview{border-radius:0;background:#f7f1e7;border-color:#c9b89d;padding:7px}
.design-choice-premium .design-mini-preview i:first-child{height:2px;align-self:center;background:#9b7a4a}.design-choice-premium .design-mini-preview i:nth-child(2){background:#2c2925}.design-choice-premium .design-mini-preview i:nth-child(3){background:#ddd0bc}
.image-chip{position:relative;overflow:hidden;height:100%;padding:6px;border:1px solid #dfe5ef;border-radius:10px;background:#fff}
.image-chip .image-thumb{display:block;width:100%;aspect-ratio:4/3;border-radius:7px;object-fit:cover;object-position:center}
.image-chip strong{display:block;overflow:hidden;margin-top:7px;text-overflow:ellipsis;white-space:nowrap}
.image-chip-number{position:absolute;top:11px;left:11px;display:grid;width:22px;height:22px;place-items:center;border-radius:50%;background:rgba(5,15,28,.78);color:#fff;font-size:.65rem;font-weight:800}
.preview-footer-address{display:flex;min-width:0;align-items:flex-start;gap:6px;margin-top:4px;color:rgba(255,255,255,.78);font-size:.54rem;line-height:1.35}
.preview-footer-address span{min-width:0;white-space:normal!important}
.preview-contact-address{display:flex;grid-column:1/-1;align-items:flex-start;gap:7px;padding:10px;border:1px solid #dfe6ef;border-radius:8px;color:#27354a;font-size:.62rem}
.preview-service-cards article>img{width:calc(100% + 26px);aspect-ratio:16/8;margin:-13px -13px 7px;border-radius:9px 9px 3px 3px;object-fit:cover}
.preview-about{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(120px,.75fr);gap:20px;align-items:center}
.preview-about-image{width:100%;height:170px;border-radius:10px;object-fit:cover}
.preview-gallery-showcase{padding:28px 30px 30px!important;background:#fff!important}
.preview-gallery-stage{position:relative;overflow:hidden;width:100%;height:265px;margin-top:14px;border-radius:12px;background:#111;box-shadow:0 12px 28px rgba(14,26,43,.14)}
.preview-gallery-slide{position:absolute;inset:0;display:flex;align-items:flex-end;padding:26px;background-position:center;background-size:cover;opacity:0;pointer-events:none;transition:opacity .55s ease}
.preview-gallery-slide.is-active{z-index:1;opacity:1;pointer-events:auto}
.preview-gallery-copy{max-width:62%;color:#fff}
.preview-gallery-copy>span{color:var(--preview-accent,var(--phone-accent,#fff));font-size:.55rem;font-weight:800;letter-spacing:.09em}
.preview-gallery-copy h4{margin:7px 0 7px;color:#fff;font-size:1.35rem;line-height:1.05}
.preview-gallery-copy p{margin:0 0 12px;color:rgba(255,255,255,.82);font-size:.68rem;line-height:1.45}
.preview-gallery-copy a{display:inline-flex;padding:8px 11px;border-radius:7px;background:var(--preview-accent,var(--phone-accent,#fff));color:var(--preview-on-accent,var(--phone-on-accent,#111));font-size:.62rem;font-weight:800;text-decoration:none}
.preview-gallery-arrow{position:absolute;z-index:3;top:50%;display:grid;width:30px;height:30px;place-items:center;transform:translateY(-50%);border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(4,10,18,.5);color:#fff}
.preview-gallery-arrow.is-prev{left:9px}.preview-gallery-arrow.is-next{right:9px}
.preview-gallery-dots{position:absolute;z-index:3;right:15px;bottom:13px;display:flex;gap:5px}
.preview-gallery-dots button{width:7px;height:7px;padding:0;border:0;border-radius:99px;background:rgba(255,255,255,.45);transition:width .2s ease,background .2s ease}
.preview-gallery-dots button.is-active{width:20px;background:var(--preview-accent,var(--phone-accent,#fff))}
.preview-case-studies{display:grid;gap:10px;margin-top:13px}
.preview-case-study{display:grid;grid-template-columns:110px minmax(0,1fr);gap:13px;align-items:center;padding:10px;border:1px solid #e0e6ef;border-radius:10px;background:#fff;scroll-margin-top:92px}
.preview-case-study img{width:110px;aspect-ratio:4/3;border-radius:7px;object-fit:cover}
.preview-case-study span{color:var(--preview-accent,var(--phone-accent,#1262ed));font-size:.49rem;font-weight:800;letter-spacing:.08em}
.preview-case-study h4{margin:3px 0 4px;font-size:.8rem}.preview-case-study p{margin:0;font-size:.58rem;line-height:1.4}

/* Clean and professional: familiar spacing, rounded cards and a clear hierarchy. */
.live-demo-site[data-design="clean-and-professional"],.iphone-screen[data-design="clean-and-professional"]{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}
.live-demo-site[data-design="clean-and-professional"] .preview-page-section{background:#fff}
.live-demo-site[data-design="clean-and-professional"] .preview-page-section:nth-child(even){background:#f6f8fb}

/* Bold and modern: oversized typography, strong colour blocks and square geometry. */
.live-demo-site[data-design="bold-and-modern"],.iphone-screen[data-design="bold-and-modern"]{font-family:"Arial Narrow",Impact,system-ui,sans-serif}
.live-demo-site[data-design="bold-and-modern"] .preview-contact-bar{background:var(--preview-accent);border:0}.live-demo-site[data-design="bold-and-modern"] .preview-contact-bar a{color:var(--preview-on-accent)}
.live-demo-site[data-design="bold-and-modern"] .preview-desktop-nav{min-height:64px;border-bottom:5px solid var(--preview-accent);box-shadow:none}
.live-demo-site[data-design="bold-and-modern"] .preview-desktop-links a{text-transform:uppercase;font-weight:900;letter-spacing:.04em}
.live-demo-site[data-design="bold-and-modern"] .preview-nav-cta{border-radius:0;text-transform:uppercase;box-shadow:5px 5px 0 rgba(0,0,0,.24)}
.live-demo-site[data-design="bold-and-modern"] .live-demo-hero{grid-template-columns:55% 45%;min-height:370px;background:var(--preview-primary)}
.live-demo-site[data-design="bold-and-modern"] .live-demo-hero .demo-copy{position:relative;z-index:2;padding:42px 30px;background:linear-gradient(135deg,var(--preview-primary) 0 82%,transparent 82%)}
.live-demo-site[data-design="bold-and-modern"] .live-demo-hero .demo-copy h2{text-transform:uppercase;font-size:2.15rem;line-height:.94;letter-spacing:-.045em}
.live-demo-site[data-design="bold-and-modern"] .live-demo-hero>img{min-height:370px;filter:saturate(1.12) contrast(1.08) brightness(.74)}
.live-demo-site[data-design="bold-and-modern"] .preview-section-strip{background:var(--preview-accent)}.live-demo-site[data-design="bold-and-modern"] .preview-section-strip span{background:transparent;color:var(--preview-on-accent);font-weight:900;text-transform:uppercase}
.live-demo-site[data-design="bold-and-modern"] .preview-page-section{border-top:7px solid var(--preview-primary);background:#fff!important}.live-demo-site[data-design="bold-and-modern"] .preview-page-section h3{text-transform:uppercase;font-size:1.55rem;letter-spacing:-.03em}
.live-demo-site[data-design="bold-and-modern"] .preview-service-cards article,.live-demo-site[data-design="bold-and-modern"] .preview-about-image,.live-demo-site[data-design="bold-and-modern"] .preview-gallery-stage,.live-demo-site[data-design="bold-and-modern"] .preview-case-study{border-radius:0}
.live-demo-site[data-design="bold-and-modern"] .preview-gallery-copy h4{text-transform:uppercase;font-size:1.65rem}.live-demo-site[data-design="bold-and-modern"] .preview-gallery-copy a{border-radius:0;box-shadow:4px 4px 0 rgba(0,0,0,.28);text-transform:uppercase}
.live-demo-site[data-design="bold-and-modern"] .preview-site-footer{border-top:8px solid var(--preview-accent)}
.iphone-screen[data-design="bold-and-modern"] .mobile-site-header{min-height:52px;background:var(--phone-accent);border:0}.iphone-screen[data-design="bold-and-modern"] .preview-brand-fallback{color:var(--phone-on-accent)}.iphone-screen[data-design="bold-and-modern"] .mobile-menu-toggle{border-radius:0;border-color:var(--phone-on-accent)}.iphone-screen[data-design="bold-and-modern"] .mobile-menu-toggle span{background:var(--phone-on-accent)}
.iphone-screen[data-design="bold-and-modern"] .mobile-preview-copy h3{text-transform:uppercase;font-size:1.15rem;letter-spacing:-.035em}.iphone-screen[data-design="bold-and-modern"] .mobile-preview-copy>a{border-radius:0;text-transform:uppercase;box-shadow:3px 3px 0 rgba(0,0,0,.3)}
.iphone-screen[data-design="bold-and-modern"] .preview-page-section{border-top:5px solid var(--phone-accent)}.iphone-screen[data-design="bold-and-modern"] .preview-page-section h3{text-transform:uppercase}.iphone-screen[data-design="bold-and-modern"] .preview-gallery-stage,.iphone-screen[data-design="bold-and-modern"] .preview-case-study{border-radius:0}

/* Premium and refined: editorial serif typography, layered imagery and warmer surfaces. */
.live-demo-site[data-design="premium-and-refined"],.iphone-screen[data-design="premium-and-refined"]{font-family:Georgia,"Times New Roman",serif}
.live-demo-site[data-design="premium-and-refined"] .preview-contact-bar{background:#171512}.live-demo-site[data-design="premium-and-refined"] .preview-desktop-nav{min-height:68px;padding-inline:28px;border-top:1px solid color-mix(in srgb,var(--preview-accent),white 28%);border-bottom:1px solid rgba(255,255,255,.22);box-shadow:none}
.live-demo-site[data-design="premium-and-refined"] .preview-desktop-links{justify-content:center;gap:18px}.live-demo-site[data-design="premium-and-refined"] .preview-desktop-links a{font-family:Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.live-demo-site[data-design="premium-and-refined"] .preview-nav-cta{border:1px solid var(--preview-accent);border-radius:0;background:transparent;color:#fff;font-family:Inter,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.06em}
.live-demo-site[data-design="premium-and-refined"] .live-demo-hero{display:block;min-height:395px;overflow:hidden;background:#171512}.live-demo-site[data-design="premium-and-refined"] .live-demo-hero>img{position:absolute;inset:0;min-height:395px;filter:brightness(.58) saturate(.78)}
.live-demo-site[data-design="premium-and-refined"] .live-demo-hero .demo-copy{position:relative;z-index:2;width:58%;margin:35px;padding:30px;border:1px solid rgba(255,255,255,.34);background:rgba(20,18,15,.72);backdrop-filter:blur(3px)}
.live-demo-site[data-design="premium-and-refined"] .live-demo-hero .demo-copy small{font-family:Inter,system-ui,sans-serif;letter-spacing:.15em}.live-demo-site[data-design="premium-and-refined"] .live-demo-hero .demo-copy h2{font-size:2.1rem;font-weight:400;line-height:1.02}.live-demo-site[data-design="premium-and-refined"] .live-demo-hero .demo-copy a{border:1px solid var(--preview-accent);border-radius:0;background:transparent;color:#fff;font-family:Inter,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em}
.live-demo-site[data-design="premium-and-refined"] .preview-section-strip{background:#1d1a16}.live-demo-site[data-design="premium-and-refined"] .preview-section-strip span{font-family:Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.live-demo-site[data-design="premium-and-refined"] .preview-page-section{padding-block:38px;border-top:1px solid #d9cdbb;background:#f8f4ec!important}.live-demo-site[data-design="premium-and-refined"] .preview-page-section h3{font-size:1.55rem;font-weight:400}.live-demo-site[data-design="premium-and-refined"] .preview-page-kicker{font-family:Inter,system-ui,sans-serif;letter-spacing:.15em}
.live-demo-site[data-design="premium-and-refined"] .preview-service-cards article,.live-demo-site[data-design="premium-and-refined"] .preview-case-study{border-radius:0;border-color:#d8cbb7;background:#fffdf8}.live-demo-site[data-design="premium-and-refined"] .preview-about-image,.live-demo-site[data-design="premium-and-refined"] .preview-gallery-stage{border-radius:0}
.live-demo-site[data-design="premium-and-refined"] .preview-gallery-copy h4{font-size:1.55rem;font-weight:400}.live-demo-site[data-design="premium-and-refined"] .preview-gallery-copy a{border:1px solid var(--preview-accent);border-radius:0;background:transparent;color:#fff;font-family:Inter,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.05em}
.live-demo-site[data-design="premium-and-refined"] .preview-site-footer{background:#171512;border-top:1px solid var(--preview-accent)}
.iphone-screen[data-design="premium-and-refined"] .mobile-site-header{min-height:54px;background:#171512;border-bottom:1px solid var(--phone-accent)}.iphone-screen[data-design="premium-and-refined"] .mobile-preview-hero::after{background:linear-gradient(180deg,rgba(15,13,10,.12),rgba(15,13,10,.92) 73%)}
.iphone-screen[data-design="premium-and-refined"] .mobile-preview-copy h3{font-size:1.14rem;font-weight:400}.iphone-screen[data-design="premium-and-refined"] .mobile-preview-copy>a{border:1px solid var(--phone-accent);border-radius:0;background:transparent;color:#fff;text-transform:uppercase;letter-spacing:.04em}
.iphone-screen[data-design="premium-and-refined"] .preview-page-section{background:#f8f4ec!important;border-top:1px solid #d8cbb7}.iphone-screen[data-design="premium-and-refined"] .preview-gallery-stage,.iphone-screen[data-design="premium-and-refined"] .preview-case-study{border-radius:0}.iphone-screen[data-design="premium-and-refined"] .preview-site-footer{background:#171512}

.preview-mobile-pages .preview-about{grid-template-columns:1fr;gap:10px}.preview-mobile-pages .preview-about-image{height:120px;order:-1}
.preview-mobile-pages .preview-service-cards article>img{width:calc(100% + 20px);margin:-10px -10px 5px}
.preview-mobile-pages .preview-gallery-showcase{padding:17px 14px 19px!important}
.preview-mobile-pages .preview-gallery-stage{height:230px;margin-top:9px;border-radius:8px}
.preview-mobile-pages .preview-gallery-slide{padding:16px 14px 20px;background-size:cover!important}
.preview-mobile-pages .preview-gallery-copy{max-width:88%}.preview-mobile-pages .preview-gallery-copy>span{font-size:.42rem}.preview-mobile-pages .preview-gallery-copy h4{font-size:1rem}.preview-mobile-pages .preview-gallery-copy p{font-size:.52rem;line-height:1.35}.preview-mobile-pages .preview-gallery-copy a{padding:6px 8px;font-size:.5rem}
.preview-mobile-pages .preview-gallery-arrow{width:24px;height:24px;font-size:.62rem}.preview-mobile-pages .preview-gallery-arrow.is-prev{left:6px}.preview-mobile-pages .preview-gallery-arrow.is-next{right:6px}.preview-mobile-pages .preview-gallery-dots{right:10px;bottom:9px}
.preview-mobile-pages .preview-case-study{grid-template-columns:72px minmax(0,1fr);gap:8px;padding:7px}.preview-mobile-pages .preview-case-study img{width:72px}.preview-mobile-pages .preview-case-study h4{font-size:.62rem}.preview-mobile-pages .preview-case-study p{font-size:.48rem}.preview-mobile-pages .preview-case-study span{font-size:.4rem}

@media (max-width:575.98px){
  .design-style-grid{grid-template-columns:1fr}
  .design-style-grid .design-choice-card{min-height:104px}
}


/* Regenerated flow: preview stacking, post-preview CTA, domain routes and payment extras. */
.phone-preview.iphone-preview{z-index:10}

.post-preview-cta{width:100%;background:linear-gradient(135deg,#f1c45f,#dda83c);color:var(--ink)}
.post-preview-cta-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px 32px}
.post-preview-cta-kicker{display:block;margin-bottom:5px;font-size:.7rem;font-weight:800;letter-spacing:.12em;color:#5c420e}
.post-preview-cta h2{margin:0 0 5px;font-size:clamp(1.55rem,2.4vw,2.15rem);letter-spacing:-.025em}
.post-preview-cta p{margin:0;color:#493714}.post-preview-cta .btn-dark{background:var(--navy);border-color:var(--navy);white-space:nowrap}.post-preview-cta .btn-dark:hover{background:#0d2b4b;border-color:#0d2b4b}
.post-preview-cta-points{display:flex;grid-column:1/-1;flex-wrap:wrap;gap:10px 24px;padding-top:14px;border-top:1px solid rgba(7,22,46,.18);color:#3d2f12;font-size:.78rem;font-weight:650}.post-preview-cta-points i{margin-right:6px;color:var(--navy)}
.domain-route-panel{animation:domain-panel-in .22s ease both}@keyframes domain-panel-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.domain-later-card{display:flex;align-items:flex-start;gap:13px;padding:17px;border:1px solid #d4dfef;border-radius:13px;background:#f6f9fd;color:var(--ink)}.domain-later-card>i{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:50%;background:#e7effd;color:var(--tb-blue);font-size:1.1rem}.domain-later-card strong{display:block;margin-bottom:4px}.domain-later-card p{color:var(--tb-muted);font-size:.8rem;line-height:1.45}
.domain-handover{padding:16px;border:1px solid #cbd8eb;border-radius:13px;background:linear-gradient(135deg,#f6f9fe,#eef4fc);color:var(--ink)}.domain-handover.is-compact{margin-top:16px;padding:13px}.domain-handover-kicker{display:block;margin-bottom:5px;color:var(--tb-blue);font-size:.63rem;font-weight:850;letter-spacing:.12em}.domain-handover h3{margin:0 0 8px;font-size:1rem}.domain-handover code{display:block;overflow-wrap:anywhere;margin-bottom:10px;padding:9px 10px;border-radius:8px;background:#0b223c;color:#fff;font-size:.75rem}.domain-handover p{margin:0 0 10px;color:#536078;font-size:.78rem;line-height:1.45}.domain-handover small{display:block;margin-top:9px;color:#667085;font-size:.68rem;line-height:1.45}
.dns-record{display:grid;grid-template-columns:.65fr .65fr 1.7fr;gap:6px}.dns-record span{padding:8px;border:1px solid #d5dfec;border-radius:8px;background:#fff;color:#5d687a;font-size:.65rem}.dns-record strong{display:block;margin-top:2px;color:var(--ink);overflow-wrap:anywhere}
.payment-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:10px}.payment-section-heading span{display:block;color:var(--tb-blue);font-size:.62rem;font-weight:850;letter-spacing:.11em}.payment-section-heading h2{margin:2px 0 0;font-size:1rem}.payment-section-heading p{max-width:230px;margin:0;color:var(--tb-muted);font-size:.7rem;line-height:1.35;text-align:right}
.payment-addon-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.payment-addon{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;min-height:88px;padding:10px;border:1px solid var(--tb-border);border-radius:11px;background:#fff;cursor:pointer}.payment-addon.is-selected{border-color:var(--tb-blue);background:#f4f8ff;box-shadow:inset 0 0 0 1px var(--tb-blue)}.payment-addon input{position:absolute;right:8px;top:8px}.payment-addon>i{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#edf3ff;color:var(--tb-blue)}.payment-addon span{min-width:0;padding-right:17px}.payment-addon strong,.payment-addon small{display:block}.payment-addon strong{font-size:.75rem}.payment-addon small{margin-top:2px;color:var(--tb-muted);font-size:.62rem;line-height:1.3}.payment-addon em{grid-column:1/-1;color:#667085;font-size:.58rem;font-style:normal;font-weight:700}.payment-card .form-check-label a{font-weight:700}#completionDomainDetails .domain-handover{margin:0}
@media (max-width:991.98px){.post-preview-cta-inner{grid-template-columns:1fr}.post-preview-cta .btn{justify-self:start}.post-preview-cta-points{grid-column:auto}}
@media (max-width:575.98px){.post-preview-cta .container-xl{padding-inline:18px}.post-preview-cta-inner{gap:14px}.post-preview-cta .btn{width:100%}.post-preview-cta-points{display:grid;gap:7px;padding-top:12px}.dns-record{grid-template-columns:1fr}.payment-section-heading{display:block}.payment-section-heading p{max-width:none;margin-top:5px;text-align:left}.payment-addon-grid{grid-template-columns:1fr}.payment-addon{min-height:76px}}


/* Payment completion and launch resources */
.completion-modal-body{background:#f6f8fc}.completion-confirmation{display:grid;grid-template-columns:52px 1fr;gap:16px;margin-bottom:16px;padding:20px;border-radius:16px;background:#082d45;color:#fff}.completion-confirmation>i{font-size:2.3rem;color:#3dd6a2}.completion-confirmation span,.completion-section-heading>span{display:block;font-size:.65rem;font-weight:850;letter-spacing:.12em}.completion-confirmation span{color:#86dce3}.completion-confirmation h3{margin:3px 0 7px;font-size:1.25rem}.completion-confirmation p{margin:0 0 5px;line-height:1.5}.completion-confirmation small{color:#cbd9e5}.completion-section{margin-top:18px;padding:20px;border:1px solid #dbe3ef;border-radius:16px;background:#fff}.completion-section-heading{margin-bottom:14px}.completion-section-heading>span{color:var(--tb-blue)}.completion-section-heading h3{margin:3px 0 5px;font-size:1.15rem}.completion-section-heading p{margin:0;color:#667085;font-size:.82rem}.completion-addon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.completion-addon{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:13px;border:1px solid #dfe6f0;border-radius:12px;background:#fbfcfe}.completion-addon.is-selected{border-color:var(--tb-blue);background:#f1f6ff}.completion-addon>i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#eaf1ff;color:var(--tb-blue)}.completion-addon strong{font-size:.82rem}.completion-addon p{margin:3px 0 8px;color:#667085;font-size:.7rem;line-height:1.4}.completion-addon>span{grid-column:2;color:#667085;font-size:.62rem;font-weight:800}.completion-addon.is-selected>span{color:var(--tb-blue)}.completion-next-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.completion-next-grid>article{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;padding:15px;border-radius:13px;background:#f7f9fc}.completion-next-grid>article>i{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#082d45;color:#fff}.completion-next-grid strong{font-size:.86rem}.completion-next-grid p{margin:4px 0 9px;color:#667085;font-size:.72rem;line-height:1.45}.completion-links{display:flex;flex-wrap:wrap;gap:7px}.completion-links a{font-size:.65rem;font-weight:800}.completion-guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.completion-guide-grid>a{display:flex;flex-direction:column;min-height:150px;padding:14px;border:1px solid #dfe6f0;border-radius:12px;color:#0b223c;text-decoration:none;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.completion-guide-grid>a:hover{transform:translateY(-2px);border-color:var(--tb-blue);box-shadow:0 8px 22px rgba(11,34,60,.1)}.completion-guide-grid strong{font-size:.86rem}.completion-guide-grid span{margin-top:6px;color:#667085;font-size:.7rem;line-height:1.45}.completion-guide-grid em{margin-top:auto;padding-top:12px;color:var(--tb-blue);font-size:.65rem;font-style:normal;font-weight:850}.phone-preview.iphone-preview{z-index:10}
@media(max-width:991.98px){.completion-addon-grid,.completion-next-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.completion-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:575.98px){.completion-modal-body{padding:12px}.completion-confirmation{grid-template-columns:38px 1fr;padding:15px}.completion-confirmation>i{font-size:1.8rem}.completion-section{padding:14px}.completion-addon-grid,.completion-next-grid,.completion-guide-grid{grid-template-columns:1fr}.completion-guide-grid>a{min-height:0}.completion-next-grid>article{grid-template-columns:34px 1fr}}

/* Embedded Stripe subscription checkout */
.stripe-setup-status{display:flex;align-items:center;gap:9px;margin-top:14px;padding:11px 13px;border:1px solid #cfd9e8;border-radius:11px;background:#f7f9fc;color:#46546a;font-size:.72rem;line-height:1.45}.stripe-setup-status code{padding:1px 4px;border-radius:4px;background:#e9eef6;color:#0b223c}.stripe-setup-status.is-loading{border-color:#b9cff5;background:#f2f6ff;color:#174ea6}.stripe-setup-status.is-success{border-color:#a9dfcf;background:#effbf7;color:#12644d}.stripe-setup-status.is-warning{border-color:#f0d28c;background:#fff9e9;color:#765515}.stripe-setup-status.is-error{border-color:#efb4b4;background:#fff4f4;color:#9d2424}.stripe-checkout-mount{min-height:430px;margin-top:12px;padding:8px;border:1px solid #dbe3ef;border-radius:14px;background:#fff;box-shadow:0 10px 28px rgba(11,34,60,.08);scroll-margin-top:100px}.stripe-checkout-mount[hidden]{display:none!important}.payment-addon.is-locked{cursor:default;opacity:.68}.payment-card input:disabled,.payment-addon input:disabled{cursor:not-allowed}.stripe-payment-note{margin-top:7px;color:#667085;font-size:.66rem;line-height:1.45}
@media(max-width:575.98px){.stripe-checkout-mount{min-height:500px;margin-inline:-5px;padding:2px;border-radius:10px}.stripe-setup-status{font-size:.68rem}}

.payment-addon.is-disabled{opacity:.55;cursor:not-allowed}
.payment-addon.is-disabled input{pointer-events:none}


/* Guided style / palette selection */
.design-choice-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin:0 0 .85rem}.design-choice-heading h2{font-size:1rem;margin:0}.design-choice-heading p{margin:.2rem 0 0;color:#667085;font-size:.82rem}.colour-heading{margin-top:1.7rem}
.theme-choice-grid,.palette-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.palette-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.theme-choice,.palette-choice{position:relative;border:2px solid #e2e7ec;border-radius:14px;background:#fff;padding:.7rem;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .18s}.theme-choice:hover,.palette-choice:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(22,35,50,.09)}.theme-choice.selected,.palette-choice.selected{border-color:#1165e8;box-shadow:0 0 0 3px rgba(17,101,232,.12)}.theme-choice input,.palette-choice input{position:absolute;opacity:0;pointer-events:none}.choice-check{position:absolute;right:.55rem;top:.55rem;width:23px;height:23px;border-radius:50%;background:#1165e8;color:#fff;display:none;place-items:center;font-size:.75rem;font-weight:800;z-index:3}.selected>.choice-check{display:grid}.recommend-chip{position:absolute;left:.55rem;top:.55rem;background:#eaf2ff;color:#0a57c7;border-radius:999px;padding:.22rem .45rem;font-size:.62rem;font-weight:800;z-index:3}.theme-choice>strong,.palette-choice>strong{display:block;margin-top:.55rem;font-size:.86rem}.theme-choice>small,.palette-choice>small{display:block;color:#697386;font-size:.7rem}.theme-choice>p{font-size:.7rem;color:#697386;line-height:1.35;margin:.35rem 0 0}
.theme-mini{height:92px;border-radius:9px;background:#f5f6f7;display:grid;grid-template-columns:1fr .68fr;grid-template-rows:14px 20px 1fr 20px;gap:5px;padding:7px;overflow:hidden}.theme-mini i{display:block}.theme-mini .mini-nav{grid-column:1/-1;background:#d8dee4}.theme-mini .mini-title{background:#293645}.theme-mini .mini-copy{background:#cbd2d8}.theme-mini .mini-image{grid-column:2;grid-row:2/5;background:#8495a2}.theme-mini .mini-card{background:#fff;border:1px solid #d6dce0}
[data-theme-card=strong] .theme-mini{background:#132032}.theme-choice[data-theme-card=strong] .mini-title{background:#fff}.theme-choice[data-theme-card=strong] .mini-copy,.theme-choice[data-theme-card=strong] .mini-card{background:#e8a523}.theme-choice[data-theme-card=strong] .mini-image{background:#46586d}
[data-theme-card=welcoming] .theme-mini{border-radius:18px;background:#f6f0f1}.theme-choice[data-theme-card=welcoming] .mini-card,.theme-choice[data-theme-card=welcoming] .mini-image{border-radius:12px;background:#d9bbc6}
[data-theme-card=editorial] .theme-mini{background:#fbfaf7;grid-template-columns:1.2fr .7fr}.theme-choice[data-theme-card=editorial] .mini-title{height:4px;align-self:center;background:#292929}.theme-choice[data-theme-card=editorial] .mini-card{border:0;border-top:1px solid #777}
[data-theme-card=local] .theme-mini{background:#f4f0e9}.theme-choice[data-theme-card=local] .mini-image{border-radius:16px;background:#799484}.theme-choice[data-theme-card=local] .mini-card{border-radius:10px}
[data-theme-card=refined] .theme-mini{background:#fbf8f1;padding:10px}.theme-choice[data-theme-card=refined] .mini-nav{height:2px;align-self:center}.theme-choice[data-theme-card=refined] .mini-title{background:#7e6542}.theme-choice[data-theme-card=refined] .mini-card{border:0;border-top:1px solid #c8bca9}
[data-theme-card=practical] .theme-mini{background:#eef2f4}.theme-choice[data-theme-card=practical] .mini-card{border-radius:5px;background:#fff;border-color:#9aabb5}
[data-theme-card=showcase] .theme-mini{gap:2px;padding:3px}.theme-choice[data-theme-card=showcase] .mini-image{grid-column:1/-1;grid-row:1/4;background:#53636d}.theme-choice[data-theme-card=showcase] .mini-title{z-index:2;background:#fff}
[data-theme-card=trusted] .theme-mini{background:#f4f7f5}.theme-choice[data-theme-card=trusted] .mini-card{border-color:#7aa486;background:#fff}.theme-choice[data-theme-card=trusted] .mini-title{background:#326747}
[data-theme-card=modern] .theme-mini{background:linear-gradient(135deg,#eef1f4 50%,#1f3547 50%)}.theme-choice[data-theme-card=modern] .mini-card{border-radius:12px}.theme-choice[data-theme-card=modern] .mini-title{background:#356e91}
.palette-mini{height:78px;border-radius:9px;display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:12px 1fr 18px;background:var(--p-bg);overflow:hidden;border:1px solid #e1e5e9;padding:6px;gap:4px}.palette-mini i{grid-column:1/-1;background:var(--p-primary);border-radius:3px}.palette-mini b{background:var(--p-surface);border-left:5px solid var(--p-accent)}.palette-mini em{background:var(--p-primary);opacity:.82}.palette-mini span{grid-column:1/-1;background:linear-gradient(90deg,var(--p-accent) 0 35%,var(--p-text) 35% 100%);border-radius:3px}
.all-choice-panel{display:grid;gap:1rem}.all-choice-panel>.theme-choice{display:inline-block}.all-choice-panel:not(.d-none){grid-template-columns:repeat(2,minmax(0,1fr))}.palette-group h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:#667085;margin:.4rem 0 .6rem}.palette-group .palette-choice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.module-choice-grid{display:grid;gap:.6rem}.module-choice{display:grid;grid-template-columns:42px 1fr 24px;gap:.75rem;align-items:center;padding:.85rem 1rem;border:1px solid #dfe4e8;background:#fff;border-radius:12px;cursor:pointer}.module-choice.selected{border-color:#1165e8;background:#f7fbff;box-shadow:0 0 0 2px rgba(17,101,232,.08)}.module-choice input{position:absolute;opacity:0}.module-icon{width:38px;height:38px;border-radius:10px;background:#eef3f7;display:grid;place-items:center;font-weight:800}.module-choice strong{display:block;font-size:.83rem}.module-choice small{display:block;color:#687386;font-size:.7rem;line-height:1.35;margin-top:.15rem}.module-choice>i{font-style:normal;color:#1165e8;font-weight:900;opacity:0}.module-choice.selected>i{opacity:1}.post-payment-note{margin-top:1rem;padding:1rem;background:#f4f6f8;border-radius:10px;display:grid;gap:.25rem;font-size:.75rem}.post-payment-note span{color:#667085}

/* Theme bridge for existing live preview. The production component library uses the same theme ids. */
.live-demo-site,.iphone-screen{--preview-bg:#f5f3ee;--preview-surface:#fff;--preview-text:#121820;--preview-dark:#0c151e}
.live-demo-site .preview-page-section{background:var(--preview-surface);color:var(--preview-text)}
.live-demo-site[data-site-theme=established],.iphone-screen[data-site-theme=established]{font-family:Inter,system-ui,sans-serif}.live-demo-site[data-site-theme=established] .preview-page-section{border-top:1px solid #d9dee3}.live-demo-site[data-site-theme=established] .preview-service-cards article{border-radius:6px}
.live-demo-site[data-site-theme=strong],.iphone-screen[data-site-theme=strong]{font-family:Inter,system-ui,sans-serif}.live-demo-site[data-site-theme=strong] .live-demo-hero .demo-copy h2,.iphone-screen[data-site-theme=strong] h3{text-transform:uppercase;font-weight:900;letter-spacing:-.045em}.live-demo-site[data-site-theme=strong] .preview-nav-cta,.live-demo-site[data-site-theme=strong] .demo-copy>a{border-radius:5px;font-weight:900;text-transform:uppercase}.live-demo-site[data-site-theme=strong] .preview-page-section{border-top:6px solid var(--preview-accent)}
.live-demo-site[data-site-theme=welcoming],.iphone-screen[data-site-theme=welcoming]{font-family:Inter,system-ui,sans-serif}.live-demo-site[data-site-theme=welcoming] .preview-service-cards article,.live-demo-site[data-site-theme=welcoming] .preview-gallery-stage,.live-demo-site[data-site-theme=welcoming] .preview-case-study{border-radius:20px}.live-demo-site[data-site-theme=welcoming] .preview-nav-cta,.live-demo-site[data-site-theme=welcoming] .demo-copy>a{border-radius:999px}
.live-demo-site[data-site-theme=editorial],.iphone-screen[data-site-theme=editorial]{font-family:Georgia,"Times New Roman",serif}.live-demo-site[data-site-theme=editorial] .preview-page-section{padding-block:44px;border-top:1px solid #d6d1c8}.live-demo-site[data-site-theme=editorial] .preview-service-cards article{border-width:0;border-top:1px solid #b8b2a8;border-radius:0;box-shadow:none}.live-demo-site[data-site-theme=editorial] .preview-nav-cta{border-radius:0;background:transparent;border-bottom:1px solid var(--preview-accent)}
.live-demo-site[data-site-theme=local],.iphone-screen[data-site-theme=local]{font-family:"Trebuchet MS",Inter,sans-serif}.live-demo-site[data-site-theme=local] .preview-service-cards article,.live-demo-site[data-site-theme=local] .preview-review-grid blockquote{border-radius:14px}.live-demo-site[data-site-theme=local] .preview-page-section:nth-child(even){background:color-mix(in srgb,var(--preview-accent) 5%,#fff)}
.live-demo-site[data-site-theme=refined],.iphone-screen[data-site-theme=refined]{font-family:Georgia,"Times New Roman",serif}.live-demo-site[data-site-theme=refined] .preview-page-section{padding-block:48px}.live-demo-site[data-site-theme=refined] .preview-service-cards article,.live-demo-site[data-site-theme=refined] .preview-gallery-stage{border-radius:1px;box-shadow:none}.live-demo-site[data-site-theme=refined] .preview-nav-cta,.live-demo-site[data-site-theme=refined] .demo-copy>a{border-radius:0;background:transparent;border:1px solid var(--preview-accent)}
.live-demo-site[data-site-theme=practical],.iphone-screen[data-site-theme=practical]{font-family:Inter,system-ui,sans-serif}.live-demo-site[data-site-theme=practical] .preview-page-section{padding-block:24px}.live-demo-site[data-site-theme=practical] .preview-service-cards{gap:8px}.live-demo-site[data-site-theme=practical] .preview-service-cards article{border-radius:8px}
.live-demo-site[data-site-theme=showcase],.iphone-screen[data-site-theme=showcase]{font-family:Georgia,"Times New Roman",serif}.live-demo-site[data-site-theme=showcase] .preview-gallery-stage{min-height:330px;border-radius:2px}.live-demo-site[data-site-theme=showcase] .preview-about-image{min-height:280px}.live-demo-site[data-site-theme=showcase] .preview-page-section{padding-block:36px}
.live-demo-site[data-site-theme=trusted],.iphone-screen[data-site-theme=trusted]{font-family:Inter,system-ui,sans-serif}.live-demo-site[data-site-theme=trusted] .preview-review-grid blockquote,.live-demo-site[data-site-theme=trusted] .preview-badge-row span,.live-demo-site[data-site-theme=trusted] .preview-service-cards article{border:1px solid color-mix(in srgb,var(--preview-accent) 36%,#dfe5e8);box-shadow:0 7px 20px rgba(18,35,32,.08)}
.live-demo-site[data-site-theme=modern],.iphone-screen[data-site-theme=modern]{font-family:Inter,system-ui,sans-serif}.live-demo-site[data-site-theme=modern] .live-demo-hero{grid-template-columns:48% 52%}.live-demo-site[data-site-theme=modern] .preview-service-cards article,.live-demo-site[data-site-theme=modern] .preview-gallery-stage{border-radius:18px}.live-demo-site[data-site-theme=modern] .preview-page-section:nth-child(even){background:linear-gradient(135deg,color-mix(in srgb,var(--preview-accent) 5%,#fff),#fff)}


/* v12: theme-aware composition preview */
.preview-generated-modules{background:var(--preview-bg);color:var(--preview-text)}
.preview-module{padding:28px 30px;border-top:1px solid color-mix(in srgb,var(--preview-text) 12%,transparent);background:var(--preview-surface);position:relative;overflow:hidden}
.preview-module:nth-child(even){background:color-mix(in srgb,var(--preview-accent) 4%,var(--preview-bg))}
.preview-module-heading{display:grid;gap:3px;margin-bottom:14px}.preview-module-heading small,.preview-module small{font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:color-mix(in srgb,var(--preview-text) 60%,transparent)}.preview-module-heading strong,.preview-module strong{font-size:18px}.preview-module-heading strong span{font-size:10px;font-weight:500}
.preview-proof-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.preview-proof-row span{border:1px solid color-mix(in srgb,var(--preview-accent) 28%,#d9e0e4);padding:12px;text-align:center;font-size:9px;border-radius:8px;background:var(--preview-surface)}
.preview-ba{height:180px;display:grid;grid-template-columns:1fr 1fr;position:relative;border-radius:10px;overflow:hidden}.preview-ba>div{background:linear-gradient(145deg,#596a74,#24343f);display:flex;align-items:end;padding:10px;color:#fff;font-size:9px}.preview-ba>div:nth-child(2){background:linear-gradient(145deg,color-mix(in srgb,var(--preview-accent) 30%,#d5d9d8),#8fa0a6)}.preview-ba i{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;background:#fff;border-radius:50%;display:grid;place-items:center;font-style:normal;color:#222}
.preview-project-grid,.preview-project-masonry,.preview-project-scroll{display:grid;gap:6px}.preview-project-grid{grid-template-columns:repeat(4,1fr)}.preview-project-grid i,.preview-project-masonry i,.preview-project-scroll i{display:block;min-height:90px;background:linear-gradient(145deg,#83939c,#394b56);border-radius:6px}.preview-project-masonry{grid-template-columns:1.3fr .8fr 1fr;grid-auto-rows:70px}.preview-project-masonry i:first-child{grid-row:span 2}.preview-project-masonry i:nth-child(4){grid-column:span 2}.preview-project-scroll{grid-auto-flow:column;grid-auto-columns:42%;overflow:hidden}
.preview-review-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px}.preview-review-cards blockquote{margin:0;border:1px solid color-mix(in srgb,var(--preview-accent) 25%,#dfe4e8);padding:12px;border-radius:8px;font-size:9px;background:var(--preview-surface)}
.preview-module--team{display:grid;grid-template-columns:110px 1fr;gap:16px;align-items:center}.preview-team-photo{height:110px;background:linear-gradient(145deg,#88969e,#3c4f59);border-radius:10px}.preview-module--team p,.preview-module--availability p,.preview-module--finance p{font-size:9px;margin:.35rem 0}
.preview-module--area{display:grid;grid-template-columns:1fr 120px;align-items:center}.preview-map-dot{height:100px;border-radius:50%;background:radial-gradient(circle at 50% 50%,var(--preview-accent) 0 5%,color-mix(in srgb,var(--preview-accent) 18%,#e9efec) 6% 28%,#eef1ef 29%);display:grid;place-items:center;font-size:20px}
.preview-module--emergency{background:#9f1f25!important;color:#fff;display:flex;justify-content:space-between;align-items:center}.preview-module--emergency div{display:grid}.preview-module--emergency small{color:rgba(255,255,255,.7)}.preview-module--emergency b{background:#fff;color:#9f1f25;padding:9px 12px;border-radius:6px}
.preview-module--availability,.preview-module--finance{display:grid;grid-template-columns:42px 1fr;gap:12px;align-items:center}.preview-module--availability>span,.preview-module--finance>span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--preview-accent) 16%,#fff);font-weight:800}

/* Component choice visibly changes with selected theme */
.live-demo-site[data-site-theme=showcase] .preview-module--projects{padding-inline:12px}.live-demo-site[data-site-theme=showcase] .preview-module--projects .preview-module-heading{padding-inline:18px}.live-demo-site[data-site-theme=showcase] .preview-project-masonry i{border-radius:1px;min-height:100px}
.live-demo-site[data-site-theme=strong] .preview-module-heading strong{text-transform:uppercase;font-weight:900;letter-spacing:-.03em}.live-demo-site[data-site-theme=strong] .preview-module{border-top:5px solid var(--preview-accent)}.live-demo-site[data-site-theme=strong] .preview-proof-row span{border-width:2px}
.live-demo-site[data-site-theme=refined] .preview-module{padding-block:42px}.live-demo-site[data-site-theme=refined] .preview-module-heading strong{font-family:Georgia,serif;font-weight:400;font-size:22px}.live-demo-site[data-site-theme=refined] .preview-review-cards blockquote{border-radius:0;border-width:0;border-top:1px solid #bbb;box-shadow:none}
.live-demo-site[data-site-theme=editorial] .preview-module-heading strong{font-family:Georgia,serif;font-size:23px;font-weight:400}.live-demo-site[data-site-theme=editorial] .preview-project-grid i,.live-demo-site[data-site-theme=editorial] .preview-review-cards blockquote{border-radius:0}
.live-demo-site[data-site-theme=welcoming] .preview-module,.live-demo-site[data-site-theme=local] .preview-module{border-radius:18px;margin:8px 12px}.live-demo-site[data-site-theme=welcoming] .preview-project-grid i,.live-demo-site[data-site-theme=local] .preview-project-grid i{border-radius:14px}
.live-demo-site[data-site-theme=trusted] .preview-module--reviews,.live-demo-site[data-site-theme=trusted] .preview-module--trust{background:color-mix(in srgb,var(--preview-accent) 7%,#fff)}.live-demo-site[data-site-theme=trusted] .preview-module-heading strong{font-weight:800}
.live-demo-site[data-site-theme=modern] .preview-module--projects,.live-demo-site[data-site-theme=modern] .preview-module--team{grid-template-columns:1fr 1fr}.live-demo-site[data-site-theme=modern] .preview-project-scroll i{border-radius:16px}
.live-demo-site[data-site-theme=practical] .preview-module{padding-block:20px}.live-demo-site[data-site-theme=practical] .preview-project-grid{grid-template-columns:repeat(2,1fr)}.live-demo-site[data-site-theme=practical] .preview-project-grid i{min-height:62px}
.live-demo-site[data-site-theme=established] .preview-module{border-radius:0}.live-demo-site[data-site-theme=established] .preview-module-heading strong{font-family:Georgia,serif;font-weight:500}

/* Phone mirrors the selected modules in deliberately compact form */
.phone-generated-modules{background:var(--phone-bg);color:var(--phone-text);padding-bottom:54px}
.phone-generated-modules .preview-module{padding:12px 10px}.phone-generated-modules .preview-module-heading{margin-bottom:7px}.phone-generated-modules .preview-module-heading strong,.phone-generated-modules .preview-module strong{font-size:10px}.phone-generated-modules .preview-proof-row{grid-template-columns:1fr}.phone-generated-modules .preview-proof-row span{padding:6px;font-size:6px}.phone-generated-modules .preview-ba{height:90px}.phone-generated-modules .preview-project-grid{grid-template-columns:1fr 1fr}.phone-generated-modules .preview-project-grid i,.phone-generated-modules .preview-project-masonry i,.phone-generated-modules .preview-project-scroll i{min-height:45px}.phone-generated-modules .preview-project-masonry{grid-auto-rows:35px}.phone-generated-modules .preview-review-cards{grid-template-columns:1fr}.phone-generated-modules .preview-review-cards blockquote{padding:6px;font-size:6px}.phone-generated-modules .preview-module--team{grid-template-columns:45px 1fr}.phone-generated-modules .preview-team-photo{height:45px}.phone-generated-modules .preview-module--area{grid-template-columns:1fr 45px}.phone-generated-modules .preview-map-dot{height:45px;font-size:12px}.phone-generated-modules .preview-module--emergency b{padding:5px;font-size:6px}.phone-generated-modules .preview-module--availability,.phone-generated-modules .preview-module--finance{grid-template-columns:25px 1fr}.phone-generated-modules .preview-module--availability>span,.phone-generated-modules .preview-module--finance>span{width:24px;height:24px;font-size:7px}.phone-generated-modules p{font-size:6px!important}.phone-generated-modules small{font-size:5px!important}

.preview-change-note{position:fixed;z-index:9999;right:22px;bottom:22px;background:#111c2a;color:#fff;padding:10px 14px;border-radius:9px;box-shadow:0 12px 32px rgba(0,0,0,.22);font-size:.76rem;opacity:0;transform:translateY(8px);pointer-events:none;transition:.2s}.preview-change-note.show{opacity:1;transform:none}


/* v13: restore independent scrolling inside the mobile preview device */
.iphone,
.iphone-frame,
.phone-frame {
  overflow: hidden;
}

.iphone-screen {
  position: relative;
  height: 100%;
  min-height: 0;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  touch-action: pan-y;
}

.iphone-screen::-webkit-scrollbar {
  width: 5px;
}

.iphone-screen::-webkit-scrollbar-thumb {
  background: rgba(60,72,84,.28);
  border-radius: 999px;
}

.iphone-screen > * {
  flex-shrink: 0;
}

.phone-generated-modules {
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}


/* v14: mobile menu stacking + colour parity */
.iphone-screen {
  isolation: isolate;
}

.mobile-site-header {
  position: sticky;
  top: 0;
  z-index: 120;
  background: var(--phone-primary, #0c151e) !important;
}

.mobile-menu-toggle {
  position: relative;
  z-index: 131;
}

.mobile-menu-panel,
.mobile-menu,
.mobile-nav-panel {
  position: absolute !important;
  inset: 0 0 auto 0;
  top: 48px;
  z-index: 130 !important;
  background: var(--phone-primary, #0c151e) !important;
  color: var(--phone-on-accent, #fff) !important;
  box-shadow: 0 14px 32px rgba(0,0,0,.28);
  border-top: 1px solid rgba(255,255,255,.12);
}

.mobile-menu-panel a,
.mobile-menu a,
.mobile-nav-panel a {
  color: inherit !important;
  background: transparent !important;
}

.mobile-menu-panel::before,
.mobile-menu::before,
.mobile-nav-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: inherit;
}


/* v14: phone preview mirrors desktop composition, only scales it down */
.phone-generated-modules .preview-module {
  display: block !important;
}

.phone-generated-modules .preview-module--team,
.phone-generated-modules .preview-module--area,
.phone-generated-modules .preview-module--emergency,
.phone-generated-modules .preview-module--availability,
.phone-generated-modules .preview-module--finance {
  display: grid !important;
}

.phone-generated-modules [data-preview-component] {
  visibility: visible !important;
  opacity: 1 !important;
}

.phone-generated-modules .preview-module--projects .preview-project-grid,
.phone-generated-modules .preview-module--projects .preview-project-masonry,
.phone-generated-modules .preview-module--projects .preview-project-scroll {
  display: grid !important;
}


/* v15 semantic hero surfaces */
.live-demo-site[data-hero-surface="light-panel"] .live-demo-hero,
.iphone-screen[data-hero-surface="light-panel"] .mobile-preview-hero{
  background:var(--preview-bg,#f5f3ee)!important;color:var(--preview-text,#121820)!important
}
.live-demo-site[data-hero-surface="light-panel"] .demo-copy,
.live-demo-site[data-hero-surface="light-panel"] .demo-copy h2,
.live-demo-site[data-hero-surface="light-panel"] .demo-copy p,
.live-demo-site[data-hero-surface="light-panel"] .demo-copy li,
.iphone-screen[data-hero-surface="light-panel"] .mobile-preview-copy,
.iphone-screen[data-hero-surface="light-panel"] .mobile-preview-copy h3,
.iphone-screen[data-hero-surface="light-panel"] .mobile-preview-copy p,
.iphone-screen[data-hero-surface="light-panel"] .mobile-preview-copy li{
  color:var(--preview-text,var(--phone-text,#121820))!important;text-shadow:none!important
}
.live-demo-site[data-hero-surface="light-panel"] .demo-copy{
  background:var(--preview-bg,#f5f3ee)!important
}
.live-demo-site[data-hero-surface="light-panel"] .demo-copy>a,
.iphone-screen[data-hero-surface="light-panel"] .mobile-preview-copy>a{
  background:var(--preview-accent,var(--phone-accent,#13a9b5))!important;
  color:var(--preview-on-accent,var(--phone-on-accent,#fff))!important
}

.live-demo-site[data-hero-surface="dark-panel"] .live-demo-hero,
.iphone-screen[data-hero-surface="dark-panel"] .mobile-preview-hero{
  background:var(--preview-dark,var(--phone-dark,#0c151e))!important;color:#fff!important
}
.live-demo-site[data-hero-surface="dark-panel"] .demo-copy *,
.iphone-screen[data-hero-surface="dark-panel"] .mobile-preview-copy *{color:#fff!important}

.live-demo-site[data-hero-surface="image-overlay"] .live-demo-hero,
.iphone-screen[data-hero-surface="image-overlay"] .mobile-preview-hero{
  position:relative;color:#fff!important;
  background:linear-gradient(90deg,rgba(5,12,20,.84),rgba(5,12,20,.60) 42%,rgba(5,12,20,.10) 72%),
             linear-gradient(145deg,#68777d,#293943 70%)!important;overflow:hidden
}
.live-demo-site[data-hero-surface="image-overlay"] .demo-copy,
.iphone-screen[data-hero-surface="image-overlay"] .mobile-preview-copy{position:relative;z-index:2}
.live-demo-site[data-hero-surface="image-overlay"] .demo-copy h2,
.live-demo-site[data-hero-surface="image-overlay"] .demo-copy p,
.live-demo-site[data-hero-surface="image-overlay"] .demo-copy li,
.iphone-screen[data-hero-surface="image-overlay"] .mobile-preview-copy h3,
.iphone-screen[data-hero-surface="image-overlay"] .mobile-preview-copy p,
.iphone-screen[data-hero-surface="image-overlay"] .mobile-preview-copy li{
  color:#fff!important;text-shadow:0 1px 2px rgba(0,0,0,.3)
}

/* Split/asymmetric heroes explicitly render as flat copy panel + image frame */
.live-demo-site[data-hero-surface="light-panel"] .live-demo-hero .demo-image,
.live-demo-site[data-hero-surface="light-panel"] .live-demo-hero .hero-image,
.live-demo-site[data-hero-surface="light-panel"] .live-demo-hero .preview-hero-image{
  background:radial-gradient(circle at 72% 30%,rgba(255,255,255,.2),transparent 18%),
             linear-gradient(145deg,#74858c,#33434c 72%)!important;
  min-height:100%
}
.live-demo-site[data-site-theme="strong"][data-hero-surface="light-panel"] .demo-copy{
  background:color-mix(in srgb,var(--preview-bg) 92%,var(--preview-accent) 8%)!important;
  border-left:6px solid var(--preview-accent)
}

/* Menu/header always use a dark surface with white text */
.mobile-site-header,.mobile-menu-panel,.mobile-menu,.mobile-nav-panel{
  background:var(--phone-dark,var(--phone-primary,#0c151e))!important;color:#fff!important
}
.mobile-site-header .preview-brand-fallback,.mobile-menu-panel a,.mobile-menu a,.mobile-nav-panel a{color:#fff!important}
.mobile-menu-toggle span{background:#fff!important}


/* v16: mobile component parity hardening */
.iphone-screen {
  display: block !important;
}

.phone-generated-modules {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  flex: none !important;
}

.phone-generated-modules > .preview-module {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.phone-generated-modules > .preview-module.preview-module--team,
.phone-generated-modules > .preview-module.preview-module--area,
.phone-generated-modules > .preview-module.preview-module--emergency,
.phone-generated-modules > .preview-module.preview-module--availability,
.phone-generated-modules > .preview-module.preview-module--finance {
  display: grid !important;
}

/* Never let fixed/status chrome obscure the first or last generated module. */
.iphone-screen {
  padding-bottom: 12px;
}
.phone-generated-modules {
  padding-bottom: 70px !important;
}


/* v17: make service-specific component recipes visibly distinct in preview */
.live-demo-site [data-component-variant],
.iphone-screen [data-component-variant]{position:relative}
.live-demo-site [data-component-variant]::after{
  content:attr(data-component-variant);
  position:absolute;right:7px;top:7px;z-index:8;
  padding:2px 5px;border-radius:4px;background:rgba(8,18,28,.72);color:#fff;
  font:600 7px/1.2 Inter,system-ui,sans-serif;letter-spacing:.03em;opacity:.72
}
.iphone-screen [data-component-variant]::after{display:none}

/* Hero family differences */
.live-demo-site[data-hero-variant="slider-08"] .live-demo-hero::after{
  content:"01  •  02  •  03";position:absolute;z-index:5;right:18px;bottom:14px;
  color:#fff;background:rgba(0,0,0,.48);padding:5px 8px;border-radius:99px;font-size:8px
}
.live-demo-site[data-hero-variant="minimal-centred-05"] .live-demo-hero{
  grid-template-columns:1fr!important;text-align:center!important
}
.live-demo-site[data-hero-variant="minimal-centred-05"] .live-demo-hero .demo-copy{
  max-width:70%;margin:auto!important;border:0!important
}
.live-demo-site[data-hero-variant="asymmetric-04"] .live-demo-hero{
  grid-template-columns:42% 58%!important
}
.live-demo-site[data-hero-variant="project-focused-06"] .live-demo-hero{
  grid-template-columns:1fr!important
}
.live-demo-site[data-hero-variant="dark-cinematic-09"] .live-demo-hero .demo-copy{
  max-width:58%;padding-left:8%!important
}

/* Service family differences */
.live-demo-site [data-component-variant="numbered-list-06"] .preview-service-cards{
  display:block!important
}
.live-demo-site [data-component-variant="numbered-list-06"] .preview-service-cards article{
  display:grid!important;grid-template-columns:34px 1fr auto!important;
  min-height:auto!important;border-width:0 0 1px!important;border-radius:0!important;
  box-shadow:none!important;padding:12px 6px!important
}
.live-demo-site [data-component-variant="numbered-list-06"] .preview-service-cards article::before{
  content:counter(service-item,decimal-leading-zero);counter-increment:service-item;
  color:var(--preview-accent);font-weight:800
}
.live-demo-site [data-component-variant="numbered-list-06"] .preview-service-cards{counter-reset:service-item}
.live-demo-site [data-component-variant="image-cards-02"] .preview-service-cards,
.live-demo-site [data-component-variant="image-text-cards-07"] .preview-service-cards{
  grid-template-columns:repeat(3,1fr)!important
}
.live-demo-site [data-component-variant="image-cards-02"] .preview-service-cards article,
.live-demo-site [data-component-variant="image-text-cards-07"] .preview-service-cards article{
  min-height:115px!important;padding-top:58px!important;
  background:linear-gradient(180deg,#566871 0 48%,var(--preview-surface) 49%)!important
}
.live-demo-site [data-component-variant="price-from-09"] .preview-service-cards article::after{
  content:"From £85";display:block;margin-top:6px;color:var(--preview-accent);font-size:12px;font-weight:800
}
.live-demo-site [data-component-variant="service-faq-10"] .preview-service-cards{
  grid-template-columns:.8fr 1.2fr!important
}
.live-demo-site [data-component-variant="service-faq-10"] .preview-service-cards article:nth-child(n+3){display:none}
.live-demo-site [data-component-variant="before-after-11"] .preview-service-cards{
  grid-template-columns:1fr 1fr!important
}
.live-demo-site [data-component-variant="before-after-11"] .preview-service-cards article{
  min-height:140px!important;background:linear-gradient(90deg,#52636d 0 49%,#d9dddc 50% 100%)!important;color:#fff
}
.live-demo-site [data-component-variant="horizontal-rows-03"] .preview-service-cards{
  grid-template-columns:1fr!important
}
.live-demo-site [data-component-variant="horizontal-rows-03"] .preview-service-cards article{
  min-height:auto!important;border-radius:0!important;border-width:0 0 1px!important;box-shadow:none!important
}

/* Phone receives same component family transformations, simplified */
.iphone-screen [data-component-variant="numbered-list-06"] .preview-service-cards,
.iphone-screen [data-component-variant="horizontal-rows-03"] .preview-service-cards{display:block!important}
.iphone-screen [data-component-variant="numbered-list-06"] .preview-service-cards article,
.iphone-screen [data-component-variant="horizontal-rows-03"] .preview-service-cards article{
  min-height:auto!important;border-radius:0!important;border-width:0 0 1px!important
}
.iphone-screen [data-component-variant="image-cards-02"] .preview-service-cards article,
.iphone-screen [data-component-variant="image-text-cards-07"] .preview-service-cards article{
  background:linear-gradient(180deg,#566871 0 42%,var(--phone-surface,#fff) 43%)!important;padding-top:38px!important
}
.iphone-screen [data-component-variant="before-after-11"] .preview-service-cards article{
  background:linear-gradient(90deg,#52636d 0 49%,#d9dddc 50% 100%)!important;color:#fff
}


/* v18: render actual 123-library HTML in live previews */
.has-rich-preview > .live-demo-hero,
.has-rich-preview > .preview-section-strip,
.has-rich-preview > .preview-generated-modules,
.has-rich-preview .mobile-site-scroll > .mobile-preview-hero,
.has-rich-preview .mobile-site-scroll > .preview-pages,
.has-rich-preview > .phone-generated-modules {
  display:none !important;
}

.rich-preview-components{
  --tb-container-width:100%;
  --tb-page-gutter:18px;
  --tb-section-space:30px;
  --tb-theme-section-space:30px;
  --tb-theme-hero-min-height:300px;
  --tb-theme-content-width:100%;
  --tb-theme-grid-gap:10px;
  --tb-font-size-hero:clamp(24px,4vw,42px);
  background:var(--preview-bg,#f5f3ee);
  color:var(--preview-text,#121820);
}
.rich-component-block{position:relative;overflow:hidden}
.rich-variant-label{
  position:absolute;z-index:70;right:7px;top:7px;
  padding:3px 6px;border-radius:4px;background:rgba(3,12,20,.78);color:#fff;
  font:700 7px/1.15 Inter,system-ui,sans-serif;letter-spacing:.04em;
  pointer-events:none
}
.rich-component-block .tb-section{padding-block:30px}
.rich-component-block .tb-hero{min-height:300px}
.rich-component-block .tb-hero__media{min-height:300px}
.rich-component-block .tb-title{font-size:clamp(22px,4vw,40px)}
.rich-component-block .tb-copy{font-size:12px}
.rich-component-block .tb-media{min-height:150px}
.rich-component-block .tb-btn{font-size:9px;min-height:34px;padding:.55rem .75rem}
.rich-component-block .tb-card{font-size:10px}
.rich-component-block .tb-service{padding:16px}
.rich-component-block .tb-service h3{font-size:13px}
.rich-component-block .tb-feature .tb-media{min-height:260px}
.rich-component-block .tb-case{min-height:300px}
.rich-component-block .tb-carousel .tb-media{min-height:270px}
.rich-component-block .tb-gallery .tb-media{min-height:110px}
.rich-component-block .tb-project-masonry{grid-auto-rows:100px}
.rich-component-block .tb-project-overlay{min-height:280px}
.rich-component-block .tb-person-quote .tb-media{min-height:240px}
.rich-component-block .tb-team-photo{min-height:330px}
.rich-component-block .tb-map-panel{min-height:300px}
.rich-component-block .tb-radius-map{min-height:280px}

/* Theme CSS is already loaded; host data-site-theme styles these actual components. */
.live-demo-site[data-site-theme=showcase] .rich-preview-components .tb-media{
  border-radius:2px
}
.live-demo-site[data-site-theme=refined] .rich-preview-components .tb-section{
  padding-block:42px
}
.live-demo-site[data-site-theme=strong] .rich-preview-components .tb-title{
  font-weight:800
}
.live-demo-site[data-site-theme=editorial] .rich-preview-components .tb-title{
  font-family:Georgia,"Times New Roman",serif
}

/* Mobile uses the identical HTML but forced container-responsive layout at phone-frame width. */
.phone-rich-preview-components{
  --tb-page-gutter:7px;
  --tb-section-space:13px;
  --tb-theme-section-space:13px;
  --tb-theme-hero-min-height:180px;
  --tb-theme-grid-gap:5px;
  --tb-theme-card-radius:6px;
  --tb-theme-image-radius:6px;
  --tb-font-size-hero:18px;
  padding-bottom:70px;
  background:var(--phone-bg,#f5f3ee);
  color:var(--phone-text,#121820);
}
.phone-rich-preview-components .rich-variant-label{font-size:4px;padding:2px 3px;right:3px;top:3px}
.phone-rich-preview-components .tb-container{width:100%;padding-inline:7px}
.phone-rich-preview-components .tb-section{padding-block:13px}
.phone-rich-preview-components .tb-title{font-size:13px!important;line-height:1.1}
.phone-rich-preview-components h3{font-size:8px!important}
.phone-rich-preview-components p,
.phone-rich-preview-components li,
.phone-rich-preview-components small,
.phone-rich-preview-components a{font-size:6px!important;line-height:1.3}
.phone-rich-preview-components .tb-btn{font-size:5px!important;min-height:20px!important;padding:4px 6px!important}
.phone-rich-preview-components .tb-hero,
.phone-rich-preview-components .tb-hero.split,
.phone-rich-preview-components .tb-hero.asym{
  min-height:180px!important;grid-template-columns:1fr!important
}
.phone-rich-preview-components .tb-hero__copy{padding:18px 10px!important;max-width:100%!important}
.phone-rich-preview-components .tb-hero__media{min-height:90px!important}
.phone-rich-preview-components .tb-services.icons,
.phone-rich-preview-components .tb-services.images,
.phone-rich-preview-components .tb-test-cards,
.phone-rich-preview-components .tb-gallery.standard,
.phone-rich-preview-components .tb-lightbox-grid,
.phone-rich-preview-components .tb-hover-services,
.phone-rich-preview-components .tb-stat-grid{
  grid-template-columns:1fr 1fr!important
}
.phone-rich-preview-components .tb-service-alt,
.phone-rich-preview-components .tb-feature,
.phone-rich-preview-components .tb-review,
.phone-rich-preview-components .tb-person-quote,
.phone-rich-preview-components .tb-cta.split,
.phone-rich-preview-components .tb-project-detail,
.phone-rich-preview-components .tb-form-cta,
.phone-rich-preview-components .tb-google-wall,
.phone-rich-preview-components .tb-rating-layout,
.phone-rich-preview-components .tb-service-faq,
.phone-rich-preview-components .tb-service-ba,
.phone-rich-preview-components .tb-owner-layout,
.phone-rich-preview-components .tb-local-story,
.phone-rich-preview-components .tb-insurance-layout,
.phone-rich-preview-components .tb-manufacturer-layout{
  grid-template-columns:1fr!important
}
.phone-rich-preview-components .tb-service{padding:7px!important}
.phone-rich-preview-components .tb-icon{width:22px!important;height:22px!important;font-size:5px;margin-bottom:4px}
.phone-rich-preview-components .tb-media{min-height:55px!important}
.phone-rich-preview-components .tb-feature .tb-media{min-height:110px!important}
.phone-rich-preview-components .tb-feature .panel{margin:-20px 6px 0!important;padding:8px!important}
.phone-rich-preview-components .tb-case{min-height:150px!important;padding:12px!important}
.phone-rich-preview-components .tb-carousel .tb-media{min-height:140px!important}
.phone-rich-preview-components .tb-gallery.masonry,
.phone-rich-preview-components .tb-editorial,
.phone-rich-preview-components .tb-project-masonry,
.phone-rich-preview-components .tb-justified{
  grid-template-columns:1fr 1fr!important;grid-auto-rows:45px!important
}
.phone-rich-preview-components .tb-hscroll{grid-auto-columns:72%!important}
.phone-rich-preview-components .tb-project-overlay{min-height:140px!important}
.phone-rich-preview-components .tb-project-overlay__copy{padding:8px!important;min-width:82%!important}
.phone-rich-preview-components .tb-review-stack{gap:4px}
.phone-rich-preview-components .tb-review-mini{padding:5px!important;grid-template-columns:18px 1fr!important}
.phone-rich-preview-components .tb-rating-large{font-size:18px!important}
.phone-rich-preview-components .tb-accreditations{gap:4px!important;margin-top:6px!important}
.phone-rich-preview-components .tb-accreditations>div{min-width:45px!important;height:35px!important;font-size:4px!important}
.phone-rich-preview-components .tb-guarantees,
.phone-rich-preview-components .tb-proof-counters{grid-template-columns:1fr 1fr!important}
.phone-rich-preview-components .tb-team-photo{min-height:170px!important}
.phone-rich-preview-components .tb-team-values{grid-template-columns:1fr 1fr!important;padding:5px!important}
.phone-rich-preview-components .tb-map-panel{min-height:170px!important;grid-template-columns:1fr!important}
.phone-rich-preview-components .tb-map-art{min-height:110px!important}
.phone-rich-preview-components .tb-map-card{margin:5px!important;padding:7px!important}
.phone-rich-preview-components .tb-radius-map{min-height:140px!important}
.phone-rich-preview-components .tb-seasonal-booking{grid-template-columns:1fr!important;padding:8px!important}
.phone-rich-preview-components .tb-seasonal-icon{font-size:20px!important}
.phone-rich-preview-components .tb-payment-stages{grid-template-columns:1fr!important}
.phone-rich-preview-components .tb-conversion-main{grid-template-columns:1fr!important}
.phone-rich-preview-components .tb-conversion-proof{display:none!important}

/* The old approximation is hidden; actual component library is the visual source of truth. */
.preview-generated-modules,.phone-generated-modules{display:none!important}


/* v19: hero structure must visibly change when style changes */
.rich-component-block--hero[data-rich-variant="split-01"] .tb-hero{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
}
.rich-component-block--hero[data-rich-variant="split-01"] .tb-hero__copy{
  background:var(--tb-colour-surface)!important;
  color:var(--tb-colour-text)!important;
}

.rich-component-block--hero[data-rich-variant="text-overlay-07"] .tb-hero{
  display:flex!important;
  align-items:center!important;
  min-height:340px!important;
  background:
    linear-gradient(90deg,rgba(5,12,20,.88),rgba(5,12,20,.45) 55%,rgba(5,12,20,.06)),
    linear-gradient(145deg,#4e626d,#1f303a)!important;
  color:#fff!important;
}
.rich-component-block--hero[data-rich-variant="text-overlay-07"] .tb-hero__copy{
  max-width:58%!important;
  margin:0!important;
  padding:38px!important;
}

.rich-component-block--hero[data-rich-variant="asymmetric-04"] .tb-hero{
  display:grid!important;
  grid-template-columns:42% 58%!important;
}
.rich-component-block--hero[data-rich-variant="asymmetric-04"] .tb-hero__media{
  clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)!important;
}

.rich-component-block--hero[data-rich-variant="minimal-centred-05"] .tb-hero{
  display:grid!important;
  grid-template-columns:1fr!important;
  place-items:center!important;
  text-align:center!important;
  min-height:300px!important;
}
.rich-component-block--hero[data-rich-variant="minimal-centred-05"] .tb-hero__copy{
  max-width:72%!important;
  margin:auto!important;
}

.rich-component-block--hero[data-rich-variant="project-focused-06"] .tb-hero{
  display:flex!important;
  align-items:flex-end!important;
  min-height:340px!important;
  padding-bottom:28px!important;
  background:
    linear-gradient(0deg,rgba(4,10,16,.90),rgba(4,10,16,.12) 70%),
    linear-gradient(145deg,#60747d,#23353e)!important;
}
.rich-component-block--hero[data-rich-variant="project-focused-06"] .tb-hero__copy{
  margin:0!important;
  max-width:68%!important;
}

.rich-component-block--hero[data-rich-variant="dark-cinematic-09"] .tb-hero{
  display:flex!important;
  align-items:center!important;
  min-height:360px!important;
  background:
    radial-gradient(circle at 78% 25%,rgba(185,138,66,.25),transparent 20%),
    linear-gradient(90deg,#07111b 0 48%,#263d4c 100%)!important;
}
.rich-component-block--hero[data-rich-variant="dark-cinematic-09"] .tb-title{
  font-size:clamp(28px,5vw,52px)!important;
  line-height:.95!important;
}

.rich-component-block--hero[data-rich-variant="full-image-02"] .tb-hero{
  display:flex!important;
  align-items:center!important;
  min-height:350px!important;
  background:
    linear-gradient(0deg,rgba(4,10,16,.72),rgba(4,10,16,.20)),
    linear-gradient(145deg,#819198,#34454f)!important;
  color:#fff!important;
}
.rich-component-block--hero[data-rich-variant="full-image-02"] .tb-hero__copy{
  text-align:center!important;
  margin:auto!important;
}

.rich-component-block--hero[data-rich-variant="slider-08"] .tb-hero{
  min-height:350px!important;
}
.rich-component-block--hero[data-rich-variant="slider-08"] .slide.active{
  display:flex!important;
  min-height:350px!important;
  align-items:center!important;
  background:
    linear-gradient(90deg,rgba(5,12,20,.80),rgba(5,12,20,.10)),
    linear-gradient(145deg,#526875,#23343e)!important;
}
.rich-component-block--hero[data-rich-variant="slider-08"] .tb-slider-controls{
  display:flex!important;
}

.rich-component-block--hero[data-rich-variant="video-background-03"] .tb-hero{
  display:flex!important;
  align-items:center!important;
  min-height:350px!important;
  background:
    radial-gradient(circle at 78% 50%,rgba(255,255,255,.15),transparent 10%),
    linear-gradient(90deg,rgba(3,9,15,.86),rgba(3,9,15,.28)),
    linear-gradient(145deg,#5d6d75,#263640)!important;
}
.rich-component-block--hero[data-rich-variant="video-background-03"] .tb-btn::before{
  content:"▶";
  margin-right:5px;
}

/* phone preserves the same structural identity rather than flattening all heroes */
.phone-rich-preview-components .rich-component-block--hero[data-rich-variant="split-01"] .tb-hero{
  grid-template-columns:1fr 1fr!important;
  min-height:150px!important;
}
.phone-rich-preview-components .rich-component-block--hero[data-rich-variant="asymmetric-04"] .tb-hero{
  grid-template-columns:44% 56%!important;
  min-height:160px!important;
}
.phone-rich-preview-components .rich-component-block--hero[data-rich-variant="minimal-centred-05"] .tb-hero{
  grid-template-columns:1fr!important;
  min-height:145px!important;
}
.phone-rich-preview-components .rich-component-block--hero[data-rich-variant="text-overlay-07"] .tb-hero,
.phone-rich-preview-components .rich-component-block--hero[data-rich-variant="project-focused-06"] .tb-hero,
.phone-rich-preview-components .rich-component-block--hero[data-rich-variant="dark-cinematic-09"] .tb-hero,
.phone-rich-preview-components .rich-component-block--hero[data-rich-variant="full-image-02"] .tb-hero,
.phone-rich-preview-components .rich-component-block--hero[data-rich-variant="video-background-03"] .tb-hero{
  min-height:165px!important;
}
.phone-rich-preview-components .rich-component-block--hero[data-rich-variant="text-overlay-07"] .tb-hero__copy,
.phone-rich-preview-components .rich-component-block--hero[data-rich-variant="project-focused-06"] .tb-hero__copy{
  max-width:78%!important;
  padding:12px!important;
}


/* v20: actual component renderer is the preview site */
#liveSite > :not(#desktopRenderedSite),
#mobileSiteScroll > :not(#mobileRenderedSite) {
  display: none !important;
}

.component-site-host {
  width: 100%;
  min-height: 100%;
  background: var(--tb-colour-bg, #f5f3ee);
  color: var(--tb-colour-text, #121820);
}

.rendered-site {
  width: 100%;
  min-height: 100%;
  overflow: hidden;
}

.rendered-site-component {
  position: relative;
}

/* Testing label; intentionally visible only on desktop. */
.component-site-host--desktop .rich-variant-label {
  display: block;
}
.component-site-host--mobile .rich-variant-label {
  display: none !important;
}

/* Desktop preview scale: preserve meaningful layout differences. */
.component-site-host--desktop {
  --tb-container-width: 100%;
  --tb-page-gutter: 26px;
  --tb-section-space: 54px;
  --tb-theme-section-space: 54px;
  --tb-theme-content-width: 100%;
  --tb-theme-hero-min-height: 390px;
  --tb-theme-grid-gap: 16px;
  --tb-font-size-hero: clamp(30px, 4.5vw, 58px);
}
.component-site-host--desktop .tb-container {
  width: min(calc(100% - 52px), 100%);
}
.component-site-host--desktop .tb-section {
  padding-block: var(--tb-theme-section-space,54px);
}
.component-site-host--desktop .tb-hero {
  min-height: var(--tb-theme-hero-min-height,390px);
}
.component-site-host--desktop .tb-media {
  min-height: 180px;
}
.component-site-host--desktop .tb-hero__media {
  min-height: 390px;
}
.component-site-host--desktop .tb-card {
  min-width: 0;
}

/* Hero variants are allowed to be dramatically different. */
.component-site-host--desktop [data-variant="split-01"] {
  min-height: 390px;
}
.component-site-host--desktop [data-variant="full-image-02"],
.component-site-host--desktop [data-variant="video-background-03"],
.component-site-host--desktop [data-variant="project-focused-06"],
.component-site-host--desktop [data-variant="text-overlay-07"],
.component-site-host--desktop [data-variant="slider-08"],
.component-site-host--desktop [data-variant="dark-cinematic-09"] {
  min-height: 430px;
}
.component-site-host--desktop [data-variant="minimal-centred-05"] {
  min-height: 320px;
}
.component-site-host--desktop [data-variant="asymmetric-04"] {
  min-height: 400px;
}

/* Do not let old preview CSS flatten real library hero structures. */
.component-site-host .tb-component--hero.tb-hero.split {
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
}
.component-site-host .tb-component--hero.tb-hero.asym,
.component-site-host [data-variant="asymmetric-04"] {
  display:grid !important;
  grid-template-columns:42% 58% !important;
}
.component-site-host [data-variant="minimal-centred-05"] {
  display:grid !important;
  grid-template-columns:1fr !important;
  place-items:center !important;
  text-align:center !important;
}
.component-site-host [data-variant="slider-08"] .slide {
  min-height:430px;
}
.component-site-host [data-variant="slider-08"] .slide.active {
  display:flex !important;
  align-items:center !important;
}
.component-site-host [data-variant="video-background-03"]::after {
  content:"▶";
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:58px;height:58px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(255,255,255,.88);color:#111;
  font-size:18px;z-index:5;
}
.component-site-host [data-variant="project-focused-06"] .tb-hero__copy {
  align-self:end;
}
.component-site-host [data-variant="dark-cinematic-09"] .tb-title {
  line-height:.92;
  letter-spacing:-.04em;
}

/* Phone: exact same tree, but genuine responsive adaptation. */
.component-site-host--mobile {
  --tb-container-width:100%;
  --tb-page-gutter:8px;
  --tb-section-space:18px;
  --tb-theme-section-space:18px;
  --tb-theme-content-width:100%;
  --tb-theme-hero-min-height:190px;
  --tb-theme-grid-gap:6px;
  --tb-font-size-hero:18px;
  font-size:7px;
  padding-bottom:42px;
}
.component-site-host--mobile .tb-container {
  width:100%;
  padding-inline:8px;
}
.component-site-host--mobile .tb-section {
  padding-block:18px;
}
.component-site-host--mobile h1,
.component-site-host--mobile .tb-title {
  font-size:16px !important;
  line-height:1.05 !important;
}
.component-site-host--mobile h2 { font-size:13px !important; }
.component-site-host--mobile h3 { font-size:9px !important; }
.component-site-host--mobile p,
.component-site-host--mobile li,
.component-site-host--mobile small,
.component-site-host--mobile a {
  font-size:6px !important;
  line-height:1.3 !important;
}
.component-site-host--mobile .tb-btn {
  min-height:22px !important;
  padding:4px 7px !important;
  font-size:5px !important;
}
.component-site-host--mobile .tb-media {
  min-height:70px !important;
}

/* preserve hero identities on phone */
.component-site-host--mobile .tb-component--hero.tb-hero.split {
  grid-template-columns:1fr 1fr !important;
  min-height:180px !important;
}
.component-site-host--mobile [data-variant="asymmetric-04"] {
  grid-template-columns:44% 56% !important;
  min-height:180px !important;
}
.component-site-host--mobile [data-variant="minimal-centred-05"] {
  grid-template-columns:1fr !important;
  min-height:155px !important;
}
.component-site-host--mobile [data-variant="full-image-02"],
.component-site-host--mobile [data-variant="video-background-03"],
.component-site-host--mobile [data-variant="project-focused-06"],
.component-site-host--mobile [data-variant="text-overlay-07"],
.component-site-host--mobile [data-variant="slider-08"],
.component-site-host--mobile [data-variant="dark-cinematic-09"] {
  min-height:190px !important;
}
.component-site-host--mobile [data-variant="slider-08"] .slide {
  min-height:190px !important;
}
.component-site-host--mobile [data-variant="video-background-03"]::after {
  width:28px;height:28px;font-size:9px;
}

/* Core responsive grids inside the phone frame */
.component-site-host--mobile .tb-grid,
.component-site-host--mobile .tb-services.icons,
.component-site-host--mobile .tb-services.images,
.component-site-host--mobile .tb-hover-services,
.component-site-host--mobile .tb-recent-reviews,
.component-site-host--mobile .tb-guarantees,
.component-site-host--mobile .tb-proof-counters,
.component-site-host--mobile .tb-small-team,
.component-site-host--mobile .tb-town-grid,
.component-site-host--mobile .tb-service-prices,
.component-site-host--mobile .tb-process-three,
.component-site-host--mobile .tb-process-horizontal,
.component-site-host--mobile .tb-process-illustrated {
  grid-template-columns:1fr 1fr !important;
}
.component-site-host--mobile .tb-service-alt,
.component-site-host--mobile .tb-feature,
.component-site-host--mobile .tb-review,
.component-site-host--mobile .tb-person-quote,
.component-site-host--mobile .tb-project-detail,
.component-site-host--mobile .tb-form-cta,
.component-site-host--mobile .tb-google-wall,
.component-site-host--mobile .tb-rating-layout,
.component-site-host--mobile .tb-service-faq,
.component-site-host--mobile .tb-service-ba,
.component-site-host--mobile .tb-owner-layout,
.component-site-host--mobile .tb-local-story,
.component-site-host--mobile .tb-insurance-layout,
.component-site-host--mobile .tb-manufacturer-layout,
.component-site-host--mobile .tb-map-panel,
.component-site-host--mobile .tb-radius-layout {
  grid-template-columns:1fr !important;
}
.component-site-host--mobile .tb-project-masonry,
.component-site-host--mobile .tb-justified,
.component-site-host--mobile .tb-editorial {
  grid-template-columns:1fr 1fr !important;
  grid-auto-rows:48px !important;
}
.component-site-host--mobile .tb-project-masonry .tb-media,
.component-site-host--mobile .tb-justified .tb-media {
  min-height:48px !important;
}
.component-site-host--mobile .tb-hscroll {
  grid-auto-columns:72% !important;
}
.component-site-host--mobile .tb-team-photo {
  min-height:180px !important;
}
.component-site-host--mobile .tb-map-art,
.component-site-host--mobile .tb-radius-map {
  min-height:120px !important;
}

/* actual component headers inside phone */
.component-site-host--mobile .tb-header {
  min-height:38px !important;
  padding:5px 8px !important;
}
.component-site-host--mobile .tb-header nav {
  display:none !important;
}
.component-site-host--mobile .tb-header .tb-btn {
  display:none !important;
}

.rich-preview-components,
.phone-rich-preview-components,
.preview-generated-modules,
.phone-generated-modules {
  display:none !important;
}


/* v21: component renderer is the only preview content */
#liveSite > [hidden],
#mobileSiteScroll > [hidden] {
  display: none !important;
}

#desktopRenderedSite,
#mobileRenderedSite {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* A tiny renderer marker while testing. */
#liveSite[data-renderer="component-library"]::before {
  content: "component preview";
  position: sticky;
  top: 0;
  z-index: 200;
  float: right;
  margin: 4px 6px -18px 0;
  padding: 2px 5px;
  border-radius: 4px;
  background: rgba(7,18,28,.72);
  color: #fff;
  font: 600 6px/1.2 Inter,system-ui,sans-serif;
  pointer-events: none;
}

/* Desktop hero families are intentionally not normalised to one silhouette. */
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="split-01"] .tb-hero {
  grid-template-columns: 44% 56% !important;
  min-height: 360px !important;
}
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="split-01"] .tb-hero__copy {
  padding: 46px 32px !important;
}
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="split-01"] .tb-hero__media {
  min-height: 360px !important;
}

.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="asymmetric-04"] .tb-hero {
  grid-template-columns: 34% 66% !important;
  min-height: 410px !important;
}
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="asymmetric-04"] .tb-hero__copy {
  padding: 54px 22px 54px 34px !important;
}
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="asymmetric-04"] .tb-hero__media {
  min-height: 410px !important;
  clip-path: polygon(22% 0,100% 0,100% 100%,0 100%) !important;
}

.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="minimal-centred-05"] .tb-hero {
  min-height: 285px !important;
  place-items: center !important;
  background: var(--tb-colour-surface) !important;
}
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="minimal-centred-05"] .tb-hero__copy {
  max-width: 72% !important;
  padding: 58px 26px !important;
}

.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="full-image-02"] .tb-hero,
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="video-background-03"] .tb-hero,
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="text-overlay-07"] .tb-hero,
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="project-focused-06"] .tb-hero,
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="dark-cinematic-09"] .tb-hero {
  min-height: 440px !important;
}

.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="full-image-02"] .tb-hero__copy {
  margin-inline: auto !important;
  max-width: 70% !important;
  text-align: center !important;
  padding: 70px 30px !important;
}

.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="video-background-03"] .tb-hero__copy {
  max-width: 62% !important;
  padding: 64px 34px !important;
}
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="video-background-03"] .tb-hero::after {
  content: "▶";
  position: absolute;
  right: 11%;
  top: 50%;
  transform: translateY(-50%);
  width: 74px;
  height: 74px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.92);
  color: #111;
  font-size: 22px;
  box-shadow: 0 12px 36px rgba(0,0,0,.24);
}

.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="text-overlay-07"] .tb-hero__copy {
  max-width: 55% !important;
  margin: 0 !important;
  padding: 70px 34px !important;
}

.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="project-focused-06"] .tb-hero {
  align-items: end !important;
}
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="project-focused-06"] .tb-hero__copy {
  max-width: 66% !important;
  padding: 34px !important;
  margin: 0 0 28px 28px !important;
  background: rgba(5,12,20,.62);
  backdrop-filter: blur(7px);
}

.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="slider-08"] .tb-hero {
  min-height: 460px !important;
}
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="slider-08"] .slide {
  min-height: 460px !important;
}
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="slider-08"] .slide.active {
  display: flex !important;
}
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="slider-08"] .tb-slider-controls {
  display: flex !important;
}

.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="dark-cinematic-09"] .tb-hero__copy {
  max-width: 52% !important;
  margin: 0 !important;
  padding: 62px 38px !important;
}
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="dark-cinematic-09"] .tb-title {
  font-size: clamp(36px,6vw,66px) !important;
  line-height: .88 !important;
}

/* Make image/video placeholders visually distinct in the desktop renderer. */
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="full-image-02"] .tb-hero {
  background:
    linear-gradient(0deg,rgba(5,12,20,.58),rgba(5,12,20,.22)),
    radial-gradient(circle at 65% 32%,rgba(255,255,255,.18),transparent 18%),
    linear-gradient(145deg,#71828a,#30424d) !important;
}
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="video-background-03"] .tb-hero {
  background:
    linear-gradient(90deg,rgba(4,10,16,.86),rgba(4,10,16,.20)),
    radial-gradient(circle at 76% 40%,rgba(41,169,181,.28),transparent 18%),
    linear-gradient(145deg,#566c78,#1e303c) !important;
}
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="project-focused-06"] .tb-hero {
  background:
    linear-gradient(0deg,rgba(4,10,16,.80),rgba(4,10,16,.06) 65%),
    linear-gradient(145deg,#87969b,#374a54) !important;
}
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="text-overlay-07"] .tb-hero {
  background:
    linear-gradient(90deg,rgba(4,10,16,.92) 0 42%,rgba(4,10,16,.20) 75%),
    linear-gradient(145deg,#657a83,#243641) !important;
}
.component-site-host--desktop .rendered-site-component--hero[data-rendered-variant="dark-cinematic-09"] .tb-hero {
  background:
    radial-gradient(circle at 80% 25%,rgba(185,138,66,.24),transparent 18%),
    linear-gradient(90deg,#07101a 0 50%,#2a404e 100%) !important;
}


/* v25 clean Desktop / Mobile preview switch */
.preview-device-toggle{
  display:inline-flex;
  vertical-align:middle;
  margin-left:12px;
  padding:3px;
  gap:2px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  background:rgba(255,255,255,.06);
}
.preview-device-toggle button{
  border:0;
  background:transparent;
  color:rgba(255,255,255,.72);
  padding:5px 8px;
  border-radius:6px;
  font-size:.62rem;
  line-height:1;
  cursor:pointer;
}
.preview-device-toggle button.active{
  background:#fff;
  color:#092039;
}
.preview-device-hidden{
  display:none!important;
}
.preview-device-standalone{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  margin:18px auto!important;
  z-index:1!important;
}


/* v26 preview toolbar alignment */
.preview-device-toggle{
  align-items:center;
  height:28px;
  box-sizing:border-box;
}
.preview-device-toggle button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  line-height:1;
  padding:0 8px;
}


/* v28: the original phone-frame preview chrome no longer provides site navigation.
   The production component tree inside #mobileRenderedSite owns the header. */
#livePhone > .mobile-site-header,
#livePhone > .mobile-preview-menu{
  display:none!important;
}
#mobileSiteScroll{
  top:auto!important;
}

/* The phone's site content starts directly beneath the iOS status bar. */
#livePhone .mobile-site-scroll{
  height:calc(100% - 24px)!important;
  min-height:0!important;
}


/* v29 real-mobile viewport inside decorative phone */
.iphone-screen{
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
#mobileRenderedSite{
  position:relative!important;
  display:block!important;
  min-height:0!important;
  overflow:visible!important;
}
.preview-device-standalone #mobileRenderedSite{
  transform-origin:top center!important;
}


/* v30: legacy phone-frame header/menu is decorative only and hidden */
.iphone > .mobile-site-header,
.iphone-frame > .mobile-site-header,
.phone-frame > .mobile-site-header,
.iphone > .mobile-menu,
.iphone-frame > .mobile-menu,
.phone-frame > .mobile-menu{
  display:none!important;
  pointer-events:none!important;
}


/* v31: when Mobile is selected, make it a useful readable preview rather than
   a tiny decorative phone overlapping the desktop browser. */
.preview-device-standalone{
  width:340px!important;
  max-width:340px!important;
  margin:18px auto!important;
}
.preview-device-standalone .iphone-screen{
  width:100%!important;
}
.preview-device-standalone #mobileRenderedSite{
  transform-origin:top left!important;
}

/* Decorative side-by-side phone can remain smaller if ever shown, but the
   dedicated Mobile toggle gets most of the panel width. */
@media(min-width:900px){
  .preview-device-standalone{
    width:360px!important;
    max-width:360px!important;
  }
}