/* =========================================
   BRANDZ PAKISTAN — FRANCHISE PAGE
========================================= */

:root {
  --fr-orange: #f4512c;
  --fr-orange-bright: #ff633d;
  --fr-black: #101010;
  --fr-white: #ffffff;
  --fr-cream: #f7f5f1;
  --fr-soft: #f1efeb;
  --fr-yellow: #ffce5b;
  --fr-brown: #8a4800;

  --fr-pad: clamp(20px, 5vw, 78px);

  --fr-display:
    "Anton",
    Impact,
    "Arial Narrow",
    sans-serif;
}


* {
  -webkit-tap-highlight-color: transparent;
}


/* =========================================
   PAGE
========================================= */

.franchise-page {
  width: 100%;
  overflow-x: hidden;
  background: #ffffff;
}


/* =========================================
   ACTIVE NAV
========================================= */

@media (min-width: 1100px) {

  .desktop-nav a.franchise-active::after {
    width: 100%;
  }

}


/* =========================================
   COMMON
========================================= */

.franchise-kicker,
.franchise-section-label {
  margin: 0;

  font-size: 11px;
  font-weight: 900;

  letter-spacing: 0.17em;
  text-transform: uppercase;
}


/* =========================================
   HERO
========================================= */

.franchise-hero {
  position: relative;

  min-height: 780px;

  padding:
    145px
    var(--fr-pad)
    90px;

  display: flex;
  align-items: flex-end;

  overflow: hidden;

  background: var(--fr-black);
  color: #ffffff;
}


.franchise-hero::after {
  content: "";

  position: absolute;

  right: -160px;
  bottom: -200px;

  width: 600px;
  height: 600px;

  border:
    110px solid
    rgba(244, 81, 44, 0.16);

  border-radius: 50%;
}


.franchise-hero-orb {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}


.franchise-orb-one {
  top: 120px;
  right: 8%;

  width: 170px;
  height: 170px;

  background: var(--fr-orange);
}


.franchise-orb-two {
  top: 250px;
  right: 20%;

  width: 70px;
  height: 70px;

  background: #ffffff;

  opacity: 0.09;
}


.franchise-hero-inner {
  position: relative;

  z-index: 3;

  width: 100%;

  max-width: 1500px;
}


.franchise-kicker {
  margin-bottom: 24px;

  color: #ffad98;
}


.franchise-hero h1 {
  margin: 0;

  max-width: 1250px;

  font-family: var(--fr-display);

  font-size:
    clamp(
      82px,
      11vw,
      190px
    );

  font-weight: 400;

  line-height: 0.9;

  letter-spacing: -0.025em;

  text-transform: uppercase;
}


.franchise-hero h1 span {
  color: var(--fr-orange);
}


.franchise-hero-bottom {
  max-width: 1100px;

  margin-top: 50px;

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  gap: 50px;
}


.franchise-hero-bottom p {
  max-width: 660px;

  margin: 0;

  color:
    rgba(
      255,
      255,
      255,
      0.68
    );

  font-size: 18px;

  line-height: 1.7;
}


.franchise-hero-button {
  min-height: 58px;

  padding:
    0
    25px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 18px;

  border-radius: 999px;

  background: var(--fr-orange);
  color: #ffffff;

  font-weight: 800;

  white-space: nowrap;

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}


.franchise-hero-button:hover {
  transform: translateY(-4px);

  background: var(--fr-orange-bright);
}


/* =========================================
   FORMAT SECTION
========================================= */

.format-section {
  padding:
    clamp(
      90px,
      10vw,
      155px
    )
    var(--fr-pad);

  background: #ffffff;
}


.format-heading {
  max-width: 1000px;

  margin-bottom: 70px;
}


.franchise-section-label {
  margin-bottom: 22px;

  color: var(--fr-orange);
}


.format-heading h2,
.opportunity-copy h2,
.process-heading h2,
.franchise-cta h2 {
  margin: 0;

  font-family: var(--fr-display);

  font-weight: 400;

  letter-spacing: -0.025em;

  text-transform: uppercase;
}


.format-heading h2 {
  font-size:
    clamp(
      65px,
      8vw,
      130px
    );

  line-height: 0.93;
}


.format-heading h2 span,
.process-heading h2 span,
.franchise-cta h2 span {
  color: var(--fr-orange);
}


.format-heading > p:last-child {
  max-width: 580px;

  margin:
    30px
    0
    0;

  color: #686868;

  font-size: 17px;

  line-height: 1.7;
}


/* =========================================
   FORMAT CARDS
========================================= */

.format-grid {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );

  gap: 16px;
}


.format-card {
  position: relative;

  min-height: 580px;

  padding: 28px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  overflow: hidden;

  border-radius: 32px;

  background: var(--fr-soft);
  color: var(--fr-black);

  transition:
    transform
    0.35s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    ),
    box-shadow
    0.35s ease;
}


.format-card:hover {
  transform: translateY(-9px);

  box-shadow:
    0 28px 65px
    rgba(
      0,
      0,
      0,
      0.14
    );
}


.format-card-orange {
  background: var(--fr-orange);

  color: #ffffff;
}


.format-card-dark {
  background: var(--fr-black);

  color: #ffffff;
}


.format-card-top {
  position: relative;

  z-index: 3;

  display: flex;

  justify-content: space-between;

  align-items: center;
}


.format-card-top > span {
  font-size: 12px;

  font-weight: 900;

  letter-spacing: 0.12em;
}


.format-card-top i {
  width: 46px;
  height: 46px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: #ffffff;

  color: var(--fr-black);

  font-size: 19px;

  font-style: normal;

  transition:
    transform
    0.3s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );
}


.format-card:hover
.format-card-top i {
  transform:
    rotate(-12deg)
    scale(1.08);
}


.format-card-content {
  position: relative;

  z-index: 3;
}


.format-card-label {
  margin:
    0
    0
    12px;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 0.16em;

  text-transform: uppercase;

  opacity: 0.64;
}


.format-card h3 {
  margin: 0;

  font-family: var(--fr-display);

  font-size:
    clamp(
      55px,
      4.6vw,
      84px
    );

  font-weight: 400;

  line-height: 0.92;

  text-transform: uppercase;
}


.format-card-copy {
  max-width: 390px;

  margin:
    20px
    0
    0;

  color: #686868;

  font-size: 14px;

  line-height: 1.6;
}


.format-card-orange
.format-card-copy,
.format-card-dark
.format-card-copy {
  color:
    rgba(
      255,
      255,
      255,
      0.72
    );
}


/* =========================================
   FORMAT STICKERS
========================================= */

.format-illustration {
  position: relative;

  z-index: 2;

  width: 100%;

  height: 245px;

  margin:
    8px
    0
    10px;

  display: flex;

  align-items: center;

  justify-content: center;
}


.format-sticker {
  position: relative;

  width:
    min(
      100%,
      330px
    );

  aspect-ratio:
    1.28 / 1;

  transform:
    rotate(-2deg);

  filter:
    drop-shadow(
      0 16px 18px
      rgba(
        0,
        0,
        0,
        0.14
      )
    );

  transition:
    transform
    0.4s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    ),
    filter
    0.4s ease;
}


.format-card:hover
.format-sticker {
  transform:
    rotate(0deg)
    translateY(-6px)
    scale(1.025);

  filter:
    drop-shadow(
      0 22px 24px
      rgba(
        0,
        0,
        0,
        0.18
      )
    );
}


/* =========================================
   STICKER BADGES
========================================= */

.sticker-badge {
  position: absolute;

  z-index: 8;

  top: 4px;
  left: 4px;

  min-height: 34px;

  padding:
    0
    15px;

  display: inline-flex;

  align-items: center;

  border:
    4px solid
    #ffffff;

  border-radius: 999px;

  background: var(--fr-orange);

  color: #ffffff;

  font-size: 10px;

  font-weight: 900;

  letter-spacing: 0.13em;

  box-shadow:
    0 5px 0
    rgba(
      16,
      16,
      16,
      0.16
    );
}


.format-card-orange
.sticker-badge {
  background: var(--fr-black);
}


.format-card-dark
.sticker-badge {
  background: #ffffff;

  color: var(--fr-black);
}


/* =========================================
   RESTAURANT STICKER
========================================= */

.restaurant-sticker {
  transform:
    rotate(-2.5deg);
}


.sticker-store {
  position: absolute;

  left: 50%;
  bottom: 12px;

  width: 76%;
  height: 70%;

  transform:
    translateX(-50%);

  border:
    7px solid
    #ffffff;

  border-radius:
    24px
    24px
    18px
    18px;

  background:
    var(--fr-black);

  box-shadow:
    0 7px 0
    rgba(
      16,
      16,
      16,
      0.18
    );
}


.sticker-store-sign {
  position: absolute;

  left: 50%;
  top: -31px;

  width: 64%;

  min-height: 48px;

  transform:
    translateX(-50%);

  display: grid;

  place-items: center;

  border:
    7px solid
    #ffffff;

  border-radius: 14px;

  background:
    var(--fr-orange);

  color: #ffffff;

  font-family:
    var(--fr-display);

  font-size: 25px;

  letter-spacing: 0.03em;
}


.sticker-awning {
  position: absolute;

  left: 7%;
  right: 7%;

  top: 28px;

  height: 38px;

  display: grid;

  grid-template-columns:
    repeat(
      5,
      1fr
    );

  overflow: hidden;

  border-radius:
    5px
    5px
    15px
    15px;
}


.sticker-awning
span:nth-child(odd) {
  background: #ffffff;
}


.sticker-awning
span:nth-child(even) {
  background: var(--fr-orange);
}


.sticker-store-front {
  position: absolute;

  left: 8%;
  right: 8%;

  bottom: 10%;

  height: 42%;

  display: grid;

  grid-template-columns:
    1fr
    0.72fr
    1fr;

  gap: 8px;

  align-items: end;
}


.sticker-window,
.sticker-door {
  display: block;

  width: 100%;

  border:
    4px solid
    #ffffff;

  border-radius:
    7px
    7px
    4px
    4px;
}


.sticker-window {
  height: 74%;

  background: #d8d5d0;
}


.sticker-door {
  height: 100%;

  background: var(--fr-orange);
}


.sticker-stars {
  position: absolute;

  right: 0;
  top: 14%;

  color: var(--fr-orange);

  font-size: 24px;

  transform:
    rotate(10deg);
}


.sticker-stars
span:last-child {
  display: block;

  margin:
    7px
    0
    0
    14px;

  font-size: 15px;
}


/* =========================================
   CLOUD KITCHEN STICKER
========================================= */

.cloud-sticker {
  transform:
    rotate(2deg);
}


.sticker-cloud {
  position: absolute;

  left: 50%;
  top: 10px;

  transform:
    translateX(-50%);

  color: #ffffff;

  font-size: 124px;

  line-height: 1;

  text-shadow:
    -5px -5px 0 #ffffff,
    5px -5px 0 #ffffff,
    -5px 5px 0 #ffffff,
    5px 5px 0 #ffffff,
    0 9px 0 rgba(16,16,16,0.15);
}


.sticker-bag {
  position: absolute;

  left: 50%;
  bottom: 8px;

  width: 48%;
  height: 54%;

  transform:
    translateX(-50%);

  display: grid;

  place-items: center;

  border:
    7px solid
    #ffffff;

  border-radius:
    24px;

  background: var(--fr-black);

  color: #ffffff;

  box-shadow:
    0 7px 0
    rgba(
      16,
      16,
      16,
      0.16
    );
}


.sticker-bag strong {
  margin-top: 15px;

  font-family: var(--fr-display);

  font-size: 42px;

  letter-spacing: 0.04em;
}


.sticker-bag-handle {
  position: absolute;

  left: 50%;
  top: -34px;

  width: 42%;
  height: 42px;

  transform:
    translateX(-50%);

  border:
    7px solid
    #ffffff;

  border-bottom: 0;

  border-radius:
    30px
    30px
    0
    0;
}


.sticker-speed {
  position: absolute;

  left: -38px;

  height: 7px;

  border-radius: 999px;

  background: #ffffff;
}


.sticker-speed-one {
  top: 42%;

  width: 54px;
}


.sticker-speed-two {
  top: 62%;

  width: 36px;
}


.sticker-pin {
  position: absolute;

  right: 2%;
  bottom: 15%;

  width: 55px;
  height: 55px;

  display: grid;

  place-items: center;

  border:
    6px solid
    #ffffff;

  border-radius: 50%;

  background: var(--fr-orange);

  color: #ffffff;

  font-size: 27px;

  font-weight: 900;

  box-shadow:
    0 6px 0
    rgba(
      16,
      16,
      16,
      0.17
    );
}


/* =========================================
   KIOSK STICKER
========================================= */

.kiosk-sticker {
  transform:
    rotate(-1.5deg);
}


.sticker-kiosk {
  position: absolute;

  left: 50%;
  bottom: 10px;

  width: 72%;
  height: 66%;

  transform:
    translateX(-50%);

  border:
    7px solid
    #ffffff;

  border-radius:
    21px
    21px
    14px
    14px;

  background: var(--fr-orange);

  box-shadow:
    0 8px 0
    rgba(
      0,
      0,
      0,
      0.33
    );
}


.sticker-kiosk-sign {
  position: absolute;

  left: 50%;
  top: -34px;

  min-width: 56%;
  min-height: 45px;

  padding:
    0
    16px;

  transform:
    translateX(-50%);

  display: grid;

  place-items: center;

  border:
    7px solid
    #ffffff;

  border-radius: 13px;

  background: var(--fr-black);

  color: #ffffff;

  font-family:
    var(--fr-display);

  font-size: 23px;

  letter-spacing: 0.04em;
}


.sticker-kiosk-roof {
  position: absolute;

  left: 0;
  right: 0;

  top: 22px;

  height: 32px;

  display: grid;

  grid-template-columns:
    repeat(
      5,
      1fr
    );

  overflow: hidden;
}


.sticker-kiosk-roof
span:nth-child(odd) {
  background: #ffffff;
}


.sticker-kiosk-roof
span:nth-child(even) {
  background: var(--fr-black);
}


.sticker-kiosk-body {
  position: absolute;

  left: 8%;
  right: 8%;

  bottom: 11%;

  height: 39%;

  display: grid;

  grid-template-columns:
    1.65fr
    0.7fr;

  gap: 8px;
}


.sticker-kiosk-window,
.sticker-kiosk-panel {
  display: block;

  border:
    4px solid
    #ffffff;

  border-radius: 6px;
}


.sticker-kiosk-window {
  background: #1b1b1b;
}


.sticker-kiosk-panel {
  background: #ffffff;
}


.sticker-kiosk-feet
span {
  position: absolute;

  bottom: -16px;

  width: 9px;
  height: 23px;

  border:
    4px solid
    #ffffff;

  border-top: 0;

  background: var(--fr-black);
}


.sticker-kiosk-feet
span:first-child {
  left: 21%;
}


.sticker-kiosk-feet
span:last-child {
  right: 21%;
}


.sticker-spark {
  position: absolute;

  right: 2%;
  top: 17%;

  color: var(--fr-orange);

  font-size: 30px;

  transform:
    rotate(15deg);
}


/* =========================================
   OPPORTUNITY SECTIONS
========================================= */

.opportunity-section {
  position: relative;

  min-height: 620px;

  padding:
    clamp(
      62px,
      6vw,
      88px
    )
    var(--fr-pad);

  display: grid;

  grid-template-columns:
    70px
    minmax(
      0,
      1fr
    )
    minmax(
      380px,
      0.9fr
    );

  gap:
    clamp(
      35px,
      6vw,
      100px
    );

  align-items: center;
}


.opportunity-light {
  background: var(--fr-cream);

  color: var(--fr-black);
}


.opportunity-orange {
  background: var(--fr-orange);

  color: #ffffff;
}


.opportunity-dark {
  background: var(--fr-black);

  color: #ffffff;
}


.opportunity-number {
  align-self: start;

  padding-top: 9px;

  color: var(--fr-orange);

  font-size: 13px;

  font-weight: 900;

  letter-spacing: 0.12em;
}


.opportunity-orange
.opportunity-number {
  color: #ffffff;
}


.opportunity-copy {
  max-width: 720px;
}


.opportunity-copy h2 {
  font-size:
    clamp(
      65px,
      7vw,
      120px
    );

  line-height: 0.92;
}


.opportunity-copy h2 span {
  color: var(--fr-orange);
}


.opportunity-orange
.opportunity-copy h2 span {
  color: #ffffff;
}


.opportunity-dark
.opportunity-copy h2 span {
  color: var(--fr-orange);
}


.opportunity-orange
.franchise-section-label {
  color:
    rgba(
      255,
      255,
      255,
      0.76
    );
}


.opportunity-lead {
  max-width: 590px;

  margin:
    30px
    0
    0;

  color: #686868;

  font-size: 18px;

  line-height: 1.7;
}


.opportunity-orange
.opportunity-lead,
.opportunity-dark
.opportunity-lead {
  color:
    rgba(
      255,
      255,
      255,
      0.7
    );
}


.opportunity-points {
  margin-top: 45px;

  border-top:
    1px solid
    rgba(
      0,
      0,
      0,
      0.14
    );
}


.opportunity-orange
.opportunity-points,
.opportunity-dark
.opportunity-points {
  border-color:
    rgba(
      255,
      255,
      255,
      0.2
    );
}


.opportunity-points > div {
  padding:
    22px
    0;

  display: grid;

  grid-template-columns:
    190px
    1fr;

  gap: 30px;

  border-bottom:
    1px solid
    rgba(
      0,
      0,
      0,
      0.14
    );
}


.opportunity-orange
.opportunity-points > div,
.opportunity-dark
.opportunity-points > div {
  border-color:
    rgba(
      255,
      255,
      255,
      0.2
    );
}


.opportunity-points strong {
  font-size: 15px;
}


.opportunity-points p {
  margin: 0;

  color: #686868;

  font-size: 14px;

  line-height: 1.6;
}


.opportunity-orange
.opportunity-points p,
.opportunity-dark
.opportunity-points p {
  color:
    rgba(
      255,
      255,
      255,
      0.68
    );
}


.opportunity-button {
  min-height: 58px;

  margin-top: 38px;

  padding:
    0
    24px;

  display: inline-flex;

  align-items: center;

  gap: 18px;

  border-radius: 999px;

  background: var(--fr-black);

  color: #ffffff;

  font-size: 15px;

  font-weight: 800;

  transition:
    transform
    0.25s ease;
}


.opportunity-button:hover {
  transform:
    translateY(-4px);
}


.opportunity-button-light {
  background: #ffffff;

  color: var(--fr-black);
}


.opportunity-button-orange {
  background: var(--fr-orange);

  color: #ffffff;
}


/* =========================================
   OPPORTUNITY VISUAL
========================================= */

.opportunity-visual {
  min-height: 430px;

  padding: 34px;

  display: flex;

  flex-direction: column;

  justify-content: center;

  overflow: hidden;

  border-radius: 36px;

  background: #ffffff;

  color: var(--fr-black);
}


.opportunity-orange
.opportunity-visual {
  background: #ffffff;

  color: var(--fr-orange);
}


.opportunity-dark
.opportunity-visual {
  background: #1a1a1a;

  color: #ffffff;
}


.visual-small {
  font-size: 12px;

  font-weight: 900;

  letter-spacing: 0.16em;
}


.opportunity-visual strong {
  margin-top: 10px;

  font-family: var(--fr-display);

  font-size:
    clamp(
      110px,
      10vw,
      190px
    );

  font-weight: 400;

  line-height: 0.9;

  text-transform: uppercase;
}


.visual-outline {
  margin-top: 5px;

  font-family: var(--fr-display);

  font-size:
    clamp(
      48px,
      4vw,
      75px
    );

  line-height: 0.95;

  text-transform: uppercase;

  -webkit-text-stroke:
    1.5px
    currentColor;

  color: transparent;
}


/* =========================================
   HOW IT STARTS
========================================= */

.franchise-process {
  padding:
    clamp(
      70px,
      7vw,
      105px
    )
    var(--fr-pad);

  background: #ffffff;
}


.process-heading {
  max-width: 1000px;

  margin-bottom: 42px;
}


.process-heading h2 {
  font-size:
    clamp(
      65px,
      8vw,
      130px
    );

  line-height: 0.93;
}


.process-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap: 14px;
}


.process-grid article {
  min-height: 255px;

  padding: 24px;

  display: flex;

  flex-direction: column;

  border-radius: 25px;

  background: var(--fr-soft);
}


.process-grid article > span {
  color: var(--fr-orange);

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 0.08em;
}


.process-grid h3 {
  margin:
    auto
    0
    14px;

  font-size: 26px;

  line-height: 1.05;

  letter-spacing: -0.03em;
}


.process-grid p {
  margin: 0;

  color: #6b6b6b;

  font-size: 13px;

  line-height: 1.55;
}


/* =========================================
   CTA
========================================= */

.franchise-cta {
  padding:
    clamp(
      78px,
      8vw,
      120px
    )
    var(--fr-pad);

  background: var(--fr-yellow);

  color: var(--fr-brown);
}


.franchise-cta
.franchise-section-label {
  color: var(--fr-brown);
}


.franchise-cta h2 {
  max-width: 1100px;

  font-size:
    clamp(
      70px,
      9vw,
      150px
    );

  line-height: 0.92;
}


.franchise-cta h2 span {
  color: var(--fr-orange);
}


.franchise-cta > p {
  max-width: 600px;

  margin:
    30px
    0
    0;

  color: #704914;

  font-size: 17px;

  line-height: 1.7;
}


.franchise-cta-button {
  min-height: 62px;

  margin-top: 38px;

  padding:
    0
    27px;

  display: inline-flex;

  align-items: center;

  gap: 20px;

  border-radius: 999px;

  background: var(--fr-black);

  color: #ffffff;

  font-size: 16px;

  font-weight: 800;

  transition:
    transform
    0.25s ease;
}


.franchise-cta-button:hover {
  transform:
    translateY(-4px);
}


/* =========================================
   TABLET
========================================= */

@media (
  min-width: 768px
) and (
  max-width: 1099px
) {

  .franchise-hero {
    min-height: 700px;

    padding-top: 130px;
  }


  .franchise-hero h1 {
    font-size:
      clamp(
        90px,
        13vw,
        145px
      );
  }


  .format-grid {
    grid-template-columns:
      1fr
      1fr;
  }


  .format-card:last-child {
    grid-column:
      1 / -1;
  }


  .format-card {
    min-height: 540px;
  }


  .format-card:last-child
  .format-illustration {
    max-width: 650px;

    margin-left: auto;
    margin-right: auto;
  }


  .opportunity-section {
    grid-template-columns:
      50px
      1fr;

    gap: 30px;
  }


  .opportunity-visual {
    grid-column:
      1 / -1;

    min-height: 400px;
  }


  .process-grid {
    grid-template-columns:
      1fr
      1fr;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

  /* HERO */

  .franchise-hero {
    min-height: 650px;

    padding:
      112px
      18px
      58px;

    align-items: flex-end;
  }


  .franchise-orb-one {
    width: 90px;
    height: 90px;

    top: 94px;
    right: 18px;
  }


  .franchise-orb-two {
    display: none;
  }


  .franchise-hero h1 {
    font-size:
      clamp(
        63px,
        19vw,
        88px
      );

    line-height: 0.96;
  }


  .franchise-hero-bottom {
    margin-top: 30px;

    display: block;
  }


  .franchise-hero-bottom p {
    font-size: 14px;

    line-height: 1.6;
  }


  .franchise-hero-button {
    min-height: 50px;

    margin-top: 24px;

    padding:
      0
      20px;

    font-size: 14px;
  }


  /* =========================================
     MOBILE START HERE
  ========================================= */

  .format-section {
    min-height: auto;

    padding:
      30px
      10px
      30px;

    display: block;
  }


  .format-heading {
    margin-bottom: 12px;

    padding:
      0
      8px;
  }


  .format-heading
  .franchise-section-label {
    margin-bottom: 6px;

    font-size: 8px;
  }


  .format-heading h2 {
    font-size:
      clamp(
        34px,
        10vw,
        44px
      );

    line-height: 0.94;
  }


  .format-heading > p:last-child {
    max-width: 340px;

    margin-top: 7px;

    font-size: 10px;

    line-height: 1.4;
  }


  .format-grid {
    grid-template-columns: 1fr;

    gap: 8px;
  }


  .format-card {
    min-height: 0;

    height:
      clamp(
        145px,
        18vh,
        165px
      );

    padding:
      11px
      13px;

    display: grid;

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      40%;

    grid-template-rows:
      auto
      1fr;

    gap: 4px;

    border-radius: 18px;
  }


  .format-card-top {
    grid-column:
      1 / -1;
  }


  .format-card-top > span {
    font-size: 8px;
  }


  .format-card-top i {
    width: 27px;
    height: 27px;

    font-size: 11px;
  }


  .format-card-content {
    grid-column: 1;
    grid-row: 2;

    align-self: end;

    min-width: 0;

    padding:
      0
      2px
      2px
      0;
  }


  .format-card-label {
    display: none;
  }


  .format-card h3 {
    font-size:
      clamp(
        28px,
        8.5vw,
        37px
      );

    line-height: 0.9;
  }


  .format-card h3 br {
    display: none;
  }


  .format-card-copy {
    max-width: 200px;

    margin-top: 4px;

    font-size: 8px;

    line-height: 1.28;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;
  }


  /* =========================================
     MOBILE STICKERS
  ========================================= */

  .format-illustration {
    grid-column: 2;
    grid-row: 2;

    width: 100%;
    height: 100%;

    min-height: 0;

    margin: 0;

    display: flex;

    align-items: center;
    justify-content: center;

    overflow: visible;
  }


  .format-sticker {
    width: 118px;

    max-width: 100%;

    aspect-ratio:
      1 / 1;

    transform:
      none !important;

    filter:
      drop-shadow(
        0 6px 6px
        rgba(
          0,
          0,
          0,
          0.13
        )
      );
  }


  .format-card:hover
  .format-sticker {
    transform:
      none !important;

    filter:
      drop-shadow(
        0 6px 6px
        rgba(
          0,
          0,
          0,
          0.13
        )
      );
  }


  .sticker-badge,
  .sticker-stars,
  .sticker-pin,
  .sticker-speed,
  .sticker-spark {
    display: none;
  }


  .sticker-store {
    bottom: 8px;

    width: 84%;
    height: 62%;

    border-width: 4px;

    border-radius:
      14px
      14px
      10px
      10px;

    box-shadow:
      0 4px 0
      rgba(
        16,
        16,
        16,
        0.15
      );
  }


  .sticker-store-sign {
    top: -20px;

    width: 68%;

    min-height: 31px;

    border-width: 4px;

    border-radius: 8px;

    font-size: 15px;
  }


  .sticker-awning {
    left: 8%;
    right: 8%;

    top: 18px;

    height: 22px;

    border-radius:
      3px
      3px
      8px
      8px;
  }


  .sticker-store-front {
    left: 9%;
    right: 9%;

    bottom: 9%;

    height: 39%;

    gap: 4px;
  }


  .sticker-window,
  .sticker-door {
    border-width: 2px;

    border-radius:
      4px
      4px
      2px
      2px;
  }


  .sticker-cloud {
    top: 1px;

    font-size: 78px;

    text-shadow:
      -3px -3px 0 #ffffff,
      3px -3px 0 #ffffff,
      -3px 3px 0 #ffffff,
      3px 3px 0 #ffffff,
      0 4px 0 rgba(16,16,16,0.12);
  }


  .sticker-bag {
    bottom: 9px;

    width: 58%;
    height: 47%;

    border-width: 4px;

    border-radius: 14px;

    box-shadow:
      0 4px 0
      rgba(
        16,
        16,
        16,
        0.14
      );
  }


  .sticker-bag-handle {
    top: -20px;

    width: 44%;
    height: 25px;

    border-width: 4px;

    border-bottom: 0;

    border-radius:
      18px
      18px
      0
      0;
  }


  .sticker-bag strong {
    margin-top: 7px;

    font-size: 23px;
  }


  .sticker-kiosk {
    bottom: 8px;

    width: 82%;
    height: 59%;

    border-width: 4px;

    border-radius:
      13px
      13px
      9px
      9px;

    box-shadow:
      0 4px 0
      rgba(
        0,
        0,
        0,
        0.25
      );
  }


  .sticker-kiosk-sign {
    top: -20px;

    min-width: 60%;

    min-height: 30px;

    padding:
      0
      8px;

    border-width: 4px;

    border-radius: 8px;

    font-size: 14px;
  }


  .sticker-kiosk-roof {
    top: 15px;

    height: 19px;
  }


  .sticker-kiosk-body {
    left: 8%;
    right: 8%;

    bottom: 9%;

    height: 36%;

    gap: 4px;
  }


  .sticker-kiosk-window,
  .sticker-kiosk-panel {
    border-width: 2px;

    border-radius: 4px;
  }


  .sticker-kiosk-feet {
    display: none;
  }


  /* =========================================
     MOBILE OPPORTUNITY DETAILS
  ========================================= */

  .opportunity-section {
    min-height: auto;

    padding:
      34px
      18px
      30px;

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    gap: 0;
  }


  .opportunity-number {
    display: none;
  }


  .opportunity-copy {
    width: 100%;

    max-width: none;
  }


  .opportunity-copy
  .franchise-section-label {
    margin-bottom: 8px;

    font-size: 8px;

    line-height: 1;

    letter-spacing: 0.16em;
  }


  .opportunity-copy h2 {
    font-size:
      clamp(
        42px,
        12.5vw,
        55px
      );

    line-height: 0.9;
  }


  .opportunity-lead {
    max-width: 360px;

    margin:
      14px
      0
      0;

    font-size: 11.5px;

    line-height: 1.4;
  }


  .opportunity-points {
    margin-top: 19px;
  }


  .opportunity-points > div {
    padding:
      10px
      0;

    display: block;
  }


  .opportunity-points strong {
    display: block;

    margin-bottom: 3px;

    font-size: 11.5px;

    line-height: 1.25;
  }


  .opportunity-points p {
    max-width: 350px;

    margin: 0;

    font-size: 9.5px;

    line-height: 1.35;
  }


  .opportunity-button {
    width: 100%;

    min-height: 46px;

    margin-top: 17px;

    padding:
      0
      17px;

    justify-content: space-between;

    font-size: 11px;
  }


  .opportunity-visual {
    display: none;
  }


  /* =========================================
     MOBILE HOW IT STARTS
  ========================================= */

  .franchise-process {
    padding:
      42px
      14px
      46px;
  }


  .process-heading {
    margin-bottom: 20px;
  }


  .process-heading
  .franchise-section-label {
    margin-bottom: 9px;

    font-size: 8px;

    letter-spacing: 0.15em;
  }


  .process-heading h2 {
    max-width: 380px;

    font-size:
      clamp(
        40px,
        12vw,
        52px
      );

    line-height: 0.91;
  }


  .process-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );

    gap: 8px;
  }


  .process-grid article {
    min-height: 145px;

    padding: 14px;

    border-radius: 17px;
  }


  .process-grid article > span {
    font-size: 9px;
  }


  .process-grid h3 {
    margin:
      auto
      0
      7px;

    font-size: 17px;

    line-height: 1.06;
  }


  .process-grid p {
    font-size: 8.5px;

    line-height: 1.35;
  }


  /* =========================================
     MOBILE CTA
  ========================================= */

  .franchise-cta {
    padding:
      68px
      18px;
  }


  .franchise-cta h2 {
    font-size:
      clamp(
        58px,
        18vw,
        86px
      );
  }


  .franchise-cta > p {
    font-size: 15px;
  }


  .franchise-cta-button {
    width: 100%;

    justify-content: space-between;
  }


  .format-card:focus,
  .format-card:active,
  .opportunity-button:focus,
  .opportunity-button:active,
  .franchise-hero-button:focus,
  .franchise-hero-button:active,
  .franchise-cta-button:focus,
  .franchise-cta-button:active {
    outline: none;
  }

}


/* =========================================
   SMALL PHONES
========================================= */

@media (max-width: 380px) {

  .format-section {
    padding:
      24px
      9px
      24px;
  }


  .format-heading {
    margin-bottom: 10px;
  }


  .format-heading h2 {
    font-size: 32px;
  }


  .format-heading > p:last-child {
    font-size: 9px;
  }


  .format-card {
    height: 138px;

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      38%;
  }


  .format-card h3 {
    font-size: 26px;
  }


  .format-card-copy {
    font-size: 7.6px;
  }


  .format-sticker {
    width: 102px;
  }


  .opportunity-section {
    padding:
      28px
      15px
      24px;
  }


  .opportunity-copy h2 {
    font-size: 38px;
  }


  .opportunity-lead {
    margin-top: 10px;

    font-size: 10px;
  }


  .opportunity-points {
    margin-top: 14px;
  }


  .opportunity-points > div {
    padding:
      8px
      0;
  }


  .opportunity-button {
    min-height: 42px;

    margin-top: 13px;

    font-size: 10px;
  }


  .franchise-process {
    padding:
      36px
      10px
      40px;
  }


  .process-heading {
    margin-bottom: 15px;
  }


  .process-heading h2 {
    font-size: 37px;
  }


  .process-grid {
    gap: 6px;
  }


  .process-grid article {
    min-height: 132px;

    padding: 12px;

    border-radius: 15px;
  }


  .process-grid h3 {
    font-size: 15px;
  }


  .process-grid p {
    font-size: 7.5px;

    line-height: 1.3;
  }

}


/* =========================================
   SHORT PHONE SCREENS
========================================= */

@media (
  max-width: 767px
) and (
  max-height: 700px
) {

  .format-section {
    padding:
      20px
      9px
      20px;
  }


  .format-heading {
    margin-bottom: 8px;
  }


  .format-heading h2 {
    font-size: 30px;
  }


  .format-heading > p:last-child {
    font-size: 8.5px;
  }


  .format-card {
    height: 128px;
  }


  .format-card-copy {
    display: none;
  }


  .format-card h3 {
    font-size: 27px;
  }


  .format-sticker {
    width: 96px;
  }


  .opportunity-section {
    padding:
      24px
      15px
      20px;
  }


  .process-grid article {
    min-height: 124px;
  }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (
  prefers-reduced-motion:
  reduce
) {

  .format-card,
  .format-sticker,
  .franchise-hero-button,
  .opportunity-button,
  .franchise-cta-button {
    transition: none;
  }

}