:root{
--brand:#427069;--accent:#c9a15a;--surface:#f7f3ec;--text:#2b2b28;--muted:#f1f5f9;
--radius:16px;
--font-heading:"Marcellus",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--w-narrow:44rem;--w-normal:64rem;--w-wide:80rem;
--p-none:0;--p-sm:clamp(1.5rem,4vw,2rem);--p-md:clamp(2.5rem,6vw,4rem);
--p-lg:clamp(3rem,8vw,6rem);--p-xl:clamp(3.5rem,10vw,8.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--text);font-family:var(--font-body);
line-height:1.6;font-size:1rem}
/* Display type. The old scale topped out at 3.25rem, which is a heading rather
   than a statement — the hero of a small-business site is the one place where
   size is doing the persuading, and every reference page a customer points at
   sets it far larger. Negative tracking is part of the same move: type this big
   looks loose at default spacing. */
h1,h2,h3,h4{font-family:var(--font-heading);line-height:1.1;margin:0 0 .5em;text-wrap:balance;
letter-spacing:-.02em}
h1{font-size:clamp(2.75rem,6.5vw,5rem);letter-spacing:-.035em;line-height:1.02}
h2{font-size:clamp(1.9rem,4vw,3rem);letter-spacing:-.025em}
h3{font-size:1.25rem;line-height:1.3;letter-spacing:-.01em}
p{margin:0 0 1em}
img{max-width:100%;height:auto;display:block;border-radius:var(--radius)}
a{color:var(--brand)}

.section{padding:var(--p-md) 1.25rem}
.section .inner{margin-inline:auto;width:100%;max-width:var(--w-normal)}
.w-narrow .inner{max-width:var(--w-narrow)}
.w-wide .inner{max-width:var(--w-wide)}
.w-full .inner{max-width:none}
.p-none{padding-block:0}.p-sm{padding-block:var(--p-sm)}.p-md{padding-block:var(--p-md)}
.p-lg{padding-block:var(--p-lg)}.p-xl{padding-block:var(--p-xl)}
.a-center{text-align:center}.a-center .actions{justify-content:center}
.a-right{text-align:end}
/* Section backgrounds live at the end of this sheet — see the note there. */

.navbar{position:relative;border-bottom:1px solid rgba(0,0,0,.08);background:var(--surface)}
.navbar.sticky{position:sticky;top:0;z-index:50}
.navbar .inner{display:flex;align-items:center;gap:1.5rem;padding:.75rem 1.25rem;
margin-inline:auto;max-width:var(--w-wide)}
.navbar .brand{font-weight:700;text-decoration:none;color:var(--text);font-family:var(--font-heading);
display:flex;align-items:center}
/* The logo has to be sized in CSS, not by the img's height attribute.
   The global img{height:auto} rule above outranks a presentational attribute, so
   the markup's height="36" was doing nothing and a square 1024px logo rendered
   a 1024px-tall navbar. width:auto keeps the aspect ratio, max-width stops a
   very wide wordmark pushing the navigation off the row, and object-fit means a
   logo of any proportion is letterboxed rather than squashed. */
.navbar .brand img{height:36px;width:auto;max-width:180px;object-fit:contain;border-radius:0}
.navbar nav{margin-inline-start:auto}
.navbar ul{display:flex;gap:1.25rem;list-style:none;margin:0;padding:0;flex-wrap:wrap}
/* :not(.btn) matters. This rule is (0,1,1) and .btn-primary's color is
   (0,1,0), so without the exclusion a primary button in the navigation bar
   inherited the bar's text colour instead of taking its own white — which on
   a dark brand is dark text on a dark button, i.e. the site's main call to
   action unreadable. Specificity, not source order, so moving it would not
   have helped. */
.navbar a:not(.btn){text-decoration:none;color:inherit}
.navbar .btn{text-decoration:none}

.actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2rem}
.btn{display:inline-block;padding:.9rem 1.75rem;border-radius:var(--radius);
text-decoration:none;font-weight:600;border:1px solid transparent}
/* The arrow goes on section-level calls to action only, never on the one in the
   navigation bar: that button sits in a tight row where a glyph is clutter, and
   it is the same class. Scoping by .actions is what separates them. */
.actions .btn-primary::after{content:"\2192";margin-inline-start:.6rem}
/* The call-to-action arrow points the way the reader is going, so it turns
   around rather than merely moving to the other side. */
[dir="rtl"] .actions .btn-primary::after{content:"\2190"}
.btn-primary{background:var(--brand);color:#fff}
.btn-secondary{background:transparent;color:inherit;border-color:currentColor}
.btn-ghost{background:transparent;color:inherit}

.grid{display:grid;gap:1.75rem;margin-top:2.75rem}
.cols-1{grid-template-columns:1fr}
.cols-2{grid-template-columns:repeat(2,1fr)}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-4{grid-template-columns:repeat(4,1fr)}
.gap-sm{gap:.75rem}.gap-lg{gap:2.5rem}
.card{background:var(--surface);border:1px solid rgba(0,0,0,.08);
border-radius:var(--radius);padding:1.85rem}
.card h3{margin-top:0}
.card .price{font-size:1.5rem;font-weight:700}
/* The billing period sits in a span inside .price. Without a rule of its own it
   inherited 1.5rem/700 and ran straight into the number — "$2per month". Same
   treatment as .stat span, which is the same shape: a quiet suffix on a figure. */
.card .price span{font-size:.875rem;font-weight:400;opacity:.75;margin-inline-start:.35rem}
.plan.highlighted{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand)}
.plan ul{list-style:none;padding:0;margin:1rem 0}
.plan li{padding:.35rem 0;border-bottom:1px solid rgba(0,0,0,.06)}

.hero-image{margin-top:2.5rem;width:100%}
/* The eyebrow: a label for the heading under it. Body font rather than the
   heading face — at this size a display serif turns to mush — and a dot in the
   accent colour, which is the cheapest way to make a line of small caps read as
   deliberate rather than as a stray caption. */
.eyebrow{display:flex;align-items:center;gap:.55rem;margin:0 0 1.1rem;
font-family:var(--font-body);font-size:.75rem;font-weight:600;text-transform:uppercase;
letter-spacing:.12em;opacity:.75}
.eyebrow::before{content:"";width:.4rem;height:.4rem;border-radius:999px;
background:var(--accent);flex:none}
.a-center .eyebrow{justify-content:center}
/* On a brand or gradient band the accent is one arbitrary colour on another and
   can land anywhere from invisible to garish, so both fall back to the band's
   own ink at reduced weight — still a second tone, never a contrast failure. */
.b-brand .eyebrow::before,.b-gradient .eyebrow::before{background:currentColor}

/* The accent half of a split headline. */
h1 .accent,h2 .accent{color:var(--accent)}
.b-brand h1 .accent,.b-brand h2 .accent,
.b-gradient h1 .accent,.b-gradient h2 .accent{color:rgba(255,255,255,.7)}

.subheading{font-size:clamp(1.05rem,1.7vw,1.35rem);opacity:.8;line-height:1.5;max-width:46ch}
.a-center .subheading{margin-inline:auto}
.prose{max-width:60ch}
.a-center .prose{margin-inline:auto}

/* Variants change composition, not merely colour, so sites built from the same
   safe component catalog do not all share one silhouette. */
.section-hero.v-split .inner,.section-hero.v-split-reverse .inner{
display:grid;grid-template-columns:minmax(0,1fr) minmax(18rem,.9fr);column-gap:clamp(2rem,6vw,6rem);align-items:center}
.section-hero.v-split .hero-image,.section-hero.v-split-reverse .hero-image{
grid-column:2;grid-row:1/7;margin:0;height:min(70vh,42rem);object-fit:cover}
.section-hero.v-split-reverse .inner{grid-template-columns:minmax(18rem,.9fr) minmax(0,1fr)}
.section-hero.v-split-reverse .hero-image{grid-column:1}
.section-hero.v-split-reverse .inner>:not(.hero-image){grid-column:2}
.section-hero.v-editorial h1{max-width:13ch;font-size:clamp(3.25rem,8vw,7rem)}
.section-hero.v-editorial .subheading{margin-inline-start:auto}
.section-hero.v-immersive{min-height:min(88vh,58rem);display:grid;align-items:end;position:relative;overflow:hidden}
.section-hero.v-immersive .inner{position:relative;z-index:1;color:#fff;padding-block:clamp(3rem,8vw,7rem)}
.section-hero.v-immersive .hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;margin:0;z-index:-2;border-radius:0}
.section-hero.v-immersive .inner::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(2,6,23,.86),rgba(2,6,23,.18))}
.section-hero.v-immersive .inner{max-width:none;padding-inline:max(1.25rem,calc((100% - var(--w-wide))/2))}
.section-hero.v-immersive h1,.section-hero.v-immersive a{color:#fff}
.v-minimal .card,.v-borderless .card{border:0;background:transparent;padding:0}
.v-elevated .card{border:0;box-shadow:0 18px 50px rgba(15,23,42,.11)}
.v-alternating .card:nth-child(even){transform:translateY(1.75rem)}
.section-gallery.v-featured .gallery img:first-child{grid-column:span 2;grid-row:span 2;height:100%}
.section-gallery.v-masonry .gallery{display:block;columns:3;column-gap:1.25rem}
.section-gallery.v-masonry .gallery img{break-inside:avoid;margin-bottom:1.25rem}
.navbar.v-floating{margin:1rem auto 0;max-width:var(--w-wide);border:1px solid rgba(0,0,0,.08);border-radius:var(--radius);box-shadow:0 12px 35px rgba(15,23,42,.08)}
.navbar.v-minimal{border-bottom:0;background:transparent}
.navbar.v-centered .inner{justify-content:center;flex-wrap:wrap}.navbar.v-centered nav{margin-inline-start:0}
.footer.v-simple .footer-links{display:none}.footer.v-large{padding-block:6rem}.footer.v-large .company{font-size:clamp(2rem,5vw,4rem)}

.stats{display:flex;flex-wrap:wrap;gap:2.5rem;margin-top:2rem;justify-content:inherit}
/* The figure is the content here, so it gets the brand ink and the display
   size. --accent had exactly one use in this sheet before (the gradient), which
   is why a theme could set it and see almost nothing change. */
.stat strong{display:block;font-size:clamp(2.5rem,4.5vw,3.5rem);font-family:var(--font-heading);
line-height:1;color:var(--brand);letter-spacing:-.03em}
.b-dark .stat strong,.b-brand .stat strong,.b-gradient .stat strong,.b-panel .stat strong{color:var(--accent)}
.stat span{opacity:.75}

/* Restaurant menu. Deliberately typographic rather than card-based: a menu is
   read as a list, and boxing every dish turns twelve of them into a wall. */
/* Courses want more air between rows than the grid's default gap, and that has
   to come from row-gap rather than a margin on .menu-course + .menu-course:
   every course after the first is an adjacent sibling, including the one that
   starts the second column, so a margin pushed that column down out of line
   with the first. */
.menu{margin-top:2rem;row-gap:2.75rem}
.menu-course h3{margin-bottom:.75rem}
.menu-list{list-style:none;padding:0;margin:0}
.menu-item{padding:.6rem 0;border-bottom:1px solid rgba(0,0,0,.08)}
.menu-item:last-child{border-bottom:0}
.menu-row{display:flex;align-items:baseline;gap:.5rem}
.menu-row .dish{font-weight:600}
/* The leader line is a dotted border on a flexible empty span, so it fills
   exactly the gap left between a dish of any length and its price. */
.menu-row .dots{flex:1 1 auto;min-width:1.5rem;border-bottom:1px dotted rgba(0,0,0,.3);
transform:translateY(-.3rem)}
/* A price here is not inside a .card, so it takes none of that rule's 1.5rem —
   which is right: at menu scale the dish is the heading and the price is not. */
.menu-item .price{font-weight:600;white-space:nowrap}
.menu-item .dish-desc{margin:.15rem 0 0;font-size:.9rem;opacity:.75;max-width:52ch}
.menu-tags{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;padding:0;margin:.4rem 0 0}
.menu-tags li{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;
padding:.1rem .4rem;border:1px solid currentColor;border-radius:999px;opacity:.65}
.menu-note{margin-top:1.5rem;font-size:.85rem;opacity:.7}
/* A centred section centres its text, which a leader-dot list cannot survive:
   the dots run to the middle of the row and the descriptions ragged both ways.
   The course headings still centre with the section; the list does not. */
.a-center .menu-list{text-align:start}

/* The default disclosure triangle is the one part of <details> that looks like
   a browser control rather than a design. Replacing it with a +/- costs nothing
   and keeps the element's own keyboard and screen-reader behaviour, which is the
   whole reason this is <details> and not a scripted accordion. */
.faq details{border-bottom:1px solid rgba(0,0,0,.1);padding:1.35rem 0}
.faq summary{cursor:pointer;font-weight:600;font-size:1.05rem;
display:flex;align-items:center;justify-content:space-between;gap:1.5rem;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:1.6rem;line-height:1;
font-weight:400;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details[open] summary{margin-bottom:.5rem}
.faq details .prose{opacity:.75;max-width:68ch}
.quote blockquote{margin:0 0 1rem;font-size:1.05rem}
.quote figcaption{display:flex;align-items:center;gap:.6rem;font-size:.9rem}
/* Same override, same fix: the avatar's width/height attributes lose to
   img{height:auto}, so a full-size photograph filled the testimonial. */
.quote figcaption img{width:40px;height:40px;object-fit:cover;border-radius:999px;flex:none}

.contact-details{margin-top:1.5rem;display:grid;gap:.25rem}
.map{margin-top:1.5rem}

.vikn-form{margin-top:2rem;display:grid;gap:1rem;max-width:32rem}
.a-center .vikn-form{margin-inline:auto}
.vikn-form .fields{display:grid;gap:1rem}
.vikn-form label{display:grid;gap:.35rem;font-size:.9rem;font-weight:600}
.vikn-form input,.vikn-form textarea,.vikn-form select{
padding:.7rem .85rem;border:1px solid rgba(0,0,0,.2);border-radius:var(--radius);
font:inherit;color:inherit;background:var(--surface);width:100%}
.vikn-form .hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px}
/* On a dark band or inside a panel the boxed field turns into a row of pale
   rectangles that outshout everything around them. Underlines carry the same
   affordance at a fraction of the visual weight — and the fields keep their own
   colour, so a themed panel is not stuck with white boxes. */
.b-dark .vikn-form input,.b-dark .vikn-form textarea,.b-dark .vikn-form select,
.b-panel .vikn-form input,.b-panel .vikn-form textarea,.b-panel .vikn-form select,
.b-brand .vikn-form input,.b-brand .vikn-form textarea,.b-brand .vikn-form select{
background:transparent;color:inherit;border:0;border-bottom:1px solid rgba(255,255,255,.3);
border-radius:0;padding-inline:0}
.b-dark .vikn-form input:focus,.b-panel .vikn-form input:focus,
.b-dark .vikn-form textarea:focus,.b-panel .vikn-form textarea:focus{
outline:0;border-bottom-color:var(--accent)}
.b-dark .vikn-form label,.b-panel .vikn-form label{font-weight:500;opacity:.7;font-size:.8rem;
text-transform:uppercase;letter-spacing:.06em}
.form-success{color:var(--brand);font-weight:600}

.whatsapp{position:fixed;bottom:1.25rem;z-index:60;background:#25d366;color:#fff;
padding:.8rem 1.2rem;border-radius:999px;text-decoration:none;font-weight:600;
box-shadow:0 6px 20px rgba(0,0,0,.18)}
.whatsapp-bottom-right{right:1.25rem}
.whatsapp-bottom-left{left:1.25rem}
.whatsapp-inline{position:static;display:inline-block}

.social{display:flex;gap:1rem;list-style:none;padding:0;margin:1.5rem 0 0;flex-wrap:wrap}
.a-center .social{justify-content:center}
.social a{text-transform:capitalize;text-decoration:none}

.footer{background:var(--muted);padding:3rem 1.25rem;margin-top:auto}
.footer .inner{margin-inline:auto;max-width:var(--w-wide);display:grid;gap:.5rem}
.footer .company{font-weight:700;font-family:var(--font-heading);margin:0}
.footer-links{display:flex;flex-wrap:wrap;gap:1rem;list-style:none;padding:0;margin:1rem 0}
.footer-links a{text-decoration:none}
.footer-title{font-weight:700;width:100%}
.copyright{opacity:.7;font-size:.875rem;margin:0}
/* The badge fades its wording, not the mark: opacity on the link would take the
   logo down with it, and a brand mark at 60% on a pale background is mud. */
.vikn-badge{text-align:center;padding:1rem;font-size:.8rem}
.vikn-badge a{color:inherit;display:inline-flex;align-items:center;gap:.45rem;
text-decoration:none}
.vikn-badge span{opacity:.6}
.vikn-badge a:hover span{opacity:.9}
/* height:auto keeps the mark's own proportions — it is 64x62, not square — and
   border-radius:0 undoes the global img rule, which would otherwise round the
   corners off a logo by whatever the customer's theme radius happens to be. */
.vikn-mark{width:1.25em;height:auto;flex:none;border-radius:0}
/* Photo attribution. Quiet, but never hidden: it is a licence term, so no
   display:none, no zero opacity, and a contrast floor that stays legible. */
.photo-credits{text-align:center;padding:.75rem 1rem;font-size:.75rem;opacity:.7}
.photo-credits p{margin:0}
.photo-credits a{color:inherit;text-decoration:underline}

.spacer-sm{height:1.5rem}.spacer-md{height:3rem}.spacer-lg{height:5rem}.spacer-xl{height:7rem}
.divider{border:0;border-top:1px solid rgba(0,0,0,.12);margin:2rem 0}

/* Section backgrounds.
   Last in the sheet on purpose. The navbar and the footer render their own
   element carrying their own single-class rule that sets a background, and
   .footer's own background rule beats .b-dark on source order alone
   when both are one class deep — so a footer asked to be dark came out grey.
   Every background token needs a rule here, including the ones that resolve
   to the page default: a token the catalog offers and the sheet ignores is
   indistinguishable, to the model choosing it, from one that works. */
.b-none{background:var(--surface)}
/* "surface" must be visibly its own band. Painting it var(--surface) would
   make it a synonym for "none" — which is how a page that did alternate its
   backgrounds section by section still came out flat white. A brand tint
   rather than more grey, so it reads as a third option next to "muted";
   the plain declaration first is the fallback where color-mix is unknown. */
.b-surface{background:var(--muted);
background:color-mix(in srgb,var(--brand) 6%,var(--surface));
border-block:1px solid rgba(0,0,0,.06)}
.b-muted{background:var(--muted)}
.b-brand{background:var(--brand);color:#fff}
.b-brand a,.b-brand h1,.b-brand h2,.b-brand h3{color:#fff}
.b-dark{background:#0b1120;color:#e2e8f0}
/* An inset panel rather than a full-bleed band.
   The section keeps its own block padding and stops painting anything itself;
   the colour, the radius and the generous inner padding move onto .inner, which
   is already the width-constrained child every section renders. So a panel is
   the same markup as every other section — no renderer branch — and it inherits
   w-narrow/w-normal/w-wide exactly as the others do. */
.b-panel{background:var(--surface)}
.b-panel .inner{background:#0b1120;color:#e2e8f0;border-radius:clamp(16px,2.5vw,28px);
padding:clamp(2rem,5vw,4.5rem)}
.b-panel .inner h1,.b-panel .inner h2,.b-panel .inner h3,.b-panel .inner a{color:#fff}
/* A panel is an object on the page, so its own hairlines have to come from the
   panel's ink rather than the page's. */
.b-panel .menu-item,.b-panel .faq details,.b-panel .plan li{border-color:rgba(255,255,255,.18)}
.b-panel .menu-row .dots{border-bottom-color:rgba(255,255,255,.4)}
.b-panel .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
/* a{color:var(--brand)} is set globally, so without this every link in a dark
   section — which for a footer is all of them — was brand blue on navy. */
.b-dark a,.b-dark h1,.b-dark h2,.b-dark h3{color:#fff}
.b-gradient{background:linear-gradient(135deg,var(--brand),var(--accent));color:#fff}
.b-gradient a,.b-gradient h1,.b-gradient h2,.b-gradient h3{color:#fff}
/* The hairlines are mixed from black and disappear on a dark band. */
.b-dark .divider,.b-brand .divider,.b-gradient .divider{border-top-color:rgba(255,255,255,.25)}
/* Same for the menu's rules and leader dots — on a dark band the dish and the
   price were left floating with nothing between them. */
.b-dark .menu-item,.b-brand .menu-item,.b-gradient .menu-item{border-bottom-color:rgba(255,255,255,.18)}
.b-dark .menu-row .dots,.b-brand .menu-row .dots,.b-gradient .menu-row .dots{
border-bottom-color:rgba(255,255,255,.4)}
.b-dark .footer-links a,.b-dark .copyright{color:#e2e8f0}

@media (max-width:1024px){
.cols-3,.cols-4{grid-template-columns:repeat(2,1fr)}
.tablet-c-1{grid-template-columns:1fr}
.tablet-c-2{grid-template-columns:repeat(2,1fr)}
.tablet-p-sm{padding-block:var(--p-sm)}
.tablet-a-center{text-align:center}
}
@media (max-width:640px){
.cols-2,.cols-3,.cols-4,.pricing-grid{grid-template-columns:1fr}
.navbar .inner{flex-wrap:wrap;gap:.75rem}
.navbar nav{margin-inline-start:0;width:100%}
.section{padding-inline:1rem}
.mobile-c-1{grid-template-columns:1fr}
.mobile-p-sm{padding-block:var(--p-sm)}
.mobile-p-none{padding-block:0}
.mobile-a-center{text-align:center}
.mobile-a-left{text-align:start}
.stats{gap:1.5rem}
.section-hero.v-split .inner,.section-hero.v-split-reverse .inner{display:block}
.section-hero.v-split .hero-image,.section-hero.v-split-reverse .hero-image{height:auto;margin-top:2rem}
.section-gallery.v-masonry .gallery{columns:1}
.section-gallery.v-featured .gallery img:first-child{grid-column:auto;grid-row:auto}
.v-alternating .card:nth-child(even){transform:none}
}
@media (prefers-reduced-motion:no-preference){
html{scroll-behavior:smooth}
}
.pricing-grid{grid-template-columns:repeat(auto-fit,minmax(16rem,1fr))}