/* Cornell 1.5.0: layered poster composition made from existing content and assets. */
.comic-home {
  --cyan-poster:#18cdeb;
  --pink-poster:#ff159b;
  --yellow-poster:#fff32b;
  background-color:var(--cyan-poster);
  background-image:
    url('print-texture.svg'),
    radial-gradient(ellipse 40% 18% at 95% 10%,#ff159b 0%,transparent 100%),
    radial-gradient(ellipse 55% 23% at 8% 35%,#fff32b 0%,transparent 100%),
    radial-gradient(ellipse 50% 21% at 85% 68%,#ff159b 0%,transparent 100%),
    linear-gradient(142deg,#18cdeb 0%,#c6f9fb 47%,#16cee9 100%);
  background-size:900px,auto,auto,auto,auto;
}
.comic-home main {overflow:clip}
.comic-home .site-header {padding-top:10px;align-items:flex-start;z-index:30}
.comic-home .brand-logo {width:clamp(170px,21vw,305px);margin-left:-1.5%;transform:rotate(-8deg);filter:drop-shadow(5px 7px 0 var(--ink))}
.comic-home .brand-logo:hover {transform:rotate(-5deg)}
.comic-home .header-actions {margin-top:5px}
.comic-home .site-header [data-navigation] {background:#fff;border-width:3px;box-shadow:5px 6px 0 var(--ink);transform:skew(-8deg) rotate(-1deg)}
.comic-home .site-header [data-navigation] a:last-child {background:var(--yellow-poster)}
.comic-home .language-switch {background:#fff;border-width:3px;box-shadow:5px 6px 0 var(--ink)}

/* The image, portrait, lettering and speech bubble overlap as one poster. */
.comic-home .hero {
  display:grid;grid-template-columns:1fr 1fr;align-items:start;
  min-height:760px;margin-top:-105px;padding:122px 4.5% 5px;
  background:transparent;isolation:isolate;
}
.comic-home .hero::before {
  inset:-70px 0 0;z-index:-4;opacity:1;mask-image:none;
  background:
    radial-gradient(circle at 62% 30%,var(--yellow-poster) 0 7%,transparent 23%),
    radial-gradient(ellipse at 10% 86%,var(--pink-poster) 0 13%,transparent 39%),
    radial-gradient(ellipse at 96% 8%,var(--pink-poster) 0 8%,transparent 31%),
    linear-gradient(155deg,#22cde8 0%,#effff9 52%,#20d5ed 100%);
}
.comic-home .hero::after {
  inset:-100px 0 -80px;z-index:-3;
  background:url('print-texture.svg') center top / 760px;
  opacity:.95;
}
.hero-property {
  z-index:-1;top:182px;left:-5%;width:62%;height:425px;
  transform:rotate(-7deg);border:5px solid var(--ink);
  box-shadow:0 0 0 8px #fff,10px 14px 0 var(--ink);
}
.hero-property .service-photo {object-position:center 48%}
.comic-home .hero-copy {
  grid-column:1;grid-row:1;align-self:end;z-index:8;
  max-width:660px;margin:268px -90px 38px 0;
  transform:rotate(-5deg);
}
.comic-home .hero-copy>.eyebrow {
  margin-left:12px;margin-bottom:5px;padding:7px 12px;
  background:var(--yellow-poster);font-size:12px;
}
.comic-home .hero h1 {
  font-size:clamp(68px,7vw,105px);line-height:.88;
  padding:12px 27px 17px 18px;margin:0 0 7px;
  filter:drop-shadow(6px 8px 0 var(--ink));
}
.comic-home .hero h1::before {
  inset:-2px -17px -4px -15px;
  clip-path:polygon(1% 7%,20% 3%,43% 5%,70% 0,99% 4%,96% 94%,67% 98%,41% 96%,3% 100%);
}
.comic-home .hero h1 em {color:var(--pink-poster);text-shadow:2px 3px 0 var(--ink)}
.comic-home .hero-intro {
  max-width:390px;margin:8px 0 10px 18px;padding:9px 13px;
  font-size:clamp(14px,1.15vw,17px);line-height:1.38;
  transform:rotate(2deg);
}
.comic-home .region-line {margin-left:25px}
.comic-home .hero .button-primary {
  min-height:61px;margin-left:8px;padding:15px 25px;
  font-size:20px;transform:rotate(2deg);
}
.comic-home .hero-art {
  grid-column:1/-1;grid-row:1;z-index:4;
  width:min(50vw,680px);aspect-ratio:1024/1535;
  margin:-82px 4% -210px auto;
}
.comic-home .portrait-frame {
  width:100%;padding:0;border:0;box-shadow:none;transform:rotate(1deg);overflow:hidden;
  clip-path:none;
  -webkit-mask-image:radial-gradient(ellipse 78% 70% at 53% 52%,#000 60%,transparent 87%);
  mask-image:radial-gradient(ellipse 78% 70% at 53% 52%,#000 60%,transparent 87%);
}
.comic-home .portrait-image {display:block;width:100%;height:auto}
.comic-home .hero-art .burst-red {inset:8% -24% 18% -21%;background:var(--pink-poster)}
.comic-home .hero-art .burst-yellow {inset:31% -30% 16% -26%;background:var(--yellow-poster)}
.comic-home .speech-bubble {
  top:7%;right:-18%;max-width:58%;padding:24px 28px;
  font-size:clamp(28px,3.1vw,45px);transform:rotate(-7deg);
  background:#fff;
}
.comic-home .hero-sticker {width:clamp(195px,19vw,280px);right:-25%;bottom:23%;z-index:7;transform:rotate(-12deg)}
.comic-home .hero-sticker-second {width:clamp(110px,11vw,160px);left:-15%;bottom:23%;z-index:7}
.comic-home .service-jumps {
  grid-column:1/-1;grid-row:2;z-index:12;
  margin:-18px auto -37px;width:100%;padding:5px;
  background:#fff;border-width:5px;
  box-shadow:inset 0 0 0 5px var(--cyan-poster),7px 9px 0 var(--ink);
  transform:rotate(1.2deg);
}
.comic-home .service-jumps .button {min-height:71px;padding:10px 18px;font-size:clamp(15px,1.4vw,20px)}

/* The services follow the poster without a broad empty band. */
.comic-home .services {
  padding:55px 4.8% 50px;
  background:
    radial-gradient(ellipse 38% 55% at 2% 55%,var(--yellow-poster) 0,transparent 100%),
    radial-gradient(ellipse 45% 45% at 100% 30%,var(--pink-poster) 0,transparent 100%),
    linear-gradient(180deg,#20cee9 0%,#d9fcf6 51%,#24d3e9 100%);
}
.comic-home .services::before {background:url('print-texture.svg') 20% 40% / 820px;opacity:.8}
.comic-home .services-heading {gap:15px;margin-bottom:16px}
.comic-home .services-heading>.section-label {background:var(--yellow-poster)}
.comic-home .services-heading h2 {
  display:inline-block;margin:0;padding:7px 13px 9px;
  background:#fff;border:3px solid var(--ink);box-shadow:5px 5px 0 var(--ink);
  font-size:clamp(29px,2.8vw,42px);transform:rotate(-2deg);
}
.comic-home .services-heading h2 br {display:block}
.comic-home .services-heading h2 em {display:block;margin-left:0}
@media (min-width:821px) {
  .comic-home .services-heading h2 {font-size:clamp(28px,2.5vw,38px);white-space:nowrap;max-width:none}
  .comic-home .services-heading h2 br {display:none}
  .comic-home .services-heading h2 em {display:inline;margin-left:.2em}
}
.comic-home .service-list {gap:18px}
.comic-home .service {
  padding:6px;border-width:4px;box-shadow:7px 9px 0 var(--ink);
  background:var(--yellow-poster);transform:rotate(-1.6deg);
}
.comic-home .service-blue {background:var(--pink-poster);transform:rotate(1.1deg)}
.comic-home .service-red {background:var(--cyan-poster);transform:rotate(-1.1deg)}
.comic-home .service-visual {height:205px}
.comic-home .service-number {top:-18px;left:-17px;width:79px;height:80px;font-size:55px}
.comic-home .service>.service-copy {padding:19px 19px 21px}
.comic-home .service h3 {font-size:clamp(31px,2.8vw,42px);margin-bottom:11px}
.comic-home .services .service p.service-description {font-size:15px;line-height:1.42;margin-bottom:15px}
.comic-home .service .service-enquiry {min-height:48px}

/* A continuous printed surface replaces hard section-to-section color cuts. */
.comic-home .section-grid {
  padding:53px 6% 61px;
  background:linear-gradient(180deg,#24d3e9 0%,#f5ffed 47%,#fff04a 100%);
}
.comic-home .section-grid::before {
  background:
    radial-gradient(ellipse 40% 65% at 90% 90%,var(--pink-poster) 0,transparent 100%),
    url('print-texture.svg') 30% 40% / 780px;
  clip-path:none;opacity:.8;
}
.comic-home .manifesto-copy h2 {font-size:clamp(42px,4.4vw,68px)}
.comic-home .comic-card {margin-top:0}
.comic-home .catalog {
  padding:57px 6% 62px;
  background:
    radial-gradient(ellipse 52% 62% at 4% 45%,var(--pink-poster) 0,transparent 100%),
    url('print-texture.svg') 60% 0 / 850px,
    linear-gradient(180deg,#fff04a 0%,#defcf8 53%,#22d1e9 100%);
}
.comic-home .catalog::before {display:none}
.comic-home .catalog-architecture {
  background:
    radial-gradient(ellipse 52% 70% at 2% 42%,var(--purple) 0,transparent 100%),
    url('print-texture.svg') 50% 0 / 850px,
    linear-gradient(180deg,#22d1e9 0%,#effff8 50%,#fff04a 100%);
}
.comic-home .catalog-development {
  background:
    radial-gradient(ellipse 47% 60% at 94% 20%,var(--pink-poster) 0,transparent 100%),
    url('print-texture.svg') 50% 0 / 850px,
    linear-gradient(180deg,#fff04a 0%,#dffdf8 56%,#22d1e9 100%);
}
.comic-home .catalog-heading {margin-bottom:22px}
.comic-home .property-card {box-shadow:7px 9px 0 var(--ink)}
.comic-home .contact-form-section {
  padding:62px 6% 66px;
  background:
    radial-gradient(ellipse 45% 60% at 4% 44%,var(--pink-poster) 0,transparent 100%),
    url('print-texture.svg') 50% 20% / 780px,
    linear-gradient(180deg,#22d1e9 0%,#f0fff6 51%,#fff04a 100%);
}
.comic-home .contact-form-section::before {background:none}
.comic-home .site-footer {background:#fff04a}

@media (max-width:1100px) {
  .comic-home .hero {min-height:670px;margin-top:-73px;padding-top:93px}
  .hero-property {top:145px;height:360px}
  .comic-home .hero-art {width:min(55vw,590px);margin-top:-35px;margin-bottom:-155px}
  .comic-home .hero-copy {margin-top:240px;margin-right:-65px}
  .comic-home .hero h1 {font-size:clamp(62px,7.8vw,84px)}
  .comic-home .speech-bubble {right:-10%;font-size:clamp(26px,3vw,35px)}
  .comic-home .hero-sticker {right:-12%}
}
@media (max-width:820px) {
  .comic-home .site-header {padding-top:9px}
  .comic-home .brand-logo {width:160px;margin-left:0}
  .comic-home .site-header [data-navigation] {background:var(--yellow-poster)}
  .comic-home .site-header [data-navigation] a:last-child {background:var(--pink-poster)}
  .comic-home .hero {min-height:610px;margin-top:-33px;padding:65px 4.5% 5px}
  .hero-property {top:112px;left:-8%;height:310px;width:65%}
  .comic-home .hero-art {width:57%;margin:0 2% -155px auto}
  .comic-home .hero-copy {margin:205px -65px 18px 0}
  .comic-home .hero h1 {font-size:clamp(55px,8vw,67px)}
  .comic-home .speech-bubble {top:5%;right:-4%;font-size:clamp(24px,3.4vw,31px)}
  .comic-home .service-jumps {margin-top:0;margin-bottom:-30px}
  .comic-home .services {padding-top:57px}
  .comic-home .service-list {gap:26px}
}
@media (max-width:600px) {
  .comic-home .site-header {padding:9px 13px 0}
  .comic-home .brand-logo {width:130px;transform:rotate(-7deg)}
  .comic-home .header-actions {margin-top:12px}
  .comic-home .hero {
    display:grid;grid-template-columns:1fr;min-height:0;
    margin-top:-5px;padding:35px 5% 5px;
  }
  .comic-home .hero::before {
    inset:-60px 0 0;
    background:
      radial-gradient(ellipse 60% 38% at 99% 24%,var(--pink-poster) 0,transparent 100%),
      radial-gradient(ellipse 65% 35% at 5% 80%,var(--yellow-poster) 0,transparent 100%),
      linear-gradient(165deg,#21d1eb 0%,#e8fff3 62%,#21d1eb 100%);
  }
  .hero-property {
    top:70px;left:-14%;width:76%;height:250px;
    border-width:4px;transform:rotate(-9deg);
  }
  .comic-home .hero-art {
    grid-column:1;grid-row:1;width:90%;max-width:390px;
    margin:-5px -4% -100px auto;z-index:3;
  }
  .comic-home .portrait-frame {transform:rotate(1deg)}
  .comic-home .hero-copy {
    grid-column:1;grid-row:2;z-index:8;width:100%;max-width:480px;
    margin:-55px 0 0 -2%;transform:rotate(-4deg);
  }
  .comic-home .hero h1 {font-size:clamp(50px,12vw,74px);margin-bottom:6px;padding:10px 15px 15px 12px}
  .comic-home .hero-copy>.eyebrow {font-size:9px;margin-left:7px}
  .comic-home .hero-intro {max-width:90%;font-size:14px;line-height:1.35;padding:8px 11px;margin:4px 0 8px 8px}
  .comic-home .region-line {margin-left:14px}
  .comic-home .hero .button-primary {min-height:59px;font-size:19px;padding:14px 22px}
  .comic-home .speech-bubble {
    top:7%;right:-2%;left:auto;max-width:58%;
    font-size:clamp(20px,5.2vw,28px);padding:15px 16px 19px;
    transform:rotate(-8deg);
  }
  .comic-home .speech-bubble::after {left:18px;right:auto;transform:rotate(39deg)}
  .comic-home .hero-sticker {width:57%;right:-10%;bottom:18%;transform:rotate(-10deg)}
  .comic-home .hero-sticker-second {width:37%;left:-9%;bottom:13%}
  .comic-home .service-jumps {grid-column:1;grid-row:3;margin:12px auto -29px}
  .comic-home .service-jumps .button {min-height:71px;font-size:10px;gap:4px;padding:6px 2px}
  .comic-home .services {padding:58px 6% 36px}
  .comic-home .services-heading {margin-bottom:25px;gap:8px}
  .comic-home .services-heading h2 {font-size:clamp(24px,7vw,34px);padding:7px 8px}
  .comic-home .services-heading>.section-label {font-size:8px;padding:5px}
  .comic-home .service-list {gap:27px}
  .comic-home .service-visual {height:185px}
  .comic-home .service h3 {font-size:clamp(34px,9vw,43px)}
  .comic-home .service>.service-copy {padding:18px 17px 19px}
  .comic-home .services .service p.service-description {font-size:15px}
  .comic-home .section-grid {padding:39px 6% 52px}
  .comic-home .catalog {padding:43px 6% 51px}
  .comic-home .contact-form-section {padding:47px 6% 55px}
}
@media (max-width:360px) {
  .comic-home .hero {padding-inline:4%}
  .comic-home .hero-art {width:91%;margin-right:-2%}
  .comic-home .hero h1 {font-size:49px}
  .comic-home .speech-bubble {font-size:19px;padding:13px 15px}
  .comic-home .hero-intro {max-width:95%}
  .comic-home .service-jumps .button {font-size:9px}
}