/* Wallcraft Standard Colours — page-specific styles.
   The swatches use a "lab dip strip" language rather than circles or conventional colour cards. */

.standard-hero{
  padding:118px 0 48px;
  min-height:68svh;
  display:grid;
  align-items:center;
  overflow:hidden;
  position:relative;
  background:#e7e1d7;
}
.standard-hero:before{
  content:"";
  position:absolute;
  width:42vw;
  height:42vw;
  left:-13vw;
  bottom:-24vw;
  border-radius:50%;
  background:rgba(255,255,255,.34);
}
.standard-hero-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:clamp(32px,5vw,84px);
  align-items:center;
  position:relative;
  z-index:2;
}
.standard-hero-copy h1{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(4rem,8.1vw,8.6rem);
  font-weight:400;
  line-height:.8;
  letter-spacing:-.065em;
  margin:.14em 0 .24em;
}
.standard-hero-copy h1 em{
  display:inline;
  font-weight:400;
  color:#5a6f69;
}
.standard-hero-copy p{
  font-size:clamp(1.05rem,1.55vw,1.32rem);
  max-width:620px;
  color:#595852;
  margin:0;
}
.standard-hero-actions{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  margin-top:30px;
}
.text-link{
  font-size:.9rem;
  font-weight:760;
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
}
.standard-hero-visual{
  height:min(56svh,650px);
  min-height:430px;
  border-radius:38px;
  overflow:hidden;
  position:relative;
  box-shadow:0 28px 80px rgba(31,30,27,.14);
}
.standard-hero-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.82) contrast(.96);
}
.standard-hero-visual:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,rgba(73,88,80,.07),transparent 45%,rgba(135,90,69,.08));
  pointer-events:none;
}
.hero-dip-rack{
  position:absolute;
  z-index:3;
  left:28px;
  right:28px;
  bottom:26px;
  height:94px;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:7px;
  align-items:end;
  padding:10px 12px;
  background:rgba(250,248,243,.8);
  border:1px solid rgba(255,255,255,.72);
  backdrop-filter:blur(12px);
  border-radius:20px;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
.hero-dip-rack i{
  height:65px;
  display:block;
  background:
    linear-gradient(to bottom,rgba(250,248,243,.97) 0 27%,transparent 27%),
    var(--c);
  border-radius:10px 10px 7px 7px;
  transform-origin:center bottom;
  transition:transform .45s var(--ease);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.hero-dip-rack i:hover{transform:translateY(-9px) scaleY(1.06)}

.standard-intro{
    background:var(--paper);
    padding-bottom:35px;
}

.standard-intro-grid{
  display:grid;
  grid-template-columns:.55fr 1.6fr .85fr;
  gap:clamp(28px,5vw,80px);
  align-items:start;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.standard-intro h2,
.standard-browser-heading h2,
.standard-sample-callout h2{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(2.7rem,5vw,5.3rem);
  font-weight:400;
  letter-spacing:-.05em;
  line-height:.94;
  margin:.08em 0 .28em;
}
.standard-intro-grid>p:last-child{
  color:var(--muted);
  font-size:1.02rem;
  margin-top:7px;
}

.standard-browser{background:#ece8df}
.standard-browser-heading{
  display:grid;
  grid-template-columns:1.2fr .65fr;
  gap:40px;
  align-items:end;
  margin-bottom:28px;
}
.standard-browser-heading>p{
  max-width:520px;
  color:var(--muted);
  justify-self:end;
}
.standard-tabs-wrap{
    position:sticky;
    top:74px;
    z-index:20;
    margin:0 -8px 18px;
    padding:2px 8px 6px;
    background:rgba(236,232,223,.9);
    backdrop-filter:blur(14px);
}
.standard-tabs{
    display:flex;
    gap:8px;
    overflow:auto;
    scrollbar-width:none;
    padding-top:12px;
    padding-bottom:4px;
}
.standard-tabs::-webkit-scrollbar{display:none}
.standard-tab{
  appearance:none;
  border:1px solid rgba(21,21,19,.14);
  background:rgba(251,248,242,.65);
  border-radius:999px;
  padding:11px 16px;
  white-space:nowrap;
  font-weight:780;
  font-size:.86rem;
  transition:background .25s ease,color .25s ease,transform .25s var(--ease),border-color .25s ease;
}
.standard-tab:hover{transform:translateY(-2px);border-color:rgba(21,21,19,.32)}
.standard-tab[aria-selected="true"]{
  background:var(--ink);
  color:#fff;
  border-color:var(--ink);
}
.standard-product-layout{
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:18px;
  align-items:start;
}
.standard-product-card{
  position:sticky;
  top:145px;
  background:#f8f5ee;
  border:1px solid rgba(21,21,19,.1);
  border-radius:32px;
  overflow:hidden;
}
.product-image-wrap{
  min-height:360px;
  display:grid;
  place-items:center;
  padding:38px;
  background:#fff;
}
.product-image-wrap img{
    display:block;
	
    /* Every image gets exactly the same canvas */
    width:280px;
    height:280px;

    max-width:100%;
    object-fit:contain;
    object-position:center;
}
.product-card-copy{padding:26px 28px 30px}
.product-card-copy h3{
  font-family:Georgia,serif;
  font-size:clamp(2.2rem,3.4vw,3.8rem);
  font-weight:400;
  letter-spacing:-.045em;
  line-height:.95;
  margin:.14em 0 .28em;
}
.product-card-copy p{color:var(--muted);margin:0 0 18px}

.standard-palette-area{min-width:0}
.selected-standard{
  --selected:#C7C3B1;
  --next-selected:#C7C3B1;
  min-height:220px;
  border-radius:30px;
  padding:28px;
  margin-bottom:14px;
  background:var(--selected);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  transition:color .28s ease;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}

.selected-standard-fill{
  position:absolute;
  z-index:1;
  left:0;
  right:0;
  bottom:0;

  /* The solid paint body grows upward from the bottom. */
  height:0;
  background:var(--next-selected);

  visibility:hidden;
  pointer-events:none;
  will-change:height;
}

/*
  The water/paint surface.
  Instead of rotating giant ellipses (which caused the diagonal wedges),
  this uses a repeating SVG wave as a mask and simply moves it sideways.
*/
.selected-standard-fill::before{
    content:"";
    position:absolute;
    left:0;
    top:-39px;

    width:100%;
    height:40px;

    background:var(--next-selected);

    z-index:2;

    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 40'%3E%3Cpath fill='black' d='M0 20 C55 0 105 40 160 20 S270 0 325 20 S380 40 420 20 V40 H0 Z'/%3E%3C/svg%3E");

    -webkit-mask-repeat:repeat-x;
    -webkit-mask-size:420px 40px;
    -webkit-mask-position:0 0;

    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 40'%3E%3Cpath fill='black' d='M0 20 C55 0 105 40 160 20 S270 0 325 20 S380 40 420 20 V40 H0 Z'/%3E%3C/svg%3E");

    mask-repeat:repeat-x;
    mask-size:420px 40px;
    mask-position:0 0;
}

/* A softer second ripple just behind the main wave. */
.selected-standard-fill::after{
    content:"";
    position:absolute;
    left:0;

    /* Slightly higher so you see it behind the dark wave */
    top:-46px;

    width:100%;
    height:40px;

    background:
        color-mix(
            in srgb,
            var(--next-selected) 84%,
            white 16%
        );

    opacity:.34;

    /* Behind the main/darker wave */
    z-index:1;

    -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 40'%3E%3Cpath fill='black' d='M0 18 C60 38 100 2 165 20 S275 38 330 18 S385 2 420 20 V40 H0 Z'/%3E%3C/svg%3E");

    -webkit-mask-repeat:repeat-x;
    -webkit-mask-size:420px 40px;
    -webkit-mask-position:130px 0;

    mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 40'%3E%3Cpath fill='black' d='M0 18 C60 38 100 2 165 20 S275 38 330 18 S385 2 420 20 V40 H0 Z'/%3E%3C/svg%3E");

    mask-repeat:repeat-x;
    mask-size:420px 40px;
    mask-position:130px 0;
}

.selected-standard-fill.is-filling{
  visibility:visible;
  animation:selectedPaintRise 1.45s cubic-bezier(.22,.68,.18,1) forwards;
}

.selected-standard-fill.is-filling::before{
  animation:selectedWaveDrift 1.05s linear infinite;
}

.selected-standard-fill.is-filling::after{
  animation:selectedWaveDriftBack 1.35s linear infinite;
}

/* Because the layer is anchored to bottom:0, increasing height gives a true
   water-level rise from bottom to top. */
@keyframes selectedPaintRise{
  from{height:0}
  to{height:calc(100% + 2px)}
}

@keyframes selectedWaveDrift{
    from{
        -webkit-mask-position:0 0;
        mask-position:0 0;
    }

    to{
        -webkit-mask-position:420px 0;
        mask-position:420px 0;
    }
}

@keyframes selectedWaveDriftBack{
    from{
        -webkit-mask-position:130px 0;
        mask-position:130px 0;
    }

    to{
        -webkit-mask-position:-290px 0;
        mask-position:-290px 0;
    }
}

.selected-standard:before{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.24),transparent 32%),linear-gradient(155deg,rgba(255,255,255,.09),transparent 42%,rgba(0,0,0,.07));
  mix-blend-mode:soft-light;
  pointer-events:none;
}
.selected-standard.is-dark{color:#fff}
.selected-standard-copy,.selected-standard-chip{position:relative;z-index:4}
.selected-standard-copy h3{
  font-family:Georgia,serif;
  font-size:clamp(2.8rem,4vw,4.8rem);
  font-weight:400;
  line-height:.9;
  letter-spacing:-.05em;
  margin:.12em 0;
}
.selected-standard-copy p{margin:0;opacity:.72;font-weight:750}
.selected-standard-chip{
  flex:none;
  padding:9px 12px;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:.78rem;
  font-weight:850;
  letter-spacing:.06em;
  opacity:.75;
}

.standard-swatches{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.paint-sample{
  --swatch:#ccc;
  appearance:none;
  border:1px solid rgba(21,21,19,.1);
  background:#faf7f0;
  border-radius:20px;
  padding:9px 9px 13px;
  text-align:left;
  min-width:0;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .25s ease;
}
.paint-sample:hover,
.paint-sample.is-selected{
  transform:translateY(-6px);
  box-shadow:0 18px 38px rgba(30,28,24,.11);
  border-color:rgba(21,21,19,.27);
}
.sample-paper{
  display:block;
  width:100%;
  height:175px;
  position:relative;
  overflow:hidden;
  border-radius:14px 14px 11px 11px;
  background:#eee9df;
  box-shadow:inset 0 0 0 1px rgba(21,21,19,.06);
}
.sample-paper:before{
  content:"";
  position:absolute;
  z-index:3;
  width:10px;
  height:10px;
  border-radius:50%;
  top:12px;
  left:50%;
  transform:translateX(-50%);
  background:#faf7f0;
  border:1px solid rgba(21,21,19,.2);
  box-shadow:0 1px 0 rgba(255,255,255,.7);
}
.sample-paint{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:0;
  height:69%;
  background:var(--swatch);
  clip-path:polygon(0 10%,15% 7%,31% 11%,48% 6%,63% 10%,79% 5%,100% 9%,100% 100%,0 100%);
  transition:height .65s cubic-bezier(.2,.78,.2,1),filter .4s ease;
}
.sample-paint:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(125deg,rgba(255,255,255,.13),transparent 38%,rgba(0,0,0,.035));
  mix-blend-mode:soft-light;
}
.paint-sample:hover .sample-paint,
.paint-sample.is-selected .sample-paint{
  height:78%;
  filter:saturate(1.025);
}
.sample-meta{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
  padding:11px 3px 0;
}
.sample-meta b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:.88rem;
  line-height:1.08;
}
.sample-meta small{
  color:var(--muted);
  font-size:.68rem;
  font-weight:780;
  letter-spacing:.04em;
}

.standard-notes{background:var(--paper)}
.standard-notes-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.standard-notes article{
  border-top:1px solid var(--line);
  padding:19px 6px 6px 0;
}
.standard-notes article>span{
  display:block;
  color:#70827b;
  font-weight:900;
  letter-spacing:.1em;
  margin-bottom:32px;
}
.standard-notes h3{
  font-family:Georgia,serif;
  font-size:2rem;
  font-weight:400;
  margin:.1em 0 .25em;
}
.standard-notes p{color:var(--muted);max-width:390px}

.standard-sample-callout{background:#d8ddd6}
.sample-callout-inner{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:70px;
  align-items:end;
  padding:40px 0;
}
.sample-callout-inner>div:last-child{
  max-width:540px;
  justify-self:end;
}
.standard-sample-callout .btn{margin-top:14px}

@media(max-width:1180px){
  .standard-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:1080px){
  .standard-hero-grid{grid-template-columns:1fr 1fr;gap:32px}
  .standard-hero-copy h1{font-size:clamp(3.8rem,8.8vw,7rem)}
  .standard-intro-grid{grid-template-columns:1fr 1.5fr}
  .standard-intro-grid>p:last-child{grid-column:2}
  .standard-product-layout{grid-template-columns:1fr}
  .standard-product-card{position:relative;top:auto;display:grid;grid-template-columns:.7fr 1.3fr}
  .product-image-wrap{min-height:300px}
  .standard-tabs-wrap{top:68px}
}
@media(max-width:780px){
  .standard-hero{padding-top:92px;min-height:auto}
  .standard-hero-grid{grid-template-columns:1fr;gap:24px}
  .standard-hero-copy{padding-top:26px}
  .standard-hero-copy h1{font-size:clamp(4rem,18.5vw,7rem)}
  .standard-hero-visual{height:48svh;min-height:360px;border-radius:26px}
  .hero-dip-rack{left:14px;right:14px;bottom:14px;height:76px;padding:8px;gap:5px}
  .hero-dip-rack i{height:53px}
  .standard-intro-grid,.standard-browser-heading,.sample-callout-inner{grid-template-columns:1fr;gap:22px}
  .standard-intro-grid>p:last-child{grid-column:auto}
  .standard-browser-heading>p,.sample-callout-inner>div:last-child{justify-self:start}
  .standard-product-card{grid-template-columns:1fr}
  .product-image-wrap{min-height:290px}
  .standard-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sample-paper{height:155px}
  .selected-standard{min-height:190px;border-radius:24px;padding:22px}
  .standard-notes-grid{grid-template-columns:1fr}
  .standard-notes article>span{margin-bottom:12px}
  .sample-callout-inner{padding:15px 0}
}
@media(max-width:620px){
  .standard-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  .selected-standard{align-items:flex-start;flex-direction:column;justify-content:flex-end}
}
@media(max-width:430px){
  .standard-hero-copy h1{font-size:clamp(3.45rem,18vw,5.5rem)}
  .standard-hero-actions{align-items:flex-start;flex-direction:column}
  .hero-dip-rack{height:69px}.hero-dip-rack i{height:46px}
  .standard-swatches{grid-template-columns:1fr 1fr;gap:8px}
  .paint-sample{padding:7px 7px 11px;border-radius:16px}
  .sample-paper{height:138px}
  .sample-meta{align-items:flex-start;flex-direction:column;gap:3px}
}
@media(prefers-reduced-motion:reduce){
  .hero-dip-rack i,.standard-tab,.paint-sample,.sample-paint,.selected-standard{transition:none!important}
  .selected-standard-fill{animation:none!important}
  .selected-standard-fill::before,.selected-standard-fill::after{animation:none!important}
}