/* Site chrome and shared primitives: base type, buttons, sections, header,
   navigation panels, search, the mobile drawer and the footer.
   Behaviour states come from assets/wp-behaviors (sticky-header sets
   data-scrolled; popover panels are hidden by JavaScript, opened by their
   trigger, and stay usable on hover or keyboard focus without JavaScript). */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 16px/1.62 var(--font-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
button,input,textarea,select{font:inherit}
a{color:inherit;text-decoration:none}
button{cursor:pointer}
h1,h2,h3,h4,p{margin:0}
h1,h2,h3,.brand,.btn,.eyebrow,.primary-nav{font-family:var(--font-display)}
h2{font-size:clamp(2rem,3.45vw,3rem);line-height:1.16;letter-spacing:-.045em}
h3{font-size:1.25rem;line-height:1.25;letter-spacing:-.027em}
:focus-visible{outline:3px solid var(--color-focus);outline-offset:3px}

.container{width:min(calc(100% - var(--layout-gutter)),var(--layout-width));margin-inline:auto}
.site-main{padding-block:var(--space-xl)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:0;z-index:40}
.skip-link:focus{left:var(--space-md);top:var(--space-xs);padding:10px 14px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-control)}

/* ---------- Buttons ---------- */
.btn,.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:51px;padding:14px 24px;border:1px solid transparent;border-radius:var(--radius-control);font-size:.88rem;font-weight:700;line-height:1.2;white-space:nowrap;transition:transform .22s,background .22s,border-color .22s,color .22s}
.btn:hover,.button:hover{transform:translateY(-2px)}
.btn--primary,.button{background:var(--clay);color:#fff}
.btn--primary:hover,.button:hover{background:var(--clay-dark)}
.btn--secondary{border-color:#aca096;color:var(--ink);background:rgb(255 255 255 / 50%)}
.btn--secondary:hover{border-color:var(--ink);background:var(--white)}
.btn--sm{min-height:42px;padding:11px 17px;font-size:.75rem}
.btn--full{width:100%}
.arrow{font-size:1.05em;line-height:1}
.text-link{font-family:var(--font-display);font-size:.86rem;font-weight:800;border-bottom:1px solid currentColor;padding-bottom:3px}
.text-link:hover{color:var(--clay)}

/* ---------- Sections and shared headings ---------- */
.section{padding:var(--space-section) 0}
.section--cream{background:var(--cream)}
.section--surface{background:var(--white)}
.section--clay{background:#ead6c3}
.eyebrow{display:block;font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:var(--clay);margin-bottom:17px}
.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:37px}
.section-heading h2{max-width:720px}
.section-heading p{max-width:365px;color:var(--muted)}
.section-foot{margin-top:22px;text-align:center}
/* A band that closes with its "see the whole page" link needs less air below it
   than a full band gap: the link already ends the thought. */
.section:has(.section-foot){padding-bottom:52px}

/* An image slot whose photograph has not been supplied yet: a tinted panel
   that keeps the layout honest instead of standing in a picture. */
.media-slot{position:relative;display:grid;place-items:center;background:var(--cream);overflow:hidden;border-radius:var(--radius-card)}
.media-slot__label{padding:0 18px;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center}
.media-slot--sage{background:var(--sage)}
.media-slot--blue{background:var(--blue)}
.media-slot--apricot{background:#efd6bf}
.media-slot--lilac{background:var(--lilac)}
.media-slot--cream{background:var(--cream)}
.media-slot img{width:100%;height:100%;object-fit:cover}
/* The empty slot itself: the panel an unsupplied photograph leaves behind. Its
   aspect ratio stays overridable, so band rules such as .home-card .media-slot
   or .home-about__media .media-slot keep deciding the box. */
.media-slot--empty{aspect-ratio:var(--media-slot-ratio,4/3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:14px;text-align:center;box-shadow:inset 0 0 0 1px rgb(255 255 255 / 55%)}
.media-slot__mark{color:var(--clay);opacity:.5;line-height:0}
.media-slot__mark svg{display:block;width:22px;height:22px}
.media-slot__caption{display:flex;flex-direction:column;gap:4px}
.media-slot__brief{font-family:var(--font-display);font-size:.8rem;font-weight:700;letter-spacing:-.01em;color:var(--muted)}
.media-slot__size{font-size:.6rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);opacity:.72}

/* ---------- Positioning line ---------- */
.topline{background:var(--cream);border-bottom:1px solid var(--line);font-size:.73rem;color:var(--muted)}
.topline__inner{display:flex;justify-content:space-between;gap:20px;padding-block:8px}
.topline__claim{font-weight:600;color:var(--ink)}
.topline__link{font-weight:700;border-bottom:1px solid currentColor}
.topline__link:hover{color:var(--clay)}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:30;background:rgb(250 248 244 / 97%);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.site-header[data-scrolled="true"]{box-shadow:0 2px 14px rgb(76 55 39 / 10%)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--layout-header-height)}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand__logo{display:block;height:46px;width:auto;max-width:min(180px,46vw);mix-blend-mode:multiply}
.brand__text{display:flex;flex-direction:column;line-height:.92}
.brand__name{font-family:var(--font-display);font-size:1.16rem;font-weight:800;letter-spacing:-.075em;color:var(--ink)}
.brand__tagline{margin-top:7px;font-size:.5rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}
.header-actions{display:flex;align-items:center;gap:16px}
.header-cta{min-height:42px;padding:11px 17px;font-size:.75rem}

/* ---------- Primary navigation ---------- */
.primary-nav__list{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0;font-size:.78rem;font-weight:700}
.primary-nav__item{position:relative;display:flex;align-items:center}
.primary-nav__link{white-space:nowrap}
.primary-nav__link:hover{color:var(--clay)}
.primary-nav__toggle{display:inline-flex;align-items:center;justify-content:center;width:22px;height:26px;margin-inline-start:2px;padding:0;border:0;background:transparent;color:var(--muted)}
.primary-nav__toggle:hover{color:var(--clay)}
.primary-nav__chevron{display:block;width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-1px,-1px)}

/* ---------- Panels (popover) ---------- */
.panel{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--radius-card);box-shadow:0 18px 40px rgb(76 55 39 / 12%)}
.panel--mega{width:min(720px,calc(100vw - 40px));padding:var(--space-lg);display:grid;grid-template-columns:repeat(2,minmax(210px,1fr));gap:var(--space-lg)}
.panel--menu{min-width:250px;padding:var(--space-md) var(--space-md) var(--space-sm)}
.panel__caption{grid-column:1/-1;padding-bottom:var(--space-sm);border-bottom:1px solid var(--line-soft)}
.panel__eyebrow{display:block;font-size:.66rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--clay)}
.panel__lead{display:block;margin-top:5px;font-family:var(--font-display);font-size:1.05rem;letter-spacing:-.02em}
.panel__heading{display:block;margin:0 0 var(--space-xs);font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
a.panel__heading:hover{color:var(--clay)}
.panel__list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.panel__link{display:block;font-size:.86rem;font-weight:600}
.panel__link:hover{color:var(--clay)}
.panel__link--note{display:flex;flex-direction:column;gap:2px}
.panel__note{font-size:.72rem;font-weight:400;color:var(--muted);line-height:1.4}
.panel__row{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--space-md);list-style:none;margin:0;padding:var(--space-sm) 0 0;border-top:1px solid var(--line-soft)}
.panel__link--strong{font-weight:800}

.primary-nav__item--panel > .panel--mega,
.primary-nav__item--panel > .panel--menu,
.site-search > .panel{display:none;position:absolute;top:calc(100% + 14px);left:0;z-index:35}
.primary-nav__item--panel:hover > .panel--mega,
.primary-nav__item--panel:focus-within > .panel--mega,
[data-trigger][aria-expanded="true"] + .panel--mega{display:grid}
.primary-nav__item--panel:hover > .panel--menu,
.primary-nav__item--panel:focus-within > .panel--menu,
[data-trigger][aria-expanded="true"] + .panel--menu,
.site-search:hover > .panel,
.site-search:focus-within > .panel,
[data-trigger][aria-expanded="true"] + .site-search__panel{display:block}

/* ---------- Search ---------- */
.site-search{position:relative;display:flex;align-items:center}
.site-search__toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border:0;background:transparent;color:var(--ink)}
.site-search__toggle:hover{color:var(--clay)}
.site-search > .panel{right:0;left:auto}
.site-search__panel{width:min(88vw,360px);padding:var(--space-md)}
.site-search__label{display:block;font-size:.75rem;font-weight:700;color:var(--muted);margin-bottom:8px}
.site-search__row{display:flex;gap:var(--space-xs)}
.site-search__input{flex:1;min-width:0;padding:10px 12px;border:1px solid #cfc6bc;border-radius:8px;background:var(--white);font-size:.85rem}
.site-search__submit{min-height:44px;padding:10px 18px;font-size:.78rem}
.site-search--page{width:100%}
.site-search--page > .site-search__panel{display:block;position:static;width:min(100%,520px);margin-bottom:var(--space-lg)}

/* ---------- Mobile drawer ---------- */
.nav-drawer{display:none}
.nav-drawer__open{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;background:transparent;color:var(--ink)}
.nav-drawer__bars,.nav-drawer__bars::before,.nav-drawer__bars::after{display:block;width:20px;height:2px;background:currentColor;content:""}
.nav-drawer__bars{position:relative}
.nav-drawer__bars::before{position:absolute;top:-6px}
.nav-drawer__bars::after{position:absolute;top:6px}
.nav-drawer__dialog{width:min(92vw,380px);max-height:100vh;margin:0 0 0 auto;padding:var(--space-md);border:0;background:var(--canvas);color:var(--ink)}
.nav-drawer__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-sm)}
.nav-drawer__title{font-family:var(--font-display);font-size:1rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.nav-drawer__close{width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:transparent;font-size:1.2rem;line-height:1}
.drawer-nav__group{border-bottom:1px solid var(--line)}
.drawer-nav__summary{padding:14px 2px;font-family:var(--font-display);font-size:1rem;font-weight:700;cursor:pointer;list-style:none}
.drawer-nav__summary::-webkit-details-marker{display:none}
.drawer-nav__summary::after{content:"⌄";float:right;color:var(--muted)}
.drawer-nav__group[open] .drawer-nav__summary::after{content:"⌃"}
.drawer-nav__list{list-style:none;margin:0 0 var(--space-sm);padding:0 0 0 2px;display:grid;gap:8px;font-size:.86rem}
.drawer-nav__hub{font-weight:700}
.drawer-nav__link{display:block;padding:14px 2px;border-bottom:1px solid var(--line);font-family:var(--font-display);font-weight:700}

/* ---------- Footer ---------- */
.site-footer{margin-top:var(--space-2xl);background:var(--espresso);color:#f8f3ed;padding:66px 0 24px}
.site-footer__inner{display:grid;grid-template-columns:1.5fr repeat(5,minmax(110px,1fr));gap:32px;padding-bottom:48px}
.site-footer__name{font-family:var(--font-display);font-size:1.15rem;font-weight:800;letter-spacing:-.06em}
.site-footer__tagline{margin-top:16px;max-width:280px;font-size:.78rem;line-height:1.6;color:#cfc4b7}
.site-footer__contact{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:7px;font-size:.76rem;color:#cfc4b7}
.site-footer__contact a:hover{color:#fff}
.site-footer__address{max-width:280px;line-height:1.5}
.site-footer__cta{margin-top:22px;min-height:42px;padding:11px 17px;font-size:.75rem}
.site-footer__heading{margin:0 0 16px;font-family:var(--font-display);font-size:.78rem;font-weight:700}
.site-footer__list{list-style:none;margin:0;padding:0}
.site-footer__list li{margin-bottom:9px}
.site-footer__list a{font-size:.76rem;color:#cfc4b7}
.site-footer__list a:hover{color:#fff}
.site-footer__bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;border-top:1px solid #6f6256;padding-top:21px;font-size:.7rem;color:#cfc4b7}
.site-footer__legal{margin:0}
.site-footer__legal-links{display:flex;flex-wrap:wrap;gap:18px;list-style:none;margin:0;padding:0}
.site-footer__legal-links a{color:#e8d0ba;text-decoration:underline}

/* ---------- WhatsApp ----------
   The one contact route that needs no form: a link to the published number,
   floated at the middle of the right edge (footer.php), with the buyer's first
   message prefilled so they do not arrive at an empty chat. The number itself
   comes from inc/company.php. */
.wa-float{position:fixed;top:50%;right:0;z-index:20;display:inline-flex;align-items:center;gap:10px;padding:14px 20px 14px 17px;border-radius:999px 0 0 999px;background:#25d366;color:#fff;font-family:var(--font-display);font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 12px 26px rgb(37 211 102 / 30%);transform:translateY(-50%);transition:transform .22s,background .22s}
.wa-float:hover{background:#1da851;transform:translateY(-50%) translateX(-3px)}
.wa-float__icon{width:22px;height:22px;flex:none}

/* ---------- Back to top ----------
   One button, the whole site: it is rendered by footer.php and driven by the
   pinned behaviour runtime (back-to-top in assets/wp-behaviors/behaviors.js),
   which reveals it past data-threshold and returns the scroll and the keyboard
   focus here on click. The button starts hidden in the markup, so a browser
   without JavaScript shows no button it cannot honour. */
.to-top{position:fixed;right:calc(var(--layout-gutter) / 2);bottom:28px;z-index:20}
.to-top__button{display:inline-flex;align-items:center;gap:9px;height:48px;padding:0 19px;border:0;border-radius:999px;background:var(--clay);color:#fff;font-family:var(--font-display);font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 12px 26px rgb(76 55 39 / 22%);transition:transform .22s,background .22s}
.to-top__button:hover{background:var(--clay-dark);transform:translateY(-2px)}
.to-top__icon{width:15px;height:15px;flex:none}

/* ---------- Page shell ---------- */
.breadcrumb{margin-bottom:var(--space-md);font-size:.78rem;color:var(--muted)}
.breadcrumb__list{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.breadcrumb__item + .breadcrumb__item::before{content:"/";margin-right:6px;color:var(--line)}
.breadcrumb a:hover{color:var(--clay)}
.page-head{margin-bottom:var(--space-lg)}
.page-head__eyebrow{margin:0 0 var(--space-xs);font-size:.75rem;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:var(--clay)}
.page-head__title{font-size:clamp(2.2rem,4vw,3.4rem);line-height:1.1;letter-spacing:-.05em}
.page-head__path{margin:var(--space-xs) 0 0;font-family:var(--font-mono);font-size:.82rem;color:var(--muted)}

/* ---------- Shared placeholder ---------- */
.plan{max-width:640px;padding:var(--space-lg);background:var(--white);border:1px dashed var(--line);border-left:3px solid var(--clay);border-radius:var(--radius-control)}
.plan__state{margin:0 0 var(--space-xs);font-family:var(--font-display);font-size:1.1rem;font-weight:700}
.plan__hint{margin:0;font-size:.9rem;color:var(--muted)}

/* ---------- Lists ---------- */
.post-list,.result-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-md)}
.post-card,.result{padding-bottom:var(--space-md);border-bottom:1px solid var(--line)}
.post-card__title{margin:0 0 var(--space-2xs);font-size:1.15rem}
.post-card__excerpt p{margin:0;font-size:.92rem;color:var(--muted)}
.result{display:flex;gap:var(--space-sm);align-items:baseline}
.result__type{padding:2px 6px;border:1px solid var(--line);border-radius:4px;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}

/* ---------- Search results ----------
   The search page (search.php) groups what it found by the part of the site each
   result belongs to, so one heading carries the site's own pages and the records
   that belong to the same section (inc/search.php). */
.results-range{margin:0 0 var(--space-md);font-size:.85rem;color:var(--muted)}
.results-group{margin-bottom:var(--space-lg)}
.results-group__title{margin:0 0 var(--space-sm);font-size:1.02rem}
.result__body{flex:1;min-width:0}
.result__note{margin:var(--space-2xs) 0 0;font-size:.85rem;color:var(--muted)}

/* ---------- Narrow screens ---------- */
@media (max-width:1100px){
  .primary-nav__list{gap:18px}
  .site-footer__inner{grid-template-columns:1.4fr repeat(3,minmax(120px,1fr));gap:26px}
}
@media (max-width:900px){
  :root{--layout-gutter:36px}
  .brand__logo{height:40px}
  .brand__name{font-size:1.04rem}
  .brand__tagline{font-size:.46rem;letter-spacing:.14em}
  .topline{display:none}
  .primary-nav{display:none}
  .header-cta{display:none}
  .nav-drawer{display:block}
  .site-header__inner{min-height:68px}
  .panel--mega{grid-template-columns:1fr}
  .site-footer__inner{grid-template-columns:repeat(2,minmax(140px,1fr))}
  .site-footer__brand{grid-column:1/-1}
  .section{padding:76px 0}
  .section-heading{align-items:flex-start;flex-direction:column}
  /* On a product page the fixed quote bar owns the bottom of the screen. */
  .single-product .to-top{bottom:86px}
}
@media (max-width:560px){
  .brand__logo{height:36px}
  .brand{gap:10px}
  .brand__name{font-size:.98rem}
  .brand__tagline{font-size:.44rem;letter-spacing:.12em}
  .site-footer__inner{grid-template-columns:1fr;gap:22px}
  .section{padding:64px 0}
  .to-top{right:16px;bottom:16px}
  .to-top__button{width:48px;padding:0;justify-content:center}
  .to-top__label{display:none}
  .wa-float{padding:13px 16px}
  .wa-float__label{display:none}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ---------- Entrance motion ----------
   assets/js/motion.js adds .has-motion to <html> and .is-revealed as elements
   arrive; without JavaScript, or with reduced motion asked for, everything is
   simply visible. */
.has-motion [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .75s cubic-bezier(.22,.61,.36,1),transform .75s cubic-bezier(.22,.61,.36,1)}
.has-motion [data-reveal="zoom"]{transform:translateY(20px) scale(.98)}
.has-motion [data-reveal].is-revealed{opacity:1;transform:none}
@keyframes lc-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes lc-fade{from{opacity:0}to{opacity:1}}
@keyframes lc-settle{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .has-motion [data-reveal]{opacity:1;transform:none;transition:none}
  [class*="__copy"] > *,.home-hero__collage{animation:none!important}
}

/* Motion shared by every page: the arrow in a button or card link eases
   forward on hover. */
.btn,.button{transition:transform .22s,background .22s,border-color .22s,color .22s,box-shadow .22s}
.btn .arrow,.button .arrow{transition:transform .24s cubic-bezier(.22,.61,.36,1)}
.btn:hover .arrow,.button:hover .arrow{transform:translate(2px,-2px)}
.btn--primary:hover,.button:hover{box-shadow:0 12px 24px rgb(154 77 50 / 22%)}
.text-link .arrow{display:inline-block;transition:transform .24s cubic-bezier(.22,.61,.36,1)}
.text-link:hover .arrow{transform:translate(2px,-2px)}

/* ---------- Language switcher ----------
   One link per language, the one being read marked. The header shows it on a
   wide screen; at 900px the header row becomes the mobile one (search and the
   drawer button), so the switcher is hidden there and appears in the drawer and
   in the footer instead. The markup is template-parts/language-switch.php. */
.lang-switch__list{display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0}
.lang-switch__item{display:flex;align-items:center;gap:10px}
.lang-switch__item + .lang-switch__item::before{content:"";display:block;width:1px;height:11px;background:var(--line)}
.lang-switch__link{font-size:.72rem;font-weight:700;color:var(--muted)}
.lang-switch__link:hover{color:var(--clay)}
.lang-switch__link.is-current{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.lang-switch--drawer{margin-top:var(--space-md);padding-top:var(--space-sm);border-top:1px solid var(--line-soft)}
.lang-switch--footer .lang-switch__link{color:#e8d0ba}
.lang-switch--footer .lang-switch__link.is-current{color:#fff}
.lang-switch--footer .lang-switch__item + .lang-switch__item::before{background:#6f6256}
@media (max-width:900px){
  .lang-switch--header{display:none}
}
@media (min-width:901px){
  .lang-switch--drawer{display:none}
}