/* Focused visual and touch fixes. The previous version stays the base. */
:root { --koza-sky: #e8f5fc; --koza-blue-ink: #8cb9d1; }
html,body { max-width:100%; overflow-x:clip; }

/* No cloud silhouette, pencil cloud, shaded halo, or tinted patches behind the rug. */
.hero { background:var(--koza-sky)!important; overflow:visible!important; position:relative; z-index:3; isolation:isolate; }
.hero .hero-visual { transform:translateY(-55px) scale(.88); transform-origin:center 45%; z-index:10; }
.hero .cloud-stage,
.hero .cloud-stage::before,
.hero .cloud-stage::after { background:none!important; box-shadow:none!important; filter:none!important; }
.hero .cloud-stage::before,
.hero .cloud-stage::after { content:none!important; display:none!important; }
.hero .cloud-stage img { filter:none!important; }
.hero .hero-sun { display:none!important; }

/* Sky-blue scallops sit ON TOP of the illustration: the greeting page overlaps the story. */
.hero::after { content:''!important; display:block!important; position:absolute; left:0; right:0; bottom:-23px; height:26px; z-index:6; pointer-events:none; opacity:1!important; transform:none!important; background:radial-gradient(circle at 23px 0,var(--koza-sky) 23px,transparent 24px) 0 0/46px 26px repeat-x!important; }
.intro { z-index:1; overflow:hidden; }
.intro::before { display:none!important; content:none!important; }
.intro .intro-content { width:47%; margin-left:auto; margin-right:1%; padding-left:2%; padding-right:3%; text-shadow:0 1px 5px #1820188c; }
.intro .intro-content h2,
.intro .intro-content .intro-hello,
.intro .intro-content>p:not(.intro-hello),
.intro>.section-number { color:var(--koza-blue-ink)!important; }
.intro .intro-content h2 em { color:#d5efff!important; }
.intro .intro-content .intro-hello { color:#acd4e9!important; }
.intro .intro-content>p:not(.intro-hello) { color:#c8e5f6!important; }
.intro .intro-tags span { color:#315169; }

/* Decorative stars belong in the margins and never on top of running text. */
.quote .star-quote-one { top:10%; left:3%; width:26px; height:26px; }
.quote .star-quote-two { right:3%; bottom:10%; width:15px; height:15px; }
.contact .star-contact-one { left:3%; top:10%; width:23px; height:23px; }
.contact .star-contact-two { right:3%; bottom:9%; width:15px; height:15px; }

/* A simple drawn arrow, consistent at any pixel density and on every phone. */
.icon-arrow { display:inline-block; position:relative; flex:none; width:16px; height:16px; vertical-align:middle; font-size:0!important; }
.icon-arrow::before { content:''; position:absolute; width:13px; height:2px; background:currentColor; left:1px; top:10px; transform:rotate(-45deg); transform-origin:center; border-radius:2px; }
.icon-arrow::after { content:''; position:absolute; width:7px; height:7px; border-top:2px solid currentColor; border-right:2px solid currentColor; right:1px; top:1px; border-radius:1px; }
.header-cta .icon-arrow { margin-left:12px; }
.round-link b .icon-arrow { width:16px; height:16px; }
.product-arrow { font-size:0!important; position:relative; background:#f0f0de; border:2px solid #29351f; box-shadow:2px 3px 0 #29351f; }
.product-arrow::before,.product-arrow::after { content:''; position:absolute; display:block; }
.product-arrow::before { width:14px; height:2px; left:10px; top:21px; background:#29351f; transform:rotate(-45deg); border-radius:2px; }
.product-arrow::after { width:8px; height:8px; border-top:2px solid #29351f; border-right:2px solid #29351f; top:11px; right:10px; }
.contact-route.instagram>span { font-size:0!important; position:relative; }
.contact-route.instagram>span::before { content:''; position:absolute; width:14px; height:2px; background:currentColor; left:calc(50% - 8px); top:calc(50% + 3px); transform:rotate(-45deg); border-radius:2px; }
.contact-route.instagram>span::after { content:''; position:absolute; width:8px; height:8px; border-top:2px solid currentColor; border-right:2px solid currentColor; left:calc(50% + 1px); top:calc(50% - 7px); }

/* User-supplied matching icon set, colored by each component's text color. */
.koza-icon {display:inline-block;width:16px;height:16px;flex:none;vertical-align:-3px;background:currentColor;mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;}
.koza-icon-finger {mask-image:url('assets/icon-finger.png');-webkit-mask-image:url('assets/icon-finger.png')}
.koza-icon-community {mask-image:url('assets/icon-community.png');-webkit-mask-image:url('assets/icon-community.png')}
.koza-icon-picture {mask-image:url('assets/icon-picture.png');-webkit-mask-image:url('assets/icon-picture.png')}
.koza-icon-hourglass {mask-image:url('assets/icon-hourglass.png');-webkit-mask-image:url('assets/icon-hourglass.png')}
.koza-icon-sparkles {mask-image:url('assets/icon-sparkles.png');-webkit-mask-image:url('assets/icon-sparkles.png')}
.koza-icon-star {mask-image:url('assets/icon-star.png');-webkit-mask-image:url('assets/icon-star.png')}
.pill {align-items:center;gap:7px;}
.pill .koza-icon {width:15px;height:15px;vertical-align:middle;}
.extras-status {display:inline-flex;align-items:center;gap:9px;}
.extras-status .koza-icon {width:15px;height:15px;}

/* Replace arrow shapes throughout with the uploaded pointing-finger icon. */
.icon-arrow {width:18px;height:18px;background:currentColor;mask:url('assets/icon-finger.png') center/contain no-repeat;-webkit-mask:url('assets/icon-finger.png') center/contain no-repeat;}
.icon-arrow::before,.icon-arrow::after {content:none!important;display:none!important;}
.product-arrow {display:grid;place-items:center;}
.product-arrow::before {content:'';position:static;display:block;width:18px;height:18px;background:#29351f;transform:none;mask:url('assets/icon-finger.png') center/contain no-repeat;-webkit-mask:url('assets/icon-finger.png') center/contain no-repeat;}
.product-arrow::after {content:none;display:none;}
.contact-route.instagram>span::before,.contact-route.instagram>span::after {content:none!important;display:none!important;}
.contact-route.instagram>span.koza-icon {font-size:initial!important;}
.contact-button .koza-icon {width:18px;height:18px;margin-left:16px;vertical-align:-4px;}

/* A delicate scalloped photo treatment; the caption stays readable on phones. */
.process .process-image {border:0!important;padding:12px;border-radius:24px;background:#f0f0de;box-shadow:6px 9px 0 #d3dfc0;isolation:isolate;}
.process .process-image img {border-radius:15px;display:block;}
.process .process-image::before,.process .process-image::after {content:'';position:absolute;left:10px;right:10px;height:15px;z-index:2;pointer-events:none;}
.process .process-image::before {top:8px;background:radial-gradient(circle at 9px 0,#f0f0de 9px,transparent 10px) 0 0/18px 13px repeat-x;}
.process .process-image::after {bottom:8px;background:radial-gradient(circle at 9px 13px,#f0f0de 9px,transparent 10px) 0 0/18px 13px repeat-x;}
.process .process-image span {z-index:4;bottom:-11px;right:-8px;max-width:78%;padding:8px 13px;border-radius:30px;font-family:Manrope,Arial,sans-serif!important;font-weight:800;font-size:12px!important;letter-spacing:0!important;line-height:1.25;text-align:center;transform:rotate(3deg);}

@media(max-width:900px) {
  .hero .hero-visual { transform:translateY(-30px) scale(.90); }
  .intro .intro-content { width:50%; margin-right:0; padding-right:4%; }
  .quote .star-quote-one { top:6%; left:3%; }
}
@media(max-width:650px) {
  .hero { overflow:visible!important; padding-bottom:10px; }
  .hero .hero-visual { transform:translateY(-32px) scale(.94); transform-origin:center 30%; margin-bottom:-35px; }
  .hero::after { bottom:-18px; height:20px; background:radial-gradient(circle at 17px 0,var(--koza-sky) 17px,transparent 18px) 0 0/34px 20px repeat-x!important; }
  .intro { min-height:740px!important; }
  .intro::before { display:none!important; }
  .intro .intro-content { width:100%; margin:0; min-height:740px!important; padding:265px 7% 65px; text-shadow:0 1px 5px #121b16b8; }
  .intro .intro-content h2 { font-size:clamp(32px,8vw,45px); }
  .intro>.section-number { top:34px; right:6%; }
  .quote .star-quote-one { top:4%; left:4%; width:18px; height:18px; }
  .quote .star-quote-two { right:4%; bottom:4%; width:12px; height:12px; }
  .contact .star-contact-one { top:5%; left:5%; width:17px; height:17px; }
  .contact .star-contact-two { bottom:5%; right:5%; width:12px; height:12px; }
  /* :hover / :focus-within stick on touch screens and prevent closing the photo. */
  .process-steps .step:hover:not(.is-open) .step-preview,
  .process-steps .step:focus-within:not(.is-open) .step-preview { max-height:0; opacity:0; }
  .process-steps .step.is-open .step-preview { max-height:300px; opacity:1; }
  .header-cta .icon-arrow { margin-left:4px; }
  .process .process-image {width:86%;margin-left:auto;margin-right:auto;padding:9px;}
  .process .process-image span {max-width:83%;font-size:10px!important;bottom:-8px;right:-6px;padding:6px 9px;}
  .process .process-image::before,.process .process-image::after {left:7px;right:7px;height:11px;background-size:16px 11px;}
  .process .process-image::before {top:5px;}
  .process .process-image::after {bottom:5px;}
}
@media(hover:none) {
  .process-steps .step:hover:not(.is-open) .step-preview,
  .process-steps .step:focus-within:not(.is-open) .step-preview { max-height:0; opacity:0; }
  .process-steps .step.is-open .step-preview { max-height:300px; opacity:1; }
}