/* =========================================================================
   MOLISHA DIGITAL BRAND AGENCY — DESIGN SYSTEM
   Signature: the "jharokha window" — every service/location card is framed
   like a haveli jharokha (an arched Mewar balcony window), rendered in pure
   CSS (no image requests → fast load). Palette matches the real Molisha
   Digital Brand Agency logo: magenta-pink (M swoosh), orange (arrow and A dot),
   deep navy (wordmark), and violet (purple wave).
   ========================================================================= */

:root{
  --teal:        #0C1B5C;   /* brand navy (from logo wordmark) — primary dark */
  --teal-deep:   #070E3A;   /* deeper navy — gradients, footer */
  --ivory:       #FAFAF7;   /* clean off-white — page background */
  --ivory-soft:  #F1EFF9;   /* soft lavender-tinted panel background */
  --brass:       #D92D6A;   /* brand magenta-pink (from logo M swoosh) — primary accent / CTA */
  --brass-light: #FC9C0C;   /* brand orange (from logo arrow and A dot) — accent on dark backgrounds */
  --rust:        #A8175A;   /* deeper magenta — hover/pressed state */
  --ink:         #1B1F3B;   /* body text (navy-ink) */
  --ink-soft:    #545873;   /* muted text */
  --lattice:     #DCD8EE;   /* soft lavender-grey border/divider tone */
  --olive:       #6A2BD6;   /* brand violet (from logo purple wave) — tertiary accent */
  --white:       #FFFFFF;

  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --radius-arch: 60px;
  --container: 1180px;
  --shadow-soft: 0 12px 32px -14px rgba(12,27,92,0.28);
  --shadow-card: 0 8px 24px -12px rgba(12,27,92,0.22);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--ivory);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  color: var(--teal);
  margin: 0 0 0.5em;
  line-height: 1.15;
  font-weight: 600;
}
p{ margin: 0 0 1em; }
.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
:focus-visible{
  outline: 3px solid var(--brass);
  outline-offset: 3px;
}

/* -------------------------------------------------------------------------
   JAALI (LATTICE) TEXTURE — pure CSS trellis pattern, zero image requests
   ------------------------------------------------------------------------- */
.jaali-bg{
  background-color: var(--ivory);
  background-image:
    repeating-linear-gradient(45deg, rgba(217,45,106,0.06) 0, rgba(217,45,106,0.06) 1px, transparent 1px, transparent 22px),
    repeating-linear-gradient(-45deg, rgba(217,45,106,0.06) 0, rgba(217,45,106,0.06) 1px, transparent 1px, transparent 22px);
}
.jaali-divider{
  height: 14px;
  background-image:
    repeating-linear-gradient(45deg, var(--lattice) 0, var(--lattice) 2px, transparent 2px, transparent 16px),
    repeating-linear-gradient(-45deg, var(--lattice) 0, var(--lattice) 2px, transparent 2px, transparent 16px);
  opacity: 0.9;
}

/* -------------------------------------------------------------------------
   SKIP LINK / ACCESSIBILITY
   ------------------------------------------------------------------------- */
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--teal); color:var(--white);
  padding:12px 20px; z-index:1000; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

/* -------------------------------------------------------------------------
   TOP UTILITY BAR
   ------------------------------------------------------------------------- */
.topbar{
  background: var(--teal-deep);
  color: var(--ivory-soft);
  font-size: 0.82rem;
}
.topbar .container{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; padding-bottom:8px; gap:16px; flex-wrap:wrap;
}
.topbar a{ color: var(--brass-light); }
.topbar__locations{ opacity:0.85; }

/* -------------------------------------------------------------------------
   HEADER / NAV
   ------------------------------------------------------------------------- */
.site-header{
  background: var(--ivory);
  border-bottom: 1px solid var(--lattice);
  position: sticky; top:0; z-index: 500;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:14px; padding-bottom:14px;
}
.brand{ display:flex; align-items:center; gap:12px; }
.brand__logo{ height:52px; width:auto; display:block; }

.main-nav{ display:flex; align-items:center; gap:2px; }
.main-nav > ul{ display:flex; align-items:center; gap:4px; }
.main-nav a.nav-link{
  padding:10px 14px; font-weight:600; font-size:0.92rem; color:var(--teal); border-radius:8px;
  display:flex; align-items:center; gap:4px;
}
.main-nav a.nav-link:hover, .main-nav a.nav-link:focus-visible{ background: var(--ivory-soft); color: var(--brass); }
.has-dropdown{ position:relative; }
.dropdown{
  position:absolute; top:100%; left:0; background:var(--white); min-width:250px;
  border:1px solid var(--lattice); border-radius:12px; box-shadow: var(--shadow-soft);
  padding:8px; opacity:0; visibility:hidden; transform: translateY(6px);
  transition: all 0.18s ease; z-index:50;
}
.has-dropdown:hover .dropdown, .has-dropdown:focus-within .dropdown{
  opacity:1; visibility:visible; transform:translateY(0);
}
.dropdown a{ display:block; padding:9px 12px; border-radius:8px; font-size:0.9rem; color:var(--ink); }
.dropdown a:hover{ background: var(--ivory-soft); color:var(--brass); }

.nav-cta{
  background: var(--brass); color: var(--white) !important; padding:10px 20px; border-radius:30px;
  font-weight:700; font-size:0.88rem;
}
.nav-cta:hover{ background: var(--rust); }

.nav-toggle{ display:none; background:none; border:2px solid var(--teal); border-radius:8px; padding:8px 10px; cursor:pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  display:block; width:22px; height:2px; background:var(--teal); position:relative; transition: all .2s ease;
}
.nav-toggle span::before, .nav-toggle span::after{ content:''; position:absolute; left:0; }
.nav-toggle span::before{ top:-7px; } .nav-toggle span::after{ top:7px; }

/* -------------------------------------------------------------------------
   HERO — jharokha arch framing the headline, lake-ripple ambient backdrop
   ------------------------------------------------------------------------- */
.hero{
  position:relative;
  background: radial-gradient(1200px 500px at 20% 0%, #1A2A6E 0%, var(--teal) 45%, var(--teal-deep) 100%);
  color: var(--ivory);
  overflow:hidden;
  padding: 72px 0 0;
}
.hero::before{ /* ambient lake ripple */
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(600px 260px at 85% 20%, rgba(252,156,12,0.16), transparent 70%),
    radial-gradient(500px 260px at 10% 80%, rgba(252,156,12,0.09), transparent 70%);
  animation: ripple 10s ease-in-out infinite alternate;
}
@keyframes ripple{
  0%{ transform: translateY(0) scale(1); }
  100%{ transform: translateY(-14px) scale(1.03); }
}
.hero .container{ position:relative; z-index:2; }
.hero-grid{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap:48px; align-items:center; padding-bottom:60px; }
.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-size:0.78rem; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--brass-light); font-weight:700; margin-bottom:18px;
}
.eyebrow::before{ content:''; width:22px; height:2px; background:var(--brass-light); display:inline-block; }
.hero h1{
  color: var(--white); font-size: clamp(2.1rem, 4vw, 3.2rem); max-width: 15ch;
}
.hero h1 em{ color: var(--brass-light); font-style: italic; }
.hero p.lead{ font-size:1.08rem; color: rgba(245,243,252,0.86); max-width:48ch; }
.hero-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-top:28px; }

.btn{
  display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:30px;
  font-weight:700; font-size:0.95rem; border:2px solid transparent; cursor:pointer; transition: all .18s ease;
}
.btn-primary{ background: var(--brass); color: var(--white); }
.btn-primary:hover{ background: var(--brass-light); transform: translateY(-2px); }
.btn-outline{ border-color: rgba(245,243,252,0.5); color: var(--ivory); }
.btn-outline:hover{ border-color: var(--brass-light); color: var(--brass-light); }
.btn-outline.on-light{ border-color: var(--teal); color: var(--teal); }
.btn-outline.on-light:hover{ border-color:var(--brass); color:var(--brass); }

.hero-stats{ display:flex; gap:28px; margin-top:40px; flex-wrap:wrap; }
.hero-stats div strong{ display:block; font-family: var(--font-display); font-size:1.6rem; color: var(--brass-light); }
.hero-stats div span{ font-size:0.8rem; color: rgba(245,243,252,0.75); }

/* The jharokha arch frame itself, holding a placeholder/illustration slot */
.jharokha-frame{
  position:relative; width:100%; max-width:340px; margin: 0 auto;
  aspect-ratio: 3/4;
  background: linear-gradient(160deg, rgba(252,156,12,0.16), rgba(252,156,12,0.03));
  border: 3px solid var(--brass-light);
  border-radius: 50% 50% 10px 10px / 42% 42% 10px 10px;
  box-shadow: 0 0 0 8px rgba(245,243,252,0.06), var(--shadow-soft);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:32px 24px;
}
.jharokha-frame::before{ /* finial dot at the peak */
  content:''; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  width:16px; height:16px; border-radius:50%; background: var(--brass-light);
  box-shadow: 0 0 0 4px rgba(252,156,12,0.25);
}
.jharokha-frame .frame-eyebrow{ color:var(--brass-light); font-size:0.75rem; text-transform:uppercase; letter-spacing:0.1em; font-weight:700; margin-bottom:10px; }
.jharokha-frame__logo{ width:100%; max-width:230px; height:auto; margin:0 auto; }
.jharokha-frame h3{ color: var(--ivory); font-size:1.3rem; margin-bottom:8px; }
.jharokha-frame p{ color: rgba(245,243,252,0.78); font-size:0.9rem; margin:0; }

/* -------------------------------------------------------------------------
   SECTION HEADINGS
   ------------------------------------------------------------------------- */
.section{ padding: 76px 0; }
.section-head{ max-width:640px; margin: 0 auto 44px; text-align:center; }
.section-head .eyebrow{ color: var(--olive); justify-content:center; }
.section-head h2{ font-size: clamp(1.6rem, 3vw, 2.3rem); }
.section-head p{ color: var(--ink-soft); }
.section--dark{ background: var(--teal); color: var(--ivory); }
.section--dark h2, .section--dark h3{ color: var(--ivory); }
.section--dark .section-head p{ color: rgba(245,243,252,0.78); }
.section--soft{ background: var(--ivory-soft); }

/* -------------------------------------------------------------------------
   SERVICES GRID — "haveli facade": a row of jharokha windows, one per service
   ------------------------------------------------------------------------- */
.services-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:28px;
}
.service-window{
  position:relative;
  background: var(--white);
  border: 2px solid var(--lattice);
  border-radius: var(--radius-arch) var(--radius-arch) 12px 12px;
  padding: 44px 26px 30px;
  text-align:center;
  box-shadow: var(--shadow-card);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.service-window::before{
  content:''; position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%; background: var(--brass-light);
  transition: background .22s ease, box-shadow .22s ease;
}
.service-window:hover, .service-window:focus-within{
  transform: translateY(-6px);
  border-color: var(--brass-light);
  box-shadow: var(--shadow-soft);
}
.service-window:hover::before{ box-shadow: 0 0 0 5px rgba(252,156,12,0.28); }
.service-window .icon{
  width:56px; height:56px; margin:0 auto 18px; border-radius:50%;
  background: var(--ivory-soft); display:flex; align-items:center; justify-content:center;
  color: var(--brass); font-family: var(--font-display); font-size:1.4rem; font-weight:700;
}
.service-window h3{ font-size:1.15rem; margin-bottom:10px; }
.service-window p{ font-size:0.92rem; color: var(--ink-soft); margin-bottom:16px; }
.service-window a.link{ font-weight:700; color: var(--brass); font-size:0.88rem; }
.service-window a.link:hover{ color: var(--rust); }

/* -------------------------------------------------------------------------
   LOCATIONS STRIP
   ------------------------------------------------------------------------- */
.locations-strip{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }
.location-chip{
  background: var(--white); border:1.5px solid var(--lattice); border-radius:30px;
  padding:10px 20px; font-weight:600; font-size:0.9rem; color:var(--teal);
  transition: all .18s ease;
}
.location-chip:hover{ background: var(--teal); color: var(--ivory); border-color: var(--teal); }

/* -------------------------------------------------------------------------
   WHY US / FEATURE LIST
   ------------------------------------------------------------------------- */
.feature-list{ display:grid; grid-template-columns: repeat(2,1fr); gap:22px; }
.feature-item{ display:flex; gap:16px; align-items:flex-start; }
.feature-item .num{
  font-family: var(--font-display); font-weight:700; color: var(--brass); font-size:1.3rem;
  width:44px; flex-shrink:0;
}
.feature-item h4{ font-size:1.05rem; margin-bottom:6px; }
.feature-item p{ font-size:0.92rem; color: var(--ink-soft); margin:0; }

/* -------------------------------------------------------------------------
   CARDS (generic — portfolio/blog/testimonials)
   ------------------------------------------------------------------------- */
.card-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.plain-card{
  background: var(--white); border:1px solid var(--lattice); border-radius:16px; padding:26px;
  box-shadow: var(--shadow-card);
}
.plain-card h3{ font-size:1.05rem; }
.testimonial{ font-style:italic; color: var(--ink-soft); }
.testimonial cite{ display:block; margin-top:14px; font-style:normal; font-weight:700; color:var(--teal); font-size:0.9rem; }

/* -------------------------------------------------------------------------
   FAQ (accordion, no-JS fallback via <details>)
   ------------------------------------------------------------------------- */
.faq-item{ border-bottom:1px solid var(--lattice); padding:18px 0; }
.faq-item summary{ cursor:pointer; font-weight:700; color:var(--teal); font-size:1.02rem; list-style:none; display:flex; justify-content:space-between; align-items:center; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:'+'; color:var(--brass); font-size:1.4rem; }
.faq-item[open] summary::after{ content:'−'; }
.faq-item p{ margin-top:12px; color: var(--ink-soft); }

/* -------------------------------------------------------------------------
   CTA BAND
   ------------------------------------------------------------------------- */
.cta-band{
  background: linear-gradient(120deg, var(--teal-deep), var(--teal));
  color: var(--ivory); border-radius:24px; padding:52px 40px; text-align:center;
}
.cta-band h2{ color:var(--ivory); }
.cta-band p{ color: rgba(245,243,252,0.8); max-width:52ch; margin-left:auto; margin-right:auto; }

/* -------------------------------------------------------------------------
   CONTACT FORM
   ------------------------------------------------------------------------- */
.contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:44px; align-items:flex-start; }
.form-field{ margin-bottom:18px; }
.form-field label{ display:block; font-weight:700; font-size:0.88rem; color:var(--teal); margin-bottom:6px; }
.form-field input, .form-field textarea, .form-field select{
  width:100%; padding:13px 16px; border:1.5px solid var(--lattice); border-radius:10px;
  font-family: var(--font-body); font-size:0.96rem; background: var(--white); color:var(--ink);
}
.form-field input:focus, .form-field textarea:focus{ border-color: var(--brass); outline:none; }
.contact-info-card{ background: var(--teal); color:var(--ivory); border-radius:20px; padding:36px; }
.contact-info-card h3{ color:var(--ivory); }
.contact-info-card .row{ display:flex; gap:14px; margin-bottom:18px; align-items:flex-start; }
.contact-info-card a{ color: var(--brass-light); font-weight:700; }

/* -------------------------------------------------------------------------
   BREADCRUMBS
   ------------------------------------------------------------------------- */
.breadcrumbs{ font-size:0.85rem; color: var(--ink-soft); padding: 18px 0; }
.breadcrumbs a{ color: var(--teal); font-weight:600; }
.breadcrumbs span[aria-hidden]{ margin:0 8px; opacity:0.5; }

/* -------------------------------------------------------------------------
   PAGE HERO (inner pages — services/locations)
   ------------------------------------------------------------------------- */
.page-hero{
  background: linear-gradient(135deg, var(--teal), var(--teal-deep));
  color: var(--ivory); padding: 54px 0 64px;
}
.page-hero h1{ color:var(--white); font-size:clamp(1.8rem, 3.4vw, 2.6rem); max-width:24ch; }
.page-hero p{ color: rgba(245,243,252,0.85); max-width:60ch; font-size:1.02rem; }

/* -------------------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------------------- */
.site-footer{ background: var(--teal-deep); color: rgba(245,243,252,0.82); padding: 60px 0 24px; }
.footer-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:36px; margin-bottom:40px; }
.footer-grid h4{ color: var(--brass-light); font-size:0.95rem; margin-bottom:16px; font-family:var(--font-body); text-transform:uppercase; letter-spacing:0.06em; }
.footer-grid ul li{ margin-bottom:10px; }
.footer-grid a:hover{ color: var(--brass-light); }
.footer-brand p{ color: rgba(245,243,252,0.7); font-size:0.92rem; max-width:34ch; }
.footer-brand__logo-chip{
  background: var(--ivory); border-radius:14px; padding:14px 20px; display:inline-block; margin-bottom:16px;
}
.footer-brand__logo-chip img{ height:44px; width:auto; display:block; }
.footer-social{ display:flex; gap:12px; margin-top:16px; }
.footer-social a{
  width:38px; height:38px; border:1.5px solid rgba(245,243,252,0.3); border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:0.85rem; font-weight:700;
}
.footer-social a:hover{ border-color: var(--brass-light); color: var(--brass-light); }
.footer-bottom{
  border-top:1px solid rgba(245,243,252,0.15); padding-top:22px; display:flex; justify-content:space-between;
  flex-wrap:wrap; gap:10px; font-size:0.82rem; color: rgba(245,243,252,0.6);
}

/* -------------------------------------------------------------------------
   SCROLL REVEAL (progressive enhancement — content visible without JS)
   ------------------------------------------------------------------------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .hero::before{ animation:none; }
}

/* -------------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------------- */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns:1fr; }
  .jharokha-frame{ order:-1; max-width:260px; }
  .services-grid, .card-grid{ grid-template-columns: repeat(2,1fr); }
  .footer-grid{ grid-template-columns: 1fr 1fr; }
  .contact-grid{ grid-template-columns: 1fr; }
  .feature-list{ grid-template-columns: 1fr; }
}
@media (max-width: 720px){
  .brand__logo{ height:40px; }
  .main-nav{ position:fixed; top:0; right:-100%; height:100vh; width:min(320px,86vw); background:var(--white);
    flex-direction:column; align-items:stretch; padding:90px 24px 24px; transition: right .25s ease; box-shadow: -8px 0 24px rgba(0,0,0,0.15); overflow-y:auto; }
  .main-nav.is-open{ right:0; }
  .main-nav > ul{ flex-direction:column; align-items:stretch; gap:2px; }
  .dropdown{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; padding-left:14px; display:none; }
  .has-dropdown.is-open .dropdown{ display:block; }
  .nav-toggle{ display:inline-flex; flex-direction:column; align-items:center; justify-content:center; z-index:600; }
  .services-grid, .card-grid{ grid-template-columns: 1fr; }
  .topbar .container{ justify-content:center; text-align:center; }
  .hero-stats{ justify-content:center; }
}


/* ===== Home page: Website Design focus ===== */
.service-window--featured{
  border-color: var(--brass-light, #e0b25a);
  box-shadow: 0 10px 30px rgba(252,156,12,0.18);
}
.service-window__tag{
  display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  background: var(--brass-light, #e0b25a); color: var(--ink, #0C1B5C);
  padding:4px 10px; border-radius:999px; margin-bottom:10px;
}

/* ===== Home page: Website launch offer (Hindi) ===== */
.offer-section{
  background: radial-gradient(900px 420px at 50% 0%, rgba(251,191,36,.22), transparent 70%),
              linear-gradient(180deg, #FFF8EC 0%, #FFFFFF 100%);
  font-family: 'Noto Sans Devanagari', 'Poppins', sans-serif;
}
.offer-card{
  position:relative; max-width:860px; margin:0 auto; padding:52px 44px 44px; border-radius:var(--radius-arch, 28px);
  background:#fff; border:2px solid transparent;
  background-image: linear-gradient(#fff,#fff), linear-gradient(135deg,#FBBF24,#F97316,#DC2626);
  background-origin:border-box; background-clip:padding-box, border-box;
  box-shadow:0 24px 60px rgba(124,45,18,0.16); text-align:center; overflow:hidden;
}
.offer-card::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(circle at 12% 18%, rgba(251,191,36,.18) 0 2px, transparent 3px),
              radial-gradient(circle at 88% 30%, rgba(249,115,22,.16) 0 2px, transparent 3px),
              radial-gradient(circle at 70% 85%, rgba(251,191,36,.2) 0 2px, transparent 3px);
  background-size: 180px 180px, 220px 220px, 160px 160px;
}
.offer-card > *{ position:relative; }
.offer-card__ribbon{
  position:absolute; top:18px; left:50%; transform:translateX(-50%);
  background:linear-gradient(90deg,#F97316,#DC2626); color:#fff; font-weight:800; font-size:.8rem;
  padding:6px 18px; border-radius:999px; letter-spacing:.02em; box-shadow:0 8px 18px rgba(220,38,38,.3); white-space:nowrap;
}
.offer-card__title{
  margin:6px 0 8px; font-size:clamp(1.8rem,4vw,2.5rem); font-weight:800; line-height:1.25;
  background:linear-gradient(90deg,#7C2D12,#DC2626 55%,#F97316); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.offer-card__tagline{ color:#4B5563; font-size:1.02rem; max-width:52ch; margin:0 auto; }
.offer-card__price{ font-size:2.2rem; font-weight:800; color:#7C2D12; margin:10px 0 2px; }
.offer-card__validity{ font-size:.92rem; color:#92400E; font-weight:600; margin:0; }
.offer-card__list{
  list-style:none; padding:0; margin:30px auto 0; max-width:680px; text-align:left;
  display:grid; grid-template-columns:1fr 1fr; gap:14px 26px;
}
.offer-card__list li{
  display:flex; gap:12px; align-items:flex-start; color:#1F2937; font-size:.98rem; line-height:1.55;
  background:#FFFBEB; border:1px solid #FDE68A; border-radius:14px; padding:12px 14px;
}
.offer-card__tick{
  flex:0 0 26px; height:26px; border-radius:50%; background:linear-gradient(135deg,#FBBF24,#F97316); color:#fff;
  font-size:.85rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(249,115,22,.35);
}
.offer-card__actions{ justify-content:center; margin-top:32px; }
@media (max-width: 640px){
  .offer-card{ padding:56px 20px 30px; }
  .offer-card__list{ grid-template-columns:1fr; }
}
/* ===== Mobile: let long eyebrow labels wrap instead of clipping ===== */
@media (max-width: 640px){
  .eyebrow{ white-space: normal; letter-spacing: .08em; line-height: 1.5; }
}

/* ===== Mobile: keep top bar and cookie banner inside the screen ===== */
@media (max-width: 640px){
  .topbar .container{ flex-direction:column; align-items:center; text-align:center; gap:4px; }
  .topbar .container > *{ max-width:100%; overflow-wrap:anywhere; }
  .cookie-bar{ left:12px; right:12px; width:auto; max-width:calc(100vw - 24px); box-sizing:border-box; }
}