/* Hallmark · audit · theme: custom (by request: navy, red, cream; Instrument Serif + Instrument Sans; logo fixed) · genre: editorial · nav: logo left, four links, one action · footer: four columns on navy · hero: split, head left, full-height chef portrait right · signature: Chef Birendra Singh in his kitchen, set large */
/* critique: luxury editorial, calm: one idea per section, real photos and reviews, red kept for actions only; every number is from the live site */
*{box-sizing:border-box}
html{overflow-x:clip;scroll-behavior:smooth}
body{margin:0;overflow-x:clip;background:var(--cream);color:var(--navy);font:400 18px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--brand-red);outline-offset:4px}
.wrap{max-width:1320px;margin:0 auto;padding:0 var(--gut)}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1;letter-spacing:-.015em;margin:0;overflow-wrap:break-word;min-width:0;text-wrap:balance}
h2{font-size:clamp(44px,6.4vw,96px)}
.kw{display:block;font:500 17px/1.4 var(--sans);letter-spacing:0;margin-top:20px;color:var(--n60)}
.lede{font-size:clamp(18px,1.4vw,21px);color:var(--n60);max-width:46ch;margin:28px 0 0}
.btn{display:inline-flex;align-items:center;min-height:52px;padding:0 28px;border-radius:999px;font:600 16px var(--sans);text-decoration:none;white-space:nowrap;border:1px solid var(--navy);background:none;color:inherit;cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.btn:hover{background:var(--navy);color:var(--cream)}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn--red{background:var(--red);border-color:var(--red);color:var(--on)}
.btn--red:hover{background:var(--brand-red);border-color:var(--brand-red)}
.link{font-weight:600;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:1px;text-underline-offset:6px}
.link:hover{color:var(--red)}
/* one quiet reveal, visible without scripting */
.js .rv{opacity:0;transition:opacity .6s var(--ease)}
.js .rv.in{opacity:1;transform:none}

/* focal moment */
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.hero h1 .ln>span{display:block}
.js .hero h1 .ln>span{animation:ln-up .8s var(--ease) calc(var(--i)*90ms) both}
@keyframes ln-up{from{transform:translateY(105%)}}
/* lists that appear as lists */
.js .svc li.rv,.js .spec li.rv,.js .city__list li{opacity:0;transform:translateY(12px);transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--k,0)*60ms)}
.js .svc li.rv.in,.js .spec li.rv.in,.js .city__list.in li{opacity:1;transform:none}
/* feedback */
.link{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s var(--ease)}
.link:hover{background-size:100% 1px;background-image:linear-gradient(var(--brand-red),var(--brand-red))}
.fc__out b.pop{animation:pop .25s var(--ease)}
@keyframes pop{from{opacity:.4;transform:translateY(4px)}}

/* hero */
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--colgap);align-items:center;min-height:calc(100svh - 76px);padding-block:48px}
.hero h1{font-size:clamp(56px,7.4vw,120px)}
.hero .kw{font-size:18px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px}
.hero__pic{margin:0;aspect-ratio:3/4;overflow:hidden;background:var(--n15)}
.hero__pic img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.js .hero__pic img{animation:pic-zoom 2.4s var(--ease) both}
@keyframes pic-zoom{from{transform:scale(1.06)}}
.hero__cap{font-size:14px;color:var(--n60);margin-top:12px}
@media (max-width:860px){.hero .wrap{grid-template-columns:minmax(0,1fr);min-height:0}.hero__pic{aspect-ratio:4/5}}

/* slogan: the promise in one line, its words arriving in turn */
.slg{padding-block:clamp(56px,7vw,104px)}
.slg__line{margin:0;font:400 clamp(48px,7.6vw,124px)/1.02 var(--serif);letter-spacing:-.02em;overflow-wrap:break-word;min-width:0;text-wrap:balance}
.slg__we{color:var(--red)}
.slg__line .w{display:inline-block}
.js .slg__line.rv{opacity:1}
.js .slg__line .w{opacity:0;transform:translateY(.3em);transition:opacity .7s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--w)*90ms)}
.js .slg__line.in .w{opacity:1;transform:none}

/* statement */
.stm{padding-block:var(--sec);border-top:1px solid var(--n15)}
.stm p{font:400 clamp(30px,3.6vw,56px)/1.18 var(--serif);max-width:30ch;margin:0}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--n15);padding-top:28px}
.facts b{display:block;font:400 clamp(40px,4.4vw,64px)/1 var(--serif)}
.facts span{font-size:15px;color:var(--n60)}
@media (max-width:760px){.facts{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:32px}}

/* services */
.svc{padding-block:var(--sec);background:var(--navy);color:var(--cream)}
.svc .kw,.svc .lede{color:var(--c70)}
.svc ol{list-style:none;margin:clamp(56px,7vw,96px) 0 0;padding:0;border-top:1px solid var(--c20)}
.svc li{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.2fr);gap:24px;padding:36px 0;border-bottom:1px solid var(--c20)}
.svc li span{font:400 22px var(--serif);color:var(--c70)}
.svc h3{font-size:clamp(30px,3vw,44px)}
.svc li p{margin:0;color:var(--c70);font-size:17px}
.svc li p b{display:block;color:var(--cream);font-weight:500;margin-bottom:6px}
@media (max-width:860px){.svc li{grid-template-columns:48px minmax(0,1fr)}.svc li p{grid-column:2}}

.svc__intro{font:400 clamp(30px,3.4vw,52px)/1.15 var(--serif);max-width:26ch;margin:0}
.svc li :is(h2,h3){font-size:clamp(28px,2.8vw,42px)}
.svc a{text-decoration:none}
.svc li :is(h2,h3) a:hover,.spec a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.svc li{grid-template-columns:72px minmax(0,1.2fr) minmax(0,1fr)!important}
.spec{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 32px}
.svc .spec li{display:block;padding:0;border:0}
.spec :is(h2,h3){font-size:clamp(22px,2vw,28px);line-height:1.2}
@media (max-width:860px){.spec{grid-template-columns:minmax(0,1fr)}.svc li{grid-template-columns:48px minmax(0,1fr)!important}}
/* cities */
.city{padding-block:var(--sec);border-top:1px solid var(--n15)}
.city__list{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;border-top:1px solid var(--n15)}
.city__list a{display:block;padding:16px 0;border-bottom:1px solid var(--n15);text-decoration:none;font-size:18px}
.city__list a:hover{color:var(--red)}
@media (max-width:860px){.city__list{grid-template-columns:minmax(0,1fr)}}
/* journal */
.jr{padding-block:var(--sec);border-top:1px solid var(--n15)}
.jr ol{list-style:none;margin:clamp(40px,5vw,64px) 0 40px;padding:0;border-top:1px solid var(--n15)}
.jr li{border-bottom:1px solid var(--n15)}
.jr h3{font-size:clamp(24px,2.4vw,34px);line-height:1.2}
.jr h3 a{display:block;padding:24px 0;text-decoration:none}
.jr h3 a:hover{color:var(--red)}
/* café and QSR */
.cq{padding-block:var(--sec)}
.cq .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--colgap)}
.cq article{border-top:1px solid var(--n15);padding-top:32px}
.cq__links{display:flex;flex-wrap:wrap;gap:24px;margin:28px 0 0}
@media (max-width:860px){.cq .wrap{grid-template-columns:minmax(0,1fr)}}
/* plates */
.plates{padding-block:var(--sec)}
.plates__g{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:24px;margin-top:clamp(48px,6vw,80px)}
.plates__g figure{margin:0;overflow:hidden;background:var(--n15)}
.plates__g img{width:100%;height:100%;object-fit:cover}
.plates__g figure:first-child{grid-row:span 2;aspect-ratio:4/5}
.plates__g figure:not(:first-child){aspect-ratio:4/3}
@media (max-width:760px){.plates__g{grid-template-columns:minmax(0,1fr)}.plates__g figure:first-child{grid-row:auto}}

/* free tools */
.tools{padding-block:var(--sec);border-top:1px solid var(--n15)}
.tools .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--colgap);align-items:start}
.tools__list{list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--n15)}
.tools__list li{border-bottom:1px solid var(--n15);padding:20px 0}
.tools__list h3{font-size:clamp(24px,2.2vw,32px);line-height:1.2}
.tools__list a{text-decoration:none}
.tools__list a:hover{color:var(--red)}
.tools__list p{margin:6px 0 0;color:var(--n60);font-size:16px}
.fc{background:var(--navy);color:var(--cream);padding:clamp(28px,3vw,44px);display:grid;gap:20px}
.fc h3{font-size:32px}
.fc label{display:grid;gap:8px;font-size:15px;font-weight:500}
.fc input{font:400 22px var(--sans);color:var(--cream);background:transparent;border:0;border-bottom:1px solid var(--c70);padding:8px 0;min-height:48px;border-radius:0}
.fc input:focus{outline:0;border-color:var(--cream)}
.fc__out{display:grid;gap:4px;border-top:1px solid var(--c20);padding-top:20px;color:var(--c70)}
.fc__f{margin:0;font-size:15px;color:var(--c70)}
.fc__out b{font:400 64px/1 var(--serif);color:var(--cream);font-variant-numeric:tabular-nums}
@media (max-width:860px){.tools .wrap{grid-template-columns:minmax(0,1fr)}}

/* words from owners */
.voices{padding-block:var(--sec);border-top:1px solid var(--n15)}
.voices__lead{margin:clamp(48px,6vw,80px) 0 0;max-width:30ch}
.voices__lead blockquote{margin:0;font:400 clamp(32px,3.8vw,58px)/1.12 var(--serif)}
.voices figcaption{margin-top:20px;font-size:16px}
.voices figcaption span{display:block;color:var(--n60)}
.voices__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--colgap);margin-top:clamp(56px,7vw,96px);border-top:1px solid var(--n15);padding-top:40px}
.voices__row blockquote{margin:0;font:400 26px/1.25 var(--serif)}
.voices__logos{display:flex;gap:40px;align-items:center;margin-top:48px}
.voices__logos img{height:56px;width:auto;object-fit:contain}
.rating{margin-top:32px;font-size:16px;color:var(--n60)}
@media (max-width:760px){.voices__row{grid-template-columns:minmax(0,1fr)}}

/* brands ring */
.br{position:relative;padding-block:var(--sec) clamp(40px,6vw,80px);overflow:hidden;border-top:1px solid var(--n15)}
.br__stage{position:relative;height:clamp(400px,48vw,580px);margin-top:clamp(8px,2vw,32px);perspective:1500px;perspective-origin:50% 38%;cursor:grab;touch-action:pan-y;user-select:none}
.br__stage.is-drag{cursor:grabbing}
.br__count{position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,-56%);display:flex;align-items:center;gap:.16em;pointer-events:none;white-space:nowrap}
.br__count b{font:400 clamp(150px,24vw,340px)/.8 var(--serif);color:transparent;-webkit-text-stroke:1.5px var(--red);font-variant-numeric:tabular-nums}
.br__count span{font:400 clamp(20px,2.2vw,32px)/1 var(--serif);color:var(--navy)}
.br__ring{list-style:none;margin:0;padding:0;position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.br__card{position:absolute;left:0;top:0;width:var(--cw,160px);margin:calc(var(--cw,160px)/-2) 0 0 calc(var(--cw,160px)/-2);display:flex;flex-direction:column;align-items:center;gap:12px;will-change:transform}
.br__tile{width:100%;aspect-ratio:1;border-radius:24%;background:var(--tile);display:grid;place-items:center;box-shadow:0 24px 36px -24px var(--n60),inset 0 0 0 1px var(--n15);transition:transform .4s var(--ease),box-shadow .3s}
.br__tile img{width:66%;height:66%;object-fit:contain}
.br__name{font-size:14px;font-weight:500;color:var(--n60);white-space:nowrap;opacity:var(--nm,0);transition:opacity .3s}
.br__card:hover .br__tile{transform:translateY(-8px) scale(1.06);box-shadow:0 32px 44px -24px var(--n60),inset 0 0 0 1.5px var(--red)}
.br__card:hover .br__name{opacity:1;color:var(--navy)}
.br__floor{position:absolute;left:10%;right:10%;bottom:4%;height:72px;border-radius:50%;background:radial-gradient(ellipse,var(--n15),transparent 70%);pointer-events:none}
@media (max-width:760px){.br__stage{height:420px;perspective-origin:50% 30%}.br__count{flex-direction:column;gap:8px}.br__count span{text-align:center}}
/* without motion or script: a plain grid of logos */
.br__stage:not(.is-live){height:auto;perspective:none;cursor:auto;padding:40px var(--gut) 0;max-width:1320px;margin-inline:auto}
.br__stage:not(.is-live) .br__count{position:relative;left:auto;top:auto;transform:none;justify-content:center}
.br__stage:not(.is-live) .br__ring{position:relative;left:auto;top:auto;width:auto;height:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:24px;margin-top:32px}
.br__stage:not(.is-live) .br__card{position:relative;margin:0;--cw:120px}
.br__stage:not(.is-live) .br__name{opacity:1}
.br__stage:not(.is-live) .br__floor{display:none}

/* chef */
.chef{padding-block:var(--sec);background:var(--navy);color:var(--cream)}
.chef .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:var(--colgap);align-items:center}
.chef figure{margin:0;aspect-ratio:4/5;overflow:hidden}
.chef figure img{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
.chef .lede,.chef .kw{color:var(--c70)}
.chef .link{display:inline-block;margin-top:32px}
@media (max-width:860px){.chef .wrap{grid-template-columns:minmax(0,1fr)}}

/* contact */
.ct{padding-block:var(--sec)}
.ct .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--colgap)}
.f{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px 24px}
.f label{display:grid;gap:8px;font-size:15px;font-weight:500}
.f input,.f select{font:400 17px var(--sans);color:var(--navy);background:transparent;border:0;border-bottom:1px solid var(--navy);padding:12px 0;min-height:48px;border-radius:0}
.f input:focus,.f select:focus{outline:0;border-color:var(--red)}
.f .full{grid-column:1/-1;margin:0}
.err{color:var(--red);font-size:15px;min-height:24px}
.ct__direct{margin-top:40px;font-size:17px;line-height:2}
.ct__direct a{text-decoration:none}
.ct__direct a:hover{color:var(--red)}
@media (max-width:860px){.ct .wrap,.f{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){.js .hero h1 .ln>span,.js .hero__pic,.js .hero__pic img{animation:none}.js .svc li.rv,.js .spec li.rv,.js .city__list li{transform:none}.fc__out b.pop{animation:none}*{transition:none!important}html{scroll-behavior:auto}.js .rv,.js .slg__line .w{opacity:1;transform:none}.js .hero__pic img{transform:none}}

/* enquiry form: status line and the hidden trap field bots fill in */
.ok{margin:0;font-size:15px;color:var(--n60);min-height:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.svc__more{margin:24px 0 0}
.svc .link{color:var(--cream)}

/* v4.8 home: explore tabs, what we build, featured calculator, review sizes */
.more{margin-top:40px;border-top:1px solid var(--n15)}
.more summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:12px;min-height:48px;margin-top:24px;padding:0 24px;border:1px solid currentColor;border-radius:999px;font:500 16px var(--sans)}
.more summary::-webkit-details-marker{display:none}
.more summary::after{content:"+";font-size:22px;line-height:1;transition:transform .3s var(--ease)}
.more[open] summary::after{transform:rotate(45deg)}
.more summary:hover{background:var(--navy);color:var(--cream);border-color:var(--navy)}
.svc .more{border-color:var(--c20)}
.svc .more summary:hover{background:var(--cream);color:var(--navy);border-color:var(--cream)}
.svc .more ol{margin-top:32px}
.more__h{font-family:var(--serif);font-size:clamp(26px,2.4vw,34px);margin:48px 0 0}
.svc .more .spec{margin-top:24px}
.build{padding-block:var(--sec);border-top:1px solid var(--n15)}
.build__g{list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--n15);border:1px solid var(--n15)}
.build__g a{display:flex;flex-direction:column;gap:16px;height:100%;padding:28px 22px;background:var(--cream);text-decoration:none;transition:background .3s var(--ease)}
.build__g a:hover{background:var(--navy);color:var(--cream)}
.build__g .art--icon{width:48px}
.build__g h3{font-size:clamp(20px,1.7vw,24px);line-height:1.15}
@media (max-width:1000px){.build__g{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.build__g{grid-template-columns:repeat(2,minmax(0,1fr))}.build__g a{padding:22px 16px}}
.tools__hero{display:grid;gap:8px;margin-top:40px;padding:clamp(24px,3vw,36px);background:var(--red);color:var(--cream);text-decoration:none}
.tools__hero b{font:400 clamp(30px,3.2vw,46px)/1.05 var(--serif)}
.tools__hero em{font-style:normal;font-weight:500;margin-top:8px}
.tools__hero:hover{background:var(--navy)}
.tools__list{margin-top:24px}
.voices__g{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--colgap);margin-top:clamp(48px,6vw,80px);align-items:start}
.voices__g figure{margin:0;border-top:1px solid var(--n15);padding-top:24px}
.voices__g blockquote{margin:12px 0 0;font-family:var(--serif)}
.voices__g .stars{color:var(--brand-red);font-size:14px}
.voices__g figure:nth-child(1){grid-column:span 4}
.voices__g figure:nth-child(1) blockquote{font-size:clamp(32px,3.8vw,58px);line-height:1.12}
.voices__g figure:nth-child(2){grid-column:span 2}
.voices__g figure:nth-child(2) blockquote{font-size:clamp(22px,2vw,28px);line-height:1.25}
.voices__g figure:nth-child(n+3){grid-column:span 3}
.voices__g figure:nth-child(n+3) blockquote{font-size:19px;line-height:1.4}
/* with 3 reviews the small one tucks under the medium one instead of leaving a half-empty row */
@media (min-width:761px){.voices__g:has(figure:nth-child(3):last-child) figure:first-child{grid-row:span 2}
.voices__g figure:nth-child(3):last-child{grid-column:5/span 2}}
@media (max-width:760px){.voices__g{grid-template-columns:minmax(0,1fr)}.voices__g figure:nth-child(n){grid-column:auto;grid-row:auto}}
/* homepage brands: link through to every project */
.br__more{margin:20px 0 0}
