/* Scoped copy of the KIKLOS stakeholder mockup's CSS
 * (1 kiklos-b-mosaic-layout-scandinavian-typography.html, repo root),
 * rewritten so every selector is prefixed under .kiklos-page instead of the
 * mockup's own html/body/* — this file is imported globally but must never
 * leak resets or typography onto the rest of the site.
 *
 * Values are otherwise untouched: same selectors, same declarations, same
 * cascade order. This is the literal source for an eventual standalone
 * KIKLOS domain deploy — keep it byte-for-byte close to the mockup rather
 * than "cleaning it up" when this page is edited.
 */

.kiklos-page {
--bg:#ddd7ce;--hero-bg:linear-gradient(90deg,#ddd7ce 0%,#ddd7ce 54%,#cfc8be 54%,#cfc8be 100%);--ink:#20211f;--soft:rgba(32,33,31,.74);--muted:rgba(32,33,31,.48);--line:rgba(32,33,31,.12);--nav-bg:rgba(221,215,206,.88);--frame-bg:#ebe6de;--frame-line:rgba(32,33,31,.08);--product-bg:#f2ede5;--button-bg:#1f2120;--button-text:#f5f1eb;--dark-bg:#191b1a;--dark-text:#f5f2ec;--dark-soft:rgba(245,242,236,.72);--brand-mark-bg:linear-gradient(135deg,rgba(255,255,255,.06),transparent 52%);--brand-mark-line:rgba(245,242,236,.12);--bullet-bg:rgba(255,255,255,.38);--contact-bg:radial-gradient(circle at 0% 100%, rgba(95,107,84,.12) 0, rgba(95,107,84,.12) 12vw, transparent 12.2vw), #ece5db;--action-bg:rgba(255,255,255,.34);
}

.kiklos-page * {
box-sizing:border-box;margin:0;padding:0;font-family:inherit
}

.kiklos-page {
scroll-behavior:smooth
}

.kiklos-page {
font-family:"Ubuntu",Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.45;-webkit-font-smoothing:antialiased
}

.kiklos-page a {
text-decoration:none;color:inherit
}

.kiklos-page img {
display:block;width:100%;height:auto
}

.kiklos-page .wrap {
width:min(1320px,92vw);margin:0 auto
}

.kiklos-page .section {
padding:68px 0
}

.kiklos-page .eyebrow {
display:inline-block;margin-bottom:14px;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)
}

.kiklos-page h1,
.kiklos-page h2,
.kiklos-page h3 {
font-weight:800;letter-spacing:-.055em;line-height:.96
}

.kiklos-page h1 {
font-size:clamp(46px,6vw,84px);max-width:860px
}

.kiklos-page h2 {
font-size:clamp(34px,4.1vw,56px);max-width:840px
}

.kiklos-page h3 {
font-size:18px
}

.kiklos-page .lead {
margin-top:18px;font-size:clamp(16px,1.35vw,21px);line-height:1.38;color:var(--soft);max-width:690px
}

.kiklos-page .lead.small {
font-size:15.5px;line-height:1.52;max-width:640px
}

.kiklos-page .copy {
margin-top:14px;max-width:600px;font-size:14px;line-height:1.58;color:var(--soft)
}

.kiklos-page .nav {
/* Opaque solid bg (not the translucent --nav-bg + backdrop-filter): the brand
   logo is a white-background JPEG masked via mix-blend-mode:multiply, and
   backdrop-filter made the nav a blend-isolation boundary — once scrolled over a
   darker section the logo's white box stopped blending away and showed. A flat
   bg matching --bg keeps multiply resolving against cream at every scroll pos. */
position:sticky;top:0;z-index:30;background:var(--bg);border-bottom:1px solid var(--line)
}

.kiklos-page .nav-inner {
width:min(1320px,92vw);margin:0 auto;min-height:72px;display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center
}

.kiklos-page .brand img {
width:142px
}

.kiklos-page .main-nav {
display:flex;justify-content:center;gap:26px;font-size:13px;font-weight:700;color:var(--soft)
}

.kiklos-page .side-nav {
display:flex;justify-content:flex-end;gap:12px;font-size:12px;color:var(--soft)
}

.kiklos-page .side-nav a:last-child {
padding:8px 13px;border:1px solid var(--line);border-radius:999px
}

.kiklos-page .hero {
padding:74px 0 58px;background:var(--hero-bg)
}

.kiklos-page .hero-grid {
display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:40px;align-items:center
}

.kiklos-page .hero-logo {
width:min(430px,78%);margin-bottom:22px
}

.kiklos-page .hero-logo img {
mix-blend-mode:multiply
}

.kiklos-page .buttons {
display:flex;flex-wrap:wrap;gap:12px;margin-top:28px
}

.kiklos-page .button {
display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:800
}

.kiklos-page .button.primary {
background:var(--button-bg);border-color:var(--button-bg);color:var(--button-text)
}

.kiklos-page .hero-side-layout {
display:grid;grid-template-columns:1.12fr .88fr;gap:16px;align-items:stretch
}

.kiklos-page .frame {
overflow:hidden;border:1px solid var(--frame-line);background:var(--frame-bg)
}

.kiklos-page .frame img {
width:100%;height:100%
}

.kiklos-page .lifestyle img {
object-fit:cover
}

.kiklos-page .product-shot {
background:var(--product-bg)
}

.kiklos-page .product-shot img {
object-fit:contain;padding:24px
}

.kiklos-page .hero-main {
height:520px
}

.kiklos-page .hero-side-stack {
display:grid;gap:16px
}

.kiklos-page .hero-side-stack .frame {
height:252px
}

.kiklos-page .note {
margin-top:16px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)
}

.kiklos-page .note strong {
display:block;max-width:620px;font-size:20px;line-height:1.12;letter-spacing:-.04em
}

.kiklos-page .note p {
margin-top:8px;max-width:560px;font-size:13.5px;color:var(--soft)
}

.kiklos-page .section-dark {
background:var(--dark-bg);color:var(--dark-text)
}

.kiklos-page .section-dark .eyebrow,
.kiklos-page .section-dark .lead,
.kiklos-page .section-dark .copy {
color:var(--dark-soft)
}

.kiklos-page .brand-grid {
display:grid;grid-template-columns:minmax(340px,.86fr) minmax(0,1.14fr);gap:40px;align-items:center
}

.kiklos-page .brand-mark {
padding:40px;background:var(--brand-mark-bg);border:1px solid var(--brand-mark-line)
}

.kiklos-page .brand-mark img {
width:min(680px,100%)
}

.kiklos-page .split {
display:grid;gap:38px
}

.kiklos-page .two-col {
grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);align-items:center
}

.kiklos-page .reverse-mobile {

}

.kiklos-page .text-col.align-center {
align-self:center
}

.kiklos-page .bullet-grid {
display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px
}

.kiklos-page .bullet {
padding:15px 16px;border:1px solid var(--frame-line);background:var(--bullet-bg)
}

.kiklos-page .bullet strong {
display:block;font-size:14px;line-height:1.16
}

.kiklos-page .bullet span {
display:block;margin-top:7px;font-size:12.7px;line-height:1.45;color:var(--soft)
}

.kiklos-page .tall {
height:520px
}

.kiklos-page .crop-top img {
object-position:center 24%
}

.kiklos-page .section-head {
margin-bottom:26px
}

.kiklos-page .compact-head {
display:grid;grid-template-columns:minmax(0,.95fr) minmax(340px,.75fr);gap:34px;align-items:end
}

.kiklos-page .right-copy {
margin-left:auto
}

.kiklos-page .gallery-grid {
display:grid;grid-template-columns:1.08fr .92fr .92fr;gap:16px;grid-template-rows:220px 220px
}

.kiklos-page .gallery-grid .hero-photo {
grid-column:1;grid-row:1 / span 2
}

.kiklos-page .gallery-grid .product-shot:nth-child(2) {
grid-column:2;grid-row:1
}

.kiklos-page .gallery-grid .product-shot:nth-child(3) {
grid-column:3;grid-row:1
}

.kiklos-page .gallery-grid .product-shot:nth-child(4) {
grid-column:2 / span 2;grid-row:2
}

.kiklos-page .wide-photo img {
object-fit:cover;object-position:center 53%
}

.kiklos-page .contact {
padding:46px 0;background:var(--contact-bg)
}

.kiklos-page .contact-grid {
display:grid;grid-template-columns:minmax(0,.95fr) minmax(390px,.82fr);gap:32px;align-items:center
}

.kiklos-page .action-list {
display:grid;border:1px solid var(--line)
}

.kiklos-page .action-card {
display:block;padding:15px 18px;border-bottom:1px solid var(--line);background:var(--action-bg)
}

.kiklos-page .action-card:last-child {
border-bottom:0
}

.kiklos-page .action-card.primary {
background:var(--button-bg);color:var(--button-text)
}

.kiklos-page .action-card span {
display:block;margin-bottom:7px;font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;opacity:.62
}

.kiklos-page .action-card strong {
display:block;font-size:17px;line-height:1.08;letter-spacing:-.03em
}

.kiklos-page .action-card small {
display:block;margin-top:5px;font-size:11.5px;line-height:1.32;opacity:.74
}

@media(max-width:1140px) {
.kiklos-page .nav-inner {
grid-template-columns:1fr auto
}

.kiklos-page .main-nav {
display:none
}

.kiklos-page .hero-grid,
.kiklos-page .brand-grid,
.kiklos-page .two-col,
.kiklos-page .compact-head,
.kiklos-page .contact-grid {
grid-template-columns:1fr
}

.kiklos-page .hero-side-layout,
.kiklos-page .gallery-grid {
grid-template-columns:1fr
}

.kiklos-page .gallery-grid {
grid-template-rows:auto
}

.kiklos-page .gallery-grid .hero-photo,
.kiklos-page .gallery-grid .product-shot:nth-child(2),
.kiklos-page .gallery-grid .product-shot:nth-child(3),
.kiklos-page .gallery-grid .product-shot:nth-child(4) {
grid-column:auto;grid-row:auto
}

.kiklos-page .hero-main,
.kiklos-page .tall {
height:auto
}

.kiklos-page .hero-side-stack {
grid-template-columns:1fr 1fr
}

.kiklos-page .hero-side-stack .frame {
height:auto
}

.kiklos-page .lifestyle img,
.kiklos-page .product-shot img {
aspect-ratio:1.05/1
}

.kiklos-page .reverse-mobile .media-col {
order:-1
}


}

@media(max-width:760px) {
.kiklos-page .section {
padding:52px 0
}

.kiklos-page h1 {
font-size:42px
}

.kiklos-page h2 {
font-size:34px
}

.kiklos-page .hero {
padding-top:52px
}

.kiklos-page .bullet-grid,
.kiklos-page .hero-side-stack {
grid-template-columns:1fr
}

.kiklos-page .side-nav a:not(:last-child) {
display:none
}


}

.kiklos-page .hero-intro:after {
content:"";display:block;width:96px;height:2px;background:rgba(32,33,31,.18);margin-top:24px
}

.kiklos-page .brand-strip {
position:relative;overflow:hidden
}

.kiklos-page .brand-strip:before {
content:"";position:absolute;inset:auto -5% -120px auto;width:340px;height:340px;border:1px solid rgba(255,255,255,.07);border-radius:50%
}

.kiklos-page .gallery-grid .hero-photo {
box-shadow:0 18px 48px rgba(0,0,0,.08)
}

.kiklos-page {

  --kiklos-brown:#604F48;
  --kiklos-green:#609828;
  --kiklos-grey:#B8B8B4;
  --bg:#ddd8cf;
  --hero-bg:#ddd8cf;
  --ink:#211f1d;
  --soft:rgba(33,31,29,.72);
  --muted:rgba(33,31,29,.46);
  --line:rgba(33,31,29,.12);
  --nav-bg:rgba(221,216,207,.9);
  --button-bg:var(--kiklos-brown);
  --button-text:#f8f4ee;
  --dark-bg:#211f1d;
  --dark-text:#f8f4ee;
  --dark-soft:rgba(248,244,238,.72);

}

.kiklos-page,
.kiklos-page button,
.kiklos-page input,
.kiklos-page textarea,
.kiklos-page select,
.kiklos-page table {
 font-family:"Ubuntu",Arial,sans-serif !important; 
}

.kiklos-page .brand img,
.kiklos-page .hero-logo img {
 mix-blend-mode:multiply; 
}

.kiklos-page .hero {
 background:var(--hero-bg) !important; 
}

.kiklos-page .hero h1 {
 font-size:clamp(38px,4.45vw,66px) !important; max-width:760px; 
}

.kiklos-page .hero .lead {
 font-size:clamp(15.5px,1.18vw,18.5px); max-width:620px; 
}

.kiklos-page .hero .copy {
 max-width:580px; 
}

.kiklos-page .button.primary {
 background:var(--kiklos-green); border-color:var(--kiklos-green); color:#fffaf1; 
}

.kiklos-page .button:not(.primary) {
 border-color:rgba(96,79,72,.24); color:var(--kiklos-brown); background:rgba(255,255,255,.18); 
}

.kiklos-page .nav .brand img {
 width:150px; 
}

.kiklos-page .main-nav a:hover,
.kiklos-page .side-nav a:hover {
 color:var(--kiklos-green); 
}

.kiklos-page .products-section {
 background:var(--kiklos-grey); 
}

.kiklos-page .products-section .eyebrow {
 color:rgba(33,31,29,.50); 
}

.kiklos-page .products-section .lead,
.kiklos-page .products-section .copy {
 color:rgba(33,31,29,.72); 
}

.kiklos-page .products-section .frame {
 background:rgba(245,242,236,.42); border-color:rgba(33,31,29,.10); 
}

.kiklos-page .gallery-grid {
 grid-template-rows:250px 250px; 
}

.kiklos-page .gallery-grid .hero-photo img {
 object-fit:cover; object-position:center 58%; padding:0; 
}

.kiklos-page .gallery-grid .product-shot img {
 object-fit:contain !important; object-position:center center !important; padding:20px !important; 
}

.kiklos-page .gallery-grid .product-shot:nth-child(4) img {
 padding:14px !important; 
}

.kiklos-page .brand-strip {
 display:none !important; 
}

.kiklos-page .designed-viomes {

  background:var(--kiklos-brown);
  color:#f8f4ee;
  position:relative;
  overflow:hidden;

}

.kiklos-page .designed-viomes:after {

  content:"";
  position:absolute;
  right:-120px;
  top:-120px;
  width:360px;
  height:360px;
  border-radius:50%;
  background:rgba(96,152,40,.18);

}

.kiklos-page .designed-grid {

  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(360px,.86fr);
  gap:44px;
  align-items:center;

}

.kiklos-page .designed-viomes .eyebrow,
.kiklos-page .designed-viomes .lead,
.kiklos-page .designed-viomes .copy {
 color:rgba(248,244,238,.76); 
}

.kiklos-page .designed-logo {

  min-height:300px;
  display:grid;
  place-items:center;
  border:1px solid rgba(248,244,238,.14);
  background:linear-gradient(135deg,rgba(255,255,255,.07),transparent 52%);
  padding:42px;

}

.kiklos-page .designed-logo img {
 width:min(660px,100%); 
}

.kiklos-page .contact {
 background:#eee9df; 
}

@media(max-width:1140px) {
.kiklos-page .designed-grid {
 grid-template-columns:1fr; 
}

.kiklos-page .gallery-grid {
 grid-template-rows:auto; 
}


}

.kiklos-page .designed-viomes,
.kiklos-page #designed.designed-viomes {

  background: #050505 !important;
  color: #f6f2eb !important;

}

.kiklos-page .designed-viomes h1,
.kiklos-page .designed-viomes h2,
.kiklos-page .designed-viomes h3,
.kiklos-page .designed-viomes p,
.kiklos-page .designed-viomes .lead,
.kiklos-page .designed-viomes .copy,
.kiklos-page .designed-viomes .eyebrow {

  color: #f6f2eb !important;

}

.kiklos-page .designed-viomes .lead,
.kiklos-page .designed-viomes .copy {

  color: rgba(246,242,235,.72) !important;

}

.kiklos-page .designed-viomes .eyebrow {

  color: rgba(246,242,235,.56) !important;

}

.kiklos-page .designed-viomes img {

  filter: none !important;

}

.kiklos-page #intro.hero {

  background: #ddd7ce !important;

}

.kiklos-page #intro h1 {

  font-size: clamp(42px, 5.35vw, 76px) !important;
  line-height: .97 !important;

}

.kiklos-page .contact {

  background:
    radial-gradient(circle at 0% 100%, rgba(95,107,84,.10) 0, rgba(95,107,84,.10) 10vw, transparent 10.2vw),
    #ece5db !important;
  padding-top: 34px !important;
  padding-bottom: 34px !important;

}

.kiklos-page .contact-grid {

  align-items: center !important;
  gap: 34px !important;

}

.kiklos-page .contact h2 {

  font-size: clamp(28px, 3.15vw, 48px) !important;
  line-height: .98 !important;
  max-width: 680px !important;

}

.kiklos-page .contact .lead {

  font-size: 13.5px !important;
  line-height: 1.38 !important;
  max-width: 560px !important;

}

.kiklos-page .action-list {

  border: 1px solid rgba(31,33,32,.12) !important;
  background: rgba(255,255,255,.18) !important;

}

.kiklos-page .action-card {

  padding: 14px 18px !important;
  background: rgba(255,255,255,.24) !important;
  border-bottom: 1px solid rgba(31,33,32,.10) !important;

}

.kiklos-page .action-card.primary {

  background: #1f2120 !important;
  color: #f5f1eb !important;

}

.kiklos-page .action-card span {

  font-size: 9px !important;
  letter-spacing: .14em !important;
  margin-bottom: 6px !important;

}

.kiklos-page .action-card strong {

  font-size: 17px !important;

}

.kiklos-page .action-card small {

  font-size: 11.5px !important;
  line-height: 1.32 !important;

}

.kiklos-page {

  --kiklos-brown: #63524c;
  --kiklos-green: #5b9f2b;
  --kiklos-grey: #aeb4b7;
  --kiklos-grey-deep: #8f9698;
  --kiklos-paper: #ded7cd;
  --kiklos-ink: #1f2120;

}

.kiklos-page #intro.hero {

  background:
    radial-gradient(circle at 94% 10%, rgba(91,159,43,.10) 0, rgba(91,159,43,.10) 13vw, transparent 13.2vw),
    var(--kiklos-paper) !important;

}

.kiklos-page #intro h1 {

  font-size: clamp(40px, 4.85vw, 70px) !important;
  line-height: .99 !important;
  max-width: 760px !important;

}

.kiklos-page .eyebrow {

  color: rgba(99,82,76,.62) !important;

}

.kiklos-page .button.primary,
.kiklos-page .action-card.primary {

  background: var(--kiklos-brown) !important;
  border-color: var(--kiklos-brown) !important;
  color: #f6f2eb !important;

}

.kiklos-page .button:not(.primary):hover {

  border-color: var(--kiklos-green) !important;

}

.kiklos-page #designed.designed-viomes,
.kiklos-page .designed-viomes {

  background: #050505 !important;
  color: #f6f2eb !important;

}

.kiklos-page .designed-viomes h1,
.kiklos-page .designed-viomes h2,
.kiklos-page .designed-viomes h3,
.kiklos-page .designed-viomes p,
.kiklos-page .designed-viomes .lead,
.kiklos-page .designed-viomes .copy,
.kiklos-page .designed-viomes .eyebrow {

  color: #f6f2eb !important;

}

.kiklos-page .designed-viomes .lead,
.kiklos-page .designed-viomes .copy {

  color: rgba(246,242,235,.74) !important;

}

.kiklos-page .designed-viomes .eyebrow {

  color: rgba(246,242,235,.55) !important;

}

.kiklos-page #products.products-section {

  background:
    radial-gradient(circle at 100% 0%, rgba(99,82,76,.11) 0, rgba(99,82,76,.11) 11vw, transparent 11.2vw),
    linear-gradient(180deg, #b9bfc0 0%, #aeb4b7 100%) !important;

}

.kiklos-page #products h2,
.kiklos-page #products h3,
.kiklos-page #products p,
.kiklos-page #products .lead {

  color: #1f2120 !important;

}

.kiklos-page #products .eyebrow {

  color: rgba(31,33,32,.56) !important;

}

.kiklos-page #products .gallery-grid {

  grid-template-columns: 1.15fr .85fr .85fr !important;
  gap: 18px !important;

}

.kiklos-page #products .frame {

  background: rgba(246,242,235,.18) !important;
  border-color: rgba(31,33,32,.10) !important;

}

.kiklos-page #products .architectural-crop img {

  object-fit: cover !important;
  padding: 0 !important;

}

.kiklos-page #products .gallery-grid .hero-photo img {

  object-position: 44% 52% !important;

}

.kiklos-page #products .gallery-grid .product-shot:nth-child(2) img {

  object-position: 50% 62% !important;

}

.kiklos-page #products .gallery-grid .product-shot:nth-child(3) img {

  object-position: 50% 58% !important;

}

.kiklos-page #products .gallery-grid .product-shot:nth-child(4) img {

  object-position: 50% 58% !important;

}

.kiklos-page .contact {

  background:
    radial-gradient(circle at 8% 100%, rgba(99,82,76,.12) 0, rgba(99,82,76,.12) 9vw, transparent 9.2vw),
    radial-gradient(circle at 94% 0%, rgba(91,159,43,.10) 0, rgba(91,159,43,.10) 12vw, transparent 12.2vw),
    #e8e1d7 !important;
  padding-top: 34px !important;
  padding-bottom: 0 !important;

}

.kiklos-page .contact-grid {

  align-items: center !important;
  gap: 34px !important;
  padding-bottom: 34px !important;

}

.kiklos-page .contact h2 {

  font-size: clamp(28px, 3.15vw, 48px) !important;
  line-height: .98 !important;
  max-width: 680px !important;

}

.kiklos-page .contact .lead {

  font-size: 13.5px !important;
  line-height: 1.38 !important;
  max-width: 560px !important;

}

.kiklos-page .action-list {

  border: 1px solid rgba(31,33,32,.12) !important;
  background: rgba(255,255,255,.16) !important;

}

.kiklos-page .action-card {

  padding: 14px 18px !important;
  background: rgba(255,255,255,.24) !important;
  border-bottom: 1px solid rgba(31,33,32,.10) !important;

}

.kiklos-page .action-card.primary {

  background: #1f2120 !important;
  color: #f5f1eb !important;

}

.kiklos-page .mini-footer-kiklos {

  border-top: 1px solid rgba(31,33,32,.10);
  background: rgba(246,242,235,.48);

}

.kiklos-page .mini-footer-inner {

  min-height: 82px;
  display: grid;
  grid-template-columns: 1fr 1.3fr 1fr;
  align-items: center;
  gap: 24px;
  font-size: 13px;
  color: rgba(31,33,32,.70);

}

.kiklos-page .mini-footer-brand {

  font-weight: 800;
  letter-spacing: .035em;
  color: var(--kiklos-brown);

}

.kiklos-page .mini-footer-copy {

  text-align: center;

}

.kiklos-page .mini-footer-made {

  text-align: right;

}

@media (max-width: 900px) {
.kiklos-page .mini-footer-inner {

    grid-template-columns: 1fr;
    min-height: auto;
    padding: 22px 0;
    text-align: left;
  
}

.kiklos-page .mini-footer-copy,
.kiklos-page .mini-footer-made {

    text-align: left;
  
}


}

.kiklos-page #products .gallery-grid .hero-photo img {

  object-fit: cover !important;
  object-position: 50% 48% !important;

}

.kiklos-page #products .gallery-grid figure:nth-child(2) img {

  object-fit: cover !important;
  object-position: 50% 55% !important;

}

.kiklos-page #products .gallery-grid figure:nth-child(3) img {

  object-fit: cover !important;
  object-position: 50% 50% !important;

}

.kiklos-page #products .gallery-grid figure:nth-child(4) img {

  object-fit: cover !important;
  object-position: 50% 52% !important;

}

.kiklos-page #products .gallery-grid.premium-gallery {

  display:grid !important;
  grid-template-columns:minmax(0,1.18fr) minmax(320px,.82fr) !important;
  gap:18px !important;
  grid-template-rows:none !important;
  align-items:stretch;

}

.kiklos-page #products .gallery-grid.premium-gallery .frame {

  border-radius:22px;
  overflow:hidden;
  background:rgba(245,242,236,.6);

}

.kiklos-page #products .gallery-grid.premium-gallery .hero-photo {

  min-height:548px;

}

.kiklos-page #products .gallery-grid.premium-gallery .hero-photo img {

  width:100%;
  height:100%;
  object-fit:cover !important;
  object-position:74% 50% !important;
  padding:0 !important;
  display:block;

}

.kiklos-page #products .gallery-grid.premium-gallery .gallery-stack {

  display:grid;
  grid-template-rows:repeat(3,1fr);
  gap:18px;
  min-height:548px;

}

.kiklos-page #products .gallery-grid.premium-gallery .gallery-stack .frame {

  min-height:0;
  height:170px;
  position:relative;

}

.kiklos-page #products .gallery-grid.premium-gallery .gallery-stack img {

  width:100%;
  height:100%;
  display:block;

}

.kiklos-page #products .gallery-grid.premium-gallery .lids-photo img {

  object-fit:cover !important;
  object-position:center 52% !important;
  padding:0 !important;

}

.kiklos-page #products .gallery-grid.premium-gallery .black-photo img {

  object-fit:contain !important;
  object-position:center 56% !important;
  padding:12px 18px 8px !important;

}

.kiklos-page #products .gallery-grid.premium-gallery .dome-photo img {

  object-fit:contain !important;
  object-position:center 54% !important;
  padding:10px 18px 6px !important;

}

@media(max-width:1140px) {
.kiklos-page #products .gallery-grid.premium-gallery {

    grid-template-columns:1fr !important;
  
}

.kiklos-page #products .gallery-grid.premium-gallery .hero-photo,
.kiklos-page #products .gallery-grid.premium-gallery .gallery-stack {

    min-height:auto;
  
}

.kiklos-page #products .gallery-grid.premium-gallery .gallery-stack {

    grid-template-columns:1fr;
    grid-template-rows:auto;
  
}

.kiklos-page #products .gallery-grid.premium-gallery .gallery-stack .frame {

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


}

@media(max-width:760px) {
.kiklos-page #products .gallery-grid.premium-gallery .hero-photo {

    min-height:360px;
  
}

.kiklos-page #products .gallery-grid.premium-gallery .gallery-stack .frame {

    min-height:180px;
  
}


}

.kiklos-page #products .gallery-grid.premium-gallery {

  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) !important;
  gap:20px !important;

}

.kiklos-page #products .gallery-grid.premium-gallery .hero-photo {

  min-height:590px !important;

}

.kiklos-page #products .gallery-grid.premium-gallery .hero-photo img {

  object-fit:contain !important;
  object-position:center !important;
  padding:10px 16px !important;

}

.kiklos-page #products .gallery-grid.premium-gallery .gallery-stack {

  min-height:590px !important;
  display:grid !important;
  grid-template-columns:.98fr 1.02fr !important;
  grid-template-rows:1fr 1fr !important;
  gap:20px !important;

}

.kiklos-page #products .gallery-grid.premium-gallery .gallery-stack .frame {

  height:auto !important;
  min-height:0 !important;

}

.kiklos-page #products .gallery-grid.premium-gallery .lids-photo {

  grid-column:1;
  grid-row:1 / span 2;

}

.kiklos-page #products .gallery-grid.premium-gallery .black-photo {

  grid-column:2;
  grid-row:1;

}

.kiklos-page #products .gallery-grid.premium-gallery .dome-photo {

  grid-column:2;
  grid-row:2;

}

.kiklos-page #products .gallery-grid.premium-gallery .lids-photo img {

  object-fit:contain !important;
  object-position:center !important;
  padding:10px 16px !important;

}

.kiklos-page #products .gallery-grid.premium-gallery .black-photo img,
.kiklos-page #products .gallery-grid.premium-gallery .dome-photo img {

  object-fit:contain !important;
  padding:10px 16px !important;

}

.kiklos-page {

  font-family: "Ubuntu", Arial, sans-serif !important;
  text-rendering: geometricPrecision;

}

.kiklos-page h1,
.kiklos-page h2,
.kiklos-page h3 {

  letter-spacing: -.052em !important;

}

.kiklos-page #intro h1 {

  font-size: clamp(38px, 4.25vw, 64px) !important;
  line-height: 1.01 !important;
  letter-spacing: -.052em !important;
  max-width: 720px !important;

}

.kiklos-page h2 {

  font-size: clamp(34px, 4.1vw, 56px) !important;
  line-height: .98 !important;

}

.kiklos-page h3 {

  font-size: 18px !important;
  line-height: 1.08 !important;
  letter-spacing: -.035em !important;

}

.kiklos-page .lead {

  font-size: clamp(16px, 1.32vw, 20px) !important;
  line-height: 1.42 !important;

}

.kiklos-page .lead.small {

  font-size: 15.5px !important;
  line-height: 1.52 !important;

}

.kiklos-page .copy {

  font-size: 14px !important;
  line-height: 1.58 !important;

}

.kiklos-page .eyebrow {

  font-size: 11px !important;
  letter-spacing: .16em !important;
  font-weight: 800 !important;

}

.kiklos-page .note strong {

  font-size: 19px !important;
  line-height: 1.13 !important;

}

.kiklos-page .note p {

  font-size: 13.5px !important;
  line-height: 1.45 !important;

}

.kiklos-page .bullet strong {

  font-size: 14px !important;
  line-height: 1.16 !important;

}

.kiklos-page .bullet span {

  font-size: 12.7px !important;
  line-height: 1.45 !important;

}

.kiklos-page .action-card strong {

  font-size: 17px !important;
  line-height: 1.08 !important;

}

.kiklos-page .action-card small {

  font-size: 11.5px !important;
  line-height: 1.32 !important;

}

.kiklos-page .main-nav,
.kiklos-page .side-nav,
.kiklos-page .button {

  font-size: 13px !important;

}

@media(max-width:760px) {
.kiklos-page #intro h1 {

    font-size: 42px !important;

}

.kiklos-page h2 {

    font-size: 34px !important;

}


}

/* VIOMES website button — copied verbatim from
   kiklos_with_viomes_burgundy_button.html (repo root), added without
   changing the existing layout. */
.kiklos-page .side-nav .viomes-site-button{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:10px 16px !important;
  border:1px solid #DCD8CF !important;
  border-radius:10px !important;
  background:#56393E;
  color:#DCD8CF;
  font-weight:700;
  letter-spacing:.01em;
  transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.kiklos-page .side-nav .viomes-site-button:hover{
  background:#6A474D;
  border-color:#DCD8CF !important;
  transform:translateY(-1px);
}
.kiklos-page .side-nav .viomes-site-button span{font-size:15px;line-height:1;}
@media(max-width:760px){
  .kiklos-page .side-nav .viomes-site-button{display:inline-flex !important;padding:9px 12px !important;}
}

/* #products gallery — remove the card treatment (rounded corners + tinted
   background box) so these photos sit directly on the section background,
   matching the hero section above. object-fit:cover (instead of contain)
   is what makes that work: it fills the frame completely, so the frame's
   own background never has a chance to show through. */
.kiklos-page #products .gallery-grid.premium-gallery .frame{
  border-radius:0 !important;
  background:transparent !important;
}
.kiklos-page #products .gallery-grid.premium-gallery .hero-photo img{
  object-fit:cover !important;
  object-position:74% 50% !important;
  padding:0 !important;
}
.kiklos-page #products .gallery-grid.premium-gallery .lids-photo img,
.kiklos-page #products .gallery-grid.premium-gallery .black-photo img,
.kiklos-page #products .gallery-grid.premium-gallery .dome-photo img{
  object-fit:cover !important;
  padding:0 !important;
  /* These three source files have a thin white matte border baked into the
     photo itself (not a CSS artifact) — cover alone stretches that border
     into a visible stripe. Scaling up slightly pushes it past the frame's
     clipped edge. Proper fix is re-exporting these without the border. */
  transform:scale(1.1);
}

/* Hero side-stack (the two smaller images beside the main hero photo) —
   same fix as the #products gallery above: drop the card background so
   these sit directly on the page background like the main hero image,
   which already uses object-fit:cover with no background of its own. */
.kiklos-page .hero-side-stack .product-shot{
  background:transparent !important;
}
.kiklos-page .hero-side-stack .product-shot img{
  object-fit:cover !important;
  padding:0 !important;
}

/* EL/EN/DE/FR switcher (MinisiteLangSwitch) — sits before the viomes.gr pill
   in the header side-nav. The resets neutralise this page's own
   `.side-nav a:last-child` pill styling for the inner links. */
.kiklos-page .side-nav .minisite-lang{
  display:flex;
  align-items:center;
  gap:9px;
}
.kiklos-page .side-nav .minisite-lang a,
.kiklos-page .side-nav .minisite-lang a:last-child{
  border:0;
  padding:0;
  border-radius:0;
  background:none;
  color:var(--soft);
  font-size:12px !important;
  letter-spacing:.06em;
  text-decoration:none;
  opacity:.6;
  transition:opacity .2s ease;
}
.kiklos-page .side-nav .minisite-lang a:hover{opacity:1;}
.kiklos-page .side-nav .minisite-lang a.is-active{
  opacity:1;
  font-weight:700;
}
@media(max-width:760px){
  .kiklos-page .side-nav .minisite-lang{gap:7px;}
}