/* Nur Juwelier — concept E "De vitrine"
   Elk stuk ligt op zijn eigen ondergrond (linnen, fluweel, marmer), zoals in de vitrine aan de Hoofdweg.
   Goud uit het logo (#A07A2C) is de enige accentkleur: in het adresnummer, de jaartallen, de ringen,
   de beslisstap bij inkoop en de focusring. Alle custom properties hebben het voorvoegsel --nur-
   zodat ze niet botsen met Elementor (.e-con gebruikt o.a. --display, --gap, --width). */

:root{
  /* ondergronden */
  --nur-ground:#f8f4ed;      /* warm-wit: de pagina */
  --nur-tone:#f0e9de;        /* één stap dieper: banden, rijen */
  --nur-linen:#ece2d2;       /* linnen: familieverhaal, stemmen */
  --nur-sand:#e2d4bf;        /* zand: lade onder beelden */
  --nur-velvet:#251e19;      /* fluweel: de donkere velden */
  --nur-velvet-2:#342a23;
  --nur-velvet-3:#45382e;

  /* inkt */
  --nur-ink:#1f1915;
  --nur-text:#3a312a;
  --nur-muted:#675b4f;       /* 6.1:1 op warm-wit, 5.2:1 op linnen */
  --nur-on-dark:#f4ede2;
  --nur-on-dark-muted:#c4b8a7; /* 8.3:1 op fluweel */

  /* goud */
  --nur-gold:#a07a2c;        /* logo; alleen groot (≥24px) of als vorm: 3.6:1 op warm-wit */
  --nur-gold-deep:#7a5b1c;   /* kleine tekst in goud: 5.7:1 */
  --nur-gold-light:#d4b06a;  /* op fluweel: 8:1; met inkt erop: 8.6:1 */

  /* type */
  --nur-serif:'Marcellus','Times New Roman',serif;
  --nur-sans:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  --nur-fs-small:14px;
  --nur-fs-body:17px;
  --nur-fs-lead:19px;
  --nur-fs-h3:23px;
  --nur-fs-h2:clamp(36px,9.4vw,46px);

  /* ruimte */
  --nur-gutter:20px;
  --nur-section:88px;
  --nur-col-gap:16px;
  --nur-header:68px;

  /* vorm en beweging */
  --nur-r-pill:999px;
  --nur-ease-out:cubic-bezier(.23,1,.32,1);
  --nur-ease-in-out:cubic-bezier(.77,0,.175,1);
}
@media (min-width:768px){
  :root{--nur-gutter:40px;--nur-section:120px;--nur-col-gap:24px;--nur-fs-body:17px;--nur-fs-lead:20px;--nur-fs-h3:26px;--nur-fs-h2:clamp(48px,6vw,80px);--nur-header:80px}
}
@media (min-width:1200px){
  :root{--nur-gutter:56px;--nur-section:152px;--nur-col-gap:32px;--nur-fs-body:18px;--nur-fs-lead:22px;--nur-fs-h3:28px}
}
@media (min-width:1600px){
  :root{--nur-gutter:max(56px,calc((100vw - 1488px) / 2))}
}

/* ---------- basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nur-header) + 16px);-webkit-text-size-adjust:100%;interpolate-size:allow-keywords;background:var(--nur-ground)}
body{margin:0;background:var(--nur-ground);color:var(--nur-text);font:400 var(--nur-fs-body)/1.6 var(--nur-sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal}
::selection{background:var(--nur-gold-light);color:var(--nur-ink)}
input,textarea{caret-color:var(--nur-gold-deep)}
img{display:block;width:100%;height:100%;object-fit:cover}
figure{margin:0}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
button{cursor:pointer}
p{margin:0 0 1em;max-width:62ch}
h1,h2,h3{font-family:var(--nur-serif);font-weight:400;color:var(--nur-ink);margin:0;letter-spacing:-.01em;line-height:1.05;overflow-wrap:break-word;text-wrap:balance}
h2{font-size:var(--nur-fs-h2)}
h3{font-size:var(--nur-fs-h3);line-height:1.2;letter-spacing:0}
.icon{width:18px;height:18px;flex:none}
:focus-visible{outline:2px solid var(--nur-gold-deep);outline-offset:3px;border-radius:2px}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--nur-velvet);color:var(--nur-on-dark);padding:12px 16px;border-radius:4px}
.skip:focus{top:12px}
html{scrollbar-color:var(--nur-sand) var(--nur-ground)}

/* ---------- knoppen en links ---------- */
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:1px solid var(--nur-ink); /* taste-skill-ignore: rand van de tweede knop (ghost) */border-radius:var(--nur-r-pill);background:transparent;color:var(--nur-ink);font:500 16px/1 var(--nur-sans);letter-spacing:0;white-space:nowrap;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .16s var(--nur-ease-out)}
.button:active{transform:scale(.97)}
.button-dark{background:var(--nur-velvet);border-color:var(--nur-velvet);color:var(--nur-on-dark)}
.button-ghost{border-color:var(--nur-sand)}
.button-light{background:var(--nur-on-dark);border-color:var(--nur-on-dark);color:var(--nur-ink)}
.button-gold{background:var(--nur-gold-light);border-color:var(--nur-gold-light);color:var(--nur-ink)}
.button-outline-light{border-color:rgba(244,237,226,.55);color:var(--nur-on-dark)}
@media (hover:hover) and (pointer:fine){
  .button:hover{background:var(--nur-ink);border-color:var(--nur-ink);color:var(--nur-on-dark)}
  .button-dark:hover{background:var(--nur-velvet-3);border-color:var(--nur-velvet-3)}
  .button-light:hover,.button-gold:hover{background:#fff;border-color:#fff;color:var(--nur-ink)}
  .button-outline-light:hover{background:var(--nur-on-dark);border-color:var(--nur-on-dark);color:var(--nur-ink)}
}
.text-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--nur-ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--nur-gold);text-decoration-thickness:1px;text-underline-offset:8px;transition:text-decoration-color .2s ease}
.text-link .icon{transition:transform .3s var(--nur-ease-out)}
@media (hover:hover) and (pointer:fine){
  .text-link:hover{text-decoration-color:var(--nur-ink)}
  .text-link:hover .icon{transform:translateX(4px)}
}

/* ---------- motief: 1999, twee ringen, vandaag ---------- */
.lineage{display:flex;align-items:center;gap:14px;color:var(--nur-gold-deep)}
.lineage-year{font:400 22px/1 var(--nur-serif);letter-spacing:.02em;white-space:nowrap;color:var(--nur-gold-deep)}
.link-mark{width:56px;height:28px;flex:none;overflow:visible}
.link-mark circle{fill:none;stroke:var(--nur-gold);stroke-width:1.5;vector-effect:non-scaling-stroke}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:var(--nur-header);padding:0 var(--nur-gutter);background:var(--nur-ground)}
.wordmark{display:flex;align-items:center;flex:none;min-height:44px;color:var(--nur-gold)}
.wordmark .logo{width:auto;height:38px}
.header-tools{display:flex;align-items:center;gap:8px}
.lang{display:inline-flex;align-items:center;padding:3px;border-radius:var(--nur-r-pill);background:var(--nur-tone)}
.lang a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:38px;padding:0 10px;border-radius:var(--nur-r-pill);font:600 14px/1 var(--nur-sans);letter-spacing:.06em;color:var(--nur-muted);transition:background-color .2s ease,color .2s ease}
.lang a[aria-current=page]{background:var(--nur-velvet);color:var(--nur-on-dark)}
@media (hover:hover) and (pointer:fine){.lang a:not([aria-current]):hover{color:var(--nur-ink);background:var(--nur-ground)}}
.menu{display:none;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:var(--nur-r-pill);background:var(--nur-tone);font-size:16px;font-weight:500}
.menu .icon{transition:transform .25s var(--nur-ease-out)}
.menu[aria-expanded=true] .icon{transform:rotate(45deg)}
.nav{display:flex;flex-wrap:wrap;gap:0 24px;font-size:16px}
.nav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--nur-text);text-underline-offset:8px;text-decoration-thickness:1px}
.nav-cta{color:var(--nur-ink)!important;font-weight:500}
html:not(.js) .site-header{flex-wrap:wrap;padding-block:10px}
html:not(.js) .nav{order:3;width:100%}
.js .menu{display:inline-flex}
.js .nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:8px var(--nur-gutter) 28px;background:var(--nur-ground);box-shadow:0 28px 40px -28px rgba(37,30,25,.35)} /* taste-skill-ignore: uitklapmenu is een echte overlay */
.js .nav.open{display:flex}
.js .nav a{min-height:58px;font:400 28px/1.2 var(--nur-serif);color:var(--nur-ink)}
@media (min-width:1080px){
  .js .menu{display:none}
  .js .nav,.nav{display:flex;position:static;flex-direction:row;flex-wrap:nowrap;gap:32px;padding:0;background:none;box-shadow:none;margin-left:auto;margin-right:28px}
  .js .nav a{min-height:44px;font:400 16px/1 var(--nur-sans);color:var(--nur-text)}
  .js .nav .nav-cta{font-weight:500;color:var(--nur-ink)}
  html:not(.js) .nav{order:0;width:auto}
  html:not(.js) .site-header{flex-wrap:nowrap}
  .wordmark .logo{height:44px}
}
@media (hover:hover) and (pointer:fine){.nav a:hover{color:var(--nur-ink);text-decoration:underline;text-decoration-color:var(--nur-gold)}}

/* ---------- hero: tekst en een wand van drie stukken ---------- */
.hero{display:grid;background:var(--nur-ground)}
.hero-copy{padding:28px var(--nur-gutter) 32px;container-type:inline-size}
.hero h1{font-size:clamp(42px,12.4vw,54px);line-height:1;letter-spacing:-.015em;margin-bottom:20px}
.hero h1 span{display:block}
.hero-lead{font-size:var(--nur-fs-lead);line-height:1.45;color:var(--nur-text);max-width:30ch;margin-bottom:24px}
.actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:16px}
.has-whatsapp .actions .button-dark{grid-column:1/-1}
html:not(.has-whatsapp) .whatsapp{display:none}
.status{display:flex;align-items:center;gap:10px;font-size:var(--nur-fs-small);color:var(--nur-muted);margin:0}
.status-link{display:inline-flex;min-height:36px;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:color .2s ease,text-decoration-color .2s ease}
.status-link .icon{width:14px;height:14px;transition:transform .3s var(--nur-ease-out)}
@media (hover:hover) and (pointer:fine){
  .status-link:hover{color:var(--nur-ink);text-decoration-color:var(--nur-gold)}
  .status-link:hover .icon{transform:translateX(3px)}
}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--nur-muted);flex:none}
.is-open .status-dot{background:#2f7a4b}
.hero-wall{order:-1;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:6px}
.tile{overflow:hidden;background:var(--nur-sand)}
.tile-a{grid-column:1/-1;aspect-ratio:16/9}
.tile-b,.tile-c{aspect-ratio:2/1}
.tile-a img{object-position:55% 50%}
.tile-b img{object-position:50% 55%}
.tile-c img{object-position:50% 78%}
.tile-c{background:var(--nur-velvet)}
@media (min-width:768px){
  .hero-copy{padding:56px var(--nur-gutter) 56px}
  .hero h1{font-size:min(12.6cqi,104px)}
  html[lang=tr] .hero h1{font-size:min(11.2cqi,96px)}
  .actions{display:flex;flex-wrap:wrap;gap:12px}
  .hero-wall{gap:10px}
  .tile-a{aspect-ratio:21/9}
  .tile-b,.tile-c{aspect-ratio:3/1}
}
@media (min-width:1024px){
  .hero{grid-template-columns:minmax(0,11fr) minmax(0,13fr);min-height:calc(100svh - var(--nur-header));max-height:940px}
  .hero-wall{order:0;grid-template-rows:minmax(0,1.3fr) minmax(0,1fr);min-height:600px}
  .tile-a,.tile-b,.tile-c{aspect-ratio:auto}
  .hero-copy{display:flex;flex-direction:column;justify-content:center;padding:64px 56px 72px var(--nur-gutter)}
  .hero h1{font-size:min(15.4cqi,96px);margin-bottom:28px}
  html[lang=tr] .hero h1{font-size:min(13.4cqi,92px)}
  .hero-lead{margin-bottom:36px}
}
@media (max-width:767px){
  .actions .button{min-height:50px;padding:0 16px}
}

/* ---------- familieverhaal (linnen) ---------- */
.story{background:var(--nur-linen);padding:var(--nur-section) var(--nur-gutter)}
.story-head{display:grid;gap:20px;margin-bottom:40px}
.story-head .lead{font-size:var(--nur-fs-lead);line-height:1.5;max-width:34ch;margin:0;color:var(--nur-text)}
.story > .lineage{margin-bottom:40px}
.story-frames{display:grid;gap:48px}
.frame-img{overflow:hidden;background:var(--nur-sand)}
.frame-then .frame-img{aspect-ratio:4/5}
.frame-now .frame-img{aspect-ratio:3/2}
.frame-now .frame-img img{object-position:40% 50%}
.frame figcaption{display:grid;gap:10px;margin-top:20px;max-width:46ch;color:var(--nur-text)}
.frame-year{font:400 22px/1 var(--nur-serif);color:var(--nur-gold-deep)}
.story-close{display:grid;gap:32px;margin-top:72px}
.statement{font:400 24px/1.25 var(--nur-serif);letter-spacing:-.01em;color:var(--nur-ink);max-width:18ch;margin:0;text-wrap:balance}
.trust{padding:28px 24px;background:var(--nur-ground)}
.trust h3{margin-bottom:12px}
.trust p{color:var(--nur-text)}
@media (min-width:768px){
  .story-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:var(--nur-col-gap);margin-bottom:56px}
  .story > .lineage{margin-bottom:56px}
  .story-frames{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--nur-col-gap);row-gap:0;align-items:start}
  .frame-then{grid-column:1/7}
  .frame-now{grid-column:7/13;margin-top:38%}
  .story-close{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--nur-col-gap);margin-top:112px;align-items:center}
  .statement{font-size:28px}
  .trust{padding:40px}
}
@media (min-width:1200px){
  .frame-then{grid-column:1/6}
  .frame-now{grid-column:7/13}
  .story-close{grid-template-columns:minmax(0,5fr) minmax(0,1fr) minmax(0,6fr)}
  .statement{font-size:36px}
  .story-close .trust{grid-column:3}
}

/* ---------- collectie: vier stukken, elk op een eigen ondergrond ---------- */
.collection{padding:var(--nur-section) var(--nur-gutter);background:var(--nur-ground)}
.section-head{display:grid;gap:16px;margin-bottom:40px}
.section-head p{margin:0;color:var(--nur-muted);max-width:40ch}
.pieces{display:grid;grid-template-columns:1fr 1fr;gap:32px 12px}
.piece{min-width:0}
.piece a{display:block;height:100%}
.piece-goud,.piece-diamant{grid-column:1/-1}
.piece-img{overflow:hidden;aspect-ratio:4/5;background:var(--nur-sand)}
@media (min-width:768px){.piece-goud .piece-img{aspect-ratio:2/3}}
.piece-diamant .piece-img{aspect-ratio:16/10;background:var(--nur-velvet)}
.piece-ringen .piece-img{background:var(--nur-tone)}
.piece-zilver .piece-img{background:var(--nur-velvet-2)}
.piece-img img{transition:transform .9s var(--nur-ease-out)}
.piece-diamant .piece-img img{object-position:50% 55%}
.piece-zilver .piece-img img{object-position:50% 70%}
.piece h3{margin:18px 0 6px}
.piece p{margin:0;color:var(--nur-text);font-size:16px;line-height:1.55;max-width:38ch}
.piece .piece-note{margin-top:10px;font-size:var(--nur-fs-small);font-weight:500;color:var(--nur-gold-deep);text-decoration:underline;text-decoration-color:rgba(160,122,44,.45);text-underline-offset:5px}
.piece a:focus-visible{outline-offset:6px}
@media (hover:hover) and (pointer:fine){
  .piece a:hover .piece-img img{transform:scale(1.035)}
  .piece a:hover .piece-note{text-decoration-color:var(--nur-gold-deep)}
}
@media (min-width:768px){
  .section-head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:var(--nur-col-gap);margin-bottom:64px}
  .section-head p{justify-self:end}
  .pieces{grid-template-columns:repeat(12,minmax(0,1fr));gap:56px var(--nur-col-gap);align-items:start}
  .piece-goud{grid-column:1/7;grid-row:1/3}
  .piece-diamant{grid-column:7/13;grid-row:1}
  .piece-ringen{grid-column:7/10;grid-row:2}
  .piece-zilver{grid-column:10/13;grid-row:2}
}

/* ---------- inkoop & inruil (fluweel): de stappen groeien ---------- */
.sell{display:grid;gap:40px;padding:var(--nur-section) var(--nur-gutter);background:var(--nur-velvet);color:var(--nur-on-dark-muted)}
.sell h2{color:var(--nur-on-dark);margin-bottom:24px;max-width:13ch}
.sell .lead{font-size:var(--nur-fs-lead);line-height:1.55;color:var(--nur-on-dark);max-width:40ch;margin-bottom:32px}
.sell-photo{overflow:hidden;aspect-ratio:4/5;max-height:70svh;background:var(--nur-velvet-2)}
.sell-photo img{object-position:50% 45%}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.steps li{display:flex;flex-direction:column;justify-content:flex-end;padding:24px;background:var(--nur-velvet-2);color:var(--nur-on-dark-muted)}
.steps li:nth-child(1){min-height:150px}
.steps li:nth-child(2){min-height:190px;background:var(--nur-velvet-3)}
.steps li:nth-child(3){min-height:230px;background:var(--nur-gold-light);color:var(--nur-ink)}
.steps h3{color:var(--nur-on-dark);font-size:var(--nur-fs-h3);line-height:1.2;margin-bottom:8px}
.steps li:nth-child(3) h3{color:var(--nur-ink)}
.steps p{margin:0;font-size:16px;max-width:40ch}
.sell :focus-visible{outline-color:var(--nur-gold-light)}
@media (min-width:768px){
  .steps{grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);gap:10px;align-items:end}
  .steps li:nth-child(1){min-height:200px}
  .steps li:nth-child(2){min-height:260px}
  .steps li:nth-child(3){min-height:320px}
}
@media (min-width:1024px){
  .sell{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--nur-col-gap);row-gap:88px;align-items:end}
  .sell-content{grid-column:1/7;grid-row:1;align-self:center;padding-right:24px}
  .sell-photo{grid-column:8/13;grid-row:1;max-height:none;aspect-ratio:4/5}
  .steps{grid-column:1/-1;grid-row:2;grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr);gap:12px;align-items:end}
  .steps li{padding:32px}
  .steps li:nth-child(1){min-height:240px}
  .steps li:nth-child(2){min-height:320px}
  .steps li:nth-child(3){min-height:400px}
  .steps h3{font-size:28px}
}

/* ---------- service: alles in één oogopslag ---------- */
.service{display:grid;gap:40px;padding:var(--nur-section) var(--nur-gutter);background:var(--nur-ground)}
.service-head h2{margin-bottom:20px}
.service-head h2 span{display:block}
.service-head p{color:var(--nur-muted);max-width:32ch;margin:0}
.services{list-style:none;margin:0;padding:0}
.services li{display:grid;gap:6px;padding:22px 20px}
.services li:nth-child(odd){background:var(--nur-tone)}
.services h3{font-size:clamp(22px,5.8vw,26px)}
.services p{margin:0;color:var(--nur-text);font-size:16px}
@media (min-width:768px){
  .services li{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:baseline;padding:30px 28px}
}
@media (min-width:1024px){
  .service{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--nur-col-gap) 64px;align-items:start}
  .service-head{position:sticky;top:calc(var(--nur-header) + 48px)}
  .services h3{font-size:28px}
}

/* ---------- van mens tot mens (linnen) ---------- */
.voices{display:grid;gap:32px;padding:var(--nur-section) var(--nur-gutter);background:var(--nur-linen)}
.voices-photo{overflow:hidden;aspect-ratio:1;background:var(--nur-velvet)}
.voices-photo img{object-position:52% 50%}
.voices-copy h2{margin-bottom:20px}
.voices-text{font-size:var(--nur-fs-lead);line-height:1.5;color:var(--nur-text);max-width:36ch;margin-bottom:20px}
@media (min-width:768px){
  .voices{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--nur-col-gap);align-items:center}
  .voices-photo{grid-column:1/6}
  .voices-copy{grid-column:7/13}
}

/* ---------- contact ---------- */
.contact{display:grid;gap:56px;padding:var(--nur-section) var(--nur-gutter);background:var(--nur-ground)}
.visit h2{margin-bottom:12px}
.coffee{font-size:var(--nur-fs-lead);color:var(--nur-text);margin-bottom:36px}
.address{display:flex;align-items:flex-end;gap:20px;margin-bottom:20px;color:var(--nur-ink)}
.address-number{font:400 clamp(92px,27vw,168px)/.78 var(--nur-serif);letter-spacing:-.03em;color:var(--nur-gold)}
.address p{margin:0;font-size:16px;line-height:1.5}
.phone{display:inline-flex;align-items:center;gap:12px;min-height:48px;font:400 clamp(28px,7.4vw,36px)/1.2 var(--nur-serif);color:var(--nur-ink);text-decoration:underline;text-decoration-color:var(--nur-gold);text-decoration-thickness:1px;text-underline-offset:9px}
.phone .icon{color:var(--nur-gold-deep)}
@media (hover:hover) and (pointer:fine){.phone:hover{text-decoration-color:var(--nur-ink)}}
.visit .status{margin:14px 0 36px}
.hours{width:100%;border-collapse:collapse;font-size:16px;font-variant-numeric:tabular-nums}
.hours caption{text-align:left;font:400 var(--nur-fs-h3)/1.2 var(--nur-serif);color:var(--nur-ink);padding-bottom:12px}
.hours th,.hours td{padding:13px 12px;text-align:left;font-weight:400}
.hours tr:nth-child(odd) th,.hours tr:nth-child(odd) td{background:var(--nur-tone)}
.hours td{text-align:right;color:var(--nur-text)}
.hours th{color:var(--nur-ink)}
.hours tr.today th,.hours tr.today td{background:var(--nur-velvet);color:var(--nur-on-dark);font-weight:500}
.hours tr.today th::after{content:'vandaag';display:inline-block;margin-left:10px;padding:2px 8px;border-radius:var(--nur-r-pill);background:var(--nur-gold-light);color:var(--nur-ink);font:600 14px/1.3 var(--nur-sans);letter-spacing:0;vertical-align:1px}
html[lang=tr] .hours tr.today th::after{content:'bugün'}
.contact-side{display:grid;gap:48px;align-content:start}
.map-canvas{position:relative;overflow:hidden;background:var(--nur-velvet);aspect-ratio:4/5;color:var(--nur-on-dark)}
.map-canvas iframe{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;filter:sepia(.25) saturate(.8)}
.visit-card-body{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:24px}
.visit-card-cross{font:400 clamp(26px,7vw,48px)/1.1 var(--nur-serif);letter-spacing:-.01em;color:var(--nur-on-dark);margin:0 0 12px;max-width:14ch}
.visit-card-cross span{display:block}
.visit-card-addr{font-size:16px;color:var(--nur-on-dark-muted);margin:0 0 24px}
.visit-card-actions{display:flex;flex-wrap:wrap;gap:8px}
.visit-card-actions .button{min-height:48px;padding:0 20px}
.visit-card :focus-visible{outline-color:var(--nur-gold-light)}
html:not(.js) .map-load{display:none}
.map-note{margin:16px 0 0;font-size:var(--nur-fs-small);color:var(--nur-on-dark-muted)}
@media (min-width:768px){.map-canvas{aspect-ratio:16/10}.visit-card-body{padding:40px}}
.parking h3{margin-bottom:14px}
.parking p{color:var(--nur-text)}
.facts{list-style:none;margin:28px 0 0;padding:24px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:24px 16px}
.facts li{display:grid;gap:4px;align-content:start;color:var(--nur-text);font-size:16px;line-height:1.35}
.facts strong{font:400 28px/1.1 var(--nur-serif);color:var(--nur-gold-deep)}
.contact-direct h3{margin-bottom:8px}
.contact-direct p{color:var(--nur-text);margin-bottom:20px}
.contact-direct .actions{margin:0}
@media (min-width:768px){.facts{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1024px){
  .contact{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:96px}
  .visit{position:sticky;top:calc(var(--nur-header) + 40px);align-self:start}
}

/* ---------- footer ---------- */
.footer{background:var(--nur-linen);padding:88px var(--nur-gutter) 112px;color:var(--nur-text)}
.footer-mark{margin-bottom:56px}
.footer-slogan{font:400 clamp(40px,10.4vw,96px)/1 var(--nur-serif);letter-spacing:-.015em;color:var(--nur-ink);margin:0 0 28px;max-width:none;text-wrap:balance}
.lineage-wide .link-mark{width:64px;height:32px}
.footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:40px 24px;padding:40px 0}
.footer-h{font:600 14px/1.4 var(--nur-sans);letter-spacing:.01em;color:var(--nur-muted);margin-bottom:12px}
.footer-cols p{margin:0;font-size:16px;line-height:1.9;color:var(--nur-ink)}
.footer-cols a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:5px;transition:text-decoration-color .2s ease}
@media (hover:hover) and (pointer:fine){.footer-cols a:hover{text-decoration-color:var(--nur-gold)}}
.footer-cols .lang{background:var(--nur-ground)}
.footer-cols .lang a{text-decoration:none}
.footer-base{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding-top:32px}
.footer-logo{display:block;color:var(--nur-gold)}
.footer-logo .logo,.footer-logo svg{width:auto;height:52px;display:block}
.footer-base small{font-size:var(--nur-fs-small);color:var(--nur-muted);max-width:52ch}
@media (min-width:768px){
  .footer{padding:128px var(--nur-gutter) 56px}
  .footer-mark{margin-bottom:88px}
  .footer-cols{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* ---------- duimbalk mobiel ---------- */
.thumbbar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;gap:2px;background:var(--nur-velvet-3);color:var(--nur-on-dark);padding-bottom:env(safe-area-inset-bottom)}
.thumbbar a{flex:1 1 0;background:var(--nur-velvet);display:flex;align-items:center;justify-content:center;gap:8px;min-height:60px;font-size:16px;font-weight:500}
.thumbbar .icon{color:var(--nur-gold-light)}
.thumbbar a:focus-visible{outline-color:var(--nur-gold-light);outline-offset:-6px}
html.js:not(.final) .thumbbar{transform:translateY(110%);visibility:hidden;transition:transform .3s var(--nur-ease-out),visibility 0s linear .3s}
html.js.thumb-on:not(.final) .thumbbar{transform:none;visibility:visible;transition:transform .3s var(--nur-ease-out),visibility 0s}
@media (min-width:768px){.thumbbar{display:none}}
@media (max-width:767px){.footer{padding-bottom:132px}}

/* ---------- kleine schermen ---------- */
@media (max-width:399px){
  .site-header{gap:8px}
  .header-tools{gap:6px}
  .wordmark .logo{height:32px}
  .menu{padding:0 12px;gap:6px}
  .lang a{min-width:40px;padding:0 8px}
}
@media (max-width:359px){
  :root{--nur-gutter:16px}
  .actions{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr}
}

/* ---------- beweging ----------
   De eindstand is de standaard (html.final staat in de markup). Alleen met html.motion (gezet door
   site.js, niet bij reduced motion, ?final of in de Elementor-editor) beginnen elementen verborgen.
   Alleen transform, opacity en clip-path. */

/* 1. De wand opent bij het laden: drie stukken schuiven open als een vitrinelade. */
html.motion:not(.final) .hero .tile{clip-path:inset(0 0 100% 0)}
html.motion:not(.final) .hero .tile img{transform:scale(1.08)}
html.motion:not(.final) .hero.in .tile{clip-path:inset(0);transition:clip-path 1.1s var(--nur-ease-out)}
html.motion:not(.final) .hero.in .tile img{transform:none;transition:transform 1.6s var(--nur-ease-out)}
html.motion:not(.final) .hero.in .tile-b{transition-delay:.12s}
html.motion:not(.final) .hero.in .tile-c{transition-delay:.22s}
html.motion:not(.final) .hero h1 span,html.motion:not(.final) .hero-lead{opacity:0;transform:translateY(18px)}
html.motion:not(.final) .hero.in h1 span,html.motion:not(.final) .hero.in .hero-lead{opacity:1;transform:none;transition:opacity .7s var(--nur-ease-out),transform .9s var(--nur-ease-out)}
html.motion:not(.final) .hero.in h1 span+span{transition-delay:.08s}
html.motion:not(.final) .hero.in .hero-lead{transition-delay:.18s}

/* 2. Signatuur: de schakel sluit zodra het familieverhaal in beeld komt. */
.link-mark circle{transform-box:fill-box;transform-origin:center}
html.motion:not(.final) .signature .ring-a{transform:translateX(-9px)}
html.motion:not(.final) .signature .ring-b{transform:translateX(9px)}
html.motion:not(.final) .signature.in .link-mark circle{transform:none;transition:transform 1.4s var(--nur-ease-in-out) .2s}
@media (min-width:768px){
  html.motion:not(.final) .story-frames.signature .frame-img{clip-path:inset(8% 10% 8% 0)}
  html.motion:not(.final) .story-frames.signature .frame-now .frame-img{clip-path:inset(8% 0 8% 10%)}
  html.motion:not(.final) .story-frames.signature .frame-img img{transform:scale(1.08)}
  html.motion:not(.final) .story-frames.signature.in .frame-img{clip-path:inset(0);transition:clip-path 1.4s var(--nur-ease-out)}
  html.motion:not(.final) .story-frames.signature.in .frame-img img{transform:none;transition:transform 1.8s var(--nur-ease-out)}
}

/* 3. Inkoop: de drie stappen groeien op, de volgorde zit in de hoogte. */
html.motion:not(.final) .steps li{clip-path:inset(100% 0 0 0)}
html.motion:not(.final) .steps.in li{clip-path:inset(0);transition:clip-path 1s var(--nur-ease-out)}
html.motion:not(.final) .steps.in li:nth-child(2){transition-delay:.14s}
html.motion:not(.final) .steps.in li:nth-child(3){transition-delay:.28s}

/* 4. Gewone binnenkomst per onderdeel: kop, tekst, beeld; volgorde via --nur-d (gezet door site.js). */
html.motion:not(.final) .rise{opacity:0;transform:translateY(22px)}
html.motion:not(.final) .rise.in{opacity:1;transform:none;transition:opacity .7s var(--nur-ease-out) var(--nur-d,0s),transform .9s var(--nur-ease-out) var(--nur-d,0s)}

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

/* WhatsApp-nummer (contact) en footer-iconen; Instagram pas zichtbaar met een URL in de instelling */
.phone-wa{display:flex;width:fit-content;margin-top:4px}
.footer-social{display:flex;gap:4px;margin:12px 0 0 -12px}
.footer-social a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:50%;color:var(--nur-gold);transition:color .2s ease}
.footer-social .icon{width:22px;height:22px}
@media (hover:hover) and (pointer:fine){.footer-social a:hover{color:var(--nur-gold-deep)}}
html:not(.has-instagram) .social-instagram{display:none}