/* One spacing and corner system across the shared page shell. */
:root{--section-radius:8px;--page-gutter:24px;--section-gap:24px;--section-inset:clamp(28px,3.2vw,52px)}
main>section{width:calc(100% - var(--page-gutter)*2);margin:var(--section-gap) var(--page-gutter);border-radius:var(--section-radius)}
main>section.section{padding:var(--section-inset)}
main>.hero{width:calc(100% - var(--page-gutter)*2);height:clamp(520px,54vw,740px);max-height:none;aspect-ratio:auto;overflow:hidden;border-radius:var(--section-radius)}
.hero-image{inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.hero-copy{padding-left:var(--section-inset);padding-top:10.5%;max-width:72%}
.hero-seal{right:var(--section-inset)}
main>.business{padding:0;overflow:hidden;border-radius:var(--section-radius)}
.business-copy{padding:44px clamp(28px,4vw,64px)}
main>.story{padding:36px var(--section-inset);overflow:hidden}
main>.page-intro,main>.checkout-intro{padding:34px var(--section-inset);border-radius:var(--section-radius);overflow:hidden}
main>.inquiry-section,main>.jobs-invite{padding:var(--section-inset);border:1px solid var(--line)}
main>.news-section{border-top:0}
main>.news-article{width:calc(100% - var(--page-gutter)*2);margin:var(--section-gap) auto;padding:16px var(--section-inset) var(--section-inset);border-radius:var(--section-radius)}
.featured,.dish-selector,.dish-selector:first-child,.place-photo,.company-photo>img,.about-visual,.jobs-photo,.jobs-application,.lunch-planner,.checkout-summary,.news-cover,.article-title-banner,.footer-lunch-card{border-radius:var(--section-radius)}
.site-footer{margin:var(--section-gap) var(--page-gutter) var(--page-gutter);border-radius:var(--section-radius);padding-left:var(--section-inset);padding-right:var(--section-inset)}
.mega-panel{top:calc(100% + 12px);left:50%;right:auto;transform:translateX(-50%);width:calc(100% - var(--page-gutter)*2);max-width:1440px;padding:26px 30px 30px;border:1px solid #d8ddce;border-radius:var(--section-radius)}
.mega-panel:before{content:'';position:absolute;left:0;right:0;top:-14px;height:14px;background:transparent}
.mega-inner{gap:36px}.mega-visual{border-radius:var(--section-radius)}
@media(max-width:1100px){:root{--page-gutter:20px;--section-inset:30px;--section-gap:20px}.hero-copy{max-width:78%}.business-copy{padding:34px 28px}}
@media(max-width:760px){:root{--page-gutter:16px;--section-inset:24px;--section-gap:20px}main>.hero{height:560px}.hero-copy{padding:48px var(--section-inset) 0;max-width:100%}.hero h1{font-size:clamp(55px,9.5vw,76px)}main>.business{padding:0}.business-copy{padding:32px var(--section-inset)}main>.page-intro,main>.checkout-intro{padding:29px var(--section-inset)}main>.story{padding:31px var(--section-inset)}.mega-panel{position:static;left:auto;right:auto;top:auto;transform:none;width:100%;max-width:none;padding:12px 0 18px;margin:0;border:0;box-shadow:none;border-radius:0}.mega-panel:before{display:none}.mega-inner{gap:15px}.site-footer{padding-top:30px;padding-bottom:24px}}
@media(max-width:560px){:root{--page-gutter:12px;--section-inset:20px;--section-gap:16px}main>.hero{height:530px}.hero-copy{padding-top:42px}.hero h1{font-size:clamp(44px,12.1vw,62px)}.hero-seal{right:20px;bottom:22px}.hero p{font-size:13px}.hero-actions{gap:9px}.hero .button,.hero-menu{padding-left:13px;padding-right:13px}.hero .button{gap:12px}main>.page-intro,main>.checkout-intro{padding:28px var(--section-inset)}main>.section{padding:28px var(--section-inset)}main>.business{padding:0}main>.story{padding:28px var(--section-inset)}main>.news-article{padding:12px 0 28px}.article-title-banner{padding:24px var(--section-inset)}.news-back{margin-left:var(--section-inset)}.news-article figcaption,.news-article-body{margin-left:var(--section-inset);margin-right:var(--section-inset)}.checkout-layout{gap:25px}.checkout-panel-heading{gap:12px}.checkout-toolbar{flex-wrap:wrap}.checkout-search{flex-basis:190px}.checkout-steps button{font-size:10px}.checkout-steps button>span{width:24px;height:24px;flex-basis:24px}.checkout-dish.has-photo{grid-template-columns:16px minmax(0,1fr) 72px;gap:8px}.checkout-dish.has-photo .checkout-dish-photo{width:72px;height:88px}.checkout-dish h3{font-size:23px}.checkout-summary{padding:20px}}
/* Story CTA follows the heading on every breakpoint. */
.story>div{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.story .text-link{align-self:flex-start;margin-top:0}
/* Compact, location-specific Google review detail below the hero actions. */
.hero-reviews{display:flex;align-items:center;gap:12px;width:fit-content;max-width:100%;margin-top:24px;padding:11px 14px;border:1px solid #ffffffa8;background:#fffef5ed;border-radius:8px;box-shadow:0 2px 10px #19372a08;color:var(--ink)}
.hero-reviews .review-google{width:26px;height:26px;object-fit:contain;flex-shrink:0}
.review-content{display:flex;flex-direction:column;gap:3px}
.review-rating{display:flex;align-items:center;gap:10px;line-height:1.2}
.review-rating strong{font-size:16px;font-weight:600;letter-spacing:-.02em}.review-rating strong>span{font-size:12px;font-weight:400;margin-left:2px;color:#526154}
.review-stars{display:inline-block;position:relative;font-size:15px;letter-spacing:1px;color:#d8d8cb;line-height:1.2}
.review-stars:before{content:'★★★★★'}.review-stars>span{position:absolute;left:0;top:0;width:86%;overflow:hidden;color:#bc650c;white-space:nowrap}
.review-caption{font-size:11px;line-height:1.5;color:#526154}
.hero-reviews>.icon{width:15px;height:15px;flex-basis:15px;margin-left:4px;opacity:.65}
.hero-reviews:hover{background:white;border-color:#a3b293}
@media(max-width:560px){.hero-reviews{margin-top:22px;padding:10px 12px;gap:10px}.review-caption{font-size:10px}.review-rating strong{font-size:15px}.review-stars{font-size:14px}.hero-reviews .review-google{width:23px;height:23px}.hero-reviews>.icon{width:13px;height:13px;flex-basis:13px;margin-left:0}}
/* Recruitment and shared micro-details. */
.job-form-heading{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:14px;text-align:left}
.job-form-heading h2{margin:0;text-align:left}
#place-visual{border-radius:var(--section-radius);overflow:hidden}
#place-visual>img,.solna-location{border-radius:var(--section-radius)}
.footer-service-label.eyebrow{background:#fff;border-color:#dce3d3;color:#244635;box-shadow:0 1px 2px #18382306}
.jobs-invite{background-color:#102e24;background-image:linear-gradient(90deg,#0b291f 0%,rgba(5,27,19,.93) 38%,rgba(5,27,19,.55) 70%,rgba(5,27,19,.28)),url('/assets/careers-team-v2.webp');background-size:cover,auto 190%;background-position:center,right 8%;background-repeat:no-repeat;color:#fffef5;overflow:hidden;min-height:245px}
.jobs-invite:before{display:none}.jobs-invite h2,.jobs-invite p:not(.eyebrow){color:#fffef5}
.jobs-invite .eyebrow{background:#ffffff15;color:#fffef5;border-color:#ffffff45;box-shadow:none}
.page-title-banner[data-banner=jobs]{--banner-image:url('/assets/careers-team-v2.webp');--banner-position:center 8%}
@media(max-width:760px){.jobs-invite{background-size:cover,auto 175%;background-position:center,70% 6%;background-image:linear-gradient(90deg,rgba(5,27,19,.94),rgba(5,27,19,.7)),url('/assets/careers-team-v2.webp')}.job-form-heading{display:flex;flex-direction:column;align-items:flex-start;gap:14px}.job-form-heading h2{margin:0}.page-title-banner[data-banner=jobs]{--banner-position:68% 10%}}
.page-title-banner[data-banner=jobs]{background-size:cover,auto 190%;background-position:center,right 8%;background-repeat:no-repeat}
@media(max-width:760px){.page-title-banner[data-banner=jobs]{background-size:cover,auto 165%;background-position:center,68% 8%}}
/* Feather the recruitment image into the solid title area without a visible seam. */
.jobs-invite,.page-title-banner[data-banner=jobs]{background:#102e24}
.jobs-invite:before,.page-title-banner[data-banner=jobs]:before{content:'';display:block;position:absolute;inset:0;z-index:-1;opacity:1;pointer-events:none;background-image:linear-gradient(90deg,rgba(5,27,19,.6),rgba(5,27,19,.22)),url('/assets/careers-team-v2.webp');background-size:cover,auto 190%;background-position:center,right 8%;background-repeat:no-repeat;mask-image:linear-gradient(90deg,transparent 40%,#000 72%);-webkit-mask-image:linear-gradient(90deg,transparent 40%,#000 72%)}
@media(max-width:760px){.jobs-invite:before,.page-title-banner[data-banner=jobs]:before{background-size:cover,auto 165%;background-position:center,68% 8%;mask-image:linear-gradient(90deg,transparent,#000);-webkit-mask-image:linear-gradient(90deg,transparent,#000);opacity:.65}}
/* Header and hero share exact outer edges on every page and breakpoint. */
#ox-site-content>header{width:calc(100% - var(--page-gutter)*2);margin-left:var(--page-gutter);margin-right:var(--page-gutter);padding-left:0;padding-right:0;border-bottom:0;box-shadow:none}
#ox-site-content>header .mega-panel{width:100%}
/* Lighter warm ivory for the page canvas and shared navigation. */
:root{--paper:#faf9f5}
html,body{background-color:var(--paper)}
#ox-site-content>header{background:rgba(250,249,245,.97)}

/* Shared elevation: quiet green-tinted depth, without moving elements. */
:root{
  --shadow-small:0 2px 6px rgba(12,47,39,.06);
  --shadow-medium:0 6px 20px rgba(12,47,39,.08);
  --shadow-large:0 16px 48px -12px rgba(12,47,39,.20);
  --soft-shadow:var(--shadow-medium);
}
.lunch-planner,.checkout-summary{box-shadow:var(--shadow-medium)}
.hero-reviews{box-shadow:var(--shadow-small)}
.region-tabs button[aria-selected=true],
.mode-switch button[aria-pressed=true],
.checkout-region button[aria-pressed=true],
.checkout-initial-fulfilment button[aria-pressed=true]{box-shadow:var(--shadow-small)}
.featured,.dish-selector,.dish-selector:first-child,.dish-selector[aria-selected=true]{box-shadow:none}
.featured,.dish-selector,.news-card .news-cover,.hero-reviews{transition:box-shadow .2s ease,background-color .16s ease,border-color .16s ease}
@media(hover:hover) and (pointer:fine){
  .dish-selector:hover,.featured:has(a:hover){box-shadow:var(--shadow-medium)}
  .news-card>a:hover .news-cover{box-shadow:var(--shadow-medium)}
  .hero-reviews:hover{box-shadow:var(--shadow-medium)}
}
.dish-selector:focus-visible,.featured:has(a:focus-visible),.news-card>a:focus-visible .news-cover{box-shadow:var(--shadow-medium)}
@media(min-width:761px){#ox-site-content>header .mega-panel{box-shadow:var(--shadow-large)}}
@media(max-width:760px){#ox-site-content>header #navigation.open{box-shadow:var(--shadow-large)}#ox-site-content>header .mega-panel{box-shadow:none}}
dialog{box-shadow:var(--shadow-large)}
input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #426b56;outline-offset:3px}
@media(prefers-reduced-motion:reduce){.featured,.dish-selector,.news-card .news-cover,.hero-reviews{transition:none}}

/* Soft grounding for large photographic surfaces across all pages. */
:root{
  --shadow-section:0 2px 5px -2px rgba(12,47,39,.06),0 14px 30px -18px rgba(12,47,39,.18);
  --shadow-image:0 2px 4px -2px rgba(12,47,39,.06),0 8px 18px -12px rgba(12,47,39,.18);
}
main>.hero,main>.business,.page-title-banner,.article-title-banner{box-shadow:var(--shadow-section)}
main>.story,main>.jobs-invite{box-shadow:var(--shadow-image)}
.featured,.place-photo,.company-photo>img,.about-visual,.jobs-photo,#place-visual,.news-cover{box-shadow:var(--shadow-image)}
/* Elevate the image frame once; its cropped image remains flat inside. */
#place-visual>img,.about-visual>img,.jobs-photo>img{box-shadow:none}
@media(hover:hover) and (pointer:fine){
  a.place-photo:hover{box-shadow:var(--shadow-medium)}
}
a.place-photo{transition:box-shadow .2s ease}
@media(prefers-reduced-motion:reduce){a.place-photo{transition:none}}

/* Links stay free of hover underlines; brand links keep their exact appearance. */
a:hover,a:hover *,button:hover,button:hover *{text-decoration:none!important}
#ox-site-content>header a.brand,#ox-site-content>header a.brand:hover,#ox-site-content>header a.brand:active,
.site-footer a.brand,.site-footer a.brand:hover,.site-footer a.brand:active{
  color:var(--ink)!important;
  text-decoration:none!important;
  background:transparent!important;
  box-shadow:none!important;
  border:0;
  transform:none;
  transition:none;
}

/* Final responsive polish: aligned surfaces, readable forms and measured type. */
:root{--control-height:44px}
.button,header .button,.hero .button,.place-actions .button,.job-send .button,
.checkout-actions .button,.lunch-planner>.button,.hero-menu{min-height:44px}
.button,.hero-menu{display:inline-flex;align-items:center}
.page-title-banner p,.company-terms,.about-story p,.jobs-profile p,.business-copy p{ text-wrap:pretty }
.menu-showcase>.featured{align-self:stretch;display:flex;flex-direction:column}
.menu-showcase>.featured>img{flex:1;min-height:0;object-fit:cover}
.menu-showcase>.featured .feature-details{flex-shrink:0}
.news-article figure>.news-cover:has(.crop-unt){aspect-ratio:980/552}
.jobs-application .form-guidance,.jobs-profile .job-merit,.job-send>p{font-size:12px;line-height:1.7}
.form-row>label,.checkout-main,.catalog,.company-layout>div,.jobs-context{min-width:0}
input,textarea{max-width:100%}
@media(min-width:761px) and (max-width:1024px){
 .catalog-layout{grid-template-columns:minmax(0,1fr) 260px;gap:24px}
 .checkout-layout{grid-template-columns:minmax(0,1fr) 250px;gap:24px}
 .lunch-planner,.checkout-summary{padding:22px}
 .catalog-dish h2{font-size:24px}
 .dish-selector strong{font-size:23px}
 .dish-selector small{font-size:12px;line-height:1.55}
 .dish-selector{gap:12px}
 .jobs-section{gap:32px}
}
@media(max-width:760px){
 .menu-showcase>.featured>img{flex:none}
 .page-title-banner>p:last-child{line-height:1.65}
 .company-photo>p,.company-terms,.about-story p:not(.eyebrow),.jobs-profile p:not(.eyebrow){font-size:14px;line-height:1.8}
 form label,#checkout-details label{font-size:14px;line-height:1.5}
 form input:not([type=checkbox]):not([type=radio]):not([type=file]),form textarea,form select,#checkout-details input:not([type=checkbox]):not([type=radio]),#checkout-details textarea{font-size:16px;min-height:46px}
 .checkout-steps button{line-height:1.45}
 .footer-floor,.footer-brand-lockup>p{font-size:12px;line-height:1.75}
}
@media(max-width:560px){
 .hero-actions .button,.hero-actions .hero-menu{font-size:12px;line-height:1.4}
 .menu-heading{margin-top:22px;margin-bottom:24px}
 .menu-heading h2{font-size:clamp(40px,11.7vw,46px);line-height:1.05}
 .checkout-panel-heading h2{font-size:clamp(29px,8.2vw,34px);line-height:1.1}
 .checkout-panel-heading{margin-bottom:22px}
 .jobs-application{padding:22px 20px}
 .news-card .news-meta,.news-source{font-size:12px;line-height:1.6}
 .news-card h3{font-size:22px;line-height:1.15}
 .news-article-body>p{font-size:15px;line-height:1.8}
 .news-article-body>.news-lead{font-size:18px;line-height:1.6}
 .news-back{min-height:44px;margin-bottom:16px}
 .news-article .news-meta{gap:8px 16px;line-height:1.6}
 .news-article figcaption{font-size:11px;line-height:1.6}
 .checkout-toolbar .checkout-search{flex-basis:100%}
 .checkout-selected-filter{min-height:40px}
}
@media(max-width:374px){
 header>.brand{font-size:24px;letter-spacing:-1.4px}
 header>.button{padding-left:10px;padding-right:10px}
 .hero h1{font-size:clamp(39px,12vw,44px)}
 .hero-copy{padding-top:36px}
 .hero-reviews{padding:10px;gap:8px}
 .review-caption{font-size:10px}
 .hero-reviews>.icon{margin-left:0}
 .news-card>a{grid-template-columns:94px minmax(0,1fr);column-gap:14px}
 .news-card .news-cover{width:94px}
 .news-card h3{font-size:21px}
 .place-tabs{gap:0}
 .place-tabs button{padding-left:6px;padding-right:6px}
}
@media(max-width:374px){
 .hero-actions{gap:8px}
 .hero-actions .button,.hero-actions .hero-menu{font-size:11px;white-space:nowrap;padding-left:10px;padding-right:10px;gap:8px}
}
@media(max-width:760px){
 #ox-site-content>header #navigation{top:calc(100% + 8px);border-radius:var(--section-radius);max-height:calc(100dvh - 92px)}
}

/* Menu entrances preserve layout, existing centering and image crossfades. */
@keyframes city-menu-in{from{opacity:0;translate:0 -6px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:no-preference) and (min-width:761px){.mega-panel:not([hidden]){animation:city-menu-in 180ms cubic-bezier(.22,1,.36,1)}}
@media(prefers-reduced-motion:no-preference) and (max-width:760px){#ox-site-content>header #navigation.open{animation:city-menu-in 160ms cubic-bezier(.22,1,.36,1)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}

/* Shared hero CTA dimensions: button and link have identical border-box height. */
.hero-actions{align-items:stretch}
.hero-actions .button,.hero-actions .hero-menu{box-sizing:border-box;height:44px;min-height:44px;max-height:44px;padding-top:0;padding-bottom:0;line-height:1.4;align-items:center}

/* Give the mobile hero copy more breathing room above the heading. */
@media(max-width:560px){.hero-copy{padding-top:62px}}
@media(max-width:374px){.hero-copy{padding-top:56px}}

/* Recruitment: keep CTA with copy and feather a fully covered photo layer. */
.jobs-invite{flex-direction:column;align-items:flex-start;justify-content:center;gap:22px}
.jobs-invite>div{max-width:55%}
.jobs-invite>.button{align-self:flex-start}
.jobs-invite:before,.page-title-banner[data-banner=jobs]:before{inset:0 0 0 28%;background-size:cover;background-position:center top;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 27%,#000 65%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 27%,#000 65%)}
@media(max-width:760px){.jobs-invite>div{max-width:100%}.jobs-invite:before,.page-title-banner[data-banner=jobs]:before{inset:0;background-size:cover;background-position:65% 30%;mask-image:linear-gradient(90deg,transparent 0%,#000 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 100%);opacity:.5}}

/* Put the mobile order CTA at the end of the navigation. */
#navigation>.mobile-nav-order{display:none}
@media(max-width:760px){#ox-site-content>header>.button[data-order]{display:none}#ox-site-content>header>.nav-toggle{margin-left:auto}#navigation>.mobile-nav-order{display:flex;width:100%;justify-content:space-between;margin-top:20px;padding:12px 16px;font-size:14px;min-height:46px}#navigation>.mobile-nav-order>.icon{display:block}}
