/* ============================================================
   Horana Ceiling & Gutter Works — Premium Site Stylesheet
   Design tokens preserved from brand: deep architectural blue
   + warm near-white paper background + WhatsApp green accent.
   ============================================================ */

:root{
  /* ---- brand palette (derived from the original site's tokens) ---- */
  --bg:            #f9fcff;
  --bg-soft:       #eef4fb;
  --panel:         #ffffff;
  --panel-2:       #eaf1fa;
  --ink:           #0f1a2f;
  --ink-soft:      #4e5969;
  --line:          rgba(15, 26, 47, .12);
  --line-soft:     rgba(15, 26, 47, .07);

  --primary:       #14509e;
  --primary-2:     #0c3a78;
  --primary-deep:  #081f42;
  --primary-tint:  #e7f0fc;
  --primary-ring:  rgba(20, 80, 158, .35);

  --whatsapp:      #0aab55;
  --whatsapp-2:    #078a44;

  --radius-lg: 1.25rem;
  --radius-md: .85rem;
  --radius-sm: .5rem;

  --shadow-sm: 0 1px 2px rgba(15,26,47,.06), 0 1px 1px rgba(15,26,47,.04);
  --shadow-md: 0 12px 30px -12px rgba(8,31,66,.28);
  --shadow-lg: 0 30px 70px -20px rgba(8,31,66,.35);

  --ease: cubic-bezier(.16,.84,.24,1);
  --dur-s: 220ms;
  --dur-m: 480ms;
  --dur-l: 720ms;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --nav-h: 84px;
}

/* ---------------------------- reset ---------------------------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd{ margin:0; }
ul, ol{ margin:0; padding:0; list-style:none; }
img{ max-width:100%; display:block; }
button, input, select, textarea{ font: inherit; color: inherit; }
button{ cursor:pointer; background:none; border:none; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline: 2.5px solid var(--primary); outline-offset: 3px; border-radius: 4px; }

body{
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.container{
  width: 100%;
  max-width: 1220px;
  margin-inline: auto;
  padding-inline: 24px;
}

h1, h2, h3{ font-family: var(--font-display); line-height: 1.1; letter-spacing: -.01em; color: var(--ink); }

.eyebrow{
  font-size: .82rem;
  font-weight: 600;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.eyebrow::before{
  content: "";
  width: 26px; height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

.accent{ color: var(--primary); font-style: italic; }

section.section{ padding: 96px 0; position: relative; }
@media (max-width: 640px){ section.section{ padding: 64px 0; } }

.section-head{ max-width: 640px; margin-bottom: 48px; }
.section-head h2{ font-size: clamp(1.9rem, 3.4vw, 2.75rem); margin-top: .6rem; }
.section-head p{ color: var(--ink-soft); margin-top: 14px; font-size: 1.05rem; }
.section-head.center{ margin-inline: auto; text-align: center; }
.section-head.center .eyebrow{ justify-content: center; }
.section-head.center .eyebrow::before{ display:none; }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------- buttons ---------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding: .95rem 1.7rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .96rem;
  white-space: nowrap;
  transition: transform var(--dur-s) var(--ease), box-shadow var(--dur-s) var(--ease), background var(--dur-s) var(--ease);
  position: relative;
  isolation: isolate;
}
.btn svg{ width: 18px; height: 18px; flex-shrink:0; }
.btn-primary{
  background: linear-gradient(155deg, var(--primary), var(--primary-2));
  color:#fff;
  box-shadow: 0 14px 30px -10px var(--primary-ring), inset 0 1px 0 rgba(255,255,255,.18);
}
.btn-primary::after{
  content:"";
  position:absolute; inset:0; border-radius:999px;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .7s var(--ease);
  z-index:-1;
}
.btn-primary:hover::after{ transform: translateX(120%); }
.btn-primary:hover{ transform: translateY(-3px) scale(1.015); box-shadow: 0 20px 38px -12px var(--primary-ring); }
.btn-primary:active{ transform: translateY(-1px) scale(.99); }

.btn-outline{
  border: 1.5px solid rgba(255,255,255,.55);
  color:#fff; background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}
.btn-outline:hover{ background: rgba(255,255,255,.16); transform: translateY(-3px); border-color: rgba(255,255,255,.85); }

.btn-ghost{ border: 1.5px solid var(--line); color: var(--ink); }
.btn-ghost:hover{ background: var(--panel-2); transform: translateY(-2px); }

.btn-wa{
  background: linear-gradient(155deg, var(--whatsapp), var(--whatsapp-2));
  color:#fff;
  box-shadow: 0 14px 26px -10px rgba(10,171,85,.45), inset 0 1px 0 rgba(255,255,255,.2);
}
.btn-wa:hover{ transform: translateY(-3px) scale(1.015); box-shadow: 0 20px 34px -10px rgba(10,171,85,.5); }
.btn-wa:active, .btn-primary:active{ transform: translateY(0) scale(.98); }

.btn-call{ background: var(--panel); color: var(--primary); border: 1.5px solid var(--line); }
.btn-call:hover{ background: var(--primary-tint); transform: translateY(-2px); }

.btn-block{ width:100%; }
.btn-lg{ padding: 1.1rem 2.1rem; font-size: 1.02rem; }

/* ---------------------------- navigation ---------------------------- */
.site-nav{
  position: fixed; inset-inline:0; top:0; z-index: 200;
  height: var(--nav-h);
  display:flex; align-items:center;
  transition: height var(--dur-m) var(--ease), background var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.site-nav .nav-inner{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap: 1.5rem;
}
.site-nav.scrolled{
  height: 68px;
  background: rgba(249,252,255,.82);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 8px 30px -16px rgba(8,31,66,.25);
  border-bottom: 1px solid var(--line-soft);
}
.brand{ display:flex; align-items:center; gap:.7rem; }
.brand-mark{
  width: 42px; height:42px; border-radius: 12px; flex-shrink:0;
  display:grid; place-items:center;
  background: linear-gradient(155deg, var(--primary), var(--primary-2));
  color:#fff; box-shadow: var(--shadow-sm);
}
.brand-mark svg{ width: 24px; height:24px; }
.brand-text b{ display:block; font-family: var(--font-display); font-size: 1.08rem; line-height:1.1; color: var(--ink); }
.site-nav.scrolled .brand-text b{ color: var(--ink); }
.hero-nav-phase .brand-text b, .hero-nav-phase .brand-text small{ color:#fff; }
.brand-text small{ font-size: .66rem; letter-spacing: .14em; color: var(--ink-soft); font-weight:600; }

.nav-links{ display:flex; align-items:center; gap: 2.1rem; }
.nav-links a{
  font-size: .93rem; font-weight: 600; color: var(--ink-soft);
  position:relative; padding-block: 4px;
}
.hero-nav-phase .nav-links a{ color: rgba(255,255,255,.86); }
.nav-links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: var(--primary); border-radius:2px;
  transition: right var(--dur-s) var(--ease);
}
.hero-nav-phase .nav-links a::after{ background:#fff; }
.nav-links a:hover::after, .nav-links a.active::after{ right:0; }
.nav-cta{ display:flex; align-items:center; gap: .7rem; }

.nav-lang{
  border:1.5px solid var(--line); border-radius:999px; padding:.4rem .85rem;
  font-size:.78rem; font-weight:700; letter-spacing:.03em; color: var(--ink-soft);
  transition: background var(--dur-s), color var(--dur-s), border-color var(--dur-s);
}
.hero-nav-phase .nav-lang{ border-color: rgba(255,255,255,.5); color:#fff; }
.nav-lang:hover{ background: var(--primary-tint); color: var(--primary); }

.nav-burger{
  display:none; width: 44px; height:44px; border-radius: 10px;
  align-items:center; justify-content:center; flex-direction:column; gap:5px;
  border: 1.5px solid var(--line);
}
.hero-nav-phase .nav-burger{ border-color: rgba(255,255,255,.5); }
.nav-burger span{ width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--dur-s), opacity var(--dur-s); }
.hero-nav-phase .nav-burger span{ background:#fff; }
.nav-burger.active span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav-burger.active span:nth-child(2){ opacity:0; }
.nav-burger.active span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.mobile-menu{
  position: fixed; inset:0; z-index: 190;
  background: linear-gradient(160deg, var(--primary-deep), var(--primary-2));
  display:flex; flex-direction:column; justify-content:center; align-items:center; gap: 1.7rem;
  opacity:0; visibility:hidden; transform: translateY(-12px);
  transition: opacity var(--dur-m) var(--ease), transform var(--dur-m) var(--ease), visibility 0s var(--dur-m);
}
.mobile-menu.open{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.mobile-menu a{ font-family: var(--font-display); font-size: 1.9rem; color:#fff; }
.mobile-menu .btn{ margin-top:1rem; }

/* ---------------------------- hero ---------------------------- */
.hero{
  position: relative; min-height: 100svh; display:flex; align-items:flex-end;
  color:#fff; overflow:hidden;
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{
  width:100%; height:100%; object-fit:cover;
  transform: scale(1.12);
  animation: heroReveal 2.1s var(--ease) forwards;
}
@keyframes heroReveal{ to{ transform: scale(1); } }
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(190deg, rgba(6,15,32,.35) 0%, rgba(6,15,32,.55) 45%, rgba(6,20,44,.92) 100%),
    linear-gradient(90deg, rgba(6,15,32,.55), rgba(6,15,32,.05) 55%);
  opacity:0;
  animation: overlayIn 1.1s var(--ease) .5s forwards;
}
@keyframes overlayIn{ to{ opacity:1; } }

.hero-content{ position:relative; z-index:2; padding-block: 170px 96px; width:100%; }
.hero-eyebrow{
  font-size:.86rem; font-weight:600; letter-spacing:.03em; color: #cfe0fb;
  opacity:0; transform: translateY(14px);
  animation: fadeUp .8s var(--ease) 1.05s forwards;
}
.hero h1{
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  max-width: 15ch;
  margin-top: .75rem;
  opacity:0; transform: translateY(26px);
  animation: fadeUp .9s var(--ease) 1.2s forwards;
}
.hero-sub{
  margin-top: 1.4rem; font-size: 1.12rem; color: rgba(255,255,255,.86); max-width: 46ch;
  opacity:0; transform: translateY(20px);
  animation: fadeUp .85s var(--ease) 1.4s forwards;
}
.hero-lang-note{
  margin-top:.5rem; font-size:.92rem; color:#cfe0fb;
  opacity:0; transform: translateY(20px);
  animation: fadeUp .85s var(--ease) 1.48s forwards;
}
.hero-actions{
  display:flex; flex-wrap:wrap; gap: 1rem; margin-top: 2.2rem;
}
.hero-actions .btn{ opacity:0; transform: translateY(18px); animation: fadeUp .7s var(--ease) forwards; }
.hero-actions .btn:nth-child(1){ animation-delay: 1.6s; }
.hero-actions .btn:nth-child(2){ animation-delay: 1.72s; }

.hero-stats{
  display:flex; gap: clamp(1.4rem, 4vw, 3rem); margin-top: 3.2rem; flex-wrap:wrap;
  border-top: 1px solid rgba(255,255,255,.22); padding-top: 1.6rem;
  opacity:0; transform: translateY(16px);
  animation: fadeUp .8s var(--ease) 1.9s forwards;
}
.hero-stat strong{ font-family: var(--font-display); font-size: 1.7rem; display:block; }
.hero-stat small{ color: rgba(255,255,255,.72); font-size: .82rem; }

@keyframes fadeUp{ to{ opacity:1; transform:none; } }

.scroll-cue{
  position:absolute; left:50%; bottom: 26px; transform: translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color: rgba(255,255,255,.75); font-size:.72rem; letter-spacing:.14em; z-index:2;
  opacity:0; animation: fadeUp .8s var(--ease) 2.2s forwards;
}
.scroll-cue .stem{ width:1px; height: 34px; background: linear-gradient(rgba(255,255,255,.9), transparent); position:relative; overflow:hidden; }
.scroll-cue .stem::after{
  content:""; position:absolute; left:0; top:-34px; width:100%; height:34px;
  background: linear-gradient(#fff, transparent);
  animation: cueDrop 2s ease-in-out infinite;
}
@keyframes cueDrop{ 0%{ transform: translateY(0);} 100%{ transform: translateY(68px);} }

/* ---------------------------- reveal-on-scroll ---------------------------- */
.reveal{ opacity:0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-stagger.is-visible > *{ transition-delay: calc(var(--i,0) * 90ms); }

/* ---------------------------- trust strip ---------------------------- */
.trust-strip{ background: var(--primary-deep); color:#fff; padding: 40px 0; }
.trust-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.trust-card{ display:flex; gap: 1rem; align-items:flex-start; }
.trust-card .icon{
  width:46px; height:46px; border-radius: 12px; flex-shrink:0;
  background: rgba(255,255,255,.1); display:grid; place-items:center; font-size:1.3rem;
  border:1px solid rgba(255,255,255,.15);
}
.trust-card h3{ font-size: 1rem; color:#fff; font-family: var(--font-body); font-weight:700; }
.trust-card p{ font-size:.88rem; color: rgba(255,255,255,.68); margin-top:.2rem; }
@media (max-width: 800px){ .trust-grid{ grid-template-columns: 1fr; gap:1.4rem; } }

/* ---------------------------- services ---------------------------- */
.services-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 980px){ .services-grid{ grid-template-columns: 1fr; } }

.service-card{
  position:relative; border-radius: var(--radius-lg); overflow:hidden;
  background: var(--panel); border:1px solid var(--line-soft);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease), border-color var(--dur-m);
  display:flex; flex-direction:column;
}
.service-card:hover{ transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; }
.service-media{ position:relative; aspect-ratio: 4/3; overflow:hidden; }
.service-media img{ width:100%; height:100%; object-fit:cover; transition: transform 1.1s var(--ease); }
.service-card:hover .service-media img{ transform: scale(1.09); }
.service-media::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(200deg, transparent 45%, rgba(8,20,44,.55));
}
.service-index{
  position:absolute; top:16px; left:16px; z-index:1;
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background: rgba(255,255,255,.92); color: var(--primary); font-weight:800; font-family: var(--font-display);
  transition: transform var(--dur-m) var(--ease);
}
.service-card:hover .service-index{ transform: scale(1.12) rotate(-8deg); }
.service-body{ padding: 1.7rem 1.6rem 1.9rem; flex:1; display:flex; flex-direction:column; }
.service-tag{ font-size:.74rem; font-weight:700; letter-spacing:.04em; color: var(--primary); text-transform:uppercase; }
.service-body h3{ font-size:1.28rem; margin-top:.4rem; }
.service-body p{ color: var(--ink-soft); font-size:.95rem; margin-top:.6rem; flex:1; }
.service-line{ height:2px; width:34px; background: var(--primary); margin-top:1.2rem; border-radius:2px; transition: width var(--dur-m) var(--ease); }
.service-card:hover .service-line{ width: 68px; }

.services-note{ margin-top: 2.4rem; color: var(--ink-soft); font-size: .96rem; max-width: 62ch; border-left: 2px solid var(--line); padding-left: 1rem; }

/* ---------------------------- why choose us ---------------------------- */
.about-wrap{ display:grid; grid-template-columns: .92fr 1.08fr; gap: clamp(2rem,5vw,4.5rem); align-items:center; }
@media (max-width: 900px){ .about-wrap{ grid-template-columns:1fr; } }
.about-media{ position:relative; border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-lg); }
.about-media img{ width:100%; height:100%; object-fit:cover; aspect-ratio: 5/6; clip-path: inset(0 0 0 0); }
.about-media .clip-reveal{ clip-path: inset(0 0 100% 0); transition: clip-path 1s var(--ease); }
.about-media.is-visible .clip-reveal{ clip-path: inset(0 0 0% 0); }
.about-badge{
  position:absolute; left:-18px; bottom: -18px; background: var(--panel);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 1.1rem 1.3rem;
  display:flex; gap:.85rem; align-items:center; border:1px solid var(--line-soft);
}
@media (max-width: 560px){ .about-badge{ left:12px; bottom:12px; } }
.about-badge strong{ font-family: var(--font-display); font-size:1.5rem; color: var(--primary); display:block; }
.about-badge small{ color: var(--ink-soft); font-size:.76rem; }

.about-copy h2{ font-size: clamp(1.9rem,3.2vw,2.6rem); }
.about-copy p{ color: var(--ink-soft); margin-top: 1.1rem; font-size: 1.03rem; max-width: 56ch; }
.about-list{ margin-top: 1.6rem; display:grid; gap: .9rem; }
.about-list li{ display:flex; gap:.75rem; align-items:flex-start; font-size:.98rem; color: var(--ink); }
.about-list svg{ width:20px; height:20px; color: var(--primary); flex-shrink:0; margin-top:2px; }

/* ---------------------------- gallery ---------------------------- */
.gallery-grid{
  columns: 3 280px; column-gap: 1.1rem;
}
@media (max-width: 720px){ .gallery-grid{ columns: 1; } }
@media (min-width:721px) and (max-width:980px){ .gallery-grid{ columns:2; } }
.gallery-item{
  break-inside: avoid; margin-bottom: 1.1rem; border-radius: var(--radius-md);
  overflow:hidden; position:relative; cursor: zoom-in;
  box-shadow: var(--shadow-sm);
}
.gallery-item:nth-child(3n+1) img{ aspect-ratio: 4/5; }
.gallery-item:nth-child(3n+2) img{ aspect-ratio: 1/1; }
.gallery-item:nth-child(3n) img{ aspect-ratio: 4/3; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition: transform .8s var(--ease); }
.gallery-item:hover img{ transform: scale(1.07); }
.gallery-overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding: 1rem;
  background: linear-gradient(200deg, transparent 55%, rgba(6,15,32,.82));
  opacity:0; transition: opacity var(--dur-m) var(--ease);
}
.gallery-item:hover .gallery-overlay{ opacity:1; }
.gallery-overlay span{ color:#fff; font-weight:600; font-size:.92rem; }

/* lightbox */
.lightbox{
  position: fixed; inset:0; z-index: 300; background: rgba(4,10,22,.94);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition: opacity var(--dur-m) var(--ease), visibility 0s var(--dur-m);
}
.lightbox.open{ opacity:1; visibility:visible; transition-delay:0s; }
.lightbox-figure{ max-width: min(90vw, 1000px); max-height: 82vh; position:relative; }
.lightbox-figure img{
  max-width:100%; max-height:82vh; border-radius: var(--radius-md); object-fit:contain;
  transform: scale(.94); opacity:0; transition: transform var(--dur-m) var(--ease), opacity var(--dur-m) var(--ease);
}
.lightbox.open .lightbox-figure img{ transform:none; opacity:1; }
.lightbox-caption{ color:#fff; text-align:center; margin-top: 1rem; font-size:.95rem; opacity:.85; }
.lightbox-close, .lightbox-nav{
  position:absolute; color:#fff; width:48px; height:48px; border-radius:50%;
  background: rgba(255,255,255,.1); display:grid; place-items:center;
  transition: background var(--dur-s), transform var(--dur-s);
  border: 1px solid rgba(255,255,255,.2);
}
.lightbox-close:hover, .lightbox-nav:hover{ background: rgba(255,255,255,.22); transform: scale(1.06); }
.lightbox-close{ top: 22px; right: 22px; }
.lightbox-nav.prev{ left: 16px; top:50%; transform: translateY(-50%); }
.lightbox-nav.next{ right: 16px; top:50%; transform: translateY(-50%); }
@media (max-width: 640px){ .lightbox-nav{ width:40px; height:40px; } .lightbox-nav.prev{ left:6px; } .lightbox-nav.next{ right:6px; } }

/* ---------------------------- pricing ---------------------------- */
.pricing-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: 2.2rem; align-items:start; }
@media (max-width: 980px){ .pricing-grid{ grid-template-columns:1fr; } }

.price-card{
  background: var(--panel); border:1px solid var(--line-soft); border-radius: var(--radius-lg);
  padding: 1.8rem; box-shadow: var(--shadow-sm);
}
.price-card h3{ font-size:1.2rem; margin-bottom: 1rem; }
.include-list{ display:grid; gap:.65rem; }
.include-list li{ display:flex; justify-content:space-between; gap:1rem; padding: .55rem 0; border-bottom: 1px dashed var(--line); font-size:.94rem; }
.include-list li:last-child{ border-bottom:none; }
.tag-yes{ color: var(--whatsapp); font-weight:700; font-size:.85rem; }
.tag-extra{ color: var(--ink-soft); font-size:.85rem; }

.table-scroll{ overflow-x:auto; border-radius: var(--radius-md); border:1px solid var(--line-soft); }
table.rate-table{ width:100%; border-collapse: collapse; min-width: 420px; font-size:.92rem; }
table.rate-table th, table.rate-table td{ padding: .7rem .9rem; text-align:left; }
table.rate-table thead{ background: var(--primary-tint); }
table.rate-table th{ font-weight:700; color: var(--primary-2); }
table.rate-table tbody tr{ border-top:1px solid var(--line-soft); transition: background var(--dur-s); }
table.rate-table tbody tr:hover{ background: var(--bg-soft); }

/* calculator */
.calculator{
  background: linear-gradient(160deg, var(--primary-deep), var(--primary-2));
  border-radius: var(--radius-lg); color:#fff; padding: clamp(1.6rem, 4vw, 2.6rem);
  box-shadow: var(--shadow-lg);
}
.calc-top{ display:grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items:center; margin-bottom: 1.6rem; }
.calc-diagram{
  width: 130px; height:130px; border: 2px dashed rgba(255,255,255,.5); border-radius: 12px;
  position:relative; flex-shrink:0; display:grid; place-items:center;
  transition: width .35s var(--ease), height .35s var(--ease);
}
.calc-diagram span{ position:absolute; font-size:.68rem; color: rgba(255,255,255,.8); }
.calc-diagram .d-top{ top:-20px; left:50%; transform:translateX(-50%); }
.calc-diagram .d-left{ left:-14px; top:50%; transform: translateY(-50%) rotate(-90deg); white-space:nowrap; }
.calc-diagram .d-area{ font-size:.82rem; font-weight:700; }
.calc-summary{ display:grid; gap:.5rem; }
.calc-summary .row{ display:flex; justify-content:space-between; gap:1rem; font-size:.92rem; color: rgba(255,255,255,.78); }
.calc-summary .row strong{ color:#fff; font-family: var(--font-display); font-size:1.05rem; }
.calc-summary .cost-row{ margin-top:.3rem; padding-top:.6rem; border-top:1px solid rgba(255,255,255,.2); }
.calc-summary .cost-row strong{ font-size: 1.7rem; }

.calc-field{ margin-bottom: 1.2rem; }
.calc-field label{ display:flex; justify-content:space-between; font-size:.88rem; margin-bottom:.5rem; color: rgba(255,255,255,.85); }
.calc-field label b{ color:#fff; }
.stepper{ display:flex; align-items:center; gap:.7rem; }
.stepper button{
  width: 38px; height:38px; border-radius:50%; background: rgba(255,255,255,.12);
  color:#fff; font-size:1.2rem; display:grid; place-items:center; border:1px solid rgba(255,255,255,.25);
  transition: background var(--dur-s), transform var(--dur-s);
}
.stepper button:hover{ background: rgba(255,255,255,.24); transform: scale(1.06); }
.stepper button:active{ transform: scale(.94); }
input[type=range]{
  flex:1; appearance:none; height:6px; border-radius:6px; background: rgba(255,255,255,.25); outline:none;
}
input[type=range]::-webkit-slider-thumb{
  appearance:none; width:20px; height:20px; border-radius:50%; background:#fff; cursor:pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,.35); transition: transform var(--dur-s);
}
input[type=range]::-webkit-slider-thumb:hover{ transform: scale(1.15); }
input[type=range]::-moz-range-thumb{ width:20px; height:20px; border-radius:50%; background:#fff; border:none; cursor:pointer; }

.calc-select{
  width:100%; padding: .8rem 1rem; border-radius: var(--radius-sm); border:1px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.08); color:#fff;
}
.calc-select option{ color: var(--ink); }

.pill-toggle{ display:flex; gap:.5rem; background: rgba(255,255,255,.08); padding:.3rem; border-radius: 999px; }
.pill-toggle button{
  flex:1; padding:.55rem 1rem; border-radius:999px; font-size:.86rem; font-weight:600; color: rgba(255,255,255,.75);
  transition: background var(--dur-s), color var(--dur-s);
}
.pill-toggle button.active{ background:#fff; color: var(--primary-2); }

.calc-cta{ margin-top: 1.6rem; }

/* ---------------------------- process ---------------------------- */
.process-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1.4rem; counter-reset: step; }
@media (max-width: 900px){ .process-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px){ .process-grid{ grid-template-columns: 1fr; } }
.process-card{
  background: var(--panel); border:1px solid var(--line-soft); border-radius: var(--radius-md);
  padding: 1.7rem; position:relative; overflow:hidden;
  transition: transform var(--dur-m) var(--ease), box-shadow var(--dur-m) var(--ease);
}
.process-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); }
.process-num{
  font-family: var(--font-display); font-size:2.6rem; color: var(--primary-tint); font-weight:700;
  -webkit-text-stroke: 1.5px var(--primary); position:absolute; top:.2rem; right:1rem; line-height:1;
}
.process-card h3{ font-size:1.06rem; margin-top: 2.2rem; }
.process-card p{ font-size:.9rem; color: var(--ink-soft); margin-top:.5rem; }
.process-line{ display:none; }
@media (min-width: 901px){
  .process-grid{ position:relative; }
}

/* ---------------------------- CTA ---------------------------- */
.cta-band{
  background: linear-gradient(155deg, var(--primary-deep), var(--primary-2) 60%, var(--primary));
  border-radius: var(--radius-lg); padding: clamp(2.4rem, 6vw, 4rem); color:#fff; position:relative; overflow:hidden;
}
.cta-band::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.12), transparent 55%);
}
.cta-band h2{ color:#fff; font-size: clamp(1.9rem,4vw,2.7rem); max-width: 18ch; position:relative; }
.cta-band p{ color: rgba(255,255,255,.82); margin-top: 1rem; max-width: 52ch; position:relative; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:1rem; margin-top: 2rem; position:relative; }

/* ---------------------------- contact ---------------------------- */
.contact-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 2.4rem; }
@media (max-width: 940px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-cards{ display:grid; gap: 1rem; }
.contact-card{
  display:flex; align-items:center; gap: 1rem; padding: 1.15rem 1.3rem; border-radius: var(--radius-md);
  border:1px solid var(--line-soft); background: var(--panel); transition: transform var(--dur-s), box-shadow var(--dur-s);
}
.contact-card:hover{ transform: translateY(-3px); box-shadow: var(--shadow-md); }
.contact-card .icon{ width:44px; height:44px; border-radius:12px; background: var(--primary-tint); color:var(--primary); display:grid; place-items:center; flex-shrink:0; }
.contact-card strong{ display:block; font-size:.95rem; }
.contact-card span{ font-size:.84rem; color: var(--ink-soft); }
.social-row{ display:flex; gap:.7rem; margin-top:.4rem; }
.social-row a{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center;
  color: var(--ink-soft); transition: all var(--dur-s);
}
.social-row a:hover{ background: var(--primary); color:#fff; border-color: var(--primary); transform: translateY(-3px); }
.social-row svg{ width:19px; height:19px; }

.form-card{ background: var(--panel); border:1px solid var(--line-soft); border-radius: var(--radius-lg); padding: clamp(1.6rem,4vw,2.4rem); box-shadow: var(--shadow-sm); }
.form-row{ display:grid; gap: .45rem; margin-bottom: 1.15rem; }
.form-row.two{ grid-template-columns: 1fr 1fr; }
@media (max-width:560px){ .form-row.two{ grid-template-columns:1fr; } }
.form-row label{ font-size:.86rem; font-weight:600; }
.form-row input, .form-row select, .form-row textarea{
  padding: .85rem 1rem; border-radius: var(--radius-sm); border:1.5px solid var(--line);
  background: var(--bg); transition: border-color var(--dur-s), box-shadow var(--dur-s);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{
  border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-tint);
}
.form-row textarea{ resize: vertical; min-height: 110px; }
.field-error{ font-size:.78rem; color:#c0362c; min-height: 1em; }
.form-row.invalid input, .form-row.invalid select, .form-row.invalid textarea{ border-color:#c0362c; }
.form-note{ font-size:.78rem; color: var(--ink-soft); margin-top: .6rem; }
.form-success{
  display:none; align-items:center; gap:.8rem; background: #e9f9ef; color:#0d7a3f; border:1px solid #b9ecc9;
  padding: 1rem 1.2rem; border-radius: var(--radius-md); margin-top: 1rem; font-size:.92rem;
}
.form-success.show{ display:flex; }
.form-success svg{ width:22px; height:22px; flex-shrink:0; }

/* ---------------------------- footer ---------------------------- */
footer.site-footer{ background: var(--primary-deep); color: rgba(255,255,255,.7); padding: 56px 0 28px; }
.footer-top{ display:flex; justify-content:space-between; gap: 2rem; flex-wrap:wrap; padding-bottom: 2.2rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.footer-brand{ display:flex; align-items:center; gap:.8rem; }
.footer-brand img{ width:36px; height:36px; border-radius:8px; }
.footer-brand b{ color:#fff; font-family: var(--font-display); font-size:1.05rem; }
.footer-links{ display:flex; gap: 2.5rem; flex-wrap:wrap; }
.footer-col strong{ color:#fff; display:block; margin-bottom:.7rem; font-size:.85rem; letter-spacing:.03em; }
.footer-col a{ display:block; font-size:.86rem; padding: .28rem 0; color: rgba(255,255,255,.65); transition: color var(--dur-s); }
.footer-col a:hover{ color:#fff; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding-top: 1.6rem; font-size:.82rem; }

/* ---------------------------- floating UI ---------------------------- */
.mobile-bar{
  position: fixed; left:0; right:0; bottom:0; z-index: 150;
  display:none; gap: .6rem; padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom,0px));
  background: rgba(249,252,255,.94); backdrop-filter: blur(10px); border-top:1px solid var(--line);
}
.mobile-bar .btn{ flex:1; padding: .85rem 1rem; font-size:.88rem; }
@media (max-width: 720px){ .mobile-bar{ display:flex; } .nav-cta .btn{ display:none; } }

.back-to-top{
  position: fixed; right: 22px; bottom: 92px; z-index: 140;
  width: 48px; height:48px; border-radius:50%;
  background: var(--primary); color:#fff; display:grid; place-items:center;
  box-shadow: var(--shadow-md);
  opacity:0; visibility:hidden; transform: translateY(12px);
  transition: opacity var(--dur-s), transform var(--dur-s), visibility 0s var(--dur-s);
}
.back-to-top.show{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
@media (max-width:720px){ .back-to-top{ bottom: 84px; } }

.toast{
  position: fixed; left:50%; bottom: 30px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color:#fff; padding: .8rem 1.3rem; border-radius: 999px;
  font-size:.85rem; z-index: 400; opacity:0; visibility:hidden; transition: all var(--dur-s) var(--ease);
}
.toast.show{ opacity:1; visibility:visible; transform: translateX(-50%) translateY(0); }

/* utility */
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
@media (max-width: 900px){
  .nav-links, .nav-cta .btn-call, .nav-lang{ display:none; }
  .nav-burger{ display:flex; }
}

/* ---------------------------- utilities (no inline styles: CSP-safe) ---------------------------- */
.bg-soft{ background: var(--bg-soft); }
.link-accent{ text-decoration: underline; color: var(--primary); }
.link-inherit{ color: inherit; text-decoration: underline; }
.gap-below{ margin-bottom: 1.4rem; }
.eyebrow-invert{ color: #cfe0fb; }
.eyebrow-invert::before{ background: #cfe0fb; }
.contact-card--static{ cursor: default; }
.contact-card--static:hover{ transform:none; box-shadow:none; }
.follow-block{ margin-top: 1.4rem; }
.follow-label{ display:block; font-size:.9rem; margin-bottom:.6rem; }
.pricing-grid > .price-card h3:not(:first-child){ margin-top: .2rem; }

.form-pair{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
@media (max-width:560px){ .form-pair{ grid-template-columns:1fr; gap:0; } }
.site-nav.menu-open .brand-text b, .site-nav.menu-open .brand-text small{ color:#fff; }
.site-nav.menu-open .nav-burger{ border-color: rgba(255,255,255,.5); }
.site-nav.menu-open .nav-burger span{ background:#fff; }
.site-nav.menu-open{ background:transparent; backdrop-filter:none; box-shadow:none; border-color:transparent; }
.mobile-menu .nav-lang{ border-color: rgba(255,255,255,.5); color:#fff; }
.pricing-grid > *, .contact-grid > *, .about-wrap > *{ min-width:0; }
.hero h1{ color:#fff; }
.hero-actions .btn{ flex:0 1 auto; }
@media (max-width:480px){ .hero-actions .btn{ width:100%; } .brand-text b{ font-size:.98rem; } }


/* =========================================================
   V2 MOBILE-FIRST BUSINESS REDESIGN
   Existing functionality/content retained; visual hierarchy upgraded.
   ========================================================= */
:root{
  --v2-ink:#101827;
  --v2-muted:#667085;
  --v2-blue:#1557d6;
  --v2-blue-dark:#08265f;
  --v2-blue-soft:#edf4ff;
  --v2-green:#16a05d;
  --v2-border:rgba(16,24,39,.09);
  --v2-shadow:0 18px 55px rgba(8,31,66,.10);
  --v2-shadow-hover:0 28px 70px rgba(8,31,66,.18);
}
body{background:#f7f9fc;color:var(--v2-ink);}
.container{max-width:1180px;padding-inline:18px;}
section.section{padding:76px 0;}
@media(max-width:640px){section.section{padding:52px 0;}}

/* Header */
.site-nav{
  height:70px;
  padding:0;
  background:rgba(5,16,38,.12);
  backdrop-filter:blur(12px);
}
.site-nav.scrolled{
  height:62px;
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 35px rgba(8,31,66,.10);
}
.brand{gap:.55rem;}
.brand-mark{width:38px;height:38px;border-radius:11px;}
.brand-text b{font-family:var(--font-body);font-size:.91rem;font-weight:800;letter-spacing:-.02em;}
.brand-text small{font-size:.56rem;letter-spacing:.16em;}
@media(max-width:480px){.brand-text b{font-size:.82rem;}.brand-mark{width:35px;height:35px;}}
.nav-burger{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.08);}
.site-nav.scrolled .nav-burger{background:#fff;}

/* Hero */
.hero{min-height:92svh;align-items:flex-end;}
.hero-media img{transform:scale(1.05);animation:heroReveal 1.5s var(--ease) forwards;}
.hero-media::after{
  background:
    linear-gradient(180deg,rgba(2,10,25,.12) 0%,rgba(2,10,25,.40) 38%,rgba(2,10,25,.94) 100%),
    linear-gradient(90deg,rgba(2,10,25,.50),rgba(2,10,25,.03) 75%);
}
.hero-content{padding-block:125px 70px;}
.hero-eyebrow{
  display:inline-flex;padding:.45rem .75rem;border:1px solid rgba(255,255,255,.20);
  background:rgba(255,255,255,.08);backdrop-filter:blur(10px);border-radius:999px;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
}
.hero h1{
  max-width:12ch;font-family:var(--font-body);font-weight:850;letter-spacing:-.055em;
  font-size:clamp(2.45rem,10vw,5.3rem);line-height:.98;margin-top:1rem;
}
.hero-sub{font-size:1rem;line-height:1.65;max-width:48ch;}
.hero-lang-note{font-size:.88rem;}
.hero-actions{gap:.65rem;margin-top:1.5rem;}
.hero-actions .btn{border-radius:14px;padding:1rem 1.1rem;}
.hero-stats{gap:1rem;margin-top:2rem;padding-top:1.2rem;}
.hero-stat{min-width:85px;}
.hero-stat strong{font-family:var(--font-body);font-size:1.2rem;font-weight:800;}
.hero-stat small{font-size:.69rem;}
@media(max-width:480px){
  .hero-content{padding-bottom:82px;}
  .hero-actions .btn{width:100%;}
  .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);}
}

/* Trust */
.trust-strip{padding:20px 0;background:#081f42;}
.trust-grid{gap:.65rem;}
.trust-card{
  padding:.75rem .7rem;border:1px solid rgba(255,255,255,.08);
  border-radius:16px;background:rgba(255,255,255,.045);
}
.trust-card .icon{width:38px;height:38px;border-radius:10px;font-size:1rem;}
.trust-card h3{font-size:.78rem;}
.trust-card p{font-size:.7rem;line-height:1.4;}
@media(max-width:800px){.trust-grid{grid-template-columns:repeat(3,1fr);gap:.45rem;}}
@media(max-width:520px){.trust-card{display:block;text-align:center}.trust-card .icon{margin:0 auto .45rem}.trust-card p{display:none}.trust-card h3{font-size:.69rem;}}

/* Section headings */
.section-head{margin-bottom:30px;}
.section-head h2{font-family:var(--font-body);font-weight:850;letter-spacing:-.045em;font-size:clamp(1.8rem,7vw,3rem);}
.section-head p{font-size:.94rem;line-height:1.65;}
.eyebrow{font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;}

/* Services */
.services-grid{gap:.9rem;}
.service-card{border-radius:20px;box-shadow:var(--v2-shadow);}
.service-card:hover{transform:translateY(-5px);box-shadow:var(--v2-shadow-hover);}
.service-media{aspect-ratio:1.08/1;}
.service-body{padding:1.15rem 1.1rem 1.35rem;}
.service-tag{font-size:.64rem;letter-spacing:.08em;}
.service-body h3{font-family:var(--font-body);font-size:1.06rem;font-weight:800;letter-spacing:-.02em;}
.service-body p{font-size:.84rem;line-height:1.55;}
.service-index{width:32px;height:32px;font-size:.76rem;}

/* About */
.about-wrap{gap:2rem;}
.about-media{border-radius:20px;box-shadow:var(--v2-shadow);}
.about-copy h2{font-family:var(--font-body);font-weight:850;letter-spacing:-.04em;}
.about-copy p{font-size:.94rem;line-height:1.7;}
.about-list{gap:.7rem;}
.about-list li{font-size:.88rem;line-height:1.5;}
.about-badge{border-radius:14px;padding:.8rem 1rem;}
.about-badge strong{font-family:var(--font-body);font-size:1.25rem;}

/* Gallery — visually prioritized */
.gallery-grid{columns:2 180px;column-gap:.65rem;}
.gallery-item{margin-bottom:.65rem;border-radius:15px;box-shadow:0 5px 20px rgba(8,31,66,.08);}
.gallery-overlay{opacity:1;background:linear-gradient(180deg,transparent 55%,rgba(4,12,27,.72));padding:.75rem;}
.gallery-overlay span{font-size:.72rem;}
@media(min-width:800px){.gallery-grid{columns:3 250px;column-gap:1rem}.gallery-item{margin-bottom:1rem}.gallery-overlay span{font-size:.84rem;}}

/* Pricing */
.pricing-grid{gap:1rem;}
.price-card{border-radius:20px;padding:1.2rem;box-shadow:var(--v2-shadow);}
.price-card h3{font-family:var(--font-body);font-weight:800;font-size:1rem;}
.include-list{gap:.35rem;}
.include-list li{font-size:.78rem;padding:.45rem 0;}
table.rate-table{font-size:.78rem;min-width:380px;}
table.rate-table th,table.rate-table td{padding:.58rem .65rem;}

/* Calculator — make it a conversion module */
.calculator{
  border-radius:24px;padding:1.15rem;
  background:linear-gradient(145deg,#061a3b,#104fa7);
  box-shadow:0 25px 70px rgba(8,31,66,.28);
}
.calc-top{grid-template-columns:1fr;gap:1rem;}
.calc-diagram{width:100%;height:110px;border-radius:18px;background:rgba(255,255,255,.05);}
.calc-summary{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:.85rem;}
.calc-summary .cost-row strong{font-size:1.5rem;}
.calc-field{margin-bottom:1rem;}
.calc-field label{font-size:.8rem;}
.stepper button{width:42px;height:42px;}
.calc-select{padding:.9rem;border-radius:12px;}
.pill-toggle{border-radius:13px;padding:.25rem;}
.pill-toggle button{padding:.7rem .65rem;font-size:.78rem;}
.calc-cta .btn{border-radius:13px;}

/* Contact */
.contact-grid{gap:1rem;}
.contact-card{border-radius:15px;padding:.9rem 1rem;}
.contact-card strong{font-size:.86rem;}
.contact-card span{font-size:.76rem;}
.form-card{border-radius:20px;padding:1.15rem;box-shadow:var(--v2-shadow);}
.form-row{margin-bottom:.9rem;}
.form-row label{font-size:.78rem;}
.form-row input,.form-row select,.form-row textarea{padding:.82rem .9rem;border-radius:12px;font-size:.9rem;}
.form-row textarea{min-height:95px;}
.form-note{font-size:.7rem;line-height:1.5;}

/* Mobile CTA: make ordering/contact impossible to miss */
.mobile-bar{
  padding:.55rem .65rem calc(.55rem + env(safe-area-inset-bottom,0px));
  gap:.45rem;background:rgba(255,255,255,.94);
  box-shadow:0 -10px 35px rgba(8,31,66,.12);
  backdrop-filter:blur(14px);
}
.mobile-bar .btn{border-radius:13px;font-weight:800;padding:.78rem .7rem;}
.back-to-top{right:14px;width:42px;height:42px;bottom:82px;}

/* Better touch targets */
a,button,select,input{touch-action:manipulation;}
@media(max-width:720px){body{padding-bottom:65px;}.toast{bottom:82px;}}

/* Footer */
footer.site-footer{padding:40px 0 85px;}
.footer-top{gap:1.5rem;}
.footer-col a{font-size:.76rem;}
.footer-bottom{font-size:.7rem;}

/* Subtle section rhythm */
.section:nth-of-type(even){background:#fbfcfe;}


.quote-journey{background:#fff;border-bottom:1px solid rgba(16,24,39,.07);}
.quote-journey-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:16px 0;}
.quote-journey-inner b{display:block;font-size:.9rem;font-weight:800;}
.quote-journey-inner span{display:block;color:#667085;font-size:.76rem;margin-top:2px;}
.quote-journey .btn{border-radius:12px;padding:.75rem 1rem;font-size:.78rem;}
@media(max-width:600px){.quote-journey-inner{align-items:stretch;flex-direction:column;}.quote-journey .btn{width:100%;}}


/* =========================================================
   MOBILE VIEWPORT FIX — full-width on Android phones
   ========================================================= */
html, body{
  width:100%;
  min-width:0;
  max-width:none;
}
body{
  margin:0;
  overflow-x:hidden;
}
body > header,
body > .mobile-menu,
body > main,
body > footer{
  width:100%;
  max-width:none;
  min-width:0;
}
main, main > section{
  width:100%;
  max-width:none;
  min-width:0;
}
.container{
  width:100%;
  max-width:1180px;
  min-width:0;
  margin-left:auto;
  margin-right:auto;
  padding-left:18px;
  padding-right:18px;
}
img, video, svg{
  max-width:100%;
}
@media (max-width: 720px){
  html, body{
    width:100% !important;
    min-width:0 !important;
  }
  .site-nav, .mobile-menu, .hero, .quote-journey, .trust-strip,
  section.section, footer{
    width:100% !important;
    max-width:none !important;
  }
  .hero-content, .quote-journey-inner, .trust-grid{
    width:100%;
    min-width:0;
  }
}

.price-warning{margin-top:14px;padding:12px 14px;border:1px solid rgba(245,158,11,.35);border-radius:14px;background:rgba(245,158,11,.08);color:#cbd5e1;font-size:.82rem;line-height:1.55}.price-warning strong{color:#fbbf24}.price-warning span{display:inline-block;margin-top:5px;color:#e2e8f0}

.price-notice-box{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  margin:18px 0 !important;
  padding:16px !important;
  border:1px solid #8b6b2e !important;
  border-left:4px solid #e0ad45 !important;
  border-radius:12px !important;
  background:#202b3b !important;
  color:#f3f4f6 !important;
  box-shadow:0 4px 14px rgba(0,0,0,.16) !important;
  font-family:inherit !important;
  font-size:14px !important;
  line-height:1.55 !important;
  text-align:left !important;
  opacity:1 !important;
  visibility:visible !important;
  overflow:visible !important;
  position:relative !important;
  z-index:20 !important;
}
.price-notice-box .notice-title{
  display:block !important;
  margin:0 0 7px !important;
  color:#f6c969 !important;
  font-size:15px !important;
  font-weight:800 !important;
}
.price-notice-box .notice-si{
  display:block !important;
  margin-top:5px !important;
  color:#e5e7eb !important;
}
.price-notice-box .notice-final{
  display:block !important;
  margin-top:9px !important;
  font-weight:700 !important;
  color:#ffffff !important;
}
@media(max-width:480px){
  .price-notice-box{
    margin:14px 0 !important;
    padding:13px !important;
    font-size:13px !important;
    line-height:1.5 !important;
  }
  .price-notice-box .notice-title{font-size:14px !important}
}

/* ---------------------- gutter works (auto-sliding strip) ---------------------- */
.gw-marquee{
  overflow:hidden; position:relative; margin-top:8px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.gw-track{ display:flex; gap:1rem; width:max-content; animation:gw-slide 28s linear infinite; }
.gw-marquee:hover .gw-track,
.gw-marquee:focus-within .gw-track{ animation-play-state:paused; }
.gw-item{ margin:0; flex:0 0 auto; height:380px; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-md); }
.gw-item img{ height:100%; width:auto; display:block; object-fit:cover; }
@keyframes gw-slide{ from{ transform:translateX(0); } to{ transform:translateX(calc(-50% - .5rem)); } }
@media (max-width:640px){ .gw-item{ height:300px; } .gw-track{ animation-duration:22s; } }
@media (prefers-reduced-motion:reduce){
  .gw-marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .gw-track{ animation:none; }
  .gw-item[aria-hidden="true"]{ display:none; }
}

/* ---------------------- gutter works (auto-sliding strip) ---------------------- */
.gw-marquee{
  overflow-x:auto; overflow-y:hidden; position:relative; margin-top:8px;
  scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.gw-marquee::-webkit-scrollbar{ display:none; }
.gw-track{ display:flex; flex-direction:row; flex-wrap:nowrap; gap:1rem; width:max-content; }
.gw-item{ margin:0; flex:0 0 auto; height:380px; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-md); }
.gw-item img{ height:100%; width:auto; max-width:none; display:block; object-fit:cover; }
@media (max-width:640px){ .gw-item{ height:300px; } }