/* ==================================================================
   DESIGNISTRY DESIGN SYSTEM
   Sampled from the approved layout rather than guessed at.

   The site is a pale blue field with saturated blocks laid on it. The
   blocks do the work: nothing has a shadow, nothing has a gradient, and
   almost nothing has a border. Restraint is the whole idea.
   ================================================================== */

:root{
  /* the field everything sits on */
  --paper:#D9ECF7;
  --paper-2:#C8E1EE;
  --paper-3:#EDF6FB;

  /* the four block colours */
  --grape:#302441;
  --grape-2:#492F4D;
  --flame:#EE6115;
  --flame-2:#FF6413;
  --lagoon:#18ACBE;
  --stone:#DFDAD8;

  /* ink */
  --ink:#0A1116;
  --ink-2:#3E4B54;
  --ink-3:#667783;
  --on-dark:#D6EDF8;
  --on-dark-2:rgba(214,237,248,.72);

  --line:rgba(10,17,22,.16);
  --line-dark:rgba(214,237,248,.22);

  --sans:"Inter","Helvetica Neue",Helvetica,Arial,sans-serif;
  --wide:1920px;
  --gut:clamp(18px,1.75vw,34px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.5;
  letter-spacing:-.012em;
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img,video,svg{display:block;max-width:100%}
button,input,select,textarea{font:inherit;color:inherit}

/* ---------- type ----------
   One family, four sizes, tight tracking on anything large. No display
   serif: the objects are the decoration. */
.t-hero{font-size:clamp(34px,4.6vw,62px);line-height:1.06;letter-spacing:-.028em;font-weight:400}
.t-head{font-size:clamp(24px,2.6vw,38px);line-height:1.12;letter-spacing:-.022em;font-weight:400}
.t-sub{font-size:clamp(17px,1.5vw,21px);line-height:1.35;letter-spacing:-.012em;font-weight:400}
.t-body{font-size:15px;line-height:1.55;color:var(--ink-2)}
.t-meta{font-size:12px;line-height:1.55;color:#33434E;letter-spacing:.002em}
/* 10px rather than 9px. Below 10 this is a graphic element, not text. */
.t-label{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:#4F606B}
.t-name{font-size:14px;line-height:1.22;font-weight:500;letter-spacing:-.006em;color:var(--ink)}

/* ---------- the bar across the top ---------- */
.bar{
  position:sticky;top:0;z-index:80;
  background:rgba(217,236,247,.94);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.bar-in{
  max-width:var(--wide);margin:0 auto;
  min-height:70px;
  padding:12px clamp(24px,2.1vw,42px);
  /* The gap used to reach 76px, which left the bar 5px over the window at
     1500 once the utility area arrived. 48 is generous and leaves room. */
  display:flex;align-items:center;gap:clamp(20px,2.6vw,48px);
}
/* the real mark rather than set type */
.wordmark{display:block;flex:none}
.wordmark img{height:42px;width:auto}
/* the mark carries its own clear space, so it needs none added */
.bar-in .wordmark{margin-right:2px}
.bar-tag{font-size:14px;color:var(--ink);letter-spacing:-.006em;white-space:nowrap;margin-left:18px}
.bar-sp{flex:1}
.bar-nav{display:flex;gap:clamp(18px,2vw,34px)}
.bar-nav a,.sub-trigger{font-size:13px;letter-spacing:-.006em;padding:4px 0;position:relative}
.bar-nav > a::after,.has-sub > a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--ink);transition:right .22s ease;
}
.bar-nav > a:hover::after,.bar-nav > a[aria-current]::after,
.has-sub > a:hover::after,.has-sub > a[aria-current]::after{right:0}
.bar-rule{width:1px;height:42px;background:rgba(10,17,22,.42)}

/* ---------- the Inspiration menu ----------
   The panel used to sit ten pixels below the link, with nothing covering
   the gap. Moving the mouse down towards the menu therefore left the
   link without entering the panel, and it shut before you got there.

   The gap is now padding on .has-sub rather than empty space, so the
   trigger and the panel are one continuous hover area. The negative
   margin cancels the padding so the bar does not grow. */
.has-sub{position:relative;padding-bottom:16px;margin-bottom:-16px}
.has-sub > .sub-trigger{display:inline-flex;align-items:center;gap:6px;
  background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;
  cursor:pointer;position:relative;letter-spacing:inherit}
.has-sub > .sub-trigger:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
/* The underline belongs on the link, not below the padding. */
.has-sub > .sub-trigger::after{bottom:0}
.chev{width:14px;height:14px;transition:transform .2s}
.has-sub:hover .chev,.has-sub:focus-within .chev{transform:rotate(180deg)}
.sub{
  position:absolute;top:100%;left:-14px;min-width:212px;
  background:var(--paper);border:1px solid var(--line);
  padding:6px;display:none;flex-direction:column;z-index:90;
}
.has-sub:hover .sub,.has-sub:focus-within .sub,.has-sub.open .sub{display:flex}
.sub a{padding:10px 12px;font-size:14.5px}
/* Highlight on hover and on keyboard focus, so it can be driven either
   way rather than by pointer alone. */
.sub a:hover,.sub a:focus-visible{background:var(--paper-2);outline:none}
.sub a::after{display:none}
.cta{
  background:var(--flame-2);color:#fff;padding:14px 20px;min-width:158px;
  font-size:14.5px;letter-spacing:-.006em;
  display:inline-flex;align-items:center;justify-content:space-between;gap:12px;white-space:nowrap;
  border:0;cursor:pointer;
}
.cta:hover{background:#E95508}
.cta svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}
.burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.burger span{display:block;width:22px;height:1.5px;background:var(--ink);margin:5px 0}

/* ---------- the page shell: rail on the left, field on the right ---------- */
.shell{
  max-width:var(--wide);margin:0 auto;
  padding:12px clamp(24px,2.1vw,42px) 100px;
  display:grid;grid-template-columns:clamp(150px,12vw,188px) minmax(0,1fr);
  gap:clamp(28px,3vw,58px);
  align-items:start;
}
/* The rail starts level with the first line of the page rather than at
   the top of the column, which is what makes the left edge read as a
   margin note instead of a sidebar. */
.rail{position:sticky;top:98px;padding-top:102px;min-height:calc(100vh - 100px)}
.rail h2{margin-bottom:22px}
.rail ul{list-style:none}
.rail li a{
  display:flex;align-items:center;gap:11px;
  padding:10px 0;font-size:14px;letter-spacing:-.008em;color:#1F2A31;
}
.rail li a::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:transparent;flex:none;transition:background .18s;
}
.rail li a:hover{color:var(--ink)}
.rail li a[aria-current]{color:var(--ink)}
.rail li a[aria-current]::before{background:var(--grape-2)}
.rail-foot{position:sticky;top:calc(100vh - 172px);margin-top:130px;padding-top:22px;border-top:1px solid var(--line)}
.rail-foot a{display:flex;align-items:center;gap:11px;padding:7px 0;font-size:14.5px;color:var(--ink-2)}
.rail-foot a:hover{color:var(--ink)}
.rail-foot svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.4;flex:none}

/* ---------- the scattered field ----------
   Twelve columns, and each tile says where it sits. Deliberately not a
   neat grid: an even grid of equal cards is the thing we are getting
   away from. */
/* ---------- the field ----------
   A real masonry, not a grid of equal cards. Rows are 6px tall and each
   tile spans as many as its own photograph needs, so nothing is cropped
   and no two tiles are the same height unless the pictures are.

   The spans are worked out in the browser from the image's natural size,
   because guessing them here is how you end up with a page that only
   looks right at one width. */
.field{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  grid-auto-rows:var(--row);
  grid-auto-flow:row dense;
  column-gap:clamp(18px,1.45vw,28px);
  align-items:start;
}
/* Placement is set per tile from home.js rather than by position here,
   so adding or removing a piece cannot silently reshuffle the page. */
.tile{grid-column:span 4;margin-bottom:clamp(18px,2vw,34px)}
.tile.push{padding-top:clamp(24px,3.4vw,64px)}
.tile .pic{display:block;position:relative;overflow:hidden;background:transparent}
.tile .pic img,.tile .pic video{width:100%;height:auto;display:block;
  transition:transform .8s cubic-bezier(.2,.7,.2,1),filter .4s ease}
.tile:hover .pic img{transform:scale(1.018);filter:saturate(1.04)}
.tile .pic.mat{padding:clamp(14px,1.6vw,30px)}


/* ---------- caption beside the picture ----------
   This block was lost in an earlier rewrite of the field, which is why
   every caption stacked underneath and the page read as a product grid.
   The picture takes the room it needs and the caption sits in a narrow
   column next to it. */
.side{display:grid;gap:clamp(12px,1vw,18px);align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(96px,118px)}
.side.left{grid-template-columns:minmax(96px,118px) minmax(0,1fr)}
/* A caption sitting level with the top of its photograph reads as a
   label. Dropped down the side of it, it reads as a margin note, which
   is the whole difference between this and a product grid. */
.side .cap{padding-top:var(--cap,74px)}
/* Some tiles carry the caption underneath instead, for rhythm. */
.side.under{grid-template-columns:1fr}
.side.under .cap{padding-top:10px}
@media (max-width:820px){
  .side,.side.left{grid-template-columns:1fr}
  .side .cap.drop{padding-top:12px}
}

/* the block colours, used as tile backgrounds */
.bg-grape{background:var(--grape)}
.bg-grape2{background:var(--grape-2)}
.bg-flame{background:var(--flame)}
.bg-lagoon{background:var(--lagoon)}
.bg-stone{background:var(--stone)}
.bg-paper2{background:var(--paper-2)}

/* ---------- the statement panel, which carries the film ---------- */
/* The film sits in the middle of the field, spanning the full width of
   the four centre columns, so it reads as the centre of the page rather
   than another tile in the run. */
.statement{
  grid-column:5 / span 5;position:relative;overflow:hidden;
  background:var(--grape);
  min-height:clamp(260px,25vw,390px);
  display:flex;align-items:center;
  margin:10px 0 34px;
}
.statement video,.statement img.plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.statement:hover .veil{background:linear-gradient(
  100deg, rgba(48,36,65,.90) 0%, rgba(48,36,65,.78) 44%, rgba(48,36,65,.34) 100%)}
.statement video,.statement img.plate{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.statement .veil{position:absolute;inset:0;background:linear-gradient(
  100deg, rgba(42,30,57,.96) 0%, rgba(42,30,57,.78) 50%, rgba(42,30,57,.34) 100%)}
/* the heading has to have room to break where it wants to. Constrained
   too far it goes to one word a line, which reads as a mistake. */
/* max-width here is in the container's own em, not the heading's, which
   is how an earlier value of 15em came out at 148px and broke the line
   after every word. State it in pixels and it cannot be misread. */
.statement .words{position:relative;z-index:2;padding:clamp(32px,3.5vw,64px);max-width:min(94%,660px)}
.statement h2{font-size:clamp(34px,3.65vw,58px);line-height:1.04;letter-spacing:-.04em;text-wrap:balance}
.statement h2{color:var(--on-dark)}
.statement .under{margin-top:20px;display:flex}
.statement .under span{
  color:var(--on-dark);font-size:14.5px;display:inline-flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--line-dark);padding-bottom:4px;transition:border-color .2s;
}
.statement:hover .under span{border-color:var(--on-dark)}

/* ---------- swatch strip ---------- */
.swatches{display:flex}
.swatches i{flex:1}

/* ---------- sections further down the page ---------- */
.band{background:var(--grape-2);color:var(--on-dark);
  padding:clamp(54px,7vw,108px) clamp(28px,5vw,92px)}
.band > *{max-width:var(--wide);margin-left:auto;margin-right:auto}
.band .t-body,.band .t-meta{color:var(--on-dark-2)}
.band .t-label{color:rgba(214,237,248,.55)}
/* The outline button inherits ink from the light pages, which is all but
   invisible on this. It takes the on-dark treatment here without needing
   a second class in the markup. */
.band .btn:not(.solid){border-color:var(--line-dark);color:var(--on-dark)}
.band .btn:not(.solid):hover{background:var(--on-dark);color:var(--grape);border-color:var(--on-dark)}
.band.dark{background:var(--grape);color:var(--on-dark)}
.band.dark .t-body,.band.dark .t-meta{color:var(--on-dark-2)}
.band.dark .t-label{color:rgba(214,237,248,.55)}
.band-head{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;
  margin-bottom:clamp(22px,2.6vw,40px);flex-wrap:wrap}
.band-head p{max-width:46ch}

.btn{
  display:inline-flex;align-items:center;gap:11px;
  padding:13px 20px;border:1px solid var(--ink);background:transparent;
  font-size:14.5px;letter-spacing:-.006em;cursor:pointer;
}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.solid{background:var(--flame-2);border-color:var(--flame-2);color:#fff}
.btn.solid:hover{background:#e8620d}
.btn.onDark{border-color:var(--line-dark);color:var(--on-dark)}
.btn.onDark:hover{background:var(--on-dark);color:var(--grape);border-color:var(--on-dark)}

/* ---------- footer ---------- */
.foot{background:var(--grape);color:var(--on-dark);padding:clamp(44px,5vw,80px) clamp(18px,2.2vw,34px) 40px}
.foot-in{max-width:var(--wide);margin:0 auto;display:grid;
  grid-template-columns:1.6fr repeat(3,1fr);gap:clamp(22px,3vw,54px)}
.foot h3{font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(214,237,248,.5);margin-bottom:14px;font-weight:500}
.foot a{display:block;padding:5px 0;font-size:14.5px;color:var(--on-dark-2)}
.foot a:hover{color:var(--on-dark)}
.foot-base{max-width:var(--wide);margin:clamp(30px,4vw,60px) auto 0;
  padding-top:22px;border-top:1px solid var(--line-dark);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13px;color:rgba(214,237,248,.55)}

/* ---------- responsive: chrome only. The field's own breakpoints are
   further down, with the composition they belong to. ---------- */
@media (max-width:900px){
  .burger{display:block}
  /* Stacked in the burger menu there is no gap to bridge, so the
     padding that bridges it is removed. */
  .has-sub{width:100%;padding-bottom:0;margin-bottom:0}
  .sub{position:static;display:flex;border:0;padding:0 0 0 16px;background:none}
  .chev{display:none}
  .bar-nav{
    display:none;position:absolute;top:100%;left:0;right:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    flex-direction:column;padding:14px clamp(18px,2.2vw,34px) 22px;
  }
  .bar-nav.open{display:flex}
  .bar-rule{display:none}
  /* The CTA stays on a phone but must not be squeezed to nothing by the
     logo and the burger either side of it, so it refuses to shrink and
     drops the arrow rather than the words. */
  .cta{flex:none;min-width:0;padding:10px 14px;font-size:12.5px;gap:0}
  .cta svg{display:none}
  .wordmark{flex:none}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .side,.side.left{grid-template-columns:1fr}
  .foot-in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ==================================================================
   PAGES BEYOND THE HOMEPAGE
   The homepage is a scattered field. Every other page is calmer: a
   heading block, then either a grid of things or a column of words.
   ================================================================== */

/* ---------- page heading ---------- */
.head{max-width:var(--wide);margin:0 auto;padding:clamp(28px,3.4vw,58px) clamp(18px,2.2vw,34px) 0}
.head .t-hero{max-width:16ch;margin-top:12px}
.head .t-body{max-width:52ch;margin-top:18px}
.shell .head{padding:0}

/* ---------- a grid of products ----------
   Square holders, because the studio photography is square. Anything
   that is not square is letterboxed onto the paper rather than cropped. */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));
  gap:clamp(20px,2.2vw,40px) clamp(14px,1.5vw,26px)}
/* display:block matters. This is an <a>, and aspect-ratio is ignored on
   an inline box, so without it the photograph renders at its natural
   height and runs straight over the caption underneath. */
.card .pic{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--paper-2);margin-bottom:12px}
.card .pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card:hover .pic img{transform:scale(1.03)}
.card .t-meta{margin-top:2px}
.card .price{margin-top:6px;font-size:14px}
.count{margin:26px 0 22px;display:flex;justify-content:space-between;align-items:baseline;gap:18px;flex-wrap:wrap}

/* the little coloured tick above a caption */
.bar-mark{width:22px;height:3px;background:var(--grape-2);margin-bottom:11px}
.bar-mark.flame{background:var(--flame)}
.bar-mark.lagoon{background:var(--lagoon)}
.bar-mark.ink{background:var(--ink)}

/* ---------- one product ---------- */
.prod{max-width:var(--wide);margin:0 auto;padding:clamp(22px,2.6vw,42px) clamp(18px,2.2vw,34px) 80px;
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(26px,3.4vw,64px);align-items:start}
.shots{display:grid;gap:clamp(10px,1vw,18px)}
.shots .main{aspect-ratio:1/1;overflow:hidden;background:var(--paper-2)}
.shots .main img{width:100%;height:100%;object-fit:cover}
.thumbs{display:flex;gap:10px;flex-wrap:wrap}
.thumbs button{width:74px;height:74px;padding:0;border:1px solid transparent;background:var(--paper-2);cursor:pointer;overflow:hidden}
.thumbs button[aria-current]{border-color:var(--ink)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.buy{position:sticky;top:100px}
.buy .t-head{margin-bottom:14px}
.spec{list-style:none;margin:22px 0;border-top:1px solid var(--line)}
.spec li{padding:11px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.chips{display:flex;gap:9px;flex-wrap:wrap;margin:10px 0 24px}
.chip{display:flex;align-items:center;gap:9px;padding:8px 13px 8px 9px;border:1px solid var(--line);
  font-size:13.5px;background:none;cursor:pointer}
.chip[aria-current]{border-color:var(--ink)}
.chip i{width:16px;height:16px;border:1px solid var(--line);flex:none}
.price-row{display:flex;align-items:baseline;gap:14px;margin:20px 0 6px}
.price-row .big{font-size:26px;letter-spacing:-.02em}
.opts{display:grid;gap:10px;margin:18px 0}
.opt{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;
  padding:15px 17px;border:1px solid var(--line);cursor:pointer;background:none;text-align:left}
.opt[aria-current]{border-color:var(--ink);background:var(--paper-3)}
.opt small{display:block;color:var(--ink-2);font-size:13px;margin-top:3px}

/* ---------- long form pages ---------- */
.prose{max-width:var(--wide);margin:0 auto;padding:clamp(26px,3vw,52px) clamp(18px,2.2vw,34px) 80px;
  display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:clamp(24px,3vw,64px);align-items:start}
.prose .body{max-width:70ch}
.prose h2{font-size:clamp(21px,2vw,29px);line-height:1.16;letter-spacing:-.02em;font-weight:400;margin:clamp(34px,3.6vw,58px) 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:16px;font-weight:500;margin:26px 0 8px;letter-spacing:-.008em}
.prose p{font-size:15.5px;line-height:1.62;color:var(--ink-2);margin-bottom:14px}
.prose ul,.prose ol{margin:0 0 16px 20px}
.prose li{font-size:15.5px;line-height:1.62;color:var(--ink-2);margin-bottom:7px}
.prose .toc{position:sticky;top:100px;display:grid;gap:2px}
.prose .toc a{font-size:14px;color:var(--ink-2);padding:6px 0}
.prose .toc a:hover{color:var(--ink)}
@media (max-width:900px){.prose{grid-template-columns:1fr}.prose .toc{position:static;display:none}}

/* ---------- numbered steps ---------- */
.steps{counter-reset:s;display:grid;gap:clamp(18px,2vw,34px);margin:26px 0}
.step{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:18px;align-items:start}
.step::before{content:counter(s,decimal-leading-zero);font-size:13px;color:var(--ink-3);
  letter-spacing:.08em;padding-top:3px}
.step h3{margin:0 0 6px}

/* ---------- picture runs on the article pages ---------- */
.run{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(12px,1.4vw,22px);margin:26px 0}
.run figure{margin:0}
.run img{width:100%;aspect-ratio:1/1;object-fit:cover;background:var(--paper-2)}
.run figcaption{font-size:13px;color:var(--ink-2);margin-top:9px}
.wide-pic{margin:clamp(26px,3vw,50px) 0}
.wide-pic img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--paper-2)}

/* ---------- forms ---------- */
.form{max-width:640px}
.f-row{margin-bottom:18px}
.f-row label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:7px}
.f-row input,.f-row select,.f-row textarea{
  width:100%;padding:13px 15px;background:var(--paper-3);
  border:1px solid var(--line);font-size:15px;outline:none}
.f-row input:focus,.f-row select:focus,.f-row textarea:focus{border-color:var(--ink)}
.f-row textarea{resize:vertical;min-height:120px}
.f-two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:620px){.f-two{grid-template-columns:1fr}}
.f-note{font-size:13px;color:var(--ink-2);margin-top:12px}
.f-err{font-size:13px;color:#B3261E;margin-top:7px;display:none}
.f-err.on{display:block}
.f-ok{display:none;padding:20px 22px;background:var(--grape);color:var(--on-dark);margin-top:20px}
.f-ok.on{display:block}

/* the three stage enquiry */
.stages{display:flex;gap:0;margin-bottom:30px;border-bottom:1px solid var(--line)}
.stages div{padding:0 0 12px;margin-right:26px;font-size:13px;color:var(--ink-3);
  border-bottom:1px solid transparent;margin-bottom:-1px}
.stages div[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
.stage{display:none}
.stage.on{display:block}
.stage-nav{display:flex;gap:12px;margin-top:24px}

/* ---------- range and category cards ---------- */
.ranges{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:clamp(20px,2.4vw,42px)}
.range .pic{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--paper-2);margin-bottom:14px}
.range .pic img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.range:hover .pic img{transform:scale(1.03)}
.range h3{font-size:18px;font-weight:400;letter-spacing:-.014em;margin-bottom:7px}

/* ---------- embed ---------- */
.embed{border:1px solid var(--line);background:var(--paper-3);padding:clamp(14px,1.6vw,26px);min-height:520px}
.embed iframe{width:100%;min-height:760px;border:0;display:block}
@media (max-width:900px){.prod{grid-template-columns:1fr}.buy{position:static}}

/* ==================================================================
   THE COLOUR LIBRARY

   Each colour is shown on the test piece we actually post out. One
   photograph of a real print, reduced to its shading, tinted live:
   the colour sits underneath and the shading multiplies over it, so
   the layer lines and the shadow under the hull survive into every
   one of the 101. A mask cuts the silhouette.
   ================================================================== */
.benchy{
  --c:#CBC6B8;--sheen:0;
  position:relative;display:block;width:100%;aspect-ratio:386/290;
  background-color:var(--c);
  background-image:url(/img/benchy-shade.webp);
  background-size:contain;background-position:center;background-repeat:no-repeat;
  background-blend-mode:multiply;
  -webkit-mask:url(/img/benchy-mask.png) center/contain no-repeat;
          mask:url(/img/benchy-mask.png) center/contain no-repeat;
}
/* The finish, as a specular line down the hull. Matte gets none, silk
   catches a hard one. Screened rather than painted on, so it lifts the
   colour instead of washing it out. */
.benchy::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(112deg,
    rgba(255,255,255,0) 30%, rgba(255,255,255,.9) 43%,
    rgba(255,255,255,0) 55%);
  mix-blend-mode:screen;opacity:var(--sheen);pointer-events:none;
}
/* Translucent passes light rather than blocking it, so it sits slightly
   back from the page instead of on top of it. */
.benchy[data-finish="translucent"]{opacity:.9}

/* ---------- the stage ---------- */
/* Not .stage: that class already belongs to the three-step enquiry
   form, where it is display:none until its step is active. Reusing the
   name made this section disappear. */
.swatch-stage{max-width:var(--wide);margin:0 auto;padding:clamp(20px,2.4vw,40px) clamp(18px,2.2vw,34px) 0}
.ss-one{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  gap:clamp(24px,3.4vw,64px);align-items:center;
  background:var(--paper-3);border:1px solid var(--line);
  padding:clamp(22px,2.8vw,48px)}
/* Not place-items:center. That content-sizes the grid item, so the
   boat's width:100% resolves against nothing and the stage collapses. */
.ss-boat{display:block}
.benchy.big{width:100%;max-width:460px;margin:0 auto}
.ss-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:clamp(14px,1.8vw,30px);
  background:var(--paper-3);border:1px solid var(--line);
  padding:clamp(20px,2.6vw,42px)}
.ss-cell{margin:0;display:grid;gap:10px}
.ss-cell figcaption{display:grid;gap:2px;justify-items:start}
.ss-note{max-width:var(--wide);margin:12px auto 0}
.lift{background:none;border:0;padding:2px 0;margin-top:4px;cursor:pointer;
  font-size:12px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.lift:hover{color:var(--ink);border-bottom-color:var(--ink)}

/* ---------- the swatches ---------- */
.cbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.cbar .chips{margin:0}
.swgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));
  gap:clamp(16px,1.8vw,30px) clamp(12px,1.2vw,20px)}
.sw{position:relative}
.sw-view{display:grid;gap:1px;justify-items:start;text-align:left;width:100%;
  background:none;border:0;padding:0;cursor:pointer;font:inherit}
.sw-view i{display:block;width:100%;aspect-ratio:1/1;margin-bottom:10px;
  border:1px solid var(--line)}
.sw-view .t-name{display:block}
.sw.on .sw-view i{outline:2px solid var(--ink);outline-offset:3px}
.sw-view:focus-visible i{outline:2px solid var(--flame-2);outline-offset:3px}

/* "Post me one of these", sitting on the swatch itself. Faint until the
   swatch is hovered or it is already chosen, so a hundred and one of
   them do not shout at once. */
.sw-add{position:absolute;top:6px;right:6px;width:28px;height:28px;
  display:grid;place-items:center;cursor:pointer;
  background:var(--paper);border:1px solid var(--line);
  opacity:0;transition:opacity .15s ease}
.sw-add svg{width:15px;height:15px;fill:none;stroke:var(--ink);
  stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.sw:hover .sw-add,.sw-add:focus-visible{opacity:1}
.sw-add.on{opacity:1;background:var(--ink);border-color:var(--ink)}
.sw-add.on svg{stroke:var(--paper)}
@media (hover:none){ .sw-add{opacity:1} }

/* ---------- the sample panel ---------- */
.samples{margin-top:clamp(38px,4.4vw,76px);padding-top:clamp(30px,3.4vw,56px);
  border-top:1px solid var(--line)}
.samples-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,300px);
  gap:clamp(24px,3vw,56px);align-items:start}
.samples-bill{background:var(--paper-3);border:1px solid var(--line);padding:20px 22px}
.samples-bill dl{margin:0;border-bottom:1px solid var(--line);padding-bottom:10px}
.samples-bill dl > div{display:flex;justify-content:space-between;gap:16px;padding:5px 0}
.samples-bill dt{font-size:13.5px;color:var(--ink-2)}
.samples-bill dd{font-size:13.5px;margin:0}
.s-total{font-size:24px;letter-spacing:-.02em;margin:12px 0 6px}
.samples-list{list-style:none;margin:clamp(22px,2.4vw,38px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:10px clamp(14px,1.6vw,26px)}
.samples-list li{display:flex;align-items:center;gap:10px;
  padding:9px 0;border-bottom:1px solid var(--line)}
.samples-list .t-name{flex:1}
.s-chip{width:18px;height:18px;flex:none;border:1px solid var(--line)}
#sampleForm{margin-top:clamp(26px,3vw,46px)}

/* ---------- the tray ----------
   Follows you down a hundred and one swatches so the ones already
   chosen cannot scroll away and be forgotten. */
.stray{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:150;
  display:flex;align-items:center;gap:20px;
  max-width:min(560px,calc(100% - 28px));
  background:var(--grape);color:var(--on-dark);padding:12px 12px 12px 20px;
  font-size:13.5px}
.stray em{font-style:normal;color:var(--on-dark-2);margin-left:8px}
.stray .btn{padding:9px 14px;font-size:13px;white-space:nowrap}

@media (max-width:820px){
  .samples-head{grid-template-columns:1fr}
  .stray{left:14px;right:14px;transform:none;max-width:none;
    justify-content:space-between;gap:12px;padding-left:16px}
  .stray em{display:block;margin:2px 0 0}
}

@media (max-width:820px){
  .ss-one{grid-template-columns:1fr;gap:22px}
  .benchy.big{max-width:340px}
}

/* ---------- the field's row unit ----------
   The masonry works by giving each tile a row span measured from its own
   height. CSS and home.js therefore have to agree on how tall a row is,
   and they agree here: the value is declared once and read back by the
   script. Setting grid-auto-rows to 7px while the script divided by 6
   put a tenth of a tile's height of dead space under every picture,
   which is what the gaps down the page were. */
:root{--row:7px}

/* ---------- responsive, rewritten for the wider composition ---------- */
@media (min-width:1500px){
  .shell{grid-template-columns:180px minmax(0,1fr);gap:54px}
  .side{grid-template-columns:minmax(0,1fr) 132px}
  .side.left{grid-template-columns:132px minmax(0,1fr)}
}
@media (max-width:1300px){
  /* The tagline is the first thing to go, because the utility area
     earns its space and a strapline does not. */
  .bar-tag{display:none}
}
@media (max-width:1050px){
  .shell{grid-template-columns:138px minmax(0,1fr);gap:24px}
  .rail{padding-top:0;top:88px;min-height:0}
  .rail-foot{position:static;margin-top:34px}
  /* Below this width the composed placement stops helping, so every
     tile is a half and the page reads as two columns. */
  .field > .tile,.statement{grid-column:span 6 !important;padding-top:20px !important}
  .side,.side.left{grid-template-columns:1fr;display:flex;flex-direction:column}
  /* Stacked, the caption belongs under its photograph. Left-side tiles
     would otherwise put their words above a picture they do not yet
     explain. */
  .side.left .cap{order:2}
  .side .cap{padding-top:10px !important}
}
@media (max-width:760px){
  .bar-in{min-height:62px;padding:10px 16px;gap:14px}
  .wordmark img{height:34px}
  .shell{display:block;padding:14px 16px 64px}
  .rail{position:static;min-height:0;padding:4px 0 22px;display:flex;overflow:auto;gap:18px}
  .rail h2,.rail-foot{display:none}
  .rail ul{display:flex;gap:18px;white-space:nowrap}
  .rail li a{font-size:13px;padding:6px 0}
  .rail li a::before{display:none}
  .field{display:block}
  .tile,.field > .tile{padding-top:0 !important;margin-bottom:38px}
  .side,.side.left{display:flex;flex-direction:column;gap:12px}
  .side.left .cap{order:2}
  .statement{min-height:360px;margin:0 0 38px}
  .statement h2{font-size:38px}
}

/* ==================================================================
   PHASE A — SAVED, MY PROJECT, THE DRAWER
   Built from the existing language only: no shadows, no radius, no
   badges, the same 1px rule and the same type scale. Nothing here
   introduces a size or a weight that did not already exist.
   ================================================================== */

.pagewrap{max-width:var(--wide);margin:0 auto;padding:0 clamp(18px,2.2vw,34px) 90px}
.sr-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- the utility area in the bar (3.1) ---------- */
.bar-util{display:flex;align-items:center;gap:clamp(12px,1.2vw,22px)}
.util{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);
  letter-spacing:-.006em;white-space:nowrap}
.util svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;flex:none}
.util[data-util="saved"] svg,.util[data-util="project"] svg{fill:none}
.util:hover{color:var(--ink)}
.util em{font-style:normal;font-weight:500;color:var(--ink)}
/* Empty until something is in it, so the bar does not shout at a
   first-time visitor (3.1: never "My Project · 0"). */
.util.quiet{color:var(--ink-3)}
.util.quiet:hover{color:var(--ink)}
.nav-util{display:none}

/* ---------- the save control (5A.1) ----------
   A bookmark. No red, no fill until it is on. */
.save{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:4px 0;
  font-size:12.5px;color:var(--ink-2);cursor:pointer;letter-spacing:.002em}
.save svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;
  transition:fill .18s ease}
.save:hover{color:var(--ink)}
.save.on{color:var(--ink)}
.save.on svg{fill:var(--ink)}
.save:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.card-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.card-top .t-name{flex:1}
.buy-top{display:flex;align-items:center;justify-content:space-between;gap:16px}

/* ---------- option groups on the product page ---------- */
.opt-set{border:0;padding:0;margin:26px 0 0}
.opt-set legend{padding:0;margin-bottom:10px}
.opts.tight{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.opts.tight .opt{padding:12px 14px}
.pers-body{margin-top:14px}
.pers-body input{width:100%;padding:13px 15px;background:var(--paper-3);
  border:1px solid var(--line);font-size:15px;outline:none}
.pers-body input:focus{border-color:var(--ink)}
.lead{margin-top:2px}

.qty-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:22px 0 18px}
.qty{display:flex;align-items:center;border:1px solid var(--line)}
.qty button{width:38px;height:40px;background:none;border:0;cursor:pointer;
  font-size:16px;color:var(--ink);line-height:1}
.qty button:hover{background:var(--paper-3)}
.qty input{width:52px;height:40px;text-align:center;border:0;border-left:1px solid var(--line);
  border-right:1px solid var(--line);background:none;font-size:15px;
  -moz-appearance:textfield;appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.btn.small{padding:9px 14px;font-size:13px;margin-top:12px}

/* ---------- empty states ---------- */
.empty{max-width:56ch;padding:clamp(30px,4vw,64px) 0 40px}
.empty .btn + .btn{margin-left:12px}

/* ---------- the project page ---------- */
.proj-name{max-width:420px;margin-bottom:clamp(28px,3vw,50px)}
.proj-name input{width:100%;padding:12px 15px;background:var(--paper-3);
  border:1px solid var(--line);font-size:16px;outline:none;margin-top:7px}
.proj-name input:focus{border-color:var(--ink)}

.proj-space{margin-bottom:clamp(30px,3.4vw,58px)}
.proj-space > .t-sub{padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:6px}
.proj-line{display:grid;grid-template-columns:88px minmax(0,1fr) minmax(0,190px);
  gap:clamp(14px,1.6vw,26px);padding:20px 0;border-bottom:1px solid var(--line);align-items:start}
.proj-line .pic{display:block;width:88px;height:88px;overflow:hidden;background:var(--paper-2)}
.proj-line .pic img{width:100%;height:100%;object-fit:cover}
.proj-space-pick,.proj-custom{margin-top:10px;padding:8px 11px;background:var(--paper-3);
  border:1px solid var(--line);font-size:13px;outline:none;max-width:220px;width:100%}
.proj-space-pick:focus,.proj-custom:focus{border-color:var(--ink)}
.proj-side{display:grid;gap:10px;justify-items:end;text-align:right}
.proj-acts{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.proj-acts button{background:none;border:0;padding:0;cursor:pointer;font-size:12.5px;
  color:var(--ink-2);border-bottom:1px solid var(--line)}
.proj-acts button:hover{color:var(--ink);border-bottom-color:var(--ink)}
.proj-acts button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.proj-totals{max-width:460px;margin:clamp(26px,3vw,48px) 0}
.proj-totals dl{margin:16px 0 0;border-top:1px solid var(--line)}
.proj-totals dl > div{display:flex;justify-content:space-between;gap:18px;
  padding:11px 0;border-bottom:1px solid var(--line)}
.proj-totals dt{font-size:14px;color:var(--ink-2)}
.proj-totals dd{font-size:14px;margin:0;text-align:right}
.proj-grand{font-size:22px;letter-spacing:-.02em;margin-top:16px}
.proj-send{margin-top:clamp(34px,4vw,70px);padding-top:clamp(30px,3.4vw,56px);
  border-top:1px solid var(--line)}
.proj-send .form{margin-top:22px}

/* ---------- the add-confirmation drawer (5B.8) ---------- */
body.locked{overflow:hidden}
.drawer-wrap{position:fixed;inset:0;z-index:200}
.drawer-veil{position:absolute;inset:0;background:rgba(10,17,22,.34);opacity:0;transition:opacity .25s ease}
.drawer-wrap.in .drawer-veil{opacity:1}
.drawer{position:absolute;top:0;right:0;bottom:0;width:min(420px,100%);
  background:var(--paper);border-left:1px solid var(--line);
  padding:clamp(20px,2.4vw,34px);overflow:auto;
  transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.drawer-wrap.in .drawer{transform:none}
.drawer-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:22px}
.drawer-x{background:none;border:0;padding:4px;cursor:pointer;color:var(--ink-2);line-height:0}
.drawer-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
.drawer-x:hover{color:var(--ink)}
.drawer-item{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;
  padding-bottom:22px;border-bottom:1px solid var(--line)}
.drawer-item img,.drawer-nopic{width:96px;height:96px;object-fit:cover;background:var(--paper-2);display:block}
.drawer-acts{display:flex;gap:12px;flex-wrap:wrap;margin:22px 0}
.drawer-more{padding-top:22px;border-top:1px solid var(--line)}
.drawer-rel{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.drawer-rel .pic{display:block;aspect-ratio:1/1;overflow:hidden;background:var(--paper-2);margin-bottom:8px}
.drawer-rel img{width:100%;height:100%;object-fit:cover}
.drawer-rel .t-name{font-size:12.5px;line-height:1.25}

@media (max-width:620px){
  /* Bottom sheet on a phone, because a 420px side panel is the width
     of the screen (5B.8). */
  .drawer{top:auto;left:0;width:100%;max-height:88vh;border-left:0;border-top:1px solid var(--line);
    transform:translateY(100%)}
  .proj-line{grid-template-columns:64px minmax(0,1fr)}
  .proj-line .pic{width:64px;height:64px}
  .proj-side{grid-column:1 / -1;justify-items:start;text-align:left}
  .proj-acts{justify-content:flex-start}
}

/* ---------- the one-off notice (5A.8) ---------- */
.notice{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:210;
  display:flex;align-items:center;gap:18px;max-width:min(520px,calc(100% - 32px));
  background:var(--grape);color:var(--on-dark);padding:14px 18px;font-size:13.5px}
.notice button{background:none;border:0;color:var(--on-dark-2);cursor:pointer;font-size:12.5px}
.notice button:hover{color:var(--on-dark)}

@media (prefers-reduced-motion:reduce){
  .drawer,.drawer-veil{transition:none}
}


/* ==================================================================
   RESPONSIVE OVERRIDES FOR THE PHASE A COMPONENTS

   These live at the END of the file on purpose. The component rules
   above are appended after the main breakpoints, so anything declared
   inside an earlier @media block loses to them at equal specificity
   regardless of the viewport. Putting the overrides last is what makes
   them actually apply.
   ================================================================== */

@media (max-width:1050px){
  /* The utility area collapses into the burger before the primary nav
     does, and reappears at the top of it, so Saved and My Project are
     never buried (3.3). */
  .bar-util{display:none}
  .nav-util{display:flex;gap:22px;padding-bottom:14px;margin-bottom:6px;
    border-bottom:1px solid var(--line)}
}
@media (max-width:900px){
  .nav-util{flex-wrap:wrap}
}
@media (max-width:760px){
  .proj-line{grid-template-columns:64px minmax(0,1fr)}
  .proj-line .pic{width:64px;height:64px}
  .proj-side{grid-column:1 / -1;justify-items:start;text-align:left}
  .proj-acts{justify-content:flex-start}
  .drawer-rel{grid-template-columns:repeat(3,1fr)}
  .empty .btn + .btn{margin-left:0;margin-top:10px;display:inline-block}
}

/* The hidden attribute must win over a display rule, or a control the
   script has switched off stays on screen. This bit the "buy
   individually" button, which appeared without a payment link behind it. */
[hidden]{display:none !important}
/* Nav labels never break mid-phrase; the bar loses items rather than
   stacking words. */
.bar-nav > a,.has-sub > .sub-trigger{white-space:nowrap}

/* ==================================================================
   HOW IT IS MADE — the film beside the steps
   The film used to run the full width of the page, which gave it more
   weight than the seven steps that are the actual point of the page.
   It now takes half, and sticks while the steps scroll past it, so the
   column never empties out underneath.
   ================================================================== */
.method-hero{
  max-width:var(--wide);margin:0 auto;
  padding:clamp(24px,3vw,52px) clamp(18px,2.2vw,34px) clamp(30px,3.6vw,64px);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,3.6vw,72px);align-items:start;
}
/* The column has to be as tall as the steps beside it, or the sticky
   child has no room to travel and simply scrolls away with it. */
.mh-film{align-self:stretch}
.mh-sticky{position:sticky;top:100px}
.mh-film video{
  width:100%;aspect-ratio:4/3;object-fit:cover;
  background:var(--grape);display:block;
}
.mh-film .t-meta{margin-top:12px;max-width:40ch}

.msteps{list-style:none;counter-reset:m;margin:clamp(22px,2.4vw,38px) 0 0;padding:0}
.mstep{
  counter-increment:m;
  display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start;
  padding:clamp(15px,1.5vw,22px) 0;border-top:1px solid var(--line);
}
.mstep:last-child{border-bottom:1px solid var(--line)}
.mstep-i{
  width:44px;height:44px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--paper-3);
}
.mstep-i svg{
  width:21px;height:21px;fill:none;stroke:var(--ink);
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
/* The number goes above the heading rather than in a circle, which keeps
   the icon as the only mark on the row. */
.mstep h3{
  font-size:16px;font-weight:500;letter-spacing:-.01em;margin:0 0 6px;
}
.mstep h3::before{
  content:counter(m,decimal-leading-zero);
  display:block;font-size:11px;font-weight:500;letter-spacing:.1em;
  color:var(--ink-3);margin-bottom:5px;
}
.mstep p{font-size:14.5px;line-height:1.58;color:var(--ink-2);margin:0}

@media (max-width:1000px){
  .method-hero{grid-template-columns:1fr;gap:clamp(24px,3vw,40px)}
  /* Stacked, a sticky film would sit over the steps rather than beside
     them, so it simply scrolls away. */
  .mh-sticky{position:static}
  .mh-film video{aspect-ratio:16/9}
}
@media (max-width:620px){
  .mstep{grid-template-columns:36px minmax(0,1fr);gap:13px}
  .mstep-i{width:36px;height:36px}
  .mstep-i svg{width:18px;height:18px}
}


/* ---------- the bar between the tagline dropping and the burger ----------
   Nav labels no longer wrap, which is right, so the bar has to lose
   space rather than height. Between 900 and 1100 it tightens: the gaps
   close up and the CTA drops its minimum width. Measured at 1024, where
   it previously needed 1058px in a 1024px window. */
@media (min-width:901px) and (max-width:1140px){
  .bar-in{gap:18px;padding-left:18px;padding-right:18px}
  .bar-nav{gap:16px}
  .bar-nav a,.sub-trigger{font-size:12.5px}
  .wordmark img{height:34px}
  .cta{min-width:0;padding:11px 15px;font-size:13px;gap:10px}
}