/* ============================================================
   Creative Karvings
   Vibrant, not tacky. The colour comes from Keno's own paints and his
   photographs; the typeface stays professional. The order panel is
   sticky and follows you down the page, so
   the piece, the name and the price are never off screen.
   ============================================================ */

:root{
  /* HIS PAINTS. These are the colours Keno actually has, and they are where all
     the life on this page comes from. Used with discipline: one colour per
     product, as a stripe and a price, never as an outline round everything.
     The typeface stays professional and the colour does the work. */
  --blue:#2B3FE0;
  --sky:#3FA9E0;
  --green:#2E9B4F;
  --red:#D8232A;
  --pink:#E8336C;
  --yellow:#F0B429;
  --yellow-ink:#9A6F05;             /* yellow fails as type on cream, so type uses this */

  --color-primary:#C2410C;
  --color-primary-bright:#EA580C;   /* fills only, never type: 3.35:1 on cream */
  --color-accent:#2B3FE0;
  --color-accent-hover:#2233C4;
  --on-accent:#FFFFFF;              /* type sitting on a filled button */

  /* Three grounds, spaced far enough apart to actually be seen, plus one ink
     block that punctuates rather than dominates. */
  --color-background:#FDF8F2;       /* base: most of the page */
  --color-muted:#F6EDE1;            /* alternate section */
  --deep:#171A1F;                   /* the ink bands and the footer */
  --paper:#FFFFFF;                  /* a raised panel */

  --color-foreground:#171A1F;
  --ink-2:#535C68;
  --ink-3:#7A828E;
  --hairline:#E7DDCE;
  --input-border:#B9AB97;
  --ring:#2B3FE0;

  /* The hero sits on footage, so its type can never follow the page theme.
     These stay fixed whatever the ground does. */
  --on-media:#FFFFFF;
  --on-media-2:#F1EDE6;

  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  /* Neutral elevation only. A coloured glow is the default AI look and it
     cheapens the thing it sits under. */
  --sh-sm:0 1px 2px rgba(23,26,31,.04), 0 10px 30px rgba(23,26,31,.07);
  --sh-md:0 2px 6px rgba(23,26,31,.06), 0 14px 34px rgba(23,26,31,.10);
  --sh-lg:0 2px 6px rgba(23,26,31,.06), 0 22px 48px rgba(23,26,31,.13);

  --t:200ms;
  --ease:cubic-bezier(.2,.7,.3,1);
  --r:10px;
  --r-lg:18px;

  --shell:min(1280px, 100% - 48px);
  --rail:400px;
  --hdr-h:70px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{
  margin:0;background:var(--color-background);color:var(--color-foreground);
  font-family:"Cabin",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;
}
/* height:auto matters as much as max-width here. Every img carries width and
   height attributes to reserve space, and without this the attribute height is
   the used height: constrain the width and the picture stretches. The rules
   that genuinely want a fixed height set object-fit and out-specify this. */
img{max-width:100%;height:auto;display:block}

/* ---------- type ----------
   Professional, never jokey. Keno was explicit: quality work should not sit in
   a tacky website, and the font must not do the joking. Colour and photography
   carry the life instead. */
.d{font-family:"Outfit",system-ui,-apple-system,sans-serif;
   font-weight:700;line-height:1.06;margin:0;text-wrap:balance;letter-spacing:-.021em}
h1.d{font-size:clamp(2.8rem,6.4vw,4.5rem)}
h2.d{font-size:clamp(2rem,4vw,2.9rem)}
h3.d{font-size:clamp(1.35rem,2.1vw,1.7rem)}
h4.d{font-size:clamp(1.15rem,1.7vw,1.35rem)}

/* The name is the product, so it is the one word carrying colour in the
   headline. It cycles through people he has actually made boxes for, each in
   the paint he used on theirs. */
.d .routed{display:inline-block;color:var(--pink);transition:color 320ms var(--ease)}
.d .routed.swap{animation:nameRise 420ms var(--ease)}
@keyframes nameRise{from{opacity:0;transform:translateY(.16em)}to{opacity:1;transform:translateY(0)}}
/* A short rule leads every eyebrow, so the label reads as a caption on
   something rather than as floating small text. */
.kick{display:inline-flex;align-items:center;gap:12px;
  font-family:"Outfit",sans-serif;font-weight:600;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.kick::before{content:"";width:26px;height:3px;border-radius:2px;background:var(--pink);flex:0 0 auto}
p{margin:0 0 1em;max-width:66ch}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(1.06rem,1.5vw,1.24rem);color:var(--ink-2);max-width:58ch}
a{color:var(--color-accent);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.shell{width:var(--shell);margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--color-accent);color:var(--on-accent);
  padding:12px 18px;border-radius:0 0 8px 0;font-weight:700}
.skip:focus{left:0}

/* ---------- buttons ---------- */
/* Soft, confident, and quiet enough to let the photographs lead. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-family:"Outfit",sans-serif;font-weight:600;font-size:1rem;
  letter-spacing:0;text-transform:none;
  padding:15px 28px;border-radius:12px;border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background var(--t) var(--ease),color var(--t) var(--ease),
             border-color var(--t) var(--ease),box-shadow var(--t) var(--ease);
}
.btn-primary{background:var(--color-accent);color:var(--on-accent);border-color:var(--color-accent);
  box-shadow:0 6px 16px rgba(23,26,31,.16)}
.btn-primary:hover{background:var(--color-accent-hover);border-color:var(--color-accent-hover);color:var(--on-accent);
  transform:translateY(-2px);box-shadow:0 10px 24px rgba(23,26,31,.22)}
.btn-secondary{background:transparent;color:var(--color-foreground);border-color:var(--hairline)}
.btn-secondary:hover{background:transparent;color:var(--color-foreground);border-color:var(--color-foreground);transform:translateY(-2px)}
.btn-lg{padding:17px 32px;font-size:1.05rem}
.btn-block{width:100%}
@media (pointer:coarse){.btn{min-height:48px}}

/* ---------- header ---------- */
.hdr{
  position:sticky;top:0;z-index:70;height:var(--hdr-h);
  background:rgba(253,248,242,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hairline);
}
.hdr .shell{display:flex;align-items:center;justify-content:space-between;gap:20px;height:100%}
/* the logo and the name are one lockup: the logo sets the height, the name
   stacks beside it so it never squeezes the mark */
.mark{display:flex;align-items:center;gap:12px;text-decoration:none;line-height:1}
.mark img{width:auto;height:clamp(34px,4.4vw,50px);flex:0 0 auto;display:block}
.nav{display:flex;align-items:center;gap:30px}
.nav a:not(.btn){font-family:"Outfit",sans-serif;font-weight:500;font-size:.95rem;letter-spacing:0;
  color:var(--ink-2);text-decoration:none;
  padding:4px 2px;border-bottom:1px solid transparent;transition:color var(--t) var(--ease),border-color var(--t) var(--ease)}
.nav a:not(.btn):hover,.nav a:not(.btn)[aria-current="page"]{color:var(--color-foreground);border-bottom-color:var(--pink)}
.nav .btn{padding:10px 18px;white-space:nowrap;flex:0 0 auto}
@media (max-width:900px){.nav a:not(.btn){display:none}}
@media (max-width:520px){
  /* with the links gone this is the only control up here, so it does not need
     to shout: shrink it before it crowds the name */
  .nav .btn{padding:10px 14px;font-size:.66rem;letter-spacing:.11em}
}
/* the eyebrow reads better broken as a block than wrapped mid-phrase */
@media (max-width:560px){
  .kick{align-items:flex-start}
  .kick::before{margin-top:.62em;width:24px}
}

/* ============================================================
   HERO: full height, copy centred over the middle of the frame.
   ============================================================ */
.hero{position:relative;overflow:hidden;background:var(--deep)}
.hero-media{position:relative;height:clamp(480px,86svh,940px)}
.hero-media video{
  width:100%;height:100%;object-fit:cover;display:block;
  background:var(--deep);
  transition:opacity 500ms var(--ease);
}
/* Hover fades the footage back into the dark behind it, so the words step
   forward. Fading the video can only ever darken the hero, which is why the
   contrast floors below hold in both states. */
.hero:hover .hero-media video{opacity:.3}

/* Two scrims, because the footage brightens badly through the middle of the
   clip: a wash over the whole frame, and a pool that sits under the copy. */
.hero-wash{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom, rgba(8,12,22,.52), rgba(8,12,22,.34) 42%, rgba(8,12,22,.56))}

/* Left-aligned now, with the footage running out to the right, the way the
   reference does it. The copy sits in the calm left third. */
.hero-copy{
  position:absolute;inset:0;display:grid;align-items:center;text-align:left;
  color:var(--on-media);
  text-shadow:0 1px 2px rgba(5,8,16,.9),0 3px 18px rgba(5,8,16,.72);
}
.hero-copy .inner{position:relative;width:var(--shell);margin-inline:auto}
/* the pool travels with the copy, so it covers the kicker and the buttons too.
   It paints at z-index 0 and the copy is lifted to 1: a negative z-index would
   escape .inner (no stacking context here) and hide behind the video. */
/* The scrim is a left-to-right wipe now, not a pool: the copy lives on the left
   and the footage should stay clean on the right. Sized in ch so it tracks the
   text column rather than the viewport. */
.hero-copy .inner::before{
  content:"";position:absolute;inset:-40% -12% -40% -50vw;z-index:0;pointer-events:none;
  background:linear-gradient(to right,
    rgba(10,8,5,.94) 0%, rgba(10,8,5,.88) 45%, rgba(10,8,5,.62) 72%, rgba(10,8,5,0) 100%);
}
.hero-copy .inner > *{position:relative;z-index:1}
.hero-copy .kick{margin-bottom:var(--s6);text-shadow:none;color:#FFD9B8}
.hero-copy h1{color:var(--on-media);max-width:13ch;margin-inline:0}
.hero-copy h1 .routed{margin-top:.06em;-webkit-text-stroke-color:#FFD9B8;text-stroke-color:#FFD9B8}
.hero-copy p{margin:var(--s6) 0 0;color:var(--on-media-2);max-width:42ch;font-size:1.06rem}
.hero-cta{margin-top:var(--s7);display:flex;gap:var(--s4);justify-content:flex-start;
  align-items:center;flex-wrap:wrap}
.hero-cta .btn{text-shadow:none}
/* the quiet partner to the filled button: a plain tracked link, no box */
.hero-cta .btn-ghost{background:transparent;color:var(--on-media);border-color:transparent;
  padding-inline:4px}
.hero-cta .btn-ghost:hover{background:transparent;color:#FFD9B8;border-color:transparent}
.hero-cta .btn-ghost::after{content:"\2193";font-size:1.05em;line-height:1}
@media (max-width:760px){
  .hero-copy .inner::before{inset:-40% -12% -40% -50vw;
    background:linear-gradient(to right, rgba(10,8,5,.94) 0%, rgba(10,8,5,.86) 70%, rgba(10,8,5,.55) 100%)}
}

/* nothing to hover on a touch screen, and someone who asked for less motion
   should not get a half-second crossfade under the cursor */
@media (hover:none),(prefers-reduced-motion:reduce){
  .hero:hover .hero-media video{opacity:1}
  .hero-media video{transition:none}
}


/* ============================================================
   THE DESK: sticky order rail beside a scrolling column
   ============================================================ */
.desk{padding:var(--s8) 0 var(--s9)}
.desk-grid{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start}
@media (max-width:1000px){.desk-grid{grid-template-columns:1fr;gap:var(--s7)}}

/* the rail */
/* A sticky element taller than the viewport stops sticking, silently, and the
   rail is tall on a short laptop. Cap it and let the card scroll inside itself
   rather than lose the whole behaviour. */
.rail{position:sticky;top:calc(var(--hdr-h) + 24px);
  max-height:calc(100svh - var(--hdr-h) - 40px);
  overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
@media (max-width:1000px){.rail{position:static;max-height:none;overflow:visible}}
.rail-card{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r);
  box-shadow:var(--sh-md);overflow:hidden}
.rail-head{padding:var(--s4) var(--s5);border-bottom:1px solid var(--hairline);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.rail-head .lbl{font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.rail-head .step{font-weight:700;font-size:.8rem;color:var(--color-primary);font-variant-numeric:tabular-nums}

/* An explicit height rather than aspect-ratio plus max-height. That pairing
   shrinks the WIDTH to preserve the ratio, which stranded the photo in the
   corner of a wide card; a height with object-fit:cover keeps the panel full
   width and crops instead. The cap matters: the whole rail card has to fit the
   viewport or position:sticky quietly stops sticking. */
.piece{position:relative;width:100%;height:clamp(260px,34vh,380px);
  overflow:hidden;container-type:inline-size;
  border-bottom:1px solid var(--hairline);background:var(--color-muted)}
.piece img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Once the rail stops being a column and spans the page, the card has to stop
   with it, or the photo sits in a sea of white. */
@media (max-width:1000px){
  .rail-card{max-width:440px;margin-inline:auto}
}

/* What you picked for the front, under the box, so choosing one visibly does
   something. Hidden when the choice is "just the name". */
.piece-design{
  display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s3);align-items:center;
  padding:var(--s3) var(--s5);border-bottom:1px solid var(--hairline);
  background:var(--color-muted);
}
.piece-design[hidden]{display:none}
.piece-design img{width:56px;height:64px;object-fit:cover;border-radius:6px;
  border:1px solid var(--hairline);background:var(--paper);display:block}
.piece-design .t{min-width:0}
.piece-design .k{display:block;font-size:.68rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3)}
.piece-design .v{display:block;font-weight:700;color:var(--color-foreground);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* The name has to sit IN the plane of the lid or it reads as a sticker. The
   rotation matches the coin slot in the photograph, the shear and the vertical
   squash match the angle the lid is seen at. Measured off the file, not guessed. */
.lidname{
  position:absolute;left:46%;top:29.5%;
  transform:translate(-50%,-50%) rotate(-5.3deg) skewX(-9deg) scaleY(.62);
  white-space:nowrap;pointer-events:none;
}
.lidname .txt{
  display:block;line-height:1;white-space:nowrap;
  font-family:"Outfit",system-ui,sans-serif;font-weight:700;
  font-size:13cqw;letter-spacing:.03em;text-transform:uppercase;
  color:var(--pick,#2B3FE0);
  /* a lit top edge and a dark lower edge: the routed groove he cuts round it */
  text-shadow:0 -1px 0 var(--edge,rgba(38,26,8,.55)),0 1px 0 rgba(255,252,244,.5);
  transition:color var(--t) var(--ease);
}
.lidname.empty .txt{
  font-family:"Cabin",sans-serif;font-weight:700;font-size:4.4cqw;
  letter-spacing:.14em;color:rgba(74,56,28,.62);text-shadow:0 1px 0 rgba(255,252,244,.55);
}
.lidname .txt .c{
  --kc:clamp(0,(var(--tk,1) - var(--th,0))*3,1);
  display:inline-block;opacity:var(--kc);
  transform:translateY(calc((1 - var(--kc))*-8px)) rotate(calc((1 - var(--kc))*-6deg));
  transition:opacity 170ms var(--ease),transform 170ms var(--ease);
}

.rail-sum{padding:var(--s4) var(--s5);display:flex;flex-direction:column;gap:var(--s2)}
.sum-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:.96rem}
.sum-row .k{color:var(--ink-3);font-weight:600}
.sum-row .v{font-weight:700}
.sum-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-top:var(--s2);padding-top:var(--s3);border-top:1px solid var(--hairline)}
.sum-total .k{font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.price{font-family:"Outfit",system-ui,sans-serif;font-weight:700;font-size:2.8rem;line-height:.9;
  color:var(--color-primary);font-variant-numeric:tabular-nums}
.price sup{font-size:.42em;top:-.5em;position:relative;color:var(--ink-3)}
.rail-act{padding:0 var(--s5) var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.rail-act .fine{font-size:.88rem;color:var(--ink-3);text-align:center;margin:0}
.rail-act .alt{font-size:.88rem;text-align:center;margin:0}

/* the scrolling column */
.col{display:flex;flex-direction:column;gap:var(--s8)}
.step-block{scroll-margin-top:calc(var(--hdr-h) + 24px)}
.step-head{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5)}
.step-no{
  flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:var(--color-primary);color:var(--on-accent);font-weight:700;font-size:.9rem;
}
.step-head h2{margin:0}
.step-head .hint{margin-left:auto;font-size:.86rem;color:var(--ink-3);font-weight:600}
@media (max-width:560px){.step-head .hint{display:none}}

.sizes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3)}
.sizes label{position:relative;display:block;cursor:pointer;text-align:center;background:var(--paper);
  border:2px solid var(--hairline);border-radius:8px;padding:var(--s4) var(--s2);
  transition:border-color var(--t) var(--ease),background var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.sizes label:hover{border-color:var(--color-primary-bright);box-shadow:var(--sh-md)}
.sizes input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.sizes .n{display:block;font-family:"Outfit",system-ui,sans-serif;font-weight:700;font-size:2.6rem;line-height:.8}
.sizes .u{display:block;margin-top:6px;font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.sizes .p{display:block;margin-top:8px;font-weight:700;color:var(--ink-2)}
.sizes label:has(input:checked){border-color:var(--color-primary);background:#FFF1E6}
.sizes label:has(input:checked) .p{color:var(--color-primary)}
.sizes label:has(input:focus-visible){outline:3px solid var(--ring);outline-offset:3px}
/* twelve inch is real but not a size he stocks, so it is offered and labelled */
.sizes label.ask{border-style:dashed}
.sizes .flag{display:block;margin-top:6px;font-size:.6rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
.sizes label.ask:has(input:checked) .flag{color:var(--color-primary)}

/* what goes on the front: every tile is a box he has already finished */
.designs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s3)}
@media (max-width:560px){.designs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.designs label{position:relative;display:flex;flex-direction:column;gap:8px;cursor:pointer}
.designs input{position:absolute;opacity:0;width:0;height:0}
.designs .shot{display:block;position:relative;aspect-ratio:3/4;overflow:hidden;border-radius:10px;
  border:2px solid var(--hairline);background:var(--color-muted);
  transition:border-color var(--t) var(--ease),box-shadow var(--t) var(--ease),
             transform var(--t) var(--ease)}
.designs .shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.designs label:hover .shot{transform:translateY(-2px);box-shadow:var(--sh-md);
  border-color:var(--color-primary-bright)}
.designs .lbl{font-size:.9rem;font-weight:600;color:var(--ink-2);text-align:center;
  transition:color var(--t) var(--ease)}
.designs label:has(input:checked) .shot{border-color:var(--color-primary);box-shadow:var(--sh-md)}
.designs label:has(input:checked) .lbl{color:var(--color-primary);font-weight:700}
.designs label:has(input:focus-visible) .shot{outline:3px solid var(--ring);outline-offset:3px}
.designs .shot.no{display:grid;place-items:center;border-style:dashed}
.designs .ni{font-size:.78rem;font-weight:600;color:var(--ink-3);text-align:center;padding:0 12px}

.piece-design .lidnote{display:block;font-size:.78rem;color:var(--ink-3);margin-top:2px}
.piece-design .lidnote[hidden]{display:none}

.extras{margin-top:var(--s6);padding:var(--s5);border:1px solid var(--hairline);
  border-radius:var(--r);background:var(--color-muted)}
.extras h3{margin:0 0 var(--s3);font-family:"Cabin",sans-serif;font-size:.98rem;font-weight:700;
  color:var(--color-foreground)}
.extras ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.extras li{position:relative;padding-left:22px;font-size:.95rem;color:var(--ink-2);line-height:1.55}
.extras li::before{content:"";position:absolute;left:2px;top:.6em;width:8px;height:8px;
  border-radius:2px;background:var(--color-primary)}
.extras b{color:var(--color-foreground)}

.swatches{display:flex;flex-wrap:wrap;gap:var(--s4)}
.swatches label{position:relative;cursor:pointer;width:52px;height:52px;border-radius:50%;
  border:2px solid rgba(15,23,42,.28);
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease)}
.swatches label:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
.swatches input{position:absolute;opacity:0;inset:0;width:100%;height:100%;cursor:pointer;margin:0}
.swatches label::after{content:"";position:absolute;inset:-7px;border-radius:50%;
  border:3px solid var(--color-primary);opacity:0;transform:scale(.86);
  transition:opacity var(--t) var(--ease),transform var(--t) var(--ease)}
.swatches label:has(input:checked)::after{opacity:1;transform:scale(1)}
.swatches label:has(input:focus-visible){outline:3px solid var(--ring);outline-offset:7px}

.namewrap{position:relative;max-width:420px}
.namewrap input{width:100%;background:var(--paper);border:2px solid var(--input-border);border-radius:8px;
  padding:15px 68px 15px 18px;font-family:"Cabin",sans-serif;font-weight:700;font-size:1.1rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--color-foreground);
  transition:border-color var(--t) var(--ease)}
.namewrap input::placeholder{font-weight:600;letter-spacing:.06em;color:var(--ink-3);text-transform:none}
.namewrap input:focus{outline:none;border-color:var(--color-primary)}
.namewrap input:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.count{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-weight:700;font-size:.8rem;
  color:var(--ink-3);font-variant-numeric:tabular-nums;pointer-events:none}
.help{margin-top:10px;font-size:.92rem;color:var(--ink-3)}

/* ============================================================
   THE REST OF WHAT HE MAKES: a bento, not four equal boxes
   ============================================================ */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(0,auto);gap:var(--s4)}
.bento .cell{display:flex;flex-direction:column;text-decoration:none;color:inherit;cursor:pointer;
  background:var(--paper);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm);
  transition:transform var(--t) var(--ease)}
.bento .cell:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.bento .cell .shot{overflow:hidden;position:relative;background:var(--color-muted);
  transition:box-shadow var(--t) var(--ease)}
/* the colour lives in one confident stripe, not round everything */
.bento .cell .shot::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--accent,var(--blue))}
.bento .cell .shot img{width:100%;height:100%;object-fit:cover;transition:transform 420ms var(--ease)}
.bento .cell:hover .shot img{transform:scale(1.04)}
.bento .cell .body{padding:20px 20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.bento .cell h3{margin:0}
.bento .cell p{font-size:.95rem;color:var(--ink-2);margin:0}
.bento .cell .price-from{margin-top:auto;padding-top:12px;font-family:"Outfit",sans-serif;
  font-weight:600;color:var(--accent,var(--blue));font-size:.95rem}
/* one paint per product, in the order they appear */
.bento .cell:nth-child(1){--accent:var(--blue)}
.bento .cell:nth-child(2){--accent:var(--green)}
.bento .cell:nth-child(3){--accent:var(--pink)}
.bento .cell:nth-child(4){--accent:var(--red)}
.bento .cell:nth-child(5){--accent:var(--yellow)}
.bento .cell:nth-child(5) .price-from{color:var(--yellow-ink)}
/* the piggy bank is the business, so it gets twice the room */
.bento .lead{grid-column:span 2;grid-row:span 2}
.bento .lead .shot{aspect-ratio:16/11;height:auto}
.bento .cell:not(.lead) .shot{aspect-ratio:4/3}
@media (max-width:820px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento .lead{grid-column:span 2;grid-row:auto}
}
@media (max-width:520px){
  .bento{grid-template-columns:1fr}
  .bento .lead{grid-column:span 1}
}
.bento-note{margin-top:var(--s5);color:var(--ink-3);font-size:.94rem}

/* ============================================================
   BANDS
   ============================================================ */
.band{padding:clamp(56px,7vw,90px) 0;border-top:1px solid var(--hairline)}
.band-blue{background:var(--color-muted);color:var(--color-foreground);text-align:center}
.band-blue .kick{color:var(--color-primary);margin-bottom:var(--s4)}
.band-blue h2{color:var(--color-foreground);margin-inline:auto;max-width:17ch}
.band-blue p{color:var(--ink-2);margin:var(--s5) auto 0;text-align:center}
.band-blue .lines{margin-top:var(--s6);display:flex;gap:var(--s5);justify-content:center;flex-wrap:wrap}
.band-blue .lines a{color:var(--color-primary);font-weight:700;text-decoration:none;border-bottom:1px solid rgba(200,164,78,.45)}
.band-blue .lines a:hover{border-bottom-color:var(--color-primary)}

.band-ink{background:var(--deep);color:var(--on-media)}
.band-ink .kick{color:#FDBA74}
.band-ink p{color:#CBD5E1}
.band-paper{background:var(--color-background)}
.band-muted{background:var(--color-muted)}
.bhead{margin-bottom:var(--s7)}
.bhead .kick{display:block;margin-bottom:var(--s3)}
.bhead .lede{margin-top:var(--s4)}
.band-ink .lede{color:#CBD5E1}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r);
  padding:var(--s5);text-align:center;box-shadow:var(--sh-sm)}
.stat b{display:block;font-family:"Outfit",system-ui,sans-serif;font-weight:700;font-size:2.8rem;line-height:.85;
  color:var(--color-accent)}
.stat span{display:block;margin-top:8px;font-size:.74rem;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3)}
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s4)}
@media (max-width:860px){.quotes{grid-template-columns:1fr}}
.quote{background:var(--paper);border:2px dashed #E4D3C4;border-radius:var(--r);padding:var(--s5);
  min-height:140px;display:grid;place-items:center;text-align:center;color:var(--ink-3);font-size:.94rem}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4)}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.stepc{background:#1B2437;border:1px solid #33405C;border-radius:var(--r);padding:var(--s5)}
.stepc .no{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--color-primary);color:var(--on-accent);font-weight:700;font-size:.88rem;margin-bottom:var(--s4)}
.stepc h4{margin:0 0 6px}
.stepc p{font-size:.94rem;color:#CBD5E1;margin:0}

.faq{max-width:820px}
.qa{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r);
  margin-bottom:10px;overflow:hidden;box-shadow:var(--sh-sm)}
.qa button{width:100%;background:none;border:0;cursor:pointer;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:18px;padding:var(--s5);
  color:var(--color-foreground);font-family:"Cabin",sans-serif;font-weight:700;font-size:1.04rem;
  line-height:1.35;transition:color var(--t) var(--ease)}
.qa button:hover{color:var(--color-primary)}
.qa .ico{position:relative;flex:0 0 18px;width:18px;height:18px}
.qa .ico::before,.qa .ico::after{content:"";position:absolute;background:var(--color-primary);border-radius:2px;
  transition:transform var(--t) var(--ease),opacity var(--t) var(--ease)}
.qa .ico::before{left:0;top:8px;width:18px;height:3px}
.qa .ico::after{left:7.5px;top:0;width:3px;height:18px}
.qa.open .ico::after{transform:scaleY(0);opacity:0}
.qa .ans{display:grid;grid-template-rows:0fr;transition:grid-template-rows 260ms var(--ease)}
.qa.open .ans{grid-template-rows:1fr}
.qa .ans>div{min-height:0;overflow:hidden}
.qa .ans p{padding:0 var(--s5) var(--s5);color:var(--ink-2);font-size:.99rem}

.keno{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,4vw,56px);align-items:center}
@media (max-width:900px){.keno{grid-template-columns:1fr}}
.keno .shot{overflow:hidden;border-radius:var(--r-lg);aspect-ratio:1/1;box-shadow:var(--sh-lg)}
.keno .shot img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.keno h2+p{margin-top:var(--s4)}

.close{background:var(--deep);color:var(--on-media);text-align:center}
.close .kick{color:#FDBA74;margin-bottom:var(--s4)}
.close h2{color:var(--on-media);margin-inline:auto;max-width:15ch}
.close p{color:#CBD5E1;margin:var(--s5) auto 0}
.close .row{margin-top:var(--s6);display:flex;gap:var(--s4);justify-content:center;flex-wrap:wrap}
.close .btn-primary{background:var(--color-accent);color:var(--on-accent)}
.close .btn-primary:hover{background:var(--color-accent-hover);color:var(--on-accent)}
.close .lines{margin-top:var(--s7);display:flex;gap:var(--s5);justify-content:center;flex-wrap:wrap}
.close .lines a{color:var(--on-media);font-weight:700;text-decoration:none;border-bottom:2px solid rgba(255,255,255,.45)}

/* ---------- sub pages ---------- */
.phead{padding:clamp(44px,6vw,76px) 0 clamp(28px,4vw,48px)}
.phead .kick{display:block;margin-bottom:var(--s3)}
.phead .lede{margin-top:var(--s4)}
.prow{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(26px,4vw,52px);
  align-items:center;padding:clamp(34px,4vw,58px) 0;border-bottom:1px solid var(--hairline)}
.prow:nth-child(even){grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.prow:nth-child(even) .shot{order:2}
@media (max-width:860px){
  .prow,.prow:nth-child(even){grid-template-columns:1fr;gap:var(--s5)}
  .prow:nth-child(even) .shot{order:0}
}
.prow .shot{overflow:hidden;border-radius:var(--r-lg);aspect-ratio:4/3;box-shadow:var(--sh-lg)}
.prow .shot img{width:100%;height:100%;object-fit:cover}
.prow h2+p{margin-top:var(--s4)}
.chips{margin-top:var(--s5);display:flex;flex-wrap:wrap;gap:10px}
.chips span{background:var(--paper);border:1px solid var(--hairline);border-radius:999px;
  padding:9px 16px;font-weight:700;font-size:.9rem;color:var(--ink-2)}
.chips span b{color:var(--color-primary)}

.gal{columns:3;column-gap:var(--s4)}
@media (max-width:900px){.gal{columns:2}}
@media (max-width:560px){.gal{columns:1}}
.gal figure{break-inside:avoid;margin:0 0 var(--s4);border-radius:var(--r-lg);box-shadow:var(--sh-sm);
  overflow:hidden;background:var(--paper);box-shadow:var(--sh-sm)}
.gal img{width:100%;height:auto;transition:transform 420ms var(--ease)}
.gal figure:hover img{transform:scale(1.04)}
.gal figcaption{padding:var(--s3) var(--s4);font-weight:700;font-size:.84rem;color:var(--ink-3)}
.gal .slot{display:grid;place-items:center;min-height:190px;border:2px dashed #E4D3C4;
  color:var(--ink-3);text-align:center;padding:var(--s5);font-weight:600}

.cgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(28px,4vw,52px)}
@media (max-width:860px){.cgrid{grid-template-columns:1fr}}
.field{margin-bottom:var(--s5)}
.field label{display:block;font-weight:700;font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:8px}
.field input,.field textarea{width:100%;background:var(--paper);border:2px solid var(--input-border);
  border-radius:8px;padding:13px 16px;font-family:inherit;font-size:16px;color:var(--color-foreground);
  transition:border-color var(--t) var(--ease)}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--color-primary)}
.field input:focus-visible,.field textarea:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.cbox{background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r);padding:var(--s5);
  box-shadow:var(--sh-sm)}
.cbox+.cbox{margin-top:var(--s4)}
.cbox h4{margin:0 0 10px}
.cbox a{display:block;font-weight:700;font-size:1.04rem;color:var(--color-foreground);text-decoration:none;
  transition:color var(--t) var(--ease)}
.cbox a:hover{color:var(--color-primary)}
.cbox p{color:var(--ink-2);font-size:.94rem;margin-top:10px}

/* ---------- footer ---------- */
.ftr{background:var(--deep);color:var(--on-media);padding:var(--s8) 0 var(--s6)}
.ftr-grid{display:grid;grid-template-columns:minmax(0,1.1fr) repeat(3,minmax(0,.63fr));gap:var(--s6)}
@media (max-width:860px){.ftr-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.ftr-grid{grid-template-columns:1fr}}
.ftr img.emblem{width:min(210px,68%);margin-bottom:var(--s4)}
.ftr h5{font-size:.68rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:#FDBA74;margin:0 0 var(--s4)}
.ftr ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ftr a{color:#E2E8F0;text-decoration:none;transition:color var(--t) var(--ease)}
.ftr a:hover{color:#FDBA74}
.ftr p{color:#94A3B8;font-size:.94rem;max-width:34ch}
.ftr-btm{margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid #334155;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.8rem;color:#94A3B8}

/* ---------- entrances ---------- */
.rv{opacity:0;transform:translateY(16px);transition:opacity 300ms var(--ease),transform 300ms var(--ease)}
.rv.in{opacity:1;transform:none}
.stag>.rv:nth-child(2){transition-delay:40ms}
.stag>.rv:nth-child(3){transition-delay:80ms}
.stag>.rv:nth-child(4){transition-delay:120ms}
.stag.done>.rv{transition-delay:0s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;transition-delay:0s !important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}

/* ============================================================
   A PRODUCT'S OWN PHOTOS, unfolded under its row on the shop
   page, plus the filter chips on the gallery.
   ============================================================ */
.prow-act{margin-top:var(--s5);display:flex;gap:var(--s3);flex-wrap:wrap;align-items:center}
.pgal-toggle{font:inherit}
.pgal-toggle .chev{
  width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--t) var(--ease);
}
.pgal-toggle.open .chev{transform:rotate(-135deg) translate(-2px,-2px)}

.pgal{grid-column:1/-1;margin-top:var(--s5);padding-top:var(--s5);border-top:1px solid var(--hairline)}
.pgal[hidden]{display:none}
.pgal-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:var(--s4);
}
.pgal-grid figure{margin:0;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm);
  background:var(--paper)}
.pgal-grid figure img{width:100%;aspect-ratio:1/1;object-fit:cover;
  transition:transform 420ms var(--ease)}
.pgal-grid figure:hover img{transform:scale(1.04)}
.pgal-grid figcaption{padding:10px 12px 12px;font-size:.84rem;color:var(--ink-2);line-height:1.4}
.pgal-grid .gbtn{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}

/* the chips */
.galfilter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:var(--s6)}
.chip{
  font-family:"Outfit",sans-serif;font-weight:500;font-size:.92rem;
  background:var(--paper);color:var(--ink-2);
  border:1.5px solid var(--hairline);border-radius:999px;
  padding:9px 16px;cursor:pointer;min-height:42px;
  transition:border-color var(--t) var(--ease),color var(--t) var(--ease),
             background var(--t) var(--ease);
}
.chip span{color:var(--ink-3);font-variant-numeric:tabular-nums;margin-left:4px}
.chip:hover{border-color:var(--color-foreground);color:var(--color-foreground)}
.chip.on{background:var(--color-foreground);border-color:var(--color-foreground);color:#fff}
.chip.on span{color:rgba(255,255,255,.7)}
.gal figure[hidden]{display:none}
.galempty{margin-top:var(--s6);color:var(--ink-3)}
.galempty[hidden]{display:none}

@media (max-width:560px){
  .pgal-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:var(--s3)}
}

/* ============================================================
   HEADER: the logo is the wordmark, and a menu that exists on a
   phone instead of the links silently disappearing.
   ============================================================ */

.navtoggle{
  display:none;width:46px;height:46px;padding:0;flex:0 0 auto;
  background:none;border:1.5px solid var(--hairline);border-radius:10px;cursor:pointer;
  align-items:center;justify-content:center;
  transition:border-color var(--t) var(--ease);
}
.navtoggle:hover{border-color:var(--color-foreground)}
.navtoggle .bars,
.navtoggle .bars::before,
.navtoggle .bars::after{
  display:block;width:19px;height:2px;border-radius:2px;background:var(--color-foreground);
  transition:transform var(--t) var(--ease),opacity var(--t) var(--ease);
}
.navtoggle .bars{position:relative}
.navtoggle .bars::before,.navtoggle .bars::after{content:"";position:absolute;left:0}
.navtoggle .bars::before{top:-6px}
.navtoggle .bars::after{top:6px}
.navtoggle[aria-expanded="true"] .bars{background:transparent}
.navtoggle[aria-expanded="true"] .bars::before{transform:translateY(6px) rotate(45deg)}
.navtoggle[aria-expanded="true"] .bars::after{transform:translateY(-6px) rotate(-45deg)}

.navpanel{
  display:none;border-top:1px solid var(--hairline);
  background:var(--color-background);padding:var(--s5) 0 var(--s6);
}
.navpanel[hidden]{display:none}
.navpanel nav{width:var(--shell);margin-inline:auto;display:flex;flex-direction:column;gap:2px}
.navpanel nav a:not(.btn){
  font-family:"Outfit",sans-serif;font-weight:500;font-size:1.12rem;
  color:var(--color-foreground);text-decoration:none;
  padding:14px 2px;border-bottom:1px solid var(--hairline);
}
.navpanel nav a[aria-current="page"]{color:var(--pink)}
.navpanel nav .btn{margin-top:var(--s4)}
.navcall{
  width:var(--shell);margin:var(--s5) auto 0;display:flex;gap:var(--s5);flex-wrap:wrap;
  font-family:"Outfit",sans-serif;font-weight:600;font-size:.95rem;
}
.navcall a{color:var(--color-accent);text-decoration:none}

@media (max-width:900px){
  .navtoggle{display:inline-flex}
  /* the whole desktop nav goes, button included: it was sitting next to the
     hamburger and repeating the call to action that the panel already carries */
  .nav{display:none}
  .navpanel:not([hidden]){display:block}
  /* the header is no longer a fixed 70px once the panel is open under it */
  .hdr{height:auto}
  .hdr .shell{height:var(--hdr-h)}
}
@media (min-width:901px){
  .navpanel{display:none !important}
}

/* the logo and the name set as one lockup, the name stacked so it stays
   compact and never squeezes the mark */
.markname{display:flex;flex-direction:column;line-height:1;gap:2px}
.markname .t1{
  font-family:"Outfit",sans-serif;font-weight:700;font-size:1.22rem;
  letter-spacing:-.015em;color:var(--color-foreground);
}
.markname .t2{
  font-family:"Outfit",sans-serif;font-weight:600;font-size:.66rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--pink);
}
@media (max-width:520px){
  .mark{gap:9px}
  .markname .t1{font-size:1.04rem}
  .markname .t2{font-size:.58rem;letter-spacing:.2em}
}