/* Creative lower-page composition. Scoped so the rest of the landing page remains untouched. */
.creative-lower {
  --cl-navy: var(--navy, #14213D);
  --cl-blue: var(--blue, #2563EB);
  --cl-orange: var(--orange, #FF7849);
  --cl-lavender: var(--lavender, #E9E4FF);
  --cl-sky: var(--sky, #DDEEFF);
  --cl-cream: var(--cream, #FAF9F6);
  --cl-ink: var(--ink, #20252B);
  color: var(--cl-ink);
  font-family: 'DM Sans', sans-serif;
  overflow: clip;
}
.creative-lower *, .creative-lower *::before, .creative-lower *::after { box-sizing: border-box; }
.creative-lower section { scroll-margin-top: 24px; }
.creative-lower h2, .creative-lower h3, .creative-lower p, .creative-lower figure, .creative-lower blockquote { margin: 0; }
.creative-lower h2, .creative-lower h3 { font-family: 'Manrope', sans-serif; font-weight: 700; letter-spacing: -.045em; }
.creative-lower h2 { font-size: clamp(38px, 4.65vw, 68px); line-height: 1.08; text-wrap: balance; }
.creative-lower h3 { font-size: clamp(21px, 2vw, 27px); line-height: 1.25; }
.creative-lower p { font-size: 18px; line-height: 1.65; }
.creative-lower p + p { margin-top: 1.1em; }
.creative-lower .cl-kicker, .creative-lower .cl-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.creative-lower .cl-kicker { margin-bottom: 22px; color: var(--cl-blue); }
.creative-lower .cl-deliverables .cl-kicker,
.creative-lower .cl-delay .cl-kicker { color: #1D4ED8; }
.creative-lower .cl-final .cl-kicker { color: #14213D; }

/* Real-world voices lead into a generously scaled client quotation. */
.creative-lower .cl-proof { background: #FCE2D6; padding: clamp(90px, 9vw, 140px) 0 clamp(95px, 10vw, 150px); color: var(--cl-navy); }
.cl-proof-heading { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .55fr); align-items: end; gap: clamp(35px, 7vw, 110px); }
.cl-proof-heading h2 { max-width: 850px; }
.cl-proof-heading > p { max-width: 410px; padding-bottom: 5px; }
.cl-public-voices { display: grid; grid-template-columns: minmax(140px, .32fr) minmax(0, 1.68fr); gap: 35px; margin-top: clamp(65px, 8vw, 115px); padding: 25px 0 52px; border-top: 1px solid rgba(20,33,61,.3); }
.creative-lower .cl-public-voices .cl-label { color: #553F3D; }
.cl-public-voices .cl-label span { display: block; margin-top: 8px; color: var(--cl-navy); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.cl-public-voices ul { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); list-style: none; padding: 0; margin: 0; }
.cl-public-voices blockquote { font-family: 'Manrope', sans-serif; font-size: clamp(20px, 1.75vw, 25px); font-weight: 600; line-height: 1.4; letter-spacing: -.035em; }
.creative-lower .cl-public-voices li p { margin-top: 18px; font-size: 14px; line-height: 1.45; }
.cl-client-intro { border-top: 1px solid rgba(20,33,61,.3); padding: 23px 0; }
.creative-lower .cl-client-intro p { font-size: 15px; font-weight: 600; }
.cl-client-quote { display: grid; grid-template-columns: minmax(80px, .22fr) minmax(0, 1.78fr); gap: clamp(16px, 3vw, 45px); padding: clamp(38px, 5.8vw, 86px); background: #F8C1A9; border-radius: 0 clamp(70px, 10vw, 145px) 0 0; }
.cl-quote-mark { color: var(--cl-blue); font: 400 clamp(120px, 15vw, 210px)/.8 Georgia, serif; }
.creative-lower .cl-client-quote blockquote p { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(25px, 2.8vw, 41px); font-style: italic; line-height: 1.34; letter-spacing: -.025em; }
.cl-client-quote figcaption { margin-top: 34px; font-size: 15px; font-weight: 700; line-height: 1.5; }

/* Open, varied typography rather than a collection of matching cards. */
.creative-lower .cl-included { background: var(--cl-cream); padding: clamp(95px, 10vw, 150px) 0; color: var(--cl-navy); }
.cl-included-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .55fr); align-items: end; gap: clamp(40px, 9vw, 140px); }
.cl-included-heading h2 { max-width: 760px; }
.cl-included-intro { max-width: 450px; }
.cl-sprint-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(35px, 7vw, 105px); margin: clamp(64px, 8vw, 110px) 0 0; padding: 0; list-style: none; }
.cl-sprint-list li { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: clamp(15px, 2vw, 30px); align-items: start; padding: 32px 0 45px; border-top: 1px solid rgba(20,33,61,.22); min-width: 0; }
.cl-sprint-list li:first-child { grid-column: 1 / -1; grid-template-columns: minmax(150px, .32fr) minmax(0, 1fr); padding: 34px 0 52px; }
.cl-sprint-list li:last-child { grid-column: 1 / -1; grid-template-columns: minmax(150px, .32fr) minmax(0, 1fr); margin-top: 10px; padding: clamp(32px, 4vw, 60px); background: var(--cl-lavender); border: 0; border-radius: 0 90px 0 0; }
.cl-number { display: block; color: var(--cl-blue); font-family: 'Manrope', sans-serif; font-size: clamp(55px, 5.5vw, 78px); font-weight: 700; line-height: .9; letter-spacing: -.08em; }
.cl-sprint-list li:first-child .cl-number, .cl-sprint-list li:last-child .cl-number { color: var(--cl-orange); font-size: clamp(85px, 10vw, 140px); }
.cl-sprint-list li:first-child .cl-number { color: #C64B2D; }
.cl-sprint-list li:last-child .cl-number { color: var(--cl-blue); }
.cl-sprint-list li h3 { max-width: 620px; }
.creative-lower .cl-sprint-list li p { max-width: 650px; margin-top: 14px; font-size: 17px; line-height: 1.65; }
.cl-booking-note { display: grid; grid-template-columns: minmax(150px, .32fr) minmax(0, 1fr); gap: 30px; margin-top: 55px; }
.creative-lower .cl-booking-note .cl-label { color: var(--cl-blue); padding-top: 6px; }
.cl-booking-note > p:last-child { max-width: 850px; }

.creative-lower .cl-deliverables { background: var(--cl-sky); padding: clamp(90px, 9vw, 140px) 0; color: var(--cl-navy); }
.cl-deliverables-layout { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1fr); gap: clamp(65px, 10vw, 155px); align-items: start; }
.cl-deliverables-heading h2 { max-width: 630px; }
.cl-deliverables-list { list-style: none; padding: 0; margin: 0; }
.cl-deliverables-list li { padding: 25px 0 29px; border-top: 1px solid rgba(20,33,61,.3); }
.cl-deliverables-list li:last-child { border-bottom: 1px solid rgba(20,33,61,.3); }
.cl-deliverables-list h3 { max-width: 570px; }
.creative-lower .cl-deliverables-list p { margin-top: 10px; font-size: 17px; }

/* A bold price moment followed by a warm, readable guarantee. */
.creative-lower .cl-offer { background: var(--cl-blue); color: #fff; padding: clamp(95px, 10vw, 150px) 0; }
.cl-offer-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .78fr); gap: clamp(55px, 8vw, 125px); align-items: start; }
.creative-lower .cl-offer .cl-kicker { color: #DDEEFF; }
.cl-investment h2 { max-width: 600px; }
.creative-lower .cl-price-line { margin: clamp(35px, 5vw, 70px) 0 27px; font-family: 'Manrope', sans-serif; font-weight: 700; line-height: 1.2; }
.cl-price-line span { display: block; font-size: 16px; }
.cl-price-line strong { display: block; margin: 6px 0 8px; font-size: clamp(74px, 9.1vw, 132px); letter-spacing: -.075em; line-height: .95; white-space: nowrap; }
.cl-investment > p:not(.cl-kicker):not(.cl-price-line) { max-width: 620px; }
.cl-tool-cost { max-width: 620px; margin-top: 38px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.5); }
.creative-lower .cl-tool-cost .cl-label { color: #DDEEFF; }
.creative-lower .cl-tool-cost p:last-child { margin-top: 9px; font-size: 16px; }
.cl-guarantee { margin-top: clamp(40px, 8vw, 110px); padding: clamp(35px, 4.5vw, 65px); background: #FAF9F6; color: var(--cl-navy); border-radius: 0 clamp(70px, 8vw, 120px) 0 0; }
.creative-lower .cl-guarantee .cl-kicker { color: var(--cl-blue); }
.creative-lower .cl-guarantee h2 { font-size: clamp(25px, 2.2vw, 34px); line-height: 1.2; }
.creative-lower .cl-guarantee .cl-guarantee-quote { margin: 24px 0; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: clamp(28px, 3vw, 43px); letter-spacing: -.045em; line-height: 1.23; }
.creative-lower .cl-guarantee > p:last-child { font-size: 16px; }

.creative-lower .cl-delay { background: var(--cl-lavender); padding: clamp(95px, 10vw, 150px) 0; color: var(--cl-navy); }
.cl-delay-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .65fr); gap: clamp(50px, 10vw, 155px); }
.cl-delay-layout h2 { max-width: 760px; }
.cl-delay-copy { padding-top: clamp(20px, 6vw, 85px); max-width: 560px; }
.cl-delay-copy p:first-child { font-weight: 600; }

/* Native details keep the questions usable with mouse, touch and keyboard. */
.creative-lower .cl-faq { background: #fff; padding: clamp(95px, 10vw, 150px) 0; color: var(--cl-navy); }
.cl-faq-layout { display: grid; grid-template-columns: minmax(0, .75fr) minmax(0, 1fr); gap: clamp(55px, 10vw, 155px); align-items: start; }
.cl-faq-layout h2 { max-width: 500px; }
.cl-faq-list { border-top: 1px solid rgba(20,33,61,.25); }
.cl-faq-list details { border-bottom: 1px solid rgba(20,33,61,.25); }
.cl-faq-list summary { position: relative; cursor: pointer; list-style: none; padding: 24px 48px 24px 0; font-family: 'Manrope', sans-serif; font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; letter-spacing: -.025em; line-height: 1.4; }
.cl-faq-list summary::-webkit-details-marker { display: none; }
.cl-faq-list summary::after { content: '+'; position: absolute; right: 2px; top: 20px; color: var(--cl-blue); font: 400 30px/1 'DM Sans', sans-serif; transition: transform .2s ease; }
.cl-faq-list details[open] summary::after { transform: rotate(45deg); }
.creative-lower .cl-faq-list details p { max-width: 680px; padding: 0 40px 25px 0; font-size: 17px; }
.creative-lower .cl-button { display: inline-flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; min-height: 62px; margin-top: 32px; padding: 17px 24px; border: 2px solid transparent; border-radius: 999px; font-family: 'DM Sans', sans-serif; font-size: 15px; font-weight: 700; line-height: 1.35; text-align: center; text-decoration: none; white-space: normal; transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.creative-lower .cl-button-blue { background: var(--cl-blue); color: #fff; border-color: var(--cl-blue); }
.creative-lower .cl-button-blue:hover { background: var(--cl-navy); border-color: var(--cl-navy); color: #fff; }
.creative-lower .cl-faq-list summary:focus-visible, .creative-lower .cl-button:focus-visible { outline: 3px solid var(--cl-blue); outline-offset: 5px; }

/* A photographic, warm-to-cobalt finale instead of a boxed callout. */
.creative-lower .cl-final { background: var(--cl-orange); color: var(--cl-navy); }
.cl-final-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); align-items: center; gap: clamp(48px, 7vw, 100px); padding-top: clamp(85px, 9vw, 140px); padding-bottom: clamp(85px, 9vw, 140px); }
.cl-final-copy h2 { max-width: 720px; font-size: clamp(49px, 6vw, 88px); line-height: 1.02; }
.creative-lower .cl-final-copy > p:not(.cl-kicker) { max-width: 580px; margin-top: 28px; }
.cl-final-image { min-height: 580px; height: 100%; background: linear-gradient(145deg, #F8C1A9, #E9E4FF); border-radius: clamp(110px, 14vw, 200px) 0 0 0; overflow: hidden; }
.cl-final-image img { display: block; width: 100%; height: 100%; min-height: 580px; color: transparent; object-fit: cover; object-position: center; }
.cl-postscripts-wrap { background: var(--cl-navy); color: #fff; }
.cl-postscripts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(50px, 9vw, 140px); padding-top: clamp(65px, 7vw, 105px); padding-bottom: clamp(70px, 8vw, 120px); }
.creative-lower .cl-postscript p { font-size: 16px; line-height: 1.75; color: #F6F7FB; }
.cl-ps-label { color: #FFB599; font-family: 'Manrope', sans-serif; font-size: 22px; }
.creative-lower .cl-button-warm { background: #fff; color: var(--cl-navy); border-color: #fff; }
.creative-lower .cl-button-warm:hover { background: var(--cl-orange); border-color: var(--cl-orange); color: var(--cl-navy); }
.creative-lower .cl-postscripts .cl-button:focus-visible { outline-color: #fff; }

@media (max-width: 900px) {
  .cl-proof-heading, .cl-included-heading, .cl-deliverables-layout, .cl-offer-layout, .cl-delay-layout, .cl-faq-layout { grid-template-columns: 1fr; gap: 32px; }
  .cl-proof-heading > p, .cl-included-intro { max-width: 680px; }
  .cl-guarantee { margin-top: 20px; }
  .cl-delay-copy { padding-top: 0; max-width: 700px; }
  .cl-final-main { grid-template-columns: 1fr 1fr; gap: 35px; }
  .cl-final-image, .cl-final-image img { min-height: 500px; }
}
@media (max-width: 650px) {
  .creative-lower h2 { font-size: clamp(36px, 9vw, 48px); }
  .creative-lower p { font-size: 17px; }
  .creative-lower .cl-proof, .creative-lower .cl-included, .creative-lower .cl-deliverables, .creative-lower .cl-offer, .creative-lower .cl-delay, .creative-lower .cl-faq { padding: 80px 0; }
  .cl-public-voices { grid-template-columns: 1fr; gap: 28px; margin-top: 54px; padding-bottom: 42px; }
  .cl-public-voices ul { grid-template-columns: 1fr; gap: 32px; }
  .cl-public-voices blockquote { font-size: 21px; }
  .cl-client-quote { grid-template-columns: 1fr; gap: 0; padding: 34px 26px 42px; border-radius: 0 70px 0 0; }
  .cl-quote-mark { height: 72px; font-size: 120px; }
  .creative-lower .cl-client-quote blockquote p { font-size: clamp(25px, 6vw, 31px); }
  .cl-sprint-list { grid-template-columns: 1fr; margin-top: 52px; }
  .cl-sprint-list li, .cl-sprint-list li:first-child, .cl-sprint-list li:last-child { grid-column: auto; grid-template-columns: 62px minmax(0, 1fr); gap: 16px; padding: 26px 0 32px; }
  .cl-sprint-list li:last-child { margin-top: 4px; padding: 30px 22px 36px; border-radius: 0 60px 0 0; }
  .cl-number, .cl-sprint-list li:first-child .cl-number, .cl-sprint-list li:last-child .cl-number { font-size: 54px; }
  .creative-lower .cl-sprint-list li p, .creative-lower .cl-deliverables-list p { font-size: 16px; }
  .cl-booking-note { grid-template-columns: 1fr; gap: 15px; margin-top: 42px; }
  .cl-booking-note .cl-label { padding-top: 0; }
  .creative-lower .cl-price-line strong { font-size: clamp(65px, 16vw, 105px); }
  .cl-guarantee { padding: 35px 26px 40px; border-radius: 0 70px 0 0; }
  .creative-lower .cl-guarantee h2 { font-size: 27px; }
  .creative-lower .cl-guarantee .cl-guarantee-quote { font-size: 29px; }
  .cl-faq-list summary { font-size: 18px; }
  .creative-lower .cl-faq-list details p { padding-right: 15px; font-size: 16px; }
  .creative-lower .cl-button { width: 100%; padding: 16px 21px; font-size: 14px; }
  .cl-final-main { grid-template-columns: 1fr; gap: 48px; padding-top: 80px; padding-bottom: 70px; }
  .cl-final-copy h2 { font-size: clamp(44px, 11vw, 65px); }
  .cl-final-image { min-height: 0; height: auto; aspect-ratio: 4 / 3; border-radius: 100px 0 0 0; }
  .cl-final-image img { min-height: 0; height: 100%; }
  .cl-postscripts { grid-template-columns: 1fr; gap: 40px; padding-top: 65px; padding-bottom: 75px; }
}
@media (prefers-reduced-motion: reduce) {
  .creative-lower .cl-button, .cl-faq-list summary::after { transition: none; }
  .creative-lower .cl-button:hover { transform: none; }
}


.footer-inner { flex-wrap: wrap; }
.footer-contact {
  flex: 1 0 100%;
  margin: 14px 0 0;
  color: #D3DDF5;
  font-family: "DM Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.55;
  text-transform: none;
}
.footer-contact a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }