/*
Theme Name: Solmere
Theme URI: https://example.com/solmere
Author: Your Name
Author URI: https://example.com
Description: A warm, editorial homepage theme for a luxury retreats & residences brand. Ported from a design study — a fluid layout with a full-screen mega menu, alternating feature grids, a horizontal seasonal scroller and a sticky reserve bar. Replace the placeholder colors, imagery and copy with your own before launch.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: solmere
*/

/* -----------------------------------------------------------
   Design tokens
----------------------------------------------------------- */
:root{
  --bg:#F1EAE0;
  --bg-2:#FBF8F2;
  --ink:#242019;
  --ink-soft:#5C574B;
  --ink-faint:#8C8575;
  --line:#D9CFB9;
  --line-2:#E2D8C3;
  --accent:#8B6A46;
  --bar:#242019;
  --bar-2:#3A342A;
  --sand:#CBB99A;
  --sage:#93A184;
  --dusk:#7C8FA0;
  --sun:#E4B978;
}

/* One-pager nav: clicking Our Story / Contact Us / Partner / Products /
   Legal doesn't scroll the page -- it cross-fades the homepage's default
   view (hero slider + "who we serve" cards) out and the matching section
   in, in place. Targeted by ID rather than a shared class: Elementor's
   "CSS Classes" advanced control (_css_classes) doesn't get applied to
   SECTIONS in this Elementor version (it only took effect on widgets
   elsewhere in this file), but the "CSS ID" control (_element_id) does,
   so js/add-onepage-sections.php sets that instead and this file lists
   the 5 ids directly. Two classes per element because opacity can't
   transition from display:none: js/main.js toggles "is-active" (display)
   and "is-visible" (opacity) a frame apart so the fade actually animates,
   both on the way in and out. Sections start hidden and are only ever
   shown via JS. */
#our-story, #contact-us, #partner, #products, #legal{
  padding:88px 20px;
  opacity:0;
  transition:opacity .35s ease;
  display:none;
}
#our-story.is-active, #contact-us.is-active, #partner.is-active, #products.is-active, #legal.is-active{
  display:block;
}
#our-story.is-active.is-visible, #contact-us.is-active.is-visible, #partner.is-active.is-visible, #products.is-active.is-visible, #legal.is-active.is-visible{
  opacity:1;
}
#contact-us, #partner, #products, #legal{ text-align:center; }
#contact-us, #products{ background:var(--bg-2); }

/* The "who we serve" cards section -- the one default homepage section
   that actually swaps out for a one-pager section (any top-level
   Elementor section that's neither one of the 5 ids below NOR the
   section containing the hero slider -- same rule as js/main.js's
   homeSections(), kept in sync). The hero photo slider itself is
   deliberately excluded: it stays a permanent banner under the header
   and these rules never apply to it, whichever section is showing.
   "is-home-hidden" removes the cards section from flow once its
   fade-out finishes; visible by default otherwise. */
.elementor-top-section:not(#our-story):not(#contact-us):not(#partner):not(#products):not(#legal):not(:has(.hero-slider)){
  opacity:1;
  transition:opacity .35s ease;
}
.elementor-top-section:not(#our-story):not(#contact-us):not(#partner):not(#products):not(#legal):not(:has(.hero-slider)).is-home-hidden{ display:none; }
.elementor-top-section:not(#our-story):not(#contact-us):not(#partner):not(#products):not(#legal):not(:has(.hero-slider)).is-fading-out{ opacity:0; }

*, *::before, *::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  font-family:"Lyon Text Web","Lyon Display Web","Times New Roman", serif;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:"Lyon Display Web","Lyon Text Web","Times New Roman", serif;
  font-weight:500;
  margin:0;
  letter-spacing:.2px;
}
p{ margin:0; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img{ max-width:100%; display:block; }
ul{ margin:0; padding:0; list-style:none; }

/* -----------------------------------------------------------
   Layout helpers
----------------------------------------------------------- */
.wrap{ max-width:1180px; margin:0 auto; padding:0 clamp(20px,5vw,40px); box-sizing:border-box; }

.grid-2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(32px,5vw,56px); }
.grid-3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:clamp(24px,4vw,40px); }
.grid-4{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:clamp(24px,4vw,40px); }

.col{ display:flex; flex-direction:column; gap:22px; }

/* -----------------------------------------------------------
   Text styles
----------------------------------------------------------- */
.eyebrow{ font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--ink-soft); font-weight:500; }
/* Simple "Home / Page Title" trail, in its own slim strip directly under
   the header/nav (page.php) -- Home links back, the current page name is
   plain text (no link). Kept as a distinct bar rather than living inside
   <main>'s own top padding, so it reads as close to the nav, not as the
   start of the page content. */
.page-breadcrumb-bar{ padding:14px 0; }
/* Inline variant: js/main.js inserts this at the top of whichever
   one-pager section (Our Story, Contact Us, ...) is showing on the
   homepage, right above that section's own heading -- part of the
   content column there rather than its own full-width strip, so no
   left/right padding of its own (the section already provides that) and
   a bit of breathing room below instead of the standalone version's
   padding on both sides. */
.page-breadcrumb-bar.page-breadcrumb-bar--inline{ padding:0 0 18px; }
/* Full-bleed background photo test (Our Story page only) -- the overlay
   gradient is baked into the inline background-image in page.php (a
   solid cream wash at ~88% opacity over the photo), this just handles
   sizing/position. */
.page-bg-photo{ background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; }
.breadcrumb{ font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--ink-soft); font-weight:500; }
.breadcrumb a{ color:var(--ink-soft); text-decoration:none; border-bottom:1px solid transparent; transition:color .15s ease, border-color .15s ease; }
.breadcrumb a:hover{ color:var(--ink); border-bottom-color:var(--ink-soft); }
.breadcrumb .breadcrumb__sep{ margin:0 8px; opacity:.5; }
.breadcrumb [aria-current]{ color:var(--ink); }
.link-line{ display:inline-block; font-size:14px; letter-spacing:.5px; padding-bottom:6px; border-bottom:1px solid var(--ink); }
.link-line-lt{ border-bottom-color:rgba(255,255,255,.7); color:#fff; }
.btn-dark{ background:var(--bar); color:#F4EFE6; padding:15px 34px; font-size:13px; letter-spacing:2px; text-transform:uppercase; border-radius:2px; }
.btn-outline{ border:1px solid var(--ink); padding:13px 30px; font-size:13px; letter-spacing:2px; text-transform:uppercase; border-radius:2px; }
.card-title{ font-size:26px; line-height:1.25; min-height:calc(1.25em * 2); }
/* Use-case cards ("Retail/Hospitality/Office/Clinic") are a single short
   word over a photo, not a multi-line title needing 2-line reserved height
   like .card-title -- reusing .card-title here left a large empty gap
   between the word and the photo below it. */
.usecase-title{ font-size:26px; line-height:1.25; margin-bottom:20px; padding-bottom:18px; position:relative; }
/* Small gold accent line standing in for a divider between the title and
   the photo below it -- purely decorative, so it's a ::after rather than
   a visible <hr> in the markup. */
.usecase-title::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:34px;
  height:2px;
  background:var(--accent);
}
.body-copy{ font-size:15px; line-height:1.7; color:var(--ink-soft); font-weight:300; min-height:calc(1.7em * 3); }
.navlink{ font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--ink); border-bottom:1px solid transparent; padding-bottom:3px; transition:color .15s ease, border-color .15s ease, text-shadow .15s ease; }
.navlink:hover{ color:var(--ink-soft); border-bottom-color:var(--ink-soft); text-shadow:0 1px 3px rgba(36,32,25,.18); }
.navlink.is-active{ color:var(--ink-soft); border-bottom-color:var(--ink-soft); }
.hairline{ height:1px; background:var(--line); border:none; margin:0; }

/* -----------------------------------------------------------
   Illustration cards
----------------------------------------------------------- */
.scenecard{ position:relative; overflow:hidden; border-radius:3px; }
.scenecard svg{ width:100%; height:100%; display:block; }
.scenecard--hero{ aspect-ratio:1440/640; min-height:320px; }
.scenecard--wide{ aspect-ratio:560/340; }
.scenecard--tall{ aspect-ratio:560/360; }
.scenecard--card{ aspect-ratio:340/250; }
.scenecard--small{ aspect-ratio:360/300; }

/* Use-case cards (Retail/Hospitality/Office/Clinic) switched from the
   solmere_photo() HTML-widget markup to Elementor's native Image widget,
   which doesn't carry the .scenecard wrapper these rules above target --
   so the same look (rounded corners, fixed aspect ratio, cover-crop) is
   reapplied here via the "usecase-photo" CSS class added to each of
   those 4 image widgets under Elementor's Advanced -> CSS Classes. Like
   .hero-slider elsewhere in this file, _css_classes lands on the
   widget's own wrapper div, so the img inside is targeted as a
   descendant rather than needing the class directly on the <img>. */
.usecase-photo{ overflow:hidden; border-radius:6px; transition:box-shadow .25s ease; }
.usecase-photo img{ width:100%; aspect-ratio:360/300; object-fit:cover; display:block; transition:transform .25s ease; }
/* Hover feedback lives on the photo itself now, not the card -- shadow
   lifts it off the page and a slight zoom on the image inside gives the
   whole (still fully clickable) card a sense of response without
   touching the card's own background/border. */
.elementor-column:has(.usecase-title):hover .usecase-photo{ box-shadow:0 10px 24px rgba(36,32,25,.18); }
.elementor-column:has(.usecase-title):hover .usecase-photo img{ transform:scale(1.05); }

/* Makes the whole card (title + photo + the gap between them) a single
   click target, via a full-cover link -- add a small HTML widget inside
   each of the 4 use-case columns containing just:
     <a class="usecase-card-link" href="/retail/" aria-label="Retail"></a>
   (swap the href/aria-label per card). :has() finds that column from the
   heading it already contains, so no extra CSS class needs adding to the
   column itself in Elementor. Don't also set the Link field on the
   heading or image widgets -- this overlay is what should catch the click. */
/* position:relative here just gives the click-overlay link below a
   containing block to fill (the column itself); margin keeps the 4
   cards from sitting flush against each other. No background/shadow/
   rounded corners on the card -- reverted per feedback that it looked
   worse than the plain column. */
.elementor-column:has(.usecase-title){
  position:relative;
  margin:0 14px;
}
/* Elementor gives every widget's own wrapper div position:relative by
   default. That div sits between the link and the column, and -- since
   its only content is now the absolutely-positioned link -- collapses to
   0 height. Being the nearer positioned ancestor, it becomes the actual
   box the link's inset:0 fills, instead of the column, so the link
   shrank to 0 height rather than covering the card. Forcing that one
   wrapper back to static skips it, letting the link's containing block
   resolve to the column (the next positioned ancestor up) as intended. */
.elementor-widget-html:has(.usecase-card-link){ position:static; }
.usecase-card-link{ position:absolute; inset:0; z-index:5; cursor:pointer; }

/* -----------------------------------------------------------
   Hero slider (Elementor Image Carousel widget, tagged
   "hero-slider" via its CSS Classes setting). Without an
   explicit height the slide box just grows to match the full-
   resolution photos' own aspect ratio, which made it far taller
   than one screen.

   --hero-h is set by js/main.js to exactly the space left in the
   viewport below the header on load (window.innerHeight minus the
   slider's own offset from the top of the page), recalculated on
   resize. That makes the whole slider visible on load with no
   scrolling needed to see the rest of it, on any screen size --
   a fixed pixel value (what this used to be) only ever fits the
   one screen it was tuned on. The 640px fallback only applies
   before that JS runs (or if it's disabled).
------------------------------------------------------------ */
.hero-slider .swiper,
.hero-slider .swiper-wrapper,
.hero-slider .swiper-slide{
  /* Photos are 3:2: never taller than the width needs (no empty bands), never taller than the screen. */
  height:min(var(--hero-h, 640px), 64vw) !important;
}
/* Elementor wraps each slide's image in a <figure class="swiper-slide-inner">,
   which defaults to height:auto -- that blocks the img's height:100% from
   resolving against anything, so the photo was rendering at its own
   intrinsic aspect ratio (short and top-aligned) instead of filling the
   slide. Give the figure an explicit height too. */
.hero-slider .swiper-slide-inner{
  width:100%;
  height:100%;
  margin:0;
  display:block;
}
.hero-slider .swiper-slide-image{
  width:100%;
  height:100%;
  object-fit:contain; /* show the WHOLE photo (letterboxed), never cropped */
  /* (Previously cover + top anchor.) The slide is much shorter/wider than these photos, so cover has to
     crop a lot of height to fill it. Default center cropping takes that
     equally off the top and bottom -- but these hero photos all carry
     their headline/wordmark right at the top edge of the frame (a 20%
     bias here still clipped it on some slides), so the crop is anchored
     fully to the top and eats entirely into the bottom of the photo
     instead, which is never the important part on these images. */
  object-position:50% 50%;
  display:block;
}

.scroller{ display:flex; gap:28px; overflow-x:auto; scrollbar-width:none; padding-bottom:4px; }
.scroller::-webkit-scrollbar{ display:none; }
.scroll-card{ min-width:min(340px,82vw); max-width:min(340px,82vw); }

/* -----------------------------------------------------------
   Header + wordmark
----------------------------------------------------------- */
.site-header{ position:sticky; top:0; z-index:40; background:var(--bg); border-bottom:1px solid var(--line); }

/* Width is set by the logo image; the name underneath is sized by js/main.js (fitWordmark) to span exactly that width. width:0/min-width:100% stops the text from widening the block. */
.wordmark{ display:flex; flex-direction:row; align-items:center; width:max-content; gap:clamp(10px,1.4vw,20px); }
@font-face{ font-family:"Montserrat"; src:url("fonts/montserrat-800.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; }
@font-face{ font-family:"Montserrat"; src:url("fonts/montserrat-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:"Playfair Display"; src:url("fonts/playfair-display-500-italic.woff2") format("woff2"); font-weight:500; font-style:italic; font-display:swap; }
.wordmark__text .wm-img{ display:block; height:clamp(22px,2.4vw,32px); width:auto; max-width:none; }
.wordmark__text{ font-family:"Montserrat",Arial,sans-serif; font-size:16px; font-weight:500; white-space:nowrap; line-height:1; display:block; letter-spacing:0; color:var(--ink); }
/* One line: bold "HELLO" + italic script "Chérie"; "SWITZERLAND" tucked underneath, right-aligned. Sizes are in em so js/main.js can scale the whole block to the logo's width. */
.wordmark__text .wm-line{ display:block; white-space:nowrap; }
.wordmark__text .wm-hello{ font-weight:800; font-size:.62em; letter-spacing:.03em; text-transform:uppercase; }
.wordmark__text .wm-cherie{ font-family:"Playfair Display",Georgia,serif; font-style:italic; font-weight:500; font-size:1.3em; letter-spacing:0; text-transform:none; margin-left:.08em; }
.wordmark__text .wm-sub{ display:block; text-align:right; font-weight:500; font-size:max(.34em,6.5px); letter-spacing:.3em; margin-right:-.3em; margin-top:.5em; text-transform:uppercase; }
/* Caps the uploaded custom-logo image (Appearance -> Customize -> Site
   Identity) to a sensible header size. Without this, the base img{
   max-width:100% } rule has nothing else to size against and the logo
   scales up to the full ~1180px header content width. */
/* Accent underline beneath the logo image only (not the wordmark text). */
.wordmark .custom-logo-link{ display:inline-flex; flex-direction:column; align-items:stretch; }
.wordmark .custom-logo-link::after{ content:""; display:block; height:2px; background:var(--accent); margin-top:5px; }
.wordmark img.custom-logo{ height:clamp(44px,6vw,64px); width:auto; max-width:220px; display:block; }

/* Flat header nav row (replaces the original design study's hamburger +
   full-screen mega menu, which no longer fits Hello Cherie). On narrow
   screens it hides behind a small hamburger button (.menu-toggle) instead
   of always showing -- body.menu-open (toggled by js/main.js) reveals it
   as a centered dropdown list. */
/* Header layout: logo + "Hello Cherie" wordmark pinned left, nav pinned
   right, links running left to right in one row. */
/* Full-width (not the 1180px .wrap column) so the logo sits hard left and the nav hard right on wide screens. */
.header-inner{ display:flex; align-items:center; justify-content:flex-start; gap:clamp(24px,4vw,64px); max-width:none; margin:0; padding:14px clamp(16px,3vw,48px); }
.header-brand{ flex:0 0 auto; }
/* Nav container sits immediately right of the logo, is half the screen wide, and lays its links out left to right from its left edge. */
.primary-nav{ display:flex; flex-direction:row; justify-content:flex-start; align-items:center; flex-wrap:nowrap; gap:32px; margin:0; flex:0 1 50vw; max-width:50vw; }
.primary-nav .navlink{ white-space:nowrap; }
/* Tablet/desktop: with just "Our Story" (homepage) the link sits 70% of the way across the screen. Pages with the full five-link nav pin it to the right edge instead, so it never runs off-screen. */
@media (min-width:601px){
	.header-inner{ position:relative; }
	.primary-nav{ position:absolute; top:50%; transform:translateY(-50%); width:auto; max-width:none; flex:none; }
	.primary-nav--single{ left:70%; }
	.primary-nav:not(.primary-nav--single){ right:clamp(16px,3vw,48px); }
}
.nav-social{ display:none; }
.menu-toggle{ display:none; align-items:center; gap:8px; margin:0 0 0 auto; }
@media (max-width:600px){
	/* Compact one-row header on phones: logo + name left, menu right. */
	.header-inner{ gap:12px; padding-top:8px; padding-bottom:8px; }
	.wordmark img.custom-logo{ height:40px; max-width:110px; }
	.wordmark{ gap:8px; }
	.wordmark__text .wm-img{ height:16px; }
	.menu-toggle{ display:flex; }
	/* Multi-link pages: dropdown under the header, links stacked. */
	.primary-nav{ max-width:none; flex:none; display:none; position:absolute; top:100%; left:0; right:0; background:var(--bg-2); border-bottom:1px solid var(--line); flex-direction:column; align-items:flex-start; gap:16px; padding:16px clamp(20px,5vw,40px); }
	body.menu-open .primary-nav{ display:flex; }
	.nav-social{ display:flex; flex-direction:row; flex-wrap:nowrap; gap:12px; align-items:center; align-self:stretch; justify-content:center; margin-top:8px; padding-top:16px; border-top:1px solid var(--line); }
	/* The hamburger is shown on every page, including the homepage whose menu is just "Our Story". */
}

/* -----------------------------------------------------------
   Footer
----------------------------------------------------------- */
.site-footer{ width:100%; background:var(--bg-2); padding:64px 0; }
.footlink{ display:block; font-size:14px; line-height:2.1; color:var(--ink-soft); font-weight:300; }
.socialdot{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; }
.footer-meta{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:20px; }

/* Power-by block and copyright line are centered (their parent has
   text-align:center); the social icons and Terms link pin to the right
   edge of that same row on desktop. On narrow screens there usually
   isn't room for both without overlapping the centered text, so they
   drop out of absolute position and stack below it instead. */
.footer-social{ position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; gap:12px; }
.footer-terms{ position:absolute; right:0; top:50%; transform:translateY(-50%); display:inline; font-size:12px; }
@media (max-width:600px){
	.footer-social{ position:static; transform:none; justify-content:center; margin-top:16px; }
	.footer-terms{ position:static; transform:none; display:block; margin-top:10px; }
}


/* -----------------------------------------------------------
   Stacked "who we serve" feature sections (Retail / Hospitality /
   Office / Clinic): a 10px gap between the hero slider and the first
   one, and between the last one and the footer.
----------------------------------------------------------- */
#usecase-retail{ margin-top:30px; }
#home-tagline{ margin-bottom:30px; }
/* Gap between each stacked section (Retail > Hospitality > Office > Clinic). */
#usecase-retail, #usecase-hospitality, #usecase-office, #usecase-clinic{ margin-bottom:40px; }

/* Scroll-in fade for the four stacked sections. js/main.js adds
   "reveal-pending" on load and swaps it for "is-revealed" the first time
   a section scrolls into view. Applied to the section's inner container
   rather than the section itself so it can't clash with the
   opacity/transition rules the home/one-pager swap puts on top-level
   sections. Without JS nothing is hidden. */
.usecase-reveal-pending > .elementor-container{ opacity:0; transform:translateY(24px); }
.usecase-reveal-pending.is-revealed > .elementor-container{ opacity:1; transform:none; transition:opacity .8s ease, transform .8s ease; }
@media (prefers-reduced-motion: reduce){
  .usecase-reveal-pending > .elementor-container{ opacity:1; transform:none; }
}

/* Spinner overlay shown by js/main.js while a nav link swaps sections. */
.page-spinner{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(241,234,224,.78);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .25s ease, visibility 0s linear .25s;
}
.page-spinner.is-on{ opacity:1; visibility:visible; pointer-events:auto; transition:opacity .25s ease; }
.page-spinner__ring{
  width:46px; height:46px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--accent);
  animation:page-spin .9s linear infinite;
}
@keyframes page-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .page-spinner__ring{ animation-duration:2.4s; }
}

/* Closing tagline section below Clinic (#home-tagline). */
#home-tagline{ padding:56px 20px; text-align:center; }
.home-tagline__rule{ display:block; width:34px; height:2px; background:var(--accent); margin:0 auto 26px; }
.home-tagline__text{
  font-family:"Lyon Display Web","Lyon Text Web","Times New Roman", serif;
  font-size:clamp(22px,3.4vw,32px); line-height:1.35; font-style:italic; font-weight:400;
  color:var(--ink); max-width:760px; margin:0 auto; letter-spacing:.2px;
}


/* -----------------------------------------------------------
   Phones: slider fits the visible screen exactly; use-case sections
   read Title > description (clamped, with "Read more") > image.
----------------------------------------------------------- */
.usecase-readmore{ display:none; }
@media (max-width:700px){
  /* Slider = exactly the screen left under the (compact) header. dvh
     tracks the phone's collapsing address bar; --hero-h from main.js is
     the fallback where dvh isn't supported. */
  .hero-slider .swiper,
  .hero-slider .swiper-wrapper,
  .hero-slider .swiper-slide{ height:min(var(--hero-h, 70vh), 64vw) !important; }
  .hero-slider .swiper-slide-image{ object-position:50% 50%; }

  /* Stack each use-case section: text column (title + description)
     always first, image column always last, whichever side the image
     sits on desktop. */
  #usecase-retail > .elementor-container,
  #usecase-hospitality > .elementor-container,
  #usecase-office > .elementor-container,
  #usecase-clinic > .elementor-container{ display:flex; flex-direction:column; }
  #usecase-retail .elementor-column,
  #usecase-hospitality .elementor-column,
  #usecase-office .elementor-column,
  #usecase-clinic .elementor-column{ width:100% !important; }
  #usecase-retail .elementor-column:has(.elementor-widget-heading),
  #usecase-hospitality .elementor-column:has(.elementor-widget-heading),
  #usecase-office .elementor-column:has(.elementor-widget-heading),
  #usecase-clinic .elementor-column:has(.elementor-widget-heading){ order:1; }
  #usecase-retail .elementor-column:not(:has(.elementor-widget-heading)),
  #usecase-hospitality .elementor-column:not(:has(.elementor-widget-heading)),
  #usecase-office .elementor-column:not(:has(.elementor-widget-heading)),
  #usecase-clinic .elementor-column:not(:has(.elementor-widget-heading)){ order:2; margin-top:16px; }

  #usecase-retail .elementor-widget-text-editor.is-collapsed .body-copy,
  #usecase-hospitality .elementor-widget-text-editor.is-collapsed .body-copy,
  #usecase-office .elementor-widget-text-editor.is-collapsed .body-copy,
  #usecase-clinic .elementor-widget-text-editor.is-collapsed .body-copy{
    display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;
  }
  #usecase-retail .elementor-widget-text-editor .body-copy,
  #usecase-hospitality .elementor-widget-text-editor .body-copy,
  #usecase-office .elementor-widget-text-editor .body-copy,
  #usecase-clinic .elementor-widget-text-editor .body-copy{ min-height:0; }
  .usecase-readmore{
    display:inline-block; margin:6px 0 0; padding:0 0 2px; background:none; border:0;
    border-bottom:1px solid var(--ink-soft); color:var(--ink); font:inherit;
    font-size:13px; letter-spacing:1px; text-transform:uppercase; cursor:pointer;
  }
}

/* -----------------------------------------------------------
   Hero slider controls ON the photo.
   The slide is 3:2 and the swiper is made exactly as wide as the
   photo (height x 1.5), centred -- so the arrows and the dots, which
   are positioned against the swiper, sit over the image instead of
   out in the empty margins (where they were invisible).
----------------------------------------------------------- */
.hero-slider .swiper{
  position:relative !important; /* Elementor sets static, which anchored the arrows to the full-width widget */
  width:min(100%, calc(1.5 * min(var(--hero-h, 640px), 64vw)));
  margin-left:auto;
  margin-right:auto;
}
.hero-slider .elementor-swiper-button{
  z-index:6;
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:rgba(0,0,0,.38);
  color:#fff; font-size:20px;
  box-shadow:0 1px 6px rgba(0,0,0,.25);
  transition:background .2s ease;
}
.hero-slider .elementor-swiper-button:hover{ background:rgba(0,0,0,.6); }
.hero-slider .elementor-swiper-button svg{ width:20px; height:20px; fill:currentColor; }
.hero-slider .elementor-swiper-button-prev{ left:14px !important; right:auto !important; }
.hero-slider .elementor-swiper-button-next{ right:14px !important; left:auto !important; }
.hero-dots{
  position:absolute; left:0; right:0; bottom:14px; z-index:6;
  display:flex; justify-content:center; align-items:center; gap:9px;
  pointer-events:none;
}
.hero-dots button{
  pointer-events:auto; cursor:pointer;
  width:10px; height:10px; padding:0; border-radius:50%;
  border:1.5px solid #fff; background:rgba(255,255,255,.35);
  box-shadow:0 1px 4px rgba(0,0,0,.35);
  transition:background .2s ease, transform .2s ease;
}
.hero-dots button.is-active{ background:#fff; transform:scale(1.25); }
@media (max-width:700px){
  .hero-slider .elementor-swiper-button{ width:34px; height:34px; }
  .hero-slider .elementor-swiper-button svg{ width:16px; height:16px; }
  .hero-slider .elementor-swiper-button-prev{ left:8px !important; }
  .hero-slider .elementor-swiper-button-next{ right:8px !important; }
  .hero-dots{ bottom:8px; gap:7px; }
  .hero-dots button{ width:8px; height:8px; }
}

/* Slider backdrop (the bands beside/around each 3:2 photo) = footer colour. */
.elementor-top-section:has(.hero-slider),
.hero-slider,
.hero-slider{ overflow:hidden; }
.hero-slider .swiper,
.hero-slider .swiper-slide{ background:transparent; }
.hero-slider .swiper{ z-index:1; }

/* Faded, blurred copy of the photo on screen, behind the slider and
   cross-faded by js/main.js whenever the slide changes. */
.hero-backdrop{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; background:var(--bg-2); }
.hero-backdrop__layer{
  position:absolute; inset:-40px;
  background-size:cover; background-position:center;
  filter:blur(28px) saturate(1.1);
  opacity:0; transition:opacity .9s ease;
}
.hero-backdrop__layer.is-on{ opacity:.45; }
/* Wash toward the footer colour so the photo stays a soft tint. */
.hero-backdrop::after{ content:""; position:absolute; inset:0; background:rgba(251,248,242,.35); }

/* ===========================================================
   HOME-2  (page slug "home-2"; body.is-home-2)
   A variant of the homepage: logo centred in the header, and the
   slider photos fill the full screen width at the ORIGINAL slider
   height (the space under the header). The normal homepage is
   untouched -- everything here is scoped to body.is-home-2.
=========================================================== */

/* -- Header: logo + wordmark centred -- */
body.is-home-2 .header-inner{ justify-content:center; }
body.is-home-2 .header-brand{ margin-left:auto; margin-right:auto; }
@media (min-width:601px){
	body.is-home-2 .primary-nav--single{ left:auto; right:clamp(16px,3vw,48px); }
}
@media (max-width:600px){
	/* Keep the brand centred; hamburger floats at the right edge (icon only). */
	body.is-home-2 .menu-toggle{ position:absolute; right:16px; top:50%; transform:translateY(-50%); margin:0; }
	body.is-home-2 .menu-toggle .navlink{ display:none; }
	body.is-home-2 .header-inner{ position:relative; }
}

/* -- Slider: edge-to-edge photos, height follows the photo -- */
body.is-home-2 .elementor-top-section:has(.hero-slider),
body.is-home-2 .elementor-top-section:has(.hero-slider) > .elementor-container,
body.is-home-2 .elementor-top-section:has(.hero-slider) .elementor-column,
body.is-home-2 .elementor-top-section:has(.hero-slider) .elementor-column-wrap,
body.is-home-2 .elementor-top-section:has(.hero-slider) .elementor-widget-wrap,
body.is-home-2 .hero-slider .elementor-widget-container{
	padding-left:0 !important; padding-right:0 !important; margin-left:0 !important; margin-right:0 !important;
	max-width:none !important;
}
body.is-home-2 .elementor-top-section:has(.hero-slider) > .elementor-container{ width:100% !important; }
body.is-home-2 .hero-slider{ width:100% !important; max-width:none !important; background:transparent; }
body.is-home-2 .hero-slider .swiper{ width:100% !important; margin-left:0; margin-right:0; }
/* No preset height: the slider is exactly as tall as the full-width photo (its natural aspect ratio), so nothing is cropped or letterboxed. */
body.is-home-2 .hero-slider .swiper,
body.is-home-2 .hero-slider .swiper-wrapper,
body.is-home-2 .hero-slider .swiper-slide,
body.is-home-2 .hero-slider .swiper-slide-inner{ height:auto !important; }
body.is-home-2 .hero-slider .swiper-slide-image{ width:100%; height:auto !important; object-fit:contain; display:block; }
body.is-home-2 .hero-backdrop{ display:none; }

/* -- home-2: the slider is replaced by a centred brand video -- */
body.is-home-2 .elementor-top-section:has(.hero-slider){ display:none !important; }
.home2-video{ width:100%; display:flex; justify-content:center; padding:10px 0 40px; margin:0; background:transparent; }
.home2-video__frame{ position:relative; width:calc(min(100%, 1140px) - 20px); /* same left/right edges as the sections below (Elementor's 1140px container with 10px gutters) */ aspect-ratio:16/9; background:#000; overflow:hidden; }
.home2-video__el{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.home2-video__sound{ position:absolute; right:12px; bottom:12px; width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(0,0,0,.42); }
.home2-video__sound:hover{ background:rgba(0,0,0,.65); }
.home2-video__sound .ico-on{ display:none; }
.home2-video__sound[aria-pressed="true"] .ico-on{ display:block; }
.home2-video__sound[aria-pressed="true"] .ico-off{ display:none; }

/* home-2: no gap between the video and the first section below it. */
body.is-home-2 #usecase-retail{ margin-top:0 !important; }

/* -- home-2: one combined lockup -- mountain on top, "HELLO Chérie / SWITZERLAND" directly beneath, same width, centred -- */
body.is-home-2 .wordmark{ flex-direction:column; align-items:stretch; gap:4px; }
body.is-home-2 .wordmark__text{ width:0; min-width:100%; }
body.is-home-2 .wordmark__text .wm-img{ width:100%; height:auto; }
@media (max-width:600px){
	body.is-home-2 .wordmark{ gap:3px; }
	body.is-home-2 .wordmark__text .wm-img{ height:auto; }
}

/* Normal homepage: the brand video sits right under the hero slider. It is
   rendered at the top of the page and moved there by js/main.js; until then
   (or without JS) it stays hidden so nothing jumps. */
.home2-video--after-slider:not(.is-placed){ display:none; }
.home2-video--after-slider + .elementor-top-section{ margin-top:0 !important; }

/* Hospitality: the photo is replaced by a video in exactly the same box
   (full column width, 3:2 like the photo, same rounded corners). */
.usecase-video{ display:block; width:100%; aspect-ratio:3 / 2; border-radius:3px; object-fit:cover; background:#000; }

/* Gold underline running under the whole use-case title text */
#usecase-retail .elementor-widget-heading,
#usecase-hospitality .elementor-widget-heading,
#usecase-office .elementor-widget-heading,
#usecase-clinic .elementor-widget-heading{ min-height:0; margin-bottom:20px; }
#usecase-retail .elementor-widget-heading .elementor-heading-title,
#usecase-hospitality .elementor-widget-heading .elementor-heading-title,
#usecase-office .elementor-widget-heading .elementor-heading-title,
#usecase-clinic .elementor-widget-heading .elementor-heading-title{
  display:inline-block;
  padding-bottom:10px;
  border-bottom:2px solid var(--accent);
}

/* -----------------------------------------------------------
   Cookie consent banner
   ----------------------------------------------------------- */
.footer-cookies{ position:absolute; left:0; top:50%; transform:translateY(-50%); display:inline; font-size:12px; }
.footer-cookies:hover{ color:var(--ink); }
@media (max-width:720px){ .footer-cookies{ position:static; transform:none; display:block; margin-top:6px; } }

.cc-backdrop{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(36,32,25,.55);
  opacity:0; transition:opacity .25s ease;
}
.cc-backdrop[hidden]{ display:none; }
.cc-backdrop.is-open{ opacity:1; }
.cc{
  width:min(680px,100%); max-height:calc(100vh - 40px); overflow:auto;
  background:var(--bg-2); color:var(--ink); border-radius:3px;
  padding:34px 40px 36px; text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.28);
}
.cc__brand{ display:flex; flex-direction:column; align-items:center; gap:6px; margin-bottom:22px; }
.cc__mountain{ display:block; height:44px; width:auto; }
.cc__wordmark{ display:block; width:150px; height:auto; }
.cc__sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.cc__text{ font-size:15px; line-height:1.7; color:var(--ink-soft); font-weight:300; margin:0 0 22px; }
.cc__text a{ color:var(--ink); font-weight:500; text-decoration:underline; text-underline-offset:3px; }
.cc__main, .cc__prefs{ display:flex; flex-direction:column; align-items:center; }
.cc__prefs[hidden]{ display:none; }
.cc__row{ align-self:stretch; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--line); text-align:left; cursor:pointer; }
.cc__row:first-child{ border-top:1px solid var(--line); }
.cc__row strong{ display:block; font-size:14px; font-weight:500; }
.cc__row small{ display:block; font-size:12.5px; line-height:1.45; color:var(--ink-soft); font-weight:300; margin-top:2px; }
.cc__row input{ flex:none; width:20px; height:20px; accent-color:var(--accent); cursor:pointer; }
.cc__row input:disabled{ cursor:not-allowed; opacity:.6; }
.cc__link{ font-size:13px; color:var(--ink); text-decoration:underline; text-underline-offset:3px; padding:6px 8px; margin:0 0 18px; }
.cc__prefs .cc__link{ margin-top:16px; }
.cc__link:hover{ color:var(--ink-soft); }
.cc__btn{
  font-size:13px; font-weight:500; padding:13px 34px; border-radius:2px;
  background:#3c3a37; color:#fff; border:1px solid #3c3a37; transition:background .15s ease;
}
.cc__btn:hover{ background:var(--ink); }
.cc__main[hidden], .cc__link[hidden], .cc__btn[hidden]{ display:none; }
.cc button:focus-visible, .cc a:focus-visible, .cc input:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:520px){
  .cc-backdrop{ padding:12px; }
  .cc{ padding:26px 22px 28px; }
  .cc__text{ font-size:14px; }
  .cc__btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){ .cc-backdrop{ transition:none; } }

/* -- home-2 header: "Our Story | Contact Us  [LOGO]  Partner | Products" -- */
.header-side{ display:none; }
@media (min-width:601px){
	body.is-home-2 .header-inner{ justify-content:center; gap:clamp(24px,4vw,64px); }
	body.is-home-2 .header-side{ display:flex; align-items:center; flex:1 1 0; min-width:0; gap:0; }
	body.is-home-2 .header-side--left{ justify-content:flex-end; }
	body.is-home-2 .header-side--right{ justify-content:flex-start; }
	body.is-home-2 .header-brand{ flex:none; margin-left:0; margin-right:0; }
	body.is-home-2 .header-side .navlink{ font-size:clamp(11px,1.1vw,13px); }
	/* spacing (no divider line) between the two links of each side */
	body.is-home-2 .header-side__sep{ display:block; width:clamp(24px,3.2vw,44px); height:1px; background:none; }
	/* the old single right-hand link and the dropdown are replaced on desktop */
	body.is-home-2 .primary-nav{ display:none; }
}

/* One-pager sections (Our Story, Contact Us, ...): Elementor gave them 88px
   top/bottom padding; tightened to 5px. */
#our-story, #contact-us, #partner, #products, #legal{ padding-top:5px !important; padding-bottom:5px !important; }

/* TEMPORARILY HIDDEN until the content is ready: Office and Clinic.
   Nothing is deleted -- remove this rule (or the two lines below) to show them again. */
#usecase-office,
#usecase-clinic{ display:none !important; }

/* -----------------------------------------------------------
   Partner section (template-parts/partners.php)
   ----------------------------------------------------------- */
.solmere-partners-widget{ width:100%; }
.partners{ max-width:900px; margin:28px auto 0; text-align:left; }
.partner{
  display:grid; grid-template-columns:220px 1fr; gap:clamp(24px,4vw,56px);
  align-items:center; padding:30px 0; border-top:1px solid var(--line);
}
.partner:last-child{ border-bottom:1px solid var(--line); }
.partner__logo{ display:flex; align-items:center; justify-content:center; }
.partner__logo img{ display:block; width:100%; max-width:200px; max-height:130px; height:auto; object-fit:contain; }
.partner__name{ font-size:22px; line-height:1.3; margin:0 0 14px; }
.partner__person{ margin:0 0 14px; }
.partner__person:last-child{ margin-bottom:0; }
.partner__who{ margin:0 0 3px; font-size:15px; color:var(--ink); }
.partner__who strong{ font-weight:500; }
.partner__who span{ color:var(--ink-soft); font-weight:300; }
.partner__who span::before{ content:"\2014"; margin:0 7px; }
.partner__line{ margin:0; font-size:14px; line-height:1.7; color:var(--ink-soft); font-weight:300; overflow-wrap:anywhere; }
.partner__label{ display:inline-block; min-width:42px; color:var(--ink-faint); }
.partner__line a{ color:var(--ink-soft); text-decoration:none; border-bottom:1px solid var(--line); transition:color .15s ease, border-color .15s ease; }
.partner__line a:hover{ color:var(--ink); border-bottom-color:var(--accent); }
.partner__sep{ color:var(--ink-faint); }
@media (max-width:640px){
  .partner{ grid-template-columns:1fr; gap:18px; padding:26px 0; }
  .partner__logo{ justify-content:flex-start; }
  .partner__logo img{ max-width:170px; max-height:100px; object-position:left center; }
  .partner__name{ font-size:20px; }
}
.partner__logo img[src*="versandzentrum"]{ max-width:170px; } /* small source file: keep it from being upscaled */

/* -----------------------------------------------------------
   Products section (template-parts/products.php)
   ----------------------------------------------------------- */
.solmere-partner-widget, .solmere-products-widget, .solmere-contact-us-widget, .solmere-legal-widget{ width:100%; }
.products{ max-width:1040px; margin:20px auto 0; text-align:left; }

.products__intro{ text-align:center; margin:0 auto 56px; max-width:640px; }
.products__eyebrow{ font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent); font-weight:500; margin:0 0 14px; }
.products__lead{ font-family:"Lyon Display Web","Lyon Text Web","Times New Roman",serif; font-size:clamp(26px,3.4vw,38px); line-height:1.2; margin:0 0 10px; color:var(--ink); }
.products__sub{ font-style:italic; font-size:17px; color:var(--ink-soft); margin:0; }
.products__sub::before, .products__sub::after{ content:""; display:inline-block; width:34px; height:1px; background:var(--accent); vertical-align:middle; margin:0 14px; }

.product{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; margin:0 0 72px; }
.product:nth-of-type(even){ grid-template-columns:1fr 1.2fr; }
.product:nth-of-type(even) .product__media{ position:relative; }
.product__media img{
  display:block; width:100%; height:auto;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1), opacity .9s ease;
}
.product:hover .product__media img{ transform:translateY(-8px) scale(1.02); }
/* entrance: box rises into place when the product scrolls into view */
.product.product--pre .product__media img{ opacity:0; transform:translateY(46px) scale(.92) rotate(-1.2deg); }
.product.product--pre .product__body{ opacity:0; transform:translateY(24px); }
.product.product--pre.is-in .product__media img{ opacity:1; transform:none; }
.product.product--pre.is-in .product__body{ opacity:1; transform:none; }
.product.product--pre.is-in:hover .product__media img{ transform:translateY(-8px) scale(1.02); }
.product .product__body{ transition:opacity .9s ease .25s, transform .9s cubic-bezier(.2,.7,.2,1) .25s; }

.product__tag{ font-size:12px; letter-spacing:2.5px; text-transform:uppercase; color:var(--accent); font-weight:500; margin:0 0 6px; }
.product__title{ display:flex; align-items:baseline; gap:12px; margin:0 0 4px; line-height:1; }
.product__num{ font-family:"Lyon Display Web","Lyon Text Web","Times New Roman",serif; font-size:clamp(64px,8vw,104px); font-weight:300; color:var(--ink); letter-spacing:-2px; }
.product__unit{ font-size:clamp(20px,2.2vw,26px); letter-spacing:4px; text-transform:uppercase; color:var(--ink-soft); font-weight:400; }
.product__spec{ margin:0 0 18px; font-size:13px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-faint); padding-bottom:16px; border-bottom:1px solid var(--line); }
.product__text{ margin:0 0 18px; font-size:15.5px; line-height:1.75; color:var(--ink-soft); font-weight:300; }
.product__feats{ list-style:none; margin:0 0 26px; padding:0; }
.product__feats li{ position:relative; padding:5px 0 5px 22px; font-size:14px; line-height:1.5; color:var(--ink-soft); font-weight:300; }
.product__feats li::before{ content:""; position:absolute; left:2px; top:13px; width:8px; height:8px; border:1px solid var(--accent); border-radius:50%; }
.product__cta{
  display:inline-block; font-size:12px; letter-spacing:2px; text-transform:uppercase; font-weight:500;
  padding:13px 30px; border:1px solid var(--ink); color:var(--ink); border-radius:2px; text-decoration:none;
  transition:background .2s ease, color .2s ease;
}
.product__cta:hover{ background:var(--ink); color:var(--bg-2); }

/* ---- Christmas Edition ---- */
.xmas{
  position:relative; overflow:hidden; display:grid; grid-template-columns:1.05fr 1fr; align-items:center; gap:clamp(20px,4vw,56px);
  margin:24px 0 30px; padding:clamp(34px,5vw,64px); border-radius:10px; color:#f6ecd8;
  background:
    radial-gradient(120% 90% at 85% 15%, rgba(214,178,106,.20), transparent 55%),
    radial-gradient(90% 80% at 10% 100%, rgba(150,30,40,.45), transparent 60%),
    linear-gradient(135deg,#12301f 0%,#1a3b28 45%,#4d1520 100%);
  box-shadow:0 26px 60px -22px rgba(20,12,8,.7), inset 0 0 0 1px rgba(214,178,106,.45);
}
.xmas::before{ content:""; position:absolute; inset:10px; border:1px solid rgba(214,178,106,.28); border-radius:6px; pointer-events:none; }
.xmas__snow{ position:absolute; inset:0; pointer-events:none; overflow:hidden; container-type:size; }
.xmas__snow i{
  position:absolute; top:-30px; left:var(--x); width:var(--s); height:var(--s); opacity:var(--o);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-12 -12 24 24'%3E%3Cg fill='none' stroke='white' stroke-width='1.1' stroke-linecap='round'%3E%3Cg transform='rotate(0)'%3E%3Cpath d='M0 0V-10M0-6.2L-3-9M0-6.2L3-9M0-3.2L-2.2-5.4M0-3.2L2.2-5.4'/%3E%3C/g%3E%3Cg transform='rotate(60)'%3E%3Cpath d='M0 0V-10M0-6.2L-3-9M0-6.2L3-9M0-3.2L-2.2-5.4M0-3.2L2.2-5.4'/%3E%3C/g%3E%3Cg transform='rotate(120)'%3E%3Cpath d='M0 0V-10M0-6.2L-3-9M0-6.2L3-9M0-3.2L-2.2-5.4M0-3.2L2.2-5.4'/%3E%3C/g%3E%3Cg transform='rotate(180)'%3E%3Cpath d='M0 0V-10M0-6.2L-3-9M0-6.2L3-9M0-3.2L-2.2-5.4M0-3.2L2.2-5.4'/%3E%3C/g%3E%3Cg transform='rotate(240)'%3E%3Cpath d='M0 0V-10M0-6.2L-3-9M0-6.2L3-9M0-3.2L-2.2-5.4M0-3.2L2.2-5.4'/%3E%3C/g%3E%3Cg transform='rotate(300)'%3E%3Cpath d='M0 0V-10M0-6.2L-3-9M0-6.2L3-9M0-3.2L-2.2-5.4M0-3.2L2.2-5.4'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 0 3px rgba(255,255,255,.55));
  animation:xmas-fall var(--d) linear var(--l) infinite;
}
@keyframes xmas-fall{
  0%{ transform:translate3d(0,0,0) rotate(0deg); }
  25%{ transform:translate3d(var(--w),25cqh,0) rotate(90deg); }
  50%{ transform:translate3d(calc(var(--w) * -0.6),50cqh,0) rotate(180deg); }
  75%{ transform:translate3d(var(--w),75cqh,0) rotate(270deg); }
  100%{ transform:translate3d(0,calc(100cqh + 40px),0) rotate(360deg); }
}
.xmas__body, .xmas__media{ position:relative; z-index:1; }
.xmas__tag{ font-size:12px; letter-spacing:3px; text-transform:uppercase; color:#e0c07a; margin:0 0 10px; font-weight:500; }
.xmas__title{ font-family:"Lyon Display Web","Lyon Text Web","Times New Roman",serif; font-size:clamp(34px,5vw,58px); line-height:1.05; font-weight:300; margin:0 0 8px; color:#fff7e6; }
.xmas__motto{ font-style:italic; font-size:19px; color:#e8d3a2; margin:0 0 18px; }
.xmas__text{ font-size:15.5px; line-height:1.75; font-weight:300; color:#efe3ca; margin:0 0 18px; max-width:46ch; }
.xmas__feats{ list-style:none; padding:0; margin:0 0 22px; display:flex; flex-wrap:wrap; gap:8px; }
.xmas__feats li{ font-size:12.5px; padding:7px 14px; border:1px solid rgba(224,192,122,.55); border-radius:30px; color:#f3e6c6; background:rgba(255,255,255,.04); }
.xmas__spec{ margin:0 0 24px; font-size:15px; letter-spacing:3px; text-transform:uppercase; color:#e0c07a; }
.xmas__spec strong{ font-family:"Lyon Display Web","Lyon Text Web","Times New Roman",serif; font-size:44px; font-weight:300; letter-spacing:0; color:#fff7e6; margin-right:6px; vertical-align:-4px; }
.product__cta--gold{ border-color:#e0c07a; color:#1b1006; background:#e0c07a; }
.product__cta--gold:hover{ background:#f2d89a; color:#1b1006; }
.xmas__media{ text-align:center; }
.xmas__media img{ display:inline-block; width:min(100%,430px); height:auto; filter:drop-shadow(0 26px 30px rgba(0,0,0,.55)); transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.xmas:hover .xmas__media img{ transform:translateY(-6px) rotate(-1deg) scale(1.02); }

@media (max-width:800px){
  .product, .product:nth-of-type(even){ grid-template-columns:1fr; gap:22px; margin-bottom:56px; }
  .product:nth-of-type(even) .product__media{ order:0; }
  .xmas{ grid-template-columns:1fr; padding:34px 22px 28px; }
  .xmas__media{ order:-1; }
  .xmas__media img{ width:min(78%,320px); }
  .products__sub::before, .products__sub::after{ width:18px; margin:0 8px; }
}
@media (prefers-reduced-motion:reduce){ .product.product--pre .product__media img, .product.product--pre .product__body{ opacity:1; transform:none; } .xmas__snow i{ animation:none; top:20%; } .product__media img, .xmas__media img{ transition:none; } }

/* Christmas Edition popup (shown when the Products page opens) */
.xmaspop{ position:fixed; inset:0; z-index:9000; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(14,10,6,.62); opacity:0; transition:opacity .5s ease; }
.xmaspop[hidden]{ display:none; }
.xmaspop.is-open{ opacity:1; }
.xmaspop__card{
  position:relative; overflow:hidden; width:min(820px,100%); display:grid; grid-template-columns:1fr 1.05fr; align-items:center; gap:clamp(12px,3vw,36px);
  padding:clamp(28px,4vw,48px); border-radius:10px; color:#f6ecd8;
  background:
    radial-gradient(120% 90% at 85% 15%, rgba(214,178,106,.22), transparent 55%),
    radial-gradient(90% 80% at 10% 100%, rgba(150,30,40,.45), transparent 60%),
    linear-gradient(135deg,#12301f 0%,#1a3b28 45%,#4d1520 100%);
  box-shadow:0 40px 90px -20px rgba(0,0,0,.7), inset 0 0 0 1px rgba(214,178,106,.5);
  transform:translateY(24px) scale(.96); transition:transform .6s cubic-bezier(.2,.7,.2,1);
}
.xmaspop.is-open .xmaspop__card{ transform:none; }
.xmaspop__media, .xmaspop__body{ position:relative; z-index:1; }
.xmaspop__media{ text-align:center; }
.xmaspop__media img{ width:min(100%,330px); height:auto; filter:drop-shadow(0 22px 24px rgba(0,0,0,.55)); }
.xmaspop__text{ font-size:15px; line-height:1.7; font-weight:300; color:#efe3ca; margin:0 0 22px; }
.xmaspop__later{ display:block; margin:14px 0 0; padding:0; background:none; border:0; color:#e0c07a; font:inherit; font-size:13px; letter-spacing:1px; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
.xmaspop__close{ position:absolute; top:10px; right:14px; z-index:2; width:36px; height:36px; border:0; background:none; color:#f3e6c6; font-size:30px; line-height:1; cursor:pointer; }
.xmaspop__close:hover{ color:#fff; }
@media (max-width:640px){
  .xmaspop__card{ grid-template-columns:1fr; text-align:center; padding:30px 22px 26px; }
  .xmaspop__media img{ width:min(60%,220px); }
  .xmaspop__text{ margin-bottom:18px; }
}
@media (prefers-reduced-motion:reduce){ .xmaspop, .xmaspop__card{ transition:none; } }

/* Products page: the brand video is replaced by a product slider in the same frame (same size) */
.home2-slider{ position:absolute; inset:0; display:none; container-type:size; background:transparent; color:#2a1d12; }
.home2-video.is-products .home2-slider{ display:block; }
.home2-video.is-products .home2-slider[hidden]{ display:block; }
.home2-video.is-products .home2-video__el, .home2-video.is-products .home2-video__sound{ display:none; }
.hs-slide{ position:absolute; inset:0; display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:3cqw; padding:3cqh 6cqw; opacity:0; visibility:hidden; transition:opacity .9s ease, visibility 0s linear .9s; overflow:hidden; }
.hs-slide.is-on{ opacity:1; visibility:visible; transition:opacity .9s ease; }
.hs-slide--xmas{
  color:#f6ecd8;
  background:
    radial-gradient(120% 90% at 85% 15%, rgba(214,178,106,.22), transparent 55%),
    radial-gradient(90% 80% at 10% 100%, rgba(150,30,40,.45), transparent 60%),
    linear-gradient(135deg,#12301f 0%,#1a3b28 45%,#4d1520 100%);
}
.hs-media{ position:relative; z-index:1; height:100%; min-height:0; display:flex; align-items:center; justify-content:center; }
.hs-media img{ display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; transform:translateY(14px) scale(.94); transition:transform 1.2s cubic-bezier(.2,.7,.2,1); }
.hs-slide.is-on .hs-media img{ transform:none; }
.hs-slide--xmas .hs-media img{ filter:drop-shadow(0 18px 20px rgba(0,0,0,.5)); max-height:92%; }
.hs-body{ position:relative; z-index:1; text-align:left; padding-right:4cqw; opacity:0; transform:translateY(12px); transition:opacity .8s ease .2s, transform .8s ease .2s; }
.hs-slide.is-on .hs-body{ opacity:1; transform:none; }
.hs-tag{ margin:0 0 .6cqh; font-size:clamp(9px,1.35cqw,13px); letter-spacing:.2em; text-transform:uppercase; color:var(--accent); font-weight:500; }
.hs-slide--xmas .hs-tag{ color:#e0c07a; }
.hs-title{ margin:0 0 1.4cqh; display:flex; align-items:baseline; gap:1.2cqw; line-height:1; font-family:"Lyon Display Web","Lyon Text Web","Times New Roman",serif; font-weight:300; color:inherit; }
.hs-num{ font-size:clamp(40px,10cqw,120px); letter-spacing:-.02em; }
.hs-unit{ font-size:clamp(12px,2.2cqw,26px); letter-spacing:.2em; text-transform:uppercase; font-family:inherit; }
.hs-slide--xmas .hs-title{ display:block; font-size:clamp(26px,5.4cqw,64px); color:#fff7e6; }
.hs-text{ margin:0 0 2.4cqh; font-size:clamp(11px,1.65cqw,16px); line-height:1.65; font-weight:300; max-width:34ch; opacity:.85; }
.hs-cta{ display:inline-block; padding:.9em 2.2em; border:1px solid currentColor; color:inherit; font-size:clamp(9px,1.3cqw,12px); letter-spacing:.2em; text-transform:uppercase; text-decoration:none; transition:background .25s,color .25s; }
.hs-cta:hover{ background:#2a1d12; color:#fbf8f2; }
.hs-slide--xmas .hs-cta{ background:#e0c07a; border-color:#e0c07a; color:#1b1006; }
.hs-slide--xmas .hs-cta:hover{ background:#f2d89a; color:#1b1006; }
.hs-nav{ position:absolute; top:50%; z-index:3; width:40px; height:40px; margin-top:-20px; border-radius:50%; border:1px solid rgba(60,40,20,.25); background:rgba(255,255,255,.75); color:#2a1d12; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter:blur(4px); transition:background .2s; }
.hs-nav:hover{ background:#fff; }
.hs-prev{ left:12px; } .hs-next{ right:12px; }
.hs-dots{ position:absolute; left:0; right:0; bottom:12px; z-index:3; display:flex; justify-content:center; gap:8px; }
.hs-dots button{ width:9px; height:9px; padding:0; border-radius:50%; border:1px solid rgba(60,40,20,.5); background:rgba(255,255,255,.6); cursor:pointer; }
.hs-dots button[aria-selected="true"]{ background:var(--accent); border-color:var(--accent); width:22px; border-radius:6px; }
.home2-slider .xmas__snow{ z-index:0; }
@media (max-width:640px){
  .hs-slide{ grid-template-columns:1fr 1fr; gap:2cqw; padding:3cqh 12cqw 6cqh 8cqw; }
  .hs-text, .hs-cta{ display:none; }
  .hs-nav{ width:30px; height:30px; margin-top:-15px; }
  .hs-prev{ left:6px; } .hs-next{ right:6px; }
  .hs-dots{ bottom:6px; } .hs-dots button{ width:7px; height:7px; } .hs-dots button[aria-selected="true"]{ width:16px; }
}
@media (prefers-reduced-motion:reduce){ .hs-slide, .hs-media img, .hs-body{ transition:none; } }

/* =========================================================
   Enquiry popup (inc/enquiry.php + js/enquiry.js)
   ========================================================= */
html.enq-lock, html.enq-lock body{ overflow:hidden; }
.enq-backdrop{
  position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center;
  padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background:rgba(24,18,12,.62); opacity:0; transition:opacity .3s ease; overscroll-behavior:contain;
}
.enq-backdrop[hidden]{ display:none; }
.enq-backdrop.is-open{ opacity:1; }
.enq{
  position:relative; width:min(680px,100%); max-height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  background:var(--bg-2); color:var(--ink); border-radius:6px; padding:clamp(26px,4.5vw,46px);
  box-shadow:0 30px 80px -10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(139,106,70,.25);
  transform:translateY(18px) scale(.98); transition:transform .45s cubic-bezier(.2,.7,.2,1);
}
.enq-backdrop.is-open .enq{ transform:none; }
.enq__close{ position:absolute; top:8px; right:10px; width:44px; height:44px; border:0; background:none; font-size:32px; line-height:1; color:var(--ink-soft); cursor:pointer; }
.enq__close:hover{ color:var(--ink); }
.enq__eyebrow{ margin:0 0 6px; font-size:12px; letter-spacing:.25em; text-transform:uppercase; color:var(--accent); font-weight:500; }
.enq__title{ margin:0 0 8px; font-family:"Lyon Display Web","Lyon Text Web","Times New Roman",serif; font-weight:300; font-size:clamp(26px,4.4vw,38px); line-height:1.1; color:var(--ink); }
.enq__lead{ margin:0 0 22px; font-size:15px; line-height:1.65; color:var(--ink-soft); font-weight:300; }
.enq__grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.enq__f{ display:flex; flex-direction:column; gap:6px; min-width:0; text-align:left; }
.enq__f--full{ grid-column:1 / -1; }
.enq__f > span{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.enq__f input, .enq__f select, .enq__f textarea{
  width:100%; box-sizing:border-box; font:inherit; font-size:16px; /* 16px stops iOS zoom-on-focus */ color:var(--ink);
  padding:12px 14px; min-height:46px; background:#fff; border:1px solid rgba(60,40,20,.28); border-radius:3px; appearance:none; -webkit-appearance:none;
}
.enq__f select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%238b6a46' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; padding-right:38px; }
.enq__f textarea{ resize:vertical; min-height:110px; }
.enq__f input:focus, .enq__f select:focus, .enq__f textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent); }
.enq__f.is-invalid input, .enq__f.is-invalid select, .enq__f.is-invalid textarea{ border-color:#b3261e; background:#fff7f6; }
.enq__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.enq__consent{ display:flex; gap:12px; align-items:flex-start; margin:18px 0 6px; font-size:13.5px; line-height:1.55; color:var(--ink-soft); text-align:left; cursor:pointer; }
.enq__consent input{ flex:none; width:22px; height:22px; margin-top:1px; accent-color:var(--accent); }
.enq__consent a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; margin-left:4px; }
.enq__consent.is-invalid{ color:#b3261e; }
.enq__msg{ margin:12px 0 0; font-size:14px; color:#b3261e; }
.enq__msg[hidden]{ display:none; }
.enq__submit{ display:inline-block; margin-top:18px; min-height:48px; padding:0 2.6em; background:#3c3a37; color:#fff; border:1px solid #3c3a37; border-radius:2px; font:inherit; font-size:13px; letter-spacing:.18em; text-transform:uppercase; cursor:pointer; transition:background .2s; }
.enq__submit:hover{ background:var(--ink); }
.enq__submit:disabled{ opacity:.6; cursor:wait; }
.enq__done{ text-align:center; padding:20px 0 6px; }
.enq__done[hidden], .enq__form[hidden]{ display:none; }
.enq__done:focus{ outline:none; }
.enq button:focus-visible, .enq a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
@media (max-width:620px){
  .enq-backdrop{ padding:0; align-items:flex-end; }
  .enq{ width:100%; max-height:94dvh; max-height:94vh; border-radius:14px 14px 0 0; padding:26px 18px calc(24px + env(safe-area-inset-bottom)); }
  .enq__grid{ grid-template-columns:1fr; gap:12px; }
  .enq__submit{ width:100%; }
}
@supports (height:1dvh){ @media (max-width:620px){ .enq{ max-height:94dvh; } } }
@media (prefers-reduced-motion:reduce){ .enq-backdrop, .enq{ transition:none; } }

/* Products slider blends into the section: no black frame / light panel behind the boxes */
.home2-video.is-products .home2-video__frame{ background:transparent; }

/* Products list: two showcases per row, same width as the slider above */
.products{ max-width:none; width:100%; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:clamp(24px,4vw,56px); row-gap:clamp(40px,6vw,72px); }
.products__intro, .products .xmas{ grid-column:1 / -1; }
.products .xmas{ margin:0; }
.products__intro{ margin-bottom:0; }
.products .product, .products .product:nth-of-type(even){ display:flex; flex-direction:column; align-items:stretch; gap:18px; margin:0; grid-template-columns:none; }
.products .product:nth-of-type(even) .product__media{ order:0; }
.products .product__media img{ width:100%; height:auto; }
.products .product__body{ text-align:left; }
.products .product__num{ font-size:clamp(52px,6vw,84px); }
.products .product__feats li{ font-size:13.5px; padding-top:4px; padding-bottom:4px; }
.products .product__feats li::before{ top:11px; }
@media (max-width:720px){
  .products{ grid-template-columns:1fr; }
}

/* Products grid: cards in a row are equal height, Enquire buttons sit on the same line */
.products .product{ height:100%; }
.products .product__body{ flex:1 1 auto; display:flex; flex-direction:column; }
.products .product__feats{ margin-bottom:22px; }
.products .product .product__cta{ margin-top:auto; align-self:flex-start; }

/* Slider uses the same motion as the product showcase: the box rises, scales and settles when its slide appears; lifts on hover */
.hs-media img{ transform:none; transition:transform 1.1s cubic-bezier(.2,.7,.2,1); }
.hs-slide.is-on .hs-media img{ animation:hs-rise 1.1s cubic-bezier(.2,.7,.2,1) backwards; }
.hs-slide.is-on:hover .hs-media img{ transform:translateY(-8px) scale(1.02); }
.hs-body{ transform:none; transition:opacity .9s ease .25s; }
.hs-slide.is-on .hs-body{ animation:hs-rise-body .9s cubic-bezier(.2,.7,.2,1) .25s backwards; }
@keyframes hs-rise{ from{ opacity:0; transform:translateY(46px) scale(.92) rotate(-1.2deg); } to{ opacity:1; transform:none; } }
@keyframes hs-rise-body{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .hs-slide.is-on .hs-media img, .hs-slide.is-on .hs-body{ animation:none; } }

/* Enquiry: reCAPTCHA (invisible). The floating badge is hidden; the required notice is shown in the form instead. */
.grecaptcha-badge{ visibility:hidden !important; }
.enq__rcnote{ margin:14px 0 0; font-size:12px; line-height:1.5; color:var(--ink-soft); text-align:left; }
.enq__rcnote a{ color:var(--ink-soft); text-decoration:underline; text-underline-offset:2px; }


/* ==========================================================================
   Contact Us page: inline contact form (template-parts/contact.php).
   Re-uses the .enq__* field styles of the enquiry popup.
   ========================================================================== */
.contactform{ width:100%; max-width:720px; margin:6px auto 0; text-align:left; }
.contactform__lead{ margin:0 auto 26px; max-width:560px; text-align:center; font-size:16px; line-height:1.7; color:var(--ink-soft); font-weight:300; }
.contactform .enq__submit{ margin-top:20px; }
.contactform .enq__done{ text-align:center; padding:26px 0 10px; }
.contactform .enq__done .enq__title{ font-size:clamp(26px,4.4vw,38px); }
@media (max-width:620px){
  .contactform__lead{ font-size:15px; margin-bottom:20px; }
  .contactform .enq__grid{ grid-template-columns:1fr; gap:12px; }
  .contactform .enq__submit{ width:100%; }
}


/* ==========================================================================
   Footer links: "Legal" + "Terms and Conditions" grouped on the right.
   ========================================================================== */
.footer-links{ position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; align-items:center; gap:22px; }
.footer-links .footlink{ position:static; transform:none; display:inline; font-size:12px; line-height:1.6; margin:0; }
.footer-links .footlink:hover{ color:var(--ink); }
@media (max-width:720px){
  .footer-links{ position:static; transform:none; justify-content:center; margin-top:8px; }
}

/* ==========================================================================
   Legal page (template-parts/legal.php): certifications and reference numbers.
   ========================================================================== */
.legalpage{ width:100%; max-width:900px; margin:28px auto 0; text-align:left; }
.legalpage__lead{ margin:0 auto 34px; max-width:600px; text-align:center; font-size:16px; line-height:1.7; color:var(--ink-soft); font-weight:300; }
.legalblock{ padding:34px 0; border-top:1px solid var(--line); }
.legalblock:last-of-type{ border-bottom:1px solid var(--line); }
.legalblock__tag{ margin:0 0 6px; font-size:12px; letter-spacing:.25em; text-transform:uppercase; color:var(--accent); font-weight:500; }
.legalblock__title{ margin:0 0 10px; font-size:clamp(22px,3.4vw,28px); line-height:1.25; }
.legalblock__lead{ margin:0 0 22px; max-width:680px; font-size:15px; line-height:1.7; color:var(--ink-soft); font-weight:300; }
.legalblock__logos{ list-style:none; margin:0 0 26px; padding:0; display:flex; flex-wrap:wrap; align-items:stretch; gap:14px; }
.legallogo{ display:flex; align-items:center; justify-content:center; background:#fff; border:1px solid var(--line-2); border-radius:4px; padding:12px 16px; height:104px; }
.legalpage .legallogo img{ display:block !important; height:80px !important; width:auto !important; max-width:200px !important; object-fit:contain; margin:0 !important; }
.legalpage .legallogo.wide img{ max-width:230px !important; }
.legalblock__rows{ margin:0; display:block; }
.legalrow{ display:grid; grid-template-columns:230px 1fr; gap:6px 24px; padding:11px 0; border-top:1px solid var(--line-2); }
.legalrow:first-child{ border-top:0; }
.legalrow dt{ margin:0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); padding-top:3px; }
.legalrow dd{ margin:0; font-size:15px; line-height:1.6; color:var(--ink); overflow-wrap:anywhere; }
.legalrow__ref{ font-variant-numeric:tabular-nums; letter-spacing:.04em; font-weight:500; }
.legalblock__verify{ margin:16px 0 0; font-size:13.5px; line-height:1.7; color:var(--ink-soft); font-weight:300; }
.legalblock__verify a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; }
.legalpage__note{ margin:22px 0 0; text-align:center; font-size:12.5px; color:var(--ink-faint); line-height:1.6; }
@media (max-width:640px){
  .legalpage__lead{ font-size:15px; margin-bottom:22px; }
  .legalblock{ padding:26px 0; }
  .legalrow{ grid-template-columns:1fr; gap:2px; padding:10px 0; }
  .legallogo{ height:84px; padding:10px 12px; }
  .legalpage .legallogo img{ height:64px !important; max-width:150px !important; }
  .legalpage .legallogo.wide img{ max-width:180px !important; }
}

/* Legal page: company identity block at the top. */
.legalcompany{ text-align:center; margin:0 auto 30px; padding:0 0 28px; border-bottom:1px solid var(--line); }
.legalcompany__name{ margin:0 0 6px; font-size:clamp(24px,3.8vw,32px); line-height:1.2; }
.legalcompany__line{ margin:0; font-size:15px; line-height:1.8; color:var(--ink-soft); font-weight:300; }
.legalcompany__label{ color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; font-size:12px; margin-right:6px; }
.legalcompany__line .legalrow__ref{ color:var(--ink); }
.legalcompany__partner{ margin:14px 0 0; font-size:15px; color:var(--ink-soft); font-weight:300; }
.legalcompany__partner strong{ color:var(--ink); font-weight:500; }

/* Contact Us: company addresses + phone above the form. */
.contactinfo{ max-width:720px; margin:6px auto 30px; text-align:center; }
.contactinfo__cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.contactinfo__card{ font-style:normal; background:#fff; border:1px solid var(--line-2); border-radius:4px; padding:20px 18px; font-size:15px; line-height:1.75; color:var(--ink-soft); font-weight:300; }
.contactinfo__name{ display:block; margin-bottom:4px; font-weight:500; font-size:16px; color:var(--ink); }
.contactinfo__tel{ margin:18px 0 0; font-size:15px; color:var(--ink-soft); font-weight:300; }
.contactinfo__label{ color:var(--ink-faint); text-transform:uppercase; letter-spacing:.08em; font-size:12px; margin-right:6px; }
.contactinfo__tel a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); transition:border-color .15s ease; }
.contactinfo__tel a:hover{ border-bottom-color:var(--accent); }
@media (max-width:620px){
  .contactinfo__cards{ grid-template-columns:1fr; gap:12px; }
}


/* ==========================================================================
   Language drop-down (flag + short code) -- inc/i18n.php
   ========================================================================== */
.langsw{ position:relative; font-size:12px; letter-spacing:.12em; line-height:1; }
.langsw__dd{ position:relative; }
.langsw__btn{ display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink); cursor:pointer; list-style:none; user-select:none; transition:border-color .2s ease, background .2s ease; }
.langsw__btn::-webkit-details-marker{ display:none; }
.langsw__btn::marker{ content:''; }
.langsw__btn:hover, .langsw__dd[open] > .langsw__btn{ border-color:var(--accent); background:var(--bg-2); }
.langsw__btn:focus-visible, .langsw__list a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.langsw__flag{ display:block; width:20px; height:auto; flex:0 0 auto; border-radius:2px; }
.langsw__code{ font-weight:500; }
.langsw__chev{ flex:0 0 auto; color:var(--ink-soft); transition:transform .2s ease; }
.langsw__dd[open] .langsw__chev{ transform:rotate(180deg); }
.langsw__list{ position:absolute; right:0; top:calc(100% + 6px); z-index:60; margin:0; padding:6px; min-width:170px; list-style:none; background:var(--bg-2); border:1px solid var(--line); border-radius:12px; box-shadow:0 10px 28px rgba(36,32,25,.14); }
.langsw__list li{ margin:0; padding:0; }
.langsw__list a{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; color:var(--ink-soft); text-decoration:none; }
.langsw__list a:hover{ background:var(--bg); color:var(--ink); }
.langsw__list a.is-current{ color:var(--ink); font-weight:600; background:var(--bg); }
.langsw__list .langsw__code{ min-width:20px; }
.langsw__list .langsw__name{ margin-left:auto; letter-spacing:.02em; font-size:12px; color:var(--ink-faint); }
.langsw--header{ display:none; }
.langsw--menu{ display:none; }
.footer-lang{ margin-top:18px; display:flex; justify-content:center; }
@media (min-width:601px){
	.langsw--header{ display:block; position:absolute; right:clamp(16px,3vw,48px); top:50%; transform:translateY(-50%); }
	/* leave room for the language drop-down at the right-hand end of the header */
	.primary-nav:not(.primary-nav--single){ right:calc(clamp(16px,3vw,48px) + 110px); }
}
/* Tablets: the drop-down sits on a thin line above the menu so longer French / German words still fit */
@media (min-width:601px) and (max-width:1100px){
	.langsw--header{ top:50%; transform:translateY(-50%); }
	.langsw--header .langsw__btn{ padding:5px 8px; gap:6px; }
	.langsw--header{ font-size:11px; }
	.primary-nav:not(.primary-nav--single){ right:calc(clamp(16px,3vw,48px) + 92px); gap:20px; }
	.primary-nav:not(.primary-nav--single) .navlink{ font-size:11px; letter-spacing:.08em; }
}
@media (max-width:600px){
	/* inside the opened mobile menu the list unfolds in place (no floating box to clip) */
	.langsw--menu{ display:flex; align-self:stretch; justify-content:center; margin-top:6px; padding-top:16px; border-top:1px solid var(--line); }
	.langsw--menu .langsw__dd{ width:min(260px,100%); }
	.langsw--menu .langsw__btn{ justify-content:center; width:100%; padding:10px 14px; font-size:13px; }
	.langsw--menu .langsw__list{ position:static; margin-top:8px; box-shadow:none; min-width:0; }
	.langsw--menu .langsw__list a{ padding:11px 10px; font-size:13px; }
	.langsw--menu + .nav-social{ margin-top:0; border-top:0; padding-top:4px; }
}