/* Petal: a pop polish bar. A chunky rounded grotesk, glossy swatches, pills and stickers.
   Layered over the shared static-sample styles; every colour comes from the page's palette. */
@font-face{font-family:'Petal Bricolage';font-style:normal;font-weight:200 800;font-stretch:75% 100%;font-display:swap;src:url(assets/fonts/bricolage-grotesque.woff2) format('woff2')}
.customer-site.template-nail-art{--font-display:'Petal Bricolage','Trebuchet MS',Arial,sans-serif;--font-body:'Petal Bricolage','Trebuchet MS',Arial,sans-serif;--tint:color-mix(in srgb,var(--primary) 12%,var(--background));--tint-strong:color-mix(in srgb,var(--primary) 24%,var(--background));font-family:var(--font-body);font-size:16px}
.customer-site.template-nail-art h1,.customer-site.template-nail-art h2,.customer-site.template-nail-art h3{font-family:var(--font-display);font-weight:800;letter-spacing:-.045em;font-stretch:88%}
.customer-site.template-nail-art .brand{font-family:var(--font-display);font-weight:800;font-size:40px;letter-spacing:-.06em;gap:8px}
.customer-site.template-nail-art .brand-mark{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--primary);color:var(--on-primary)}
.customer-site.template-nail-art .brand-mark svg{width:26px;height:26px}
.customer-site.template-nail-art .site-header{min-height:96px}
.customer-site.template-nail-art .site-nav a{font-size:15px;font-weight:600}
.customer-site.template-nail-art .header-contact{border-radius:999px;background:var(--text);color:var(--background);padding:12px 22px;font-size:15px;font-weight:700}
.customer-site.template-nail-art .language-switcher a{font-size:13px}
.customer-site.template-nail-art .eyebrow{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.12em;padding:8px 14px;border-radius:999px;background:var(--tint);color:var(--primary)}
.customer-site.template-nail-art .button{border-radius:999px;min-height:58px;padding:15px 28px;font-size:16px;font-weight:700;box-shadow:0 6px 0 color-mix(in srgb,var(--primary) 55%,var(--text))}
.customer-site.template-nail-art .button:hover{transform:translateY(2px);box-shadow:0 4px 0 color-mix(in srgb,var(--primary) 55%,var(--text))}
.customer-site.template-nail-art .text-link{font-size:16px;font-weight:700}

/* Hero: a giant nail-shaped photograph, stickers and a swatch rack */
.customer-site.template-nail-art .hero{padding-block:30px 90px}
.customer-site.template-nail-art .hero-layout{grid-template-columns:1.1fr .9fr;gap:70px}
.customer-site.template-nail-art h1{font-size:clamp(68px,7.2vw,120px);line-height:.92;letter-spacing:-.035em}
.customer-site.template-nail-art h1 em{font-style:normal;color:var(--primary);background:linear-gradient(transparent 68%,var(--tint-strong) 68% 90%,transparent 90%);box-decoration-break:clone;-webkit-box-decoration-break:clone}
.customer-site.template-nail-art .hero-copy{position:relative;z-index:0}
.customer-site.template-nail-art .hero-description{font-size:19px;line-height:1.55;max-width:470px;margin-top:34px;color:var(--text)}
.customer-site.template-nail-art .hero-actions{margin-top:36px}
.customer-site.template-nail-art .hero-index{display:inline-flex;align-items:center;gap:10px;margin-top:40px;padding:10px 18px;border-radius:999px;border:2px dashed var(--border);font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--text)}
.customer-site.template-nail-art .hero-index span{color:var(--primary);font-size:18px}
.customer-site.template-nail-art .polish-row{display:flex;gap:14px;margin-top:30px}
.customer-site.template-nail-art .polish-row i{position:relative;display:block;width:58px;height:78px;border-radius:999px 999px 14px 14px;background:var(--swatch);box-shadow:inset -6px -8px 0 rgba(0,0,0,.12)}
.customer-site.template-nail-art .polish-row i::after{content:'';position:absolute;top:12px;left:12px;width:12px;height:26px;border-radius:999px;background:rgba(255,255,255,.55)}
.customer-site.template-nail-art .polish-row i:nth-child(1){--swatch:var(--primary)}
.customer-site.template-nail-art .polish-row i:nth-child(2){--swatch:color-mix(in srgb,var(--primary) 55%,#ffffff)}
.customer-site.template-nail-art .polish-row i:nth-child(3){--swatch:color-mix(in srgb,var(--primary) 25%,#f6e3d8)}
.customer-site.template-nail-art .polish-row i:nth-child(4){--swatch:color-mix(in srgb,var(--primary) 60%,var(--text))}
.customer-site.template-nail-art .polish-row i:nth-child(5){--swatch:#e9dccf}
.customer-site.template-nail-art .hero-art{position:relative}
.customer-site.template-nail-art .hero-image{height:660px;border-radius:999px 999px 140px 140px;outline:3px solid var(--primary);outline-offset:14px;overflow:hidden}
.customer-site.template-nail-art .hero-art-note{left:-56px;bottom:90px;width:auto;height:auto;padding:16px 22px;border-radius:999px;border:0;background:var(--primary);color:var(--on-primary);font-size:15px;font-weight:700;letter-spacing:0;text-transform:none;display:flex;flex-direction:row;align-items:center;gap:10px;transform:rotate(-7deg);box-shadow:0 10px 24px -10px rgba(0,0,0,.35)}
.customer-site.template-nail-art .hero-art-note svg{width:22px;height:22px}
.customer-site.template-nail-art .floating-sparkle{top:-14px;right:-26px;color:var(--primary);z-index:2}
.customer-site.template-nail-art .floating-sparkle svg{width:110px;height:110px}

/* Values: a candy-coloured band */
.customer-site.template-nail-art .values-strip{background:var(--primary);color:var(--on-primary);border:0;padding-block:26px}
.customer-site.template-nail-art .values-strip .shell{justify-content:space-around}
.customer-site.template-nail-art .values-strip span{font-family:var(--font-display);font-size:clamp(22px,2.4vw,34px);font-weight:800;letter-spacing:-.03em;line-height:1.15}
.customer-site.template-nail-art .values-strip i{color:var(--on-primary);font-style:normal;opacity:.8}

/* Services: chunky treatment cards */
.customer-site.template-nail-art .section-heading h2{font-size:clamp(50px,5.4vw,88px);line-height:.95}
.customer-site.template-nail-art .section-heading>p{font-size:18px}
.customer-site.template-nail-art .service-grid{gap:24px;border:0}
.customer-site.template-nail-art .service-card,.customer-site.template-nail-art .service-card:first-child,.customer-site.template-nail-art .service-card:last-child{background:var(--tint);border:0;border-radius:44px;padding:36px 34px 34px}
.customer-site.template-nail-art .service-card:nth-child(2){background:var(--primary);color:var(--on-primary);transform:rotate(1.5deg) translateY(16px)}
.customer-site.template-nail-art .service-card:nth-child(2) p,.customer-site.template-nail-art .service-card:nth-child(2) .service-symbol{color:var(--on-primary)}
.customer-site.template-nail-art .service-card-top{margin-bottom:46px}
.customer-site.template-nail-art .service-number{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--background);color:var(--primary);font-size:20px;font-weight:800}
.customer-site.template-nail-art .service-symbol{font-size:48px;color:var(--primary)}
.customer-site.template-nail-art .service-card h3{font-size:36px;line-height:1;margin-bottom:14px}
.customer-site.template-nail-art .service-card p{font-size:16px}
.customer-site.template-nail-art .service-price{display:inline-block;margin-top:26px;padding:10px 18px;border-radius:999px;background:var(--background);color:var(--text);font-size:14px;font-weight:700}

/* About: a blob of a window */
.customer-site.template-nail-art .about-art{padding:0;border:0}
.customer-site.template-nail-art .about-image{height:600px;border-radius:58% 42% 52% 48% / 46% 56% 44% 54%;overflow:hidden}
.customer-site.template-nail-art .about-art-mark{right:10px;bottom:20px;padding:22px;background:var(--primary);color:var(--on-primary);border:0}
.customer-site.template-nail-art .about-copy h2{font-size:clamp(46px,4.6vw,76px);line-height:.95}
.customer-site.template-nail-art .about-copy p{font-size:19px;line-height:1.6}

/* Gallery: polaroids on the mood board */
.customer-site.template-nail-art .gallery-grid{gap:34px;align-items:start}
.customer-site.template-nail-art .gallery-item{background:var(--surface);padding:14px 14px 0;border-radius:18px;box-shadow:0 18px 40px -22px rgba(0,0,0,.45);transform:rotate(-3deg)}
.customer-site.template-nail-art .gallery-item:nth-child(2){transform:rotate(2.5deg);margin-top:40px}
.customer-site.template-nail-art .gallery-item:nth-child(3){transform:rotate(-1deg)}
.customer-site.template-nail-art .gallery-item>div,.customer-site.template-nail-art .gallery-item:nth-child(2)>div,.customer-site.template-nail-art .gallery-item:nth-child(3)>div{border-radius:10px;aspect-ratio:1/1.1}
.customer-site.template-nail-art .gallery-item figcaption{padding:16px 6px 18px;font-size:16px;font-weight:700}

/* Contact: a big glossy pill */
.customer-site.template-nail-art .contact{background:transparent}
.customer-site.template-nail-art .contact-layout{background:var(--primary);color:var(--on-primary);border-radius:56px;padding:76px 72px}
.customer-site.template-nail-art .contact .eyebrow{background:color-mix(in srgb,var(--on-primary) 18%,transparent);color:var(--on-primary)}
.customer-site.template-nail-art .contact h2{font-size:clamp(50px,5.6vw,92px);line-height:.95}
.customer-site.template-nail-art .contact-copy p{color:var(--on-primary);opacity:.9;font-size:18px}
.customer-site.template-nail-art .contact-links a{color:var(--on-primary);font-size:20px;font-weight:700}
.customer-site.template-nail-art .contact-details{background:var(--background);color:var(--text);border-radius:36px;padding:34px;border:0}
.customer-site.template-nail-art .contact-mark{color:var(--primary)}
.customer-site.template-nail-art .contact-details h3{font-family:var(--font-display);font-size:22px;letter-spacing:-.02em;text-transform:none}
.customer-site.template-nail-art .contact-details p,.customer-site.template-nail-art .contact-details address{font-size:16px}
.customer-site.template-nail-art .brand-footer{font-size:34px}

@media (max-width:1100px){
.customer-site.template-nail-art .hero-layout{gap:48px}
.customer-site.template-nail-art .hero-art-note{left:-24px}
.customer-site.template-nail-art .contact-layout{padding:56px 40px}
}
@media (max-width:760px){
.customer-site.template-nail-art .hero{padding-bottom:56px}
.customer-site.template-nail-art .hero-layout{grid-template-columns:1fr}
.customer-site.template-nail-art h1{font-size:60px}
.customer-site.template-nail-art .hero-description{font-size:17px}
.customer-site.template-nail-art .polish-row{gap:10px}
.customer-site.template-nail-art .polish-row i{width:44px;height:60px}
.customer-site.template-nail-art .hero-image{height:440px;outline-offset:6px;margin:8px;border-radius:999px 999px 80px 80px}
.customer-site.template-nail-art h1{font-size:52px}
.customer-site.template-nail-art .hero-art-note{left:-6px;bottom:40px;font-size:13px;padding:12px 16px}
.customer-site.template-nail-art .floating-sparkle svg{width:70px;height:70px}
.customer-site.template-nail-art .floating-sparkle{right:-8px}
.customer-site.template-nail-art .values-strip .shell{flex-direction:column;align-items:flex-start;gap:8px}
.customer-site.template-nail-art .values-strip span{font-size:22px}
.customer-site.template-nail-art .service-card,.customer-site.template-nail-art .service-card:first-child,.customer-site.template-nail-art .service-card:last-child{padding:28px 24px;border-radius:32px}
.customer-site.template-nail-art .service-card:nth-child(2){transform:none}
.customer-site.template-nail-art .service-card-top{margin-bottom:26px}
.customer-site.template-nail-art .about-image{height:400px}
.customer-site.template-nail-art .gallery-item,.customer-site.template-nail-art .gallery-item:nth-child(2),.customer-site.template-nail-art .gallery-item:nth-child(3){transform:none;margin-top:0}
.customer-site.template-nail-art .contact-layout{padding:44px 24px;border-radius:36px}
.customer-site.template-nail-art .contact h2{font-size:48px}
.customer-site.template-nail-art .contact-details{padding:26px}
}
