:root{--petrol:#012F3B;--coral:#FF6752;--aqua:#69D3C5;--yellow:#FFC83D;--cream:#F6EAD4;--white:#FFFDF8;}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--petrol)}
body{margin:0;background:var(--petrol);color:var(--cream);font-family:Aptos,"Segoe UI",Arial,sans-serif;line-height:1.4}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.page{width:min(1024px,100%);margin:0 auto;padding:18px 28px 24px;background:var(--petrol)}

/* top */
.topbar{height:94px;display:flex;align-items:flex-start;justify-content:space-between}
.brand img{width:108px}
nav{display:flex;align-items:center;gap:36px;font-size:18px;padding-top:20px}
.cta{background:var(--coral);color:white;font-weight:700;padding:13px 20px;border-radius:7px;display:inline-flex;gap:14px;align-items:center}

/* hero */
.hero{display:grid;grid-template-columns:1.23fr .77fr;gap:42px;align-items:center;padding:8px 14px 0 22px}
h1,.how>h2,.contact-card h2,.mini h2{font-family:"DM Serif Display",Georgia,serif;font-weight:400}
h1{font-size:64px;line-height:1.03;letter-spacing:-.015em;margin:0;color:var(--cream)}
h1 span{position:relative;display:inline-block}
h1 span:after{content:"";position:absolute;left:-3px;right:-6px;bottom:-10px;height:9px;border-top:4px solid var(--coral);border-radius:50%;transform:rotate(-1.5deg)}
.descriptor{position:relative;min-height:292px;border:4px solid var(--yellow);border-radius:50%;padding:52px 48px;display:flex;align-items:center}
.descriptor:after{content:"";position:absolute;inset:7px -5px -8px 8px;border:2px solid var(--yellow);border-radius:50%;transform:rotate(-3deg)}
.descriptor p{position:relative;z-index:2;margin:0;color:var(--white);font-size:17px;line-height:1.55}
.descriptor strong{color:var(--coral)}
.descriptor i{position:absolute;top:-43px;width:4px;height:37px;background:var(--yellow);border-radius:3px}
.descriptor i:nth-child(1){right:102px;transform:rotate(-5deg)} .descriptor i:nth-child(2){right:65px;transform:rotate(26deg)} .descriptor i:nth-child(3){right:27px;transform:rotate(53deg)}
.hero-line{height:104px;padding:2px 18px 0}
.hero-line img{width:100%;height:100%;object-fit:contain}

/* cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:17px;padding:0 14px}
.card{height:375px;border-radius:11px;overflow:hidden;color:var(--petrol);display:grid;grid-template-rows:1fr 69px}
.strategy{background:var(--aqua)} .ideas-card{background:var(--coral)} .complexity{background:var(--yellow)}
.card-main{padding:18px 26px 10px}
.card-icon{height:138px;width:100%;object-fit:contain;object-position:left center}
.card h2{font-size:32px;text-transform:uppercase;letter-spacing:.01em;margin:4px 0 5px}
.rule{display:block;width:34px;border-top:3px solid var(--petrol);margin-bottom:12px}
.card p{font-size:20px;line-height:1.35;margin:0}
.card-foot{position:relative;background:var(--cream);display:flex;align-items:center;padding:0 26px;overflow:visible}
.card-foot>a{font-size:34px;color:var(--petrol);z-index:2}
.card-foot img{position:absolute;right:-5px;bottom:-11px;width:150px;height:90px;object-fit:contain;overflow:visible}

/* testimonial */
.testimonial{position:relative;height:178px;margin:14px 26px 0;display:flex;align-items:center;justify-content:center}
.quote-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
blockquote{position:relative;z-index:2;margin:0 0 0 34px;color:var(--white);font-size:16px;line-height:1.55;font-weight:400}
blockquote b{color:var(--coral);font-family:Georgia,serif;font-size:33px;vertical-align:-4px}

/* how + contact */
.lower-grid{display:grid;grid-template-columns:1.64fr .72fr;gap:27px;padding:0 18px 0}
.how>h2{font-size:38px;margin:0 0 2px}
.how>h2:after{content:"";display:block;width:55px;border-top:3px solid var(--aqua);margin-top:7px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:8px}
.steps article{padding:0 15px;border-right:1px solid rgba(246,234,212,.55)}
.steps article:first-child{padding-left:0} .steps article:last-child{border-right:0}
.steps img{height:72px;width:100%;object-fit:contain;overflow:visible;margin-bottom:-9px}
.steps h3{font-family:Aptos,"Segoe UI",Arial,sans-serif;font-size:18px;font-weight:500;margin:0 0 8px}
.steps .discover{color:var(--aqua)} .steps .decide{color:var(--coral)} .steps .do{color:var(--yellow)}
.steps p{font-size:13px;line-height:1.5;margin:0;color:var(--white)}
.contact-card{border:2px solid var(--aqua);border-radius:18px;padding:28px 28px 20px;align-self:start;min-height:280px;position:relative}
.contact-card h2{font-size:34px;line-height:1.05;margin:0 0 18px}
.contact-card p{font-size:15px;line-height:1.45;margin:0 0 18px;color:var(--white)}
.contact-card .mail{display:block;margin-top:18px;font-size:14px}
.contact-card:after{content:"";position:absolute;right:18px;bottom:-13px;width:105px;height:28px;border-bottom:3px solid var(--aqua);border-radius:50%;transform:rotate(-4deg)}

/* lower content compact, like master */
.mini-sections{display:grid;grid-template-columns:1fr 1fr;gap:54px;padding:26px 18px 24px;border-top:1px solid rgba(246,234,212,.25);margin-top:20px}
.mini span{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--aqua);font-weight:700}
.mini h2{font-size:32px;line-height:1.05;margin:8px 0 12px}
.mini p{font-size:14px;line-height:1.5;margin:0 0 12px;color:var(--white)}
.coral-link{color:var(--coral);font-weight:700}

/* footer */
footer{display:grid;grid-template-columns:1.45fr 1.15fr 1.2fr .9fr;gap:28px;padding:20px 18px 8px;border-top:1px solid rgba(246,234,212,.35)}
footer>div{padding-right:18px;border-right:1px solid rgba(246,234,212,.25)} footer>div:last-child{border-right:0}
.foot-brand img{width:90px;margin-bottom:10px} footer h3{font-family:Georgia,serif;font-size:17px;margin:0 0 8px} footer p,footer a{font-size:12.5px;line-height:1.45;margin:0}
.linkedin{display:flex;align-items:center;gap:9px} .linkedin span{background:#0A66C2;color:white;width:31px;height:31px;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:17px}

@media(max-width:850px){
  .page{padding:16px 15px 22px}
  .topbar{height:78px} .brand img{width:82px} nav{gap:12px;font-size:14px;padding-top:13px} nav>a:not(.cta){display:none}
  .hero{grid-template-columns:1fr;gap:30px;padding:8px 8px 0} h1{font-size:clamp(46px,13vw,64px)} .descriptor{min-height:230px;max-width:520px}
  .cards{grid-template-columns:1fr;padding:0 6px} .card{height:330px}
  .testimonial{height:185px;margin:10px 2px} blockquote{font-size:14px;margin-left:22px}
  .lower-grid{grid-template-columns:1fr;padding:0 6px} .steps{grid-template-columns:1fr;gap:18px} .steps article{border-right:0;border-bottom:1px solid rgba(246,234,212,.2);padding:0 0 14px} .steps img{max-width:270px}
  .mini-sections{grid-template-columns:1fr;gap:24px;padding-left:6px;padding-right:6px} footer{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){ footer{grid-template-columns:1fr} }

/* ===== V6 fixes ===== */

/* Body copy / long copy always Aptos */
body,
nav,
.descriptor p,
.card p,
blockquote,
.steps p,
.contact-card p,
.contact-card .mail,
.mini p,
footer p,
footer a,
.card h2,
.steps h3,
.mini span {
  font-family: Aptos, "Segoe UI", Arial, sans-serif !important;
}

/* Keep serif only where intentionally editorial */
h1,
.how > h2,
.contact-card h2,
.mini h2,
footer h3 {
  font-family: "DM Serif Display", Georgia, serif !important;
}

/* Quote bubble: keep compact and fully enclosed */
.testimonial {
  height: 190px;
}
.quote-art {
  object-fit: contain;
  transform: none;
}
blockquote {
  font-size: 15.5px;
  line-height: 1.5;
}

/* ===== V7 targeted final fixes ===== */

/* Use the exact supplied dart artwork */
.strategy .card-icon,
.strategy .cardtop > img,
.strategy img[src*="strategy-dart"] {
  object-fit: contain !important;
  object-position: left center !important;
  width: 78% !important;
  height: 128px !important;
  margin-left: 4px !important;
  image-rendering: auto;
}

/* Quote: wider, flatter, two-line composition */
.testimonial {
  height: 150px !important;
  margin-top: 10px !important;
}

.testimonial .quote-art {
  width: 100% !important;
  height: 150px !important;
  object-fit: fill !important;
}

.testimonial blockquote {
  width: 78% !important;
  margin-left: 22px !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  text-align: left !important;
  white-space: normal !important;
}

/* If quote is in the V6 bubble structure rather than testimonial wrapper */
.quote-wrap {
  margin-top: 10px !important;
  margin-bottom: 8px !important;
}
.quote-wrap .quote,
.quote {
  width: min(860px, 90%) !important;
  min-height: 112px !important;
  padding: 22px 110px !important;
}
.quote:before {
  inset: 10px 28px 8px 24px !important;
  border-radius: 48% 52% 47% 53% / 54% 46% 53% 47% !important;
}
.quote blockquote {
  width: 100% !important;
  font-size: 14px !important;
  line-height: 1.45 !important;
}

/* Aptos for all normal/long copy */
body,
nav,
.descriptor p,
.card p,
.card a,
blockquote,
.steps p,
.steps h3,
.contact-card p,
.contact-card .mail,
.mini p,
.mini span,
footer p,
footer a,
.card h2,
.contact-box p,
.contact-box a {
  font-family: Aptos, "Segoe UI", Arial, sans-serif !important;
}

/* Keep serif only for deliberate editorial headings */
h1,
.how > h2,
.contact-card h2,
.contact-box h2,
.mini h2,
footer h3 {
  font-family: "DM Serif Display", Georgia, serif !important;
}

@media (max-width: 850px) {
  .strategy .card-icon,
  .strategy .cardtop > img,
  .strategy img[src*="strategy-dart"] {
    width: 70% !important;
    height: 110px !important;
  }

  .testimonial blockquote {
    width: 84% !important;
    font-size: 13px !important;
  }

  .quote-wrap .quote,
  .quote {
    width: 100% !important;
    padding: 26px 44px !important;
  }
}

/* ===== V8 testimonial final ===== */

/* remove any previous quote-art/bubble treatment */
.quote-text-only {
  min-height: 138px !important;
  height: auto !important;
  margin: 12px auto 8px !important;
  padding: 18px 40px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  position: relative !important;
}

.quote-text-only::before,
.quote-text-only::after {
  content: none !important;
  display: none !important;
}

.quote-text-only .quote-art,
.quote-text-only .inf,
.quote-text-only .dots,
.quote-text-only .qmark {
  display: none !important;
}

.quote-text-only blockquote {
  margin: 0 !important;
  width: min(850px, 92%) !important;
  color: var(--coral) !important;
  font-family: "DM Serif Display", Georgia, serif !important;
  font-size: 25px !important;
  line-height: 1.28 !important;
  font-weight: 400 !important;
  text-align: center !important;
  letter-spacing: 0 !important;
}

@media (max-width: 850px) {
  .quote-text-only {
    min-height: 120px !important;
    padding: 18px 16px !important;
  }

  .quote-text-only blockquote {
    width: 100% !important;
    font-size: 21px !important;
  }
}

@media (max-width: 520px) {
  .quote-text-only blockquote {
    font-size: 18px !important;
    line-height: 1.32 !important;
  }
}


/* ===== V9 MOBILE OPTIMISATION ONLY ===== */
/* Desktop styles above are intentionally untouched. */

@media (max-width: 850px) {
  body {
    overflow-x: hidden;
  }

  .page {
    width: 100%;
    padding: 14px 14px 20px !important;
  }

  /* Header */
  .topbar {
    height: auto !important;
    min-height: 70px;
    align-items: center !important;
    padding-bottom: 8px;
  }

  .brand img {
    width: 76px !important;
  }

  nav {
    padding-top: 0 !important;
    gap: 10px !important;
  }

  nav > a:not(.cta) {
    display: none !important;
  }

  nav .cta,
  .cta {
    padding: 10px 13px !important;
    font-size: 13px !important;
    border-radius: 6px !important;
    white-space: nowrap;
  }

  /* Hero */
  .hero {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    padding: 18px 4px 0 !important;
  }

  h1 {
    font-size: clamp(46px, 13vw, 62px) !important;
    line-height: .98 !important;
    letter-spacing: -.02em !important;
  }

  h1 span:after {
    bottom: -6px !important;
    border-top-width: 3px !important;
  }

  .descriptor {
    width: 100% !important;
    max-width: 460px !important;
    min-height: 0 !important;
    border-radius: 28px !important;
    padding: 26px 24px !important;
    margin-top: 4px;
  }

  .descriptor:after {
    border-radius: 28px !important;
    inset: 5px -3px -5px 4px !important;
  }

  .descriptor p {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }

  .descriptor i {
    display: none !important;
  }

  /* Brand line */
  .hero-line {
    height: 74px !important;
    padding: 0 0 2px !important;
    margin-top: 6px;
    overflow: hidden;
  }

  .hero-line img {
    width: 115% !important;
    max-width: none !important;
    height: 74px !important;
    object-position: left center !important;
  }

  /* Service cards */
  .cards {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 0 2px !important;
  }

  .card {
    height: 260px !important;
    border-radius: 10px !important;
    grid-template-rows: 1fr 58px !important;
  }

  .card-main {
    padding: 16px 20px 8px !important;
  }

  .card-icon {
    height: 94px !important;
    width: 72% !important;
  }

  .strategy .card-icon,
  .strategy .cardtop > img,
  .strategy img[src*="strategy-dart"] {
    width: 68% !important;
    height: 96px !important;
    margin-left: 0 !important;
  }

  .card h2 {
    font-size: 26px !important;
  }

  .card p {
    font-size: 17px !important;
    line-height: 1.35 !important;
  }

  .card-foot {
    padding: 0 20px !important;
  }

  .card-foot img {
    width: 120px !important;
    height: 72px !important;
    bottom: -9px !important;
  }

  /* Testimonial */
  .testimonial,
  .quote-text-only {
    min-height: 0 !important;
    height: auto !important;
    margin: 20px 0 10px !important;
    padding: 24px 10px 26px !important;
  }

  .quote-text-only blockquote,
  .testimonial blockquote {
    width: 100% !important;
    margin: 0 !important;
    font-size: 20px !important;
    line-height: 1.28 !important;
    text-align: center !important;
  }

  /* Remove forced desktop break inside testimonial */
  .quote-text-only blockquote br,
  .testimonial blockquote br {
    display: none !important;
  }

  /* How I work */
  .lower-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 2px !important;
  }

  .how > h2 {
    font-size: 32px !important;
    margin-bottom: 8px !important;
  }

  .steps {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-top: 8px !important;
  }

  .steps article {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(246,234,212,.22) !important;
    padding: 0 0 16px !important;
  }

  .steps article:last-child {
    border-bottom: 0 !important;
  }

  .steps img {
    height: 68px !important;
    width: 250px !important;
    max-width: 88% !important;
    object-position: left center !important;
    margin: 0 0 -5px !important;
  }

  .steps h3 {
    font-size: 17px !important;
    margin-bottom: 6px !important;
  }

  .steps p {
    font-size: 14px !important;
    line-height: 1.5 !important;
    max-width: 420px;
  }

  /* Contact card */
  .contact-card {
    min-height: 0 !important;
    width: 100% !important;
    padding: 24px 22px !important;
    border-radius: 16px !important;
  }

  .contact-card h2 {
    font-size: 30px !important;
    margin-bottom: 12px !important;
  }

  .contact-card p {
    font-size: 14px !important;
  }

  .contact-card .mail {
    font-size: 13px !important;
    overflow-wrap: anywhere;
  }

  /* About + Ideas */
  .mini-sections {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    padding: 28px 2px 24px !important;
    margin-top: 22px !important;
  }

  .mini h2 {
    font-size: 29px !important;
    line-height: 1.06 !important;
  }

  .mini p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* Footer */
  footer {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 18px 2px 6px !important;
  }

  footer > div {
    border-right: 0 !important;
    border-bottom: 1px solid rgba(246,234,212,.2) !important;
    padding: 0 0 18px !important;
    margin-bottom: 18px;
  }

  footer > div:last-child {
    border-bottom: 0 !important;
  }

  .foot-brand img {
    width: 76px !important;
  }

  footer h3 {
    font-size: 16px !important;
  }

  footer p,
  footer a {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .linkedin span {
    width: 30px !important;
    height: 30px !important;
  }
}

@media (max-width: 520px) {
  h1 {
    font-size: clamp(42px, 12.5vw, 56px) !important;
  }

  .descriptor {
    padding: 22px 20px !important;
  }

  .card {
    height: 245px !important;
  }

  .card-icon {
    height: 86px !important;
  }

  .quote-text-only blockquote,
  .testimonial blockquote {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  .contact-card h2 {
    font-size: 28px !important;
  }
}