/* ================================================================ BOLTON — COMMERCIAL
   The /commercial page (cafés, coffee shops, restaurants). Built on
   editorial.css: same type, swatches and motion. What's here is only what that
   page adds — the proof band, the work grid, the steps and the price list set
   like a printed café menu. Scoped under main.cm. */
.ed .sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* the wedding offer in the footer doesn't belong on this page */
.ed:has(main.cm) .ftr .offer{display:none}

/* ---------------------------------------------------------------- top */
.ed .cm-top h1{font-size:clamp(46px,7.2vw,112px);line-height:.94}
.ed .cm-top .ptop__side{gap:28px}
.ed .cm .band{aspect-ratio:2.39/1}
@media (max-width:600px){.ed .cm .band{aspect-ratio:4/3}}
.ed .cm-hoods{font-family:var(--ui);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--smoke);
  padding-block:16px;border-bottom:1px solid var(--hair);line-height:2}

/* ---------------------------------------------------------------- proof (a dark band) */
.ed .cm-proof{background:var(--night);color:var(--night-fg);padding-block:clamp(64px,10vw,140px);margin-top:clamp(56px,8vw,110px);position:relative;overflow:hidden}
.ed .cm-proof::before{content:"";position:absolute;inset:auto auto -45% -15%;width:70vw;height:70vw;max-width:900px;max-height:900px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(166,87,42,.22),rgba(166,87,42,0));pointer-events:none}
.ed .cm-proof__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,7vw,110px);align-items:center}
.ed .cm-proof .cap{color:var(--night-dim)}
.ed .cm-proof h2{font-size:clamp(38px,4.8vw,72px);margin-top:18px}
.ed .cm-proof h2 em{color:#D9A06F}
.ed .cm-proof__p{margin-top:24px;max-width:40ch;color:var(--night-dim)}
.ed .cm-stats{margin:0;display:grid;gap:0}
.ed .cm-stats>div{padding-block:22px;border-top:1px solid var(--night-hair)}
.ed .cm-stats>div:last-child{border-bottom:1px solid var(--night-hair)}
.ed .cm-stats dt{font-family:var(--ui);font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--night-dim)}
.ed .cm-stats dd{margin:10px 0 0;display:flex;align-items:baseline;gap:clamp(14px,2vw,28px);font-family:var(--display);line-height:1;font-variant-numeric:lining-nums tabular-nums}
.ed .cm-stats .was{font-size:clamp(28px,3.2vw,46px);color:var(--night-dim)}
.ed .cm-stats .to{font-family:var(--ui);font-size:20px;color:var(--night-dim)}
.ed .cm-stats .now{font-size:clamp(64px,8.4vw,128px);color:var(--night-fg);letter-spacing:-.02em}
@media (max-width:820px){.ed .cm-proof__in{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- work */
.ed .cm-work{padding-block:clamp(56px,9vw,128px) clamp(40px,6vw,80px)}
.ed .cm-work .spread__head h2{font-size:clamp(38px,4.8vw,72px)}
.ed .cm-work__p{max-width:44ch}
.ed .cm-films{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,3.4vw,48px) clamp(14px,2vw,28px)}
.ed .cm-film{all:unset;box-sizing:border-box;display:grid;gap:8px;cursor:pointer;align-content:start;min-width:0}
.ed .cm-film:focus-visible{outline:1.5px solid var(--ink);outline-offset:6px}
.ed .cm-film__ph{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--night);margin-bottom:8px}
.ed .cm-film__ph img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease),opacity .4s}
.ed .cm-film:hover .cm-film__ph img{transform:scale(1.04)}
.ed .cm-film__ph b{position:absolute;left:16px;bottom:16px;width:52px;height:52px;border-radius:50%;background:rgba(20,20,15,.55);border:1px solid var(--cream-hair);
  display:grid;place-items:center;color:var(--cream);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .4s,border-color .4s,transform .6s var(--ease)}
.ed .cm-film__ph b::before{content:"";border-left:10px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:4px}
.ed .cm-film:hover .cm-film__ph b{background:var(--terra);border-color:var(--terra);transform:scale(1.08)}
.ed .cm-film__t{font-family:var(--display);font-size:clamp(22px,2.2vw,30px);line-height:1.12}
/* section labels inside the work: a cap over a rule */
.ed .cm-sub{color:var(--olive);padding-bottom:12px;border-bottom:1px solid var(--hair);margin:clamp(56px,8vw,112px) 0 clamp(16px,2vw,24px)}
.ed .cm-work .spread__head+.cm-sub{margin-top:0}
/* product, food & drink: three tall frames, then a wide one and a square-ish one */
.ed .cm-shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.ed .cm-shots .c1,.ed .cm-shots .c2,.ed .cm-shots .c3{aspect-ratio:3/4}
.ed .cm-shots .c4{grid-column:span 2;aspect-ratio:3/2}
.ed .cm-shots .c5{aspect-ratio:auto;min-height:0}
.ed .cm-shots .c5 img{position:absolute;inset:0}
/* the reels */
.ed .cm-social{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,6vw,96px);align-items:center;margin-top:clamp(56px,8vw,112px);
  padding:clamp(24px,4vw,56px);background:var(--paper)}
.ed .cm-social__ph{margin:0;overflow:hidden;background:var(--night);max-width:440px;justify-self:center;width:100%}
.ed .cm-social__ph img{width:100%;height:auto}
.ed .cm-social__t{display:grid;gap:18px;max-width:44ch}
.ed .cm-social h3{font-size:clamp(32px,3.6vw,52px)}
.ed .cm-social h3 em{color:var(--terra-deep)}
.ed .cm-social p{color:var(--smoke)}
.ed .cm-social__n{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-top:6px!important;padding-top:18px;border-top:1px solid var(--hair)}
.ed .cm-social__n span{font-family:var(--display);font-size:clamp(56px,6.4vw,96px);line-height:1;color:var(--ink);letter-spacing:-.02em;font-variant-numeric:lining-nums}
.ed .cm-social__n small{font-family:var(--ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--smoke)}
/* people */
.ed .cm-people{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.4vw,20px)}
.ed .cm-people__wide{aspect-ratio:21/9;margin:0 0 clamp(10px,1.4vw,20px)}
.ed .cm-people .ph{aspect-ratio:4/5}
@media (max-width:700px){
  .ed .cm-films{grid-template-columns:1fr}
  .ed .cm-shots{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ed .cm-shots .c3{grid-column:span 2;aspect-ratio:3/2}
  .ed .cm-shots .c5{grid-column:span 2;aspect-ratio:16/10}
  .ed .cm-social{grid-template-columns:1fr}
  .ed .cm-people{grid-template-columns:repeat(2,minmax(0,1fr))}.ed .cm-people__wide{aspect-ratio:4/3}
}

/* ---------------------------------------------------------------- how it works */
.ed .cm-how{padding-block:clamp(40px,6vw,80px) clamp(64px,9vw,128px)}
.ed .cm-steps{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,64px);border-top:1px solid var(--ink)}
.ed .cm-steps li{padding-top:24px;display:grid;gap:12px;align-content:start}
.ed .cm-steps__n{font-family:var(--display);font-size:clamp(40px,4.4vw,64px);line-height:1;color:var(--terra-deep);font-variant-numeric:lining-nums}
.ed .cm-steps h3{font-size:clamp(26px,2.6vw,36px);margin-top:6px}
.ed .cm-steps p{color:var(--smoke);max-width:36ch}
@media (max-width:760px){.ed .cm-steps{grid-template-columns:1fr;gap:8px}.ed .cm-steps li{padding-block:22px;border-bottom:1px solid var(--hair)}}

/* ---------------------------------------------------------------- the menu */
.ed .cm-menu{background:var(--sage-tint);padding-block:clamp(64px,10vw,140px);scroll-margin-top:60px}
.ed .cm-menu .coll__head h2{font-size:clamp(46px,6vw,92px)}
.ed .cm-board{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);background:var(--paper);border:1px solid var(--ink);
  box-shadow:inset 0 0 0 7px var(--paper),inset 0 0 0 8px rgba(27,25,22,.35);padding:clamp(28px,4.4vw,68px) 0}
.ed .cm-board__col{padding-inline:clamp(22px,4.4vw,68px);min-width:0}
.ed .cm-board__col+.cm-board__col{border-left:1px solid var(--hair)}
.ed .cm-board__h{color:var(--olive);padding-bottom:14px;border-bottom:1px solid var(--ink);margin:0}
.ed .cm-items{list-style:none;margin:0;padding:0}
.ed .cm-item{display:grid;grid-template-columns:auto minmax(24px,1fr) auto;column-gap:14px;align-items:baseline;padding-block:24px 22px;border-bottom:1px solid var(--hair)}
.ed .cm-item__n{font-size:clamp(26px,2.5vw,36px);line-height:1.1}
.ed .cm-item__dots{height:0;border-bottom:1.5px dotted rgba(27,25,22,.38);transform:translateY(-.32em)}
.ed .cm-item__p{font-family:var(--display);font-size:clamp(26px,2.5vw,36px);line-height:1.1;white-space:nowrap;font-variant-numeric:lining-nums tabular-nums}
.ed .cm-item__p small{font-family:var(--ui);font-size:12px;letter-spacing:.08em;color:var(--smoke);margin-left:3px}
.ed .cm-item__d{grid-column:1/-1;margin-top:8px;color:var(--smoke);font-size:15.5px;max-width:46ch}
.ed .cm-item__go{grid-column:1/-1;justify-self:start;margin-top:12px;font-family:var(--ui);font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
  text-decoration:none;color:var(--terra-deep);padding-bottom:3px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .45s var(--ease)}
.ed .cm-item__go:hover,.ed .cm-item__go:focus-visible{background-size:100% 1px}
.ed .cm-item__go span{display:inline-block;transition:transform .5s var(--ease)}
.ed .cm-item__go:hover span{transform:translateX(3px)}
.ed .cm-offer{margin-top:28px;padding:18px 20px;background:var(--sage-tint);display:grid;gap:6px}
.ed .cm-offer .cap{color:var(--olive)}
.ed .cm-offer p{font-style:italic;font-size:16px}
@media (max-width:860px){
  .ed .cm-board{grid-template-columns:1fr;padding-block:clamp(24px,5vw,40px)}
  .ed .cm-board__col+.cm-board__col{border-left:0;margin-top:44px}
}
@media (max-width:420px){.ed .cm-item{grid-template-columns:1fr auto}.ed .cm-item__dots{display:none}}

.ed .cm-found{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px clamp(20px,4vw,56px);align-items:baseline;margin-top:clamp(28px,4vw,48px);
  padding:clamp(24px,3.4vw,44px) clamp(22px,4vw,56px);background:var(--terra-deep);color:var(--cream)}
.ed .cm-found .cap{color:var(--cream-dim)}
.ed .cm-found p{font-family:var(--display);font-size:clamp(24px,2.6vw,36px);line-height:1.2;max-width:34ch}
.ed .cm-found strong{font-weight:400;font-family:var(--serif);font-style:italic}
@media (max-width:700px){.ed .cm-found{grid-template-columns:1fr}}

.ed .cm-fine{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);margin-top:clamp(48px,7vw,88px)}
.ed .cm-fine h3{color:var(--olive);margin-bottom:14px}
.ed .cm-fine .plist th{font-size:clamp(19px,1.8vw,24px);padding-block:14px}
.ed .cm-fine .plist td.p{font-size:22px;padding-block:14px}
.ed .cm-fine .plist tr:hover{background:transparent}
.ed .cm-terms{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ed .cm-terms li{padding-block:14px;border-bottom:1px solid var(--hair);font-size:15.5px;color:var(--smoke)}
@media (max-width:760px){.ed .cm-fine{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- who */
.ed .cm-who{border-top:0}
.ed .cm-who .note__lede{font-size:clamp(28px,3.1vw,44px)}
.ed .cm-linkbtn{all:unset;cursor:pointer;font:inherit;letter-spacing:inherit;text-transform:inherit;padding-bottom:3px;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .45s var(--ease),color .3s}
.ed .cm-linkbtn:hover{background-size:0 1px;background-position:100% 100%;color:var(--ink)}
.ed .cm-linkbtn:focus-visible{outline:1.5px solid currentColor;outline-offset:3px}

/* ---------------------------------------------------------------- the form */
.ed .cm-inq h2 em{color:#D9A06F}
.ed .cm-form select,.ed .cm-form textarea{font:inherit;font-family:var(--serif);font-size:17px;letter-spacing:0;text-transform:none;color:var(--cream);background:transparent;
  border:0;border-bottom:1px solid var(--cream-hair);padding:9px 0;border-radius:0;min-width:0;width:100%;transition:border-color .3s;color-scheme:dark}
.ed .cm-form textarea{resize:vertical;min-height:84px;line-height:1.5}
.ed .cm-form textarea::placeholder{color:rgba(243,238,228,.4)}
.ed .cm-form select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:28px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23F3EEE4' stroke-width='1.4'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") right 4px center/12px 8px no-repeat}
.ed .cm-form select option{color:var(--ink);background:var(--cream)}
.ed .cm-form select:focus,.ed .cm-form textarea:focus{outline:none;border-bottom-color:var(--cream)}
.ed .cm-form .form__note a{color:var(--cream)}
.ed .cm-inq .done p{color:var(--cream-dim)}

/* the left of the form: the Tasting Shoot, set like a price tag */
.ed .cm-tag{background:#2E2F1B;color:var(--cream);padding:clamp(40px,7vw,110px) clamp(22px,6vw,96px);display:grid;align-content:center;gap:18px;position:relative;overflow:hidden}
.ed .cm-tag::after{content:"";position:absolute;right:-120px;bottom:-120px;width:380px;height:380px;border-radius:50%;border:1px solid rgba(243,238,228,.14);pointer-events:none}
.ed .cm-tag .cap{color:var(--cream-dim)}
.ed .cm-tag__p{font-family:var(--display);font-size:clamp(96px,14vw,220px);line-height:.85;letter-spacing:-.03em;color:#D9A06F;font-variant-numeric:lining-nums}
.ed .cm-tag__l{list-style:none;margin:10px 0 0;padding:0;max-width:340px;border-top:1px solid var(--cream-hair)}
.ed .cm-tag__l li{padding-block:11px;border-bottom:1px solid var(--cream-hair);font-size:17px}
.ed .cm-tag__n{font-style:italic;color:var(--cream-dim);max-width:32ch;font-size:15.5px}
@media (max-width:800px){.ed .cm-tag{padding-block:48px}}
.ed .cm-shots__cap{margin-top:14px}

/* one-off projects: a third, full-width board of three */
.ed .cm-board--once{grid-template-columns:1fr;margin-top:clamp(20px,3vw,32px)}
.ed .cm-items--3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(22px,3.4vw,52px)}
.ed .cm-items--3 .cm-item{grid-template-columns:minmax(0,1fr) auto;column-gap:12px}
.ed .cm-items--3 .cm-item__dots{display:none}
.ed .cm-items--3 .cm-item__n,.ed .cm-items--3 .cm-item__p{font-size:clamp(24px,2.1vw,32px)}
.ed .cm-item__p small.pre{margin:0 6px 0 0;letter-spacing:.14em;text-transform:uppercase;font-size:10.5px}
@media (max-width:980px){.ed .cm-items--3{grid-template-columns:1fr}}

/* product reviews: a film beside its words, then the stills from the same shoot in a sideways strip */
.ed .cm-kits__head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,5vw,80px);align-items:end;margin-bottom:clamp(28px,4vw,48px)}
.ed .cm-kits__head h3{font-size:clamp(32px,3.6vw,52px)}
.ed .cm-kits__head h3 em{color:var(--terra-deep)}
.ed .cm-kits__head p{max-width:46ch}
.ed .cm-kit{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(18px,3vw,48px);align-items:center}
.ed .cm-kit+.cm-kit{margin-top:clamp(48px,7vw,96px)}
.ed .cm-kit--flip{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.ed .cm-kit--flip .cm-kit__film{order:2}
.ed .cm-kit__film .cm-film__ph{margin-bottom:0}
.ed .cm-kit__still{aspect-ratio:16/9;margin:0}
.ed .cm-kit__t{display:grid;gap:14px;max-width:40ch}
.ed .cm-kit__t h4{font-family:var(--display);font-weight:400;font-size:clamp(28px,3vw,42px);line-height:1.05}
.ed .cm-kit__t p{color:var(--smoke)}
.ed .cm-kit__go{justify-self:start}
.ed .cm-kit__strip{grid-column:1/-1;order:3;display:flex;gap:clamp(10px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;
  scrollbar-width:thin;scrollbar-color:var(--hair) transparent;padding-bottom:10px;margin-top:clamp(4px,1vw,12px)}
.ed .cm-kit__strip:focus-visible{outline:1.5px solid var(--ink);outline-offset:6px}
.ed .cm-kit__strip .ph{flex:0 0 auto;height:clamp(240px,28vw,400px);margin:0;scroll-snap-align:start;overflow:hidden;background:var(--night)}
.ed .cm-kit__strip .ph img{height:100%;width:auto;max-width:none;display:block}
@media (max-width:900px){
  .ed .cm-kits__head{grid-template-columns:1fr;align-items:start}
  .ed .cm-kit,.ed .cm-kit--flip{grid-template-columns:1fr}
  .ed .cm-kit--flip .cm-kit__film{order:0}
  .ed .cm-kit__strip{margin-inline:calc(var(--gut,20px) * -1);padding-inline:var(--gut,20px);scroll-padding-inline:var(--gut,20px)}
  .ed .cm-kit__strip .ph{height:clamp(220px,62vw,340px)}
}