/* =========================
   Fonts (closest to comp)
   ========================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

@font-face{
  font-family: "Sofia Pro";
  src: url("/fonts/sofia-pro.woff2") format("woff2"),
       url("/fonts/sofia-pro.woff") format("woff");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* =========================
   Base
   ========================= */
:root{
  --ink: #2a2a2a;
  --muted: #6b6b6b;

  --orange: #f46320;
  --orange-dark: #e24821;

  --green: #8ea63a;
  --green-dark: #7c922f;

  --gold: #d7a44a;

  --blue: #2e81c1;
  --blue-dark: #2e81c1;

  --bg: #ffffff;
  --soft: #f5f5f5;

  --page: var(--bg);
  --canvas: var(--soft);

  --shadow: 0 10px 30px rgba(0,0,0,.10);

  --max: 1275px;

  --h1: 56px;
  --h2: 40px;
  --h3: 30px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: "Poppins", Arial, sans-serif;
  font-weight:400;
  color:var(--ink);
  background:var(--page);
  line-height:1.35;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main{ background:var(--canvas); }

img{ max-width:100%; display:block; }

.container{
  width:min(var(--max), calc(100% - 32px));
  margin-inline:auto;
}


/* =========================
   Placeholders (optional)
   ========================= */
.ph{
  display:grid;
  place-items:center;
  text-align:center;
  background:repeating-linear-gradient(45deg,#efefef,#efefef 10px,#e7e7e7 10px,#e7e7e7 20px);
  border:2px dashed rgba(0,0,0,.18);
  color:rgba(0,0,0,.55);
  font-weight:800;
  border-radius:14px;
  user-select:none;
}

.ph--logo{
  width:270px;
  height:54px;
  border-radius:12px;
  line-height:1.05;
  font-size:14px;
}
.ph--logo span{
  display:block;
  font-weight:700;
  font-size:12px;
  opacity:.8;
  margin-top:2px;
}

.ph--hero{
  width:min(430px, 100%);
  aspect-ratio: 3 / 4;
  border-radius:18px;
  box-shadow:0 18px 26px rgba(0,0,0,.18);
}

.ph--footericon{
  width:80px;
  height:80px;
  border-radius:18px;
  opacity:.9;
  margin-top:12px;
}


/* =========================
   Pills / Buttons
   ========================= */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:59px;
  padding:0 37px;
  border-radius:999px;
  text-decoration:none;
  text-transform:uppercase;
  font-weight:700;
  font-size:18px;
  letter-spacing:.6px;
  color:#fff;
  border:2px solid transparent;
  transition:transform .06s ease, filter .2s ease, background-color .2s ease;

  position: relative;
  isolation: isolate;
  box-shadow:
    0 0 0 2px rgba(255,255,255,.08) inset,
    0 2px 0 rgba(0,0,0,.05),
    0 0 6px rgba(0,0,0,.06);
}

.pill::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(circle at 10% 20%, rgba(255,255,255,.15) 0 1px, transparent 2px),
    radial-gradient(circle at 80% 30%, rgba(0,0,0,.12) 0 1px, transparent 2px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.12) 0 1px, transparent 2px);
  opacity:.35;
}

.pill:hover{ filter:brightness(1.03); }
.pill:active{ transform:translateY(1px); }

.pill--lg{
display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 59px;
    padding: 0 55px;
    border-radius: 999px;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: .6px;
    color: #fff;
    border: 2px solid transparent;
    transition: transform .06s ease, filter .2s ease, background-color .2s ease;
}

.pill--green{ background:var(--green); }
.pill--green:hover{ background:var(--green-dark); }
.pill--blue{ background:var(--blue); }
.pill--blue:hover{ background:var(--blue-dark); }
.pill--orange{ background:var(--orange); }
.pill--orange:hover{ background:var(--orange-dark); }
.pill--gold{ background:var(--gold); }
.pill--outline{
  background:transparent;
  border-color:rgba(255,255,255,.85);
  color:#fff;
}


/* =========================
   Topbar
   ========================= */
.topbar{
  position: relative;
  padding: 18px 0;
  background: url(assets/header-stars.jpg) center / cover no-repeat;
  border-bottom: 13px solid #e9d260;
}
.topbar::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,.06), rgba(0,0,0,.18));
  pointer-events:none;
}

.topbar__inner{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  min-height: 96px;
}

.topbar__logo-badge{
  position: absolute;
  left: 35px;
  top: 101%;
  transform: translateY(-50%);
  width: 220px;
  height: 220px;
  display: grid;
  place-items: center;
  z-index: 2;
  margin-bottom: -78px;
}

.topbar__logo-img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
}

.topbar__actions{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}


/* =========================
   Hero
   ========================= */
.hero{
  background: #ffffff;
  padding: 35px 0 0px 40px;
}

.hero__grid{
  display:grid;
  grid-template-columns: 1.15fr .95fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "content media"
    "quote   media";
  gap:1px 28px;
  align-items:start;
}

.hero__content{ grid-area:content; }
.hero__quote{ grid-area:quote; }
.hero__media{
  grid-area:media;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
}

.hero__content h1{
  margin:0;
  font-size:clamp(36px, 5.2vw, var(--h1));
  line-height:1.0;
  color:var(--orange-dark);
  letter-spacing:-0.5px;
  font-weight:600;
  margin-top:72px;
}

.hero__content h2{
  margin:6px 0 18px;
  font-size:clamp(20px, 2.6vw, var(--h2));
  line-height:1.05;
  color:var(--orange-dark);
  font-weight:600;
}

.hero__lead{
  margin:0 0 10px;
  max-width:52ch;
  color:#3f3f3f;
  font-size:20px;
  line-height:1.5;
}

.hero__list{
  margin:0 0 30px 18px;
  padding:0;
  color:#333;
  font-size:20px;
  line-height:1.45;
}
.hero__list li{ margin: 8px 0 0 30px; }

.hero__cta{
    display: flex;
    gap: 0px;
    flex-wrap: wrap;
    max-width: 636px;
    margin: 8px 0 7px;
    justify-content: space-evenly;
}

.hero__note{
  margin:10px 0 0;
  font-size:20px;
  color:var(--muted);
}


/* =========================
   Quote bubble (single definition)
   - Bubble color + shadow live on ::before so we can mask it
   ========================= */
.quote{
  background: transparent;
  color: #fff;
  border-radius: 56px;
  padding: 26px 28px 24px;
  max-width: 620px;
  position: relative;
  isolation: isolate;
  overflow: visible;
  box-shadow: none;
}

.quote::before{
  content:"";
  position:absolute;
  inset:0;
  background:#f47d45;
  border-radius: inherit;
  box-shadow: var(--shadow);
  z-index:-1;

  /* Desktop bubble rough edge (stable) */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='340' viewBox='0 0 520 340'%3E%3Cfilter id='rough'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='8' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='5' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='8' y='8' width='504' height='324' rx='56' ry='56' fill='white' filter='url(%23rough)'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:104% 104%;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='340' viewBox='0 0 520 340'%3E%3Cfilter id='rough'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='8' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='5' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='8' y='8' width='504' height='324' rx='56' ry='56' fill='white' filter='url(%23rough)'/%3E%3C/svg%3E");
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:104% 104%;
}

.quote__mark{
    position: absolute;
    left: -82px;
    top: 6px;
    font-size: 222px;
    line-height: 1;
    font-weight: 900;
    font-family: 'times', sans-serif !important;
    color: var(--orange-dark);
    opacity: 1;
    z-index: 2;
    pointer-events: none;
}

.quote__text{
  font-size: clamp(16px, 2.2vw, 21px);
  line-height: 1.45;
  padding: clamp(16px, 3vw, 30px) clamp(16px, 3vw, 30px) clamp(16px, 3vw, 30px) clamp(22px, 4vw, 42px);
}

.quote__text p{ margin:0 0 10px; }
.quote__byline{ margin-top:10px; font-weight:800; text-align:right; }


/* =========================
   About + Form
   ========================= */
.info{
  background:#f5f5f5;
  padding:18px 0 46px;
}

.info__grid{
  display:grid;
  grid-template-columns: .82fr 2.18fr;
  gap:30px;
  align-items:start;
  padding-top: 40px;
}

.about h3{
  margin:0 0 20px;
  color:var(--orange);
  font-size:clamp(26px, 2.7vw, 32px);
  font-weight:700;
  letter-spacing:-0.2px;
}

.about p{
  margin:0 0 12px;
  color:#4a4a4a;
  max-width:40ch;
  font-size:20px;
  line-height:1.55;
}

.formcard{
  background:var(--green);
  color:#fff;
  padding:22px 22px 18px;
  box-shadow:var(--shadow);
}

.formcard h3{
  margin:20px 0;
  font-size:28px;
  font-weight:600;
  line-height:1.12;
  text-align:center;
}

.formcard__sub{
  margin:0 0 16px;
  font-size:16px;
  line-height:1.4;
  color:rgba(255,255,255,.92);
  text-align:center;
}


/* =========================
   Formidable
   ========================= */
.formcard .frm_forms{ color:#fff; }

.formcard .frm_form_fields,
.formcard .frm_fields_container{
  display:grid;
  gap:12px;
}

.formcard .frm_forms label,
.formcard .frm_forms legend{
  display:block;
  font-size:12px;
  font-weight:800;
  margin-bottom:6px;
  color:rgba(255,255,255,.95);
}

.formcard .frm_forms input[type="text"],
.formcard .frm_forms input[type="email"],
.formcard .frm_forms input[type="tel"],
.formcard .frm_forms input[type="number"],
.formcard .frm_forms input[type="date"],
.formcard .frm_forms select,
.formcard .frm_forms textarea{
  width:100%;
  border:none;
  border-radius:999px;
  padding:12px 14px;
  outline:none;
  font-size:14px;
  color:#222;
  background:#fff;
}

.formcard .frm_forms textarea{
  border-radius:18px;
  resize:vertical;
  min-height:110px;
}

.formcard .frm_forms input[type="radio"],
.formcard .frm_forms input[type="checkbox"]{
  width:18px;
  height:18px;
}

.formcard .frm_forms .frm_description,
.formcard .frm_forms .frm_error,
.formcard .frm_forms .frm_required{
  font-size:12px;
  line-height:1.35;
}

.formcard .frm_forms .frm_required{
  color:rgba(255,255,255,.95);
}

.formcard .frm_forms button[type="submit"],
.formcard .frm_forms input[type="submit"]{
  justify-self:end;
  margin-top:12px;
  background:var(--orange);
  color:#fff;
  border:none;
  border-radius:999px;
  padding:10px 18px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(0,0,0,.18);
}

.formcard .frm_forms button[type="submit"]:hover,
.formcard .frm_forms input[type="submit"]:hover{
  background:var(--orange-dark);
}

.formcard .frm_forms a{
  color:#fff;
  font-weight:800;
  text-decoration:underline;
}

.formcard .frm_forms .frm_required_asterisk,
.formcard .frm_forms .frm_required_notice{
  display:none;
}


/* =========================
   Footer
   ========================= */
.footer{
  background:
    url("assets/footer-bg.jpg") center bottom / cover no-repeat,
    var(--orange);
  color:#fff;
  padding:26px 0 30px;
}

.footer__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:22px;
  align-items:start;
}

.footer h4{
  margin:0 0 12px;
  font-size:22px;
  font-weight:800;
}

.footer__cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:0 0 10px;
}

.footer__note{ margin:6px 0 0; opacity:.95; }
.footer__office-title{ margin:0 0 6px; font-weight:800; }
.footer__office, .footer__contact{ margin:0 0 10px; opacity:.98; }
.footer a{ color:#fff; text-decoration:underline; }

.pencil {float:right;display:block;}


/* =========================
   Responsive
   ========================= */
@media (max-width: 980px){
  .hero__grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "media"
      "content"
      "quote";
  }
  .hero__media{ justify-content:flex-start; }
  .info__grid{ grid-template-columns:1fr; }
  .about p{ max-width:62ch; }
}

/* =========================
   MOBILE (single merged block)
   ========================= */
@media (max-width: 980px){

  /* Pills sizing */
  .pill{ height:38px; padding-inline:18px; font-size:13px; }
  .pill--lg{ width:100%; height:46px; }



  /* Hero spacing */
  .hero{ padding: 18px 0 10px; }
  .hero__content{ padding-left:0; margin-left:0; }

  .hero__content h1,
  .hero__content h2{ margin-left: 10px;max-width: 270px; }

  .hero__lead{ font-size:17px; line-height:1.45; }
  .hero__list{ font-size:17px; margin-left:18px; }
	.hero__list li {margin: 0 0 0 10px;}

  /* CTA stacked */
  .hero__cta{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    width:100%;
  }
  .hero__cta .pill{
    width:100%;
    max-width:420px;
    justify-self:center;
  }

  /* Quote */
  .quote{ border-radius:34px; padding:22px 22px 20px; }
  .quote__text{ padding-left:38px; padding-top:22px; }
  .hero__quote{ margin-top:10px; }

  .quote__mark{
    left:-14px;
    top:-37px;
    font-size:148px;
  }

  /* Formidable spacing */
  .formcard .frm_form_fields,
  .formcard .frm_fields_container{ gap:10px; }

  /* Topbar layout: pills first, logo second */
  .topbar__inner{
    display:grid;
    grid-template-columns:1fr;
    justify-items:center;
    align-items:center;
    gap:12px;
    padding-top:14px;
    min-height:auto;
  }

  .topbar__logo-badge{
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    width: 181px;
    height: 87px;
    order: 2;
  }

  .topbar__actions{
    order: 1;
    width:100%;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:10px;
    justify-items:stretch;
  }

  .topbar__actions .pill{
    width:100%;
    height:40px;
    padding:0 10px;
    font-size:13px;
    letter-spacing:.4px;
  }

  /* Footer centered */
  .footer__grid{
    grid-template-columns:1fr;
    text-align:center;
    justify-items:center;
  }

  .footer__cta{ justify-content:center; }
  .footer__cta .pill{ width:100%; max-width:280px; }

  .footer__right img{ margin:12px auto 0; }
}


/* =========================
   Rough / freyed edges (DESKTOP DEFAULT)
   ========================= */
.pill{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='80' viewBox='0 0 220 80'%3E%3Cfilter id='rough'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='8' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='10' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='0' y='0' width='220' height='80' rx='40' ry='40' fill='white' filter='url(%23rough)'/%3E%3C/svg%3E");
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-position:center;
  -webkit-mask-size:120% 140%;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='80' viewBox='0 0 220 80'%3E%3Cfilter id='rough'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='8' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='10' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='0' y='0' width='220' height='80' rx='40' ry='40' fill='white' filter='url(%23rough)'/%3E%3C/svg%3E");
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:120% 140%;
}

/* Slightly different sizing on desktop topbar pills */
.topbar .pill{
  -webkit-mask-size:118% 135%;
  mask-size:118% 135%;
}


/* =========================
   MOBILE rough edges (final + clean)
   - High-res masks + stronger settings for tiny topbar pills
   ========================= */
@media (max-width: 980px){

  /* Mobile pills: medium rough */
  .pill{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='320' viewBox='0 0 900 320'%3E%3Cfilter id='rough'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' seed='8' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='3.8' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='10' y='10' width='880' height='300' rx='160' ry='160' fill='white' filter='url(%23rough)'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='320' viewBox='0 0 900 320'%3E%3Cfilter id='rough'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='2' seed='8' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='3.8' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='10' y='10' width='880' height='300' rx='160' ry='160' fill='white' filter='url(%23rough)'/%3E%3C/svg%3E");

    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:100% 100%;

    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:100% 100%;
  }

  /* Tiny topbar pills: a bit more roughness */
  .topbar .pill{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='320' viewBox='0 0 900 320'%3E%3Cfilter id='rough'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' seed='8' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='4.4' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='10' y='10' width='880' height='300' rx='160' ry='160' fill='white' filter='url(%23rough)'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='320' viewBox='0 0 900 320'%3E%3Cfilter id='rough'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' seed='8' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='4.4' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='10' y='10' width='880' height='300' rx='160' ry='160' fill='white' filter='url(%23rough)'/%3E%3C/svg%3E");
  }

  /* Quote bubble on mobile: bubble-sized mask (NOT the pill mask) */
  .quote::before{
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='820' viewBox='0 0 1200 820'%3E%3Cfilter id='rough'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='2' seed='8' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='6.0' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='16' y='16' width='1168' height='788' rx='120' ry='120' fill='white' filter='url(%23rough)'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='820' viewBox='0 0 1200 820'%3E%3Cfilter id='rough'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='2' seed='8' result='noise'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='noise' scale='6.0' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Crect x='16' y='16' width='1168' height='788' rx='120' ry='120' fill='white' filter='url(%23rough)'/%3E%3C/svg%3E");

    -webkit-mask-repeat:no-repeat;
    -webkit-mask-position:center;
    -webkit-mask-size:100% 100%;

    mask-repeat:no-repeat;
    mask-position:center;
    mask-size:100% 100%;
  }
}
/* =========================================
   FIX: Quote mark font + mobile spacing
   (paste at very end)
   ========================================= */

/* Always render the quote mark in the same font/weight */
.quote__mark{
  
  font-weight: 900 !important;
  line-height: 0.9 !important;
  -webkit-font-smoothing: antialiased;
}

/* Mobile spacing + positioning tweaks */
@media (max-width: 980px){

  /* Give the whole quote area breathing room under the CTA row */
  .hero__quote{
    margin-top: 16px !important;
  }

  /* Bubble: a little more internal top space so it doesn’t feel cramped */
  .quote{
    padding: 26px 22px 20px !important; /* more top padding than before */
    border-radius: 34px !important;
  }

  /* Quote mark: move it back into a nice “badge” position */
  .quote__mark{
    left: -10px !important;
    top: -44px !important;
    font-size: 152px !important;
  }

  /* Text: remove the extra top padding we added earlier (it’s pushing things oddly now) */
  .quote__text{
    padding-top: 0 !important;
    padding-left: 34px !important;
  }
}

/* =========================================
   MOBILE FIX: clean bubble + make text fit
   ========================================= */
@media (max-width: 980px){

  /* 1) Remove the freyed mask on the quote bubble (mobile only) */
  .quote::before{
    -webkit-mask-image: none !important;
    mask-image: none !important;
    border-radius: 34px !important; /* keep it rounded but clean */
  }

  /* (Optional) also remove freyed edges on pills if you want them cleaner too */
  .pill{
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* 2) Make room + improve internal spacing */
  .quote{
    padding: 22px 18px 18px !important;
    max-width: 100% !important;
  }

  .quote__text{
    font-size: 16px !important;
    line-height: 1.45 !important;
    padding: 18px 18px 18px 26px !important; /* less left padding */
    overflow-wrap: anywhere; /* prevents awkward overflow */
    hyphens: auto;
  }

  /* 3) Quote mark positioning so it doesn’t crowd the bubble */
  .quote__mark{
    left: -8px !important;
    top: -37px !important;
    font-size: 140px !important;
  }
}
/* Extra breathing room at top of quote (mobile only) */
@media (max-width: 980px){
  .quote{
    padding-top: 30px !important; /* increase from 22px */margin:30px 0;
  }

  .quote__text{
    padding-top: 22px !important; /* pushes text down slightly */
  }
}

/* =========================================
   MOBILE: Make hero image behave like a background
   (paste at very end)
   ========================================= */
@media (max-width: 980px){

  /* Make hero a positioning context */
  .hero{ position: relative; }

  /* Remove "media first" behavior on mobile */
  .hero__grid{
    position: relative;
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "content"
      "quote" !important;
  }

  /* Turn the media block into an absolute background layer */
  .hero__media{
    display: flex !important;          /* overrides any previous display:none */
    position: absolute !important;
    
    z-index: 0 !important;
    justify-content: center !important;/* center horizontally */
    align-items: flex-end !important;  /* anchor to bottom */
    pointer-events: none !important;
  }

  /* Size/position the image like a background */
  .hero__media img{
        width: min(520px, 52vw) !important;
        height: auto !important;
        object-fit: contain !important;
        transform: translateY(19px) !important; 
        transform: translatex(230px) !important;
  }

  /* Put text + buttons above the background image */
  .hero__content,
  .hero__quote{
    position: relative !important;
    z-index: 2 !important;
  }
	.hero__note {
     font-size: 16px;
 }
	
	.about p {font-size: 19px;}

  /* OPTIONAL: if you want her only behind the TEXT area (not behind the full hero),
     uncomment these two lines to limit the background image height.
     (This helps keep her away from the top CTA/buttons area.) */

  /* .hero__media{ top: 120px !important; } */
  /* .hero__content{ padding-bottom: 260px !important; } */
}

/* Prevent any horizontal "drag/pan" from overflow */
html, body { overflow-x: hidden; }

@media (max-width: 980px){
  /* Clip the background-image layer to the hero */
  .hero{
    position: relative;
    overflow: hidden;          /* <-- key */
  }

  /* Make the media layer fill the hero so it has real bounds */
  .hero__media{
    position: absolute !important;
    inset: 0 !important;       /* top/right/bottom/left = 0 */
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* Position the image with right/bottom instead of huge translateX */
  .hero__media img{
    position: absolute !important;
    right: -40px;              /* tweak this instead of translateX */
    bottom: 0;
    width: min(520px, 52vw) !important;
    height: auto !important;
    max-width: none !important; /* prevents unexpected shrinking */
    transform: translateY(19px) !important; /* keep your Y nudge */
  }

  /* Keep content above it */
  .hero__content,
  .hero__quote{
    position: relative !important;
    z-index: 2 !important;
  }
}

@media (max-width: 980px){

  /* Keep hero clipped */
  .hero{
    position: relative;
    overflow: hidden;
  }

  /* Fill hero bounds */
  .hero__media{
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* Anchor her to TOP (not bottom) */
  .hero__media img{
    position: absolute !important;
    top: 30px !important;        /* <-- key change */
    bottom: auto !important;  /* undo bottom anchoring */
    right: -40px !important;  /* tweak */
    width: min(520px, 50vw) !important;
    max-width: none !important;
    height: auto !important;

    /* One transform only */
    transform: translateY(-10px) !important; /* tweak this up/down */
  }
}

/* Safety: prevent any horizontal pan */
html, body { overflow-x: hidden; }