/* Norwa Chai — Franchise Page Styles
   Suggested container structure (example):
   ...
   ...
   ...
   ...
   ...
   ...
   ...
   ...
   ...
*/

/* -------------------------
   Variables  Base
   ------------------------- */
:root{
  --brand: #b33f2e;         /* Norwa Chai primary (tea-like) */
  --accent: #f5a623;        /* warm accent */
  --muted: #6b6b6b;
  --bg: #ffffff;
  --card-bg: #fff8f6;
  --text: #222222;
  --max-width: 1100px;
  --radius: 12px;
  --glass: rgba(255,255,255,0.7);
  --shadow-sm: 0 4px 12px rgba(16,24,40,0.06);
  --shadow-lg: 0 10px 30px rgba(16,24,40,0.12);
  --container-padding: 24px;
  --transition: 220ms cubic-bezier(.2,.9,.3,1);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* Reset basics */
*{box-sizing: border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--text);
  background:linear-gradient(180deg,#fff 0%, #fffaf9 100%);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  font-size:16px;
}

/* Utility container */
.container{
  width:100%;
  max-width:var(--max-width);
  margin:0 auto;
  padding: calc(var(--container-padding) * 0.6);
}

/* -------------------------
   Hero
   ------------------------- */
.franchise-hero{
  background: linear-gradient(90deg, rgba(179,63,46,0.06), rgba(245,166,35,0.03));
  padding:48px 0;
  border-bottom: 1px solid rgba(0,0,0,0.04);
}
.franchise-hero .hero-inner{
  display:flex;
  gap:32px;
  align-items:center;
  justify-content:space-between;
}
.hero-left{
  flex:1 1 60%;
}
.hero-title{
  font-size: clamp(22px, 3.6vw, 34px);
  margin:0 0 12px;
  font-weight:700;
  color:var(--brand);
}
.hero-subtitle{
  margin:0 0 18px;
  color:var(--muted);
  font-size:1.02rem;
}
.hero-ctas{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.btn{
  background:var(--brand);
  color:#fff;
  padding:12px 18px;
  border-radius:10px;
  border:0;
  cursor:pointer;
  font-weight:600;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition), box-shadow var(--transition), opacity var(--transition);
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.btn.secondary{
  background:transparent;
  color:var(--brand);
  border:1px solid rgba(179,63,46,0.12);
  box-shadow:none;
}
.btn:hover{ transform: translateY(-3px); box-shadow:var(--shadow-lg) }
.btn:focus{ outline:3px solid rgba(179,63,46,0.12); outline-offset:3px; }

/* small hero card on right */
.hero-card{
  flex:1 1 36%;
  background:var(--card-bg);
  padding:18px;
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  min-width:220px;
}
.hero-card h4{ margin:0 0 8px; font-size:1.05rem; color:var(--brand)}
.hero-card p{ margin:0; color:var(--muted); font-size:0.95rem}

/* -------------------------
   Intro / Why
   ------------------------- */
.franchise-intro{
  padding:36px 0;
}
.franchise-intro .lead{
  font-size:1.05rem;
  color:var(--muted);
  margin-bottom:18px;
}
.why-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:18px;
  margin-top:18px;
}
.why-card{
  background:#fff;
  border-radius:12px;
  padding:18px;
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(0,0,0,0.03);
}
.why-card h3{ margin:0 0 10px; color:var(--brand) }
.why-card p{ margin:0; color:var(--muted) }

/* -------------------------
   Features / Benefits Grid
   ------------------------- */
.features-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:18px;
  margin:28px 0;
}
.feature{
  background:linear-gradient(180deg,#fff,#fffaf7);
  padding:18px;
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  transition: transform var(--transition);
  border:1px solid rgba(179,63,46,0.04);
}
.feature:hover{ transform: translateY(-6px) }
.feature h4{ margin:0 0 8px; color:var(--brand) }
.feature p{ margin:0; color:var(--muted); font-size:0.95rem }

/* -------------------------
   Models / Cards
   ------------------------- */
.models{
  margin:26px 0;
}
.model-list{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}
.model{
  flex:1 1 30%;
  min-width:220px;
  background:#fff;
  border-radius:12px;
  padding:16px;
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(0,0,0,0.03);
}
.model h4{ margin:0 0 8px; color:var(--brand) }
.model p{ margin:0; color:var(--muted) }
.model .meta{ margin-top:12px; font-size:0.92rem; color:var(--muted) }

/* -------------------------
   Investment  CTA
   ------------------------- */
.investment{
  display:flex;
  gap:18px;
  margin:26px 0;
  align-items:flex-start;
}
.investment .invest-card{
  flex:1 1 45%;
  background:linear-gradient(90deg, rgba(245,166,35,0.03), #fff);
  padding:18px;
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(245,166,35,0.06);
}
.investment .invest-card h3{ color:var(--brand); margin:0 0 8px }
.investment .invest-list{
  list-style:none;
  padding:0;
  margin:12px 0 0;
}
.investment .invest-list li{
  padding:8px 0;
  border-bottom:1px dashed rgba(0,0,0,0.04);
  color:var(--muted);
}

/* CTA panel */
.franchise-cta{
  background: linear-gradient(90deg, rgba(179,63,46,0.06), rgba(0,0,0,0.01));
  padding:28px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:28px 0;
}
.franchise-cta h3{ margin:0; font-size:1.2rem; color:var(--brand) }
.franchise-cta p{ margin:0; color:var(--muted) }

/* -------------------------
   Form styles
   ------------------------- */
.franchise-form{
  margin:28px 0 56px;
  padding:18px;
  background:linear-gradient(180deg,#fff,#fffefc);
  border-radius:12px;
  box-shadow:var(--shadow-sm);
  border:1px solid rgba(0,0,0,0.03);
}
.franchise-form h3{ margin-top:0; color:var(--brand) }
.form-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
}
.input, textarea, select{
  width:100%;
  padding:12px 14px;
  border-radius:8px;
  border:1px solid rgba(0,0,0,0.08);
  font-size:0.95rem;
  color:var(--text);
  background:transparent;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.input:focus, textarea:focus, select:focus{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 6px 18px rgba(179,63,46,0.06);
}
textarea{ min-height:120px; resize:vertical; }
.form-row{ display:flex; gap:12px; align-items:center; }
.form-note{ font-size:0.9rem; color:var(-.wp-block-uagb-advanced-heading h1,.wp-block-uagb-advanced-heading h2,.wp-block-uagb-advanced-heading h3,.wp-block-uagb-advanced-heading h4,.wp-block-uagb-advanced-heading h5,.wp-block-uagb-advanced-heading h6,.wp-block-uagb-advanced-heading p,.wp-block-uagb-advanced-heading div{word-break:break-word}.wp-block-uagb-advanced-heading .uagb-heading-text{margin:0}.wp-block-uagb-advanced-heading .uagb-desc-text{margin:0}.wp-block-uagb-advanced-heading .uagb-separator{font-size:0;border-top-style:solid;display:inline-block;margin:0 0 10px 0}.wp-block-uagb-advanced-heading .uagb-highlight{color:#f78a0c;border:0;transition:all 0.3s ease}.uag-highlight-toolbar{border-left:0;border-top:0;border-bottom:0;border-radius:0;border-right-color:#1e1e1e}.uag-highlight-toolbar .components-button{border-radius:0;outline:none}.uag-highlight-toolbar .components-button.is-primary{color:#fff}
.wp-block-uagb-separator{text-align:center;box-sizing:border-box;line-height:0}.wp-block-uagb-separator__inner{display:inline-block}.wp-block-uagb-separator:not(.wp-block-uagb-separator--text):not(.wp-block-uagb-separator--icon) .wp-block-uagb-separator__inner{border-top-style:solid;-webkit-mask:var(--my-background-image);-webkit-mask-size:38px 100%;-webkit-mask-repeat:repeat-x}.wp-block-uagb-separator--text .wp-block-uagb-separator__inner,.wp-block-uagb-separator--icon .wp-block-uagb-separator__inner{display:flex;justify-content:center;align-items:center;margin:0 auto}.wp-block-uagb-separator--text .wp-block-uagb-separator__inner::before,.wp-block-uagb-separator--icon .wp-block-uagb-separator__inner::before{display:block;content:"";border-bottom:0;flex-grow:1;border-top-color:#333;border-top-style:solid;-webkit-mask:var(--my-background-image);-webkit-mask-size:38px 100%;-webkit-mask-repeat:repeat-x}.wp-block-uagb-separator--text .wp-block-uagb-separator__inner::after,.wp-block-uagb-separator--icon .wp-block-uagb-separator__inner::after{display:block;content:"";border-bottom:0;flex-grow:1;border-top-color:#333;border-top-style:solid;-webkit-mask:var(--my-background-image);-webkit-mask-size:38px 100%;-webkit-mask-repeat:repeat-x}.wp-block-uagb-separator--icon .wp-block-uagb-separator-element svg{font-size:30px;color:#333;fill:#333;width:30px;height:30px;line-height:30px;max-width:none}.wp-block-uagb-separator--text .wp-block-uagb-separator-element .uagb-html-tag{word-break:initial;margin:0}
.wp-block-uagb-advanced-heading.uagb-block-83cf226a.wp-block-uagb-advanced-heading {text-align: center;}.wp-block-uagb-advanced-heading.uagb-block-83cf226a.wp-block-uagb-advanced-heading .uagb-desc-text{margin-bottom: 15px;}.wp-block-uagb-advanced-heading.uagb-block-83cf226a.wp-block-uagb-advanced-heading .uagb-highlight{font-style: normal;font-weight: Default;background: #007cba;color: #fff;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-83cf226a.wp-block-uagb-advanced-heading .uagb-highlight::-moz-selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-83cf226a.wp-block-uagb-advanced-heading .uagb-highlight::selection{color: #fff;background: #007cba;-webkit-text-fill-color: #fff;}.wp-block-uagb-advanced-heading.uagb-block-83cf226a .uagb-heading-text{margin-bottom: 15px;}.uagb-block-7b16043e.wp-block-uagb-separator{text-align: center;}.uagb-block-7b16043e.wp-block-uagb-separator--text .wp-block-uagb-separator-element .uagb-html-tag{font-style: normal;line-height: 1em;}.uagb-block-7b16043e.wp-block-uagb-separator:not(.wp-block-uagb-separator--text):not(.wp-block-uagb-separator--icon) .wp-block-uagb-separator__inner{-webkit-mask-size: 5px 100%;border-top-width: 3px;width: 100%;border-top-style: solid;margin-top: 5px;margin-bottom: 5px;}@media only screen and (max-width: 976px) {.uagb-block-7b16043e.wp-block-uagb-separator{text-align: center;}.uagb-block-7b16043e.wp-block-uagb-separator--text .wp-block-uagb-separator-element .uagb-html-tag{font-style: normal;margin-bottom: initial;line-height: 1em;}.uagb-block-7b16043e.wp-block-uagb-separator:not(.wp-block-uagb-separator--text):not(.wp-block-uagb-separator--icon) .wp-block-uagb-separator__inner{-webkit-mask-size: 5px 100%;width: 100%;border-top-style: solid;margin-top: 5px;margin-bottom: 5px;}}@media only screen and (max-width: 767px) {.uagb-block-7b16043e.wp-block-uagb-separator{text-align: center;}.uagb-block-7b16043e.wp-block-uagb-separator--text .wp-block-uagb-separator-element .uagb-html-tag{font-style: normal;margin-bottom: initial;line-height: 1em;}.uagb-block-7b16043e.wp-block-uagb-separator:not(.wp-block-uagb-separator--text):not(.wp-block-uagb-separator--icon) .wp-block-uagb-separator__inner{-webkit-mask-size: 5px 100%;width: 100%;border-top-style: solid;margin-top: 5px;margin-bottom: 5px;}}.uag-blocks-common-selector{z-index:var(--z-index-desktop) !important}@media (max-width: 976px){.uag-blocks-common-selector{z-index:var(--z-index-tablet) !important}}@media (max-width: 767px){.uag-blocks-common-selector{z-index:var(--z-index-mobile) !important}}