/* ==========================================================================
   Lynn's Furniture — site styles
   Look: from the ChatGPT hero mockup (warm wood browns, caramel pills,
   serif headlines, Montserrat body). Structure: reference rows D01, D03,
   D07, D13, D05, D09, D06, D17, D16, D20 and mobile M01, M13, M08, M03,
   M04, M02, M17, M20.
   ========================================================================== */

/* Self-hosted fonts from the Divi Hosting font library (no Google Fonts) */
@font-face{ font-family:"Montserrat"; src:url("../../fonts/montserrat-latin-wght-normal.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; }
@font-face{ font-family:"Lora"; src:url("../../fonts/lora-latin-wght-normal.woff2") format("woff2"); font-weight:400 700; font-style:normal; font-display:swap; }

:root{
  /* colours */
  --ink:#2a1a10;          /* headings */
  --text:#45362c;         /* body */
  --muted:#6b5a4d;        /* secondary text (6.6:1 on white) */
  --caramel:#9a5f26;      /* buttons (5.2:1 with white) */
  --caramel-d:#7d4d1e;    /* hover, text links */
  --gold:#b27a3e;         /* accent words in large headings only */
  --gold-light:#d9a86e;   /* accent on dark */
  --white:#ffffff;
  --cream:#faf6f0;
  --sand:#f4eee6;
  --line:#e8ddd0;
  --dark:#2a1b12;
  --darker:#1c120c;
  --on-dark:#f3e9de;
  --on-dark-muted:#d5c3b0;
  --wa:#1b9e4b;           /* WhatsApp float (3.4:1 with white glyph) */

  /* type */
  --f-head:"Lora", Georgia, "Times New Roman", serif;
  --f-body:"Montserrat", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --fs-h1:clamp(2.5rem, 1.15rem + 3.4vw, 4.6rem);
  --fs-h2:clamp(2rem, 1.35rem + 1.9vw, 3.05rem);
  --fs-lead:clamp(1.0625rem, 1rem + .3vw, 1.1875rem);

  /* shape */
  --r:20px;
  --r-sm:14px;
  --pill:999px;
  --shadow:0 18px 40px -24px rgba(42,26,16,.45);
  --shadow-sm:0 6px 18px -10px rgba(42,26,16,.35);

  /* layout */
  --container:1240px;
  --gutter:clamp(16px, 4vw, 40px);
  --sec-y:clamp(56px, 4vw + 36px, 104px);
  --bar-h:0px;     /* demo view-switcher height, set below */
  --hdr-h:72px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:768px){ :root{ --bar-h:52px; } }
@media (min-width:1120px){ :root{ --hdr-h:104px; } }
html.is-embed{ --bar-h:0px; }

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--bar-h) + var(--hdr-h) + 12px); }
body{
  margin:0; padding-top:var(--bar-h);
  font-family:var(--f-body); font-size:16px; line-height:1.65; color:var(--text);
  background:var(--white); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
@media (min-width:1024px){ body{ font-size:17px; } }
img,video{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p,figure{ margin:0; }
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
:focus-visible{ outline:3px solid var(--caramel); outline-offset:3px; border-radius:6px; }
.ico{ width:20px; height:20px; flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.ico--fill{ fill:currentColor; stroke:none; }
.ico--sm{ width:16px; height:16px; }
.ico--lg{ width:26px; height:26px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip{ position:absolute; left:12px; top:-60px; z-index:200; background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px; }
.skip:focus{ top:calc(var(--bar-h) + 10px); }
.container{ width:100%; max-width:calc(var(--container) + 2 * var(--gutter)); margin-inline:auto; padding-inline:var(--gutter); }
.t-d{ display:none; }
@media (min-width:768px){ .t-m{ display:none; } .t-d{ display:inline; } }

/* ---------- type helpers ---------- */
.eyebrow{
  display:flex; align-items:center; gap:14px; width:fit-content;
  font-size:.8125rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--text);
  margin-bottom:16px;
}
.eyebrow::after{ content:""; width:56px; height:1.5px; background:currentColor; opacity:.7; flex:0 0 auto; }
.h2{
  font-family:var(--f-head); font-size:var(--fs-h2); line-height:1.08; font-weight:700;
  letter-spacing:-.015em; color:var(--ink); text-wrap:balance;
}
.accent{ color:var(--gold); }
.lead{ font-size:var(--fs-lead); line-height:1.65; color:var(--muted); margin-top:16px; text-wrap:pretty; }
.sec-head{ margin-bottom:28px; }
.sec-head--center{ text-align:center; max-width:760px; margin-inline:auto; }
.sec-head--center .eyebrow{ margin-inline:auto; }
.sec-head--center .eyebrow::before{ content:""; width:56px; height:1.5px; background:currentColor; opacity:.7; flex:0 0 auto; }
.sec-head--center .lead{ margin-inline:auto; max-width:620px; }
@media (min-width:1024px){ .sec-head{ margin-bottom:44px; } }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:54px; padding:0 28px; border-radius:var(--pill);
  font-family:var(--f-body); font-size:1rem; font-weight:600; line-height:1.15; text-align:center;
  border:1.5px solid transparent; transition:background-color .2s, color .2s, border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.btn .ico{ width:20px; height:20px; }
.btn--primary{ background:var(--caramel); color:#fff; box-shadow:0 12px 24px -14px rgba(122,74,30,.9); }
.btn--primary:hover{ background:var(--caramel-d); transform:translateY(-1px); }
.btn--outline{ background:#fff; color:var(--ink); border-color:var(--caramel); }
.btn--outline:hover{ background:var(--caramel); color:#fff; }
.btn--light{ background:transparent; color:#fff; border-color:rgba(255,255,255,.7); }
.btn--light:hover{ background:#fff; color:var(--ink); }
.btn__arrow{ transition:transform .2s var(--ease); }
.btn:hover .btn__arrow{ transform:translateX(3px); }
.sec-cta{ margin-top:28px; display:flex; justify-content:center; }
@media (max-width:599px){ .sec-cta .btn{ width:100%; } }

/* ==========================================================================
   Demo view switcher (demo only — remove for final delivery)
   ========================================================================== */
.demo-bar{
  position:fixed; inset:0 0 auto 0; height:var(--bar-h); z-index:120;
  display:none; align-items:center; justify-content:center; gap:16px;
  background:#120b07; color:#f3e9de; font-size:.8125rem; font-weight:500; letter-spacing:.04em;
}
@media (min-width:768px){ .demo-bar{ display:flex; } }
html.is-embed .demo-bar{ display:none; }
.demo-bar__label{ opacity:.8; }
.demo-bar__btns{ display:flex; gap:4px; padding:4px; border-radius:var(--pill); background:#2a1b12; }
.demo-bar__btns button{ min-height:36px; padding:0 18px; border-radius:var(--pill); font-weight:600; font-size:.8125rem; display:inline-flex; align-items:center; gap:8px; color:#e7d8c8; }
.demo-bar__btns button[aria-pressed="true"]{ background:var(--caramel); color:#fff; }
.demo-bar__btns .ico{ width:16px; height:16px; }
.demo-stage{
  position:fixed; inset:var(--bar-h) 0 0 0; z-index:110; overflow:auto;
  display:grid; place-items:center; padding:24px;
  background:radial-gradient(circle at 50% 30%, #3a271b, #140c08 70%);
}
.demo-stage[hidden]{ display:none; }
.demo-phone{
  width:414px; height:min(868px, calc(100vh - var(--bar-h) - 48px));
  border:12px solid #050302; border-radius:44px; overflow:hidden; background:#fff;
  box-shadow:0 40px 80px -30px rgba(0,0,0,.8), 0 0 0 2px #4a3426;
}
.demo-phone iframe{ width:390px; height:100%; border:0; display:block; }
.demo-stage[data-view="tablet"] .demo-phone{ width:844px; border-radius:30px; height:min(1204px, calc(100vh - var(--bar-h) - 48px)); }
.demo-stage[data-view="tablet"] .demo-phone iframe{ width:820px; }
html.demo-mobile body{ overflow:hidden; }

/* ==========================================================================
   Top bar + header (D01 → M01)
   ========================================================================== */
.topbar{ display:none; background:var(--sand); color:var(--text); font-size:.875rem; }
@media (min-width:1120px){ .topbar{ display:block; } }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:24px; min-height:48px; }
.topbar__info{ display:flex; gap:36px; }
.topbar__info li,.topbar__info a{ display:inline-flex; align-items:center; gap:10px; }
.topbar__right{ display:flex; align-items:center; gap:20px; }
.topbar__right > a{ display:inline-flex; align-items:center; gap:10px; }
.topbar__phones{ display:inline-flex; align-items:center; gap:8px; }
.topbar__phones a{ display:inline-flex; align-items:center; min-height:40px; }
.topbar__phones a:hover{ color:var(--caramel-d); text-decoration:underline; text-underline-offset:3px; }
.topbar__sep{ width:1px; height:22px; background:var(--line); }
.topbar .ico{ color:var(--caramel-d); }
.social{ display:flex; gap:4px; }
.social a{ display:grid; place-items:center; width:40px; height:40px; border-radius:10px; color:var(--ink); transition:background-color .2s, color .2s; }
.social a:hover{ background:#fff; color:var(--caramel-d); }
.social .ico{ width:19px; height:19px; color:currentColor; }

.header{
  position:sticky; top:var(--bar-h); z-index:60;
  background:#fff; border-bottom:1px solid var(--line);
}
.header__inner{ display:flex; align-items:center; gap:28px; height:var(--hdr-h); }

/* logo */
.brand{ display:inline-flex; align-items:center; gap:12px; flex:0 0 auto; min-width:0; }
.brand__icon{ width:auto; height:44px; flex:0 0 auto; color:#3a2416; }
.brand__text{ display:flex; flex-direction:column; line-height:1; }
.brand__name{ font-family:var(--f-body); font-weight:800; font-size:1.5rem; letter-spacing:.03em; color:var(--ink); }
.brand__sub{ font-family:var(--f-body); font-weight:500; font-size:.72rem; letter-spacing:.52em; color:var(--caramel); margin-top:3px; }
.brand__tag{ display:none; font-family:var(--f-body); font-weight:600; font-size:.625rem; letter-spacing:.12em; text-transform:uppercase; color:var(--caramel-d); margin-top:9px; }
@media (min-width:1120px){
  .brand__icon{ height:66px; }
  .brand__name{ font-size:2.1rem; }
  .brand__sub{ font-size:1rem; letter-spacing:.5em; margin-top:4px; }
  .brand__tag{ display:block; }
}

/* nav */
.nav{ margin-left:auto; }
.nav__list{ display:flex; gap:6px; }
.nav__link{ position:relative; display:block; padding:12px 16px; font-size:1rem; font-weight:500; color:var(--ink); transition:color .2s; }
.nav__link::after{ content:""; position:absolute; left:16px; right:16px; bottom:4px; height:2px; border-radius:2px; background:var(--caramel); transform:scaleX(0); transition:transform .25s var(--ease); }
.nav__link:hover{ color:var(--caramel-d); }
.nav__link:hover::after,.nav__link[aria-current="page"]::after{ transform:scaleX(1); }
.nav__link[aria-current="page"]{ color:var(--caramel-d); }
.nav__extra{ display:none; }
.header__cta{ flex:0 0 auto; min-height:58px; padding:0 30px; font-size:1.0625rem; }
.header__cta .ico{ width:24px; height:24px; }
.burger{ display:none; }

@media (max-width:1119px){
  .header__cta{ display:none; }
  .burger{ display:grid; place-items:center; width:48px; height:48px; margin-left:auto; margin-right:-8px; border-radius:12px; color:var(--ink); }
  .burger .ico{ width:30px; height:30px; stroke-width:2.2; }
  .burger .ico-close{ display:none; }
  .burger[aria-expanded="true"] .ico-open{ display:none; }
  .burger[aria-expanded="true"] .ico-close{ display:block; }
  .nav{
    position:fixed; left:0; right:0; top:calc(var(--bar-h) + var(--hdr-h)); bottom:0; overflow-y:auto;
    padding:8px var(--gutter) 32px; background:#fff; border-top:1px solid var(--line);
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .25s, transform .25s var(--ease), visibility .25s;
  }
  .nav.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav__list{ flex-direction:column; gap:0; }
  .nav__link{ padding:16px 2px; font-size:1.25rem; font-family:var(--f-head); font-weight:600; border-bottom:1px solid var(--line); }
  .nav__link::after{ display:none; }
  .nav__extra{ display:grid; gap:14px; margin-top:24px; }
  .nav__extra .btn{ width:100%; }
  .nav__extra .social{ justify-content:center; gap:8px; margin-top:6px; }
  .nav__extra .social a{ width:48px; height:48px; background:var(--sand); }
  .nav__meta{ text-align:center; font-size:.9375rem; color:var(--muted); }
}
html.menu-open body{ overflow:hidden; }

/* ==========================================================================
   Hero (D03 split → M01 overlay)
   ========================================================================== */
.hero{ position:relative; background:#fff; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__body{ position:relative; }
.hero h1{
  font-family:var(--f-head); font-weight:700; font-size:var(--fs-h1); line-height:1.04;
  letter-spacing:-.02em; color:var(--ink);
}
.hero h1 .accent{ display:block; }
.hero__lead{ margin-top:22px; font-size:var(--fs-lead); line-height:1.65; color:var(--muted); max-width:470px; }
.hero__btns{ display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; }
.hero__btns .btn{ min-height:60px; padding:0 26px; font-size:1.0625rem; }
@media (min-width:960px) and (max-width:1319px){ .hero__btns{ gap:12px; } .hero__btns .btn{ padding:0 24px; font-size:1rem; } .hero .eyebrow{ letter-spacing:.15em; } .hero .eyebrow::after{ display:none; } }
.btn-play{ display:grid; place-items:center; width:26px; height:26px; }
.btn-play .ico{ width:20px; height:20px; }

/* phone: full-bleed portrait photo with text over a dark fade (mockup) */
@media (max-width:767px){
  .hero{ min-height:max(600px, calc(100svh - var(--hdr-h))); display:flex; align-items:flex-end; background:var(--dark); color:#fff; }
  .hero__media{ position:absolute; inset:0; }
  .hero__media img{ object-position:50% 0; }
  .hero__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(28,18,12,0) 18%, rgba(28,18,12,.55) 36%, rgba(28,18,12,.86) 52%, rgba(28,18,12,.95) 70%, #1c120c 100%); }
  .hero__body{ padding:0 calc(var(--gutter) + 8px) 44px; width:100%; }
  .hero .eyebrow{ color:#f3e6d6; }
  .hero h1{ color:#fff; font-size:clamp(2.4rem, 10.6vw, 3.1rem); }
  .hero h1 .accent{ color:var(--gold-light); }
  .hero__lead{ color:#efe3d6; font-size:1.0625rem; margin-top:18px; }
  .hero__btns{ margin-top:28px; }
  .hero__btns .btn--primary{ width:100%; }
  .hero__btns .btn--outline{ display:none; }
}
/* tablet: photo on top, text below */
@media (min-width:768px) and (max-width:959px){
  .hero__media{ aspect-ratio:16 / 10; }
  .hero__media img{ object-position:30% 50%; }
  .hero__body{ padding:44px var(--gutter) 56px; }
  .hero h1{ font-size:3.4rem; }
}
/* desktop: photo left (58%), text right */
@media (min-width:960px){
  .hero{ display:grid; grid-template-columns:minmax(0,56fr) minmax(0,44fr); min-height:clamp(560px, 42vw + 80px, 720px); }
  .hero__media{ position:relative; }
  .hero__media img{ position:absolute; inset:0; object-position:22% 50%; }
  .hero__body{ display:flex; flex-direction:column; justify-content:center; padding:56px clamp(24px, 3vw, 48px) 56px clamp(32px, 4.4vw, 72px); }
  .hero__body > *{ max-width:560px; }
}

/* ==========================================================================
   TikTok videos (D07, 2 cards → mobile 2 columns, no swiping)
   ========================================================================== */
.videos{ background:var(--cream); padding-block:var(--sec-y); }
.videos__grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  grid-template-areas:"intro intro" "v1 v2" "cta cta"; gap:12px;
}
.videos__intro{ grid-area:intro; text-align:center; margin-bottom:16px; }
.videos__intro .eyebrow{ margin-inline:auto; }
.videos__intro .lead{ max-width:520px; margin-inline:auto; }
.vcard--1{ grid-area:v1; }
.vcard--2{ grid-area:v2; }
.videos__cta{ grid-area:cta; display:flex; justify-content:center; margin-top:16px; }
.videos__cta .btn{ width:100%; }
.videos__cta .ico--fill{ width:20px; height:20px; }

.vcard{
  position:relative; aspect-ratio:9 / 16; border-radius:var(--r); overflow:hidden; isolation:isolate;
  background:#1a110b; box-shadow:var(--shadow);
}
.vcard video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vcard::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(20,12,8,0) 55%, rgba(20,12,8,.85) 100%); }
.vcard__hit{ position:absolute; inset:0; z-index:2; }
.vcard__meta{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:3; pointer-events:none;
  display:flex; align-items:center; gap:10px; color:#fff;
}
.vcard__badge{ display:grid; place-items:center; width:34px; height:34px; flex:0 0 auto; border-radius:50%; background:#000; }
.vcard__badge .ico{ width:16px; height:16px; }
.vcard__meta strong{ display:block; font-size:.875rem; line-height:1.25; font-weight:700; }
.vcard__meta small{ display:block; font-size:.75rem; line-height:1.3; opacity:.9; margin-top:2px; }
.vcard__toggle{
  position:absolute; top:10px; right:10px; z-index:4;
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:rgba(20,12,8,.5); color:#fff; backdrop-filter:blur(6px);
}
.vcard__toggle .ico{ width:18px; height:18px; }
.vcard__toggle .ico-play{ display:none; }
.vcard.is-paused .vcard__toggle .ico-play{ display:block; }
.vcard.is-paused .vcard__toggle .ico-pause{ display:none; }

@media (min-width:600px){
  .vcard__meta{ left:16px; right:16px; bottom:16px; gap:12px; }
  .vcard__meta strong{ font-size:1rem; }
  .vcard__meta small{ font-size:.8125rem; }
}
@media (min-width:768px){
  .videos__grid{ grid-template-columns:repeat(2, minmax(0, 300px)); justify-content:center; gap:24px; }
  .videos__cta .btn{ width:auto; }
}
@media (min-width:1024px){
  .videos__grid{
    grid-template-columns:minmax(0,1fr) repeat(2, minmax(0, 290px));
    grid-template-areas:"intro v1 v2" "cta v1 v2"; column-gap:32px; row-gap:0; justify-content:stretch;
  }
  .videos__intro{ text-align:left; align-self:end; margin:0; padding-right:clamp(0px, 3vw, 56px); }
  .videos__intro .eyebrow{ margin-inline:0; }
  .videos__intro .lead{ margin-inline:0; }
  .videos__cta{ justify-content:flex-start; align-self:start; margin-top:32px; }
}

/* ==========================================================================
   Featured pieces (D13 → M08): 8 on desktop, 6 on tablet/phone
   ========================================================================== */
.pieces{ padding-block:var(--sec-y); }
.pieces__head{ display:flex; flex-direction:column; gap:14px; }
.pieces__head .sec-head{ margin-bottom:0; }
.pieces__all{ display:none; }
.pieces__grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:28px; }
.piece{ display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:box-shadow .25s, transform .25s var(--ease); }
.piece:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
.piece__media{ position:relative; aspect-ratio:4 / 5; overflow:hidden; background:var(--sand); }
.piece__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.piece:hover .piece__media img{ transform:scale(1.04); }
.piece__body{ display:flex; flex-direction:column; flex:1; padding:12px 12px 14px; }
.piece__name{ font-family:var(--f-head); font-size:1.0625rem; line-height:1.2; font-weight:700; color:var(--ink); }
.piece__note{ margin-top:4px; margin-bottom:14px; font-size:.8125rem; line-height:1.45; color:var(--muted); }
.piece__ask{
  margin-top:auto; display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 12px; border-radius:var(--pill);
  border:1.5px solid var(--caramel); color:var(--caramel-d); font-size:.875rem; font-weight:600;
  transition:background-color .2s, color .2s;
}
.piece__ask:hover{ background:var(--caramel); color:#fff; }
.piece__ask .ico{ width:18px; height:18px; }
.pieces__grid--home .piece:nth-child(n+7){ display:none; }

@media (min-width:768px){
  .pieces__grid{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:22px; }
  .piece__body{ padding:16px 18px 18px; }
  .piece__name{ font-size:1.3rem; }
  .piece__note{ font-size:.9375rem; }
}
@media (min-width:1024px){
  .pieces__head{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:40px; }
  .pieces__head .sec-head{ max-width:640px; }
  .pieces__all{ display:inline-flex; align-items:center; gap:10px; min-height:44px; font-weight:600; color:var(--caramel-d); white-space:nowrap; }
  .pieces__all:hover{ text-decoration:underline; text-underline-offset:4px; }
  .pieces__grid{ margin-top:44px; }
}
@media (min-width:1120px){
  .pieces__grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:26px; }
  .pieces__grid--home .piece:nth-child(n+7){ display:flex; }
}

/* ==========================================================================
   Trust strip (D05 → M03 compact)
   ========================================================================== */
.trust{ background:var(--dark); color:var(--on-dark); padding:34px 0; }
.trust__list{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 16px; }
.trust__item{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.trust__ico{ display:grid; place-items:center; width:50px; height:50px; border-radius:50%; background:rgba(217,168,110,.14); color:var(--gold-light); flex:0 0 auto; }
.trust__ico .ico{ width:24px; height:24px; }
.trust__item strong{ display:block; font-size:.9375rem; line-height:1.3; font-weight:700; color:#fff; }
.trust__item span span{ display:block; font-size:.8125rem; line-height:1.45; color:var(--on-dark-muted); margin-top:3px; }
@media (min-width:960px){
  .trust{ padding:38px 0; }
  .trust__list{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:0; }
  .trust__item{ flex-direction:row; align-items:center; gap:16px; padding:0 24px; border-left:1px solid rgba(255,255,255,.14); }
  .trust__item:first-child{ border-left:0; padding-left:0; }
  .trust__ico{ width:58px; height:58px; }
  .trust__ico .ico{ width:28px; height:28px; }
  .trust__item strong{ font-size:1.0625rem; }
  .trust__item span span{ font-size:.875rem; }
}

/* ==========================================================================
   Services (D09 image cards → M04 list with thumbnails)
   ========================================================================== */
.services{ background:var(--cream); padding-block:var(--sec-y); }
.svc-grid{ display:grid; gap:12px; }
.svc{
  display:grid; grid-template-columns:88px minmax(0,1fr) 20px; gap:14px; align-items:center;
  padding:10px 14px 10px 10px; min-height:108px; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm);
  transition:box-shadow .25s, transform .25s var(--ease);
}
.svc:hover{ box-shadow:var(--shadow); transform:translateY(-2px); }
.svc__media{ width:88px; height:88px; border-radius:10px; overflow:hidden; background:var(--sand); }
.svc__media img{ width:100%; height:100%; object-fit:cover; }
.svc__title{ font-family:var(--f-head); font-size:1.1875rem; line-height:1.2; font-weight:700; color:var(--ink); }
.svc__text{ display:block; margin-top:4px; font-size:.875rem; line-height:1.45; color:var(--muted); }
.svc__more{ display:none; }
.svc__chev{ width:20px; height:20px; color:var(--caramel); }
@media (min-width:768px){
  .svc-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px; }
  .svc{ display:flex; flex-direction:column; align-items:stretch; padding:0; gap:0; border-radius:var(--r); overflow:hidden; }
  .svc__media{ width:100%; height:auto; aspect-ratio:4 / 3; border-radius:0; }
  .svc__body{ display:flex; flex-direction:column; flex:1; padding:20px 22px 22px; }
  .svc__title{ font-size:1.375rem; }
  .svc__text{ font-size:.9375rem; margin-top:8px; }
  .svc__more{ display:inline-flex; align-items:center; gap:8px; margin-top:auto; padding-top:16px; font-weight:600; font-size:.9375rem; color:var(--caramel-d); }
  .svc:hover .svc__more .ico{ transform:translateX(3px); }
  .svc__more .ico{ transition:transform .2s var(--ease); width:18px; height:18px; }
  .svc__chev{ display:none; }
}
@media (min-width:1120px){ .svc-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; } }

/* ==========================================================================
   About teaser (D06 → M02)
   ========================================================================== */
.about{ padding-block:var(--sec-y); }
.about__grid{ display:grid; gap:28px; }
.about__media{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4 / 3; box-shadow:var(--shadow); }
.about__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.about__badge{
  position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:8px;
  padding:9px 14px; border-radius:var(--pill); background:#fff; color:var(--ink); font-size:.8125rem; font-weight:700; box-shadow:var(--shadow-sm);
}
.about__badge .ico{ width:16px; height:16px; color:var(--caramel-d); }
.about__copy .lead + .lead{ margin-top:14px; }
.features{ display:none; }
.btn-row{ display:grid; grid-template-columns:1fr; gap:12px; margin-top:26px; }
@media (min-width:600px){ .btn-row{ display:flex; flex-wrap:wrap; gap:14px; } }
@media (min-width:960px){
  .about__grid{ grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(40px, 5vw, 80px); align-items:center; }
  .about__media{ aspect-ratio:5 / 4.4; }
  .about__badge{ left:22px; bottom:22px; padding:11px 18px; font-size:.9375rem; }
  .features{ display:grid; gap:20px; margin-top:28px; }
  .feature{ display:grid; grid-template-columns:52px minmax(0,1fr); gap:16px; align-items:center; }
  .feature__ico{ display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--sand); color:var(--caramel-d); }
  .feature__ico .ico{ width:24px; height:24px; }
  .feature h3{ font-size:1.0625rem; font-weight:700; color:var(--ink); line-height:1.3; }
  .feature p{ font-size:.9375rem; line-height:1.5; color:var(--muted); }
}

/* ==========================================================================
   Visit / contact (D17 → M17)
   ========================================================================== */
.visit{ background:var(--cream); padding-block:var(--sec-y); }
.visit__grid{ display:grid; gap:28px; }
.visit__media{ border-radius:var(--r); overflow:hidden; aspect-ratio:3 / 2; box-shadow:var(--shadow); }
.visit__media img{ width:100%; height:100%; object-fit:cover; }
.vlist{ display:grid; gap:12px; margin-top:24px; }
.vrow{
  display:flex; align-items:center; gap:16px; min-height:80px; padding:14px 16px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); transition:border-color .2s, box-shadow .2s;
}
a.vrow:hover{ border-color:var(--caramel); box-shadow:var(--shadow-sm); }
.vrow__ico{ display:grid; place-items:center; width:52px; height:52px; flex:0 0 auto; border-radius:50%; background:var(--sand); color:var(--caramel-d); }
.vrow__ico .ico{ width:24px; height:24px; }
.vrow__copy{ flex:1; min-width:0; }
.vrow__copy strong{ display:block; font-size:1.0625rem; line-height:1.25; color:var(--ink); }
.vrow__copy span{ display:block; margin-top:3px; font-size:.9375rem; line-height:1.4; color:var(--muted); overflow-wrap:anywhere; }
.vrow__chev{ width:20px; height:20px; color:var(--caramel); }
.visit .btn-row{ grid-template-columns:1fr; }
@media (min-width:960px){
  .visit__grid{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:clamp(40px, 5vw, 80px); align-items:stretch; }
  .visit__media{ aspect-ratio:auto; min-height:100%; }
}

/* ==========================================================================
   Closing CTA band (D16 idea) — desktop/tablet only
   ========================================================================== */
.cta-band{ display:none; position:relative; overflow:hidden; background:var(--darker); color:#fff; }
@media (min-width:768px){ .cta-band{ display:block; } }
.cta-band__bg{ position:absolute; inset:0; }
.cta-band__bg img{ width:100%; height:100%; object-fit:cover; object-position:30% 60%; }
.cta-band__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(28,18,12,.25) 0%, rgba(28,18,12,.62) 38%, rgba(28,18,12,.94) 62%); }
.cta-band__inner{ position:relative; display:flex; justify-content:flex-end; padding-block:clamp(72px, 7vw, 120px); }
.cta-band__box{ max-width:540px; }
.cta-band .eyebrow{ color:#f3e6d6; }
.cta-band .h2{ color:#fff; }
.cta-band .accent{ color:var(--gold-light); }
.cta-band .lead{ color:#eadccd; }
.cta-band .btn-row{ margin-top:30px; }
@media (min-width:600px){ .cta-band .btn-row{ display:flex; } }
.cta-band--always{ display:block; }
@media (max-width:767px){
  .cta-band--always .cta-band__bg::after{ background:linear-gradient(180deg, rgba(28,18,12,.7), rgba(28,18,12,.9)); }
  .cta-band--always .cta-band__inner{ justify-content:flex-start; padding-block:56px; }
  .cta-band__social{ flex-wrap:wrap; }
}
.cta-band__social{ display:flex; align-items:center; gap:14px; margin-top:28px; font-size:.9375rem; color:#eadccd; }
.cta-band__social .social a{ color:#fff; background:rgba(255,255,255,.1); width:44px; height:44px; }
.cta-band__social .social a:hover{ background:var(--caramel); color:#fff; }

/* ==========================================================================
   Footer (D20 → M20)
   ========================================================================== */
.footer{ background:var(--darker); color:var(--on-dark-muted); padding-top:clamp(48px, 6vw, 84px); font-size:.9375rem; }
.footer__grid{ display:grid; gap:36px; }
.footer .brand__name{ color:#fff; }
.footer .brand__icon{ color:#e9dccd; }
.footer .brand__sub{ color:var(--gold-light); }
.footer .brand__tag{ display:block; color:#cdb79f; }
.footer__about p{ margin-top:20px; max-width:36ch; line-height:1.65; }
.footer__about .social{ margin-top:20px; gap:8px; }
.footer__about .social a{ width:44px; height:44px; background:#2e2018; color:#fff; }
.footer__about .social a:hover{ background:var(--caramel); }
.footer__title{ font-family:var(--f-body); font-size:.8125rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-light); margin-bottom:12px; }
.footer__links a{ display:flex; align-items:center; min-height:44px; color:#efe3d6; transition:color .2s; }
.footer__links a:hover{ color:#fff; text-decoration:underline; text-underline-offset:4px; }
.footer__contact li{ display:grid; grid-template-columns:24px 1fr; gap:12px; padding:8px 0; }
.footer__contact .ico{ color:var(--gold-light); margin-top:3px; }
.footer__contact strong{ display:block; color:#fff; font-weight:600; }
.footer__contact a:hover strong{ text-decoration:underline; text-underline-offset:3px; }
.footer__tel{ display:flex; align-items:center; min-height:40px; color:#efe3d6; }
.footer__tel:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.footer__bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px;
  margin-top:48px; padding-block:22px calc(22px + 72px); border-top:1px solid rgba(255,255,255,.1); font-size:.875rem;
}
.footer__bottom a{ color:#fff; font-weight:600; text-decoration:underline; text-underline-offset:3px; }
.footer__grid{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:32px 20px; }
.footer__about{ grid-column:1 / -1; }
.footer__col--contact{ grid-column:1 / -1; order:1; }
@media (min-width:600px){ .footer__grid{ grid-template-columns:1fr 1fr; } .footer__col--contact{ grid-column:auto; order:0; } }
@media (min-width:1024px){
  .footer__grid{ grid-template-columns:1.5fr .8fr 1.1fr 1fr; gap:clamp(32px, 4vw, 64px); }
  .footer__about{ grid-column:auto; }
  .footer__bottom{ padding-bottom:26px; }
}

/* ==========================================================================
   Floating WhatsApp button
   ========================================================================== */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:70;
  display:inline-flex; align-items:center; gap:10px; height:60px; min-width:60px; padding:0 18px;
  justify-content:center; border-radius:var(--pill); background:var(--wa); color:#fff;
  box-shadow:0 14px 30px -10px rgba(0,0,0,.45); transition:transform .2s var(--ease);
}
.wa-float:hover{ transform:translateY(-2px) scale(1.03); }
.wa-float.is-hidden{ opacity:0; visibility:hidden; transform:translateY(16px); }
.wa-float{ transition:transform .25s var(--ease), opacity .25s, visibility .25s; }
.wa-float .ico{ width:30px; height:30px; }
.wa-float__label{ display:none; font-weight:700; font-size:.9375rem; }
@media (min-width:1120px){ .wa-float{ right:28px; bottom:28px; } .wa-float__label{ display:inline; } }
@media (max-width:1119px){ .wa-float{ padding:0; width:60px; } }

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}

/* ==========================================================================
   INNER PAGES
   ========================================================================== */

/* ---------- page hero (D10 → M01): photo right with fade, photo on top on phones ---------- */
.page-hero{ position:relative; background:var(--sand); overflow:hidden; border-bottom:1px solid var(--line); }
.page-hero__media{ aspect-ratio:16 / 9; }
.page-hero__media img{ width:100%; height:100%; object-fit:cover; }
.page-hero__body{ padding:24px 0 40px; }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:-10px 0 6px; font-size:.875rem; color:var(--muted); }
.crumbs a{ display:inline-flex; align-items:center; min-height:44px; color:var(--caramel-d); font-weight:600; }
.crumbs a:hover{ text-decoration:underline; text-underline-offset:3px; }
.crumbs .ico{ width:14px; height:14px; color:var(--caramel); }
.page-hero h1{ font-family:var(--f-head); font-size:clamp(2.35rem, 1.5rem + 2.7vw, 4rem); line-height:1.05; font-weight:700; letter-spacing:-.02em; color:var(--ink); text-wrap:balance; }
.page-hero .lead{ max-width:560px; }
.page-hero .btn-row{ margin-top:28px; }
@media (min-width:768px){ .page-hero__media{ aspect-ratio:21 / 9; } }
@media (min-width:960px){
  .page-hero{ min-height:460px; display:flex; align-items:center; }
  .page-hero__media{ position:absolute; top:0; right:0; bottom:0; width:56%; aspect-ratio:auto; }
  .page-hero__media::before{ content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, var(--sand) 0%, rgba(244,238,230,.85) 12%, rgba(244,238,230,.25) 30%, rgba(244,238,230,0) 44%); }
  .page-hero__inner{ position:relative; z-index:2; width:100%; }
  .page-hero__body{ max-width:540px; padding:72px 0; }
}

/* ---------- story split (D06 → M02) ---------- */
.story{ padding-block:var(--sec-y); }
.story__grid{ display:grid; gap:28px; }
.story__media{ border-radius:var(--r); overflow:hidden; aspect-ratio:4 / 3; box-shadow:var(--shadow); }
.story__media img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.story__copy .lead + .lead{ margin-top:14px; }
@media (max-width:767px){ .lead--more{ display:none; } }
@media (min-width:960px){
  .story__grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px, 6vw, 96px); align-items:center; }
  .story__media{ aspect-ratio:4 / 5; }
}

/* ---------- value cards (M03 list → 4 cards) ---------- */
.values{ background:var(--cream); padding-block:var(--sec-y); }
.values__list{ display:grid; gap:14px; }
.value{ display:grid; grid-template-columns:56px minmax(0,1fr); gap:16px; align-items:start; padding:18px; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); }
.value__ico{ display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--sand); color:var(--caramel-d); }
.value__ico .ico{ width:26px; height:26px; }
.value h3{ font-family:var(--f-head); font-size:1.25rem; line-height:1.2; font-weight:700; color:var(--ink); margin-top:4px; }
.value p{ margin-top:6px; font-size:.9375rem; line-height:1.55; color:var(--muted); }
@media (min-width:768px){ .values__list{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:20px; } }
@media (min-width:1120px){
  .values__list{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; }
  .value{ grid-template-columns:1fr; padding:28px 24px; gap:18px; }
  .value__ico{ width:60px; height:60px; }
}

/* ---------- workshop gallery (D15 → M11: 1 large + 2 small) ---------- */
.gallery{ padding-block:var(--sec-y); }
.gallery__grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.gallery__item{ position:relative; margin:0; border-radius:var(--r-sm); overflow:hidden; background:var(--sand); aspect-ratio:4 / 3; }
.gallery__item img{ width:100%; height:100%; object-fit:cover; }
.gallery__item--lg{ grid-column:1 / -1; }
.gallery__item figcaption{ position:absolute; left:10px; bottom:10px; right:10px; display:inline-block; width:fit-content; max-width:calc(100% - 20px); padding:6px 12px; border-radius:var(--pill); background:rgba(255,255,255,.94); color:var(--ink); font-size:.75rem; font-weight:700; line-height:1.3; }
.gallery__item:nth-child(4){ display:none; }
@media (min-width:768px){
  .gallery__grid{ grid-template-columns:2fr 1fr 1fr; grid-template-rows:repeat(2, clamp(200px, 21vw, 290px)); gap:16px; }
  .gallery__item{ aspect-ratio:auto; border-radius:var(--r); }
  .gallery__item--lg{ grid-column:1; grid-row:1 / span 2; }
  .gallery__item:nth-child(4){ display:block; grid-column:2 / span 2; }
  .gallery__item figcaption{ left:16px; bottom:16px; font-size:.875rem; padding:8px 14px; }
}

/* ---------- catalogue: grouped lookbook (jump links, groups, gallery lightbox) ---------- */
.catalogue{ padding-block:clamp(36px, 3vw + 24px, 64px) var(--sec-y); }
.cat-jump{ display:flex; flex-wrap:wrap; gap:8px; }
.cat-jump a{
  display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:0 14px; border-radius:var(--pill);
  border:1.5px solid var(--line); background:#fff; color:var(--ink); font-size:.8125rem; font-weight:600;
  transition:border-color .2s, background-color .2s, color .2s;
}
.cat-jump a:hover{ border-color:var(--caramel); color:var(--caramel-d); }
.cat-jump small{ font-size:.75rem; font-weight:700; color:var(--muted); }
@media (min-width:600px){ .cat-jump{ gap:10px; } .cat-jump a{ font-size:.9375rem; padding:0 18px; } }

.cat-group{ padding-top:clamp(40px, 3vw + 24px, 64px); scroll-margin-top:-24px; }
.cat-group + .cat-group{ margin-top:clamp(40px, 3vw + 24px, 64px); border-top:1px solid var(--line); }
.cat-group__head{ display:flex; flex-direction:column; gap:10px; margin-bottom:20px; }
.cat-group__title{ font-family:var(--f-head); font-size:clamp(1.65rem, 1.25rem + 1.3vw, 2.4rem); line-height:1.1; font-weight:700; color:var(--ink); }
.cat-group__title small{ font-family:var(--f-body); font-size:.875rem; font-weight:600; color:var(--muted); margin-left:8px; letter-spacing:0; }
.cat-group__head p{ max-width:600px; color:var(--muted); font-size:.9375rem; line-height:1.6; }
.cat-group__ask{ display:none; }
@media (min-width:1024px){
  .cat-group__head{ flex-direction:row; align-items:flex-end; justify-content:space-between; gap:32px; margin-bottom:28px; }
  .cat-group__head p{ font-size:1rem; margin-top:8px; }
  .cat-group__ask{ display:inline-flex; flex:0 0 auto; min-height:48px; padding:0 22px; font-size:.9375rem; }
}

.cat-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.cat-grid .piece[hidden]{ display:none; }
@media (min-width:600px) and (max-width:1023px){
  .cat-grid{ gap:18px; }
  .cat-grid .piece__media{ aspect-ratio:1 / 1; }
}
@media (min-width:1024px){ .cat-grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; } }
.cat-group__more{ display:flex; justify-content:center; margin-top:20px; }
.cat-group__more[hidden]{ display:none; }
@media (max-width:599px){ .cat-group__more .btn{ width:100%; } }

.piece__zoom{ display:block; width:100%; height:100%; cursor:zoom-in; }
.piece__zoom img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.piece:hover .piece__zoom img{ transform:scale(1.04); }
.piece__count{
  position:absolute; right:8px; bottom:8px; display:inline-flex; align-items:center; gap:5px; padding:4px 10px;
  border-radius:var(--pill); background:rgba(20,12,8,.78); color:#fff; font-size:.75rem; font-weight:700; pointer-events:none;
}
.piece__count .ico{ width:14px; height:14px; }

/* "need another size" card that keeps each grid row full */
.piece--cta{ background:var(--dark); border-color:var(--dark); color:var(--on-dark); }
.piece--cta:hover{ transform:none; box-shadow:none; }
.piece__cta{ display:flex; flex-direction:column; justify-content:center; gap:10px; height:100%; padding:20px 14px; }
.piece__cta-ico{ display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:rgba(217,168,110,.16); color:var(--gold-light); }
.piece__cta-ico .ico{ width:24px; height:24px; }
.piece__cta h3{ font-family:var(--f-head); font-size:1.15rem; line-height:1.2; font-weight:700; color:#fff; }
.piece__cta p{ font-size:.8125rem; line-height:1.5; color:var(--on-dark-muted); }
.piece__cta .btn{ min-height:44px; padding:0 14px; font-size:.875rem; margin-top:6px; }
@media (min-width:600px){ .piece__cta{ padding:28px 24px; gap:12px; } .piece__cta h3{ font-size:1.4rem; } .piece__cta p{ font-size:.9375rem; } }

/* gallery lightbox */
.lightbox{
  width:min(1040px, calc(100vw - 24px)); max-height:calc(100dvh - 24px); padding:0; border:0; border-radius:var(--r);
  background:#fff; color:var(--text); box-shadow:0 40px 80px -30px rgba(0,0,0,.6); overflow:auto;
}
.lightbox::backdrop{ background:rgba(20,12,8,.82); }
.lightbox__inner{ display:grid; }
.lightbox__stage{ position:relative; display:grid; place-items:center; height:min(56vh, 520px); background:var(--darker); }
.lightbox__stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.lightbox__nav{
  position:absolute; top:50%; z-index:2; display:grid; place-items:center; width:46px; height:46px; margin-top:-23px;
  border-radius:50%; background:rgba(255,255,255,.94); color:var(--ink); box-shadow:var(--shadow-sm);
}
.lightbox__nav .ico{ width:22px; height:22px; stroke-width:2.4; }
.lightbox__nav--prev{ left:10px; }
.lightbox__nav--next{ right:10px; }
.lightbox__nav[hidden]{ display:none; }
.lightbox__counter{
  position:absolute; left:12px; bottom:12px; padding:4px 10px; border-radius:var(--pill);
  background:rgba(20,12,8,.78); color:#fff; font-size:.75rem; font-weight:700;
}
.lightbox__counter[hidden]{ display:none; }
.lightbox__body{ padding:20px 20px 24px; }
.lightbox__cat{ font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--caramel-d); margin-bottom:6px; }
.lightbox__body h2{ font-family:var(--f-head); font-size:1.6rem; line-height:1.15; color:var(--ink); }
.lightbox__body p{ margin-top:6px; color:var(--muted); }
.lightbox__thumbs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.lightbox__thumbs[hidden]{ display:none; }
.lightbox__thumbs button{ width:60px; height:60px; border-radius:10px; overflow:hidden; border:2px solid transparent; opacity:.7; transition:opacity .2s, border-color .2s; }
.lightbox__thumbs button[aria-current="true"]{ border-color:var(--caramel); opacity:1; }
.lightbox__thumbs img{ width:100%; height:100%; object-fit:cover; }
.lightbox__body .btn{ margin-top:20px; width:100%; }
.lightbox__close{ position:absolute; top:10px; right:10px; z-index:3; display:grid; place-items:center; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.94); color:var(--ink); box-shadow:var(--shadow-sm); }
.lightbox__close .ico{ width:22px; height:22px; stroke-width:2.2; }
@media (min-width:768px){
  .lightbox__inner{ grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:stretch; }
  .lightbox__stage{ height:min(80vh, 720px); }
  .lightbox__body{ padding:40px 32px; align-self:center; }
  .lightbox__body h2{ font-size:2rem; }
  .lightbox__thumbs button{ width:68px; height:68px; }
}

/* ---------- "Our Work" videos (tap to play, plays on hover with a mouse) ---------- */
.ourwork{ background:var(--cream); padding-block:var(--sec-y); }
.ourwork__grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
@media (min-width:600px){ .ourwork__grid{ gap:18px; } }
@media (min-width:1024px){ .ourwork__grid{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; } }
.wcard{ position:relative; aspect-ratio:9 / 16; border-radius:var(--r); overflow:hidden; isolation:isolate; background:#1a110b; box-shadow:var(--shadow); }
.wcard video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wcard::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(20,12,8,0) 55%, rgba(20,12,8,.85) 100%); }
.wcard__btn{ position:absolute; inset:0; z-index:2; display:grid; place-items:center; width:100%; height:100%; }
.wcard__play{
  display:grid; place-items:center; width:64px; height:64px; border-radius:50%;
  background:rgba(20,12,8,.55); border:2px solid rgba(255,255,255,.9); color:#fff; backdrop-filter:blur(6px);
  transition:opacity .25s, transform .25s var(--ease), background-color .25s;
}
.wcard__play .ico{ width:24px; height:24px; margin-left:3px; }
.wcard__btn:hover .wcard__play{ background:var(--caramel); transform:scale(1.06); }
.wcard.is-playing .wcard__play{ opacity:0; }
.wcard__meta{ position:absolute; left:12px; right:12px; bottom:12px; z-index:3; pointer-events:none; color:#fff; }
.wcard__meta strong{ display:block; font-size:.875rem; line-height:1.25; font-weight:700; }
.wcard__meta small{ display:block; margin-top:2px; font-size:.75rem; opacity:.9; }
@media (min-width:600px){ .wcard__meta{ left:16px; right:16px; bottom:16px; } .wcard__meta strong{ font-size:1rem; } .wcard__meta small{ font-size:.8125rem; } }

/* ---------- service detail rows (D06 alternating → M02) ---------- */
.svc-detail{ padding-block:var(--sec-y); }
.svc-row{ display:grid; gap:24px; }
.svc-row + .svc-row{ margin-top:clamp(56px, 6vw, 96px); }
.svc-row__media{ border-radius:var(--r); overflow:hidden; aspect-ratio:3 / 2; box-shadow:var(--shadow); }
@media (min-width:960px){ .svc-row__media{ aspect-ratio:4 / 3; } }
.svc-row__media img{ width:100%; height:100%; object-fit:cover; }
.svc-row__num{ display:block; font-family:var(--f-head); font-size:1rem; font-weight:700; color:var(--gold); margin-bottom:8px; }
.ticks{ display:grid; gap:10px; margin-top:22px; }
.ticks li{ display:grid; grid-template-columns:26px minmax(0,1fr); gap:12px; align-items:start; font-size:1rem; line-height:1.5; color:var(--text); }
.ticks .tick{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:var(--sand); color:var(--caramel-d); margin-top:-1px; }
.ticks .tick .ico{ width:15px; height:15px; stroke-width:2.6; }
@media (min-width:960px){
  .svc-row{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px, 6vw, 96px); align-items:center; }
  .svc-row:nth-child(even) .svc-row__media{ order:2; }
}

/* ---------- process steps ---------- */
.process{ background:var(--cream); padding-block:var(--sec-y); }
.steps{ display:grid; gap:0; counter-reset:step; }
.step{ position:relative; display:grid; grid-template-columns:52px minmax(0,1fr); gap:16px; padding-bottom:26px; }
.step:last-child{ padding-bottom:0; }
.step::before{ counter-increment:step; content:counter(step); display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:var(--caramel); color:#fff; font-family:var(--f-head); font-size:1.35rem; font-weight:700; position:relative; z-index:1; }
.step::after{ content:""; position:absolute; left:25px; top:52px; bottom:0; width:2px; background:var(--line); }
.step:last-child::after{ display:none; }
.step h3{ font-family:var(--f-head); font-size:1.25rem; font-weight:700; color:var(--ink); line-height:1.25; margin-top:12px; }
.step p{ margin-top:4px; font-size:.9375rem; line-height:1.55; color:var(--muted); }
@media (min-width:960px){
  .steps{ grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px; }
  .step{ grid-template-columns:1fr; gap:18px; padding:0; }
  .step::before{ width:60px; height:60px; font-size:1.5rem; }
  .step::after{ left:72px; right:-14px; top:30px; bottom:auto; width:auto; height:2px; }
  .step h3{ margin-top:0; }
}

/* ---------- FAQ (M16 accordion) ---------- */
.faq{ padding-block:var(--sec-y); }
.faq__grid{ display:grid; gap:28px; }
.faq__items{ display:grid; gap:12px; }
.faq details{ border:1px solid var(--line); border-radius:var(--r-sm); background:#fff; overflow:hidden; }
.faq details[open]{ background:var(--cream); }
.faq summary{ list-style:none; display:flex; align-items:center; justify-content:space-between; gap:14px; min-height:60px; padding:16px 18px; cursor:pointer; font-weight:700; font-size:1.0625rem; line-height:1.35; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--sand); color:var(--caramel-d); font-size:1.4rem; font-weight:500; line-height:1; }
.faq details[open] summary::after{ content:"−"; }
.faq details p{ padding:0 18px 18px; color:var(--muted); line-height:1.6; }
@media (min-width:960px){ .faq__grid{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:clamp(40px, 6vw, 96px); align-items:start; } }

/* ---------- contact page: details + WhatsApp form (D18 → M17) ---------- */
.contact{ padding-block:var(--sec-y); }
.contact__grid{ display:grid; gap:32px; }
.qr-card{ display:none; }
@media (min-width:960px){
  .contact__grid{ grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(40px, 5vw, 72px); align-items:start; }
  .qr-card{ display:flex; gap:20px; align-items:center; margin-top:14px; padding:18px; background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); }
  .qr-card img{ width:124px; height:124px; flex:0 0 auto; padding:8px; border:1px solid var(--line); border-radius:12px; background:#fff; }
  .qr-card h3{ font-size:1.0625rem; color:var(--ink); }
  .qr-card p{ margin-top:4px; font-size:.9375rem; line-height:1.5; color:var(--muted); }
}
.form-card{ padding:24px 18px; background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); }
.form-card .h2{ font-size:clamp(1.75rem, 1.4rem + 1vw, 2.3rem); }
.form-card > p{ margin-top:8px; color:var(--muted); }
.fields{ display:grid; gap:16px; margin-top:22px; }
.field label{ display:block; margin-bottom:6px; font-weight:700; font-size:.9375rem; color:var(--ink); }
.field label small{ font-weight:500; color:var(--muted); }
.field input,.field select,.field textarea{
  width:100%; min-height:52px; padding:12px 14px; border:1.5px solid var(--line); border-radius:12px; background:var(--cream);
  font:inherit; font-size:1rem; color:var(--ink);
}
.field textarea{ min-height:120px; resize:vertical; }
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--caramel); box-shadow:0 0 0 3px rgba(154,95,38,.18); background:#fff; }
.field.has-error input{ border-color:#a3261b; }
.field__error{ display:none; margin-top:6px; font-size:.875rem; font-weight:600; color:#a3261b; }
.field.has-error .field__error{ display:block; }
.form-card .btn{ width:100%; margin-top:22px; }
.form-note{ margin-top:12px; text-align:center; font-size:.875rem; color:var(--muted); }
.form-note a{ white-space:nowrap; color:var(--caramel-d); font-weight:600; text-decoration:underline; text-underline-offset:3px; }
@media (min-width:600px){
  .form-card{ padding:32px; }
  .fields{ grid-template-columns:1fr 1fr; }
  .field--full{ grid-column:1 / -1; }
}

/* ---------- map ---------- */
.map-sec{ background:var(--cream); padding-block:var(--sec-y); }
.map-card{ display:grid; gap:0; background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
.map-card__map{ position:relative; min-height:300px; background:var(--sand); }
.map-card__map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-card__body{ padding:24px 20px 26px; }
.map-card__body .vlist{ margin-top:18px; }
@media (min-width:960px){
  .map-card{ grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); }
  .map-card__map{ min-height:460px; }
  .map-card__body{ padding:40px; align-self:center; }
}

/* ---------- social cards (D16 → M19) ---------- */
.social-sec{ padding-block:var(--sec-y); }
.social-cards{ display:grid; gap:12px; }
.scard{ display:flex; align-items:center; gap:16px; min-height:84px; padding:14px 18px; border-radius:var(--r-sm); color:#fff; transition:transform .2s var(--ease); }
.scard:hover{ transform:translateY(-2px); }
.scard__ico{ display:grid; place-items:center; width:52px; height:52px; flex:0 0 auto; border-radius:50%; background:rgba(255,255,255,.14); }
.scard__ico .ico{ width:26px; height:26px; }
.scard__copy{ flex:1; min-width:0; }
.scard__copy strong{ display:block; font-size:1.125rem; }
.scard__copy span{ display:block; margin-top:2px; font-size:.875rem; opacity:.9; }
.scard .ico.chev{ width:20px; height:20px; }
.scard--tt{ background:#111; }
.scard--fb{ background:#1659c7; }
.scard--ig{ background:linear-gradient(45deg, #c13584, #833ab4 55%, #5851db); }
@media (min-width:768px){ .social-cards{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; } .scard{ padding:20px 22px; min-height:104px; } }

/* ---------- phone / WhatsApp number pills ---------- */
.numgroup{ display:grid; gap:8px; }
.numgroup__label{ display:flex; align-items:center; gap:8px; font-size:.9375rem; font-weight:700; color:var(--ink); }
.numgroup__label .ico{ width:18px; height:18px; color:var(--caramel-d); }
.pill-links{ display:flex; flex-wrap:wrap; gap:8px; }
.vrow__copy .pill-links{ margin-top:8px; }
.pill-link{
  display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border-radius:var(--pill);
  border:1.5px solid var(--line); background:#fff; color:var(--ink); font-size:.9375rem; font-weight:600; white-space:nowrap;
  transition:border-color .2s, color .2s, background-color .2s;
}
.pill-link:hover{ border-color:var(--caramel); color:var(--caramel-d); }