/* DM Sans (variable 300–900) + DM Mono — extracted from the Pizza Intimi brandbook */
@font-face{font-family:'DM Mono';font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/DMMono-300-latin-ext.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:'DM Mono';font-style:normal;font-weight:300;font-display:swap;src:url("../fonts/DMMono-300-latin.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:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/DMMono-400-latin-ext.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:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/DMMono-400-latin.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:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/DMMono-500-latin-ext.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:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/DMMono-500-latin.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:'DM Sans';font-style:normal;font-weight:300 900;font-display:swap;src:url("../fonts/DMSans-latin-ext.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:'DM Sans';font-style:normal;font-weight:300 900;font-display:swap;src:url("../fonts/DMSans-latin.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:'DM Sans';font-style:italic;font-weight:300 900;font-display:swap;src:url("../fonts/DMSans-Italic-latin-ext.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:'DM Sans';font-style:italic;font-weight:300 900;font-display:swap;src:url("../fonts/DMSans-Italic-latin.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;}

:root{
  /* Merkkleuren — namen uit het brandbook */
  --tomato-red:#C0421E;    /* primair: logo, vlakken, accentwoord */
  --cream-crust:#FCF8F0;   /* achtergrond */
  --honey-drizzle:#B98B3D; /* klein accent, nooit hoofdkleur */
  --charred-crust:#351B12; /* tekst en lijnen */

  /* Schalen */
  --red-600:#A3361A;
  --red-500:var(--tomato-red);
  --red-100:#F2D3C6;
  --beige-50:#FFFDF8;
  --beige-100:var(--cream-crust);
  --beige-200:#F4E8D2;
  --beige-300:#E4D3AE;
  --ink-900:var(--charred-crust);
  --ink-700:#5A3A2C;
  --ink-400:#8C6F60;
  --gold-600:#97702E;
  --gold-500:var(--honey-drizzle);
  --gold-100:#EFE0BE;
  --cornicione:#F5F3EF; /* vlak achter het PNG-logo */
  --white:#FFFDF8;

  /* Semantisch */
  --surface-page:var(--cream-crust);
  --surface-panel:var(--beige-200);
  --surface-card:var(--white);
  --surface-brand:var(--tomato-red);
  --surface-inverse:var(--charred-crust);
  --brand-primary:var(--tomato-red);
  --brand-primary-hover:var(--red-600);
  --brand-accent:var(--honey-drizzle);
  --text-primary:var(--charred-crust);
  --text-secondary:var(--ink-700);
  --text-muted:var(--ink-400);
  --text-on-primary:var(--cream-crust);
  --text-eyebrow:var(--tomato-red);
  --border-default:rgba(53,27,18,0.14);
  --border-strong:rgba(53,27,18,0.28);
  --link-color:var(--tomato-red);
  --link-hover:var(--red-600);
  --focus-ring:0 0 0 2px var(--cream-crust),0 0 0 4px var(--tomato-red);
}

:root{
  --font-display:'DM Sans','Helvetica Neue',sans-serif; /* altijd weight 900 */
  --font-body:'DM Mono',ui-monospace,monospace;
  --font-logo:var(--font-display);

  --text-display-xl:900 84px/0.9 var(--font-display);
  --text-display-lg:900 56px/0.92 var(--font-display);
  --text-display-md:900 36px/0.95 var(--font-display);
  --text-display-sm:900 26px/1 var(--font-display);
  --text-subhead:900 20px/1.3 var(--font-display);
  --text-body-lg:400 18px/1.6 var(--font-body);
  --text-body:400 16px/1.6 var(--font-body);
  --text-small:400 13px/1.4 var(--font-body);
  --text-caption:500 11px/1.3 var(--font-body);
  --text-contact:300 13px/1.2 var(--font-body); /* visitekaartje */

  --tracking-display:0em;
  --tracking-caption:0.14em;
}

:root{
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;

  --page-pad-y:64px; /* A4 brandbook */
  --page-pad-x:56px;

  --radius-sm:4px;   /* foto's, drukwerk */
  --radius-md:10px;  /* tegels, swatches */
  --radius-lg:20px;
  --radius-pill:999px;

  --shadow-print:0 1px 2px rgba(53,27,18,0.08),0 8px 24px rgba(53,27,18,0.10); /* alleen voor mockups van drukwerk */
  --shadow-float:0 1px 2px rgba(53,27,18,0.08),0 8px 24px rgba(53,27,18,0.10); /* intentional: dialogs/toasts reuse the print shadow */
  --inset-outline:inset 0 0 0 1.5px var(--tomato-red); /* outlined value tile */

  --ease-standard:cubic-bezier(.2,0,0,1); /* @kind other */
  --duration-fast:120ms; /* @kind other */
  --duration-base:200ms; /* @kind other */
}

:root{
  /* Website — waarden uit de ontworpen homepage */
  --peach-300:#F3A078;        /* eyebrow op Charred Crust */
  --hero-bg:#22130D;          /* achter hero-foto tijdens laden */
  --overlay-hero:linear-gradient(90deg,rgba(35,15,7,.78),rgba(35,15,7,.1) 75%),linear-gradient(0deg,rgba(35,15,7,.4),transparent 50%); /* @kind other */
  --header-height:82px;
  --header-bg-scrolled:rgba(252,248,240,.96);
  --header-blur:blur(10px); /* @kind other */
  --site-pad-x:8vw;
  --section-pad-y:130px;

  --text-web-hero:900 clamp(56px,8.5vw,120px)/0.9 var(--font-display);
  --text-web-h2:900 clamp(48px,6.5vw,92px)/0.92 var(--font-display);
  --text-web-cta-h2:900 clamp(60px,9vw,130px)/0.92 var(--font-display);
  --text-web-card-title:900 32px/0.95 var(--font-display);
  --text-web-body:400 17px/1.7 var(--font-body);
  --text-web-lead:400 18px/1.5 var(--font-body);
  --text-web-eyebrow:700 10px/1.3 var(--font-body);
  --text-web-label:700 11px/1 var(--font-body);
  --text-web-nav:400 11px/1 var(--font-body);
  --tracking-web-eyebrow:0.16em;
  --tracking-web-label:0.08em;
  --tracking-web-strip:0.12em;

  --shadow-photo:0 20px 40px rgba(53,27,18,0.25); /* gekantelde carrousel-foto's */
  --ease-carousel:cubic-bezier(.2,.7,.2,1); /* @kind other */
}
:root{
  /* Social — portret 1080×1350 */
  --overlay-social:linear-gradient(180deg,rgba(53,27,18,0.82) 0%,rgba(53,27,18,0.45) 30%,rgba(53,27,18,0) 48%,rgba(53,27,18,0) 58%,rgba(53,27,18,0.55) 76%,rgba(53,27,18,0.88) 100%); /* @kind other */
  --social-pad:72px 80px 56px; /* @kind other */
  --text-social-headline:900 124px/0.95 var(--font-display);
  --text-social-body:400 30px/1.3 var(--font-body);
  --text-social-footer:400 24px/1.3 var(--font-body);
  --tracking-social:0.02em;
}
@keyframes pi-marquee{from{transform:translateX(-50%)}to{transform:translateX(0)}}

html{-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--text-body)}
a{color:var(--link-color);text-underline-offset:3px}
a:hover{color:var(--link-hover)}
::selection{background:var(--red-100);color:var(--charred-crust)}


/* Page-level rules from the design handoff (ui_kits/website-v2/index.html). */
body{margin:0;background:var(--beige-100)}
a{color:var(--red-500)}a:hover{color:var(--red-600)}
h1,h2,h3{text-wrap:balance}
@media (max-width:900px){
:root{--section-pad-y:84px}
.pi-desk{display:none!important}.pi-mob{display:inline-flex!important}
.pi-g2,.pi-g3,.pi-g4{grid-template-columns:minmax(0,1fr)!important}
.pi-g2>*{order:0!important;grid-row:auto!important}
.pi-photo{min-height:360px!important}
.pi-hero-copy{left:6vw!important;right:6vw!important}
}