/* ==========================================================================
   Klima Varna — components: nav, buttons, cards, forms, accordion, table
   ========================================================================== */

/* --- Floating glass nav -------------------------------------------------- */
.site-head{position:fixed;top:0;left:0;right:0;z-index:50;pointer-events:none;padding:18px var(--gutter) 0}
/* Liquid glass: a thin translucent lens with a specular rim, not a white bar. */
.nav{
  pointer-events:auto;position:relative;isolation:isolate;
  display:flex;align-items:center;gap:clamp(.6rem,2vw,1.6rem);
  width:max-content;max-width:100%;margin-inline:auto;
  padding:9px 9px 9px 20px;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg,rgba(255,255,255,.76),rgba(252,250,245,.62));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(255,255,255,.3),
    0 0 0 1px rgba(14,28,30,.055),
    0 2px 8px -4px rgba(7,46,51,.18),
    0 22px 48px -26px rgba(7,46,51,.45);
  backdrop-filter:blur(26px) saturate(190%) brightness(1.06);
  -webkit-backdrop-filter:blur(26px) saturate(190%) brightness(1.06);
  transition:background .5s var(--ease),box-shadow .5s var(--ease),backdrop-filter .5s var(--ease);
}
/* Refraction sheen — light pools at the top-left, warm bounce at the bottom-right. */
.nav::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(130% 180% at 10% -40%,rgba(255,255,255,.7),transparent 46%),
    radial-gradient(90% 150% at 92% 150%,rgba(217,154,60,.14),transparent 54%);
}
/* Specular rim: a 1px gradient border that catches the light unevenly. */
.nav::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,
    rgba(255,255,255,.95) 0%,
    rgba(255,255,255,.35) 32%,
    rgba(255,255,255,.05) 52%,
    rgba(255,255,255,.55) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
}
.is-scrolled .nav{
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(250,248,243,.89));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(255,255,255,.34),
    0 0 0 1px rgba(14,28,30,.07),
    0 2px 10px -5px rgba(7,46,51,.2),
    0 26px 56px -28px rgba(7,46,51,.5);
  backdrop-filter:blur(38px) saturate(200%) brightness(1.03);
  -webkit-backdrop-filter:blur(38px) saturate(200%) brightness(1.03);
}
/* Without backdrop-filter the pill must stay legible on its own. */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .nav{background:rgba(250,248,243,.94)}
  .is-scrolled .nav{background:rgba(250,248,243,.97)}
}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:600;letter-spacing:-.03em;font-size:1.02rem;white-space:nowrap;color:var(--ink)}
.brand__mark{width:30px;height:30px;flex:none}
.brand__mark svg,.brand img{display:block;width:100%;height:auto}
.brand img{max-height:34px;width:auto}
.brand small{display:block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(14,28,30,.45);font-weight:400;margin-top:2px}
.band-deep .brand,.site-foot .brand{color:var(--fg)}
.site-foot .brand small{color:var(--fg-faint)}

.nav__menu{display:flex;align-items:center;gap:clamp(.2rem,1.2vw,.5rem)}
.nav__menu a{
  display:block;padding:.55rem .78rem;border-radius:var(--r-pill);
  font-size:.94rem;color:rgba(14,28,30,.78);white-space:nowrap;
  transition:color .35s var(--ease),background .35s var(--ease),box-shadow .35s var(--ease);
}
.nav__menu a:hover,.nav__menu .current-menu-item>a{
  color:var(--marine);
  background:rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(14,28,30,.05),0 2px 5px -3px rgba(7,46,51,.25);
}

.nav__tel{
  display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);
  font-size:.82rem;letter-spacing:.02em;color:rgba(14,28,30,.7);padding-inline:.4rem;white-space:nowrap;
  transition:color .35s var(--ease);
}
.nav__tel:hover{color:var(--marine)}
.nav__toggle,.nav__call{display:none}

@media (max-width:1080px){
  .site-head{padding-top:12px}
  /* Full-bleed on phones: the glass sits over headlines, so it needs more body. */
  .nav{
    width:100%;justify-content:space-between;padding-left:16px;
    background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(252,250,245,.62));
  }
  .nav__menu,.nav__tel,.nav>.btn{display:none}
  .brand small{display:none}
  .nav__call{
    display:inline-flex;align-items:center;justify-content:center;flex:none;
    width:44px;height:44px;border-radius:var(--r-pill);margin-left:auto;margin-right:.4rem;
    background:var(--marine);color:var(--on-accent);
    transition:transform .45s var(--spring),box-shadow .4s var(--ease);
  }
  .nav__call:hover{transform:translateY(-2px);box-shadow:0 14px 26px -14px rgba(12,82,87,.8)}
  .nav__call svg{width:18px;height:18px}
  .nav__toggle{
    display:inline-flex;align-items:center;justify-content:center;flex-direction:column;
    width:44px;height:44px;border-radius:var(--r-pill);
    background:rgba(255,255,255,.55);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(14,28,30,.08),0 2px 6px -3px rgba(7,46,51,.24);
    cursor:pointer;border:0;
  }
  .nav__toggle span{display:block;width:17px;height:1.6px;background:var(--ink);border-radius:2px;transition:transform .5s var(--spring),opacity .3s var(--ease)}
  .nav__toggle span+span{margin-top:5px}
  /* :last-child is the screen-reader label — the bars are 1 and 2. */
  .is-menu-open .nav__toggle span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
  .is-menu-open .nav__toggle span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
}
@media (max-width:420px){
  .brand{font-size:.92rem}
  .brand__mark{width:26px;height:26px}
}

/* Mobile overlay menu */
.navmodal{
  position:fixed;inset:0;z-index:49;display:grid;align-content:safe center;
  padding:calc(var(--nav-h) + 30px) var(--gutter) 96px;
  overflow-y:auto;overscroll-behavior:contain;
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(248,246,241,.72));
  backdrop-filter:blur(34px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter:blur(34px) saturate(180%) brightness(1.04);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s;
}
.is-menu-open .navmodal{opacity:1;visibility:visible}
.navmodal ul{display:grid;gap:.2rem}
.navmodal a{
  display:block;padding:.3rem 0;font-size:clamp(1.35rem,5.2vw,1.8rem);font-weight:500;
  letter-spacing:-.035em;line-height:1.15;color:var(--ink);
  opacity:0;transform:translateY(28px);
}
.is-menu-open .navmodal a{opacity:1;transform:none;transition:opacity .6s var(--ease) var(--d,0s),transform .7s var(--spring) var(--d,0s)}
.navmodal .navmodal__foot{margin-top:2.4rem;display:grid;gap:1rem;border-top:1px solid var(--line);padding-top:1.6rem}
.navmodal__foot a{font-size:1rem;opacity:1;transform:none;font-family:var(--font-mono);color:var(--marine)}

/* --- Buttons ------------------------------------------------------------- */
.btn{
  --btn-bg:var(--marine);--btn-fg:var(--on-accent);--btn-dot:var(--sun);--btn-ring:transparent;
  display:inline-flex;align-items:center;gap:.7rem;
  padding:.82rem 1.05rem .82rem 1.25rem;
  border:0;border-radius:var(--r-pill);cursor:pointer;
  background:var(--btn-bg);color:var(--btn-fg);
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 14px 30px -18px rgba(12,82,87,.85),0 0 0 1px var(--btn-ring);
  font-size:.95rem;font-weight:500;letter-spacing:-.015em;line-height:1;
  text-align:left;white-space:nowrap;
  transition:transform .45s var(--spring),background .4s var(--ease),box-shadow .4s var(--ease),color .4s var(--ease);
}
.btn::before{content:"";width:7px;height:7px;border-radius:1px;background:var(--btn-dot);flex:none;transition:transform .45s var(--spring)}
.btn:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 22px 40px -20px rgba(12,82,87,.9),0 0 0 1px var(--btn-ring)}
.btn:hover::before{transform:rotate(45deg) scale(1.12)}
.btn:active{transform:scale(.978)}
.btn--ghost{
  --btn-bg:transparent;--btn-fg:var(--fg);--btn-dot:var(--marine);--btn-ring:rgba(14,28,30,.16);
  box-shadow:0 0 0 1px var(--btn-ring);
}
.btn--ghost:hover{--btn-bg:rgba(14,28,30,.05);--btn-ring:rgba(14,28,30,.28);box-shadow:0 0 0 1px var(--btn-ring)}
.band-deep .btn--ghost{--btn-fg:var(--fg);--btn-dot:var(--sun);--btn-ring:rgba(242,239,231,.26)}
.band-deep .btn--ghost:hover{--btn-bg:rgba(242,239,231,.08)}
.btn--light{--btn-bg:var(--white);--btn-fg:var(--ink);--btn-dot:var(--sun);--btn-ring:rgba(14,28,30,.08)}
.btn--sun{--btn-bg:var(--sun);--btn-fg:#22160A;--btn-dot:#22160A}
.btn--lg{padding:1rem 1.15rem 1rem 1.45rem;font-size:1rem}
.btn__ico{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:30px;height:30px;margin-left:.15rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.16);
  transition:transform .5s var(--spring),background .4s var(--ease);
}
.btn--ghost .btn__ico,.btn--light .btn__ico{background:rgba(14,28,30,.08)}
.btn:hover .btn__ico{transform:translate(3px,-3px) scale(1.06)}
.btn__ico svg{width:13px;height:13px;stroke:currentColor;stroke-width:1.5;fill:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.7rem;align-items:center}

.link-more{
  display:inline-flex;align-items:center;gap:.55rem;font-size:.9rem;font-weight:500;
  color:var(--fg);transition:gap .4s var(--spring),color .35s var(--ease);
}
.link-more::before{content:"";width:6px;height:6px;background:var(--tick);border-radius:1px;flex:none}
.link-more:hover{gap:.85rem;color:var(--accent)}

/* --- Chips --------------------------------------------------------------- */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.5rem .9rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.66);box-shadow:0 0 0 1px rgba(14,28,30,.09),0 10px 22px -18px rgba(12,82,87,.6);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(14,28,30,.66);
}
.chip::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--sun);flex:none}
.band-deep .chip{background:rgba(242,239,231,.08);box-shadow:0 0 0 1px rgba(242,239,231,.16);color:var(--fg-muted)}

/* --- Card: double bezel -------------------------------------------------- */
.card{
  position:relative;display:flex;flex-direction:column;
  padding:6px;border-radius:var(--r-lg);
  background:rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(14,28,30,.07),var(--shadow-soft);
  transition:transform .65s var(--ease),box-shadow .5s var(--ease),background .5s var(--ease);
}
.card__core{
  position:relative;flex:1;display:flex;flex-direction:column;gap:.7rem;
  padding:clamp(1.3rem,2.4vw,1.9rem);
  border-radius:calc(var(--r-lg) - 6px);
  background:linear-gradient(168deg,#FFFFFF,#F7F4ED);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(14,28,30,.05);
  overflow:hidden;
}
.card:hover{transform:translateY(-5px);box-shadow:0 0 0 1px rgba(14,28,30,.09),var(--shadow-lift)}
.card--marine .card__core{
  background:linear-gradient(160deg,var(--marine),var(--marine-2));
  color:#F2EFE7;box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
}
.card--marine .card__core h3{color:#F6F3EC}
.card--marine .card__core p{color:rgba(242,239,231,.74)}
.card--marine .card__ico{background:rgba(242,239,231,.12);box-shadow:inset 0 0 0 1px rgba(242,239,231,.2)}
.card--marine .card__ico svg{stroke:var(--sun-soft)}
.card--sun .card__core{
  background:linear-gradient(158deg,#F6DFB4,#EBC988);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.card--sun .card__core h3{color:#2B1D08}
.card--sun .card__core p{color:rgba(43,29,8,.72)}
.card--sun .card__ico{background:rgba(43,29,8,.1);box-shadow:inset 0 0 0 1px rgba(43,29,8,.14)}
.card--sun .card__ico svg{stroke:#2B1D08}
.card__ico{
  width:44px;height:44px;border-radius:var(--r-sm);flex:none;
  display:grid;place-items:center;margin-bottom:.4rem;
  background:var(--marine-tint);box-shadow:inset 0 0 0 1px rgba(12,82,87,.14);
}
.card__ico svg{width:22px;height:22px;stroke:var(--marine);stroke-width:1.1;fill:none;stroke-linecap:round;stroke-linejoin:round}
.card p{color:var(--fg-muted);font-size:var(--step--1);line-height:1.62}
.card__num{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;color:var(--fg-faint)}

/* --- Media plate (photo slot with engineered fallback) ------------------- */
.plate{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  background:
    radial-gradient(120% 95% at 16% 6%,rgba(255,236,199,.9),transparent 58%),
    radial-gradient(95% 80% at 92% 96%,rgba(12,82,87,.16),transparent 62%),
    linear-gradient(162deg,#FBF8F1,#E7E2D6 78%);
  box-shadow:0 0 0 1px rgba(14,28,30,.07),var(--shadow-soft);
  isolation:isolate;
}
.plate::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(12,82,87,.07) 0 1px,transparent 1px 64px),
    repeating-linear-gradient(0deg,rgba(12,82,87,.07) 0 1px,transparent 1px 64px);
  mask-image:radial-gradient(78% 68% at 32% 28%,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(78% 68% at 32% 28%,#000,transparent 80%);
}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.plate__art{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(14px,3.2%,44px)}
.plate__art svg{width:100%;height:100%;stroke:rgba(12,82,87,.42);fill:none;stroke-width:1;stroke-linecap:round;stroke-linejoin:round}
.plate__cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:1rem;
  padding:clamp(1.1rem,2.4vw,1.8rem);
  background:linear-gradient(to top,rgba(251,249,244,.97) 30%,rgba(251,249,244,0));
}
.plate--photo .plate__cap{background:linear-gradient(to top,rgba(250,247,241,.97) 34%,rgba(250,247,241,.75) 62%,rgba(250,247,241,0))}
.plate__stat{border-left:2px solid var(--sun);padding-left:.9rem}
.plate__stat b{display:block;font-size:var(--step-3);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--marine)}
.plate__stat span{font-size:.85rem;color:var(--fg-muted)}

/* --- Forms --------------------------------------------------------------- */
.field{display:grid;gap:.45rem}
.field>label,.field .wpcf7-form-control-wrap+label{font-size:.82rem;font-weight:500;color:rgba(14,28,30,.7)}
.field .req{color:#B4532A}
.input,input[type=text],input[type=email],input[type=tel],input[type=url],input[type=search],input[type=number],select,textarea{
  width:100%;padding:.85rem 1rem;border-radius:var(--r-sm);
  background:#FFFFFF;color:var(--ink);
  border:1px solid rgba(14,28,30,.14);
  font-size:.95rem;line-height:1.4;
  transition:border-color .35s var(--ease),box-shadow .35s var(--ease),background .35s var(--ease);
}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E1C1E' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.4rem}
textarea{min-height:130px;resize:vertical}
.input::placeholder,textarea::placeholder{color:rgba(14,28,30,.34)}
.input:focus,input:focus,select:focus,textarea:focus{outline:0;border-color:rgba(12,82,87,.5);box-shadow:0 0 0 4px rgba(12,82,87,.14)}
.form-note{font-size:.78rem;color:rgba(14,28,30,.5);line-height:1.55}
.form-submit{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  margin-top:.4rem;padding:1.05rem 1.05rem 1.05rem 1.5rem;border:0;cursor:pointer;
  border-radius:var(--r-md);background:var(--marine);color:var(--on-accent);
  font-size:1rem;font-weight:600;letter-spacing:-.02em;
  box-shadow:0 18px 34px -20px rgba(12,82,87,.9);
  transition:transform .45s var(--spring),box-shadow .45s var(--ease),filter .4s var(--ease);
}
.form-submit:hover{transform:translateY(-2px);box-shadow:0 26px 44px -22px rgba(12,82,87,.95)}
.form-submit:active{transform:scale(.99)}
.form-submit span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sun);color:#22160A;transition:transform .5s var(--spring)}
.form-submit:hover span{transform:translateX(4px)}
.form-submit svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.6;fill:none}
.form-alert{padding:.9rem 1.1rem;border-radius:var(--r-sm);font-size:.9rem;line-height:1.5}
.form-alert--ok{background:rgba(12,82,87,.1);box-shadow:inset 0 0 0 1px rgba(12,82,87,.28);color:#08383C}
.form-alert--err{background:rgba(180,83,42,.1);box-shadow:inset 0 0 0 1px rgba(180,83,42,.32);color:#7C2F16}
.hp-field{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0;font-size:.82rem;font-weight:500;color:rgba(14,28,30,.7)}
.radio-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.55rem}
.radio-chip{
  display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;
  padding:.62rem 1.05rem;border-radius:var(--r-pill);font-size:.92rem;color:var(--ink);
  background:#FFFFFF;box-shadow:0 0 0 1px rgba(14,28,30,.12);
  transition:background .4s var(--ease),box-shadow .4s var(--ease);
}
.radio-chip input{
  appearance:none;-webkit-appearance:none;width:15px;height:15px;border-radius:50%;margin:0;flex:none;
  background:#fff;box-shadow:inset 0 0 0 1px rgba(14,28,30,.3);transition:background .3s var(--ease);
}
.radio-chip input:checked{background:var(--marine);box-shadow:inset 0 0 0 1px rgba(12,82,87,.5),inset 0 0 0 3px #fff}
.radio-chip:hover{background:#FBFAF7}
.radio-chip:has(input:checked){box-shadow:0 0 0 1px rgba(12,82,87,.55);background:rgba(12,82,87,.06)}

/* --- Accordion ----------------------------------------------------------- */
.acc{display:grid}
.acc__item{border-top:1px solid var(--line)}
.acc__item:last-child{border-bottom:1px solid var(--line)}
.acc__btn{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(.9rem,2.4vw,2rem);
  width:100%;padding:clamp(1.15rem,2.4vw,1.7rem) 0;background:none;border:0;cursor:pointer;text-align:left;
  color:var(--fg);
  font-size:var(--step-1);font-weight:500;letter-spacing:-.025em;line-height:1.3;
  transition:color .4s var(--ease);
}
.acc__btn:hover{color:var(--marine)}
.acc__n{font-family:var(--font-mono);font-size:.76rem;color:var(--fg-faint);letter-spacing:.1em}
.acc__sign{position:relative;width:34px;height:34px;border-radius:50%;flex:none;background:#fff;box-shadow:0 0 0 1px rgba(14,28,30,.1),0 8px 18px -14px rgba(12,82,87,.6)}
.acc__sign::before,.acc__sign::after{content:"";position:absolute;inset:50% 11px auto;height:1.5px;background:currentColor;transform:translateY(-50%);transition:transform .5s var(--spring),opacity .4s var(--ease)}
.acc__sign::after{transform:translateY(-50%) rotate(90deg)}
.acc__btn[aria-expanded=true]{color:var(--marine)}
.acc__btn[aria-expanded=true] .acc__sign::after{transform:translateY(-50%) rotate(0);opacity:0}
.acc__panel{overflow:hidden;height:0;transition:height .6s var(--ease)}
.acc__panel p{padding:0 0 clamp(1.2rem,2.4vw,1.8rem);max-width:74ch;color:var(--fg-muted);font-size:var(--step-0)}
.acc__panel .acc__inner{padding-right:clamp(0px,6vw,80px)}

/* --- Price table --------------------------------------------------------- */
.ptable-wrap{
  border-radius:var(--r-lg);overflow:hidden;background:#FFFFFF;
  box-shadow:0 0 0 1px rgba(14,28,30,.07),var(--shadow-soft);
}
.ptable{font-size:var(--step--1)}
.ptable thead th{
  padding:1.1rem 1.4rem;text-align:left;background:var(--marine);color:#EFEAE0;
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500;
}
.ptable td{padding:1.15rem 1.4rem;border-bottom:1px solid rgba(14,28,30,.08);vertical-align:middle}
.ptable tr:last-child td{border-bottom:0}
.ptable tbody tr{transition:background .4s var(--ease)}
.ptable tbody tr:nth-child(even){background:rgba(12,82,87,.026)}
.ptable tbody tr:hover{background:rgba(217,154,60,.12)}
.ptable .t-name{font-size:var(--step-0);font-weight:500;letter-spacing:-.02em;color:var(--ink)}
.ptable .t-cond{color:var(--fg-muted)}
.ptable .t-price{text-align:right;white-space:nowrap}
.ptable .t-price b{font-size:var(--step-2);font-weight:500;letter-spacing:-.035em;color:var(--marine)}
.ptable .t-price span{display:block;font-family:var(--font-mono);font-size:.72rem;color:var(--fg-faint);margin-top:.25rem}
.pcards{display:none;gap:.7rem}
.pcard{padding:1.15rem 1.25rem;border-radius:var(--r-md);background:#fff;box-shadow:0 0 0 1px rgba(14,28,30,.07),var(--shadow-soft);display:grid;gap:.5rem}
.pcard__top{display:flex;justify-content:space-between;align-items:start;gap:1rem}
.pcard__name{font-weight:500;letter-spacing:-.02em;line-height:1.25;color:var(--ink)}
.pcard__price{text-align:right;white-space:nowrap}
.pcard__price b{font-size:var(--step-2);font-weight:500;color:var(--marine);letter-spacing:-.035em}
.pcard__price span{display:block;font-family:var(--font-mono);font-size:.7rem;color:var(--fg-faint)}
.pcard__cond{font-size:.84rem;color:var(--fg-muted)}
@media (max-width:820px){
  .ptable-wrap{display:none}
  .pcards{display:grid}
}

/* --- Buttons on deep marine bands --------------------------------------- */
.band-deep .btn{
  --btn-bg:#F3EFE6;--btn-fg:#09383D;--btn-dot:var(--sun);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 16px 32px -20px rgba(0,0,0,.75);
}
.band-deep .btn:hover{box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 24px 40px -22px rgba(0,0,0,.8)}
.band-deep .btn .btn__ico{background:rgba(9,56,61,.12)}
.band-deep .form-submit{background:var(--sun);color:#22160A}

/* <picture> wrappers behave like the plain <img> they replace */
.plate picture{position:absolute;inset:0;z-index:1;display:block}
.plate picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cta__bg picture{position:absolute;inset:0;display:block}
.cta__bg picture img{width:100%;height:100%;object-fit:cover;opacity:.32}
.pcard-post__media picture{display:block;width:100%;height:100%}

/* Labels inside the coloured cards */
.card--marine .card__num{color:rgba(242,239,231,.62)}
.card--sun .card__num{color:rgba(43,29,8,.6)}
.card--marine .card__core a{color:inherit}
.card--marine .card__core a:hover{color:var(--sun-soft)}

/* --- Dropdown navigation ------------------------------------------------- */
.nav__menu>li{position:relative}
.nav__menu a{display:inline-flex;align-items:center;gap:.4rem}
.nav__menu a[aria-current=page]{
  color:var(--marine);
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.58));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(12,82,87,.13),0 2px 6px -3px rgba(7,46,51,.28);
}
.nav__caret{
  width:0;height:0;flex:none;margin-top:1px;
  border-left:3.5px solid transparent;border-right:3.5px solid transparent;
  border-top:4px solid currentColor;opacity:.5;
  transition:transform .4s var(--ease),opacity .3s var(--ease);
}
.nav__menu>li.has-sub:hover .nav__caret,
.nav__menu>li.has-sub:focus-within .nav__caret{transform:rotate(180deg);opacity:1}

.subnav,.nav__menu .sub-menu{
  position:absolute;top:calc(100% + 14px);left:50%;transform:translate(-50%,10px);
  min-width:288px;padding:8px;border-radius:var(--r-lg);z-index:5;
  /* A panel has to be read, not seen through. Even 5% let the dark table head
     behind it ghost across the links, so the fill is solid and the glass lives
     in the rim and the shadow instead. */
  background:linear-gradient(180deg,#FFFFFF,#FAF8F3);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 0 0 1px rgba(14,28,30,.1),
    0 34px 64px -28px rgba(7,46,51,.5);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s var(--ease),transform .45s var(--spring),visibility .35s;
}
.subnav::before,.nav__menu .sub-menu::before{
  content:"";position:absolute;left:0;right:0;top:-16px;height:16px;
}
.subnav::after,.nav__menu .sub-menu::after{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(155deg,rgba(255,255,255,.95),rgba(255,255,255,.2) 42%,rgba(255,255,255,.05) 62%,rgba(255,255,255,.5));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
          mask-composite:exclude;
}
.nav__menu>li.has-sub:hover>.subnav,
.nav__menu>li.has-sub:focus-within>.subnav,
.nav__menu>li:hover>.sub-menu,
.nav__menu>li:focus-within>.sub-menu{
  opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);
}
.subnav ul,.nav__menu .sub-menu{display:grid;gap:2px}
.nav__menu .sub-menu{padding:8px}
.subnav a,.nav__menu .sub-menu a{
  display:block;padding:.6rem .8rem;border-radius:var(--r-sm);width:100%;
  font-size:.92rem;line-height:1.3;color:var(--ink);
}
.subnav a b{display:block;font-weight:500;letter-spacing:-.015em}
.subnav a span{display:block;margin-top:2px;font-size:.76rem;color:var(--fg-faint);letter-spacing:0}
.subnav a:hover,.nav__menu .sub-menu a:hover{
  /* White on a white panel reads as nothing — the hover needs the brand tint. */
  background:var(--marine-tint);color:var(--marine);
  box-shadow:inset 0 0 0 1px rgba(12,82,87,.14);
}
.subnav a:hover span{color:rgba(12,82,87,.7)}

@media (max-height:700px){
  .navmodal{align-content:start}
  .navmodal .navmodal__lead{font-size:clamp(1.15rem,4.4vw,1.4rem);min-height:46px}
  .navmodal .navmodal__sub a{min-height:40px;font-size:.82rem}
}


/* --- Quick-request popup -------------------------------------------------
   Same language as the rest of the site: a deep marine band with the mark and
   the technical drawing on top, the thin-line icon set inside the fields. */
.lead-modal{
  width:min(432px,calc(100vw - 2*var(--gutter)));max-width:none;
  padding:0;border:0;background:transparent;overflow:visible;color:var(--ink);
}
.lead-modal::backdrop{
  background:rgba(7,46,51,.4);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  opacity:0;transition:opacity .35s var(--ease);
}
.lead-modal.is-in::backdrop{opacity:1}

.lead-modal__card{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(250,248,243,.93));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 0 0 1px rgba(14,28,30,.07),
    0 44px 88px -38px rgba(7,46,51,.65);
  backdrop-filter:blur(30px) saturate(190%);
  -webkit-backdrop-filter:blur(30px) saturate(190%);
  opacity:0;transform:translateY(18px) scale(.97);
  transition:opacity .3s var(--ease),transform .45s var(--spring);
}
.lead-modal.is-in .lead-modal__card{opacity:1;transform:none}

/* Marine header band */
.lead-modal__head{
  position:relative;overflow:hidden;
  padding:clamp(1.35rem,4vw,1.8rem) clamp(1.4rem,4.4vw,2rem) clamp(1.3rem,3.4vw,1.7rem);
  background:linear-gradient(152deg,var(--marine-2),var(--marine-3));
}
.lead-modal__head::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 90% at 92% 0%,rgba(217,154,60,.28),transparent 62%);
}
.lead-modal__art{
  position:absolute;right:-18%;bottom:-52%;width:58%;pointer-events:none;
  opacity:.3;
  -webkit-mask-image:linear-gradient(to left,#000 24%,transparent 88%);
          mask-image:linear-gradient(to left,#000 24%,transparent 88%);
}
.lead-modal__art svg{width:100%;height:auto;fill:none;stroke:rgba(242,239,231,.55);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lead-modal__mark{position:relative;display:block;width:38px;height:38px;margin-bottom:.9rem}
.lead-modal__mark svg{display:block;width:100%;height:auto;border-radius:11px;box-shadow:0 10px 22px -12px rgba(0,0,0,.6)}
.lead-modal__head .eyebrow{position:relative}
.lead-modal h2{
  position:relative;margin-top:.55rem;font-size:var(--step-2);
  letter-spacing:-.035em;line-height:1.12;max-width:16ch;
}
.lead-modal__lead{position:relative;margin-top:.55rem;color:var(--fg-muted);font-size:.88rem;line-height:1.55;max-width:38ch}

.lead-modal__x{
  position:absolute;z-index:3;top:clamp(.85rem,2.4vw,1.1rem);right:clamp(.85rem,2.4vw,1.1rem);
  display:grid;place-items:center;width:34px;height:34px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(242,239,231,.12);box-shadow:inset 0 0 0 1px rgba(242,239,231,.22);
  transition:background .3s var(--ease),transform .5s var(--spring);
}
.lead-modal__x:hover{background:rgba(242,239,231,.22);transform:rotate(90deg)}
.lead-modal__x span{position:absolute;width:13px;height:1.5px;border-radius:2px;background:#F2EFE7}
.lead-modal__x span:first-child{transform:rotate(45deg)}
.lead-modal__x span:last-child{transform:rotate(-45deg)}

/* Form body */
.lead-modal__form{
  display:grid;gap:.8rem;
  padding:clamp(1.2rem,3.4vw,1.6rem) clamp(1.4rem,4.4vw,2rem) clamp(1.4rem,4vw,1.8rem);
}
.lead-modal__form .field{margin:0}
.lead-modal__form .form-submit{margin-top:.3rem}
.lead-modal .form-note{display:flex;align-items:flex-start;gap:.45rem}
.lead-modal .form-note__ico{flex:none;margin-top:1px;color:var(--marine);opacity:.6}
.lead-modal .form-note__ico svg{display:block;stroke-width:1.4}
.lead-modal .form-note a{color:var(--marine);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.lead-modal .form-note a:hover{color:var(--marine-3)}

/* Fields with a leading icon */
.field--ico .field__wrap{position:relative;display:block}
.field--ico .field__ico{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  display:grid;place-items:center;color:var(--marine);opacity:.7;pointer-events:none;
  transition:opacity .3s var(--ease),color .3s var(--ease);
}
.field--ico .field__ico svg{display:block}
.field--ico .input,.field--ico select{padding-left:44px}
.field--ico .field__wrap:focus-within .field__ico{opacity:1}

/* Sent state: only the confirmation is left */
.lead-modal__tick{
  display:none;justify-self:center;place-items:center;
  width:56px;height:56px;border-radius:50%;margin-bottom:.2rem;
  background:var(--marine);color:var(--sun);
  box-shadow:0 18px 34px -18px rgba(12,82,87,.9);
}
.lead-modal__tick svg{stroke-width:1.8}
.lead-modal__form.is-sent .lead-modal__tick{display:grid}
.lead-modal__form.is-sent .field,
.lead-modal__form.is-sent .form-submit,
.lead-modal__form.is-sent .form-note{display:none}
.lead-modal.is-sent .lead-modal__lead{display:none}

@media (prefers-reduced-motion:reduce){
  .lead-modal__card{transition:none;opacity:1;transform:none}
  .lead-modal::backdrop{transition:none}
  .lead-modal__x:hover{transform:none}
}

/* --- Call widget ---------------------------------------------------------
   Hidden below 760px, where the sticky call bar already carries the phone. */
.callfab{
  position:fixed;z-index:44;display:none;align-items:center;gap:.7rem;
  right:clamp(14px,2.2vw,26px);bottom:clamp(14px,2.2vw,26px);
  height:60px;padding:0 10px;border-radius:var(--r-pill);
  background:var(--marine);color:var(--on-accent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 20px 40px -18px rgba(7,46,51,.9);
  transition:transform .5s var(--spring),box-shadow .45s var(--ease),background .4s var(--ease),opacity .35s var(--ease);
}
@media (min-width:761px){.callfab{display:inline-flex}}
.callfab:hover,.callfab:focus-visible{
  transform:translateY(-3px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 28px 52px -20px rgba(7,46,51,.95);
}
.callfab__ico{
  position:relative;flex:none;display:grid;place-items:center;
  width:40px;height:40px;border-radius:50%;background:rgba(242,239,231,.12);
}
.callfab__ico::before{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  box-shadow:0 0 0 0 rgba(217,154,60,.55);
  animation:kvCallPulse 3s var(--ease) infinite;
}
@keyframes kvCallPulse{
  0%{box-shadow:0 0 0 0 rgba(217,154,60,.5)}
  70%{box-shadow:0 0 0 14px rgba(217,154,60,0)}
  100%{box-shadow:0 0 0 0 rgba(217,154,60,0)}
}
.callfab svg{stroke-width:1.5}
/* The label slides open on hover — grid-template-columns animates, width does not. */
.callfab__label{display:grid;grid-template-columns:0fr;transition:grid-template-columns .5s var(--ease)}
.callfab:hover .callfab__label,
.callfab:focus-visible .callfab__label{grid-template-columns:1fr}
.callfab__label>span{
  display:block;overflow:hidden;white-space:nowrap;
  padding-right:0;transition:padding-right .5s var(--ease);
}
.callfab:hover .callfab__label>span,
.callfab:focus-visible .callfab__label>span{padding-right:.6rem}
.callfab__label b{display:block;font-family:var(--font-mono);font-size:.9rem;font-weight:500;letter-spacing:.01em}
.callfab__label i{display:block;font-style:normal;font-size:.72rem;letter-spacing:.04em;color:rgba(242,239,231,.62);margin-top:1px}

/* The footer already shows the phone, and the widget would cover the credit. */
.callfab.is-away{opacity:0;transform:translateY(16px) scale(.92);pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .callfab,.callfab__label,.callfab__label>span{transition:none}
  .callfab__ico::before{animation:none}
  .callfab:hover{transform:none}
}

/* ==========================================================================
   Pull quote, conversion aside, mobile menu — refined
   ========================================================================== */

/* --- Mobile menu ---------------------------------------------------------- */
.navmodal .navmodal__list{display:grid;gap:0}
.navmodal .navmodal__item{padding-block:.2rem}
.navmodal .navmodal__item+.navmodal__item{border-top:1px solid rgba(14,28,30,.08)}
.navmodal .navmodal__lead{
  display:flex;align-items:center;gap:.7rem;min-height:52px;
  font-size:clamp(1.25rem,4.8vw,1.6rem);
}
.navmodal .navmodal__lead em{
  font-style:normal;margin-left:auto;
  display:grid;place-items:center;min-width:26px;height:26px;padding-inline:.4rem;
  border-radius:999px;background:rgba(12,82,87,.1);
  font-family:var(--font-mono);font-size:.7rem;color:var(--marine);
}
.navmodal a[aria-current=page]{color:var(--marine)}
.navmodal .navmodal__sub{
  display:grid;grid-template-columns:1fr;
  gap:.4rem;margin:.25rem 0 .9rem;
}
@media (min-width:480px){.navmodal .navmodal__sub{grid-template-columns:repeat(2,minmax(0,1fr))}}
.navmodal .navmodal__sub a{
  display:flex;align-items:center;min-height:46px;padding:.5rem .8rem;
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.66);
  box-shadow:inset 0 0 0 1px rgba(14,28,30,.07);
  font-size:.86rem;line-height:1.3;color:rgba(14,28,30,.72);
  transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease);
}
.navmodal .navmodal__sub a:hover,.navmodal .navmodal__sub a:active{
  background:#FFFFFF;color:var(--marine);
  box-shadow:inset 0 0 0 1px rgba(12,82,87,.22);
}

.navmodal .navmodal__foot{
  margin-top:1.8rem;display:grid;gap:.75rem;
  border-top:1px solid rgba(14,28,30,.1);padding-top:1.4rem;
}
.navmodal .navmodal__foot .btn{width:100%;justify-content:space-between;opacity:1;transform:none;color:var(--btn-fg);font-size:1rem}
.navmodal .navmodal__contact,.navmodal .navmodal__hours{
  display:flex;align-items:center;gap:.6rem;min-height:44px;
  font-family:var(--font-mono);font-size:.88rem;color:var(--marine);
}
.navmodal .navmodal__hours{color:var(--fg-muted);font-size:.8rem;margin:0}
.navmodal .navmodal__contact-ico{
  flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--marine-tint);color:var(--marine);
}
.navmodal__hours .navmodal__contact-ico{color:var(--fg-faint);background:rgba(14,28,30,.05)}
/* Crisper X: the 1.6px bars looked like a single slash at 45°. */
.nav__toggle span{height:2px}