/* Love Bali Furniture — site styles (no framework). Brand: navy #1e2f59, gold #f0b005, sage #a9b89f. */

/* ---- Fonts (self-hosted Lato, SIL OFL) ------------------------------------------------------- */
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lato-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/lato-latin-700-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/lato-latin-400-italic.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lato-latin-ext-400-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/lato-latin-ext-700-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Lato"; font-style: italic; font-weight: 400; font-display: swap; src: url(../fonts/lato-latin-ext-400-italic.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---- Tokens ---------------------------------------------------------------------------------- */
:root {
	--navy: #1e2f59;
	--navy-deep: #16234a;
	--navy-soft: #2c3f72;
	--gold: #f0b005;
	--gold-deep: #c98f00;
	--sage: #a9b89f;
	--sage-soft: #eef2ea;
	--green: #4f7d33;
	--whatsapp: #157a40;
	--ink: #1d2433;
	--muted: #5d6576;
	--line: #e2e5eb;
	--paper: #ffffff;
	--page: #eceeef;
	--radius: 8px;
	--shadow: 0 1px 2px rgb(16 24 40 / .06), 0 6px 24px rgb(16 24 40 / .08);
	--gap: clamp(16px, 2.2vw, 28px);
	--max: 1200px;
	--font: "Lato", "Helvetica Neue", Arial, system-ui, sans-serif;
}

/* ---- Base ------------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
	margin: 0;
	font: 400 17px/1.6 var(--font);
	color: var(--ink);
	background: var(--page) url(../img/bg-texture.jpg) repeat;
	text-rendering: optimizeLegibility;
}
img, svg, video, iframe { max-width: 100%; }
img { height: auto; vertical-align: middle; }
a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--gold-deep); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.2; margin: 1.4em 0 .5em; font-weight: 700; }
h1 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.35rem); margin-top: .2em; }
h2 { font-size: clamp(1.3rem, 1.1rem + .8vw, 1.65rem); }
h3 { font-size: 1.2rem; }
p, ul, ol, dl, blockquote, figure { margin: 0 0 1em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--gold); color: var(--navy); padding: 8px 14px; border-radius: 4px; font-weight: 700; }
.skip-link:focus { left: 8px; }
.center { text-align: center; }
.muted { color: var(--muted); font-size: .9em; }
[hidden] { display: none !important; }

/* ---- Frame ----------------------------------------------------------------------------------- */
.site { max-width: var(--max); margin: 0 auto; background: var(--paper); box-shadow: var(--shadow); min-height: 100vh; display: flex; flex-direction: column; }
@media (min-width: 1240px) { .site { margin: 20px auto; min-height: 0; border-radius: var(--radius); overflow: clip; } }
.site-main { flex: 1; outline: none; }

/* ---- Header ---------------------------------------------------------------------------------- */
.site-header { background: var(--navy); color: #fff; position: relative; z-index: 20; }
.header-bar { display: flex; align-items: center; gap: 12px; padding: 10px var(--gap); min-height: 66px; }
.brand { flex: 0 0 auto; display: block; line-height: 0; }
.brand img { width: auto; height: auto; max-width: clamp(150px, 17vw, 236px); max-height: 56px; } /* the theme's logo or one set in Customize → Site Identity */
.nav-toggle { margin-left: auto; background: transparent; border: 1px solid rgb(255 255 255 / .35); color: #fff; border-radius: 6px; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; }
.nav-toggle .when-open { display: none; }
.nav-toggle[aria-expanded="true"] .when-open { display: block; }
.nav-toggle[aria-expanded="true"] .when-closed { display: none; }
.site-nav { display: none; }
.site-nav.is-open { display: flex; position: absolute; inset: 100% 0 auto 0; flex-direction: column; align-items: stretch; gap: 6px; background: var(--navy-deep); padding: 12px var(--gap) 18px; box-shadow: 0 10px 20px rgb(0 0 0 / .25); }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.nav-list a, .nav-icon { color: #fff; text-decoration: none; font-weight: 700; padding: 10px 8px; display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; }
.nav-list a { white-space: nowrap; } /* "Qui sommes-nous" stays on one line */
.nav-list a:hover, .nav-icon:hover { color: var(--gold); }
.nav-list a[aria-current] { color: var(--gold); }
.lang-switch { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; }
.lang-switch a { display: inline-block; min-width: 40px; text-align: center; padding: 6px 8px; border: 1px solid rgb(255 255 255 / .35); border-radius: 999px; color: #fff; text-decoration: none; font-size: .8rem; font-weight: 700; letter-spacing: .04em; }
.lang-switch a[aria-current] { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.lang-switch a:hover { border-color: var(--gold); color: var(--gold); }
.lang-switch a[aria-current]:hover { color: var(--navy); }
/* Header menu, second level: on phones it opens below its item with the small arrow button;
   on desktop it drops down on hover, keyboard focus or the button. */
.nav-list li { position: relative; }
.nav-list .sub-toggle { background: none; border: 0; color: #fff; width: 32px; height: 32px; display: inline-grid; place-items: center; cursor: pointer; border-radius: 6px; vertical-align: middle; padding: 0; }
.nav-list .sub-toggle:hover { color: var(--gold); }
.nav-list .sub-toggle svg { width: 16px; height: 16px; transition: transform .15s; }
.nav-list .sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-list .sub-menu { list-style: none; margin: 0; padding: 0 0 4px 14px; display: none; }
.nav-list li.is-open > .sub-menu { display: block; }
.nav-list .sub-menu a { font-weight: 400; }
.nav-list .current-menu-ancestor > a, .nav-list .current-menu-parent > a { color: var(--gold); }
.nav-icon { position: relative; }
.sel-count { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--gold); color: var(--navy); font-size: .72rem; font-weight: 700; display: inline-grid; place-items: center; line-height: 1; }
.nav-icon .sel-count { position: absolute; top: 0; right: -4px; }
/* The menu in one row from 960px: it fits in the three languages (the French is the longest). */
@media (min-width: 960px) {
	.nav-toggle { display: none; }
	.site-nav, .site-nav.is-open { display: flex; position: static; flex-direction: row; align-items: center; gap: 2px; margin-left: auto; background: none; padding: 0; box-shadow: none; }
	.nav-list { flex-direction: row; gap: 2px; }
	.nav-list a { padding: 8px 6px; font-size: .92rem; }
	.nav-list > li { display: flex; align-items: center; }
	.nav-list .sub-toggle { width: 24px; margin-left: -8px; }
	.nav-list .sub-menu { position: absolute; top: 100%; left: 0; min-width: 230px; padding: 6px; background: var(--navy-deep); border-radius: 0 0 8px 8px; box-shadow: 0 10px 20px rgb(0 0 0 / .25); z-index: 30; }
	.nav-list li:hover > .sub-menu, .nav-list li:focus-within > .sub-menu { display: block; }
	.nav-list .sub-menu a { display: flex; padding: 8px 10px; }
	.lang-switch { margin: 0 2px; }
	.lang-switch a { min-width: 34px; padding: 5px 6px; }
}
@media (min-width: 1240px) { .nav-list a { padding: 8px 7px; font-size: .95rem; } }
.contact-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; padding: 6px var(--gap) 8px; font-size: .8rem; background: var(--navy-soft); }
.contact-strip a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.contact-strip a:hover { color: var(--gold); }
.contact-strip .icon { width: 15px; height: 15px; }
.strip-tag { margin-left: auto; color: var(--sage); letter-spacing: .03em; }
@media (max-width: 640px) { .strip-tag { display: none; } }

/* ---- Buttons --------------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 18px; border-radius: 999px; font: 700 .95rem/1.2 var(--font); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s; }
.btn .icon { width: 18px; height: 18px; flex: none; }
.btn-gold, .site-footer a.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover, .site-footer a.btn-gold:hover { background: #ffc21f; color: var(--navy); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-soft); color: #fff; }
.btn-whatsapp { background: var(--whatsapp); color: #fff; }
.btn-whatsapp:hover { background: #0f6534; color: #fff; }
.btn-ghost { background: #fff; color: var(--navy); border-color: var(--line); }
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); }
.contact-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 1em; }
.contact-buttons.stacked { flex-direction: column; align-items: stretch; }
.contact-buttons.stacked .btn { justify-content: flex-start; border-radius: 10px; font-size: .88rem; overflow-wrap: anywhere; }

/* ---- Layout with sidebar --------------------------------------------------------------------- */
.layout { display: grid; gap: var(--gap); padding: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .layout { grid-template-columns: minmax(0, 1fr) 270px; } }
.content { min-width: 0; }
.page-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; }
.page-title { margin: .1em 0 .3em; }
.page-meta { color: var(--muted); margin: 0 0 .6em; font-size: .95rem; }
.intro { font-size: 1.05rem; color: var(--muted); max-width: 70ch; }

.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 2px 0; padding: 0; margin: 0 0 .6em; font-size: .88rem; color: var(--muted); }
.breadcrumbs li + li::before { content: "/"; margin: 0 8px; color: #b3b9c4; }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--navy); text-decoration: underline; }
.breadcrumbs [aria-current] { color: #56644c; }

/* ---- Sidebar: catalogue tree ----------------------------------------------------------------- */
.sidebar { min-width: 0; }
.cat-nav-wrap { margin-bottom: 18px; }
.cat-nav-toggle { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; background: var(--navy); color: #fff; font-weight: 700; border-radius: 8px; padding: 10px 14px; }
.cat-nav-toggle::-webkit-details-marker { display: none; }
.cat-nav-wrap[open] > .cat-nav-toggle .chev { transform: rotate(180deg); }
@media (min-width: 900px) {
	.cat-nav-toggle { display: none; }
	.cat-nav-wrap > .cat-nav { display: block !important; }
}
.cat-nav ul { list-style: none; margin: 0; padding: 0; }
.cat-nav > ul { display: flex; flex-direction: column; gap: 6px; padding-top: 10px; }
@media (min-width: 900px) { .cat-nav > ul { padding-top: 0; } }
.cat-nav .pill { display: flex; align-items: center; justify-content: space-between; gap: 6px; background: var(--navy); color: #fff; text-decoration: none; font-weight: 700; font-size: .95rem; border-radius: 6px; padding: 8px 12px; }
.cat-nav .cn-row { display: flex; align-items: center; gap: 4px; }
.cat-nav .cn-row > a { flex: 1; text-decoration: none; }
.cat-nav .cn-row.pill { padding: 0 4px 0 12px; }
.cat-nav .cn-row.pill > a { color: #fff; padding: 8px 0; }
.cat-nav a.pill:hover, .cat-nav .cn-row.pill > a:hover { color: var(--gold); }
.cn-tog { flex: none; width: 34px; height: 34px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 6px; color: inherit; cursor: pointer; }
.cat-nav .cn-row.pill .cn-tog { color: #fff; }
.cn-tog:hover { background: rgb(255 255 255 / .12); }
.cn-tog[aria-expanded="true"] .chev { transform: rotate(180deg); }
.cat-nav .is-current > .pill, .cat-nav .is-current > .cn-row.pill { background: var(--sage); }
.cat-nav .is-current > .cn-row.pill > a, .cat-nav .is-current > .cn-row.pill .cn-tog, .cat-nav .is-current > a.pill { color: var(--navy); }
.cat-nav .chev { width: 18px; height: 18px; flex: none; transition: transform .15s; }
.cat-nav li > ul { padding: 6px 0 4px 10px; }
.cat-nav .depth-1 > a, .cat-nav .depth-2 > a, .cat-nav .depth-1 > .cn-row > a, .cat-nav .depth-2 > .cn-row > a { display: block; padding: 5px 8px; font-size: .92rem; border-radius: 5px; text-decoration: none; color: var(--navy); }
.cat-nav .depth-1 > .cn-row .cn-tog, .cat-nav .depth-2 > .cn-row .cn-tog { color: var(--navy); width: 30px; height: 30px; }
.cat-nav .depth-1 > a:hover, .cat-nav .depth-2 > a:hover, .cat-nav .depth-1 > .cn-row > a:hover { background: var(--sage-soft); }
.cat-nav a[aria-current] { font-weight: 700; color: var(--green); }
.cat-nav .depth-2 { padding-left: 6px; }
.cat-nav .pill-green { background: var(--green) !important; margin-top: 4px; justify-content: flex-start; gap: 10px; }
.pill-green .icon { width: 18px; height: 18px; }
.pill-green .sel-count { margin-left: auto; }
.side-contact { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--sage-soft); }
.side-contact h2 { margin: 0 0 .3em; font-size: 1.1rem; }
.side-contact p { font-size: .9rem; color: var(--muted); }

/* ---- Category cards -------------------------------------------------------------------------- */
.cards { list-style: none; padding: 0; margin: 0 0 1.5em; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(min(46%, 210px), 1fr)); } /* two a row on phones */
@media (max-width: 480px) { .cards { gap: 12px; } .card-title { font-size: .95rem; } }
.cards-small { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 12px; }
.card a { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: box-shadow .15s, transform .15s, border-color .15s; }
.card a:hover { box-shadow: var(--shadow); border-color: #cfd5df; transform: translateY(-2px); color: var(--ink); }
.card-img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #fff; padding: 6px; border-bottom: 1px solid var(--line); display: block; }
.card-img-empty { background: var(--sage-soft); }
.card-title { margin: 10px 12px 2px; font-size: 1.02rem; color: var(--navy); }
.cards-small .card-title { font-size: .92rem; }
.card-meta { margin: 0 12px 12px; color: var(--muted); font-size: .82rem; }

/* ---- Galleries ------------------------------------------------------------------------------- */
.lbf-gallery, .pieces { list-style: none; padding: 0; margin: 0 0 1.5em; display: grid; gap: 18px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 700px) { .lbf-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.photo { scroll-margin-top: 16px; position: relative; }
.photo figure { margin: 0; position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.photo:target figure { border-color: var(--gold); box-shadow: 0 0 0 3px rgb(240 176 5 / .35); }
.photo-link { display: block; position: relative; cursor: zoom-in; background: #fff; }
.photo-img { width: 100%; height: auto; display: block; }
.zoom { position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; background: rgb(30 47 89 / .82); color: #fff; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.zoom .icon { width: 18px; height: 18px; }
.photo-link:hover .zoom, .photo-link:focus-visible .zoom { opacity: 1; }
@media (hover: none) { .zoom { opacity: .85; } }
.photo-codes { container-type: inline-size; border-top: 1px solid var(--line); padding: 8px 12px; font-size: .85rem; color: var(--muted); }
/* Item codes: "code | size" pairs with the codes and the sizes aligned. In two columns (the
   default Caption layout) the list runs down the first column, then the second (items of the
   second carry .c2). A list with class w<n> needs n/10 em for two columns (worked out in
   gallery.php from its codes and sizes): it gets them when the caption is that wide (em = .85rem,
   the caption's font size), else one column, so a size never breaks over two lines. */
.photo-codes dl { --cols: 1; --c2: 1; --gap: .9em; --gutter: 0em; display: grid; grid-template-columns: repeat(var(--cols), max-content auto); grid-auto-flow: row dense; gap: 1px var(--gap); margin: 0; }
.photo-codes dl > div { display: grid; grid-column: 1 / span 2; grid-template-columns: max-content auto; grid-template-columns: subgrid; }
.photo-codes dl > .c2 { grid-column: var(--c2) / span 2; }
.photo-codes dl > div:not(.c2) > dd { padding-right: var(--gutter); }
@container (min-width: 15.3rem) { .photo-codes .w180 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 15.725rem) { .photo-codes .w185 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 16.15rem) { .photo-codes .w190 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 16.575rem) { .photo-codes .w195 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 17rem) { .photo-codes .w200 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 17.425rem) { .photo-codes .w205 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 17.85rem) { .photo-codes .w210 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 18.275rem) { .photo-codes .w215 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 18.7rem) { .photo-codes .w220 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 19.125rem) { .photo-codes .w225 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 19.55rem) { .photo-codes .w230 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 19.975rem) { .photo-codes .w235 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 20.4rem) { .photo-codes .w240 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 20.825rem) { .photo-codes .w245 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 21.25rem) { .photo-codes .w250 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 21.675rem) { .photo-codes .w255 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 22.1rem) { .photo-codes .w260 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 22.525rem) { .photo-codes .w265 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 22.95rem) { .photo-codes .w270 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 23.375rem) { .photo-codes .w275 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 23.8rem) { .photo-codes .w280 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 24.225rem) { .photo-codes .w285 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 24.65rem) { .photo-codes .w290 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 25.075rem) { .photo-codes .w295 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 25.5rem) { .photo-codes .w300 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 25.925rem) { .photo-codes .w305 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
@container (min-width: 26.35rem) { .photo-codes .w310 { --cols: 2; --c2: 3; --gap: .6em; --gutter: 1.2em; } }
.photo-codes dt { font-weight: 700; color: var(--navy); }
.photo-codes dd { margin: 0; font-variant-numeric: tabular-nums; }
.photo-codes p { margin: 0; }
.photo-codes dl + p { margin-top: 4px; }
.photo-text { color: var(--ink); }
/* The heart sits on the photo's top corner, leaving the caption its full width. */
.sel-toggle { position: absolute; right: 8px; top: 8px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--navy); display: grid; place-items: center; cursor: pointer; transition: color .15s, background .15s; }
.sel-toggle:hover { color: #c2185b; border-color: #e3a0b9; }
.sel-toggle[aria-pressed="true"] { color: #fff; background: #c2185b; border-color: #c2185b; }
.sel-toggle[aria-pressed="true"] svg path { fill: currentColor; }
.pieces { grid-template-columns: repeat(auto-fill, minmax(min(46%, 170px), 1fr)); }
.pieces .photo-link { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.pieces img { width: 100%; aspect-ratio: 1; object-fit: contain; padding: 8px; }
.codes-index { margin: 0 0 1.5em; border: 1px solid var(--line); border-radius: var(--radius); background: #fafbfc; }
.codes-index summary { cursor: pointer; padding: 10px 14px; font-weight: 700; color: var(--navy); }
.codes-index ul { list-style: none; margin: 0; padding: 4px 14px 8px; columns: 14rem; column-gap: 24px; font-size: .9rem; }
.codes-index li { break-inside: avoid; padding: 2px 0; }
.codes-index a { text-decoration: none; }
.codes-index span { color: var(--muted); }
.codes-index .muted { padding: 0 14px 10px; margin: 0; }

/* ---- Lightbox -------------------------------------------------------------------------------- */
.lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(10 14 26 / .94); color: #fff; overflow: hidden; }
.lightbox::backdrop { background: transparent; } /* one layer only: the dialog itself is the full-screen backdrop (94% opaque) */
.lightbox[open] { display: block; } /* a definite height for the figure, so the photo row can shrink */
/* Stage 1: the whole photo and its caption fit the screen. Stage 2 (click/tap the photo, the zoom
   button or Z): the photo is magnified and follows the mouse, or a finger drag. */
.lb-figure { margin: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; justify-items: center; gap: 10px; width: 100%; height: 100%; padding: 56px 64px 18px; }
.lb-stage { position: relative; width: 100%; height: 100%; min-height: 0; overflow: hidden; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; cursor: zoom-in; }
.lb-img { max-width: 100%; max-height: 100%; object-fit: contain; background: #fff; border-radius: 4px; touch-action: pan-y pinch-zoom; transform-origin: 50% 50%; transition: transform .25s ease; user-select: none; -webkit-user-drag: none; }
.lb-stage.is-zoomed { cursor: zoom-out; }
.lb-stage.is-zoomed .lb-img { touch-action: none; }
.lb-caption { margin: 0; text-align: center; font-size: .9rem; line-height: 1.45; color: #dfe3ec; max-width: 90ch; max-height: 4.4em; overflow-y: auto; }
.lb-count { position: absolute; top: 14px; left: 18px; margin: 0; font-size: .85rem; color: #c3c9d6; }
.lb-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgb(255 255 255 / .12); color: #fff; display: grid; place-items: center; cursor: pointer; }
.lb-btn:hover { background: rgb(255 255 255 / .25); }
.lb-btn .icon { width: 28px; height: 28px; }
.lb-prev { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 10px; top: 50%; transform: translateY(-50%); }
.lb-close { right: 10px; top: 8px; }
.lb-zoom { right: 66px; top: 8px; }
.lb-zoom[aria-pressed="true"] { background: rgb(255 255 255 / .3); }
@media (max-width: 640px) { .lb-figure { padding: 52px 8px 70px; } .lb-prev, .lb-next { top: auto; bottom: 12px; transform: none; } }
@media (prefers-reduced-motion: reduce) { .lb-img { transition: none; } }
/* Short screens (a phone turned sideways, a small laptop window): buttons move into the side
   gutters so the photo gets almost all of the height. */
@media (max-height: 520px) and (min-width: 641px) {
	.lb-figure { padding: 8px 64px 6px; gap: 4px; }
	.lb-count { top: 8px; left: 6px; width: 52px; text-align: center; font-size: .72rem; }
	.lb-close { top: 6px; right: 8px; }
	.lb-zoom { top: 60px; right: 8px; }
	.lb-caption { font-size: .78rem; max-height: 2.9em; }
}

/* ---- Content typography ---------------------------------------------------------------------- */
.entry { max-width: 75ch; }
.catalogue .entry, .home-intro.entry { max-width: none; }
.entry > :first-child { margin-top: 0; }
.entry img { border-radius: 4px; }
.entry blockquote, .wp-block-quote { margin: 0 0 1.6em; padding: 16px 20px; border-left: 4px solid var(--gold); background: #fbfaf5; border-radius: 0 var(--radius) var(--radius) 0; }
.entry blockquote p:last-of-type { margin-bottom: .4em; }
.entry cite, .wp-block-quote cite { display: block; font-style: normal; font-weight: 700; color: var(--navy); font-size: .95rem; }
.entry cite::before { content: "— "; }
.entry h2 { border-bottom: 1px solid var(--line); padding-bottom: .25em; }
.entry .wp-block-buttons { margin: 1.2em 0; }
.entry .wp-block-button__link { border-radius: 999px; background: var(--navy); color: #fff; font-weight: 700; padding: 10px 20px; text-decoration: none; }
.entry .lead, .entry .has-large-font-size { font-size: 1.15rem; }
.page-cta { margin: 2em 0; padding: 18px 20px; border-radius: var(--radius); background: var(--sage-soft); border: 1px solid #dfe6d8; }
.page-cta p { margin-bottom: .8em; font-weight: 700; color: var(--navy); }
.related h2 { font-size: 1.25rem; }

/* ---- Home ------------------------------------------------------------------------------------ */
.hero { position: relative; background: var(--navy-deep); color: #fff; overflow: hidden; }
.hero-slides { position: relative; aspect-ratio: 16 / 8; min-height: 360px; max-height: 620px; width: 100%; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1s ease; }
.hero-slide.is-active { opacity: 1; }
.hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(14 22 46 / .82) 0%, rgb(14 22 46 / .55) 40%, rgb(14 22 46 / 0) 75%); pointer-events: none; }
.hero-text { position: absolute; z-index: 2; left: var(--gap); right: var(--gap); bottom: clamp(28px, 6vw, 64px); max-width: 640px; }
.hero-title { color: #fff; font-size: clamp(2rem, 1.2rem + 3vw, 3.2rem); margin: 0 0 .25em; text-shadow: 0 2px 12px rgb(0 0 0 / .35); }
.hero-sub { display: block; font-size: .42em; font-weight: 400; letter-spacing: .02em; color: #e8ecf3; margin-top: .45em; }
.hero-sub em { color: var(--gold); font-weight: 700; font-style: italic; }
.hero-tagline { font-size: clamp(1rem, .95rem + .3vw, 1.15rem); margin: 0 0 1em; color: #eef1f6; text-shadow: 0 1px 8px rgb(0 0 0 / .4); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.hero-dots { position: absolute; z-index: 3; right: var(--gap); bottom: 18px; display: flex; gap: 8px; }
.hero-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff; background: transparent; padding: 0; cursor: pointer; }
.hero-dot.is-active { background: #fff; }
@media (max-width: 640px) { .hero-slides { aspect-ratio: auto; height: 560px; } .hero::after { background: linear-gradient(0deg, rgb(14 22 46 / .9) 0%, rgb(14 22 46 / .5) 55%, rgb(14 22 46 / .1) 100%); } }
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: none; } .card a { transition: none; } }
.home-intro { padding: var(--gap); padding-bottom: 0; font-size: 1.05rem; }
.home-intro .wp-block-columns { gap: var(--gap); }
.home-section { padding: 8px var(--gap) 16px; }
.section-title { text-align: center; margin: 1em 0 .9em; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.9rem); }
.section-title::after { content: ""; display: block; width: 56px; height: 3px; background: var(--gold); margin: .45em auto 0; border-radius: 2px; }
.quotes { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); margin-bottom: 1.4em; align-items: start; }
.quote { margin: 0; padding: 20px 22px; background: #fbfaf5; border-radius: var(--radius); border: 1px solid #efe8d2; position: relative; }
.quote blockquote { margin: 0 0 .8em; font-size: .98rem; }
.quote blockquote::before { content: "“"; font-size: 3rem; line-height: .6; color: var(--gold); display: block; margin-bottom: .1em; }
.quote figcaption { font-weight: 700; color: var(--navy); font-size: .92rem; }
.cta { text-align: center; background: var(--sage-soft); margin: 18px var(--gap) var(--gap); border-radius: var(--radius); padding-bottom: 24px; }
.cta .contact-buttons { justify-content: center; }

/* ---- Contact page ---------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.contact-card, .contact-form { border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.contact-card { background: var(--sage-soft); }
.contact-card h2, .contact-form h2 { margin-top: 0; font-size: 1.25rem; }
.contact-card address { font-style: normal; margin-bottom: 1em; }
.contact-list { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: .95rem; }
.contact-list dt { color: var(--muted); }
.contact-list dd { margin: 0; overflow-wrap: anywhere; }
.map { margin-top: var(--gap); }
.map iframe { border: 0; border-radius: var(--radius); display: block; width: 100%; background: var(--sage-soft); }
.map p { margin-top: 8px; font-size: .92rem; }
.map .icon { width: 16px; height: 16px; vertical-align: -3px; }

/* ---- Forms (Contact Form 7) ------------------------------------------------------------------ */
.wpcf7 label { display: block; font-weight: 700; color: var(--navy); font-size: .95rem; margin-bottom: 12px; }
.wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 textarea, .wpcf7 select, .search-form input[type="search"] {
	display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: 400 1rem/1.4 var(--font); color: var(--ink);
	background: #fff; border: 1px solid #c9cfd9; border-radius: 6px;
}
.wpcf7 textarea { min-height: 160px; resize: vertical; }
.wpcf7 input:focus, .wpcf7 textarea:focus, .search-form input:focus { outline: 3px solid rgb(240 176 5 / .45); border-color: var(--gold-deep); }
.wpcf7 input[type="submit"], .search-form button, .search-form input[type="submit"] { background: var(--navy); color: #fff; border: 0; border-radius: 999px; padding: 12px 26px; font: 700 1rem/1 var(--font); cursor: pointer; min-height: 44px; }
.wpcf7 input[type="submit"]:hover { background: var(--navy-soft); }
.wpcf7 .wpcf7-not-valid-tip { color: #b42318; font-size: .85rem; font-weight: 400; }
.wpcf7 form .wpcf7-response-output { margin: 1em 0 0; padding: 10px 14px; border-radius: 6px; font-size: .95rem; }
.wpcf7 .lbf-hint { font-weight: 400; color: var(--muted); font-size: .85rem; }
.lbf-hp { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }
.search-form { display: flex; gap: 8px; margin: 0 0 1.5em; max-width: 520px; }
.search-form label { flex: 1; }
.search-form input[type="search"] { margin: 0; }

/* ---- Selection page -------------------------------------------------------------------------- */
.selection-list { list-style: none; padding: 0; margin: 0 0 1em; display: grid; gap: 12px; }
.selection-item { display: grid; grid-template-columns: 96px 1fr auto; gap: 12px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius); }
.selection-item img { width: 96px; height: 72px; object-fit: contain; background: #fff; }
.selection-item a { font-weight: 700; text-decoration: none; }
.selection-item .codes { color: var(--muted); font-size: .9rem; display: block; }
.selection-item button { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; cursor: pointer; color: var(--muted); }
.selection-item button:hover { color: #b42318; border-color: #e7b4ae; }

/* ---- Footer ---------------------------------------------------------------------------------- */
.site-footer { background: var(--navy); color: #e6e9f0; margin-top: auto; font-size: .92rem; }
.footer-grid { display: grid; gap: var(--gap); padding: 32px var(--gap) 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .footer-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); } }
@media (min-width: 1100px) { .footer-grid:has(.footer-extra) { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); } }
/* Widgets (Appearance → Widgets): footer column and catalogue sidebar */
.footer-extra .widget + .widget { margin-top: 18px; }
.footer-extra ul { list-style: none; margin: 0; padding: 0; }
.footer-extra a { color: #fff; }
.side-widget { background: var(--paper); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin-top: 18px; }
.side-widget h2 { font-size: 1.05rem; margin: 0 0 8px; color: var(--navy); }
.side-widget > :last-child { margin-bottom: 0; }
.footer-title { color: var(--gold); font-size: 1.05rem; margin: 0 0 .6em; }
.footer-brand { color: #c9cfdb; }
.site-footer address { font-style: normal; line-height: 1.9; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: var(--gold); }
.site-footer address a, .site-footer address .addr { display: inline-flex; gap: 8px; align-items: center; }
.site-footer .icon { width: 16px; height: 16px; flex: none; }
.footer-links ul { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 18px; }
.footer-links li { padding: 2px 0; break-inside: avoid; }
.footer-more .lang-switch { margin-top: 12px; }
.copyright { margin: 0; padding: 12px var(--gap) 16px; border-top: 1px solid rgb(255 255 255 / .12); color: #aab2c4; font-size: .82rem; text-align: center; }
.copyright a { color: inherit; }
.form-privacy { margin: 10px 0 0; font-size: .88rem; color: var(--muted); }

/* ---- v4: home sections, About, testimonials, projects, search ----------------------------------- */
.hero-kicker { margin: 0 0 .55em; font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); text-shadow: 0 1px 6px rgb(0 0 0 / .5); }
.section-line { text-align: center; color: var(--muted); margin: -.3em auto 1.3em; max-width: 62ch; }
.home-closing { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); line-height: 1.5; color: var(--navy); font-style: italic; border-left: 4px solid var(--gold); padding: 4px 0 4px 18px; margin: 0; }
.steps { list-style: none; margin: 0 0 1em; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); counter-reset: step; }
.steps li { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--sage-soft); border: 1px solid #dfe6d8; border-radius: var(--radius); }
.step-icon { width: 46px; height: 46px; border-radius: 50%; background: var(--navy); color: var(--gold); display: grid; place-items: center; margin-bottom: 4px; }
.step-icon .icon { width: 24px; height: 24px; }
.steps strong { color: var(--navy); font-size: 1.02rem; line-height: 1.3; }
.steps strong::before { counter-increment: step; content: counter(step) ". "; color: var(--gold-deep); }
.step-line { font-size: .95rem; }
.cards-projects { grid-template-columns: repeat(auto-fill, minmax(min(46%, 240px), 1fr)); }
.cards-projects .card-img { object-fit: cover; padding: 0; }
.visit .closing { margin: 1em 0 0; font-weight: 700; color: var(--navy); }
.visit > p { max-width: 70ch; margin-left: auto; margin-right: auto; }
.content > .lead { font-size: 1.1rem; max-width: 75ch; }
.about .wp-block-image { margin: 0 0 1.4em; }
.about .wp-block-image img { width: 100%; }
.about-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.5em 0 0; }
.entry .see-also { padding: 10px 14px; background: var(--sage-soft); border-radius: var(--radius); font-weight: 700; }
/* A testimonial: the client's words, then (French and Indonesian pages) the line that opens the
   translation, labelled as one. */
.testimonial { margin: 0 0 1.8em; }
.testimonial > blockquote { margin-bottom: .5em; }
.testimonial-tr { margin: 0 0 0 24px; font-size: .95rem; }
.testimonial-tr > summary { cursor: pointer; width: fit-content; color: var(--navy); font-weight: 700; font-size: .9rem; padding: 6px 0; }
.testimonial-tr > summary:hover { color: var(--gold-deep); }
.testimonial-tr .tr-text { margin-top: .3em; padding: 12px 16px; background: #fff; border: 1px dashed #d9d2bb; border-radius: var(--radius); }
.testimonial-tr .tr-text p:last-child { margin-bottom: 0; }
.tr-by { margin: .45em 0 0; color: var(--muted); font-size: .82rem; font-style: italic; }
.quote .wp-block-quote, .quote > blockquote { margin: 0 0 .8em; padding: 0; border: 0; background: none; border-radius: 0; font-size: .98rem; }
.quote cite { display: block; margin-top: .4em; font-style: normal; font-weight: 700; color: var(--navy); font-size: .92rem; }
.quote cite::before { content: "— "; }
.quote .testimonial-tr { margin-left: 0; }
.project-quote { margin: 1.6em 0; padding: 18px 22px; background: #fbfaf5; border-left: 4px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; }
.project-quote blockquote { margin: 0 0 .6em; padding: 0; border: 0; background: none; font-size: 1.05rem; font-style: italic; }
.project-quote blockquote p { margin-bottom: .4em; }
.project-quote cite { display: block; font-style: normal; font-weight: 700; color: var(--navy); font-size: .92rem; }
.project-quote cite::before { content: "— "; }
.project-quote .testimonial-tr { margin-left: 0; }
.more-link { margin: .6em 0 0; font-size: .9rem; }
.side-search { margin-bottom: 18px; }
.side-search .search-form { margin: 0; }
.search-form.has-label { flex-wrap: wrap; }
.search-form.has-label .search-label { flex: 0 0 100%; font-size: .85rem; font-weight: 700; color: var(--navy); }
.search-form.has-label input[type="search"] { flex: 1; min-width: 0; }
.search-form .search-btn { display: inline-grid; place-items: center; padding: 0 16px; flex: none; }
.search-btn .icon { width: 20px; height: 20px; }
.footer-visit { color: #c9cfdb; margin: .8em 0 0; }
.footer-visit a { text-decoration: underline; text-underline-offset: 3px; }
.selection-note { margin: 0 0 14px; padding: 12px 14px; border: 1px solid #dfe6d8; background: var(--sage-soft); border-radius: var(--radius); font-size: .92rem; font-weight: 400; }
.selection-note p { margin: 0 0 .4em; font-weight: 700; color: var(--navy); }
.selection-note ul { margin: 0; padding-left: 1.2em; }
.selection-note .codes { color: var(--muted); }

/* ---- Print ----------------------------------------------------------------------------------- */
@media print {
	body { background: #fff; }
	.site { box-shadow: none; }
	.site-header .site-nav, .nav-toggle, .contact-strip, .sidebar, .sel-toggle, .zoom, .hero-dots, .lightbox, .page-cta .contact-buttons { display: none !important; }
	.layout { display: block; }
	.lbf-gallery { grid-template-columns: repeat(2, 1fr); }
	.photo { break-inside: avoid; }
}