@import url("responsive.css");
@font-face { font-family:"Aloevera Display"; src:url("fonts/AloeveraDisplay-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Aloevera Display"; src:url("fonts/AloeveraDisplay-Black.otf") format("opentype"); font-weight:900; font-style:normal; font-display:swap; }
@font-face { font-family:"Asia"; src:url("fonts/ASIAEB.TTF") format("truetype"); font-weight:400; font-style:normal; font-display:swap; }
:root { --ink:#1e2022; --paper:#fff; --blue:#253785; --pink:#d81ac1; --green:#4ad508; --soft:#eef0ff; --line:#d8d9dd; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font-family:"Aloevera Display",sans-serif; font-weight:400; letter-spacing:.018em; line-height:1.5; } .wrap { width:min(1120px,calc(100% - 40px)); margin:auto; }
.topline { background:var(--ink); color:#fff; padding:9px 16px; text-align:center; font-size:.8rem; letter-spacing:.07em; }.topline + .wrap { display:contents; } header { position:sticky; top:0; z-index:100; width:100%; height:122px; margin:auto; padding:0 max(20px,calc((100vw - 1120px)/2)); display:flex; align-items:center; justify-content:space-between; gap:24px; background:rgba(255,255,255,.62); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.42); box-shadow:0 8px 25px rgba(30,32,34,.04); }.brand { display:flex; align-items:center; gap:11px; color:var(--ink); text-decoration:none; }.logo { width:82px; height:100px; object-fit:contain; }.brand-name { font-family:"Asia",sans-serif; font-size:2.02rem; letter-spacing:.045em; white-space:nowrap; }.t { color:var(--blue); }.a { color:var(--pink); }.r { color:var(--green); } nav { display:flex; align-items:center; gap:25px; } nav a { color:var(--ink); text-decoration:none; font-size:.9rem; } nav a.active { color:var(--pink); } .button { display:inline-flex; align-items:center; justify-content:center; padding:11px 19px; border-radius:100px; background:var(--pink); color:#fff!important; font-weight:400; letter-spacing:.045em; text-decoration:none; transition:.2s; }.button:hover { background:var(--blue); transform:translateY(-2px); }.button.green { background:var(--green); color:var(--ink)!important; }.button.green:hover { background:var(--blue); color:#fff!important; }
h1,h2,h3 { font-weight:900; letter-spacing:.025em; line-height:1.08; margin:0; } h1 { font-size:clamp(3.1rem,6vw,5.4rem); } h2 { font-size:clamp(2.35rem,4.3vw,3.7rem); } h3 { font-size:1.6rem; }.eyebrow { color:var(--blue); font-size:.74rem; font-weight:900; letter-spacing:.19em; text-transform:uppercase; margin:0 0 16px; }.intro { max-width:650px; font-size:1.1rem; opacity:.78; margin:24px 0 30px; }.hero { padding:65px 0 88px; display:grid; grid-template-columns:1.1fr .9fr; gap:50px; align-items:center; }.shape { height:355px; position:relative; border-radius:53% 47% 39% 61% / 43% 55% 45% 57%; background:var(--soft); overflow:hidden; }.shape:before { content:""; position:absolute; width:220px; height:220px; border-radius:50%; background:var(--green); right:16%; top:14%; }.shape:after { content:""; position:absolute; width:57%; height:56%; left:14%; bottom:9%; border:28px solid var(--pink); border-radius:48% 52% 41% 59%; transform:rotate(-18deg); }.shape.blue { background:var(--blue); }.shape.blue:before { background:var(--green); }.shape.blue:after { border-color:#fff; }.shape.pink { background:var(--pink); }.shape.pink:before { background:var(--green); }.shape.pink:after { border-color:var(--blue); }
section { padding:95px 0; }.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.card { min-height:260px; padding:28px; border:1px solid var(--line); border-top:7px solid var(--blue); background:#fff; }.card:nth-child(2) { border-top-color:var(--pink); }.card:nth-child(3) { border-top-color:var(--green); }.card p { opacity:.76; }.number { display:block; margin-bottom:37px; color:var(--pink); font-size:1.35rem; font-weight:900; }.band { background:var(--soft); }.two-col { display:grid; grid-template-columns:.9fr 1.1fr; gap:76px; align-items:center; }.round-art { min-height:370px; border-radius:49% 51% 38% 62% / 42% 49% 51% 58%; background:var(--pink); position:relative; overflow:hidden; }.round-art:before { content:"✦"; position:absolute; font-family:Arial,sans-serif; color:var(--green); font-size:11rem; left:29%; top:22%; transform:rotate(15deg); }.round-art:after { content:""; position:absolute; width:130px; height:130px; border:20px solid #fff; border-radius:50%; right:12%; bottom:13%; }.list { padding:0; list-style:none; display:grid; gap:13px; font-weight:400; }.list li:before { content:"✓"; display:inline-grid; place-items:center; width:21px; height:21px; margin-right:10px; border-radius:50%; background:var(--green); color:var(--ink); font-weight:900; }.gallery-grid { display:grid; grid-template-columns:1.2fr .8fr .9fr; grid-template-rows:225px 225px; gap:16px; }.piece { position:relative; overflow:hidden; }.piece span { position:absolute; left:16px; bottom:13px; z-index:1; color:#fff; font-size:.86rem; font-weight:900; }.piece:after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 56%,rgba(0,0,0,.36)); }.one { grid-row:span 2; background:var(--blue); }.one:before { content:""; position:absolute; width:155%; height:130%; border:30px solid var(--green); border-radius:44%; top:-43%; left:-48%; transform:rotate(12deg); }.two { background:var(--pink); }.two:before { content:""; position:absolute; width:150px; height:150px; border-radius:50% 46% 42% 47%; background:var(--green); left:31%; top:15%; }.three { background:var(--soft); }.three:before { content:""; position:absolute; inset:22px 44px; background:repeating-linear-gradient(32deg,var(--ink) 0 6px,transparent 6px 21px); transform:rotate(17deg); }.four { grid-column:span 2; background:var(--green); }.four:before { content:""; position:absolute; width:130px; height:130px; border:20px solid #fff; border-radius:50%; right:20%; top:16%; }.callout { background:var(--blue); color:#fff; text-align:center; }.callout h2 { max-width:670px; margin:auto; }.callout p { max-width:520px; margin:18px auto 28px; opacity:.87; }.callout .button { background:var(--green); color:var(--ink)!important; }.contact-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:start; }.details { padding:31px; background:var(--soft); border-left:7px solid var(--blue); }.details h3 { margin-bottom:18px; }.details p { margin:8px 0; opacity:.8; }.details a { color:var(--blue); }.form { display:grid; gap:15px; }.form label { font-size:.84rem; }.form input,.form textarea { width:100%; border:1px solid var(--line); background:#fff; padding:13px; margin-top:5px; font:400 1rem "Aloevera Display",sans-serif; letter-spacing:.018em; color:var(--ink); }.form textarea { min-height:130px; resize:vertical; }.form small { opacity:.65; } footer { padding:35px 0; display:flex; justify-content:space-between; align-items:center; font-size:.85rem; } .footer-links { display:flex; gap:19px; }.footer-links a { color:inherit; text-decoration:none; }
@media(max-width:760px) { .wrap { width:min(100% - 32px,1120px); } header { width:100%; height:96px; padding:0 16px; gap:12px; } .logo { width:58px; height:76px; }.brand { gap:7px; }.brand-name { font-size:1.05rem; } nav a:not(.button) { display:none; } .hero,.two-col,.contact-grid { grid-template-columns:1fr; gap:35px; }.hero { padding:38px 0 62px; }.shape { height:285px; }.cards { grid-template-columns:1fr; }.gallery-grid { grid-template-columns:1fr 1fr; grid-template-rows:180px 180px 180px; }.four { grid-column:span 2; }.one { grid-row:span 2; } section { padding:68px 0; } footer { align-items:flex-start; flex-direction:column; gap:13px; } }