:root{
 --emerald:#1F5C4A;--deep:#153F34;--soft:#E7F0EC;--ivory:#F8F5EE;--surface:#FFFDF8;--gold:#B89A62;--text:#252824;--muted:#6F756F;--border:#DED9CD;
 --shadow:0 14px 40px rgba(21,63,52,.08);--radius:16px;--container:1180px;
 --serif:"Cormorant Garamond",Georgia,serif;--sans:"DM Sans",Arial,sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ivory);color:var(--text);font-family:var(--sans);line-height:1.6}a{color:inherit}.container{width:min(var(--container),calc(100% - 36px));margin:auto}.topbar{position:sticky;top:0;z-index:100;background:rgba(248,245,238,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}.nav{min-height:82px;display:flex;align-items:center;gap:24px}.brand img{width:58px;height:58px;border-radius:0;object-fit:contain;mix-blend-mode:multiply}.main-nav{display:flex;align-items:center;gap:24px;flex:1}.main-nav>a,.nav-parent{font-size:13px;text-decoration:none;color:var(--text);white-space:nowrap}.main-nav>a:hover,.nav-parent:hover{color:var(--emerald)}.nav-dropdown{position:relative}.nav-parent{display:flex;align-items:center;gap:5px}.nav-parent span{font-size:11px}.nav-menu{position:absolute;top:calc(100% + 10px);left:-14px;min-width:185px;padding:7px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s ease}.nav-dropdown:hover .nav-menu,.nav-dropdown:focus-within .nav-menu{opacity:1;visibility:visible;transform:translateY(0)}.nav-menu a{display:block;padding:10px 12px;font-size:12px;text-decoration:none;border-radius:8px}.nav-menu a:hover{background:var(--soft);color:var(--emerald)}.nav-cta{display:inline-flex;align-items:center;justify-content:center;background:var(--emerald);color:#fff;text-decoration:none;font-size:12px;font-weight:700;padding:11px 16px;border-radius:9px}.mobile-toggle{display:none;margin-left:auto;border:0;background:transparent;font-size:26px;color:var(--deep)}
.hero{padding:84px 0 66px;background:radial-gradient(circle at 10% 10%,#ffffffaa,transparent 35%),linear-gradient(135deg,var(--ivory),#f4eee2)}.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:40px}.eyebrow{font-size:11px;letter-spacing:1.7px;color:var(--gold);font-weight:800;text-transform:uppercase}.hero h1,.page-hero h1{font:600 62px/.95 var(--serif);margin:10px 0 20px;color:var(--deep)}.hero h1 em,.page-hero h1 em{font-style:normal;color:var(--emerald)}.hero p{font-size:16px;color:var(--muted);max-width:650px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;padding:12px 18px;text-decoration:none;font-size:12px;font-weight:700;border:1px solid transparent;cursor:pointer}.btn-primary{background:var(--emerald);color:#fff}.btn-secondary{border-color:var(--gold);background:var(--surface);color:#6d5224}.btn-ghost{background:transparent;border-color:var(--border);color:var(--deep)}.btn-gold{background:var(--gold);color:#fff}.status-cta{margin-top:18px;font-size:12px;color:var(--muted)}.status-cta a{color:var(--emerald);font-weight:800;text-decoration:none}.device-showcase{position:relative;min-height:430px}.phone-mock{position:absolute;left:30px;top:20px;width:210px;height:390px;border:8px solid var(--deep);border-radius:28px;background:linear-gradient(160deg,#e7eee1,#f8f0e2);box-shadow:var(--shadow);overflow:hidden;z-index:2}.phone-mock .screen{padding:90px 18px 18px;text-align:center;color:var(--deep)}.phone-mock .screen small{font-size:8px;letter-spacing:2px}.phone-mock .screen h3{font:600 34px/.85 var(--serif);margin:20px 0}.laptop-mock{position:absolute;right:0;bottom:20px;width:500px}.laptop-screen{height:300px;border:10px solid var(--deep);border-bottom-width:16px;border-radius:12px 12px 4px 4px;background:linear-gradient(135deg,#f2efe7,#dfe8dd);padding:55px 42px;color:var(--deep);box-shadow:var(--shadow)}.laptop-screen h3{font:600 42px/.88 var(--serif);margin:15px 0}.laptop-base{height:18px;background:#bfc3be;border-radius:0 0 18px 18px}
.section{padding:78px 0}.section.alt{background:var(--surface)}.section-heading{text-align:center;max-width:720px;margin:0 auto 36px}.section-heading h2{font:600 45px/1 var(--serif);color:var(--deep);margin:8px 0}.section-heading p{color:var(--muted);font-size:13px}.service-grid,.portfolio-grid,.feature-grid,.testimonial-grid,.pricing-grid,.steps-grid{display:grid;gap:18px}.service-grid{grid-template-columns:repeat(2,1fr)}.service-card,.feature-card,.testimonial-card,.price-card,.step-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}.service-card h3,.feature-card h3,.step-card h3{font:600 26px var(--serif);margin:6px 0}.service-card p,.feature-card p,.step-card p,.testimonial-card p{font-size:12px;color:var(--muted)}.service-card a,.text-link{color:var(--gold);text-decoration:none;font-size:12px;font-weight:800}.portfolio-grid{grid-template-columns:repeat(4,1fr)}.project-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}.project-thumb{height:190px;display:grid;place-items:center;text-align:center;padding:18px;font:600 30px var(--serif);color:var(--deep)}.thumb-green{background:linear-gradient(135deg,#dce8df,#eff1ea)}.thumb-navy{background:linear-gradient(135deg,#dfe5ea,#bfc9d6);color:#26394b}.thumb-cream{background:linear-gradient(135deg,#f3e7d9,#e6d6ca);color:#5b463d}.thumb-dark{background:linear-gradient(135deg,#203a31,#506b61);color:#f7f1e6}.project-body{padding:16px}.project-body h3{font:600 24px var(--serif);margin:4px 0}.project-body span{font-size:9px;text-transform:uppercase;color:var(--gold);font-weight:800}.feature-grid{grid-template-columns:repeat(3,1fr)}.feature-card{text-align:center}.feature-icon{width:42px;height:42px;border-radius:50%;background:var(--soft);color:var(--emerald);display:grid;place-items:center;margin:auto;font-weight:900}.steps-grid{grid-template-columns:repeat(5,1fr)}.step-no{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--emerald);color:#fff;font-size:10px;font-weight:800}.testimonial-grid{grid-template-columns:repeat(3,1fr)}.testimonial-card .stars{color:var(--gold);letter-spacing:2px}.cta-banner{padding:40px;background:var(--deep);color:#fff;border-radius:22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.cta-banner h2{font:600 40px/1 var(--serif);margin:0}.footer{background:var(--deep);color:#dce5de;padding:58px 0 24px;margin-top:70px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.2fr;gap:28px}.footer h4{font:600 22px var(--serif);margin:0 0 12px;color:#fff}.footer a,.footer span,.footer p{font-size:10px;color:#b7c3ba;text-decoration:none;display:block;margin:6px 0}.footer-logo{width:62px;height:62px;border-radius:50%;object-fit:cover;mix-blend-mode:screen}.copyright{margin-top:34px;border-top:1px solid #365144;padding-top:14px;font-size:9px;color:#93a49a;text-align:center}
.page-hero{padding:64px 0 46px;background:linear-gradient(135deg,var(--ivory),#f2ecdf)}.page-hero p{max-width:720px;color:var(--muted);font-size:13px}.breadcrumbs{font-size:10px;color:var(--muted);margin-bottom:16px}.catalog-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:22px;flex-wrap:wrap}.filter-row{display:flex;gap:7px;flex-wrap:wrap}.chip{border:1px solid var(--border);background:var(--surface);padding:8px 12px;border-radius:999px;font-size:10px;color:var(--muted);cursor:pointer}.chip.active{background:var(--emerald);color:#fff;border-color:var(--emerald)}.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.template-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}.template-cover{height:320px;display:grid;place-items:center;text-align:center;padding:25px;font:600 42px/.82 var(--serif);position:relative}.template-cover:before{content:"";position:absolute;inset:16px;border:1px solid currentColor;opacity:.18}.template-meta{padding:16px}.template-meta h3{font:600 25px var(--serif);margin:4px 0}.template-meta small{color:var(--gold);font-size:9px;font-weight:800;text-transform:uppercase}.template-meta p{font-size:11px;color:var(--muted)}.demo-link{display:inline-flex;margin-top:8px;color:var(--emerald);font-size:10px;font-weight:800;text-decoration:none}.detail-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:start}.detail-cover{min-height:610px;border-radius:20px;display:grid;place-items:center;text-align:center;padding:40px;position:relative;overflow:hidden;box-shadow:var(--shadow)}.detail-cover h2{font:600 76px/.8 var(--serif);margin:18px 0}.detail-copy h1{font:600 60px/.9 var(--serif);margin:4px 0 10px;color:var(--deep)}.feature-list{list-style:none;padding:0;display:grid;gap:10px}.feature-list li{font-size:11px}.feature-list li:before{content:"✓";color:var(--gold);font-weight:900;margin-right:9px}.price-strip{border-block:1px solid var(--border);padding:16px 0;margin:22px 0;display:flex;justify-content:space-between;align-items:center}.price-strip strong{font-size:24px}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.price-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);overflow:hidden;border-radius:14px}.price-table th,.price-table td{padding:11px;border-bottom:1px solid #eee9de;text-align:left;font-size:10px}.price-table th{background:var(--deep);color:#fff}.pricing-grid{grid-template-columns:repeat(2,1fr)}.price-card .tag{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--soft);color:var(--emerald);font-size:9px;font-weight:800}.price-card.featured{border:2px solid var(--gold)}.price-card h3{font:600 34px var(--serif);margin:8px 0}.price-big{font-size:28px;font-weight:800}.price-card ul{list-style:none;padding:0;display:grid;gap:8px}.price-card li{font-size:11px}.price-card li:before{content:"✓";color:var(--gold);margin-right:8px}.form-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}.form-card,.summary-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:var(--shadow)}.field{display:grid;gap:7px;margin-bottom:13px}.field label{font-size:9px;font-weight:800;letter-spacing:.4px}.field input,.field select,.field textarea{width:100%;border:1px solid var(--border);background:#fff;padding:12px;border-radius:8px;font:inherit;font-size:11px}.field textarea{min-height:110px;resize:vertical}.order-summary h3{font:600 30px var(--serif);margin:4px 0}.summary-line{display:flex;justify-content:space-between;font-size:11px;padding:9px 0;border-bottom:1px solid #eee9de}.success-box{max-width:720px;margin:80px auto;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:40px;text-align:center;box-shadow:var(--shadow)}.success-icon{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--emerald);font-size:25px;margin:0 auto 15px}.status-search{max-width:620px;margin:auto}.status-result{max-width:780px;margin:28px auto 0}.timeline{display:grid;gap:0}.timeline-item{display:grid;grid-template-columns:24px 1fr;gap:12px;position:relative;padding-bottom:20px}.timeline-dot{width:16px;height:16px;border-radius:50%;background:#d5ddd8;border:4px solid var(--ivory)}.timeline-item.done .timeline-dot{background:var(--emerald)}.timeline-item:before{content:"";position:absolute;left:7px;top:16px;bottom:0;width:2px;background:var(--border)}.timeline-item:last-child:before{display:none}.timeline-item h4{margin:0;font-size:11px}.timeline-item p{margin:2px 0 0;font-size:9px;color:var(--muted)}
@media(max-width:1050px){.main-nav{gap:15px}.main-nav>a,.nav-parent{font-size:11px}.portfolio-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:2fr 1fr 1fr}}
@media(max-width:800px){.nav{min-height:70px}.brand img{width:52px;height:52px;border-radius:0;object-fit:contain}.main-nav{display:none}.mobile-toggle{display:block}.nav-cta{margin-left:auto;padding:9px 11px;font-size:10px}.hero{padding:55px 0 45px}.hero-grid,.detail-grid,.form-grid{grid-template-columns:1fr}.hero h1,.page-hero h1{font-size:46px}.device-showcase{min-height:360px}.phone-mock{left:10px;width:180px;height:330px}.laptop-mock{right:-5px;width:390px}.laptop-screen{height:240px;padding:38px 28px}.laptop-screen h3{font-size:31px}.template-grid{grid-template-columns:repeat(2,1fr)}.feature-grid{grid-template-columns:repeat(2,1fr)}.steps-grid{grid-template-columns:repeat(2,1fr)}.testimonial-grid{grid-template-columns:1fr}.pricing-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.related-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.container{width:min(100% - 24px,520px)}.nav-cta{display:none}.hero h1,.page-hero h1{font-size:40px}.hero p{font-size:14px}.device-showcase{min-height:320px}.phone-mock{width:150px;height:285px;border-width:6px;left:8px}.phone-mock .screen{padding-top:65px}.phone-mock .screen h3{font-size:25px}.laptop-mock{width:300px;right:-15px;bottom:0}.laptop-screen{height:190px;border-width:7px;padding:28px 20px}.laptop-screen h3{font-size:25px}.section{padding:58px 0}.section-heading h2{font-size:38px}.service-grid,.portfolio-grid,.template-grid,.feature-grid,.steps-grid,.related-grid{grid-template-columns:1fr}.project-thumb{height:210px}.detail-cover{min-height:430px}.detail-cover h2{font-size:57px}.detail-copy h1{font-size:47px}.footer-grid{grid-template-columns:1fr}.cta-banner{display:block}.cta-banner .btn{margin-top:18px}.catalog-toolbar{align-items:flex-start}.actions{flex-direction:column;align-items:stretch}.actions .btn{width:100%}.price-table{font-size:9px}.summary-card{position:static}.page-hero{padding:48px 0 36px}}
.nav-open .main-nav{display:flex;position:absolute;top:70px;left:0;right:0;background:var(--surface);padding:14px 18px;flex-direction:column;align-items:stretch;border-bottom:1px solid var(--border);box-shadow:var(--shadow)}.nav-open .main-nav>a,.nav-open .nav-parent{padding:9px 0}.nav-open .nav-menu{position:static;box-shadow:none;border:0;padding:0 0 0 12px;opacity:1;visibility:visible;transform:none}.nav-open .nav-dropdown{display:block}.nav-open .nav-menu a{padding:8px 0}

.image-cover{padding:0!important;overflow:hidden;display:block;background:var(--surface)}.image-cover img{width:100%;height:100%;min-height:260px;object-fit:cover;display:block}.detail-image{width:100%;max-height:620px;object-fit:cover;border-radius:16px;display:block;box-shadow:var(--shadow)}

/* ===== HOME VISUAL ASSET SYSTEM ===== */
.home-hero-visual{position:relative;min-height:520px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:26px}
.home-hero-visual img{width:100%;height:520px;object-fit:cover;border-radius:26px;box-shadow:var(--shadow);display:block}
.service-card{padding:0;overflow:hidden}
.service-image{height:240px;overflow:hidden;background:var(--ivory)}
.service-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.service-card:hover .service-image img{transform:scale(1.035)}
.service-content{padding:24px}
.service-content .feature-icon{margin:0 0 8px}
.asset-icon{width:92px;height:92px;margin:0 auto 8px;display:grid;place-items:center}
.asset-icon img{width:92px;height:92px;object-fit:contain;display:block}
.process-icon{height:116px;display:grid;place-items:center;margin-bottom:4px}
.process-icon img{width:116px;height:116px;object-fit:contain;display:block}
.step-card .step-no{margin-top:4px}
.testimonial-section{position:relative;overflow:hidden}
.testimonial-ornament{height:86px;display:flex;justify-content:center;align-items:center;margin:-12px auto 4px;opacity:.92}
.testimonial-ornament img{width:150px;height:150px;object-fit:contain;display:block}
.testimonial-card{position:relative;overflow:hidden}
.testimonial-card:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.55}
.cta-banner{position:relative;overflow:hidden}
.cta-content{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}
.cta-ornament{position:absolute;right:-70px;bottom:-34px;width:500px;height:auto;opacity:.32;pointer-events:none;z-index:1}
.cta-banner .actions{position:relative;z-index:2}
.footer{position:relative;overflow:hidden}
.footer-grid,.copyright{position:relative;z-index:2}
.footer-ornament{position:absolute;left:50%;bottom:-42px;transform:translateX(-50%);width:min(900px,75vw);opacity:.15;pointer-events:none;z-index:1}
@media(max-width:800px){.home-hero-visual{min-height:340px}.home-hero-visual img{height:340px}.service-image{height:220px}.asset-icon,.asset-icon img{width:78px;height:78px}.process-icon,.process-icon img{width:92px;height:92px;height:92px}.process-icon{height:92px}.cta-content{display:block}.cta-ornament{width:360px;right:-90px;bottom:-20px}}
@media(max-width:560px){.home-hero-visual{min-height:260px;border-radius:18px}.home-hero-visual img{height:260px;border-radius:18px}.service-image{height:205px}.testimonial-ornament{height:72px}.testimonial-ornament img{width:120px;height:120px}.cta-ornament{width:300px;right:-100px;bottom:-15px}.footer-ornament{width:900px;max-width:none;bottom:-25px}}

/* ===== HOME VISUAL REFINEMENT v5.2 ===== */

/* Hero: let the artwork occupy the full right side while preserving the complete image. */
.hero-grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:0;align-items:stretch}
.hero{overflow:hidden}
.home-hero-visual{
  position:relative;
  min-height:560px;
  overflow:visible;
  border-radius:0;
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  isolation:isolate;
}
.home-hero-visual::before{
  content:"";
  position:absolute;
  inset:0 auto 0 -2px;
  width:38%;
  background:linear-gradient(90deg,var(--ivory) 0%,rgba(248,245,238,.98) 22%,rgba(248,245,238,.55) 52%,rgba(248,245,238,0) 100%);
  z-index:2;
  pointer-events:none;
}
.home-hero-visual img{
  position:relative;
  z-index:1;
  display:block;
  width:auto;
  height:100%;
  max-width:none;
  aspect-ratio:auto;
  object-fit:contain;
  border-radius:0;
  box-shadow:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.05) 10%,#000 28%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.05) 10%,#000 28%,#000 100%);
}

/* Services: text stays left; complete visual sits on the right and is shifted left inside its panel. */
.service-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.service-card{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(220px,.98fr);
  grid-template-rows:1fr;
  min-height:330px;
  padding:0;
  overflow:hidden;
}
.service-content{
  grid-column:1;
  grid-row:1;
  padding:30px 26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  position:relative;
  z-index:2;
}
.service-content .feature-icon{margin:0 0 10px}
.service-image{
  grid-column:2;
  grid-row:1;
  height:100%;
  min-height:330px;
  position:relative;
  overflow:hidden;
  background:var(--ivory);
}
.service-image::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:42%;
  background:linear-gradient(90deg,var(--surface) 0%,rgba(255,253,248,.72) 32%,rgba(255,253,248,0) 100%);
  z-index:1;
  pointer-events:none;
}
.service-image img{
  width:118%;
  max-width:none;
  height:100%;
  object-fit:cover;
  object-position:72% center;
  display:block;
  margin-left:-18%;
  transition:transform .5s ease;
}
.service-card:hover .service-image img{transform:scale(1.025) translateX(-2%)}

/* CTA: preserve the intended left-copy / right-buttons layout. */
.cta-banner{padding:40px 52px;position:relative;overflow:hidden}
.cta-inner{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.cta-content{
  position:relative;
  z-index:2;
  display:block;
  flex:1 1 auto;
  width:auto;
}
.cta-content .eyebrow{margin:0 0 8px}
.cta-content h2{margin:0}
.cta-banner .actions{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  margin-top:0;
  align-items:center;
  justify-content:flex-end;
  flex-direction:row;
}
.cta-banner .actions .btn{width:auto;margin-top:0}
.cta-ornament{
  position:absolute;
  right:-70px;
  bottom:-34px;
  width:500px;
  height:auto;
  opacity:.28;
  pointer-events:none;
  z-index:1;
}
.footer-ornament{z-index:1;pointer-events:none}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:8px}
  .home-hero-visual{min-height:420px;justify-content:center;margin-top:4px}
  .home-hero-visual img{height:100%;max-width:100%;width:auto}
  .home-hero-visual::before{width:45%;background:linear-gradient(90deg,var(--ivory) 0%,rgba(248,245,238,.9) 18%,rgba(248,245,238,0) 100%)}
  .service-grid{grid-template-columns:1fr}
  .service-card{min-height:310px}
  .service-image{min-height:310px}
  .cta-banner{padding:34px 36px}
  .cta-inner{gap:24px}
}

@media(max-width:700px){
  .service-card{grid-template-columns:1fr;grid-template-rows:auto auto}
  .service-content{grid-column:1;grid-row:1;padding:26px 24px}
  .service-image{grid-column:1;grid-row:2;min-height:230px;height:230px}
  .service-image::before{width:100%;height:35%;inset:0 0 auto;background:linear-gradient(180deg,var(--surface),rgba(255,253,248,0))}
  .service-image img{width:118%;margin-left:-9%;object-position:72% center}
  .cta-inner{display:flex;flex-direction:column;align-items:stretch}
  .cta-banner .actions{width:100%;justify-content:flex-start;flex-direction:row;align-items:center}
  .cta-banner .actions .btn{width:auto;margin-top:0}
}

@media(max-width:560px){
  .home-hero-visual{min-height:300px;border-radius:18px}
  .home-hero-visual img{width:100%;height:auto;max-width:100%;margin:0}
  .home-hero-visual::before{width:55%}
  .service-image{height:205px;min-height:205px}
  .service-image img{width:120%;margin-left:-10%;object-position:72% center}
  .cta-banner{padding:30px 24px}
  .cta-banner .actions{flex-direction:column;align-items:stretch}
  .cta-banner .actions .btn{width:100%;margin-top:0}
}
:root{
 --emerald:#1F5C4A;--deep:#153F34;--soft:#E7F0EC;--ivory:#F8F5EE;--surface:#FFFDF8;--gold:#B89A62;--text:#252824;--muted:#6F756F;--border:#DED9CD;
 --shadow:0 14px 40px rgba(21,63,52,.08);--radius:16px;--container:1180px;
 --serif:"Cormorant Garamond",Georgia,serif;--sans:"DM Sans",Arial,sans-serif;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--ivory);color:var(--text);font-family:var(--sans);line-height:1.6}a{color:inherit}.container{width:min(var(--container),calc(100% - 36px));margin:auto}.topbar{position:sticky;top:0;z-index:100;background:rgba(248,245,238,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}.nav{min-height:82px;display:flex;align-items:center;gap:24px}.brand img{width:58px;height:58px;border-radius:0;object-fit:contain;mix-blend-mode:multiply}.main-nav{display:flex;align-items:center;gap:24px;flex:1}.main-nav>a,.nav-parent{font-size:13px;text-decoration:none;color:var(--text);white-space:nowrap}.main-nav>a:hover,.nav-parent:hover{color:var(--emerald)}.nav-dropdown{position:relative}.nav-parent{display:flex;align-items:center;gap:5px}.nav-parent span{font-size:11px}.nav-menu{position:absolute;top:calc(100% + 10px);left:-14px;min-width:185px;padding:7px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s ease}.nav-dropdown:hover .nav-menu,.nav-dropdown:focus-within .nav-menu{opacity:1;visibility:visible;transform:translateY(0)}.nav-menu a{display:block;padding:10px 12px;font-size:12px;text-decoration:none;border-radius:8px}.nav-menu a:hover{background:var(--soft);color:var(--emerald)}.nav-cta{display:inline-flex;align-items:center;justify-content:center;background:var(--emerald);color:#fff;text-decoration:none;font-size:12px;font-weight:700;padding:11px 16px;border-radius:9px}.mobile-toggle{display:none;margin-left:auto;border:0;background:transparent;font-size:26px;color:var(--deep)}
.hero{padding:84px 0 66px;background:radial-gradient(circle at 10% 10%,#ffffffaa,transparent 35%),linear-gradient(135deg,var(--ivory),#f4eee2)}.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;align-items:center;gap:40px}.eyebrow{font-size:11px;letter-spacing:1.7px;color:var(--gold);font-weight:800;text-transform:uppercase}.hero h1,.page-hero h1{font:600 62px/.95 var(--serif);margin:10px 0 20px;color:var(--deep)}.hero h1 em,.page-hero h1 em{font-style:normal;color:var(--emerald)}.hero p{font-size:16px;color:var(--muted);max-width:650px}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:9px;padding:12px 18px;text-decoration:none;font-size:12px;font-weight:700;border:1px solid transparent;cursor:pointer}.btn-primary{background:var(--emerald);color:#fff}.btn-secondary{border-color:var(--gold);background:var(--surface);color:#6d5224}.btn-ghost{background:transparent;border-color:var(--border);color:var(--deep)}.btn-gold{background:var(--gold);color:#fff}.status-cta{margin-top:18px;font-size:12px;color:var(--muted)}.status-cta a{color:var(--emerald);font-weight:800;text-decoration:none}.device-showcase{position:relative;min-height:430px}.phone-mock{position:absolute;left:30px;top:20px;width:210px;height:390px;border:8px solid var(--deep);border-radius:28px;background:linear-gradient(160deg,#e7eee1,#f8f0e2);box-shadow:var(--shadow);overflow:hidden;z-index:2}.phone-mock .screen{padding:90px 18px 18px;text-align:center;color:var(--deep)}.phone-mock .screen small{font-size:8px;letter-spacing:2px}.phone-mock .screen h3{font:600 34px/.85 var(--serif);margin:20px 0}.laptop-mock{position:absolute;right:0;bottom:20px;width:500px}.laptop-screen{height:300px;border:10px solid var(--deep);border-bottom-width:16px;border-radius:12px 12px 4px 4px;background:linear-gradient(135deg,#f2efe7,#dfe8dd);padding:55px 42px;color:var(--deep);box-shadow:var(--shadow)}.laptop-screen h3{font:600 42px/.88 var(--serif);margin:15px 0}.laptop-base{height:18px;background:#bfc3be;border-radius:0 0 18px 18px}
.section{padding:78px 0}.section.alt{background:var(--surface)}.section-heading{text-align:center;max-width:720px;margin:0 auto 36px}.section-heading h2{font:600 45px/1 var(--serif);color:var(--deep);margin:8px 0}.section-heading p{color:var(--muted);font-size:13px}.service-grid,.portfolio-grid,.feature-grid,.testimonial-grid,.pricing-grid,.steps-grid{display:grid;gap:18px}.service-grid{grid-template-columns:repeat(2,1fr)}.service-card,.feature-card,.testimonial-card,.price-card,.step-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}.service-card h3,.feature-card h3,.step-card h3{font:600 26px var(--serif);margin:6px 0}.service-card p,.feature-card p,.step-card p,.testimonial-card p{font-size:12px;color:var(--muted)}.service-card a,.text-link{color:var(--gold);text-decoration:none;font-size:12px;font-weight:800}.portfolio-grid{grid-template-columns:repeat(4,1fr)}.project-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden}.project-thumb{height:190px;display:grid;place-items:center;text-align:center;padding:18px;font:600 30px var(--serif);color:var(--deep)}.thumb-green{background:linear-gradient(135deg,#dce8df,#eff1ea)}.thumb-navy{background:linear-gradient(135deg,#dfe5ea,#bfc9d6);color:#26394b}.thumb-cream{background:linear-gradient(135deg,#f3e7d9,#e6d6ca);color:#5b463d}.thumb-dark{background:linear-gradient(135deg,#203a31,#506b61);color:#f7f1e6}.project-body{padding:16px}.project-body h3{font:600 24px var(--serif);margin:4px 0}.project-body span{font-size:9px;text-transform:uppercase;color:var(--gold);font-weight:800}.feature-grid{grid-template-columns:repeat(3,1fr)}.feature-card{text-align:center}.feature-icon{width:42px;height:42px;border-radius:50%;background:var(--soft);color:var(--emerald);display:grid;place-items:center;margin:auto;font-weight:900}.steps-grid{grid-template-columns:repeat(5,1fr)}.step-no{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--emerald);color:#fff;font-size:10px;font-weight:800}.testimonial-grid{grid-template-columns:repeat(3,1fr)}.testimonial-card .stars{color:var(--gold);letter-spacing:2px}.cta-banner{padding:40px;background:var(--deep);color:#fff;border-radius:22px;display:flex;align-items:center;justify-content:space-between;gap:20px}.cta-banner h2{font:600 40px/1 var(--serif);margin:0}.footer{background:var(--deep);color:#dce5de;padding:58px 0 24px;margin-top:70px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1.2fr;gap:28px}.footer h4{font:600 22px var(--serif);margin:0 0 12px;color:#fff}.footer a,.footer span,.footer p{font-size:10px;color:#b7c3ba;text-decoration:none;display:block;margin:6px 0}.footer-logo{width:62px;height:62px;border-radius:50%;object-fit:cover;mix-blend-mode:screen}.copyright{margin-top:34px;border-top:1px solid #365144;padding-top:14px;font-size:9px;color:#93a49a;text-align:center}
.page-hero{padding:64px 0 46px;background:linear-gradient(135deg,var(--ivory),#f2ecdf)}.page-hero p{max-width:720px;color:var(--muted);font-size:13px}.breadcrumbs{font-size:10px;color:var(--muted);margin-bottom:16px}.catalog-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:22px;flex-wrap:wrap}.filter-row{display:flex;gap:7px;flex-wrap:wrap}.chip{border:1px solid var(--border);background:var(--surface);padding:8px 12px;border-radius:999px;font-size:10px;color:var(--muted);cursor:pointer}.chip.active{background:var(--emerald);color:#fff;border-color:var(--emerald)}.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.template-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}.template-cover{height:320px;display:grid;place-items:center;text-align:center;padding:25px;font:600 42px/.82 var(--serif);position:relative}.template-cover:before{content:"";position:absolute;inset:16px;border:1px solid currentColor;opacity:.18}.template-meta{padding:16px}.template-meta h3{font:600 25px var(--serif);margin:4px 0}.template-meta small{color:var(--gold);font-size:9px;font-weight:800;text-transform:uppercase}.template-meta p{font-size:11px;color:var(--muted)}.demo-link{display:inline-flex;margin-top:8px;color:var(--emerald);font-size:10px;font-weight:800;text-decoration:none}.detail-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:38px;align-items:start}.detail-cover{min-height:610px;border-radius:20px;display:grid;place-items:center;text-align:center;padding:40px;position:relative;overflow:hidden;box-shadow:var(--shadow)}.detail-cover h2{font:600 76px/.8 var(--serif);margin:18px 0}.detail-copy h1{font:600 60px/.9 var(--serif);margin:4px 0 10px;color:var(--deep)}.feature-list{list-style:none;padding:0;display:grid;gap:10px}.feature-list li{font-size:11px}.feature-list li:before{content:"✓";color:var(--gold);font-weight:900;margin-right:9px}.price-strip{border-block:1px solid var(--border);padding:16px 0;margin:22px 0;display:flex;justify-content:space-between;align-items:center}.price-strip strong{font-size:24px}.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.price-table{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--border);overflow:hidden;border-radius:14px}.price-table th,.price-table td{padding:11px;border-bottom:1px solid #eee9de;text-align:left;font-size:10px}.price-table th{background:var(--deep);color:#fff}.pricing-grid{grid-template-columns:repeat(2,1fr)}.price-card .tag{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--soft);color:var(--emerald);font-size:9px;font-weight:800}.price-card.featured{border:2px solid var(--gold)}.price-card h3{font:600 34px var(--serif);margin:8px 0}.price-big{font-size:28px;font-weight:800}.price-card ul{list-style:none;padding:0;display:grid;gap:8px}.price-card li{font-size:11px}.price-card li:before{content:"✓";color:var(--gold);margin-right:8px}.form-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:28px;align-items:start}.form-card,.summary-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;box-shadow:var(--shadow)}.field{display:grid;gap:7px;margin-bottom:13px}.field label{font-size:9px;font-weight:800;letter-spacing:.4px}.field input,.field select,.field textarea{width:100%;border:1px solid var(--border);background:#fff;padding:12px;border-radius:8px;font:inherit;font-size:11px}.field textarea{min-height:110px;resize:vertical}.order-summary h3{font:600 30px var(--serif);margin:4px 0}.summary-line{display:flex;justify-content:space-between;font-size:11px;padding:9px 0;border-bottom:1px solid #eee9de}.success-box{max-width:720px;margin:80px auto;background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:40px;text-align:center;box-shadow:var(--shadow)}.success-icon{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--emerald);font-size:25px;margin:0 auto 15px}.status-search{max-width:620px;margin:auto}.status-result{max-width:780px;margin:28px auto 0}.timeline{display:grid;gap:0}.timeline-item{display:grid;grid-template-columns:24px 1fr;gap:12px;position:relative;padding-bottom:20px}.timeline-dot{width:16px;height:16px;border-radius:50%;background:#d5ddd8;border:4px solid var(--ivory)}.timeline-item.done .timeline-dot{background:var(--emerald)}.timeline-item:before{content:"";position:absolute;left:7px;top:16px;bottom:0;width:2px;background:var(--border)}.timeline-item:last-child:before{display:none}.timeline-item h4{margin:0;font-size:11px}.timeline-item p{margin:2px 0 0;font-size:9px;color:var(--muted)}
@media(max-width:1050px){.main-nav{gap:15px}.main-nav>a,.nav-parent{font-size:11px}.portfolio-grid{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:2fr 1fr 1fr}}
@media(max-width:800px){.nav{min-height:70px}.brand img{width:52px;height:52px;border-radius:0;object-fit:contain}.main-nav{display:none}.mobile-toggle{display:block}.nav-cta{margin-left:auto;padding:9px 11px;font-size:10px}.hero{padding:55px 0 45px}.hero-grid,.detail-grid,.form-grid{grid-template-columns:1fr}.hero h1,.page-hero h1{font-size:46px}.device-showcase{min-height:360px}.phone-mock{left:10px;width:180px;height:330px}.laptop-mock{right:-5px;width:390px}.laptop-screen{height:240px;padding:38px 28px}.laptop-screen h3{font-size:31px}.template-grid{grid-template-columns:repeat(2,1fr)}.feature-grid{grid-template-columns:repeat(2,1fr)}.steps-grid{grid-template-columns:repeat(2,1fr)}.testimonial-grid{grid-template-columns:1fr}.pricing-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.related-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.container{width:min(100% - 24px,520px)}.nav-cta{display:none}.hero h1,.page-hero h1{font-size:40px}.hero p{font-size:14px}.device-showcase{min-height:320px}.phone-mock{width:150px;height:285px;border-width:6px;left:8px}.phone-mock .screen{padding-top:65px}.phone-mock .screen h3{font-size:25px}.laptop-mock{width:300px;right:-15px;bottom:0}.laptop-screen{height:190px;border-width:7px;padding:28px 20px}.laptop-screen h3{font-size:25px}.section{padding:58px 0}.section-heading h2{font-size:38px}.service-grid,.portfolio-grid,.template-grid,.feature-grid,.steps-grid,.related-grid{grid-template-columns:1fr}.project-thumb{height:210px}.detail-cover{min-height:430px}.detail-cover h2{font-size:57px}.detail-copy h1{font-size:47px}.footer-grid{grid-template-columns:1fr}.cta-banner{display:block}.cta-banner .btn{margin-top:18px}.catalog-toolbar{align-items:flex-start}.actions{flex-direction:column;align-items:stretch}.actions .btn{width:100%}.price-table{font-size:9px}.summary-card{position:static}.page-hero{padding:48px 0 36px}}
.nav-open .main-nav{display:flex;position:absolute;top:70px;left:0;right:0;background:var(--surface);padding:14px 18px;flex-direction:column;align-items:stretch;border-bottom:1px solid var(--border);box-shadow:var(--shadow)}.nav-open .main-nav>a,.nav-open .nav-parent{padding:9px 0}.nav-open .nav-menu{position:static;box-shadow:none;border:0;padding:0 0 0 12px;opacity:1;visibility:visible;transform:none}.nav-open .nav-dropdown{display:block}.nav-open .nav-menu a{padding:8px 0}

.image-cover{padding:0!important;overflow:hidden;display:block;background:var(--surface)}.image-cover img{width:100%;height:100%;min-height:260px;object-fit:cover;display:block}.detail-image{width:100%;max-height:620px;object-fit:cover;border-radius:16px;display:block;box-shadow:var(--shadow)}

/* ===== HOME VISUAL ASSET SYSTEM ===== */
.home-hero-visual{position:relative;min-height:520px;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:26px}
.home-hero-visual img{width:100%;height:520px;object-fit:cover;border-radius:26px;box-shadow:var(--shadow);display:block}
.service-card{padding:0;overflow:hidden}
.service-image{height:240px;overflow:hidden;background:var(--ivory)}
.service-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.service-card:hover .service-image img{transform:scale(1.035)}
.service-content{padding:24px}
.service-content .feature-icon{margin:0 0 8px}
.asset-icon{width:92px;height:92px;margin:0 auto 8px;display:grid;place-items:center}
.asset-icon img{width:92px;height:92px;object-fit:contain;display:block}
.process-icon{height:116px;display:grid;place-items:center;margin-bottom:4px}
.process-icon img{width:116px;height:116px;object-fit:contain;display:block}
.step-card .step-no{margin-top:4px}
.testimonial-section{position:relative;overflow:hidden}
.testimonial-ornament{height:86px;display:flex;justify-content:center;align-items:center;margin:-12px auto 4px;opacity:.92}
.testimonial-ornament img{width:150px;height:150px;object-fit:contain;display:block}
.testimonial-card{position:relative;overflow:hidden}
.testimonial-card:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:.55}
.cta-banner{position:relative;overflow:hidden}
.cta-content{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}
.cta-ornament{position:absolute;right:-70px;bottom:-34px;width:500px;height:auto;opacity:.32;pointer-events:none;z-index:1}
.cta-banner .actions{position:relative;z-index:2}
.footer{position:relative;overflow:hidden}
.footer-grid,.copyright{position:relative;z-index:2}
.footer-ornament{position:absolute;left:50%;bottom:-42px;transform:translateX(-50%);width:min(900px,75vw);opacity:.15;pointer-events:none;z-index:1}
@media(max-width:800px){.home-hero-visual{min-height:340px}.home-hero-visual img{height:340px}.service-image{height:220px}.asset-icon,.asset-icon img{width:78px;height:78px}.process-icon,.process-icon img{width:92px;height:92px;height:92px}.process-icon{height:92px}.cta-content{display:block}.cta-ornament{width:360px;right:-90px;bottom:-20px}}
@media(max-width:560px){.home-hero-visual{min-height:260px;border-radius:18px}.home-hero-visual img{height:260px;border-radius:18px}.service-image{height:205px}.testimonial-ornament{height:72px}.testimonial-ornament img{width:120px;height:120px}.cta-ornament{width:300px;right:-100px;bottom:-15px}.footer-ornament{width:900px;max-width:none;bottom:-25px}}

/* ===== HOME VISUAL REFINEMENT v5.2 ===== */

/* Hero: let the artwork occupy the full right side while preserving the complete image. */
.hero-grid{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:0;align-items:stretch}
.hero{overflow:hidden}
.home-hero-visual{
  position:relative;
  min-height:560px;
  overflow:visible;
  border-radius:0;
  display:flex;
  align-items:stretch;
  justify-content:flex-end;
  isolation:isolate;
}
.home-hero-visual::before{
  content:"";
  position:absolute;
  inset:0 auto 0 -2px;
  width:38%;
  background:linear-gradient(90deg,var(--ivory) 0%,rgba(248,245,238,.98) 22%,rgba(248,245,238,.55) 52%,rgba(248,245,238,0) 100%);
  z-index:2;
  pointer-events:none;
}
.home-hero-visual img{
  position:relative;
  z-index:1;
  display:block;
  width:auto;
  height:100%;
  max-width:none;
  aspect-ratio:auto;
  object-fit:contain;
  border-radius:0;
  box-shadow:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.05) 10%,#000 28%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.05) 10%,#000 28%,#000 100%);
}

/* Services: text stays left; complete visual sits on the right and is shifted left inside its panel. */
.service-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.service-card{
  display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(220px,.98fr);
  grid-template-rows:1fr;
  min-height:330px;
  padding:0;
  overflow:hidden;
}
.service-content{
  grid-column:1;
  grid-row:1;
  padding:30px 26px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
  position:relative;
  z-index:2;
}
.service-content .feature-icon{margin:0 0 10px}
.service-image{
  grid-column:2;
  grid-row:1;
  height:100%;
  min-height:330px;
  position:relative;
  overflow:hidden;
  background:var(--ivory);
}
.service-image::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:42%;
  background:linear-gradient(90deg,var(--surface) 0%,rgba(255,253,248,.72) 32%,rgba(255,253,248,0) 100%);
  z-index:1;
  pointer-events:none;
}
.service-image img{
  width:118%;
  max-width:none;
  height:100%;
  object-fit:cover;
  object-position:72% center;
  display:block;
  margin-left:-18%;
  transition:transform .5s ease;
}
.service-card:hover .service-image img{transform:scale(1.025) translateX(-2%)}

/* CTA: preserve the intended left-copy / right-buttons layout. */
.cta-banner{padding:40px 52px;position:relative;overflow:hidden}
.cta-inner{
  position:relative;
  z-index:2;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.cta-content{
  position:relative;
  z-index:2;
  display:block;
  flex:1 1 auto;
  width:auto;
}
.cta-content .eyebrow{margin:0 0 8px}
.cta-content h2{margin:0}
.cta-banner .actions{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  margin-top:0;
  align-items:center;
  justify-content:flex-end;
  flex-direction:row;
}
.cta-banner .actions .btn{width:auto;margin-top:0}
.cta-ornament{
  position:absolute;
  right:-70px;
  bottom:-34px;
  width:500px;
  height:auto;
  opacity:.28;
  pointer-events:none;
  z-index:1;
}
.footer-ornament{z-index:1;pointer-events:none}

@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:8px}
  .home-hero-visual{min-height:420px;justify-content:center;margin-top:4px}
  .home-hero-visual img{height:100%;max-width:100%;width:auto}
  .home-hero-visual::before{width:45%;background:linear-gradient(90deg,var(--ivory) 0%,rgba(248,245,238,.9) 18%,rgba(248,245,238,0) 100%)}
  .service-grid{grid-template-columns:1fr}
  .service-card{min-height:310px}
  .service-image{min-height:310px}
  .cta-banner{padding:34px 36px}
  .cta-inner{gap:24px}
}

@media(max-width:700px){
  .service-card{grid-template-columns:1fr;grid-template-rows:auto auto}
  .service-content{grid-column:1;grid-row:1;padding:26px 24px}
  .service-image{grid-column:1;grid-row:2;min-height:230px;height:230px}
  .service-image::before{width:100%;height:35%;inset:0 0 auto;background:linear-gradient(180deg,var(--surface),rgba(255,253,248,0))}
  .service-image img{width:118%;margin-left:-9%;object-position:72% center}
  .cta-inner{display:flex;flex-direction:column;align-items:stretch}
  .cta-banner .actions{width:100%;justify-content:flex-start;flex-direction:row;align-items:center}
  .cta-banner .actions .btn{width:auto;margin-top:0}
}

@media(max-width:560px){
  .home-hero-visual{min-height:300px;border-radius:18px}
  .home-hero-visual img{width:100%;height:auto;max-width:100%;margin:0}
  .home-hero-visual::before{width:55%}
  .service-image{height:205px;min-height:205px}
  .service-image img{width:120%;margin-left:-10%;object-position:72% center}
  .cta-banner{padding:30px 24px}
  .cta-banner .actions{flex-direction:column;align-items:stretch}
  .cta-banner .actions .btn{width:100%;margin-top:0}
}


/* ===== HOME VISUAL REFINEMENT v5.3 ===== */
/* Hero: keep the complete artwork inside the right column. Never let the
   intrinsic image width expand/collapse the grid or cover the text. */
.hero-grid{
  grid-template-columns:minmax(0, .92fr) minmax(0, 1.08fr);
  gap:24px;
  align-items:center;
}
.hero-grid > *{min-width:0;}

.home-hero-visual{
  position:relative;
  min-width:0;
  width:100%;
  min-height:0;
  height:auto;
  display:block;
  overflow:hidden;
  border-radius:24px;
  isolation:isolate;
}
.home-hero-visual::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:30%;
  background:linear-gradient(
    90deg,
    var(--ivory) 0%,
    rgba(248,245,238,.96) 18%,
    rgba(248,245,238,.58) 52%,
    rgba(248,245,238,0) 100%
  );
  z-index:2;
  pointer-events:none;
}
.home-hero-visual img{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:contain;
  object-position:center;
  border-radius:24px;
  box-shadow:none;
  -webkit-mask-image:linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.12) 8%,
    #000 25%,
    #000 100%
  );
  mask-image:linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.12) 8%,
    #000 25%,
    #000 100%
  );
}

/* Services: keep the complete card composition visible while visually
   pulling the artwork farther toward the text side. */
.service-card{
  grid-template-columns:minmax(0, 1.02fr) minmax(250px, .98fr);
}
.service-image{
  position:relative;
  min-width:0;
  overflow:hidden;
}
.service-image::before{
  width:52%;
  background:linear-gradient(
    90deg,
    var(--surface) 0%,
    rgba(255,253,248,.82) 28%,
    rgba(255,253,248,.20) 72%,
    rgba(255,253,248,0) 100%
  );
}
.service-image img{
  width:118%;
  max-width:none;
  height:100%;
  object-fit:cover;
  object-position:62% center;
  margin-left:-18%;
}

/* Keep CTA exactly in the intended left-copy / right-buttons arrangement. */
.cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.cta-content{
  display:block;
  flex:1 1 auto;
  width:auto;
}
.cta-banner .actions{
  flex:0 0 auto;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  margin-top:0;
}

@media(max-width:900px){
  .hero-grid{
    grid-template-columns:1fr;
    gap:18px;
  }
  .home-hero-visual{
    width:100%;
    margin-top:4px;
    border-radius:20px;
  }
  .home-hero-visual img{
    width:100%;
    max-width:100%;
    height:auto;
    border-radius:20px;
  }
  .service-card{
    min-height:310px;
    grid-template-columns:minmax(0,1fr) minmax(220px,.95fr);
  }
  .service-image{min-height:310px;}
}

@media(max-width:700px){
  .service-card{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
  }
  .service-content{
    grid-column:1;
    grid-row:1;
  }
  .service-image{
    grid-column:1;
    grid-row:2;
    min-height:230px;
    height:230px;
  }
  .service-image::before{
    width:100%;
    height:38%;
    inset:0 0 auto;
    background:linear-gradient(
      180deg,
      var(--surface) 0%,
      rgba(255,253,248,.58) 45%,
      rgba(255,253,248,0) 100%
    );
  }
  .service-image img{
    width:118%;
    height:100%;
    margin-left:-9%;
    object-position:62% center;
  }
}

@media(max-width:560px){
  .home-hero-visual{
    border-radius:18px;
  }
  .home-hero-visual img{
    width:100%;
    height:auto;
    border-radius:18px;
  }
}

/* ===== UNDANGAN DIGITAL VISUAL ASSET SYSTEM ===== */

.invitation-page-hero{
  padding:58px 0 54px;
  background:linear-gradient(135deg,var(--ivory),#f3ede1);
  overflow:hidden;
}

.invitation-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  align-items:center;
  gap:28px;
}

.invitation-hero-copy{
  position:relative;
  z-index:2;
  padding:18px 0;
}

.invitation-hero-copy h1{
  font:600 62px/.95 var(--serif);
  margin:10px 0 20px;
  color:var(--deep);
  max-width:760px;
}

.invitation-hero-copy h1 em{
  font-style:normal;
  color:var(--emerald);
}

.invitation-hero-copy>p:not(.eyebrow){
  font-size:16px;
  color:var(--muted);
  max-width:720px;
}


/* ================================
   HERO VISUAL
   ================================ */

.invitation-hero-visual{
  position:relative;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-right:-3vw;
}

.invitation-hero-visual::before{
  content:"";
  position:absolute;
  left:-8%;
  top:0;
  bottom:0;
  width:48%;
  background:linear-gradient(
    90deg,
    var(--ivory) 0%,
    rgba(248,245,238,.9) 28%,
    rgba(248,245,238,0) 100%
  );
  z-index:1;
  pointer-events:none;
}

.invitation-hero-visual img{
  display:block;
  width:100%;
  max-width:760px;
  height:auto;
  object-fit:contain;
  position:relative;
  z-index:0;

  mask-image:linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.08) 12%,
    #000 30%,
    #000 100%
  );

  -webkit-mask-image:linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.08) 12%,
    #000 30%,
    #000 100%
  );
}


/* ================================
   FEATURE GRID
   ================================ */

.invitation-feature-grid{
  align-items:stretch;
}


/* ================================
   FEATURE CARD
   ================================ */

.feature-card-visual{
  padding:0!important;
  overflow:hidden;

  display:grid;

  /*
   * Desktop:
   * kiri  = teks
   * kanan = gambar
   */
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);

  min-height:320px;
}


/* ================================
   FEATURE IMAGE
   ================================ */

.feature-visual{
  grid-column:2;
  grid-row:1;

  width:100%;
  height:100%;
  min-height:320px;

  overflow:hidden;

  background:var(--ivory);

  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;
}

.feature-visual img{
  width:100%;
  height:100%;

  /*
   * JANGAN gunakan cover.
   * Kita ingin seluruh artwork tetap terlihat.
   */
  object-fit:contain;
  object-position:center;

  display:block;

  transition:transform .5s ease;
}

.feature-card-visual:hover .feature-visual img{
  transform:scale(1.025);
}


/* ================================
   FEATURE TEXT
   ================================ */

.feature-copy{
  grid-column:1;
  grid-row:1;

  padding:32px;

  display:flex;
  flex-direction:column;

  align-items:flex-start;
  justify-content:center;

  min-width:0;
}

.feature-copy .feature-icon{
  margin:0 0 12px;
}

.feature-copy h3{
  margin:2px 0 8px;
}

.feature-copy p{
  margin:0;
}


/* ================================
   GOOGLE MAPS VISUAL
   ================================ */

.feature-map-visual{
  grid-column:2;
  grid-row:1;

  display:grid;
  place-items:center;

  background:
    radial-gradient(
      circle at 50% 45%,
      #eef4ef 0,
      #dfeae3 35%,
      #c8d9cf 100%
    );
}

.map-orbit{
  width:150px;
  height:150px;

  border:1px solid rgba(28,96,79,.28);

  border-radius:50%;

  display:grid;
  place-items:center;

  position:relative;
}

.map-orbit:before,
.map-orbit:after{
  content:"";

  position:absolute;

  border:1px solid rgba(190,154,91,.45);

  border-radius:50%;
}

.map-orbit:before{
  inset:18px;
}

.map-orbit:after{
  inset:40px;
}

.map-orbit span{
  width:52px;
  height:52px;

  border-radius:50%;

  display:grid;
  place-items:center;

  background:var(--emerald);

  color:#fff;

  font-size:24px;

  box-shadow:
    0 8px 24px rgba(18,67,54,.2);

  z-index:2;
}


/* ================================
   TABLET
   ================================ */

@media(max-width:900px){

  .invitation-hero-grid{
    grid-template-columns:1fr;
    gap:8px;
  }

  .invitation-hero-copy h1{
    font-size:50px;
  }

  .invitation-hero-visual{
    margin-right:0;
    justify-content:center;
  }

  .invitation-hero-visual img{
    max-width:720px;
  }

  .invitation-feature-grid{
    grid-template-columns:repeat(2,1fr);
  }

}


/* ================================
   MOBILE
   ================================ */

@media(max-width:560px){

  .invitation-page-hero{
    padding:48px 0 40px;
  }

  .invitation-hero-copy h1{
    font-size:40px;
  }

  .invitation-hero-copy>p:not(.eyebrow){
    font-size:14px;
  }

  .invitation-hero-visual{
    margin-top:4px;
  }

  .invitation-hero-visual::before{
    width:60%;
    left:0;
  }

  .invitation-feature-grid{
    grid-template-columns:1fr;
  }


  /*
   * Mobile:
   * teks di atas
   * gambar di bawah
   */
  .feature-card-visual{
    grid-template-columns:1fr;

    min-height:400px;
  }

  .feature-copy{
    grid-column:1;
    grid-row:1;

    padding:28px 24px;

    align-items:flex-start;
    justify-content:center;
  }

  .feature-visual{
    grid-column:1;
    grid-row:2;

    height:220px;
    min-height:220px;
  }

  .feature-map-visual{
    grid-column:1;
    grid-row:2;
  }

}

/* =========================================================
   FINAL LAYOUT OVERRIDES — VISUALS INSIDE THEIR COMPONENTS
   Do not split image cards into separate grid columns.
   ========================================================= */

/* HOME — HERO: image owns the right side, full artwork visible */
.hero-grid{
  grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:0;
  align-items:center;
}
.home-hero-visual{
  position:relative;
  width:calc(100% + 42px);
  margin-right:-42px;
  min-height:0;
  border-radius:26px;
  overflow:hidden;
}
.home-hero-visual img{
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  object-fit:contain;
  object-position:center;
  border-radius:26px;
  box-shadow:none;
}

/* HOME — SERVICES: one card; artwork floats inside it on the right */
.service-card{
  position:relative;
  display:block;
  min-height:360px;
  padding:0!important;
  overflow:hidden;
}
.service-content{
  position:relative;
  z-index:2;
  width:58%;
  min-height:360px;
  padding:34px 30px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}
.service-image{
  position:absolute!important;
  z-index:1;
  top:0;
  right:0;
  bottom:0;
  left:auto;
  width:58%;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  overflow:hidden;
  background:transparent;
}
.service-image::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:0 auto 0 0;
  width:48%;
  height:100%;
  background:linear-gradient(90deg,
    var(--surface) 0%,
    rgba(255,253,248,.92) 20%,
    rgba(255,253,248,.45) 52%,
    rgba(255,253,248,0) 100%
  );
  pointer-events:none;
}
.service-image img{
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  max-width:none!important;
  object-fit:cover;
  object-position:center;
}

/* HOME — CTA: left copy / right buttons */
.cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}
.cta-content{
  flex:1 1 auto;
  width:auto;
}
.cta-banner .actions{
  flex:0 0 auto;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-end;
  margin-top:0;
}

/* INVITATION — feature cards remain ONE card, artwork floats inside */
.invitation-feature-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;
}
.feature-card-visual{
  position:relative;
  display:block!important;
  min-height:320px;
  padding:0!important;
  overflow:hidden;
}
.feature-copy{
  position:relative;
  z-index:3;
  width:58%;
  min-height:320px;
  padding:32px 26px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}
.feature-visual{
  position:absolute!important;
  z-index:1;
  top:0;
  right:0;
  bottom:0;
  left:auto;
  width:58%;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  overflow:hidden;
  display:block;
}
.feature-visual::after{
  content:"";
  position:absolute;
  z-index:2;
  inset:0 auto 0 0;
  width:48%;
  background:linear-gradient(90deg,
    var(--surface) 0%,
    rgba(255,253,248,.92) 22%,
    rgba(255,253,248,.45) 54%,
    rgba(255,253,248,0) 100%
  );
  pointer-events:none;
}
.feature-visual img{
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  object-fit:cover;
  object-position:center;
}
.feature-map-visual{
  display:grid!important;
  place-items:center;
  background:radial-gradient(circle at 50% 45%,#eef4ef 0,#dfeae3 35%,#c8d9cf 100%);
}
.feature-map-visual::after{display:none}

/* Responsive: stack only when the screen is genuinely narrow */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:18px}
  .home-hero-visual{width:100%;margin-right:0}
  .service-card{min-height:340px}
  .service-content{width:60%;min-height:340px}
  .service-image{width:60%!important}
  .feature-copy{width:60%;min-height:300px}
  .feature-visual{width:60%!important}
}
@media(max-width:700px){
  .service-card{min-height:300px}
  .service-content{width:62%;min-height:300px;padding:26px 22px}
  .service-image{width:62%!important}
  .feature-card-visual{min-height:300px}
  .feature-copy{width:62%;min-height:300px;padding:26px 22px}
  .feature-visual{width:62%!important}
}
@media(max-width:560px){
  .home-hero-visual{border-radius:18px}
  .home-hero-visual img{border-radius:18px}
  .service-card{min-height:300px}
  .service-content{width:100%;min-height:300px;padding:28px 24px}
  .service-image{width:72%!important;opacity:.9}
  .feature-card-visual{min-height:300px}
  .feature-copy{width:100%;min-height:300px;padding:28px 24px}
  .feature-visual{width:72%!important}
}

/* =========================================================
   POLISH PASS — INVITATION HERO + FEATURE ARTWORK
   Keep artwork inside components; never split cards into grids.
   ========================================================= */
.invitation-page-hero{position:relative;min-height:520px;display:flex;align-items:center;background:var(--ivory);overflow:hidden}
.invitation-page-hero::after{content:"";position:absolute;z-index:0;top:0;right:0;bottom:0;width:58%;background-image:url("../images/services/undangan-digital.webp");background-repeat:no-repeat;background-position:right center;background-size:contain;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 18%,#000 42%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 18%,#000 42%,#000 100%)}
.invitation-hero-grid{position:relative;z-index:2;width:100%;grid-template-columns:minmax(0,1fr)}
.invitation-hero-copy{max-width:760px}
.invitation-hero-visual{display:none!important}
.invitation-feature-grid{align-items:stretch}
.feature-card-visual{position:relative!important;display:block!important;min-height:250px!important;height:250px;padding:0!important;overflow:hidden!important}
.feature-copy{position:relative;z-index:3;width:54%!important;min-height:250px!important;height:100%;padding:24px 22px!important;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left}
.feature-copy .feature-icon{margin:0 0 12px}.feature-copy h3{margin:4px 0 8px}.feature-copy p{max-width:230px}
.feature-visual{position:absolute!important;z-index:1;top:0!important;right:-2%!important;bottom:0!important;left:auto!important;width:68%!important;height:100%!important;margin:0!important;overflow:hidden!important;display:block!important;background:transparent}
.feature-visual::after{content:"";position:absolute;z-index:2;inset:0 auto 0 0;width:55%;background:linear-gradient(90deg,var(--surface) 0%,rgba(255,253,248,.88) 30%,rgba(255,253,248,.28) 65%,rgba(255,253,248,0) 100%);pointer-events:none}
.feature-visual img{position:absolute!important;z-index:1;top:0!important;right:0!important;bottom:0!important;left:0!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:right center!important;max-width:none!important;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 14%,#000 38%,#000 100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 14%,#000 38%,#000 100%)}
.feature-map-visual{background:transparent!important}.feature-map-visual img{object-fit:cover!important;-webkit-mask-image:none!important;mask-image:none!important}
@media(max-width:900px){.invitation-page-hero{min-height:0;padding:58px 0 36px;display:block}.invitation-page-hero::after{position:relative;display:block;width:100%;height:330px;top:auto;right:auto;bottom:auto;background-position:center;background-size:contain}.invitation-hero-grid{display:block}.invitation-hero-copy{max-width:760px}.invitation-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.invitation-page-hero::after{height:280px}.feature-card-visual{height:230px;min-height:230px!important}.feature-copy{min-height:230px!important;width:58%!important;padding:20px 18px!important}.feature-visual{width:70%!important}.invitation-feature-grid{grid-template-columns:1fr}}


/* =========================================================
   V5.3 — UNIFIED BACKGROUND ART DIRECTION
   Artwork lives inside the section/card as a right-side visual
   layer. No image/content split grids.
   ========================================================= */

/* HOME — HERO: artwork is a background layer of the whole section */
.hero{
  position:relative;
  overflow:hidden;
}
.hero-grid{
  position:relative;
  z-index:2;
  grid-template-columns:minmax(0,1fr);
}
.hero-grid > :first-child{
  position:relative;
  z-index:3;
  max-width:760px;
  padding-left:clamp(32px,4vw,72px);
}
.home-hero-visual{
  display:none!important;
}
.hero::after{
  content:"";
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  bottom:0;
  width:min(68%,980px);
  background:url("../images/hero/home-hero.webp") no-repeat right center / contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 12%,#000 40%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 12%,#000 40%,#000 100%);
  pointer-events:none;
}

/* HOME — SERVICES: one card, right-side background artwork */
.service-card{
  position:relative;
  min-height:300px;
  overflow:hidden;
  padding:0!important;
  isolation:isolate;
}
.service-card::after{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  right:0;
  bottom:0;
  width:68%;
  background-repeat:no-repeat;
  background-position:right center;
  background-size:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 12%,#000 42%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 12%,#000 42%,#000 100%);
  pointer-events:none;
}
.service-card:nth-child(1)::after{background-image:url("../images/services/undangan-digital.webp")}
.service-card:nth-child(2)::after{background-image:url("../images/services/website-professional.webp")}
.service-image{display:none!important}
.service-content{
  position:relative;
  z-index:2;
  width:58%;
  min-height:300px;
  padding:34px 30px!important;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.service-content p{max-width:390px}

/* HOME — keep the remaining small SVG assets as icons/decorative elements */

/* INVITATION — HERO: same background treatment as Home */
.invitation-page-hero{
  position:relative;
  min-height:560px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--ivory);
  padding:64px 0 58px;
}
.invitation-page-hero::after{
  content:"";
  position:absolute;
  z-index:1;
  top:0;
  right:0;
  bottom:0;
  width:min(66%,980px);
  background:url("../images/services/undangan-digital.webp") no-repeat right center / contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 15%,#000 42%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 15%,#000 42%,#000 100%);
  pointer-events:none;
}
.invitation-hero-grid{
  position:relative;
  z-index:2;
  display:block;
  width:100%;
}
.invitation-hero-copy{
  max-width:760px;
  padding-left:clamp(32px,4vw,72px);
}
.invitation-hero-visual{display:none!important}

/* INVITATION — FEATURES: one card + right-side background artwork */
.invitation-feature-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:22px;
}
.feature-card-visual{
  position:relative!important;
  display:block!important;
  height:260px!important;
  min-height:260px!important;
  padding:0!important;
  overflow:hidden!important;
  isolation:isolate;
  text-align:left!important;
}
.feature-card-visual::after{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  right:0;
  bottom:0;
  width:72%;
  background-repeat:no-repeat;
  background-position:right center;
  background-size:contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.05) 12%,#000 42%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.05) 12%,#000 42%,#000 100%);
  pointer-events:none;
}
.feature-card-visual:nth-child(1)::after{background-image:url("../images/undangan/features/countdown.webp")}
.feature-card-visual:nth-child(2)::after{background-image:url("../images/undangan/features/google-maps.webp")}
.feature-card-visual:nth-child(3)::after{background-image:url("../images/undangan/features/gallery.webp")}
.feature-card-visual:nth-child(4)::after{background-image:url("../images/undangan/features/music.webp")}
.feature-card-visual:nth-child(5)::after{background-image:url("../images/undangan/features/rsvp.webp")}
.feature-card-visual:nth-child(6)::after{background-image:url("../images/undangan/features/digital-gift.webp")}
.feature-card-visual .feature-visual{display:none!important}
.feature-copy{
  position:relative!important;
  z-index:2;
  width:62%!important;
  min-height:260px!important;
  padding:28px 26px!important;
  display:flex!important;
  flex-direction:column;
  align-items:flex-start!important;
  justify-content:center;
  text-align:left!important;
}
.feature-copy .feature-icon{margin:0 0 10px!important}
.feature-copy h3{margin:4px 0 8px!important}
.feature-copy p{max-width:220px}

/* Footer ornament remains decorative and never affects layout */
.footer{position:relative;overflow:hidden}

@media(max-width:900px){
  .hero{padding:64px 0 54px}
  .hero-grid{grid-template-columns:1fr}
  .hero-grid > :first-child{padding-left:32px;max-width:680px}
  .hero::after{width:72%;opacity:.82}
  .service-grid{grid-template-columns:1fr}
  .service-card{min-height:290px}
  .service-content{width:60%;min-height:290px}
  .invitation-page-hero{min-height:0;display:block;padding:58px 0 36px}
  .invitation-page-hero::after{width:100%;height:340px;top:auto;bottom:0;background-position:center bottom;background-size:contain;opacity:.95}
  .invitation-hero-copy{padding-left:32px;max-width:720px}
  .invitation-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:560px){
  .hero{padding:52px 0 34px}
  .hero-grid > :first-child{padding-left:24px}
  .hero::after{width:100%;height:330px;top:auto;bottom:0;background-position:center bottom;opacity:.72}
  .service-card{min-height:270px}
  .service-card::after{width:82%;background-size:contain}
  .service-content{width:68%;min-height:270px;padding:26px 22px!important}
  .invitation-page-hero{padding:48px 0 28px}
  .invitation-page-hero::after{height:290px}
  .invitation-hero-copy{padding-left:24px}
  .invitation-feature-grid{grid-template-columns:1fr!important}
  .feature-card-visual{height:250px!important;min-height:250px!important}
  .feature-card-visual::after{width:80%;background-size:contain}
  .feature-copy{width:66%!important;min-height:250px!important;padding:24px 22px!important}
}

/* =========================================================
   V5.4 — MOBILE COMPOSITION PASS
   Mobile keeps the background-art direction but reserves
   dedicated visual space so artwork never collides with copy.
   ========================================================= */
@media (max-width: 700px){
  /* HOME HERO */
  .hero{
    min-height:0;
    padding:48px 0 0;
  }
  .hero-grid{
    display:block;
  }
  .hero-grid > :first-child{
    max-width:none;
    padding:0 24px 300px;
  }
  .hero h1{
    font-size:clamp(38px,10vw,48px);
    line-height:1.02;
    max-width:650px;
  }
  .hero p{
    max-width:620px;
  }
  .hero .actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
  }
  .hero .status-cta{
    position:relative;
    z-index:4;
  }
  .hero::after{
    top:auto;
    right:0;
    bottom:0;
    width:100%;
    height:310px;
    background-size:100% auto;
    background-position:right bottom;
    opacity:.82;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 18%,#000 48%,#000 100%);
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 18%,#000 48%,#000 100%);
  }

  /* HOME SERVICES */
  .service-grid{
    grid-template-columns:1fr!important;
    gap:18px;
  }
  .service-card{
    min-height:270px;
    height:270px;
  }
  .service-content{
    width:70%;
    min-height:270px;
    padding:24px 22px!important;
  }
  .service-content h3{
    font-size:28px;
    line-height:1.08;
  }
  .service-content p{
    max-width:250px;
    font-size:14px;
    line-height:1.55;
  }
  .service-card::after{
    width:78%;
    background-size:contain;
    background-position:right bottom;
    opacity:.88;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 16%,#000 45%,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 16%,#000 45%,#000 100%);
  }

  /* INVITATION HERO */
  .invitation-page-hero{
    min-height:0;
    padding:46px 0 0;
    display:block;
  }
  .invitation-hero-copy{
    max-width:none;
    padding:0 24px 285px;
  }
  .invitation-page-hero h1{
    font-size:clamp(38px,10vw,48px);
    line-height:1.04;
  }
  .invitation-page-hero::after{
    top:auto;
    right:0;
    bottom:0;
    width:100%;
    height:285px;
    background-position:right bottom;
    background-size:100% auto;
    opacity:.95;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.28) 18%,#000 48%,#000 100%);
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.28) 18%,#000 48%,#000 100%);
  }

  /* INVITATION FEATURE CARDS */
  .invitation-feature-grid{
    grid-template-columns:1fr!important;
    gap:16px;
  }
  .feature-card-visual{
    height:235px!important;
    min-height:235px!important;
  }
  .feature-copy{
    width:66%!important;
    min-height:235px!important;
    height:100%!important;
    padding:22px 20px!important;
  }
  .feature-copy h3{
    font-size:27px;
    line-height:1.08;
  }
  .feature-copy p{
    max-width:190px;
    font-size:14px;
    line-height:1.5;
  }
  .feature-card-visual::after{
    width:100%;
    background-size:contain;
    background-position:right center;
  }

  /* Keep the mobile footer and CTA clean */
  .cta-banner{
    min-height:0;
  }
  .cta-inner{
    gap:22px;
  }
}

@media (max-width:420px){
  .hero-grid > :first-child{padding-left:20px;padding-right:20px;padding-bottom:285px}
  .hero h1,.invitation-page-hero h1{font-size:38px}
  .hero .actions,.invitation-page-hero .actions{flex-direction:column;align-items:stretch}
  .hero .actions .btn,.invitation-page-hero .actions .btn{width:100%;}
  .hero::after{height:285px;background-size:108% auto;right:-4%;}
  .invitation-page-hero::after{height:270px;background-size:108% auto;right:-4%;}
  .invitation-hero-copy{padding-left:20px;padding-right:20px;padding-bottom:270px}
  .service-card,.service-content{height:265px;min-height:265px}
  .service-content{width:72%;padding:22px 18px!important}
  .service-content h3{font-size:25px}
  .service-content p{font-size:13px;max-width:190px}
  .feature-card-visual{height:225px!important;min-height:225px!important}
  .feature-copy{width:68%!important;min-height:225px!important;padding:20px 18px!important}
  .feature-copy h3{font-size:25px}
  .feature-copy p{font-size:13px;max-width:175px}
}

/* =========================================================
   V5.5 — HOME RESPONSIVE COMPOSITION
   Final composition pass: no nested image grids, compact mobile rows,
   grouped portfolio, five-step timeline, mobile testimonial carousel.
   ========================================================= */

/* Portfolio: two explicit groups, three projects per row on desktop. */
.portfolio-group + .portfolio-group{margin-top:46px}
.portfolio-group-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 16px}
.portfolio-group-head h3{font:600 30px/1 var(--serif);color:var(--deep);margin:0}
.portfolio-group-head .text-link{white-space:nowrap}
.portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Home services: single card surface + artwork as a background layer. */
.service-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.service-card{display:block;min-height:320px;height:320px;position:relative;overflow:hidden;padding:0!important;isolation:isolate}
.service-content{position:relative;z-index:2;width:100%;height:100%;min-height:0;padding:28px 42% 28px 30px!important;justify-content:center;background:transparent}
.service-content h3,.service-content p,.service-content a,.service-content .feature-icon{position:relative;z-index:3}
.service-content p{max-width:390px}
.service-card::after{top:0;right:0;bottom:0;width:100%;height:100%;background-position:right center;background-size:contain;background-repeat:no-repeat;opacity:1}
.service-card:nth-child(1)::after,.service-card:nth-child(2)::after{mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.05) 12%,rgba(0,0,0,.72) 35%,#000 58%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.05) 12%,rgba(0,0,0,.72) 35%,#000 58%,#000 100%)}

/* Why Malang Digital: compact three-column row on smaller screens. */
.feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}

/* Ordering process: only number + label, connected as one horizontal timeline. */
.steps-grid{position:relative;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;align-items:start}
.steps-grid::before{content:"";position:absolute;left:10%;right:10%;top:20px;height:1px;background:var(--gold);opacity:.55;z-index:0}
.step-card{position:relative;z-index:1;background:transparent;border:0;box-shadow:none;border-radius:0;padding:0 8px;text-align:center}
.step-card .process-icon,.step-card p{display:none!important}
.step-card .step-no{margin:0 auto 12px;width:40px;height:40px;position:relative;z-index:2;border:4px solid var(--ivory)}
.step-card h3{font-size:20px;margin:0;color:var(--deep)}

/* Testimonial desktop remains three cards. Mobile becomes a one-card swipe carousel. */
.testimonial-carousel{position:relative}

@media(max-width:700px){
  /* Hero artwork: centered, never locked to the lower-right corner. */
  .hero-grid > :first-child{padding:0 24px 270px}
  .hero::after{
    width:100%;
    height:300px;
    right:0;
    bottom:0;
    background-position:center bottom;
    background-size:92% auto;
    opacity:.78;
  }

  /* Services: two cards in one row; artwork centered at the bottom. */
  .service-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px}
  .service-card{height:280px;min-height:280px}
  .service-content{width:100%;height:100%;min-height:0;padding:20px 18px 104px!important;justify-content:flex-start;align-items:flex-start}
  .service-content .feature-icon{width:34px;height:34px;margin-bottom:7px}
  .service-content h3{font-size:22px;line-height:1.08;margin:4px 0 7px}
  .service-content p{font-size:11px;line-height:1.45;max-width:100%;margin:0 0 8px}
  .service-content a{font-size:10px}
  .service-card::after{right:0;bottom:0;width:100%;height:100%;background-position:center bottom;background-size:contain;opacity:.82;mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.08) 16%,#000 48%,#000 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.08) 16%,#000 48%,#000 100%)}

  /* Portfolio: each category stays three-up in one horizontal row; swipe on mobile. */
  .portfolio-group + .portfolio-group{margin-top:34px}
  .portfolio-group-head{align-items:flex-end;margin-bottom:12px}
  .portfolio-group-head h3{font-size:23px}
  .portfolio-group-head .text-link{font-size:10px}
  .portfolio-grid{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
  .portfolio-grid::-webkit-scrollbar{display:none}
  .portfolio-grid .project-card{flex:0 0 78%;scroll-snap-align:start}
  .project-thumb{height:150px;font-size:25px}
  .project-body{padding:13px}
  .project-body h3{font-size:20px}

  /* Three feature cards in one compact row. */
  .feature-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
  .feature-card{padding:14px 8px}
  .feature-card .asset-icon{width:58px;height:58px;margin-bottom:4px}
  .feature-card .asset-icon img{width:58px;height:58px}
  .feature-card h3{font-size:17px;line-height:1.05;margin:4px 0 6px}
  .feature-card p{font-size:9px;line-height:1.35;margin:0}

  /* Five ordering steps in one line. */
  .steps-grid{grid-template-columns:repeat(5,minmax(0,1fr));min-width:0;gap:0}
  .steps-grid::before{left:10%;right:10%;top:18px}
  .step-card{padding:0 2px}
  .step-card .step-no{width:36px;height:36px;font-size:9px;margin-bottom:9px}
  .step-card h3{font-size:12px;line-height:1.12;margin:0}

  /* One testimonial card visible at a time, horizontal swipe. */
  .testimonial-carousel{display:flex;gap:14px;overflow-x:auto;overflow-y:hidden;padding:2px 2px 12px;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .testimonial-carousel::-webkit-scrollbar{display:none}
  .testimonial-carousel .testimonial-card{flex:0 0 100%;scroll-snap-align:center}
}

@media(max-width:420px){
  .hero-grid > :first-child{padding-left:20px;padding-right:20px;padding-bottom:255px}
  .hero::after{height:285px;background-size:96% auto;background-position:center bottom;right:0}
  .service-grid{gap:9px}
  .service-card{height:260px;min-height:260px}
  .service-content{padding:17px 14px 92px!important}
  .service-content h3{font-size:19px}
  .service-content p{font-size:10px}
  .service-content a{font-size:9px}
  .service-card::after{height:56%;width:100%}
  .portfolio-group-head h3{font-size:20px}
  .portfolio-group-head .text-link{font-size:9px}
  .portfolio-grid .project-card{flex-basis:82%}
  .project-thumb{height:135px;font-size:22px}
  .project-body h3{font-size:18px}
  .feature-card{padding:12px 6px}
  .feature-card .asset-icon,.feature-card .asset-icon img{width:50px;height:50px}
  .feature-card h3{font-size:15px}
  .feature-card p{font-size:8px}
  .step-card h3{font-size:10px}
  .step-card .step-no{width:32px;height:32px;font-size:8px}
}

/* V5.5.1 — service card background correction */
.service-card{display:block!important;grid-template-columns:none!important;grid-template-rows:none!important}
.service-content{display:flex!important;width:100%!important;box-sizing:border-box!important;background:transparent!important}
.service-image{display:none!important}
@media(max-width:700px){
  .service-content{padding-right:18px!important;padding-bottom:104px!important}
}

/* =========================================================
   V5.5.2 — SERVICE ARTWORK FINAL POLISH
   Desktop: artwork pushed right, copy stays clear, soft horizontal blend.
   Mobile: two cards remain in one row; artwork centered at the bottom.
   ========================================================= */
@media(min-width:701px){
  .service-card{
    height:320px!important;
    min-height:320px!important;
  }
  .service-card::after{
    z-index:0!important;
    top:0!important;
    right:-8%!important;
    bottom:0!important;
    width:76%!important;
    height:100%!important;
    background-position:right center!important;
    background-size:contain!important;
    opacity:1!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .service-card::before{
    content:"";
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
    background:linear-gradient(90deg,
      var(--surface) 0%,
      var(--surface) 31%,
      rgba(255,253,248,.96) 39%,
      rgba(255,253,248,.78) 47%,
      rgba(255,253,248,.30) 58%,
      rgba(255,253,248,0) 70%
    );
  }
  .service-content{
    z-index:2!important;
    width:58%!important;
    height:100%!important;
    min-height:0!important;
    padding:30px 0 30px 30px!important;
    justify-content:center!important;
    box-sizing:border-box!important;
  }
  .service-content p{
    max-width:350px!important;
  }
}

@media(max-width:700px){
  .service-card{
    height:340px!important;
    min-height:340px!important;
  }
  .service-card::before{
    content:"";
    position:absolute;
    z-index:1;
    inset:0;
    pointer-events:none;
    background:linear-gradient(180deg,
      var(--surface) 0%,
      var(--surface) 53%,
      rgba(255,253,248,.90) 64%,
      rgba(255,253,248,.30) 78%,
      rgba(255,253,248,0) 100%
    );
  }
  .service-card::after{
    z-index:0!important;
    top:auto!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    width:100%!important;
    height:190px!important;
    background-position:center bottom!important;
    background-size:contain!important;
    background-repeat:no-repeat!important;
    opacity:.92!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .service-content{
    position:relative!important;
    z-index:2!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    box-sizing:border-box!important;
    padding:20px 16px 145px!important;
    justify-content:flex-start!important;
    align-items:flex-start!important;
  }
  .service-content .feature-icon{
    width:34px!important;
    height:34px!important;
    margin-bottom:7px!important;
  }
  .service-content h3{
    font-size:20px!important;
    line-height:1.08!important;
    margin:4px 0 7px!important;
  }
  .service-content p{
    font-size:10px!important;
    line-height:1.42!important;
    max-width:100%!important;
    margin:0 0 8px!important;
  }
  .service-content a{font-size:9px!important}
}

@media(max-width:420px){
  .service-card{
    height:320px!important;
    min-height:320px!important;
  }
  .service-card::after{height:175px!important}
  .service-content{padding:17px 13px 132px!important}
  .service-content h3{font-size:18px!important}
  .service-content p{font-size:9px!important;line-height:1.4!important}
  .service-content a{font-size:8.5px!important}
}


/* =========================================================
   V5.5.3 — INVITATION FINAL LAYOUT POLISH
   - Hero mobile artwork centered below copy; desktop unchanged.
   - Feature desktop: 2 horizontal cards per row.
   - Feature mobile: 3 compact cards per row with artwork centered above.
   - Template section: 3 cards per row + portfolio link.
   ========================================================= */

/* HERO — desktop remains the approved background composition */
@media (min-width:701px){
  .invitation-page-hero::after{
    background-position:right center;
  }
}

/* FEATURES — DESKTOP: 2 long cards per row */
@media (min-width:701px){
  .invitation-feature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:22px;
  }

  .feature-card-visual{
    height:270px!important;
    min-height:270px!important;
    border-radius:18px;
    background:var(--surface);
  }

  .feature-card-visual::after{
    width:68%;
    top:0;
    right:0;
    bottom:0;
    background-repeat:no-repeat;
    background-position:right center;
    background-size:contain;
    opacity:1;
    -webkit-mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.04) 10%,
      rgba(0,0,0,.55) 27%,
      #000 47%,
      #000 100%);
    mask-image:linear-gradient(90deg,
      transparent 0%,
      rgba(0,0,0,.04) 10%,
      rgba(0,0,0,.55) 27%,
      #000 47%,
      #000 100%);
  }

  .feature-card-visual .feature-copy{
    width:53%!important;
    min-height:270px!important;
    padding:30px 30px!important;
  }

  .feature-copy p{max-width:260px}
}

/* FEATURES — MOBILE: 3 cards per row, artwork centered above content */
@media (max-width:700px){
  .invitation-page-hero{
    padding-bottom:0;
  }

  .invitation-page-hero::after{
    right:0;
    left:0;
    width:100%;
    height:285px;
    background-position:center bottom;
    background-size:88% auto;
  }

  .invitation-hero-copy{
    padding-bottom:285px;
  }

  .invitation-feature-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px;
  }

  .feature-card-visual{
    height:205px!important;
    min-height:205px!important;
    border-radius:15px;
    padding:0!important;
    overflow:hidden!important;
    background:var(--surface);
  }

  /* Remove desktop right-side artwork layer and rebuild it as a circular badge. */
  .feature-card-visual::after{
    top:13px;
    right:50%;
    bottom:auto;
    left:auto;
    transform:translateX(50%);
    width:72px;
    height:72px;
    border-radius:50%;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    border:1px solid rgba(25,91,76,.13);
    background-color:var(--soft);
    box-shadow:0 0 0 6px rgba(255,253,248,.82);
    -webkit-mask-image:none;
    mask-image:none;
  }

  /* Mobile feature artwork uses the existing transparent/keyed assets. */
  .feature-card-visual .feature-copy{
    width:100%!important;
    min-height:205px!important;
    height:100%!important;
    padding:96px 8px 12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    text-align:center!important;
  }

  .feature-copy .feature-icon{
    display:none!important;
  }

  .feature-copy h3{
    font-size:16px!important;
    line-height:1.05!important;
    margin:0 0 6px!important;
  }

  .feature-copy p{
    max-width:100%!important;
    margin:0!important;
    font-size:9px!important;
    line-height:1.35!important;
  }
}

@media (max-width:420px){
  .invitation-feature-grid{gap:8px}
  .feature-card-visual{
    height:195px!important;
    min-height:195px!important;
  }
  .feature-card-visual::after{
    width:64px;
    height:64px;
    top:11px;
  }
  .feature-card-visual .feature-copy{
    min-height:195px!important;
    padding:84px 6px 10px!important;
  }
  .feature-copy h3{font-size:14px!important}
  .feature-copy p{font-size:8px!important}
}

/* TEMPLATE UNGGULAN — same 3-card rhythm on desktop and mobile */
.template-section-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
}

.template-section-heading > div{
  min-width:0;
}

.template-all-link{
  flex:0 0 auto;
  white-space:nowrap;
  color:var(--emerald)!important;
  text-decoration:none;
  font-size:12px;
  font-weight:800;
}

.template-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

@media (max-width:700px){
  .template-section-heading{
    align-items:flex-start;
    gap:10px;
  }
  .template-section-heading h2{
    font-size:30px!important;
  }
  .template-all-link{
    font-size:9px;
    margin-top:8px;
  }
  .template-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px;
  }
  .template-card{border-radius:12px}
  .template-cover{
    height:150px;
    padding:10px;
    font-size:22px;
  }
  .template-cover:before{inset:9px}
  .template-meta{padding:10px}
  .template-meta h3{font-size:17px;line-height:1.05}
  .template-meta p{font-size:8px;line-height:1.35}
  .template-meta small{font-size:7px}
  .demo-link{font-size:8px;margin-top:5px}
}

@media (max-width:420px){
  .template-section-heading h2{font-size:27px!important}
  .template-all-link{font-size:8px}
  .template-cover{height:125px;font-size:18px}
  .template-meta{padding:8px}
  .template-meta h3{font-size:15px}
  .template-meta p{font-size:7px}
  .demo-link{font-size:7px}
}

/* =========================================================
   V5.5.4 — INVITATION TEMPLATE POLISH
   - Compact template cards on desktop + mobile.
   - Smaller inner template frame.
   - "Lihat semua template" is a separate row directly
     above the cards, matching the portfolio rhythm.
   ========================================================= */

/* TEMPLATE HEADING */
.template-section-heading{
  display:block!important;
  text-align:center;
  margin-bottom:0!important;
}

.template-section-heading > div{
  width:100%;
}

.template-section-heading h2{
  margin-bottom:0!important;
}

/* LINK ROW — its own row, immediately above cards */
.template-all-link-wrap{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  width:100%;
  margin:0 0 18px;
}

.template-all-link{
  display:inline-block!important;
  width:auto!important;
  margin:0!important;
  text-align:right;
  color:var(--emerald)!important;
  white-space:nowrap;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}

/* COMPACT TEMPLATE CARDS */
.template-card{
  min-height:0!important;
  height:auto!important;
}

.template-cover{
  height:190px!important;
  min-height:190px!important;
  padding:16px!important;
}

.template-cover:before{
  inset:10px!important;
}

.template-meta{
  padding:14px!important;
  min-height:108px;
  box-sizing:border-box;
}

.template-meta h3{
  margin:3px 0!important;
  line-height:1.05!important;
}

.template-meta p{
  margin:4px 0 0!important;
  line-height:1.35!important;
}

.demo-link{
  margin-top:7px!important;
}

/* MOBILE — keep 3 cards in one row, but make each card compact */
@media(max-width:700px){
  .template-section-heading{
    text-align:center;
  }

  .template-all-link-wrap{
    margin:0 0 10px;
    justify-content:flex-end;
  }

  .template-all-link{
    font-size:9px!important;
  }

  .template-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px;
    margin-top:0!important;
  }

  .template-card{
    border-radius:12px;
  }

  .template-cover{
    height:82px!important;
    min-height:82px!important;
    padding:6px!important;
    font-size:15px!important;
    line-height:.88!important;
  }

  .template-cover:before{
    inset:6px!important;
  }

  .template-meta{
    padding:7px!important;
    min-height:92px;
  }

  .template-meta small{
    font-size:6.5px!important;
  }

  .template-meta h3{
    font-size:13px!important;
    line-height:1.02!important;
    margin:3px 0!important;
  }

  .template-meta p{
    font-size:7px!important;
    line-height:1.25!important;
    margin:3px 0 0!important;
  }

  .demo-link{
    font-size:7px!important;
    margin-top:5px!important;
  }
}

@media(max-width:420px){
  .template-all-link{
    font-size:8px!important;
  }

  .template-cover{
    height:76px!important;
    min-height:76px!important;
    font-size:14px!important;
  }

  .template-cover:before{
    inset:5px!important;
  }

  .template-meta{
    padding:6px!important;
    min-height:86px;
  }

  .template-meta h3{
    font-size:12px!important;
  }

  .template-meta p,
  .demo-link{
    font-size:6.5px!important;
  }
}

/* =========================================================
   V5.5.4 FINAL MICRO POLISH — spacing + compact invitation cards
   ========================================================= */

/* Template heading rhythm: title first, link clearly separated below it. */
.template-section-heading{
  margin-bottom:22px!important;
}

.template-all-link-wrap{
  margin:0 0 18px!important;
}

/* Invitation feature cards: genuinely shorter cards on desktop. */
@media (min-width:701px){
  .invitation-feature-grid{
    gap:18px!important;
  }

  .feature-card-visual{
    height:220px!important;
    min-height:220px!important;
  }

  .feature-card-visual .feature-copy{
    min-height:220px!important;
    padding:24px 26px!important;
  }
}

/* Invitation feature cards: compact 3-up mobile cards. */
@media (max-width:700px){
  .template-section-heading{
    margin-bottom:18px!important;
  }

  .template-all-link-wrap{
    margin:0 0 14px!important;
  }

  .invitation-feature-grid{
    gap:8px!important;
  }

  .feature-card-visual{
    height:170px!important;
    min-height:170px!important;
  }

  .feature-card-visual::after{
    width:58px!important;
    height:58px!important;
    top:10px!important;
  }

  .feature-card-visual .feature-copy{
    min-height:170px!important;
    height:170px!important;
    padding:76px 6px 8px!important;
  }

  .feature-copy h3{
    font-size:14px!important;
    line-height:1.05!important;
    margin:0 0 5px!important;
  }

  .feature-copy p{
    font-size:8px!important;
    line-height:1.3!important;
  }
}

@media (max-width:420px){
  .template-section-heading{
    margin-bottom:16px!important;
  }

  .template-all-link-wrap{
    margin-bottom:12px!important;
  }

  .feature-card-visual{
    height:160px!important;
    min-height:160px!important;
  }

  .feature-card-visual::after{
    width:54px!important;
    height:54px!important;
    top:9px!important;
  }

  .feature-card-visual .feature-copy{
    min-height:160px!important;
    height:160px!important;
    padding:70px 5px 7px!important;
  }
}


/* =========================================================
   PORTFOLIO UNDANGAN — V5.5.5
   Dedicated layout for the invitation portfolio page.
   ========================================================= */
.portfolio-page-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:var(--ivory);
}
.portfolio-page-hero::after{
  content:"";
  position:absolute;
  z-index:0;
  right:-2%;
  bottom:-20%;
  width:min(620px,52vw);
  height:125%;
  background:url("../images/decorative/cta-ornament.svg") no-repeat right center / contain;
  opacity:.16;
  pointer-events:none;
}
.portfolio-page-hero .container{
  position:relative;
  z-index:1;
}

/* Three-column portfolio rhythm on desktop. */
.portfolio-page-hero + .section .template-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:20px;
  align-items:start;
}

/* 9:16 portfolio image area — the image is the visual focus. */
.portfolio-page-hero + .section .template-card{
  min-width:0;
  height:auto!important;
  min-height:0!important;
}
.portfolio-page-hero + .section .template-cover.image-cover{
  width:100%;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:9 / 16;
  padding:0!important;
  display:block;
  overflow:hidden;
  background:var(--surface);
}
.portfolio-page-hero + .section .template-cover.image-cover img{
  width:100%;
  height:100%;
  min-height:0;
  display:block;
  object-fit:cover;
  object-position:center;
}
.portfolio-page-hero + .section .template-meta{
  padding:14px 14px 16px!important;
  min-height:0!important;
}
.portfolio-page-hero + .section .template-meta h3{
  margin:3px 0 2px!important;
  font-size:25px!important;
}
.portfolio-page-hero + .section .template-meta p{
  margin:3px 0 0!important;
  font-size:11px;
  line-height:1.45;
}

/* Detail + Live Demo sit side-by-side, never stacked. */
.portfolio-template-actions{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px!important;
  margin-top:12px!important;
  flex-wrap:nowrap!important;
}
.portfolio-template-actions .btn{
  width:100%;
  min-width:0;
  padding:10px 8px;
  white-space:nowrap;
}

/* Footer botanical artwork. */
.portfolio-footer .footer-ornament{
  display:block;
  position:absolute;
  left:50%;
  bottom:-48px;
  transform:translateX(-50%);
  width:min(920px,82vw);
  height:auto;
  opacity:.14;
  pointer-events:none;
  z-index:1;
}

@media(max-width:700px){
  .portfolio-page-hero{
    padding:48px 0 34px;
  }
  .portfolio-page-hero::after{
    right:-18%;
    bottom:-14%;
    width:78vw;
    height:95%;
    opacity:.13;
  }

  .portfolio-page-hero + .section .template-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }
  .portfolio-page-hero + .section .template-card{
    border-radius:12px;
  }
  .portfolio-page-hero + .section .template-meta{
    padding:8px 7px 9px!important;
  }
  .portfolio-page-hero + .section .template-meta small{
    font-size:6px!important;
  }
  .portfolio-page-hero + .section .template-meta h3{
    font-size:13px!important;
    line-height:1.05!important;
  }
  .portfolio-page-hero + .section .template-meta p{
    font-size:7px!important;
    line-height:1.25!important;
  }
  .portfolio-template-actions{
    gap:5px!important;
    margin-top:8px!important;
  }
  .portfolio-template-actions .btn{
    padding:7px 3px!important;
    border-radius:7px;
    font-size:7px!important;
  }
  .portfolio-footer .footer-ornament{
    width:900px;
    max-width:none;
    bottom:-25px;
    opacity:.12;
  }
}


/* =========================================================
   V5.5.6 — CATALOG + WEBSITE PAGES
   Page-specific final polish. Keeps approved global layouts intact.
   ========================================================= */
.cta-page-hero,
.website-page-hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.cta-page-hero::after{
  content:"";
  position:absolute;
  z-index:0;
  right:-4%;
  top:-18%;
  width:min(620px,52vw);
  height:145%;
  background:url("../images/decorative/cta-ornament.svg") no-repeat right center / contain;
  opacity:.13;
  pointer-events:none;
}
.cta-page-hero .container,
.website-page-hero .container{position:relative;z-index:1}

/* Website service hero: same artwork-in-section mechanism as invitation hero. */
.website-page-hero{
  min-height:520px;
  display:flex;
  align-items:center;
}
.website-page-hero::after{
  content:"";
  position:absolute;
  z-index:0;
  top:0;
  right:0;
  bottom:0;
  width:58%;
  background:url("../images/services/website-professional.webp") no-repeat right center / contain;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 18%,#000 42%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 18%,#000 42%,#000 100%);
}
.website-page-hero .container{max-width:var(--container,1200px);position:relative;z-index:1}
.website-page-hero .container > *{max-width:760px}

.project-highlight-link-wrap{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin:-10px 0 18px;
}
.project-highlight-link-wrap .text-link{white-space:nowrap}

/* Pricing comparison table */
.pricing-comparison{margin-top:30px;overflow-x:auto;border-radius:14px}
.pricing-comparison .price-table{min-width:680px}
.pricing-comparison .price-table td:nth-child(n+2),
.pricing-comparison .price-table th:nth-child(n+2){text-align:center}

/* Botanical footer artwork */
.catalog-footer{position:relative;overflow:hidden}
.catalog-footer .footer-ornament{
  position:absolute;
  left:50%;
  bottom:-48px;
  transform:translateX(-50%);
  width:min(920px,82vw);
  opacity:.14;
  pointer-events:none;
  z-index:1;
}
.catalog-footer .footer-grid,
.catalog-footer .copyright{position:relative;z-index:2}

/* Website portfolio: visual-first cards */
.website-portfolio-page .portfolio-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.website-portfolio-page .project-card{height:auto}
.website-portfolio-page .project-thumb{
  aspect-ratio:16 / 9;
  height:auto;
  padding:0;
  overflow:hidden;
}
.website-portfolio-page .project-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.website-portfolio-page .project-body{padding:14px 15px 16px}
.website-portfolio-page .project-body h3{font-size:25px;margin:4px 0}
.website-portfolio-page .project-body p{font-size:11px;color:var(--muted);line-height:1.45;margin:5px 0 0}
.website-portfolio-page .project-body .actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin-top:12px;
  flex-wrap:nowrap;
}
.website-portfolio-page .project-body .actions .text-link{
  min-width:0;
  padding:10px 8px;
  border:1px solid var(--border);
  border-radius:8px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  background:var(--surface);
}
.website-portfolio-page .project-body .actions .text-link:last-child{
  background:var(--emerald);
  border-color:var(--emerald);
  color:#fff;
}

@media(max-width:800px){
  .website-page-hero::after{
    width:100%;
    height:300px;
    top:auto;
    bottom:0;
    background-position:center bottom;
    background-size:contain;
    opacity:.95;
  }
  .website-page-hero .container{
    padding-bottom:250px;
  }
}

@media(max-width:700px){
  .project-highlight-link-wrap{margin:0 0 12px}
  .project-highlight-link-wrap .text-link{font-size:9px}

  .website-portfolio-page .portfolio-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .website-portfolio-page .project-thumb{aspect-ratio:16 / 9}
  .website-portfolio-page .project-body{padding:9px 8px 10px}
  .website-portfolio-page .project-body span{font-size:7px}
  .website-portfolio-page .project-body h3{font-size:16px;line-height:1.05}
  .website-portfolio-page .project-body p{font-size:8px;line-height:1.3}
  .website-portfolio-page .project-body .actions{gap:5px;margin-top:7px}
  .website-portfolio-page .project-body .actions .text-link{font-size:7px;padding:7px 3px;border-radius:6px}

  .catalog-footer .footer-ornament{width:900px;max-width:none;bottom:-25px;opacity:.12}
}

@media(max-width:560px){
  .cta-page-hero::after{
    right:-16%;
    top:auto;
    bottom:-18%;
    width:82vw;
    height:100%;
    opacity:.11;
  }
  .pricing-comparison .price-table{min-width:620px}
  .website-page-hero .container{padding-bottom:235px}
}

/* Mobile pricing comparison: fit the complete table without horizontal scrolling */
@media (max-width: 560px){
  .pricing-comparison{
    width:100%;
    overflow:visible;
    margin-top:24px;
  }

  .pricing-comparison .price-table{
    width:100%;
    min-width:0;
    table-layout:fixed;
    border-radius:12px;
  }

  .pricing-comparison .price-table th,
  .pricing-comparison .price-table td{
    padding:8px 6px;
    font-size:8px;
    line-height:1.35;
    vertical-align:middle;
    overflow-wrap:anywhere;
    word-break:normal;
  }

  .pricing-comparison .price-table th:first-child,
  .pricing-comparison .price-table td:first-child{
    width:50%;
    text-align:left;
  }

  .pricing-comparison .price-table th:nth-child(2),
  .pricing-comparison .price-table td:nth-child(2),
  .pricing-comparison .price-table th:nth-child(3),
  .pricing-comparison .price-table td:nth-child(3){
    width:25%;
    text-align:center;
  }

  .pricing-comparison .price-table th{
    font-size:8px;
    white-space:normal;
  }
}

/* =========================================================
   CARA PEMESANAN — INFORMATION-RICH EDITORIAL PAGE
   ========================================================= */
.order-page{background:var(--ivory)}
.order-hero{position:relative;overflow:hidden;padding:76px 0 70px;background:linear-gradient(135deg,#faf7ef 0%,#f2ecdf 100%);isolation:isolate}
.order-hero:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 35%,rgba(255,255,255,.95),transparent 34%),radial-gradient(circle at 85% 20%,rgba(184,154,98,.07),transparent 30%);z-index:-2}
.order-hero-ornament{position:absolute;right:-4%;top:-18%;width:54%;height:135%;background:url('../images/decorative/cta-ornament.svg') right center/contain no-repeat;opacity:.20;transform:scale(1.05);z-index:-1;pointer-events:none}
.order-hero-inner{max-width:var(--container);margin-left:auto;margin-right:auto;text-align:left}
.order-hero h1{font:600 clamp(46px,5vw,70px)/.92 var(--serif);color:var(--deep);margin:10px 0 18px}
.order-hero h1 em{font-style:normal;color:var(--emerald)}
.order-hero-inner>p:last-child{max-width:600px;color:var(--muted);font-size:14px;margin:0}
.order-section{padding:70px 0}
.order-section-heading{display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:40px;color:var(--gold)}
.order-section-heading span{font-size:18px;line-height:1;opacity:.85}
.order-section-heading h2{margin:0;color:var(--deep);font:600 28px/1 var(--serif);letter-spacing:.2px;text-align:center}
.process-section{background:var(--surface)}
.order-process{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0}
.order-process:before{content:"";position:absolute;left:8.5%;right:8.5%;top:24px;height:1px;background:var(--gold);opacity:.6}
.order-step{text-align:center;padding:0 12px;position:relative;z-index:1}
.order-step-top{height:112px;position:relative;display:flex;align-items:flex-start;justify-content:center}
.order-step-top img{width:72px;height:72px;object-fit:contain;margin-top:48px;filter:drop-shadow(0 5px 10px rgba(21,63,52,.08))}
.order-number{position:absolute;top:0;left:50%;transform:translateX(-50%);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--emerald);color:#fff;border:4px solid var(--surface);font-size:9px;font-weight:800}
.order-step h3{font:600 20px/1.05 var(--serif);color:var(--deep);margin:14px 0 8px}
.order-step p{font-size:10px;line-height:1.5;color:var(--muted);margin:0 auto;max-width:150px}
.prep-section{background:var(--ivory)}
.prep-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.prep-card{background:var(--surface);border:1px solid var(--border);border-radius:18px;padding:24px 28px;box-shadow:0 14px 35px rgba(21,63,52,.05)}
.prep-title{display:flex;align-items:center;gap:14px;justify-content:center;margin-bottom:24px}
.prep-title>img{width:62px;height:62px;object-fit:contain}
.prep-kicker{margin:0 0 2px;color:var(--gold);font-size:9px;font-weight:800;letter-spacing:1.3px}
.prep-title h3{font:600 25px/1 var(--serif);color:var(--deep);margin:0}
.prep-items{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid #e8e2d6;padding-top:18px}
.prep-items>div{text-align:center;padding:0 10px;border-right:1px solid #e8e2d6}
.prep-items>div:last-child{border-right:0}
.prep-items img{width:48px;height:48px;object-fit:contain;display:block;margin:0 auto 8px}
.prep-items span{font-size:9px;line-height:1.35;color:var(--text)}
.after-section{background:var(--surface)}
.after-process{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:16px;max-width:900px;margin:auto}
.after-process article{text-align:center}.after-process article>div{width:72px;height:72px;border:1px solid rgba(184,154,98,.35);border-radius:50%;display:grid;place-items:center;margin:auto;background:#fffdf8}.after-process img{width:52px;height:52px;object-fit:contain}.after-process h3{font:600 14px/1.05 var(--serif);color:var(--deep);margin:10px 0 0}.after-process i{height:1px;width:100%;background:var(--gold);opacity:.65;position:relative}.after-process i:after{content:"→";position:absolute;right:-4px;top:-12px;color:var(--gold);font-style:normal;font-size:14px}
.faq-section{background:var(--ivory)}
.order-faq{max-width:860px;margin:auto;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--surface)}
.order-faq details+details{border-top:1px solid #e8e2d6}
.order-faq summary{list-style:none;cursor:pointer;padding:15px 18px;font-size:11px;font-weight:600;color:var(--text);display:flex;justify-content:space-between;gap:20px;align-items:center}.order-faq summary::-webkit-details-marker{display:none}.order-faq summary span{color:var(--gold);font-size:14px;transition:transform .2s}.order-faq details[open] summary span{transform:rotate(180deg)}.order-faq details p{margin:0;padding:0 18px 16px;color:var(--muted);font-size:10px;line-height:1.6;max-width:720px}
.order-cta-section{padding:12px 0 76px;background:var(--ivory)}
.order-cta{position:relative;overflow:hidden;background:var(--deep);border-radius:20px;color:#fff;padding:42px 46px;display:flex;align-items:center;justify-content:space-between;gap:28px;isolation:isolate}.order-cta .eyebrow{margin:0 0 8px}.order-cta h2{font:600 38px/.98 var(--serif);margin:0}.order-cta-art{position:absolute;right:-10px;bottom:-55px;width:360px;opacity:.28;z-index:0;pointer-events:none}.order-footer{position:relative;overflow:hidden;margin-top:0}.order-footer-art{position:absolute;right:-40px;bottom:-65px;width:620px;opacity:.20;pointer-events:none;z-index:1}.order-footer .footer-grid,.order-footer .copyright{position:relative;z-index:2}.order-footer-brand{font:600 25px var(--serif);margin:10px 0 0;color:#fff}
@media(max-width:900px){.order-process{grid-template-columns:repeat(3,1fr);row-gap:34px}.order-process:before{display:none}.order-step-top{height:86px}.prep-grid{gap:16px}.prep-card{padding:20px}.after-process{gap:10px}.after-process article>div{width:60px;height:60px}.after-process img{width:44px;height:44px}.order-cta{padding:36px}.order-cta-art{width:300px}}
@media(max-width:700px){
 .order-hero{padding:56px 0 48px}.order-hero-inner{padding:0 12px;max-width:none;margin:0}.order-hero-ornament{width:90%;right:-18%;top:5%;opacity:.14}.order-hero h1{font-size:43px;max-width:360px}.order-hero-inner>p:last-child{font-size:12px;max-width:340px}
 .order-section{padding:52px 0}.order-section-heading{margin-bottom:28px;gap:9px}.order-section-heading h2{font-size:23px}.order-section-heading span{font-size:14px}
 .order-process{grid-template-columns:repeat(3,1fr);gap:34px 4px}.order-step{padding:0 3px}.order-step-top{height:94px}.order-step-top img{width:58px;height:58px;margin-top:40px}.order-number{width:32px;height:32px;font-size:8px;border-width:3px}.order-step h3{font-size:17px;margin:12px 0 5px}.order-step p{font-size:9px;line-height:1.4;max-width:105px}
 .prep-grid{grid-template-columns:1fr;gap:14px}.prep-card{border-radius:16px;padding:17px 14px}.prep-title{justify-content:flex-start;margin-bottom:16px}.prep-title>img{width:50px;height:50px}.prep-title h3{font-size:22px}.prep-items{padding-top:14px}.prep-items>div{padding:0 4px}.prep-items img{width:38px;height:38px;margin-bottom:5px}.prep-items span{font-size:8px}
 .after-process{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;max-width:none}.after-process i{display:none}.after-process article>div{width:52px;height:52px}.after-process img{width:38px;height:38px}.after-process h3{font-size:11px;margin-top:7px}
 .order-faq summary{font-size:10px;padding:14px}.order-faq details p{font-size:9px;padding:0 14px 14px}.order-cta-section{padding-bottom:58px}.order-cta{display:block;padding:30px 24px;border-radius:18px}.order-cta h2{font-size:31px}.order-cta .btn{margin-top:20px;width:auto}.order-cta-art{width:280px;right:-80px;bottom:-25px;z-index:0}.order-footer-art{width:440px;right:-100px;bottom:-45px}.order-footer .footer-grid{grid-template-columns:1fr 1fr}.order-footer-brand{font-size:22px}
}
@media(max-width:430px){.order-process{gap:30px 0}.order-step h3{font-size:15px;margin-top:12px}.order-step p{font-size:8px}.order-step-top{height:90px}.order-step-top img{width:52px;height:52px;margin-top:38px}.prep-items span{font-size:7.5px}.after-process article>div{width:46px;height:46px}.after-process img{width:34px;height:34px}.after-process h3{font-size:9px}.order-cta h2{font-size:28px}}


/* =========================================================
   FINAL QA PASS — CONSISTENT HERO / ORNAMENT / FOOTER / HIGHLIGHTS
   ========================================================= */
.feature-icon img{width:24px;height:24px;object-fit:contain;display:block}
.home-portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.home-portfolio-grid .image-thumb{padding:0;overflow:hidden;background:var(--surface)}
.home-portfolio-grid .image-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.empty-catalog{grid-column:1/-1;font-size:12px;color:var(--muted);padding:18px 0}
.home-strength-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:0}
.home-order-process{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px}
.home-order-process .order-step{min-width:0}
.cta-page-hero{position:relative;overflow:hidden;isolation:isolate}
.cta-page-hero .container{position:relative;z-index:2;padding-left:clamp(32px,4vw,72px)}
.cta-hero-ornament{position:absolute;z-index:1;right:-70px;top:-30px;width:min(620px,52vw);height:auto;opacity:.30;pointer-events:none}
.footer-ornament{width:min(1180px,96vw)!important;max-width:none!important;bottom:-70px!important;opacity:.16!important}
/* Match the approved invitation hero typography/offset on information and about pages */
.about-hero-copy{padding-left:clamp(32px,4vw,72px)}
.about-hero h1{font-family:var(--serif);font-size:clamp(50px,5.2vw,72px);line-height:.95}
@media(max-width:900px){
 .home-strength-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .home-order-process{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cta-hero-ornament{width:520px;right:-110px;top:-20px}
 .about-hero-copy{padding-left:32px}
 .about-service-content{width:100%;padding-bottom:190px}
 .about-service-art{top:auto;bottom:0;left:0;right:0;width:100%;height:190px;background-size:contain;background-position:center bottom;mask-image:linear-gradient(0deg,#000 0%,#000 62%,transparent 100%);-webkit-mask-image:linear-gradient(0deg,#000 0%,#000 62%,transparent 100%)}
}
@media(max-width:560px){
 .home-portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .home-portfolio-grid .project-body{padding:10px}
 .home-portfolio-grid .project-body h3{font-size:18px}
 .home-portfolio-grid .project-body span{font-size:8px}
 .home-portfolio-grid .project-thumb{height:170px}
 .home-strength-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .home-order-process{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .cta-page-hero .container{padding-left:24px;padding-right:24px}
 .cta-hero-ornament{width:390px;right:-115px;top:20px;opacity:.22}
 .footer-ornament{width:1000px!important;bottom:-45px!important}
 .about-hero-copy{padding-left:24px;padding-right:24px}
 .about-service-content{padding-bottom:170px}
 .about-service-art{height:170px}
}

/* Information / ordering page ornament normalization */
.info-footer{position:relative;overflow:hidden}
.info-footer-art{position:absolute;left:50%;bottom:-70px;transform:translateX(-50%);width:min(1180px,96vw)!important;max-width:none!important;opacity:.16!important;pointer-events:none;z-index:1}
.info-footer .footer-grid,.info-footer .copyright{position:relative;z-index:2}
.order-cta-art{width:500px!important;right:-20px;bottom:-70px;opacity:.28}
.order-footer-art{left:50%;right:auto;transform:translateX(-50%);bottom:-70px;width:min(1180px,96vw)!important;max-width:none!important;opacity:.16!important}
.order-footer .footer-grid,.order-footer .copyright{position:relative;z-index:2}
.about-footer .footer-grid,.about-footer .copyright{position:relative;z-index:2}
.about-footer .footer-ornament{width:min(1180px,96vw)!important;max-width:none!important;bottom:-70px!important;opacity:.16!important}
@media(max-width:560px){
 .info-footer-art,.order-footer-art,.about-footer .footer-ornament{width:1000px!important;bottom:-45px!important}
 .order-cta-art{width:380px!important;right:-90px;bottom:-35px}
}
.info-hero-copy{padding-left:clamp(32px,4vw,72px)}
@media(max-width:560px){.info-hero-copy{padding-left:24px;padding-right:24px}.info-hero h1{font-size:48px}}

/* FINAL QA FIX — align text blocks exactly to the approved invitation hero */
.hero-grid > :first-child,
.invitation-hero-copy,
.about-hero-copy,
.info-hero-copy{
  padding-left:clamp(32px,4vw,72px)!important;
}

@media(max-width:560px){
  .hero-grid > :first-child,
  .invitation-hero-copy,
  .about-hero-copy,
  .info-hero-copy{
    padding-left:24px!important;
    padding-right:24px!important;
  }

  /* Tentang Kami — mobile: content first, artwork below it. */
  .about-service-card{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
    height:auto!important;
  }
  .about-service-content{
    order:1!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    padding:28px 24px 30px!important;
  }
  .about-service-art{
    order:2!important;
    position:relative!important;
    inset:auto!important;
    width:100%!important;
    height:190px!important;
    flex:0 0 190px!important;
    background-size:cover!important;
    background-position:center center!important;
    mask-image:none!important;
    -webkit-mask-image:none!important;
  }
}
/* FINAL QA FIX — match Beranda "Kenapa Malang Digital" to Tentang Kami */
.home-strength-grid{margin-top:50px!important}
@media(max-width:560px){.home-strength-grid{margin-top:34px!important}}


/* FINAL QA FIX v5.5.10 — only the requested hero alignment + info hero width. */
.hero-grid > :first-child{
  padding-left:clamp(0px,1.8vw,24px)!important;
  max-width:760px!important;
}
.hero-grid > :first-child h1{max-width:620px!important}

/* The information hero copy was centered because max-width:900px on a .container
   also centered the whole container. Keep the full site container and align copy
   from the same left edge as the approved invitation hero. */
.info-hero-copy{
  width:min(var(--container),calc(100% - 36px))!important;
  max-width:none!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:clamp(0px,1.8vw,24px)!important;
}
.info-hero-copy h1{max-width:760px!important}
.info-hero-copy p:last-child{max-width:620px!important}
@media(max-width:560px){
  .hero-grid > :first-child{padding-left:0!important;padding-right:24px!important}
  .info-hero-copy{width:calc(100% - 24px)!important;padding-left:0!important;padding-right:24px!important}
}

/* HOME FINAL FIX — strength cards must remain visible as four real cards */
.home-strength-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.home-strength-grid .about-strength-card{display:block!important;visibility:visible!important;opacity:1!important;min-height:210px}
@media(max-width:900px){.home-strength-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.home-strength-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.home-strength-grid .about-strength-card{min-height:180px;padding:20px 16px}.home-strength-grid .about-strength-card h3{font-size:22px;margin-top:20px}.home-strength-grid .about-strength-card p{font-size:11px}}


/* =========================================================
   V5.5.12 — HOME HIGHLIGHT CARD POLISH
   - Home strength cards use the approved emerald frame.
   - Invitation highlights use 3:4 artwork, description, detail link.
   - Website highlights use 16:9 artwork, description, detail link.
   - Mobile invitation highlights remain 3-up; website highlights become
     a single-card horizontal swipe.
   ========================================================= */
.home-strength-grid .about-strength-card{
  border:1px solid var(--emerald)!important;
  box-shadow:0 4px 16px rgba(21,63,52,.07);
}

/* Home invitation highlights */
.home-invitation-card{
  min-width:0;
  height:auto!important;
  min-height:0!important;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow);
}
.home-invitation-card .template-cover.image-cover{
  width:100%;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:3 / 4;
  padding:0!important;
  display:block;
  overflow:hidden;
  background:var(--surface);
}
.home-invitation-card .template-cover.image-cover img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.home-invitation-card .template-meta{
  padding:14px 14px 16px!important;
  min-height:0!important;
}
.home-invitation-card .template-meta h3{
  font-size:24px!important;
  line-height:1.05!important;
  margin:4px 0 3px!important;
}
.home-invitation-card .template-meta p{
  font-size:11px;
  line-height:1.45;
  margin:4px 0 0;
  color:var(--muted);
}
.home-invitation-card .demo-link{
  display:inline-flex;
  margin-top:9px!important;
  color:var(--emerald);
  font-size:10px;
  font-weight:800;
  text-decoration:none;
}

/* Home + Website-professional website highlights */
.home-website-card{
  min-width:0;
  height:auto!important;
}
.home-website-card .project-thumb.image-thumb{
  width:100%;
  height:auto!important;
  aspect-ratio:16 / 9;
  padding:0!important;
  overflow:hidden;
  background:var(--surface);
}
.home-website-card .project-thumb.image-thumb img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}
.home-website-card .project-body{
  padding:14px 15px 16px;
}
.home-website-card .project-body h3{
  margin:4px 0 3px;
}
.home-website-card .project-body p{
  margin:4px 0 0;
  font-size:11px;
  line-height:1.45;
  color:var(--muted);
}
.home-website-card .project-body .text-link{
  display:inline-block;
  margin-top:9px;
  color:var(--emerald);
}

/* Invitation page + home invitation highlights: 3:4 visual cards. */
#home-invitation-templates .template-cover.image-cover{
  width:100%;
  height:auto!important;
  min-height:0!important;
  aspect-ratio:3 / 4;
  padding:0!important;
  display:block;
  overflow:hidden;
}
#home-invitation-templates .template-cover.image-cover img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
}

@media(max-width:700px){
  /* Home invitation: three compact cards remain in one visible row. */
  #home-invitation-portfolio{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    overflow:visible!important;
    padding:2px 0 8px!important;
    scroll-snap-type:none!important;
  }
  #home-invitation-portfolio .home-invitation-card{
    flex:none!important;
    width:auto!important;
  }

  /* Invitation page: three cards remain in one row on mobile. */
  #home-invitation-templates{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
  }
  #home-invitation-templates .template-card{
    min-width:0;
  }

  .home-invitation-card .template-meta{
    padding:8px 7px 10px!important;
  }
  .home-invitation-card .template-meta small{
    font-size:6px!important;
  }
  .home-invitation-card .template-meta h3{
    font-size:13px!important;
    line-height:1.05!important;
  }
  .home-invitation-card .template-meta p{
    font-size:7px!important;
    line-height:1.28!important;
    margin-top:3px;
  }
  .home-invitation-card .demo-link{
    font-size:7px!important;
    margin-top:6px!important;
  }

  /* Website highlights: one card visible, swipe horizontally. */
  .home-website-card{
    flex:0 0 82%;
    scroll-snap-align:start;
  }
  #home-website-portfolio,
  #home-website-projects{
    display:flex!important;
    grid-template-columns:none!important;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 2px 10px;
    scroll-snap-type:x mandatory;
    scrollbar-width:none;
    overscroll-behavior-x:contain;
  }
  #home-website-portfolio::-webkit-scrollbar,
  #home-website-projects::-webkit-scrollbar{
    display:none;
  }
  .home-website-card .project-body{
    padding:10px 11px 12px;
  }
  .home-website-card .project-body span{
    font-size:7px;
  }
  .home-website-card .project-body h3{
    font-size:19px;
    line-height:1.05;
  }
  .home-website-card .project-body p{
    font-size:8px;
    line-height:1.35;
  }
  .home-website-card .project-body .text-link{
    font-size:8px;
    margin-top:7px;
  }
}

@media(max-width:420px){
  .home-invitation-card .template-meta h3{font-size:12px!important}
  .home-invitation-card .template-meta p,
  .home-invitation-card .demo-link{font-size:6.5px!important}
  .home-website-card{flex-basis:86%}
}

/* V5.5.14 — HOME: match Kenapa Malang Digital cards to Tentang Kami */
.home-strength-grid .about-strength-card{
  border:1px solid #ded9cd!important;
  border-radius:20px!important;
  padding:28px 24px!important;
  background:#fffdf8!important;
  min-height:210px!important;
  box-shadow:none!important;
}
.home-strength-grid .about-strength-card span{
  font:700 12px DM Sans,sans-serif!important;
  color:#b89a62!important;
  letter-spacing:.1em!important;
}
.home-strength-grid .about-strength-card h3{
  font:600 28px/1.1 "Cormorant Garamond",serif!important;
  color:#153f34!important;
  margin:28px 0 10px!important;
}
.home-strength-grid .about-strength-card p{
  font-size:14px!important;
  line-height:1.65!important;
  color:#6f756f!important;
  margin:0!important;
}
@media(max-width:900px){
  .home-strength-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}
}
@media(max-width:560px){
  .home-strength-grid{grid-template-columns:1fr 1fr!important;gap:10px!important;margin-top:34px!important}
  .home-strength-grid .about-strength-card{padding:22px 17px!important;min-height:190px!important}
  .home-strength-grid .about-strength-card h3{font-size:24px!important;margin-top:22px!important}
  .home-strength-grid .about-strength-card p{font-size:13px!important}
}


/* =========================================================
   WEBSITE PROFESSIONAL — SERVICE ILLUSTRATIONS
   Four visual service cards, matching the invitation feature-card language.
   ========================================================= */
.website-service-feature-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}

.website-service-card{
  padding:0!important;
  overflow:hidden;
  min-height:320px;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
}

.website-service-card .feature-visual{
  grid-column:2;
  grid-row:1;
  min-height:320px;
  background:var(--surface);
}

.website-service-card .feature-copy{
  grid-column:1;
  grid-row:1;
  padding:32px;
}

.website-service-card .feature-copy h3{
  margin:0 0 8px;
}

.website-service-card .feature-copy p{
  margin:0;
  font-size:12px;
  line-height:1.6;
}

.website-service-card .feature-visual img{
  object-fit:contain;
  object-position:center;
}

@media(max-width:900px){
  .website-service-feature-grid{
    grid-template-columns:1fr;
  }
}

@media(max-width:560px){
  .website-service-card{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    min-height:0;
  }

  .website-service-card .feature-copy{
    grid-column:1;
    grid-row:1;
    padding:28px 24px;
  }

  .website-service-card .feature-visual{
    grid-column:1;
    grid-row:2;
    height:220px;
    min-height:220px;
  }
}

/* =========================================================
   WEBSITE PROFESSIONAL — SERVICE CARDS FINAL MOBILE FIX
   Uses the dedicated website-service WebP artwork.
   Mobile: exactly 2 cards per row, artwork above text.
   ========================================================= */
.website-service-card .feature-visual img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}

@media (max-width:900px){
  .website-service-feature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:14px!important;
  }

  .website-service-card{
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:150px auto!important;
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    border-radius:16px!important;
    overflow:hidden!important;
  }

  .website-service-card .feature-visual{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:150px!important;
    min-height:150px!important;
    background:var(--surface)!important;
  }

  .website-service-card .feature-copy{
    grid-column:1!important;
    grid-row:2!important;
    width:100%!important;
    min-height:108px!important;
    height:auto!important;
    padding:14px 12px 16px!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    text-align:left!important;
    box-sizing:border-box!important;
  }

  .website-service-card .feature-copy h3{
    font-size:19px!important;
    line-height:1.08!important;
    margin:0 0 6px!important;
  }

  .website-service-card .feature-copy p{
    font-size:9px!important;
    line-height:1.4!important;
    margin:0!important;
  }
}

@media (max-width:420px){
  .website-service-feature-grid{gap:9px!important}
  .website-service-card{
    grid-template-rows:125px auto!important;
  }
  .website-service-card .feature-visual{
    height:125px!important;
    min-height:125px!important;
  }
  .website-service-card .feature-copy{
    min-height:100px!important;
    padding:12px 10px 13px!important;
  }
  .website-service-card .feature-copy h3{font-size:17px!important}
  .website-service-card .feature-copy p{font-size:8px!important}
}


/* FINAL FIX — WEBSITE SERVICE CARDS MUST USE THEIR OWN ARTWORK */
.website-service-card::after{
  display:none!important;
  background-image:none!important;
}
.website-service-card .feature-visual{
  display:block!important;
  visibility:visible!important;
}
.website-service-card .feature-visual img{
  display:block!important;
  visibility:visible!important;
}

@media (max-width:900px){
  .website-service-feature-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .website-service-card{
    grid-template-columns:1fr!important;
    grid-template-rows:150px auto!important;
  }
  .website-service-card .feature-visual{
    grid-column:1!important;
    grid-row:1!important;
    width:100%!important;
    height:150px!important;
    min-height:150px!important;
  }
  .website-service-card .feature-copy{
    grid-column:1!important;
    grid-row:2!important;
  }
}
@media (max-width:420px){
  .website-service-feature-grid{gap:9px!important}
  .website-service-card{grid-template-rows:125px auto!important}
  .website-service-card .feature-visual{height:125px!important;min-height:125px!important}
}


/* =========================================================
   FOOTER SOCIAL LINKS — FINAL
   Desktop: text links. Mobile: 2-column footer + centered icons.
   ========================================================= */
.footer-grid{grid-template-columns:1.7fr repeat(5,minmax(0,1fr));}
.footer-social-links{display:flex;flex-direction:column;gap:0}
.footer-social-links a{margin:6px 0!important}
.footer-social .social-icon{display:none}
.footer-social-links a:hover{color:#d0ad68!important}
@media(max-width:900px){
 .footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:30px 24px!important}
 .footer-grid>div:first-child{grid-column:1 / -1}
 .footer-social{grid-column:1 / -1;text-align:center;padding-top:6px}
 .footer-social h4{margin-bottom:16px}
 .footer-social-links{flex-direction:row;justify-content:center;align-items:center;gap:22px}
 .footer-social-links a{margin:0!important;display:flex!important;align-items:center;justify-content:center}
 .footer-social-links .social-name{display:none}
 .footer-social .social-icon{display:block;width:25px;height:25px;color:#dce5de;transition:color .2s ease,transform .2s ease}
 .footer-social-links a:hover .social-icon{color:#d0ad68;transform:translateY(-2px)}
}
@media(max-width:430px){
 .footer-grid{gap:28px 18px!important}
 .footer-social-links{gap:24px}
 .footer-social .social-icon{width:24px;height:24px}
}

/* Custom social artwork supplied by Malang Digital */
.footer-social .social-icon{width:25px;height:25px;object-fit:contain;display:none}
@media(max-width:900px){
 .footer-social .social-icon{display:block;width:28px;height:28px;object-fit:contain;transition:transform .2s ease,opacity .2s ease}
 .footer-social-links a:hover .social-icon{transform:translateY(-2px);opacity:.9}
}
@media(max-width:430px){
 .footer-social .social-icon{width:26px;height:26px}
}

/* =========================================================
   BRAND / HEADER REFINEMENT — 2026-08-16
   ========================================================= */
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;flex:0 0 auto}
.brand-mark{width:58px;height:58px;border-radius:0!important;object-fit:contain;mix-blend-mode:multiply}
.brand-copy{display:flex;flex-direction:column;justify-content:center;gap:1px;min-width:150px}
.brand-wordmark{display:block;width:172px;height:auto;max-height:34px;object-fit:contain;object-position:left center;mix-blend-mode:multiply}
.brand-tagline{display:block;font-size:10px;line-height:1.25;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.main-nav{margin-left:auto;flex:0 0 auto!important;gap:22px}
.nav-parent{gap:7px}
.nav-parent .dropdown-chevron{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);display:inline-block;transition:transform .18s ease}
.nav-dropdown:hover .dropdown-chevron,.nav-dropdown:focus-within .dropdown-chevron{transform:rotate(225deg) translate(-1px,-1px)}
.footer-logo{width:190px!important;height:auto!important;border-radius:0!important;object-fit:contain;object-position:left center;mix-blend-mode:normal}
@media(max-width:1050px){
 .nav{gap:16px}
 .brand-copy{min-width:125px}
 .brand-wordmark{width:145px}
 .brand-tagline{font-size:7px}
 .main-nav{gap:14px}
}
@media(max-width:800px){
 .brand{gap:8px}
 .brand-mark{width:48px;height:48px}
 .brand-copy{min-width:0}
 .brand-wordmark{width:128px;max-height:26px}
 .brand-tagline{font-size:6px;letter-spacing:.06em}
 .mobile-toggle{margin-left:auto}
}
@media(max-width:560px){
 .brand-mark{width:44px;height:44px}
 .brand-wordmark{width:116px;max-height:24px}
 .brand-tagline{font-size:5.5px}
 .footer-logo{width:170px!important}
}

/* BRANDING FINAL FIX: transparent PNG assets, never crop/shrink the wordmark */
.brand-copy{flex:0 0 auto!important;overflow:visible!important}
.brand-wordmark{flex:0 0 auto!important;width:220px!important;height:auto!important;max-height:none!important;object-fit:contain!important;object-position:left center!important;display:block!important}
.brand-mark{flex:0 0 58px!important;width:58px!important;height:58px!important;object-fit:contain!important;border-radius:0!important}
@media(max-width:1050px){
  .brand-wordmark{width:167px!important}
}
@media(max-width:800px){
  .brand-mark{flex-basis:48px!important;width:48px!important;height:48px!important}
  .brand-wordmark{width:147px!important}
}
@media(max-width:560px){
  .brand-mark{flex-basis:44px!important;width:44px!important;height:44px!important}
  .brand-wordmark{width:133px!important}
}