/* multi-import:brand-layer:start - managed by Tools > Multi Import; edits inside are replaced on re-import */
/* Tiles Experts overrides.css - only documented tokens (see references/style.md).
   Palette matches the brand logo (logo-2-color-palette.txt): Deep Navy, Golden Amber,
   Warm Orange, Warm Ivory. Fonts: Sora Bold (700) for headings/brand, Manrope 400/500
   for body - self-hosted. Every colour token below carries !important so no other
   colour source (an inline style, a third-party plugin rule) can override the brand
   palette anywhere on the site. */

@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/sora-bold-700.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/manrope-regular-400.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/manrope-medium-500.woff2') format('woff2');}

:root{
  /* Fonts */
  --typography-family-heading:'Sora', Georgia, 'Times New Roman', serif !important;
  --typography-family-main:'Manrope', system-ui, -apple-system, sans-serif !important;
  --typography-weight-heading:700 !important;
  --typography-weight-regular:400 !important;
  --typography-weight-medium:500 !important;

  /* Brand hues: Warm Orange primary/accent/links (aliases). */
  --color-sienna:#EF6C35 !important;
  --color-sienna-deep:#C1521F !important;

  /* Tertiary: Golden Amber accent (badges, highlights - matches the map-graphic highlight colour). */
  --color-canadian-red:#FFB547 !important;
  --color-tertiary-dark:#B9761F !important;
  --color-tertiary-container:#FFF1D6 !important;
  --color-tertiary:#FFB547 !important;

  /* Direct role pins (belt and braces). */
  --color-primary:#EF6C35 !important;
  --color-accent:#EF6C35 !important;
  --color-accent-hover:#C1521F !important;
  --color-secondary:#C1521F !important;
  --color-link-text:#EF6C35 !important;
  --color-link-text-hover:#C1521F !important;

  /* Warm ivory paper ramp + deep navy ink (matches the logo palette). */
  --color-paper:#FFF8EA !important;
  --color-paper-tint:#FBF1DE !important;
  --color-paper-deep:#F3E6C9 !important;
  --color-rule:#E5DDD0 !important;
  --color-ink:#17324D !important;
  --color-ink-soft:#435A6E !important;
  --color-surface-container:#F6EAD3 !important;
  --color-surface-container-low:#FBF1DE !important;
  --color-surface-container-high:#F3E6C9 !important;
  --color-surface-container-highest:#E5DDD0 !important;
  --color-surface:#FFF8EA !important;
  --color-heading:#17324D !important;
  --color-main:#17324D !important;
  --color-paragraph:#435A6E !important;
  --color-on-surface:#17324D !important;

  /* Brand-named aliases (compatibility vocabulary) - pinned to the same palette. */
  --color-linen:#FFF8EA !important;
  --color-linen-tint:#FBF1DE !important;
  --color-linen-shade:#F3E6C9 !important;
  --color-walnut:#17324D !important;
  --color-baltic:#EF6C35 !important;
  --color-cerulean:#C1521F !important;
  --color-copper:#FFB547 !important;
}

/* Page background (theme.json base is overridden here). */
body{ background:#FFF8EA !important; }

/* Dark-section heading fix: hero banners sit on a dark or brand-coloured
   background, so force their headings back to a light colour (see style.md §7).
   (.block-cta-banner's heading/description colours are set directly inside
   the exact CTA component block below.) */
.block-carpet-hero :is(h1,h2,h3),
.block-hero :is(h1,h2,h3){ color:var(--color-on-primary) !important; }

/* ==========================================================================
   CTA banner - EXACT component, adapted from tiles-cta-exact.html.
   Selectors are remapped from the supplied tile-cta-* preview classes onto
   the theme's real rendered classes (.block-cta-banner outer section,
   .cta-banner inner panel, .cta-banner-heading/-description/-buttons/-button
   /-button-primary/-button-secondary), since this project ships block
   *content* (md-blogs/*.md) and *CSS* (this file) - it cannot inject new
   markup into the WordPress theme's block template. Every colour, size,
   gradient and spacing value below is copied verbatim from the exact file;
   only the selector names and one property (font-family, see note) differ.
   No images or SVGs - every texture is CSS gradients + mask-image.
   Heading/description copy, button labels, and links live in md-blogs/*.md
   and are completely untouched by this block.
   ========================================================================== */
.block-cta-banner{
  --tile-cta-orange:#e75221;
  --tile-cta-orange-dark:#c94317;
  --tile-cta-navy:#17324d;
  --tile-cta-white:#fffdf9;

  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  width:100vw;
  max-width:none !important;
  min-height:0;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:150px clamp(18px,4vw,64px) 90px;
  overflow:hidden;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  background-color:#f4f3ef;
  background-image:
    linear-gradient(
      112deg,
      rgba(255,255,255,.62) 0%,
      rgba(255,255,255,.08) 44%,
      rgba(206,208,204,.14) 100%
    );
  background-size:100% 100%;
  background-position:0 0;
}

/* Inner orange panel (.cta-banner is the theme's real inner wrapper). */
.cta-banner{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
  width:min(90vw,1800px);
  min-height:396px;
  margin:0 auto;
  padding:72px clamp(34px,6vw,96px);
  overflow:hidden;
  color:var(--tile-cta-white);
  text-align:center;
  background-color:var(--tile-cta-orange) !important;
  background-image:
    linear-gradient(135deg,rgba(255,255,255,.055),transparent 42%,rgba(116,34,10,.055)),
    linear-gradient(rgba(129,42,16,.42) 1.5px,transparent 1.5px),
    linear-gradient(90deg,rgba(129,42,16,.42) 1.5px,transparent 1.5px);
  background-size:100% 100%, 24px 24px, 24px 24px;
  border:5px solid var(--tile-cta-navy) !important;
  border-radius:0 !important;
  box-shadow:
    0 16px 30px rgba(23,50,77,.10),
    inset 0 1px rgba(255,255,255,.09) !important;
}

/* Second (2px) navy border line, inset 10px - decorative pseudo-element,
   since the exact file's <span class="tile-cta-inner-border"> can't be
   injected into the theme's block markup from this content package. */
.cta-banner::after{
  content:"";
  position:absolute;
  z-index:0;
  inset:10px;
  border:2px solid var(--tile-cta-navy);
  pointer-events:none;
}

.cta-banner-heading,
.cta-banner-description,
.cta-banner-buttons{
  position:relative;
  z-index:1;
}

.cta-banner-heading{
  max-width:1240px;
  margin:0 auto;
  color:var(--tile-cta-white) !important;
  font-size:clamp(42px,4.2vw,64px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-0.035em;
}

.cta-banner-description{
  max-width:900px;
  margin:20px auto 0;
  color:rgba(255,253,249,.94) !important;
  font-size:clamp(17px,1.35vw,21px);
  font-weight:400;
  line-height:1.55;
}

.cta-banner-buttons{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin-top:30px;
}

.cta-banner-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:230px;
  min-height:64px;
  padding:0 36px;
  border:2px solid var(--tile-cta-white);
  border-radius:999px !important;
  font-size:18px;
  font-weight:700;
  line-height:1;
  text-align:center;
  text-decoration:none;
  transition:transform 160ms ease,background-color 160ms ease,color 160ms ease,box-shadow 160ms ease;
}

.cta-banner-button-primary{
  background:var(--tile-cta-white) !important;
  color:var(--tile-cta-orange) !important;
  box-shadow:0 7px 14px rgba(87,26,7,.18);
}

.cta-banner-button-secondary{
  background:transparent !important;
  color:var(--tile-cta-white) !important;
}

.cta-banner-button:hover{ transform:translateY(-2px); }
.cta-banner-button-primary:hover{ background:#ffffff !important; box-shadow:0 10px 18px rgba(87,26,7,.24); }
.cta-banner-button-secondary:hover{ background:rgba(255,253,249,.12) !important; }
.cta-banner-button:focus-visible{ outline:3px solid #ffffff; outline-offset:4px; }

@media (max-width:900px){
  .block-cta-banner{ padding:96px 18px 72px; }
  .cta-banner{ width:100%; min-height:0; padding:64px 42px; }
}

@media (max-width:620px){
  .block-cta-banner{
    padding:58px 14px;
  }
  .cta-banner{ padding:58px 28px; border-width:4px !important; }
  .cta-banner::after{ inset:8px; }
  .cta-banner-heading{ font-size:clamp(34px,10vw,46px); line-height:1.1; }
  .cta-banner-buttons{ display:grid; grid-template-columns:minmax(0,1fr); gap:12px; }
  .cta-banner-button{ width:100%; min-width:0; min-height:58px; padding-inline:22px; }
}

@media (prefers-reduced-motion:reduce){
  .cta-banner-button{ transition:none; }
}

/* Kill the process-step connector line per build SOP. */
.process-step + .process-step::before{content:none !important;display:none !important;}

/* Flatten the "Most popular" pricing card's CTA button - no gradient, solid fill. */
.pricing-card.is-popular .pricing-card-cta{
  background-image:none !important;
  background-color:#ffb547 !important;
}
/* multi-import:brand-layer:end */