/* Root */
:root{
  --page-bg:#D4D8D8;
  --panel-bg:#E6E8DD;
  --card-bg:#FCF8F2;

  --text:#4C453F;
  --muted:rgba(76,69,63,0.85);

  --accent:#5e1a31;

  --border:rgba(76,69,63,0.18);
  --border-strong:rgba(76,69,63,0.35);

  --shadow:0 10px 20px -10px rgba(0,0,0,0.35);

  --r:12px;
  --r-sm:10px;

  --maxw:980px;
}



font-family:"Harmattan";
font-family:"Hepta Slab";
font-family:"IBM Plex Sans";
font-family:"Passions Conflict";
font-family:"Noto Serif Khitan Small Script";




/* Base */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0;
  background:var(--page-bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}
a{color:var(--accent);text-decoration:none;}
a:hover{opacity:0.9;}

/* Layout */
.shell{padding:0 12px 32px;}
.frame{max-width:var(--maxw);margin:0 auto;}
.panel{
  background:var(--panel-bg);
  border-radius:0 0 var(--r) var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
}


.panel{
  transition:transform 0.35s ease;
}

@media (min-width:900px){
  .panel{
    transform:scale(0.95);
    transform-origin:top center;
  }


}


.panel{
  transition:transform 0.35s ease;
}

@media (min-width:1100px){
  .panel{
    transform:scale(0.9);
    transform-origin:top center;
  }
}


/* Header visibility */
.hdr_desktop{display:block;}
.hdr_mobile{display:none;}

/* Header desktop */
.hdr_desktop{
  position:relative;
  background-color:#B7B3AA;
  background-image:var(--desk-left),url("/img/desktop/header/filagree-clay-desk.webp");
  background-repeat:no-repeat,no-repeat;
  background-position:left center,right center;
  background-size:auto 100%,auto 100%;
  border-radius:0 0 12px 12px;
}

.hdr_desktop_grid{
  display:grid;
  grid-template-columns:1fr 1fr 140px;
  gap:12px;
  align-items:center;
  padding:10px 14px;
  min-height:96px;
}

.hdr_desktop_left{
  display:flex;
  align-items:center;
  justify-content:flex-start;
}

.hdr_desktop_mid{
  display:flex;
  align-items:center;
  justify-content:center;
}

.hdr_desktop_right{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.desk_logo{
  width:min(420px,92%);
  height:auto;
  display:block;
  position:absolute;
  margin-bottom:12px;
  left:50%;
  transform:translateX(-50%);
}

.desk_iconlink{
  width:66px;
  height:66px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  filter:drop-shadow(2px 2px 3px rgba(0,0,0,0.25));
  transition:transform 0.2s ease, background 0.2s ease;
}

.desk_iconlink img{
  width:66px;
  height:66px;
  display:block;
  filter:drop-shadow(2px 2px 3px rgba(0,0,0,0.25));
}

.desk_iconlink:hover{
  transform:scale(1.08);
  filter:drop-shadow(2px 2px 3px rgba(0,0,0,0.25));
}



.desk_nav{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  flex-wrap:wrap;
  padding:6px 14px;
  line-height:1;
  background:linear-gradient(to bottom, #87827a, #b7b3aa);
  border-radius:0 0 12px 12px;
}



.desk_navlink{
  color:#fff;
  font-weight:500;
  font-size:18px;
  padding:10px 10px;
  border-radius:10px;
  letter-spacing:0.02em;
  transition:background 0.4s ease, transform 0.4s ease;
  font-family:"Shafarik";
}

.desk_navlink:hover{
  color:#fff;
  filter:brightness(1.25);
  background:none;
  transform:translateY(-6px);
}

.desk_navlink.is_active{
  color:#5e1a31;
  font-weight:800;
  font-family:"Shafarik";
}

/* Header mobile */
.hdr_mobile{
  --railw:120px;
  position:relative;
  width:100%;
  height:300px;
  overflow:visible;
  background:transparent;
}



.m_leftimg{
  position:absolute;
  top:0;
  left:0;
  border-top-left-radius:var(--r);
  height:100%;
  width:calc(100% - 120px);
  object-fit:cover;
  object-position:left top;
  display:block;
    opacity:1;
  transition:opacity .35s ease;
}

.m_leftimg.is_loading{
  opacity:0;
}

.m_leftimg.is_ready{
  opacity:1;
}

.m_navbtn{
  position:absolute;
  font-size:18px;
  font-weight:800;
  height:52px;
  line-height:52px;
  bottom:0;
  left:0;
  width:calc(100% - 120px);
  margin:0;
  padding:0 14px;
  border:none;
  outline:none;
  background:rgba(230,232,221,0.90);
  color:var(--text);
  font-family:"Shafarik";
  letter-spacing:0.12em;
}

.m_navbtn:hover{transform:none;}

.m_navmenu{
  position:absolute;
  top:0;
  padding-top:24px;
  bottom:52px;
  left:0;
  width:calc(100% - 120px);
  z-index:6;
  background:rgba(230,232,221,0.90);
  border:none;
  border-top-left-radius:12px;
  overflow-x:hidden;
  overflow-y:auto;
  box-sizing:border-box;
}

.m_navmenu:not([hidden]){
  animation:m_menu_in 0.16s ease-out both;
}

@keyframes m_menu_in{
  from{opacity:0;}
  to{opacity:1;}
}

.m_navlink{
  display:block;
  padding:10px 10px;
  border-radius:10px;
  font-weight:800;
  color:var(--text);
  transition:transform 0.15s ease;
  line-height:0.9;
  font-family:"Shafarik";
}

.m_navlink:hover{
  color:var(--accent);
  background:rgba(255,255,255,0.6);
  transform:translateX(4px);
}

.m_rail{
  position:absolute;
  top:0;
  right:0;
  width:var(--railw);
  height:100%;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:14px 10px;
  box-sizing:border-box;
  overflow:hidden;
  border-top-right-radius:var(--r);
  border-bottom-right-radius:var(--r);
  background-image:url("/img/backg/filagree-clay-mob.webp");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}



.m_icon{
  width:52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  filter:drop-shadow(2px 2px 3px rgba(0,0,0,0.25));
}

.m_icon img{
  width:52px;
  height:52px;
  display:block;
  filter:drop-shadow(2px 2px 3px rgba(0,0,0,0.25));
}

.m_railtext{
  margin-top:auto;
  margin-bottom:10px;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-weight:800;
  letter-spacing:0.08em;
  font-size:32px;
  color:rgba(230,232,221,0.92);
  text-shadow:0 3px 10px rgba(0,0,0,0.35);
  font-family:"Shafarik";
}

.m_bevel{
  position:absolute;
  left:0;
  bottom:-18px;
  width:calc(100% - 120px);
  height:18px;
  background:#7b746b;
  border-bottom-right-radius:14px;
  z-index:1;
}

/* Main */
.main{padding:16px;}

.card{
	display:flow-root; 
  background:var(--card-bg);
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  padding:14px;
  margin-top:12px;
  margin-bottom:16px;
}


.card .p{
  font-family:"Hepta Slab", system-ui, serif;
  font-weight:600;
  line-height:1.85;
  font-size:18px;
}

@media (max-width:575px){
  .card .p{ font-size:14px; }
}


@media (min-width:866px){
  .intro_text{
    margin-top:12px;
  }
}



.card::after{
  content:"";
  display:block;

}

.float_clear{ clear:both; }


.card_sub{
  background:#E8E3DC;
  margin-bottom:16px;
  font-family:"IBMsans", system-ui, sans-serif;
  font-weight:500;
  margin-top:46px;
}



.h2{
  margin:0 0 8px;
  font-size:60px;
  color:var(--accent);
  font-weight:200;
  font-family:"Passions Conflict";
  text-align:right;

}

.p{
  margin:0;
  color:var(--muted);
  font-family:"Harmattan";
}

.card_sub .contact_kv .p{
  font-family:"IBM Plex Sans", system-ui, sans-serif;
  font-weight:500;
}

.img_float{
  width:260px;
  max-width:40%;
  height:auto;
  float:right;
  margin:4px 0 10px 14px;
  display:block;
  border:none;
  outline:4px solid #5e1a31;
  outline-offset:-4px;
  border-radius:4px;
}







@media (max-width:575px){
  .img_float{
    width:160px;
    max-width:45%;
  }
}




/* Footer */
.footer{
  padding:18px 8px 0;
  text-align:center;
}

.footer_text{
  color:var(--muted);
  font-size:8px;
  font-weight:600;
  font-family:"Noto Serif Khitan Small Script";
  line-height:0.35;
}

.footer_line{
  display:block;
  margin:20px auto 0 auto;
  max-width:20px;
  max-height:20px;
  width:auto;
  height:auto;
}

/* Contact */
.contact_page{
  max-width:980px;
  margin:0 auto;
  padding:18px 12px 28px;
}

.contact_card{
  background:#FCF8F2;
  border-radius:var(--r);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  padding:16px;
  margin-bottom:14px;
}

.contact_form_wrap{margin-top:38px;}

.contact_grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:16px;
  align-items:start;
}

.contact_media{display:block;}

.contact_iow_wrap{
  width:100%;
  border:none;
}

.contact_media_img{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--r-sm);
  border:none;
}

.contact_details{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.contact_title{
  margin:0;
  font-size:22px;
  letter-spacing:0.03em;
}

.contact_line{
  margin:0;
  font-size:14px;
  line-height:1.4;
}

.contact_kv{
  display:grid;
  gap:6px;
  font-size:14px;
}

.contact_links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:6px;
}

.contact_links a{
  flex:1 1 calc(50% - 10px);
  padding:10px 12px;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  background:rgba(255,255,255,0.6);
  font-weight:800;
  font-size:13px;
  text-align:center;
}


.contact_form{
  width:100%;
  max-width:100%;
}

.contact_form *{
  box-sizing:border-box;
}

.contact_form input,
.contact_form select,
.contact_form textarea,
.contact_form button{
  width:100%;
  max-width:100%;
}


@media (max-width:575px){
  .contact_links a{
    flex:1 1 100%;
  }
}


#find_address_btn{
  display:block;
  margin-top:12px;
  margin-bottom:6px;
}

.contact_form_wrap b,
.contact_form_wrap strong{
  font-weight:800;
}

.row_btns button{
  padding:16px 18px;
  border-radius:14px;
  cursor:pointer;
  font-weight:700;
}

.row_btns button:nth-child(1){
  background:rgba(0,160,90,0.15);
  border:1px solid rgba(0,160,90,0.45);
}

.row_btns button:nth-child(2){
  background:rgba(40,120,255,0.15);
  border:1px solid rgba(40,120,255,0.45);
}

.qr_row{
  display:flex;
  gap:14px;
  align-items:center;
  margin-top:8px;
}

.qr_stack{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
}

.lens_icon{height:48px;width:auto;opacity:0.85;}
.logo_img{height:44px;width:auto;display:block;}

.zoom-wrapper{cursor:zoom-in;}
.zoom-wrapper input{display:none;}
.zoom-wrapper img{
  height:90px;
  border-radius:10px;
  border:1px solid var(--border);
  background:#fff;
}
.zoom-wrapper input:checked + img{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) scale(3);
  z-index:9999;
  box-shadow:0 0 20px rgba(0,0,0,0.6);
}

.card-container{
  width:260px;
  max-width:100%;
  overflow:visible;
}

.c_zoom{cursor:zoom-in;}

.c_zoom:hover{
  box-shadow:0 0 0 3px rgba(94,26,49,0.25);
}

.c_zoom_wrap{
  position:relative;
  display:inline-block;
}

.c_zoom_icon{
  position:absolute;
  right:8px;
  bottom:8px;
  width:40px;
  height:40px;
  background:rgba(255,255,255,0.8);
  border-radius:20%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:32px;
  pointer-events:none;
  z-index:2;
}

.card-container .zoom-wrapper{
  display:block;
  cursor:zoom-in;
}

.card-container img{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  background:#fff;
}

.contact_form input,
.contact_form select,
.contact_form textarea{
  width:100%;
  padding:10px;
  border-radius:var(--r-sm);
  border:1px solid var(--border);
  background:#fff;
  font-size:14px;
}

.contact_mobile_only{display:none;}
.c_lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:9999;

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 0.25s ease, visibility 0.25s ease;
}

.c_lightbox.is_open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.c_lightbox img{
  max-width:min(1100px, 92vw);
  max-height:92vh;
  width:auto;
  height:auto;
  border-radius:12px;
  display:block;

  opacity:0;
  transform:scale(0.98);
  transition:opacity 0.25s ease, transform 0.25s ease;
}

.c_lightbox.is_open img{
  opacity:1;
  transform:scale(1);
}

body.c_no_scroll{
  overflow:hidden;
}

/* Common */
.contact_media_img.img_float{
  width:260px;
  max-width:40%;
  height:auto;
  float:right;
  margin:4px 0 10px 14px;
}

/* Responsive */
@media (max-width:880px){
  .desk_logo{width:80%;}
  .desk_iconlink{width:48px;height:48px;}
  .desk_iconlink img{width:48px;height:48px;}

  .desk_nav{
    display:grid;
    grid-template-columns:repeat(6, 1fr);
    gap:10px;
    padding:6px 10px;
  }

  .desk_navlink{
    padding:8px 6px;
    font-size:14px;
    text-align:center;
    white-space:nowrap;
    font-family:"Shafarik";
  }
}

.hdr_desktop_grid,
.desk_nav,
.desk_logo,
.desk_iconlink{
  transition:all 0.3s ease;
}

@media (min-width:575px) and (max-width:900px){
  .desk_logo{
    max-width:70%;
    max-height:70%;
    width:auto;
    height:auto;
    object-fit:contain;
  }
}

@media (max-width:575px){
  .shell{padding:0 10px 22px;}
  .panel{border-top-left-radius:12px;}
  .hdr_desktop{display:none;}
  .hdr_mobile{display:block;}

  .contact_iow_wrap{display:none;}
  .contact_grid{grid-template-columns:1fr;}
  .qr_row .card-container{display:block;}
  .contact_mobile_only{display:block;}
  .qr_stack{display:none;}

  .h2{font-size:36px;}

  .contact_media_img.img_float{
    width:160px;
    max-width:45%;
    margin:4px 0 10px 10px;
  }

  .card-container{
    margin-left:auto;
    margin-right:auto;
  }
}


@media (min-width:576px){
  .card_sub .contact_kv{
    display:block;
    column-count:2;
    column-gap:28px;
  }

  .card_sub .contact_kv .p{
    break-inside:avoid;
    margin:0 0 8px;
  }
}