/* ==========================================================================
   Benjamin Moore Варна - landing page
   Standalone. Does not load bootstrap or css/style.css.

   The page has no fixed accent colour. --tint is set from whichever colour
   family the visitor selects, so the chrome is tinted by the palette the same
   way paint is tinted at the counter. Everything else stays quiet.
   ========================================================================== */

:root{
     --paper: #F4F5F3;
     --paper-2: #E5E6DF;
     --ink: #15171A;
     --ink-2: #6A6F74;
     --rule: #D6D8D2;
     --tint: #434B56;
     --tint-rgb: 67,75,86;

     --wrap: 1240px;
     --gut: clamp(20px, 5vw, 64px);

     --display: "Spectral", Georgia, "Times New Roman", serif;
     --body: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

*, *::before, *::after{ box-sizing: border-box; }

html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* every in-page target has to clear the sticky bar, or the heading it scrolls
   to lands underneath it */
[id]{ scroll-margin-top: 88px; }

body{
     margin: 0;
     background: var(--paper);
     color: var(--ink);
     font-family: var(--body);
     font-size: 17px;
     line-height: 1.62;
     font-weight: 400;
     -webkit-font-smoothing: antialiased;
}

img{ max-width: 100%; height: auto; display: block; }

a{ color: inherit; }

button, input, select, textarea{ font: inherit; color: inherit; }

:focus-visible{
     outline: 2px solid var(--tint);
     outline-offset: 3px;
}

.wrap{
     max-width: var(--wrap);
     margin: 0 auto;
     padding: 0 var(--gut);
}

.skip{
     position: absolute;
     left: -9999px;
}
.skip:focus{
     left: 12px; top: 12px;
     z-index: 100;
     background: var(--ink); color: var(--paper);
     padding: 10px 16px;
}

/* --- shared type ------------------------------------------------------- */

.h2{
     font-family: var(--display);
     font-weight: 600;
     font-size: clamp(2rem, 4.4vw, 3.4rem);
     line-height: 1.02;
     letter-spacing: -0.022em;
     margin: 0 0 24px;
}

.sub-h{
     font-family: var(--body);
     font-size: 0.7rem;
     font-weight: 600;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: var(--ink-2);
     margin: 88px 0 24px;
}

.eyebrow{
     font-size: 0.7rem;
     font-weight: 600;
     letter-spacing: 0.2em;
     text-transform: uppercase;
     color: var(--tint);
     margin: 0 0 28px;
     transition: color .4s ease;
}

.lede{
     max-width: 46ch;
     color: var(--ink-2);
     margin: 0 0 44px;
}

.link{
     text-decoration: none;
     border-bottom: 1px solid var(--tint);
     padding-bottom: 2px;
     font-weight: 500;
     transition: border-color .4s ease;
}
.link:hover{ border-bottom-width: 2px; }

.btn{
     display: inline-block;
     font-size: 0.82rem;
     font-weight: 600;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     text-decoration: none;
     padding: 16px 30px;
     border: 1px solid var(--ink);
     transition: background .25s ease, color .25s ease, border-color .25s ease;
     cursor: pointer;
}
.btn--solid{ background: var(--ink); color: var(--paper); }
.btn--solid:hover{ background: var(--tint); border-color: var(--tint); }
.btn--line{ background: none; color: var(--ink); }
.btn--line:hover{ background: var(--ink); color: var(--paper); }

/* --- top bar ----------------------------------------------------------- */

.bar{
     position: sticky;
     top: 0;
     z-index: 50;
     background: rgba(244,245,243,.9);
     backdrop-filter: blur(10px);
     border-bottom: 1px solid var(--rule);
}
.bar__in{
     max-width: var(--wrap);
     margin: 0 auto;
     padding: 0 var(--gut);
     height: 68px;
     display: flex;
     align-items: center;
     gap: 32px;
}
/* a wide, low wordmark - at 148px the "Benjamin Moore Varna" line was barely
   readable, and there is plenty of room in the bar at this width */
.bar__logo img{ width: 208px; height: auto; }
.bar__nav{
     display: flex;
     gap: 28px;
     margin-left: auto;
     font-size: 0.86rem;
}
.bar__nav a{
     text-decoration: none;
     padding: 4px 0;
     border-bottom: 1px solid transparent;
}
.bar__nav a:hover{ border-bottom-color: var(--tint); }
/* the standing call to action - carries more weight than a bare number, and
   the number is still one tap away in the section it scrolls to */
.bar__cta{
     text-decoration: none;
     font-weight: 600;
     font-size: 0.8rem;
     letter-spacing: 0.06em;
     white-space: nowrap;
     background: var(--ink);
     color: var(--paper);
     border: 1px solid var(--ink);
     padding: 10px 18px;
     transition: background .25s ease, border-color .25s ease;
}
.bar__cta:hover{ background: var(--tint); border-color: var(--tint); }
.bar__cta-short{ display: none; }

/* hidden until the nav collapses */
.bar__burger{
     display: none;
     width: 40px;
     height: 40px;
     padding: 0;
     background: none;
     border: 1px solid var(--rule);
     cursor: pointer;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 4px;
}
.bar__burger span{
     display: block;
     width: 17px;
     height: 1.5px;
     background: var(--ink);
     transition: transform .22s ease, opacity .22s ease;
}
.bar__burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(5.5px) rotate(45deg); }
.bar__burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.bar__burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-5.5px) rotate(-45deg); }

/* --- hero -------------------------------------------------------------- */

/* Full-bleed and edge to edge. The subject is a painted wall, so the wall
   fills the screen and the type sits on it. */
.hero{
     position: relative;
     min-height: min(88vh, 840px);
     display: flex;
     align-items: center;
     overflow: hidden;
     background: var(--paper-2);
}
.hero__bg{
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: 62% center;
}
/* guarantees legibility whatever the crop does at a given viewport width -
   the lower left of this photograph is a cluttered desktop, so the scrim has
   to hold under the buttons as well as under the headline */
.hero::after{
     content: "";
     position: absolute;
     inset: 0;
     background:
          linear-gradient(96deg, rgba(247,247,244,.94) 0%, rgba(247,247,244,.80) 34%, rgba(247,247,244,0) 66%),
          linear-gradient(0deg, rgba(247,247,244,.55) 0%, rgba(247,247,244,0) 42%);
}
.hero__in{
     position: relative;
     z-index: 2;
     width: 100%;
     padding-top: clamp(80px, 10vw, 120px);
     padding-bottom: clamp(56px, 8vw, 96px);
}
.hero__h{
     font-family: var(--display);
     font-weight: 300;
     font-size: clamp(3rem, 7.6vw, 6.4rem);
     line-height: 0.94;
     letter-spacing: -0.035em;
     margin: 0 0 30px;
     max-width: 15ch;
}
.hero__h em{ font-style: italic; font-weight: 300; }
.hero__sub{
     max-width: 38ch;
     color: var(--ink);
     opacity: .78;
     margin: 0 0 36px;
}
.hero__cta{ display: flex; flex-wrap: wrap; gap: 12px; }
/* the outline button sits on photography here, so it needs its own ground */
.hero .btn--line{ background: rgba(247,247,244,.82); }
.hero .btn--line:hover{ background: var(--ink); }

/* the fan deck - the chip module the whole page is built from */
.fan{
     display: flex;
     height: 68px;
     width: 100%;
}
.fan__i{ flex: 1 1 0; }

/* --- heritage ---------------------------------------------------------- */

/* Section grounds alternate deliberately: hero image, paper-2, paper, ink,
   paper, paper-2, paper, ink. Two paper sections in a row read as one long
   undifferentiated stretch. */
.heritage{ padding: clamp(72px, 9vw, 128px) 0; background: var(--paper-2); }
.heritage__in{
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     column-gap: clamp(32px, 5vw, 80px);
     align-items: end;
}
.heritage__p{ max-width: 46ch; color: var(--ink-2); }
.heritage__p p{ margin: 0 0 16px; }
.heritage__more{ margin: 22px 0 0 !important; color: var(--ink); }

.stats{
     grid-column: 1 / -1;
     margin: clamp(48px, 6vw, 88px) 0 0;
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 20px;
     border-top: 1px solid var(--rule);
     padding-top: 24px;
}
.stats dt{
     font-family: var(--display);
     font-weight: 500;
     font-size: clamp(1.6rem, 3vw, 2.4rem);
     line-height: 1;
     letter-spacing: -0.02em;
}
.stats dd{
     margin: 8px 0 0;
     font-size: 0.76rem;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     color: var(--ink-2);
}

/* --- for designers ------------------------------------------------------ */

/* Sits between the colour card and the dark product section, so it takes the
   recessed paper. Two paper sections touching read as one. */
.pro{
     padding: clamp(72px, 9vw, 128px) 0;
     background: var(--paper-2);
}
.pro__in{
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
     gap: clamp(32px, 5vw, 80px);
     align-items: start;
}
.pro__txt > p{ max-width: 42ch; color: var(--ink-2); margin: 0 0 32px; }

/* These are six parallel services, not a sequence, so they carry no numbers -
   a hairline grid says "list of equals" without implying an order. */
.pro__list{
     list-style: none;
     margin: 0;
     padding: 0;
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 0 clamp(24px, 3vw, 44px);
}
.pro__list li{
     padding: 22px 0;
     border-top: 1px solid var(--rule);
}
.pro__list h3{
     font-family: var(--display);
     font-weight: 600;
     font-size: 1.14rem;
     letter-spacing: -0.01em;
     margin: 0 0 6px;
}
.pro__list p{ margin: 0; color: var(--ink-2); font-size: 0.95rem; }

/* --- product lines ----------------------------------------------------- */

/* The one dark section. Without it the page is eight shades of paper in a row
   and the eye has nothing to measure the rhythm against. It lands here because
   the product range is the most catalogue-like content on the page, and white
   Spectral on near-black is where that reads best. */
.prod{
     padding: clamp(72px, 9vw, 128px) 0;
     background: var(--ink);
     color: var(--paper);
}
.prod .h2{ color: var(--paper); }
.prod .lede{ color: #A9AEB2; }
.prod .sub-h{ color: #8F959A; }
.prod .link{ color: var(--paper); }

.lines{
     list-style: none;
     margin: 0;
     padding: 0;
     border-top: 1px solid rgba(255,255,255,.15);
}
.lines li{
     display: grid;
     grid-template-columns: 200px minmax(0, 240px) minmax(0, 1fr);
     gap: 24px;
     align-items: baseline;
     padding: 26px 0;
     border-bottom: 1px solid rgba(255,255,255,.15);
}
.lines__tag{
     font-size: 0.68rem;
     font-weight: 600;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     color: #8F959A;
}
.lines__n{
     font-family: var(--display);
     font-weight: 600;
     font-size: 1.5rem;
     letter-spacing: -0.015em;
     margin: 0;
}
.lines__n sup{ font-size: 0.5em; top: -0.7em; }
.lines li p{ margin: 0; color: #BFC4C8; }

.fin{
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2px;
     margin-bottom: 48px;
}
.fin__i{ background: rgba(255,255,255,.055); padding: 0 0 24px; }
.fin__sw{ display: block; height: 148px; background: var(--tint); transition: background .4s ease; }
/* the swatch shows the sheen, not another colour - same tint, different light */
.fin__i--matte .fin__sw{ background-image: none; }
.fin__i--egg .fin__sw{ background-image: linear-gradient(118deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 46%); }
.fin__i--ultra .fin__sw{ background-image: linear-gradient(0deg, rgba(0,0,0,.10), rgba(0,0,0,.10)); }
.fin__i h4{
     font-family: var(--display);
     font-weight: 600;
     font-size: 1.14rem;
     margin: 20px 20px 6px;
}
.fin__i p{ margin: 0 20px; color: #BFC4C8; font-size: 0.94rem; }

/* --- interiors --------------------------------------------------------- */

.gal{ padding: clamp(72px, 9vw, 128px) 0; }
/* Source photography runs from 1200x523 banners to 1333x2000 portraits.
   Two real flex columns, not CSS multi-column: multi-column balances on
   content height, which leaves the two columns ending tens of pixels apart
   whenever the image mix is not symmetrical. Here the columns are equal
   height by construction and the slack is absorbed by the photos. */
.gal__grid{
     max-width: var(--wrap);
     margin: 0 auto 44px;
     padding: 0 var(--gut);
     display: flex;
     align-items: stretch;
     gap: 24px;
}
.gal__col{
     flex: 1 1 0;
     min-width: 0;
     display: flex;
     flex-direction: column;
     gap: 24px;
}
.gal__i{
     margin: 0;
     display: flex;
     flex-direction: column;
     /* grows to take up the shorter column's slack; the taller column has
        none to give, so its photos stay at their exact proportions */
     flex: 1 1 auto;
     min-height: 0;
}
/* The banners carry the colour name burned into the photograph near one
   edge. Growing them would cover-crop that name out, so they are pinned. */
.gal__i--fixed{ flex: 0 0 auto; }
.gal__i img{
     display: block;
     width: 100%;
     flex: 1 1 auto;
     min-height: 0;
     object-fit: cover;
}
.gal__i figcaption{
     flex: 0 0 auto;
     display: flex;
     flex-wrap: wrap;
     gap: 6px 16px;
     align-items: center;
     margin-top: 12px;
     font-size: 0.74rem;
     letter-spacing: 0.1em;
     text-transform: uppercase;
}
.gal__n{ color: var(--ink-2); }
.gal__c{
     display: inline-flex;
     align-items: center;
     gap: 7px;
     text-decoration: none;
     color: var(--ink-2);
     border-bottom: 1px solid var(--rule);
     padding-bottom: 2px;
}
.gal__c:hover{ color: var(--ink); border-bottom-color: var(--ink); }
.gal__sw{ width: 12px; height: 12px; display: block; }

/* --- showroom ---------------------------------------------------------- */

.show{
     padding: clamp(72px, 9vw, 128px) 0;
     border-top: 1px solid var(--rule);
     background: var(--paper-2);
}
.show__in{
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     gap: clamp(32px, 5vw, 72px);
     align-items: start;
}
.show__txt > p{ max-width: 46ch; color: var(--ink-2); margin: 0 0 32px; }

.ticks{ list-style: none; margin: 0 0 40px; padding: 0; }
.ticks li{
     padding: 12px 0 12px 26px;
     border-bottom: 1px solid var(--rule);
     position: relative;
}
.ticks li::before{
     content: "";
     position: absolute;
     left: 0; top: 20px;
     width: 10px; height: 10px;
     background: var(--tint);
     transition: background .4s ease;
}

.info{ margin: 0; }
.info > div{ display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 12px 0; }
.info dt{
     font-size: 0.7rem;
     font-weight: 600;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--ink-2);
     padding-top: 3px;
}
.info dd{ margin: 0; }

/* an iframe reports its width attribute as its min-content size, so without
   min-width:0 this grid item refuses to shrink and drags the whole document
   wider than the phone viewport */
.show__map{ height: 100%; min-height: 420px; min-width: 0; }
/* left in full colour: the embed now has the shop selected and shows its info
   card, and desaturating that just makes the listing hard to read */
.show__map iframe{ width: 100%; height: 100%; min-height: 420px; display: block; }

/* --- form -------------------------------------------------------------- */

.ask{
     padding: clamp(72px, 9vw, 128px) 0;
     border-top: 1px solid var(--rule);
}
.ask__in{
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
     gap: clamp(32px, 5vw, 72px);
     align-items: start;
}
.ask__txt > p{ max-width: 40ch; color: var(--ink-2); margin: 0 0 16px; }
.ask__tel a{ color: var(--ink); font-weight: 600; }

.form{
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 20px;
     align-items: start;
}
.f{ display: block; }
.f--wide{ grid-column: 1 / -1; }
.f__l{
     display: block;
     font-size: 0.7rem;
     font-weight: 600;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--ink-2);
     margin-bottom: 8px;
}
.f__l i{ font-style: normal; color: var(--tint); }
.f input, .f select, .f textarea{
     width: 100%;
     background: transparent;
     border: 1px solid var(--rule);
     padding: 13px 14px;
     border-radius: 0;
     transition: border-color .2s ease;
}
.f input:focus, .f select:focus, .f textarea:focus{
     border-color: var(--tint);
     outline: none;
}
.f textarea{ resize: vertical; }
.form .btn{ grid-column: 1 / -1; justify-self: start; }

.note{
     grid-column: 1 / -1;
     margin: 0;
     padding: 15px 18px;
     border-left: 3px solid var(--tint);
     background: var(--paper-2);
     font-size: 0.94rem;
}
.note:focus{ outline: none; }
.note--ok{ border-left-color: #2F6E3F; background: #EDF3EE; }
.note--bad{ border-left-color: #A8322D; background: #F6EBEA; }

/* inline field errors */
.f__err{
     display: block;
     min-height: 0;
     margin-top: 6px;
     font-size: 0.78rem;
     color: #A8322D;
}
.f.is-bad input,
.f.is-bad select,
.f.is-bad textarea{ border-color: #A8322D; }

.pot{ position: absolute; left: -9999px; }

/* --- footer ------------------------------------------------------------ */

.foot{
     background: var(--ink);
     color: var(--paper);
     padding: 64px 0 48px;
}
.foot__in{
     display: grid;
     grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
     gap: 40px;
}
/* the logo is dark artwork on transparent - knock it out to white on the
   dark footer, otherwise it disappears */
.foot__brand img{ width: 190px; margin-bottom: 20px; filter: brightness(0) invert(1); }
.foot__brand p{ margin: 0 0 8px; color: #A9AEB2; font-size: 0.9rem; max-width: 34ch; }
.foot__cr{ font-size: 0.8rem !important; }
.foot__col h3{
     font-size: 0.7rem;
     font-weight: 600;
     letter-spacing: 0.16em;
     text-transform: uppercase;
     color: #A9AEB2;
     margin: 0 0 16px;
}
.foot__col ul{ list-style: none; margin: 0; padding: 0; }
.foot__col li{ margin-bottom: 9px; font-size: 0.92rem; color: #D3D6D8; }
.foot__col a{ text-decoration: none; }
.foot__col a:hover{ text-decoration: underline; }

/* --- responsive -------------------------------------------------------- */

/* minmax(0, 1fr) rather than 1fr throughout - a plain 1fr track still has a
   min-content floor, which is what lets a wide child push the page sideways */
@media (max-width: 980px){
     .heritage__in,
     .show__in,
     .pro__in,
     .ask__in{ grid-template-columns: minmax(0, 1fr); }
     .lines li{ grid-template-columns: minmax(0, 1fr); gap: 6px; }
     .foot__in{ grid-template-columns: 1fr 1fr; }
     .foot__brand{ grid-column: 1 / -1; }
}

@media (max-width: 700px){
     body{ font-size: 16px; }
     /* One row: logo, Контакти, burger. The links move into a panel that drops
        below the bar. The button also drops to a one-word label - the logo is a
        wide wordmark and needs the room. */
     .bar__in{ gap: 8px; padding: 0 14px; }
     /* capped by viewport so it never overflows a 320px screen */
     .bar__logo img{ width: min(158px, 42vw); }
     .bar__cta{ margin-left: auto; font-size: 0.74rem; padding: 10px 13px; letter-spacing: 0.03em; }
     .bar__cta-full{ display: none; }
     .bar__cta-short{ display: inline; }
     .bar__burger{ display: flex; flex: 0 0 auto; }

     .bar__nav{
          display: none;
          position: absolute;
          left: 0;
          right: 0;
          top: 100%;
          flex-direction: column;
          gap: 0;
          margin: 0;
          padding: 6px 14px 14px;
          background: var(--paper);
          border-bottom: 1px solid var(--rule);
     }
     .bar.is-open .bar__nav{ display: flex; }
     .bar__nav a{
          padding: 13px 0;
          border-bottom: 1px solid var(--rule);
     }
     .bar__nav a:last-child{ border-bottom: 0; }
     .bar__nav a:hover{ border-bottom-color: var(--rule); }
     .fan{ height: 44px; }
     .fin{ grid-template-columns: minmax(0, 1fr); }
     .pro__list{ grid-template-columns: minmax(0, 1fr); }
     .form{ grid-template-columns: minmax(0, 1fr); }
     .info > div{ grid-template-columns: minmax(0, 1fr); gap: 4px; }
     /* one column: no slack to distribute, so every photo keeps its own
        proportions and nothing is cropped */
     .gal__grid{ flex-direction: column; }
     .chips{ grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
     .chips.is-filtered{ grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
     .foot__in{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
     html{ scroll-behavior: auto; }
     *{ animation: none !important; transition: none !important; }
}

/* --- sending state ------------------------------------------------------ */

.btn--send{ position: relative; }
.btn--send[disabled]{ cursor: wait; opacity: .82; }
.btn__spin{
     display: none;
     width: 14px;
     height: 14px;
     margin-left: 10px;
     vertical-align: -2px;
     border: 2px solid rgba(244,245,243,.35);
     border-top-color: var(--paper);
     border-radius: 50%;
     animation: lp-spin .6s linear infinite;
}
.form.is-sending .btn__spin{ display: inline-block; }
.form.is-sending .btn__label{ opacity: .75; }
@keyframes lp-spin{ to{ transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
     /* no spin, but the button still has to look busy */
     .btn__spin{ animation: none; border-top-color: transparent; }
}