/* Christiaan Sharobim — V24 structured build */


:root{--ink:#f4f2ed;--muted:#acb8bc;--dark:#081015;--panel:#0e1a20;--panel2:#12232a;--line:rgba(255,255,255,.13);--gold:#dbc2a4;--goldstrong:#d1a97d;--paper:#efeae1;--easing:cubic-bezier(.22,.61,.36,1);--font:Inter,'Helvetica Neue',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--dark);color:var(--ink);margin:0;font-family:var(--font);-webkit-font-smoothing:antialiased}body.no-scroll{overflow:hidden}button,input,textarea,select{font:inherit}button{cursor:pointer}a{color:inherit;text-decoration:none}img,video{display:block;max-width:100%}[hidden]{display:none!important}::selection{background:var(--goldstrong);color:#111}.shell{width:min(1440px,calc(100% - 88px));margin-inline:auto}.eyebrow{font-size:10px;letter-spacing:.245em;text-transform:uppercase;font-weight:850;color:var(--gold);line-height:1.5}.muted{color:var(--muted)}.numfont{font-variant-numeric:tabular-nums}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;gap:18px;border:1px solid rgba(255,255,255,.36);padding:15px 22px;font-weight:800;letter-spacing:.025em;font-size:12px;transition:background .2s,transform .2s;color:var(--ink);background:transparent}.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.07)}.btn.gold{background:var(--gold);color:#121516;border-color:var(--gold)}.btn.gold:hover{background:#edd6ba}.btn.dark{background:var(--dark);border-color:var(--dark);color:#fff}.arrow-text{font-size:13px;font-weight:800;border-bottom:1px solid currentColor;padding-bottom:5px}.arrow-text:hover{color:var(--gold)}.display{font-size:clamp(54px,7.4vw,116px);letter-spacing:-.077em;line-height:.91;font-weight:880;margin:16px 0 26px}.display .accent{color:var(--gold)}.h2{font-size:clamp(38px,4.4vw,70px);letter-spacing:-.064em;line-height:1.0;font-weight:850;margin:15px 0 20px}.section-head{display:flex;align-items:end;justify-content:space-between;gap:40px;margin-bottom:35px}.section-head .lead{max-width:440px;color:#b4c0c5;line-height:1.7;font-size:15px}.section-pad{padding:110px 0}.rule{border-top:1px solid var(--line)}.header{position:fixed;top:0;z-index:80;width:100%;border-bottom:1px solid rgba(255,255,255,.11);background:rgba(7,13,17,.79);backdrop-filter:blur(17px);-webkit-backdrop-filter:blur(17px)}.header-shell{height:82px;display:flex;align-items:center;justify-content:space-between;gap:22px}.wordmark{font-size:19px;font-weight:850;letter-spacing:.026em;white-space:nowrap}.mainnav{display:flex;align-items:center;gap:35px}.mainnav .navlink{font-size:12px;font-weight:720;color:#c2c8ca;transition:color .2s}.mainnav .navlink:hover,.mainnav .navlink.active{color:#fff}.mainnav .navlink.active{border-bottom:1px solid var(--gold);padding-bottom:8px}.header .btn{min-height:42px;padding:12px 16px}.mobile-menu-btn{display:none;background:transparent;border:1px solid var(--line);width:43px;height:43px;color:#fff;font-size:22px}.mobile-drawer{display:none}.top-hero{height:min(880px,96svh);min-height:700px;position:relative;overflow:hidden;display:flex;align-items:center}.hero-media{position:absolute;inset:0;overflow:hidden}.hero-photo{position:absolute;inset:0;margin:0;opacity:0;animation:crossfade 21s infinite}.hero-photo:nth-child(2){animation-delay:7s}.hero-photo:nth-child(3){animation-delay:14s}.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 45%;filter:saturate(.86) contrast(1.12) brightness(.68);animation:zoom 21s infinite}.hero-photo:nth-child(2) img{animation-delay:7s}.hero-photo:nth-child(3) img{animation-delay:14s}.hero-photo.photo-kane img{object-position:center 50%}.hero-photo.photo-gala img{object-position:center 65%}.hero-photo.photo-tv img{object-position:center 46%}.hero-media:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,10,13,.96) 0%,rgba(3,10,13,.84) 30%,rgba(3,10,13,.35) 74%,rgba(3,10,13,.16)),linear-gradient(0deg,rgba(3,10,13,.68),transparent 48%)}@keyframes crossfade{0%,100%{opacity:0}0.1%,31%{opacity:1}37%{opacity:0}}@keyframes zoom{0%{transform:scale(1.0)}36%{transform:scale(1.045)}100%{transform:scale(1.045)}}.hero-shell{position:relative;z-index:1;padding-top:120px;padding-bottom:75px}.hero-copy{max-width:935px}.hero-copy .intro{font-size:20px;line-height:1.5;color:#e1e4e3;max-width:650px;margin-bottom:34px}.hero-actions{display:flex;gap:13px;flex-wrap:wrap}.hero-corner{position:absolute;bottom:40px;right:0;color:#fff;font-size:11px;letter-spacing:.17em;text-align:right;text-transform:uppercase;line-height:1.7}.hero-index{display:flex;align-items:center;gap:13px;margin-top:88px}.hero-index span{font-size:11px;letter-spacing:.22em}.hero-line{height:1px;background:rgba(255,255,255,.38);width:90px}.trustbar{background:#111b20;border-block:1px solid var(--line)}.trust-shell{display:grid;grid-template-columns:145px 1fr;gap:30px;align-items:center;padding:32px 0}.clientnames{display:grid;grid-template-columns:repeat(7,1fr);gap:18px}.clientnames span{font-size:clamp(11px,1.2vw,16px);font-weight:840;text-align:center;letter-spacing:-.025em}.micro-note{font-size:10px;color:#8d9b9f;margin-top:17px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}.metric{border-right:1px solid var(--line);padding:29px 25px}.metric:first-child{padding-left:0}.metric:last-child{border-right:0}.metric strong{display:block;font-size:clamp(34px,3.1vw,52px);line-height:1;letter-spacing:-.055em}.metric span{display:block;color:#a8b3b9;font-size:10px;text-transform:uppercase;letter-spacing:.14em;margin-top:8px}.work-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}.feature{position:relative;min-height:470px;overflow:hidden;background:#122029}.feature img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.82);transition:transform .65s var(--easing)}.feature:hover img{transform:scale(1.045)}.feature:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(1,5,8,.95),rgba(1,5,8,.07) 74%)}.feature a{position:absolute;inset:0;z-index:2}.feature-body{position:absolute;bottom:29px;left:30px;z-index:1;pointer-events:none}.feature-body h3{font-size:36px;letter-spacing:-.06em;margin:11px 0 8px;line-height:1}.feature-body p{font-size:13px;color:#d6dcde;margin:0}.roundarrow{position:absolute;z-index:1;bottom:26px;right:28px;border:1px solid rgba(255,255,255,.7);border-radius:50%;width:46px;height:46px;display:grid;place-items:center;font-size:24px;pointer-events:none}.outline-panel{background:#17262e;min-height:470px;padding:40px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line)}.outline-panel h3{font-size:clamp(31px,3vw,48px);letter-spacing:-.055em;line-height:1;margin:0}.outline-panel a{align-self:flex-start}.showreel{min-height:570px;background:#000;position:relative;overflow:hidden;display:flex;align-items:center}.showreel video,.showreel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.64) saturate(.8)}.showreel:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,8,10,.92) 0%,rgba(3,8,10,.25) 78%)}.showreel-copy{position:relative;z-index:2;max-width:640px;padding-block:90px}.showreel-copy p{max-width:515px;line-height:1.67;color:#d8dfe1;font-size:16px}.studio-block{background:#121f26}.studio-columns{display:grid;grid-template-columns:1.12fr .86fr .82fr;min-height:690px}.studio-text{padding:80px 8% 80px 0;display:flex;flex-direction:column;justify-content:center}.studio-text .h2{font-size:clamp(39px,4.2vw,60px)}.studio-text p{font-size:15px;line-height:1.75;color:#b7c3c7}.studio-pic,.studio-portrait{position:relative;overflow:hidden}.studio-pic img,.studio-portrait img{height:100%;width:100%;object-fit:cover}.studio-pic img{filter:saturate(.74) brightness(.77)}.studio-portrait img{object-position:center 23%}.studio-portrait:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,8,11,.9),transparent 32%)}.portrait-meta{position:absolute;z-index:2;bottom:28px;left:27px}.portrait-meta b{font-size:13px;letter-spacing:.08em}.portrait-meta span{display:block;font-size:10px;letter-spacing:.18em;color:#d2d9d9;margin-top:9px;text-transform:uppercase}.service-row{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr repeat(3,1fr)}.service-intro,.service-tile{border-right:1px solid var(--line);padding:38px 28px}.service-tile:last-child{border-right:0}.service-intro .h2{font-size:clamp(36px,3.3vw,52px)}.service-tile .n{color:var(--gold);font-size:11px;font-weight:850;letter-spacing:.17em}.service-tile h3{font-size:20px;line-height:1.1;letter-spacing:-.04em;margin:36px 0 13px}.service-tile p{font-size:13px;line-height:1.65;color:#aeb9bc}.mid-cta{background:var(--paper);color:#162026}.mid-cta-grid{display:grid;grid-template-columns:1.1fr .8fr;gap:85px;align-items:center}.mid-cta .h2{font-size:clamp(40px,4vw,65px)}.mid-cta p{color:#536168;font-size:16px;line-height:1.75}.mid-cta .eyebrow{color:#907052}.review-strip{border-block:1px solid var(--line);background:#0c1519}.review-grid{display:grid;grid-template-columns:1fr .8fr;gap:100px;align-items:center;padding:70px 0}.review-grid h2{font-size:clamp(30px,3vw,47px);line-height:1.1;letter-spacing:-.05em;margin:14px 0}.review-grid p{color:#b3bec3;line-height:1.7}.grip-banner{background:#061b2d;padding:55px 0}.grip-content{display:flex;align-items:center;gap:50px;justify-content:space-between}.grip-content img{width:280px;max-width:35%;object-fit:contain}.grip-content p{max-width:580px;font-size:14px;line-height:1.7;color:#cadbdc}.grip-content a{white-space:nowrap;font-size:12px;font-weight:800;border-bottom:1px solid #72c7c1;padding-bottom:6px}.footer{background:#080f13;padding:55px 0 28px;border-top:1px solid var(--line)}.foot-main{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:45px;padding-bottom:55px}.footer h3{font-size:28px;letter-spacing:-.05em;line-height:1.05;margin:18px 0}.footer p{font-size:14px;line-height:1.7;color:#afb9be}.foot-col{display:flex;flex-direction:column;gap:13px;font-size:13px;color:#d5dedf}.foot-col b{color:var(--gold);margin-bottom:10px;letter-spacing:.18em;font-size:10px;text-transform:uppercase}.foot-bottom{border-top:1px solid var(--line);padding-top:25px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:15px;color:#8b979d;font-size:11px}.subhero{padding:176px 0 90px;border-bottom:1px solid var(--line);background:linear-gradient(112deg,#0a1419,#182a31)}.subhero .page-lead{font-size:19px;line-height:1.6;color:#b8c4c6;max-width:740px}.bread{font-size:11px;color:#a4afb4;margin:0 0 28px}.bread a{text-decoration:underline;text-underline-offset:3px}.subhero.has-image{position:relative;isolation:isolate;min-height:520px;display:flex;align-items:center}.subhero.has-image>img{position:absolute;z-index:-2;inset:0;height:100%;width:100%;object-fit:cover;filter:brightness(.5) saturate(.78)}.subhero.has-image:after{content:'';z-index:-1;position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,9,13,.98),rgba(3,9,13,.28))}.portfolio-controls{display:flex;justify-content:space-between;align-items:center;gap:25px;margin:35px 0 29px}.filters{display:flex;flex-wrap:wrap;gap:9px}.filter{font-size:11px;color:#dbe2e4;border:1px solid rgba(255,255,255,.18);background:transparent;padding:12px 15px;letter-spacing:.06em;font-weight:700}.filter:hover,.filter.active{background:var(--gold);color:#101a1e;border-color:var(--gold)}.search{min-width:220px;color:#fff;background:#0e1a20;border:1px solid rgba(255,255,255,.23);padding:13px 15px;outline:none}.search:focus{border-color:var(--gold)}.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.archive-card{background:#101d23;border:1px solid var(--line);display:flex;flex-direction:column;min-width:0;transition:transform .2s,border .2s}.archive-card:hover{transform:translateY(-4px);border-color:#8e806f}.archive-img{height:250px;position:relative;overflow:hidden;background:linear-gradient(130deg,#1b3440,#0d1d24)}.archive-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.87)}.archive-img:after{content:'';inset:0;position:absolute;background:linear-gradient(0deg,rgba(2,7,9,.55),transparent 65%)}.type-art{height:100%;display:flex;flex-direction:column;justify-content:space-between;padding:22px;color:#d9e2e0;position:relative;overflow:hidden;background:radial-gradient(circle at 77% 33%,#37515a,transparent 55%),linear-gradient(130deg,#223c45,#0a1920)}.type-art .watermark{position:absolute;inset:auto -3px -24px 10px;font-size:90px;font-weight:900;line-height:.82;color:rgba(255,255,255,.06);letter-spacing:-.095em;max-width:100%;overflow:hidden;white-space:nowrap}.type-art span{font-size:10px;letter-spacing:.2em;z-index:1;text-transform:uppercase}.type-art b{font-size:26px;letter-spacing:-.055em;line-height:1.02;max-width:85%;z-index:1}.archive-copy{padding:25px;display:flex;flex-direction:column;flex:1}.archive-copy small{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:800}.archive-copy h3{font-size:25px;letter-spacing:-.055em;line-height:1.08;margin:16px 0 12px}.archive-copy p{font-size:12px;line-height:1.65;color:#abb7bc}.archive-copy .role{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);font-size:11px;color:#dfe5e5}.archive-copy .role span{display:block;color:#89999e;margin-bottom:5px}.archive-copy .small-link{color:var(--gold);font-size:11px;margin-top:15px;font-weight:800}.detail-hero{background:#0b151a;min-height:570px;position:relative;overflow:hidden;display:flex;align-items:end}.detail-hero img{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;filter:brightness(.52) saturate(.82)}.detail-hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,10,14,.92),rgba(4,10,14,.2)),linear-gradient(0deg,rgba(3,7,9,.6),transparent 70%)}.detail-hero .shell{position:relative;z-index:1;padding-top:180px;padding-bottom:65px}.detail-hero h1{font-size:clamp(48px,6vw,88px);letter-spacing:-.07em;line-height:.96;margin:20px 0;max-width:990px}.detail-hero .sub{font-size:15px;color:#c6d0d3}.detail-hero.no-photo{background:radial-gradient(circle at 75% 45%,#334f59,transparent 55%),linear-gradient(110deg,#172a33,#091116)}.detail-hero .huge{position:absolute;right:-2vw;bottom:-.18em;font-size:min(32vw,380px);font-weight:900;opacity:.038;white-space:nowrap}.case-layout{display:grid;grid-template-columns:1fr 330px;gap:85px}.case-main .intro-large{font-size:clamp(22px,2.5vw,36px);line-height:1.4;letter-spacing:-.03em;margin:0 0 65px}.case-main h2{font-size:32px;letter-spacing:-.05em}.case-main li{font-size:15px;line-height:1.8;margin:12px 0;color:#c1cbce}.case-sidebar{border-top:1px solid var(--line)}.meta-row{padding:22px 0;border-bottom:1px solid var(--line)}.meta-row b{display:block;font-size:10px;letter-spacing:.19em;text-transform:uppercase;color:#8b9ba1;margin-bottom:10px}.meta-row span{font-size:15px;font-weight:700}.next-case{border-top:1px solid var(--line);margin-top:65px;padding-top:28px;display:flex;justify-content:space-between;align-items:center;gap:25px}.service-list{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:55px 0}.service-card{padding:32px;border:1px solid var(--line);background:#132028;min-height:450px;display:flex;flex-direction:column}.service-card .index{color:var(--gold);font-size:11px;letter-spacing:.15em}.service-card h2{font-size:31px;line-height:1.04;letter-spacing:-.06em;margin:40px 0 14px}.service-card p,.service-card li{font-size:13px;line-height:1.7;color:#b5c0c3}.service-card ul{padding-left:18px;margin-bottom:30px}.service-card .btn{margin-top:auto;align-self:flex-start}.about-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;align-items:center}.about-image{height:720px;overflow:hidden}.about-image img{width:100%;height:100%;object-fit:cover;object-position:center top}.about-body p{font-size:16px;line-height:1.85;color:#b6c3c6}.about-gallery{display:grid;grid-template-columns:1.45fr 1fr;gap:15px;margin-top:60px}.about-gallery img{height:420px;width:100%;object-fit:cover}.process-grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);margin-top:55px}.process-step{border-right:1px solid var(--line);padding:30px 24px 40px}.process-step:first-child{padding-left:0}.process-step:last-child{border-right:0}.process-step .index{font-size:12px;color:var(--gold);letter-spacing:.17em}.process-step h3{font-size:22px;letter-spacing:-.05em;margin:48px 0 15px}.process-step p{font-size:13px;line-height:1.75;color:#b6c2c6}.contact-layout{display:grid;grid-template-columns:1fr .9fr;gap:110px;padding:90px 0 110px}.contact-layout h2{font-size:45px;line-height:1.0;letter-spacing:-.055em}.contact-layout p{font-size:15px;color:#b2c0c3;line-height:1.7}.contact-actions{display:grid;gap:15px;margin-top:50px}.contact-actions a{padding:20px 0;border-top:1px solid var(--line);font-size:18px;display:flex;align-items:center;justify-content:space-between}.contact-form{background:#132128;padding:38px;border:1px solid var(--line)}.field{display:block;margin-bottom:22px}.field span{display:block;color:#b4c1c5;font-size:11px;letter-spacing:.08em;margin-bottom:10px}.field input,.field textarea,.field select{display:block;width:100%;background:#091319;border:1px solid #34454d;color:#fff;padding:14px;outline:none;border-radius:0;font-size:14px}.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--gold)}.field textarea{min-height:135px;resize:vertical}.form-note{font-size:12px;color:#a8b7bd;line-height:1.5}.sr-only{position:absolute;clip:rect(0,0,0,0);height:1px;width:1px;overflow:hidden;white-space:nowrap}.notice{margin:35px 0;padding:18px 22px;border-left:3px solid var(--goldstrong);background:#182931;color:#c9d4d7;font-size:12px;line-height:1.65}.empty-state{border:1px solid var(--line);padding:55px;text-align:center;color:#c5ced0}.float-top{display:none;position:fixed;right:25px;bottom:25px;z-index:40;background:#d7bc9d;color:#101719;padding:13px 16px;border:0;font-weight:850;font-size:12px;box-shadow:0 8px 40px rgba(0,0,0,.3)}
.float-top.visible{display:block}@media (max-width:1100px){.shell{width:min(100% - 52px,1440px)}.mainnav{gap:19px}.studio-columns{grid-template-columns:1fr 1fr}.studio-text{grid-column:1/-1;padding:70px 0}.studio-pic,.studio-portrait{height:480px}.service-row{grid-template-columns:1fr 1fr}.service-intro,.service-tile{border-bottom:1px solid var(--line)}.trust-shell{grid-template-columns:1fr}.clientnames{grid-template-columns:repeat(4,1fr)}.process-grid{grid-template-columns:repeat(3,1fr)}.process-step{border-bottom:1px solid var(--line)}.archive-grid{grid-template-columns:1fr 1fr}.case-layout{gap:45px}.foot-main{grid-template-columns:1.4fr 1fr 1fr}}
@media (max-width:750px){.shell{width:calc(100% - 36px)}.header-shell{height:68px}.wordmark{font-size:16px}.mainnav{display:none}.mobile-menu-btn{display:block}.header .header-cta{display:none}.mobile-drawer.open{display:flex;flex-direction:column;gap:0;background:#091318;padding:8px 18px 24px;border-top:1px solid var(--line)}.mobile-drawer a{padding:15px 8px;border-bottom:1px solid var(--line);font-size:14px}.top-hero{height:780px;min-height:640px;max-height:none}.hero-shell{padding-top:110px}.display{font-size:clamp(51px,13vw,79px)}.hero-copy .intro{font-size:17px}.hero-index{margin-top:65px}.hero-index span{white-space:nowrap}.hero-index span:last-child{display:none}.hero-corner{display:none}.clientnames{grid-template-columns:repeat(2,1fr);row-gap:26px}.clientnames span{text-align:left}.metrics{grid-template-columns:1fr 1fr}.metric:nth-child(even){border-right:0}.metric:nth-child(3),.metric:nth-child(4){border-top:1px solid var(--line)}.metric{padding:24px 16px!important}.section-pad{padding:75px 0}.section-head{display:block}.section-head .lead{margin-top:22px}.work-grid{grid-template-columns:1fr}.feature{min-height:445px}.outline-panel{min-height:330px}.showreel{min-height:560px}.studio-columns{grid-template-columns:1fr}.studio-pic,.studio-portrait{height:420px}.studio-text{padding:60px 0}.service-row{display:block}.service-intro,.service-tile{border-right:0}.mid-cta-grid,.review-grid,.about-layout,.contact-layout,.case-layout,.grip-content,.foot-main{display:block}.review-grid{padding:55px 0}.grip-content img{max-width:70%;margin-bottom:25px}.grip-content a{display:inline-block;margin-top:20px}.about-image{height:520px;margin-bottom:38px}.about-gallery{grid-template-columns:1fr}.about-gallery img{height:360px}.service-list{grid-template-columns:1fr}.service-card{min-height:0}.portfolio-controls{align-items:stretch;flex-direction:column}.search{width:100%}.archive-grid{grid-template-columns:1fr}.archive-img{height:250px}.detail-hero{min-height:520px}.detail-hero .shell{padding-top:125px;padding-bottom:60px}.case-sidebar{margin-top:50px}.process-grid{grid-template-columns:1fr}.process-step{border-right:0;padding:25px 0}.process-step h3{margin-top:20px}.contact-layout{padding:55px 0 70px}.contact-form{margin-top:55px;padding:24px}.foot-col{margin-top:40px}.foot-bottom{display:block}.foot-bottom span{display:block;margin-top:12px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-photo,.hero-photo img{animation:none}.hero-photo:first-child{opacity:1}*{transition:none!important}}


/* =========================================================
   BLACK V2: TIGHTER GRID / SHARPER BLOCKS
   ========================================================= */

/* Overall rhythm */
:root{
  --tight-gap:10px;
  --tight-line:rgba(255,255,255,.10);
}
.wrap{width:min(1480px,calc(100% - 56px))}
.section-pad{padding:78px 0}
.section-head{margin-bottom:24px}
.section-head .lead{max-width:470px}
.h2{line-height:.96}
.eyebrow{letter-spacing:.22em}

/* Hero slightly more compact and intentional */
.top-hero{
  min-height:700px;
  height:min(760px,88svh);
}
.hero-shell{
  padding-top:178px;
  padding-bottom:42px;
}
.hero-copy{max-width:780px}
.hero-copy .intro{
  max-width:610px;
  margin-bottom:26px;
}
.hero-actions{gap:10px}
.hero-index{margin-top:46px}
.header{height:78px}
.header .wrap{height:78px}
.mainnav{gap:22px}

/* Trust / metrics */
.trust-shell{
  padding:18px 0;
  gap:22px;
}
.clientnames{gap:14px}
.metrics .wrap{
  min-height:96px;
}
.metric{
  padding:19px 26px;
}
.metric strong{font-size:38px}

/* Featured work cards */
.work-grid{
  gap:10px;
}
.feature{
  min-height:390px;
  border-radius:0!important;
}
.feature-body{
  left:20px;
  right:58px;
  bottom:18px;
}
.feature-body h3{
  font-size:clamp(25px,2.2vw,34px);
  margin:6px 0 3px;
}
.feature-body p{font-size:13px}
.roundarrow{
  width:40px;
  height:40px;
  right:17px;
  bottom:17px;
}

/* Text / outline panels */
.outline-grid{gap:10px}
.outline-panel{
  padding:22px;
  min-height:210px;
  border-radius:0!important;
}
.outline-panel h3{
  margin-top:20px;
  font-size:21px;
}

/* Showreel tighter */
.showreel{
  padding:0;
}
.showreel-frame{
  min-height:560px;
  max-height:650px;
}
.showreel-copy{
  left:42px;
  max-width:590px;
}

/* About / collective */
.studio-block .wrap{
  gap:0;
}
.studio-grid{
  grid-template-columns:1.04fr .78fr .64fr;
  min-height:590px;
}
.studio-text{
  padding:66px 6vw 60px 0;
}
.studio-text p{
  margin-top:18px;
  line-height:1.62;
}
.studio-team{
  gap:8px;
  margin-top:22px;
}
.team-chip{
  padding:11px 12px;
  font-size:11px;
}

/* Services as a sharper band */
.service-row{
  gap:0;
}
.service-intro,.service-tile{
  padding:28px 20px;
}
.service-intro h2{
  margin-top:10px;
  font-size:clamp(31px,3vw,42px);
}
.service-tile .n{margin-bottom:24px}
.service-tile h3{font-size:16px}
.service-tile p{font-size:12px;line-height:1.52}

/* Process / approach */
.process-grid{
  gap:0;
}
.process-step{
  padding:24px 22px 26px;
  min-height:190px;
}
.process-step:not(:last-child){
  border-right:1px solid var(--tight-line);
}
.process-step h3{
  margin:30px 0 10px;
}

/* Portfolio archive: tighter editorial grid */
.archive-grid{
  gap:10px;
}
.archive-card{
  border-radius:0!important;
}
.archive-img{
  height:205px;
}
.archive-copy{
  padding:17px 18px 18px;
}
.archive-copy h3{
  font-size:20px;
  margin:12px 0 6px;
}
.archive-copy p{
  font-size:12px;
  line-height:1.5;
}
.archive-copy .role{
  margin-top:14px;
  padding-top:12px;
}
.filters{
  gap:7px;
  margin-bottom:22px;
}
.filter{
  padding:8px 12px;
  border-radius:0!important;
}

/* Reviews / mid CTA */
.review-strip{padding:60px 0}
.review-grid{gap:40px}
.mid-cta{padding:62px 0}
.mid-cta-grid{gap:50px}

/* GRIP smaller and more integrated */
.grip-banner{padding:54px 0}
.grip-grid{gap:54px}
.grip-logo{max-width:390px}
.grip-content p{max-width:560px}

/* Contact / footer */
.contact-section{padding:78px 0}
.contact-layout{gap:70px}
.contact-form{padding:26px;border-radius:0!important}
.footer{padding-top:64px}
.foot-grid{gap:36px}
.foot-bottom{margin-top:46px;padding-top:18px}

/* Subpages */
.subhero{padding:150px 0 70px}
.subhero .page-lead{max-width:650px}
.detail-hero{min-height:500px}
.case-grid{gap:55px}
.case-main p,.case-main li{line-height:1.6}

/* Sharp, production-house feel */
.feature,
.outline-panel,
.archive-card,
.contact-form,
.filter,
.btn,
.team-chip{
  border-radius:0!important;
}
.btn{
  padding:13px 17px;
}
.card-shadow,
.feature,
.archive-card{
  box-shadow:none!important;
}

/* Mobile tightening */
@media(max-width:900px){
  .wrap{width:calc(100% - 34px)}
  .section-pad{padding:62px 0}
  .top-hero{min-height:680px;height:auto}
  .hero-shell{padding-top:145px;padding-bottom:34px}
  .studio-grid{grid-template-columns:1fr}
  .studio-text{padding:55px 0 45px}
  .studio-pic,.studio-portrait{min-height:440px}
  .service-row{grid-template-columns:1fr 1fr}
  .service-intro{grid-column:1/-1}
  .process-grid{grid-template-columns:1fr 1fr}
  .archive-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .wrap{width:calc(100% - 26px)}
  .section-pad{padding:52px 0}
  .header,.header .wrap{height:68px}
  .hero-shell{padding-top:125px}
  .hero-index{margin-top:34px}
  .work-grid{gap:8px}
  .feature{min-height:380px}
  .feature-body{left:16px;bottom:15px}
  .service-row{grid-template-columns:1fr}
  .process-grid{grid-template-columns:1fr}
  .process-step{border-right:0!important;border-bottom:1px solid var(--tight-line)}
  .archive-grid{grid-template-columns:1fr}
  .archive-img{height:220px}
  .showreel-frame{min-height:520px}
  .showreel-copy{left:22px;right:22px}
}


/* Official Christiaan Sharobim wordmark */
.brand-logo{display:inline-flex;align-items:center;line-height:1}
.brand-logo img{display:block;width:auto;height:34px;max-width:245px;object-fit:contain}
.footer-brand-logo img{height:42px;max-width:300px;margin-bottom:18px}
@media(max-width:640px){
  .brand-logo img{height:27px;max-width:190px}
  .footer-brand-logo img{height:34px;max-width:230px}
}


/* =========================================================
   TYPOGRAPHY REFINEMENT: feedback 02-10-2026
   Tracking 10 interpreted as ~0.01em, not 10px.
   ========================================================= */

.display,
.h2,
.feature-body h3,
.archive-copy h3,
.subhero h1,
.detail-hero h1 {
  letter-spacing: 0.01em !important;
}

.hero-copy .intro {
  font-size: 17px !important;
  line-height: 1.48 !important;
  max-width: 590px !important;
  margin-top: 18px !important;
  margin-bottom: 25px !important;
  letter-spacing: 0 !important;
}

.section-head .lead,
.subhero .page-lead,
.studio-text p,
.showreel-copy p,
.mid-cta p {
  font-size: 15.5px !important;
  line-height: 1.58 !important;
  letter-spacing: 0 !important;
}

.feature-body p {
  font-size: 13.5px !important;
  line-height: 1.45 !important;
}

.archive-copy p {
  font-size: 12.75px !important;
  line-height: 1.52 !important;
}

.eyebrow {
  letter-spacing: .20em !important;
}

@media(max-width:640px){
  .hero-copy .intro{
    font-size:16px !important;
    line-height:1.5 !important;
  }
  .section-head .lead,
  .subhero .page-lead,
  .studio-text p,
  .showreel-copy p,
  .mid-cta p{
    font-size:15px !important;
  }
}


/* =========================================================
   TYPOGRAPHY V3: smaller supporting copy
   ========================================================= */

.hero-copy .intro {
  font-size: 15px !important;
  line-height: 1.46 !important;
  max-width: 545px !important;
  margin-top: 16px !important;
  margin-bottom: 23px !important;
}

.section-head .lead,
.subhero .page-lead,
.studio-text p,
.showreel-copy p,
.mid-cta p {
  font-size: 14.5px !important;
  line-height: 1.55 !important;
}

.feature-body p {
  font-size: 12.75px !important;
  line-height: 1.42 !important;
}

.archive-copy p {
  font-size: 12px !important;
  line-height: 1.48 !important;
}

@media(max-width:640px){
  .hero-copy .intro{
    font-size:14px !important;
    line-height:1.48 !important;
    max-width:500px !important;
  }

  .section-head .lead,
  .subhero .page-lead,
  .studio-text p,
  .showreel-copy p,
  .mid-cta p{
    font-size:14px !important;
  }
}


/* TYPOGRAPHY V4: title tracking reduced from 10 to 5 */
.display,
.h2,
.feature-body h3,
.archive-copy h3,
.subhero h1,
.detail-hero h1 {
  letter-spacing: 0.005em !important;
}


/* OVER CHRISTIAAN V5: calmer hierarchy and more natural copy */
#page-over .subhero{
  padding-top:132px !important;
  padding-bottom:62px !important;
}
#page-over .subhero .eyebrow{
  font-size:10px !important;
  letter-spacing:.18em !important;
  margin-bottom:16px !important;
}
#page-over .subhero .display{
  font-size:clamp(46px,5vw,72px) !important;
  line-height:.96 !important;
  letter-spacing:.005em !important;
  max-width:780px !important;
  margin-bottom:22px !important;
}
#page-over .subhero .page-lead{
  font-size:15px !important;
  line-height:1.55 !important;
  max-width:610px !important;
  color:#b9c0c4 !important;
}
@media(max-width:640px){
  #page-over .subhero{
    padding-top:112px !important;
    padding-bottom:48px !important;
  }
  #page-over .subhero .display{
    font-size:clamp(40px,12vw,54px) !important;
  }
  #page-over .subhero .page-lead{
    font-size:14px !important;
  }
}


/* =========================================================
   SITEWIDE V6 — calmer hierarchy + consistent human copy
   ========================================================= */

/* Interior page hierarchy */
.subhero{
  padding-top:128px !important;
  padding-bottom:58px !important;
}
.subhero .eyebrow{
  font-size:10px !important;
  letter-spacing:.17em !important;
  margin-bottom:14px !important;
}
.subhero .display{
  font-size:clamp(44px,5vw,68px) !important;
  line-height:.97 !important;
  letter-spacing:.005em !important;
  max-width:820px !important;
  margin-bottom:20px !important;
}
.subhero .page-lead{
  font-size:14.5px !important;
  line-height:1.55 !important;
  max-width:620px !important;
}

/* Section titles */
.section-head .h2,
.studio-text .h2,
.showreel-copy .h2,
.mid-cta .h2,
.about-body .h2{
  font-size:clamp(34px,3.8vw,50px) !important;
  line-height:1 !important;
  letter-spacing:.005em !important;
}
.section-head .lead,
.studio-text p,
.showreel-copy p,
.mid-cta p,
.about-body p,
.review-grid p{
  font-size:14.5px !important;
  line-height:1.56 !important;
}

/* Service and process cards */
.service-card h2{
  font-size:clamp(22px,2.4vw,31px) !important;
  line-height:1.08 !important;
  letter-spacing:.003em !important;
}
.service-card p,
.process-step p{
  font-size:13.5px !important;
  line-height:1.52 !important;
}
.process-step h3{
  font-size:17px !important;
  line-height:1.15 !important;
}

/* Review band should not overpower page content */
.review-grid h2{
  font-size:clamp(30px,3vw,43px) !important;
  line-height:1.03 !important;
  letter-spacing:.005em !important;
}

/* Contact */
.contact-layout h2{
  font-size:clamp(30px,3vw,44px) !important;
  line-height:1.03 !important;
  letter-spacing:.005em !important;
}
.contact-layout p{
  font-size:14.5px !important;
  line-height:1.55 !important;
}

/* Home keeps impact, but supporting text remains clearly secondary */
#page-home .hero-copy .intro{
  font-size:15px !important;
  line-height:1.48 !important;
  max-width:575px !important;
}
#home-work .h2{
  font-size:clamp(38px,4.2vw,54px) !important;
}

/* Mobile */
@media(max-width:640px){
  .subhero{
    padding-top:108px !important;
    padding-bottom:44px !important;
  }
  .subhero .display{
    font-size:clamp(38px,11vw,52px) !important;
  }
  .subhero .page-lead,
  .section-head .lead,
  .studio-text p,
  .showreel-copy p,
  .mid-cta p,
  .about-body p,
  .review-grid p,
  .contact-layout p{
    font-size:14px !important;
  }
}


/* =========================================================
   V7 — SMALLER, CALMER TYPE SCALE
   ========================================================= */

/* Home hero keeps impact, but no longer dominates the whole screen */
#page-home .display{
  font-size:clamp(48px,6.2vw,88px) !important;
  line-height:.94 !important;
  letter-spacing:.003em !important;
  max-width:820px !important;
}

/* All interior page titles */
.subhero .display{
  font-size:clamp(36px,4.2vw,56px) !important;
  line-height:1 !important;
  letter-spacing:.003em !important;
  max-width:760px !important;
}

/* Main section titles throughout */
.section-head .h2,
.studio-text .h2,
.showreel-copy .h2,
.mid-cta .h2,
.about-body .h2{
  font-size:clamp(30px,3.2vw,42px) !important;
  line-height:1.03 !important;
  letter-spacing:.003em !important;
}

/* Home work heading */
#home-work .h2{
  font-size:clamp(32px,3.6vw,46px) !important;
}

/* Reviews and contact */
.review-grid h2{
  font-size:clamp(27px,2.8vw,37px) !important;
  line-height:1.06 !important;
}
.contact-layout h2{
  font-size:clamp(28px,3vw,40px) !important;
  line-height:1.05 !important;
}

/* Service headings */
.service-card h2{
  font-size:clamp(20px,2.2vw,27px) !important;
}

/* Card titles */
.feature-body h3{
  font-size:clamp(22px,2vw,30px) !important;
}
.archive-copy h3{
  font-size:18px !important;
}

/* Slightly tighter supporting copy */
.hero-copy .intro,
.subhero .page-lead,
.section-head .lead,
.studio-text p,
.showreel-copy p,
.mid-cta p,
.about-body p,
.review-grid p,
.contact-layout p{
  font-size:14px !important;
  line-height:1.52 !important;
}

/* More compact vertical rhythm around page intros */
.subhero{
  padding-top:118px !important;
  padding-bottom:48px !important;
}
.section-head{
  margin-bottom:20px !important;
}

/* Legal page */
.legal-wrap{max-width:900px;padding-top:64px;padding-bottom:96px}
.legal-copy{color:var(--muted);font-size:15px;line-height:1.75}
.legal-copy h2{color:var(--ink);font-size:23px;margin:44px 0 12px}
.legal-copy p{margin:0 0 12px}
.legal-meta{color:var(--gold);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin-bottom:28px}
.case-credits{margin:36px 0;padding:24px;border:1px solid var(--line);background:#101d23}
.case-credits p{margin:12px 0 0;color:#c1cbce;line-height:1.75}

/* Mobile */
@media(max-width:640px){
  #page-home .display{
    font-size:clamp(42px,12vw,58px) !important;
  }
  .subhero .display{
    font-size:clamp(34px,10vw,44px) !important;
  }
  .section-head .h2,
  .studio-text .h2,
  .showreel-copy .h2,
  .mid-cta .h2,
  .about-body .h2{
    font-size:clamp(28px,8vw,36px) !important;
  }
  .review-grid h2,
  .contact-layout h2{
    font-size:clamp(26px,7.5vw,34px) !important;
  }
}




/* Alleen geverifieerd beeld blijft zichtbaar: projectbeeld bij het juiste project en het portret bij Over. */
.hero-media,
.showreel > img,
.subhero.has-image > img,
.studio-pic,
.about-gallery{display:none !important}
.top-hero{
  background:
    radial-gradient(circle at 78% 32%,rgba(219,194,164,.12),transparent 30%),
    radial-gradient(circle at 72% 76%,rgba(52,89,101,.22),transparent 34%),
    linear-gradient(118deg,#071015 0%,#0c1b22 62%,#142b34 100%);
}
.subhero.has-image{
  background:
    radial-gradient(circle at 78% 32%,rgba(219,194,164,.12),transparent 30%),
    linear-gradient(112deg,#081217,#172a31);
}
.subhero.has-image:after{background:linear-gradient(90deg,rgba(3,9,13,.9),rgba(3,9,13,.16))}
.studio-columns{grid-template-columns:1.18fr .82fr}
.archive-img{height:auto;aspect-ratio:16/9}
.archive-img.original-photo img{object-fit:contain;background:#091116}
.case-media{width:min(960px,100%);aspect-ratio:16/9;margin:0 auto 72px;overflow:hidden;background:#0e1a20;border:1px solid var(--line)}
.case-media img{width:100%;height:100%;object-fit:cover}
.case-media.original-photo{width:min(760px,100%);aspect-ratio:auto;background:#091116}
.case-media.original-photo img{height:auto;max-height:720px;object-fit:contain;margin-inline:auto}
@media (max-width:750px){
  .studio-columns{grid-template-columns:1fr}
  .case-media{margin-bottom:48px}
}



/* V15 — full-width hero photography on every page */
.hero-photo{opacity:1!important;animation:none!important}
.hero-photo img{animation:none!important}
.hero-media .hero-photo:not(.hero-static){display:none!important}
.hero-static{display:block!important}
.hero-static img{width:100%;height:100%;object-fit:cover;object-position:center 48%;filter:saturate(.86) contrast(1.12) brightness(.66)}

.subhero.has-image{position:relative;isolation:isolate;min-height:520px;display:flex;align-items:center;background:#0b151a!important;overflow:hidden}
.subhero.has-image>img.page-hero-photo,
.subhero.has-image>img{position:absolute;z-index:-2;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.84) contrast(1.05) brightness(.58)}
.subhero.has-image:after{content:'';position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,rgba(3,9,13,.92) 0%,rgba(3,9,13,.74) 32%,rgba(3,9,13,.30) 72%,rgba(3,9,13,.20) 100%),linear-gradient(0deg,rgba(3,9,13,.48),transparent 55%)}

#page-diensten .subhero>img{object-position:center 48%}
#page-werk .subhero>img{object-position:center 48%}
#page-over .subhero>img{object-position:center 20%}
#page-werkwijze .subhero>img{object-position:center 42%}
#page-contact .subhero>img{object-position:center 58%}
#page-voorwaarden .subhero>img{object-position:center 45%}

.service-row{grid-template-columns:1fr repeat(4,1fr)!important}
.service-list{grid-template-columns:repeat(4,1fr)!important}
@media (max-width:1300px){
  .service-row{grid-template-columns:1fr 1fr 1fr!important}
  .service-intro{grid-column:1/-1}
  .service-list{grid-template-columns:repeat(2,1fr)!important}
}
@media (max-width:750px){
  .service-list{grid-template-columns:1fr!important}
  .subhero.has-image{min-height:460px}
  .hero-static img{object-position:center 52%}
}



/* V18 – goedgekeurde beeldkeuzes */
#page-over .subhero .page-hero-photo{
  object-position:center 44%;
}
#page-werkwijze .subhero .page-hero-photo{
  object-position:center 56%;
}
.briefing-feature{
  margin:32px 0 44px;
  max-width:980px;
}
.briefing-feature img{
  display:block;
  width:100%;
  max-height:620px;
  object-fit:cover;
  object-position:center 46%;
  border-radius:2px;
}
.briefing-feature figcaption{
  margin-top:12px;
  color:rgba(235,239,239,.72);
  font-size:14px;
  line-height:1.5;
}
@media (max-width:760px){
  #page-over .subhero .page-hero-photo{
    object-position:58% center;
  }
  #page-werkwijze .subhero .page-hero-photo{
    object-position:center center;
  }
  .briefing-feature{
    margin:24px 0 34px;
  }
  .briefing-feature img{
    max-height:520px;
  }
}



/* V18 READY — vaste WhatsApp-knop */
.whatsapp-float{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:99999;
  display:flex;
  align-items:center;
  gap:10px;
  min-height:52px;
  padding:0 18px;
  background:#e4c6a4;
  color:#081014;
  border:1px solid rgba(255,255,255,.16);
  text-decoration:none;
  font:700 13px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.02em;
  box-shadow:0 12px 32px rgba(0,0,0,.28);
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.whatsapp-float:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 38px rgba(0,0,0,.34);
  background:#efd3b2;
}
.whatsapp-float-icon{
  font-size:18px;
  line-height:1;
}
@media (max-width:720px){
  .whatsapp-float{
    right:14px;
    bottom:14px;
    min-height:48px;
    padding:0 15px;
  }
}

/* Zorg dat alle binnenpagina-headerbeelden echt als hero zichtbaar blijven */
.subhero.has-image{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.subhero.has-image .page-hero-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:-2;
}
.subhero.has-image:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(5,14,18,.84) 0%,rgba(5,14,18,.60) 50%,rgba(5,14,18,.35) 100%);
  z-index:-1;
  pointer-events:none;
}



.whatsapp-float{
  position:fixed !important;
  right:22px !important;
  bottom:22px !important;
  z-index:99999 !important;
  display:flex !important;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 18px;
  background:#e4c6a4;
  color:#081014 !important;
  text-decoration:none !important;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 12px 32px rgba(0,0,0,.32);
  font:700 13px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.whatsapp-float:hover{transform:translateY(-2px);background:#efd3b2}
@media(max-width:720px){
  .whatsapp-float{right:14px !important;bottom:14px !important;min-height:48px;padding:0 15px}
}



/* No decorative arrow symbols anywhere */
a::after,
button::after,
.btn::after,
.button::after,
.cta::after,
.nav-cta::after,
.project-link::after,
.link-arrow::after{
  content:none !important;
}
.arrow,
.icon-arrow,
.link-arrow,
.cta-arrow{
  display:none !important;
}



/* HOME — rotating hero images */
#page-home .top-hero{position:relative;overflow:hidden}
#page-home .top-hero .hero-media{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  overflow:hidden !important;
  z-index:0 !important;
}
#page-home .top-hero .hero-photo{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  margin:0 !important;
  opacity:0 !important;
  visibility:visible !important;
  transition:opacity 1.2s ease !important;
  z-index:1 !important;
}
#page-home .top-hero .hero-photo.is-active{
  opacity:1 !important;
  z-index:2 !important;
}
#page-home .top-hero .hero-photo img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  transform:scale(1.01);
  transition:transform 6.5s ease !important;
  filter:saturate(.88) contrast(1.08) brightness(.67);
}
#page-home .top-hero .hero-photo.is-active img{transform:scale(1.055)}
#page-home .top-hero .hero-photo.photo-kane img{object-position:center 50% !important}
#page-home .top-hero .hero-photo.photo-gala img{object-position:center 62% !important}
#page-home .top-hero .hero-photo.photo-tv img{object-position:center 46% !important}
/* V47 — homepage hero gebruikt uitsluitend eventfotografie; bestaande look & feel behouden */
#page-home .top-hero .hero-photo.photo-truckstar img{object-position:center 48% !important}

#page-home .top-hero .hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:4;
  background:
    linear-gradient(90deg,rgba(3,10,13,.96) 0%,rgba(3,10,13,.80) 30%,rgba(3,10,13,.36) 70%,rgba(3,10,13,.18) 100%),
    linear-gradient(0deg,rgba(3,10,13,.60),transparent 52%);
  pointer-events:none;
}
#page-home .top-hero .hero-shell{position:relative !important;z-index:5 !important}

/* ALL INNER PAGES — visible first-header photography */
.subhero.has-image{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:#081116 !important;
}
.subhero.has-image > .page-hero-photo{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  opacity:1 !important;
  visibility:visible !important;
  z-index:0 !important;
  filter:saturate(.85) contrast(1.06) brightness(.58);
}
.subhero.has-image::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1 !important;
  background:
    linear-gradient(90deg,rgba(3,12,16,.93) 0%,rgba(3,12,16,.72) 42%,rgba(3,12,16,.34) 78%,rgba(3,12,16,.22) 100%),
    linear-gradient(0deg,rgba(3,12,16,.34),transparent 60%);
  pointer-events:none;
}
.subhero.has-image > .shell{position:relative !important;z-index:2 !important}

#page-werk .page-hero-photo{object-position:center 50% !important}
#page-diensten .page-hero-photo{object-position:center 48% !important}
#page-over .page-hero-photo{object-position:center 30% !important}
#page-werkwijze .page-hero-photo{object-position:center 48% !important}
#page-contact .page-hero-photo{object-position:center 58% !important}
#page-voorwaarden .page-hero-photo{object-position:center 45% !important}

@media(max-width:760px){
  #page-home .top-hero .hero-photo img{object-position:center center !important}
  .subhero.has-image > .page-hero-photo{object-position:center center !important}
}



.case-card img,
.work-card img,
.project-card img,
.feature-card img,
.feature-media img,
.case-media img{
  object-fit:cover !important;
}



.promo-links .btn{margin:0}
.archive-img img,.case-media img{object-fit:cover!important}


/* V25 — opdrachtgevers & reviews */
.client-logo-section{
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:34px 0 30px;
  overflow:hidden;
}
.client-logo-section h2{
  margin:8px 0 24px;
  font-size:clamp(26px,3vw,46px);
  max-width:780px;
}
.client-logo-viewport{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.client-logo-track{
  display:flex;
  align-items:center;
  width:max-content;
  gap:46px;
  animation:clientLogoScroll 42s linear infinite;
}
.client-logo-viewport:hover .client-logo-track{animation-play-state:paused}
.client-logo-item{
  width:150px;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  opacity:.86;
}
.client-logo-item img{
  max-width:100%;
  max-height:54px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:grayscale(1) brightness(1.45);
}
@keyframes clientLogoScroll{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 23px))}
}

.reviews-full{
  border-top:1px solid rgba(255,255,255,.08);
}
.reviews-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:48px;
  align-items:end;
  margin-bottom:34px;
}
.reviews-head h2{
  margin:8px 0 10px;
  font-size:clamp(34px,5vw,72px);
  max-width:860px;
}
.reviews-head p{max-width:650px}
.review-score{
  min-width:190px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
  padding:20px 22px;
  border:1px solid rgba(255,255,255,.16);
  text-decoration:none;
  color:inherit;
}
.review-score strong{
  font-size:42px;
  line-height:1;
}
.review-stars{
  letter-spacing:.12em;
  color:#e4c6a4;
}
.review-score span:last-child{
  font-size:12px;
  opacity:.72;
}
.reviews-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}
.review-card{
  padding:30px;
  min-height:260px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.025);
  display:flex;
  flex-direction:column;
}
.review-card blockquote{
  margin:18px 0 26px;
  font-size:17px;
  line-height:1.62;
  color:rgba(255,255,255,.88);
}
.review-person{
  margin-top:auto;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.review-person strong{font-size:15px}
.review-person span{font-size:12px;opacity:.62}
.reviews-more{margin-top:28px}
.review-strip-real{padding:72px 0}
.review-strip-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:end;
}
.review-strip-grid h2{font-size:clamp(30px,4vw,54px);margin-top:8px}
.review-strip-grid p{max-width:560px;margin-bottom:22px}

@media(max-width:820px){
  .reviews-head,.review-strip-grid{grid-template-columns:1fr}
  .reviews-grid{grid-template-columns:1fr}
  .client-logo-item{width:128px}
  .client-logo-track{gap:30px}
  .review-card{min-height:0}
}
@media(prefers-reduced-motion:reduce){
  .client-logo-track{animation:none}
}


/* V26 — Google reviews integration */
.reviews-more-panel{
  margin-top:20px;
  border-top:1px solid rgba(255,255,255,.10);
  padding-top:20px;
}
.reviews-more-panel summary{
  cursor:pointer;
  list-style:none;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 16px;
  border:1px solid rgba(255,255,255,.16);
  font-weight:700;
  font-size:13px;
}
.reviews-more-panel summary::-webkit-details-marker{display:none}
.reviews-grid-more{margin-top:18px}

.google-reviews-box{
  margin-top:30px;
  padding:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.025);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:28px;
  align-items:center;
}
.google-reviews-brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:190px;
}
.google-g{
  width:44px;
  height:44px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  color:#111;
  font-weight:900;
  font-size:22px;
}
.google-reviews-brand div:last-child{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.google-reviews-brand strong{font-size:20px}
.google-reviews-brand span{font-size:12px;opacity:.68}
.google-reviews-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.google-reviews-actions p{
  margin:0;
  max-width:620px;
}
.google-live-note{
  margin:12px 0 0;
  font-size:12px;
  opacity:.58;
}
@media(max-width:820px){
  .google-reviews-box{grid-template-columns:1fr}
  .google-reviews-actions{align-items:flex-start;flex-direction:column}
}


/* V29 — tighter editorial spacing + remove decorative circles */

/* Remove the round action circles from image cards */
.roundarrow{
  display:none !important;
}

/* The card copy no longer needs to leave space for the circle */
.feature-body{
  right:20px !important;
}

/* Global rhythm: less empty vertical space */
.section-pad{
  padding:62px 0 !important;
}
.section-head{
  margin-bottom:24px !important;
  gap:28px !important;
}
.section-head .lead{
  line-height:1.55 !important;
}
.h2{
  margin:10px 0 14px !important;
}
.eyebrow{
  margin-bottom:5px;
}

/* Hero stays cinematic, but less oversized */
.top-hero{
  min-height:650px !important;
  height:min(760px,90svh) !important;
}
.hero-shell{
  padding-top:104px !important;
  padding-bottom:42px !important;
}
.hero-copy .intro{
  margin-bottom:24px !important;
  max-width:690px !important;
}
.hero-index{
  margin-top:48px !important;
}
.hero-corner{
  bottom:24px !important;
}

/* Logo/trust area should behave like a band, not a full section */
.client-logo-section{
  padding:22px 0 18px !important;
}
.client-logo-section h2{
  margin:5px 0 16px !important;
  font-size:clamp(22px,2.5vw,36px) !important;
}
.client-logo-item{
  height:54px !important;
}
.client-logo-item img{
  max-height:42px !important;
}

/* Metrics compact */
.metric{
  padding:15px 22px !important;
}
.metric strong{
  font-size:34px !important;
}

/* Featured work */
.feature{
  min-height:340px !important;
}
.feature-body{
  bottom:16px !important;
  left:18px !important;
}
.feature-body h3{
  font-size:clamp(23px,2vw,31px) !important;
}
.work-grid{
  gap:8px !important;
}

/* Selected work / archive */
.archive-grid{
  gap:8px !important;
}
.archive-img{
  height:190px !important;
}
.archive-copy{
  padding:15px 16px 16px !important;
}
.archive-copy h3{
  margin:9px 0 5px !important;
}
.archive-copy .role{
  margin-top:10px !important;
  padding-top:10px !important;
}

/* About/studio section */
.studio-columns,
.studio-grid{
  min-height:520px !important;
}
.studio-text{
  padding-top:48px !important;
  padding-bottom:48px !important;
}
.studio-text p{
  line-height:1.58 !important;
}
.studio-pic,
.studio-portrait{
  min-height:520px;
}

/* Services */
.service-intro,
.service-tile{
  padding:22px 18px !important;
}
.service-tile h3{
  margin:22px 0 9px !important;
}
.service-tile p{
  line-height:1.48 !important;
}

/* Process */
.process-grid{
  margin-top:34px !important;
}
.process-step{
  padding:20px 18px 22px !important;
  min-height:160px !important;
}
.process-step h3{
  margin:20px 0 8px !important;
}

/* CTA and GRIP */
.mid-cta{
  padding:48px 0 !important;
}
.mid-cta-grid{
  gap:38px !important;
}
.grip-banner{
  padding:42px 0 !important;
}
.grip-content,
.grip-grid{
  gap:36px !important;
}

/* Reviews: keep readable but stop them feeling like a separate long page */
.reviews-full{
  padding-top:54px !important;
  padding-bottom:54px !important;
}
.reviews-head{
  margin-bottom:24px !important;
  gap:30px !important;
}
.reviews-head h2{
  font-size:clamp(32px,4vw,58px) !important;
}
.reviews-grid{
  gap:10px !important;
}
.review-card{
  min-height:0 !important;
  padding:22px !important;
}
.review-card blockquote{
  margin:13px 0 18px !important;
  font-size:15px !important;
  line-height:1.54 !important;
}
.google-reviews-box{
  margin-top:22px !important;
}

/* Subpage headers */
.subhero{
  padding:118px 0 48px !important;
  min-height:360px;
  display:flex;
  align-items:flex-end;
}
.detail-hero{
  min-height:430px !important;
}
.detail-hero .shell{
  padding-top:135px !important;
  padding-bottom:48px !important;
}

/* Case pages */
.case-layout{
  gap:52px !important;
}
.case-main .intro-large{
  margin-bottom:38px !important;
}
.meta-row{
  padding:16px 0 !important;
}
.next-case{
  margin-top:42px !important;
}

/* About page */
.about-layout{
  gap:52px !important;
}
.about-image{
  height:590px !important;
}
.about-body p{
  line-height:1.68 !important;
}
.about-gallery{
  margin-top:38px !important;
}
.about-gallery img{
  height:350px !important;
}

/* Contact */
.contact-layout{
  gap:52px !important;
  padding:62px 0 72px !important;
}
.contact-actions{
  margin-top:30px !important;
}
.contact-form{
  padding:22px !important;
}
.field{
  margin-bottom:17px !important;
}

/* Footer */
.footer{
  padding-top:44px !important;
}
.foot-main{
  padding-bottom:38px !important;
}
.foot-bottom{
  margin-top:28px !important;
}

/* Mobile: still compact, without squeezing content */
@media(max-width:750px){
  .section-pad{padding:44px 0 !important}
  .top-hero{
    min-height:610px !important;
    height:720px !important;
  }
  .hero-shell{
    padding-top:102px !important;
    padding-bottom:30px !important;
  }
  .hero-index{margin-top:30px !important}
  .feature{min-height:330px !important}
  .archive-img{height:210px !important}
  .client-logo-section{padding:18px 0 14px !important}
  .subhero{
    min-height:330px !important;
    padding:104px 0 38px !important;
  }
  .about-image{height:480px !important}
  .review-card{padding:18px !important}
  .contact-layout{padding:44px 0 54px !important}
}


/* V30 — visual refinement only: same layout, less oversized and less intense */

/* Typography scale: keep hierarchy, reduce oversized feel */
.hero-copy h1,
.hero-title,
h1{
  font-size:clamp(46px,6.2vw,88px) !important;
  line-height:.98 !important;
  letter-spacing:-.035em !important;
}
.h2,
.section-head h2,
.reviews-head h2,
.subhero h1,
.subhero h2{
  font-size:clamp(30px,4vw,56px) !important;
  line-height:1.02 !important;
  letter-spacing:-.025em !important;
}
h3{
  line-height:1.12 !important;
}

/* Body copy: less large, slightly calmer */
body{
  font-size:15px !important;
}
.hero-copy .intro,
.lead,
.intro-large{
  font-size:clamp(16px,1.45vw,20px) !important;
  line-height:1.5 !important;
}
p{
  line-height:1.58 !important;
}

/* Labels less shouty */
.eyebrow,
.kicker,
.meta-label{
  font-size:11px !important;
  letter-spacing:.12em !important;
}

/* Buttons visually lighter, not structurally different */
.btn,
button,
.nav-cta{
  min-height:42px !important;
  padding:0 16px !important;
  font-size:12px !important;
}

/* Keep hero composition but make it less dominating */
.top-hero{
  min-height:610px !important;
  height:min(700px,86svh) !important;
}
.hero-shell{
  padding-top:96px !important;
  padding-bottom:36px !important;
}
.hero-index{
  margin-top:34px !important;
}

/* Same section structure, just less breathing room */
.section-pad{
  padding:52px 0 !important;
}
.section-head{
  margin-bottom:20px !important;
}
.mid-cta{
  padding:40px 0 !important;
}
.grip-banner{
  padding:36px 0 !important;
}

/* Work cards: same layout, calmer proportions */
.feature{
  min-height:310px !important;
}
.feature-body{
  left:16px !important;
  right:16px !important;
  bottom:14px !important;
}
.feature-body h3{
  font-size:clamp(21px,1.8vw,28px) !important;
}
.archive-img{
  height:174px !important;
}
.archive-copy{
  padding:13px 14px 14px !important;
}
.archive-copy h3{
  font-size:18px !important;
}

/* Metrics and badges less dominant */
.metric{
  padding:12px 18px !important;
}
.metric strong{
  font-size:29px !important;
}

/* Services/process retain their grid, but less chunky */
.service-intro,
.service-tile,
.process-step{
  padding:18px 16px !important;
}
.service-tile h3,
.process-step h3{
  font-size:19px !important;
}
.process-step{
  min-height:145px !important;
}

/* Reviews: readable, not giant */
.reviews-full{
  padding-top:46px !important;
  padding-bottom:46px !important;
}
.review-card{
  padding:18px !important;
}
.review-card blockquote{
  font-size:14px !important;
  line-height:1.5 !important;
  margin:11px 0 16px !important;
}
.review-score{
  padding:15px 17px !important;
  min-width:165px !important;
}
.review-score strong{
  font-size:34px !important;
}

/* Logo band: compact, still visible */
.client-logo-section{
  padding:18px 0 14px !important;
}
.client-logo-section h2{
  font-size:clamp(20px,2.2vw,32px) !important;
  margin-bottom:12px !important;
}
.client-logo-item{
  width:135px !important;
  height:48px !important;
}
.client-logo-item img{
  max-height:38px !important;
}

/* Inner page headers: preserve full-width image treatment, reduce height */
.subhero{
  min-height:320px !important;
  padding:100px 0 34px !important;
}
.detail-hero{
  min-height:390px !important;
}
.detail-hero .shell{
  padding-top:120px !important;
  padding-bottom:40px !important;
}

/* About/contact/footer: same composition, reduced visual weight */
.about-image{
  height:520px !important;
}
.about-gallery img{
  height:310px !important;
}
.contact-layout{
  padding:52px 0 60px !important;
}
.contact-form{
  padding:18px !important;
}
.footer{
  padding-top:36px !important;
}
.foot-main{
  padding-bottom:30px !important;
}

/* Mobile — same layout, more proportionate */
@media(max-width:750px){
  .hero-copy h1,
  .hero-title,
  h1{
    font-size:clamp(40px,12vw,60px) !important;
  }
  .h2,
  .section-head h2,
  .reviews-head h2,
  .subhero h1,
  .subhero h2{
    font-size:clamp(28px,8.5vw,42px) !important;
  }
  .top-hero{
    min-height:570px !important;
    height:650px !important;
  }
  .hero-shell{
    padding-top:90px !important;
  }
  .section-pad{
    padding:38px 0 !important;
  }
  .feature{
    min-height:300px !important;
  }
  .archive-img{
    height:190px !important;
  }
  .subhero{
    min-height:300px !important;
    padding:92px 0 30px !important;
  }
  .about-image{
    height:430px !important;
  }
}


/* =========================================================
   V31 — GRIP-like density
   Zelfde layout / zelfde grid / zelfde kleuren.
   Alleen schaal, hoogte en witruimte strakker gemaakt.
   ========================================================= */

/* Algemene verticale ritmiek */
.section-pad{
  padding:36px 0 !important;
}
.section-head{
  margin-bottom:16px !important;
}
.section-head .h2,
.studio-text .h2,
.showreel-copy .h2,
.mid-cta .h2,
.about-body .h2{
  font-size:clamp(27px,2.8vw,38px) !important;
  margin-bottom:10px !important;
}
.section-head .lead,
.studio-text p,
.showreel-copy p,
.mid-cta p,
.about-body p,
.contact-layout p{
  font-size:13.5px !important;
  line-height:1.48 !important;
}

/* Navigatie iets minder zwaar */
.header-shell{
  height:66px !important;
}
.brand-wordmark{
  font-size:24px !important;
}
.nav a{
  font-size:12px !important;
}
.nav-cta{
  min-height:38px !important;
  padding:0 14px !important;
}

/* Home hero — zelfde compositie, minder schermvullend */
.top-hero{
  min-height:540px !important;
  height:min(620px,78svh) !important;
}
.hero-shell{
  padding-top:84px !important;
  padding-bottom:28px !important;
}
.hero-copy h1,
.hero-title{
  font-size:clamp(42px,5.5vw,72px) !important;
  max-width:760px !important;
}
.hero-copy .intro{
  font-size:15px !important;
  line-height:1.48 !important;
  max-width:630px !important;
  margin-bottom:18px !important;
}
.hero-index{
  margin-top:24px !important;
}

/* Logo/trust-balk */
.client-logo-section{
  padding:12px 0 10px !important;
}
.client-logo-section h2{
  font-size:clamp(18px,1.8vw,27px) !important;
  margin:4px 0 9px !important;
}
.client-logo-item{
  width:120px !important;
  height:42px !important;
}
.client-logo-item img{
  max-height:32px !important;
}
.trust-shell{
  padding:11px 0 !important;
}

/* Werk/cases */
.feature{
  min-height:270px !important;
}
.feature-body{
  left:14px !important;
  right:14px !important;
  bottom:12px !important;
}
.feature-body h3{
  font-size:clamp(19px,1.6vw,25px) !important;
  margin:4px 0 2px !important;
}
.feature-body p{
  font-size:12px !important;
}
.work-grid,
.archive-grid{
  gap:7px !important;
}
.archive-img{
  height:158px !important;
}
.archive-copy{
  padding:11px 12px 12px !important;
}
.archive-copy h3{
  font-size:16px !important;
  margin:6px 0 3px !important;
}
.archive-copy p,
.archive-copy .role{
  font-size:12px !important;
  line-height:1.42 !important;
}

/* Showreel */
.showreel,
.showreel-frame{
  min-height:420px !important;
  max-height:500px !important;
}
.showreel-copy{
  padding-block:48px !important;
}

/* Over/studio-blokken */
.studio-columns,
.studio-grid{
  min-height:430px !important;
}
.studio-text{
  padding-top:34px !important;
  padding-bottom:34px !important;
}
.studio-pic,
.studio-portrait{
  min-height:430px !important;
}

/* Expertise / diensten */
.service-intro,
.service-tile{
  padding:15px 14px !important;
}
.service-tile h3{
  margin:14px 0 7px !important;
  font-size:17px !important;
}
.service-tile p{
  font-size:12.5px !important;
  line-height:1.45 !important;
}
.service-list{
  margin:28px 0 !important;
  gap:10px !important;
}

/* Werkwijze */
.process-grid{
  margin-top:22px !important;
}
.process-step{
  min-height:125px !important;
  padding:15px 14px 17px !important;
}
.process-step h3{
  margin:13px 0 6px !important;
  font-size:17px !important;
}
.process-step p{
  font-size:12.5px !important;
  line-height:1.45 !important;
}

/* CTA's */
.mid-cta{
  padding:30px 0 !important;
}
.mid-cta-grid{
  gap:28px !important;
}
.grip-banner{
  padding:28px 0 !important;
}

/* Reviews homepage */
.reviews-full{
  padding-top:32px !important;
  padding-bottom:32px !important;
}
.reviews-head{
  margin-bottom:16px !important;
  gap:22px !important;
}
.reviews-head h2{
  font-size:clamp(26px,2.9vw,40px) !important;
}
.review-card{
  padding:15px !important;
}
.review-card blockquote{
  font-size:13px !important;
  line-height:1.46 !important;
  margin:9px 0 12px !important;
}
.review-score{
  padding:12px 14px !important;
}
.review-score strong{
  font-size:29px !important;
}
.google-reviews-box{
  margin-top:15px !important;
}

/* Reviews-balk op Over Christiaan — dit was nog veel te groot */
.review-strip,
.review-strip-real{
  padding:28px 0 !important;
}
.review-strip-grid{
  gap:28px !important;
  align-items:center !important;
}
.review-strip-grid h2{
  font-size:clamp(27px,2.7vw,38px) !important;
  margin:4px 0 0 !important;
  line-height:1.02 !important;
}
.review-strip-grid p{
  font-size:13.5px !important;
  line-height:1.45 !important;
  margin:0 0 12px !important;
  max-width:500px !important;
}
.review-strip-grid .btn{
  min-height:38px !important;
}

/* Binnenpagina hero — zelfde foto/layout, minder hoog */
.subhero,
.subhero.has-image{
  min-height:260px !important;
  padding:84px 0 26px !important;
}
.subhero .display{
  font-size:clamp(32px,3.6vw,48px) !important;
  margin-bottom:12px !important;
}
.subhero .page-lead{
  font-size:13.5px !important;
  line-height:1.48 !important;
  max-width:570px !important;
}
.subhero .eyebrow{
  margin-bottom:8px !important;
}

/* Over Christiaan */
.about-layout{
  gap:38px !important;
}
.about-image{
  height:440px !important;
  margin-bottom:24px !important;
}
.about-gallery{
  margin-top:24px !important;
  gap:10px !important;
}
.about-gallery img{
  height:270px !important;
}

/* Case detail */
.detail-hero{
  min-height:330px !important;
}
.detail-hero .shell{
  padding-top:100px !important;
  padding-bottom:30px !important;
}
.detail-hero h1{
  font-size:clamp(34px,4.4vw,58px) !important;
  margin:12px 0 !important;
}
.case-layout{
  gap:38px !important;
}
.case-main .intro-large{
  margin-bottom:24px !important;
}
.meta-row{
  padding:11px 0 !important;
}
.next-case{
  margin-top:28px !important;
}

/* Contact */
.contact-layout{
  gap:38px !important;
  padding:36px 0 42px !important;
}
.contact-layout h2{
  font-size:clamp(26px,2.6vw,36px) !important;
}
.contact-actions{
  margin-top:20px !important;
}
.contact-form{
  padding:16px !important;
}
.field{
  margin-bottom:13px !important;
}

/* Footer — grootste winst in de screenshot */
.footer{
  padding-top:26px !important;
  padding-bottom:16px !important;
}
.foot-main{
  gap:28px !important;
  padding-bottom:20px !important;
}
.footer-brand-logo img{
  height:29px !important;
  margin-bottom:10px !important;
}
.footer h3{
  font-size:22px !important;
  margin:10px 0 !important;
}
.footer p{
  font-size:12.5px !important;
  line-height:1.5 !important;
}
.footer h4,
.foot-col h4{
  margin-bottom:10px !important;
}
.foot-col a,
.foot-col p{
  font-size:12.5px !important;
  line-height:1.55 !important;
}
.foot-bottom{
  margin-top:16px !important;
  padding-top:12px !important;
  font-size:11px !important;
}

/* WhatsApp minder dominant */
.whatsapp-float{
  right:18px !important;
  bottom:18px !important;
  min-height:42px !important;
  padding:0 14px !important;
  font-size:12px !important;
}

/* Mobiel */
@media(max-width:750px){
  .section-pad{padding:30px 0 !important}
  .top-hero{
    min-height:520px !important;
    height:590px !important;
  }
  .hero-shell{padding-top:82px !important}
  .hero-copy h1,.hero-title{
    font-size:clamp(38px,11vw,54px) !important;
  }
  .subhero,.subhero.has-image{
    min-height:250px !important;
    padding:82px 0 24px !important;
  }
  .feature{min-height:275px !important}
  .archive-img{height:180px !important}
  .review-strip,.review-strip-real{padding:24px 0 !important}
  .review-strip-grid{gap:16px !important}
  .about-image{height:390px !important}
  .about-gallery img{height:235px !important}
  .contact-layout{padding:30px 0 36px !important}
  .footer{padding-top:24px !important}
}


/* V33 — Over Christiaan block smaller, same layout */
.studio-columns,
.studio-grid{
  min-height:340px !important;
  max-height:420px !important;
}

.studio-text{
  padding-top:24px !important;
  padding-bottom:24px !important;
}

.studio-text .eyebrow{
  margin-bottom:8px !important;
}

.studio-text .h2{
  font-size:clamp(26px,2.4vw,34px) !important;
  line-height:1.03 !important;
  margin-bottom:12px !important;
  max-width:520px !important;
}

.studio-text p{
  font-size:13px !important;
  line-height:1.45 !important;
  max-width:620px !important;
  margin-bottom:18px !important;
}

.studio-text .btn{
  min-height:38px !important;
  padding:0 14px !important;
}

.studio-pic,
.studio-portrait{
  min-height:340px !important;
  max-height:420px !important;
  height:420px !important;
  overflow:hidden !important;
}

.studio-pic img,
.studio-portrait img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center 28% !important;
}

/* Mobile */
@media(max-width:750px){
  .studio-columns,
  .studio-grid{
    min-height:0 !important;
    max-height:none !important;
  }
  .studio-text{
    padding-top:22px !important;
    padding-bottom:22px !important;
  }
  .studio-pic,
  .studio-portrait{
    min-height:0 !important;
    max-height:none !important;
    height:360px !important;
  }
}


/* V38 — requested refinements */

/* Partner/client logos: clearer, larger and more legible */
.client-logo-section{
  padding:18px 0 16px !important;
}
.client-logo-track{
  gap:24px !important;
}
.client-logo-item{
  width:168px !important;
  height:72px !important;
  opacity:1 !important;
  padding:10px 16px !important;
  background:#f2eee8 !important;
  border:1px solid rgba(228,198,164,.24) !important;
}
.client-logo-item img{
  max-width:138px !important;
  max-height:50px !important;
  filter:none !important;
  opacity:1 !important;
}

/* Fixed controls: prevent WhatsApp and back-to-top from sitting on top of each other */
.whatsapp-float{
  right:18px !important;
  bottom:18px !important;
  z-index:99999 !important;
}
.float-top{
  right:18px !important;
  bottom:76px !important;
  z-index:99998 !important;
  padding:10px 13px !important;
}

/* About copy supplied by Christiaan: keep long-form text compact and readable */
#page-over .about-layout{
  align-items:start !important;
}
#page-over .about-body p{
  font-size:14px !important;
  line-height:1.58 !important;
  margin:0 0 14px !important;
}
#page-over .about-body .h2{
  margin-bottom:18px !important;
}

/* New LastMinute service card should match the existing service system */
.lastminute-card{
  min-height:0 !important;
}
.lastminute-card .btn{
  margin-top:24px !important;
}

@media(max-width:750px){
  .client-logo-item{
    width:146px !important;
    height:64px !important;
    padding:8px 12px !important;
  }
  .client-logo-item img{
    max-width:122px !important;
    max-height:44px !important;
  }
  .float-top{
    right:14px !important;
    bottom:68px !important;
  }
  .whatsapp-float{
    right:14px !important;
    bottom:14px !important;
  }
}


/* V39 — Werkwijze opnieuw opgebouwd: editorial, compact en bewust */

#page-werkwijze .subhero{
  margin-bottom:0;
}

.workflow-intro{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(420px,1.1fr);
  gap:72px;
  align-items:center;
  padding-top:58px;
  padding-bottom:58px;
}

.workflow-intro-copy{
  max-width:590px;
}

.workflow-intro-copy .h2{
  font-size:clamp(34px,3.5vw,50px) !important;
  line-height:1.02 !important;
  margin:12px 0 20px !important;
}

.workflow-intro-copy p{
  margin:0 0 14px;
  max-width:570px;
  color:#b7c2c6;
  font-size:14px;
  line-height:1.58;
}

.workflow-intro-image{
  margin:0;
  position:relative;
  height:390px;
  overflow:hidden;
  background:#111c22;
}

.workflow-intro-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter:saturate(.82) brightness(.82);
}

.workflow-intro-image:after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(5,11,14,.52),transparent 45%);
  pointer-events:none;
}

.workflow-intro-image figcaption{
  position:absolute;
  z-index:2;
  left:20px;
  bottom:17px;
  margin:0;
  color:#fff;
  font-size:11px;
  font-weight:750;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.workflow-steps{
  border-top:1px solid var(--line);
  background:#0d171c;
}

.workflow-steps .shell{
  padding-top:52px;
  padding-bottom:54px;
}

.workflow-steps-header{
  display:grid;
  grid-template-columns:1fr 390px;
  gap:70px;
  align-items:end;
  margin-bottom:26px;
}

.workflow-steps-header .h2{
  font-size:clamp(32px,3vw,44px) !important;
  margin:10px 0 0 !important;
}

.workflow-steps-header > p{
  margin:0 0 3px;
  color:#aeb9bd;
  font-size:13.5px;
  line-height:1.55;
}

.workflow-list{
  border-top:1px solid rgba(255,255,255,.18);
}

.workflow-step{
  display:grid;
  grid-template-columns:70px minmax(190px,280px) 1fr;
  gap:26px;
  align-items:start;
  padding:22px 0;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.workflow-step-num{
  color:var(--gold);
  font-size:11px;
  font-weight:850;
  letter-spacing:.16em;
  padding-top:4px;
}

.workflow-step h3{
  margin:0;
  font-size:19px;
  line-height:1.15;
  letter-spacing:-.035em;
}

.workflow-step p{
  margin:0;
  max-width:720px;
  color:#aeb9bd;
  font-size:13px;
  line-height:1.55;
}

.workflow-cta{
  background:var(--paper);
  color:#162026;
}

.workflow-cta-inner{
  display:grid;
  grid-template-columns:1fr .72fr;
  gap:70px;
  align-items:center;
  padding-top:38px;
  padding-bottom:40px;
}

.workflow-cta .h2{
  font-size:clamp(30px,3vw,43px) !important;
  margin:9px 0 0 !important;
}

.workflow-cta .eyebrow{
  color:#907052;
}

.workflow-cta p{
  color:#536168;
  font-size:14px;
  line-height:1.55;
  margin:0 0 16px;
}

@media(max-width:900px){
  .workflow-intro{
    grid-template-columns:1fr;
    gap:28px;
  }
  .workflow-intro-image{
    height:330px;
  }
  .workflow-steps-header{
    grid-template-columns:1fr;
    gap:14px;
  }
  .workflow-step{
    grid-template-columns:48px 180px 1fr;
    gap:18px;
  }
  .workflow-cta-inner{
    grid-template-columns:1fr;
    gap:18px;
  }
}

@media(max-width:620px){
  .workflow-intro{
    padding-top:38px;
    padding-bottom:38px;
  }
  .workflow-intro-image{
    height:280px;
  }
  .workflow-steps .shell{
    padding-top:38px;
    padding-bottom:40px;
  }
  .workflow-step{
    grid-template-columns:42px 1fr;
    gap:12px 14px;
    padding:18px 0;
  }
  .workflow-step p{
    grid-column:2;
  }
  .workflow-cta-inner{
    padding-top:30px;
    padding-bottom:32px;
  }
}


/* V40 — workflow photo + client logos refinement */

/* Werkwijze: show the approved live-production image more naturally */
#page-werkwijze .workflow-intro-image{
  height:360px !important;
}
#page-werkwijze .workflow-intro-image img{
  object-fit:cover !important;
  object-position:center 42% !important;
  filter:saturate(.9) brightness(.88) !important;
}

/* Client/brand strip now sits lower on the homepage and no longer uses white cards */
.client-logo-section{
  background:#0b1419 !important;
  border-top:1px solid rgba(255,255,255,.08) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  padding:26px 0 24px !important;
}
.client-logo-section .eyebrow{
  margin-bottom:5px !important;
}
.client-logo-section h2{
  font-size:clamp(24px,2.4vw,34px) !important;
  margin:4px 0 18px !important;
}
.client-logo-track{
  gap:18px !important;
}
.client-logo-item{
  width:175px !important;
  height:74px !important;
  padding:12px 18px !important;
  background:rgba(255,255,255,.045) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  opacity:1 !important;
}
.client-logo-item img{
  max-width:140px !important;
  max-height:48px !important;
  filter:none !important;
  opacity:.96 !important;
}
.client-logo-viewport{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent) !important;
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent) !important;
}

@media(max-width:750px){
  #page-werkwijze .workflow-intro-image{
    height:300px !important;
  }
  .client-logo-section{
    padding:22px 0 20px !important;
  }
  .client-logo-item{
    width:150px !important;
    height:66px !important;
    padding:10px 14px !important;
  }
  .client-logo-item img{
    max-width:122px !important;
    max-height:42px !important;
  }
}


/* V41 — exact cleanup requested */

/* Werkwijze: Christiaan zichtbaar in beeld */
#page-werkwijze .workflow-intro-image img{
  object-fit:cover !important;
  object-position:46% 38% !important;
  filter:saturate(.92) brightness(.9) !important;
}

/* Redundant text-only client list is removed in HTML; logo strip remains. */

/* V43 review candidate · 2026-10-06 */
.hero-video-media .hero-loop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 50%;filter:saturate(.86) contrast(1.12) brightness(.66);transform:scale(1.01)}
.hero-video-media:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,10,13,.97) 0%,rgba(3,10,13,.83) 32%,rgba(3,10,13,.35) 74%,rgba(3,10,13,.18)),linear-gradient(0deg,rgba(3,10,13,.66),transparent 50%)}
.showcaller-feature{background:#0b151a;border-block:1px solid var(--line)}
.showcaller-feature-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(380px,.92fr);gap:72px;align-items:center}
.showcaller-feature-image{margin:0;min-height:560px;overflow:hidden;background:#101d23}
.showcaller-feature-image img{width:100%;height:100%;min-height:560px;object-fit:cover;object-position:center center;filter:saturate(.94) contrast(1.04)}
.showcaller-feature-copy{max-width:600px}
.showcaller-feature-copy p{font-size:17px;line-height:1.72;color:#c5ced1;max-width:570px}
.showcaller-points{list-style:none;padding:0;margin:28px 0 32px;border-top:1px solid var(--line)}
.showcaller-points li{padding:13px 0;border-bottom:1px solid var(--line);font-size:13px;font-weight:750;letter-spacing:.01em}
.showcaller-actions{display:flex;gap:12px;flex-wrap:wrap}
#page-diensten .page-hero-photo{object-position:center 40% !important}
#page-over .about-body{max-width:720px}
#page-over .about-body p{font-size:16px;line-height:1.78}
.legal-copy{max-width:920px}
.legal-copy h2{font-size:28px;letter-spacing:-.04em;margin:36px 0 10px}
.legal-copy p{color:#bac4c8;line-height:1.75;font-size:15px}
.text-link{border-bottom:1px solid currentColor}
@media(max-width:900px){.showcaller-feature-grid{grid-template-columns:1fr;gap:34px}.showcaller-feature-image,.showcaller-feature-image img{min-height:440px}.hero-video-media .hero-loop{object-position:center center}}
@media(max-width:640px){.showcaller-feature-image,.showcaller-feature-image img{min-height:300px}.showcaller-feature-copy p{font-size:15px}.hero-video-media .hero-loop{min-width:100%;min-height:100%}}
@media(prefers-reduced-motion:reduce){.hero-video-media .hero-loop{display:none}.hero-video-media{background:url('../images/hero-kane.webp') center 50%/cover no-repeat}}

/* V44 — visual upgrade: full-width photography must read clearly in every header */
.subhero.has-image{
  min-height:clamp(500px,58vh,680px) !important;
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate !important;
  background:#081116 !important;
}
.subhero.has-image > .page-hero-photo{
  display:block !important;
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  opacity:1 !important;
  visibility:visible !important;
  z-index:0 !important;
  object-fit:cover !important;
  filter:saturate(.98) contrast(1.04) brightness(.82) !important;
  transform:scale(1.012);
}
.subhero.has-image::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  z-index:1 !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg,rgba(3,10,14,.82) 0%,rgba(3,10,14,.58) 36%,rgba(3,10,14,.22) 70%,rgba(3,10,14,.08) 100%),
    linear-gradient(0deg,rgba(3,10,14,.46) 0%,transparent 48%) !important;
}
.subhero.has-image > .shell{
  position:relative !important;
  z-index:2 !important;
  padding-top:clamp(120px,15vh,175px) !important;
  padding-bottom:clamp(62px,8vh,96px) !important;
}
.subhero .display{
  max-width:900px;
  text-wrap:balance;
}
.subhero .page-lead{
  max-width:660px !important;
  color:rgba(255,255,255,.86) !important;
}
#page-werk .page-hero-photo{object-position:center 42% !important}
#page-diensten .page-hero-photo{object-position:center 38% !important}
#page-over .page-hero-photo{object-position:center 36% !important}
#page-werkwijze .page-hero-photo{object-position:center 48% !important}
#page-contact .page-hero-photo{object-position:center 52% !important}
#page-privacy .page-hero-photo{object-position:center 46% !important}
#page-voorwaarden .page-hero-photo{object-position:center 45% !important}

/* Homepage: keep the KANE motion hero, but let the image/video actually breathe */
.hero-video-media .hero-loop{
  filter:saturate(.94) contrast(1.08) brightness(.76) !important;
}
.hero-video-media:after{
  background:
    linear-gradient(90deg,rgba(3,10,13,.90) 0%,rgba(3,10,13,.69) 34%,rgba(3,10,13,.25) 74%,rgba(3,10,13,.10) 100%),
    linear-gradient(0deg,rgba(3,10,13,.52),transparent 52%) !important;
}

@media(max-width:760px){
  .subhero.has-image{min-height:470px !important}
  .subhero.has-image > .shell{padding-top:110px !important;padding-bottom:58px !important}
  .subhero.has-image > .page-hero-photo{filter:saturate(.95) contrast(1.04) brightness(.74) !important}
  .subhero.has-image::after{
    background:
      linear-gradient(90deg,rgba(3,10,14,.82) 0%,rgba(3,10,14,.62) 62%,rgba(3,10,14,.28) 100%),
      linear-gradient(0deg,rgba(3,10,14,.52),transparent 55%) !important;
  }
}

/* V45 — Showcaller signature image gets visual priority */
.showcaller-signature{padding:0;background:#071116;border-block:1px solid var(--line)}
.showcaller-signature .showcaller-feature-grid{width:100%;max-width:none;margin:0;grid-template-columns:minmax(0,1.65fr) minmax(360px,.72fr);gap:0;min-height:720px;align-items:stretch}
.showcaller-signature .showcaller-feature-image{position:relative;margin:0;min-height:720px;background:#091318;overflow:hidden}
.showcaller-signature .showcaller-feature-image img{width:100%;height:100%;min-height:720px;object-fit:cover;object-position:center 46%;filter:saturate(1.03) contrast(1.05) brightness(.96)}
.showcaller-signature .showcaller-feature-image:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,8,11,.05) 45%,rgba(3,8,11,.32) 100%),linear-gradient(0deg,rgba(3,8,11,.30),transparent 35%);pointer-events:none}
.showcaller-signature .showcaller-feature-image figcaption{position:absolute;left:34px;bottom:28px;z-index:2;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#f2f0ea;background:rgba(5,12,16,.58);backdrop-filter:blur(8px);padding:10px 12px;border:1px solid rgba(255,255,255,.14)}
.showcaller-signature .showcaller-feature-copy{padding:80px clamp(36px,5vw,78px);display:flex;flex-direction:column;justify-content:center;max-width:none;background:#0d181e}
.showcaller-signature .showcaller-feature-copy .h2{font-size:clamp(46px,4.2vw,76px);line-height:.98;max-width:650px}
.showcaller-signature .showcaller-feature-copy p{font-size:17px;line-height:1.75;max-width:600px}
.showcaller-signature .showcaller-points{margin:26px 0 32px}
.showcaller-signature .showcaller-actions{display:flex;gap:12px;flex-wrap:wrap}

/* Expertise: use the same image as a true hero instead of a background afterthought */
#page-diensten .showcaller-hero{min-height:720px;display:flex;align-items:flex-end;overflow:hidden;background:#071015}
#page-diensten .showcaller-hero>.page-hero-photo{object-position:center 42%!important;filter:saturate(1.03) contrast(1.04) brightness(.90)!important}
#page-diensten .showcaller-hero:after{background:linear-gradient(90deg,rgba(3,8,11,.93) 0%,rgba(3,8,11,.68) 34%,rgba(3,8,11,.16) 70%,rgba(3,8,11,.08) 100%),linear-gradient(0deg,rgba(3,8,11,.56),transparent 48%)!important}
#page-diensten .showcaller-hero>.shell{position:relative;z-index:3;padding-top:210px;padding-bottom:82px}
#page-diensten .showcaller-hero .display{max-width:800px;font-size:clamp(60px,7vw,108px)}
#page-diensten .showcaller-hero .page-lead{max-width:610px;color:#eef1f0;font-size:18px}

@media(max-width:1000px){
  .showcaller-signature .showcaller-feature-grid{grid-template-columns:1fr;min-height:0}
  .showcaller-signature .showcaller-feature-image,.showcaller-signature .showcaller-feature-image img{min-height:520px;height:65vw;max-height:680px}
  .showcaller-signature .showcaller-feature-copy{padding:64px max(28px,6vw)}
}
@media(max-width:640px){
  .showcaller-signature .showcaller-feature-image,.showcaller-signature .showcaller-feature-image img{min-height:360px;height:72vw;max-height:470px}
  .showcaller-signature .showcaller-feature-image img{object-position:center center}
  .showcaller-signature .showcaller-feature-image figcaption{left:18px;bottom:16px}
  .showcaller-signature .showcaller-feature-copy{padding:48px 18px 56px}
  .showcaller-signature .showcaller-feature-copy .h2{font-size:44px}
  #page-diensten .showcaller-hero{min-height:650px}
  #page-diensten .showcaller-hero>.page-hero-photo{object-position:57% center!important}
  #page-diensten .showcaller-hero:after{background:linear-gradient(0deg,rgba(3,8,11,.93) 0%,rgba(3,8,11,.48) 55%,rgba(3,8,11,.14) 100%)!important}
  #page-diensten .showcaller-hero>.shell{padding-top:330px;padding-bottom:54px}
  #page-diensten .showcaller-hero .display{font-size:52px}
}

/* V46 — editorial conversion redesign */
.v46-hero{height:min(720px,82svh)!important;min-height:620px!important}
.v46-hero .hero-shell{padding-top:150px!important;padding-bottom:44px!important}
.v46-hero .hero-copy{max-width:880px}
.v46-hero .display{font-size:clamp(58px,7.2vw,108px);max-width:940px;line-height:.9}
.v46-hero .intro{max-width:650px;font-size:18px;line-height:1.55;margin-top:22px}
.v46-hero .hero-actions{margin-top:26px}
.proofbar{border-bottom:1px solid var(--line);background:#0a1419}
.proofbar-grid{display:grid;grid-template-columns:150px 150px 150px 1fr;align-items:center;gap:0;min-height:92px}
.proofbar-grid>div{padding:19px 26px;border-right:1px solid var(--line)}
.proofbar-grid>div:first-child{padding-left:0}.proofbar-grid>div:last-child{border-right:0}
.proofbar strong{display:block;font-size:30px;line-height:1}.proofbar span{display:block;color:#aebbc0;font-size:11px;margin-top:6px;text-transform:uppercase;letter-spacing:.08em}.proofbar-text{font-size:13px!important;line-height:1.55;color:#bac5c8;padding-left:32px!important}
.v46-showcaller{padding:0!important}
.v46-showcaller .showcaller-feature-grid{grid-template-columns:minmax(0,1.15fr) minmax(350px,.85fr)!important;min-height:500px!important}
.v46-showcaller .showcaller-feature-image,.v46-showcaller .showcaller-feature-image img{min-height:500px!important;height:500px!important}
.v46-showcaller .showcaller-feature-copy{padding:52px clamp(34px,4vw,62px)!important}
.v46-showcaller .showcaller-feature-copy .h2{font-size:clamp(38px,3.7vw,60px)!important;max-width:600px}
.v46-showcaller .showcaller-feature-copy p{font-size:16px!important;line-height:1.65!important;max-width:560px}
.v46-showcaller .showcaller-feature-image figcaption{left:24px!important;bottom:20px!important}
.v46-work{padding-top:68px!important;padding-bottom:72px!important}.v46-work .section-head{margin-bottom:28px}.v46-work-grid{gap:8px!important}.v46-work-grid .feature{min-height:330px!important}.v46-work-grid .feature-body h3{font-size:clamp(22px,2vw,30px)}.v46-more{text-align:center;margin-top:28px}
.v46-need{background:#0d181e;border-block:1px solid var(--line);padding:68px 0}.v46-need-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.v46-need .h2{font-size:clamp(40px,4.6vw,68px);max-width:560px}.v46-need-list{border-top:1px solid var(--line)}.v46-need-list>div{display:grid;grid-template-columns:170px 1fr;gap:28px;padding:18px 0;border-bottom:1px solid var(--line)}.v46-need-list b{font-size:14px}.v46-need-list span{color:#b8c3c6;font-size:14px;line-height:1.55}
.v46-about{padding:70px 0}.v46-about-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:70px;align-items:center}.v46-about-copy{max-width:620px}.v46-about-copy .h2{font-size:clamp(40px,4vw,62px)}.v46-about-copy p{font-size:16px;line-height:1.72;color:#bdc7ca}.v46-about figure{margin:0;height:430px;overflow:hidden}.v46-about figure img{width:100%;height:100%;object-fit:cover;object-position:center 38%}
.v46-reviews{padding:68px 0!important}.v46-reviews .reviews-head{margin-bottom:28px}.v46-reviews .reviews-head h2{font-size:clamp(36px,4vw,58px)!important}.v46-review-grid{grid-template-columns:repeat(3,1fr)!important;gap:10px!important}.v46-review-grid .review-card{padding:25px!important;min-height:245px!important}.v46-review-grid blockquote{font-size:16px!important;line-height:1.55!important}.v46-review-grid .review-person{margin-top:26px!important}
.v46-cta{padding:58px 0!important}.v46-cta .h2{font-size:clamp(38px,4vw,62px)}.v46-grip{padding:34px 0!important}.v46-grip .grip-content{grid-template-columns:220px 1fr auto;gap:40px!important}.v46-grip .grip-content img{max-width:200px!important}.v46-grip .grip-content p{font-size:13px!important;line-height:1.55!important;max-width:620px!important}
/* subpages: reduce oversized visual weight */
.subhero.has-image{min-height:460px!important}.subhero.has-image>.shell{padding-top:125px!important;padding-bottom:58px!important}.subhero .display{font-size:clamp(50px,6.2vw,86px)!important;line-height:.94}.subhero .page-lead{font-size:16px!important;max-width:620px!important}.service-list{grid-template-columns:repeat(3,1fr)!important;gap:10px!important}.service-card{padding:28px!important;min-height:420px!important}.service-card h2{font-size:27px!important}.service-card p,.service-card li{font-size:13px!important}.about-layout{gap:62px!important}.about-body .h2{font-size:clamp(38px,4vw,58px)!important}
.workflow-intro{padding:70px 0!important;gap:62px!important}.workflow-intro-copy .h2{font-size:clamp(38px,4vw,58px)!important}.workflow-steps{padding:68px 0!important}.workflow-step{padding:24px!important}.workflow-step h3{font-size:20px!important}
@media(max-width:900px){.proofbar-grid{grid-template-columns:repeat(3,1fr)}.proofbar-text{grid-column:1/-1;border-top:1px solid var(--line);padding:16px 0!important}.v46-showcaller .showcaller-feature-grid,.v46-need-grid,.v46-about-grid{grid-template-columns:1fr!important;gap:32px}.v46-showcaller .showcaller-feature-image,.v46-showcaller .showcaller-feature-image img{height:58vw!important;min-height:380px!important}.v46-need-list>div{grid-template-columns:140px 1fr}.v46-about figure{height:52vw;min-height:360px}.v46-review-grid{grid-template-columns:1fr!important}.service-list{grid-template-columns:1fr!important}}
@media(max-width:640px){.v46-hero{min-height:610px!important;height:720px!important}.v46-hero .hero-shell{padding-top:118px!important}.v46-hero .display{font-size:50px}.v46-hero .intro{font-size:16px}.proofbar-grid{grid-template-columns:1fr 1fr 1fr}.proofbar-grid>div{padding:16px 10px}.proofbar strong{font-size:24px}.proofbar span{font-size:9px}.v46-showcaller .showcaller-feature-image,.v46-showcaller .showcaller-feature-image img{height:76vw!important;min-height:340px!important}.v46-showcaller .showcaller-feature-copy{padding:40px 18px 46px!important}.v46-work{padding-top:52px!important;padding-bottom:56px!important}.v46-work-grid .feature{min-height:300px!important}.v46-need{padding:52px 0}.v46-need-list>div{grid-template-columns:1fr;gap:8px}.v46-about{padding:54px 0}.v46-about figure{height:380px}.v46-reviews{padding:54px 0!important}.v46-grip .grip-content{display:block}.v46-grip .grip-content img{max-width:170px!important;margin-bottom:18px}.subhero.has-image{min-height:430px!important}.subhero.has-image>.shell{padding-top:112px!important}.service-card{min-height:0!important}}

/* V48 — final refinement, same visual language */
#page-home .v46-work-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
#page-home .v46-work-grid .feature{min-height:350px!important}
#page-home .v46-work-grid .feature img{filter:saturate(.92) contrast(1.03) brightness(.82)!important}
#page-home .v46-work-grid .feature:after{background:linear-gradient(0deg,rgba(1,5,8,.94),rgba(1,5,8,.08) 72%)!important}
#page-home .v46-work-grid .feature-body{bottom:26px!important;left:26px!important;right:72px}
#page-home .v46-work-grid .feature-body p{color:#eef1ef!important;font-weight:650}
#page-home .v46-need-list b{font-weight:850;letter-spacing:-.01em}
#page-home .v46-about-copy p{max-width:590px}
#page-home .v46-reviews .reviews-head h2{max-width:760px}
#page-home .review-score{align-self:flex-end}
#page-home .client-logo-item{transition:transform .25s ease,border-color .25s ease,background .25s ease}
#page-home .client-logo-item:hover{transform:translateY(-2px);border-color:rgba(219,194,164,.32)!important;background:rgba(255,255,255,.065)!important}
#page-home .v46-cta p{max-width:560px}
.footer h3{max-width:430px}
.contact-form h2{letter-spacing:-.035em}
.field select{cursor:pointer}
@media(max-width:750px){
  #page-home .v46-work-grid{grid-template-columns:1fr!important}
  #page-home .v46-work-grid .feature{min-height:310px!important}
  #page-home .v46-work-grid .feature-body{left:20px!important;bottom:22px!important;right:64px}
  #page-home .v46-reviews .reviews-head h2{max-width:none}
}

/* V49 — opdrachtgever/merkstrip: meer contrast en rust zonder de dark editorial look te breken */
#page-home .client-logo-section{
  background:linear-gradient(180deg,#0b1419 0%,#0d171d 100%) !important;
  padding:34px 0 32px !important;
  border-top:1px solid rgba(219,194,164,.18) !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}
#page-home .client-logo-section .eyebrow{
  color:#dbc2a4 !important;
  opacity:1 !important;
}
#page-home .client-logo-section h2{
  color:#f7f4ef !important;
  margin:6px 0 22px !important;
}
#page-home .client-logo-track{
  gap:20px !important;
}
#page-home .client-logo-item{
  width:184px !important;
  height:82px !important;
  padding:15px 20px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:rgba(255,255,255,.075) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  border-radius:8px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.12) !important;
  opacity:1 !important;
}
#page-home .client-logo-item img{
  width:auto !important;
  height:auto !important;
  max-width:146px !important;
  max-height:48px !important;
  object-fit:contain !important;
  filter:grayscale(1) brightness(0) invert(1) !important;
  opacity:.92 !important;
  transition:opacity .2s ease,transform .2s ease !important;
}
#page-home .client-logo-item:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(219,194,164,.42) !important;
  background:rgba(255,255,255,.10) !important;
}
#page-home .client-logo-item:hover img{
  opacity:1 !important;
  transform:scale(1.025) !important;
}
#page-home .client-logo-viewport{
  padding:2px 0 4px !important;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent) !important;
  mask-image:linear-gradient(90deg,transparent,#000 2.5%,#000 97.5%,transparent) !important;
}
@media(max-width:750px){
  #page-home .client-logo-section{
    padding:28px 0 26px !important;
  }
  #page-home .client-logo-section h2{
    margin-bottom:18px !important;
  }
  #page-home .client-logo-item{
    width:158px !important;
    height:72px !important;
    padding:12px 16px !important;
  }
  #page-home .client-logo-item img{
    max-width:126px !important;
    max-height:42px !important;
  }
}

/* V50 — definitieve homeslider: vijf eventbeelden */
#page-home .top-hero .hero-photo.photo-lightshow img{object-position:center 50% !important}
#page-home .top-hero .hero-photo.photo-contentcon img{object-position:center 48% !important}


/* V51 — logo marquee: naadloze loop na V49 spacing update */
#page-home .client-logo-track{
  gap:20px !important;
  will-change:transform;
  animation:clientLogoScrollV51 46s linear infinite !important;
}
@keyframes clientLogoScrollV51{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-50% - 10px),0,0)}
}
@media(max-width:750px){
  #page-home .client-logo-track{animation-duration:40s !important}
}
@media(prefers-reduced-motion:reduce){
  #page-home .client-logo-track{animation:none !important;transform:none !important}
  #page-home .client-logo-viewport{overflow-x:auto !important;-webkit-mask-image:none !important;mask-image:none !important}
}


/* FINAL CTA + CONTACT FORM POLISH */
.btn{width:max-content;max-width:100%;align-self:flex-start}
.hero-actions .btn,.header .btn{align-self:auto}
.contact-form .btn{margin-top:2px}
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.form-note.is-success{color:#d7c3a6}
.form-note.is-error{color:#f0b7ae}
@media(max-width:520px){
  .hero-actions .btn{width:auto;max-width:100%}
}


/* FINAL BUTTON WIDTH + CONTACT CLEANUP */
.btn{width:fit-content!important;min-width:0!important;max-width:100%;flex:0 0 auto;padding-left:18px!important;padding-right:18px!important;gap:8px!important}
.contact-form .btn{display:inline-flex!important;width:fit-content!important}
.contact-actions a{width:100%}

/* V50 — Werkwijze: compactere contentbreedte en strakkere uitlijning */
#page-werkwijze .workflow-intro,
#page-werkwijze .workflow-steps .shell,
#page-werkwijze .workflow-cta-inner{
  width:min(1180px,calc(100% - 88px));
  margin-inline:auto;
}

#page-werkwijze .workflow-intro{
  grid-template-columns:minmax(0,.92fr) minmax(360px,1.08fr);
  gap:54px;
  align-items:start;
  padding-top:54px;
  padding-bottom:54px;
}

#page-werkwijze .workflow-intro-copy{
  max-width:500px;
  padding-top:10px;
}

#page-werkwijze .workflow-intro-copy p{
  max-width:500px;
  font-size:14px;
  line-height:1.62;
}

#page-werkwijze .workflow-intro-image{
  width:100%;
  max-width:610px;
  justify-self:end;
}

#page-werkwijze .workflow-steps-header{
  grid-template-columns:minmax(0,1fr) minmax(280px,390px);
  gap:52px;
  align-items:start;
  margin-bottom:30px;
}

#page-werkwijze .workflow-steps-header > p{
  max-width:390px;
  justify-self:end;
  padding-top:24px;
}

#page-werkwijze .workflow-step{
  grid-template-columns:52px 230px minmax(0,520px);
  gap:30px;
  justify-content:start;
  align-items:start;
  padding:24px 0;
}

#page-werkwijze .workflow-step-num{
  padding-top:3px;
}

#page-werkwijze .workflow-step h3{
  max-width:230px;
  font-size:19px;
  line-height:1.18;
}

#page-werkwijze .workflow-step p{
  max-width:520px;
  font-size:13.5px;
  line-height:1.6;
}

#page-werkwijze .workflow-cta-inner{
  grid-template-columns:minmax(0,1fr) minmax(300px,430px);
  gap:54px;
  align-items:center;
}

#page-werkwijze .workflow-cta-inner > div:last-child{
  max-width:430px;
  justify-self:end;
}

@media(max-width:1100px){
  #page-werkwijze .workflow-intro,
  #page-werkwijze .workflow-steps .shell,
  #page-werkwijze .workflow-cta-inner{
    width:min(100% - 52px,1180px);
  }
  #page-werkwijze .workflow-step{
    grid-template-columns:48px 190px minmax(0,1fr);
    gap:22px;
  }
}

@media(max-width:900px){
  #page-werkwijze .workflow-intro{
    grid-template-columns:1fr;
    gap:28px;
  }
  #page-werkwijze .workflow-intro-copy{
    max-width:620px;
    padding-top:0;
  }
  #page-werkwijze .workflow-intro-image{
    max-width:none;
    justify-self:stretch;
  }
  #page-werkwijze .workflow-steps-header{
    grid-template-columns:1fr;
    gap:10px;
  }
  #page-werkwijze .workflow-steps-header > p{
    max-width:560px;
    justify-self:start;
    padding-top:0;
  }
  #page-werkwijze .workflow-step{
    grid-template-columns:48px 180px minmax(0,1fr);
    gap:18px;
  }
  #page-werkwijze .workflow-cta-inner{
    grid-template-columns:1fr;
    gap:16px;
  }
  #page-werkwijze .workflow-cta-inner > div:last-child{
    max-width:560px;
    justify-self:start;
  }
}

@media(max-width:620px){
  #page-werkwijze .workflow-intro,
  #page-werkwijze .workflow-steps .shell,
  #page-werkwijze .workflow-cta-inner{
    width:calc(100% - 36px);
  }
  #page-werkwijze .workflow-step{
    grid-template-columns:38px 1fr;
    gap:10px 14px;
    padding:19px 0;
  }
  #page-werkwijze .workflow-step p{
    grid-column:2;
    max-width:none;
  }
}

/* =========================================================
   V52 — SITEWIDE ALIGNMENT SYSTEM
   Werkwijze is the reference: compact text widths, consistent
   start lines and gaps, while imagery/portfolio keeps scale.
   ========================================================= */
:root{
  --content-text:1180px;
  --content-wide:1280px;
  --copy-max:560px;
  --copy-narrow:500px;
  --grid-gap:54px;
}

/* Subpage text heroes: one shared left/right line */
.subhero.has-image > .shell,
.subhero > .shell{
  width:min(var(--content-text),calc(100% - 88px)) !important;
  margin-inline:auto !important;
}
.subhero .page-lead{max-width:600px !important}

/* HOME — keep hero/projects wide, tighten text-led sections */
#page-home .v46-need > .shell,
#page-home .v46-about > .shell,
#page-home .v46-reviews > .shell,
#page-home .v46-cta > .shell{
  width:min(var(--content-text),calc(100% - 88px)) !important;
  margin-inline:auto !important;
}
#page-home .v46-need-grid{
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) !important;
  gap:56px !important;
  align-items:start !important;
}
#page-home .v46-need .h2{max-width:510px !important}
#page-home .v46-need-list>div{
  grid-template-columns:150px minmax(0,1fr) !important;
  gap:24px !important;
  align-items:start !important;
}
#page-home .v46-need-list span{max-width:520px !important}
#page-home .v46-about-grid{
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr) !important;
  gap:54px !important;
  align-items:center !important;
}
#page-home .v46-about-copy{max-width:510px !important}
#page-home .v46-about-copy p{max-width:500px !important}
#page-home .reviews-head{
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:54px !important;
  align-items:end !important;
}
#page-home .reviews-head>div:first-child{max-width:680px !important}
#page-home .reviews-head p{max-width:560px !important}
#page-home .v46-review-grid .review-card{
  display:flex !important;
  flex-direction:column !important;
}
#page-home .v46-review-grid .review-person{margin-top:auto !important;padding-top:24px !important}
#page-home .v46-cta .mid-cta-grid{
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr) !important;
  gap:54px !important;
  align-items:center !important;
}

/* EXPERTISE — equal card rhythm and aligned content */
#page-diensten > .shell.section-pad,
#page-diensten .mid-cta > .shell{
  width:min(var(--content-text),calc(100% - 88px)) !important;
  margin-inline:auto !important;
}
#page-diensten .service-list{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  margin:38px 0 10px !important;
  align-items:stretch !important;
}
#page-diensten .service-card{
  min-height:0 !important;
  padding:26px !important;
  display:grid !important;
  grid-template-rows:auto minmax(72px,auto) auto 1fr auto !important;
  align-content:start !important;
}
#page-diensten .service-card h2{
  margin:28px 0 14px !important;
  font-size:26px !important;
  line-height:1.05 !important;
}
#page-diensten .service-card p{margin:0 0 14px !important;max-width:340px !important}
#page-diensten .service-card ul{margin:0 0 24px !important;padding-left:18px !important}
#page-diensten .service-card .btn{margin-top:0 !important}
#page-diensten .mid-cta-grid{
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr) !important;
  gap:54px !important;
  align-items:start !important;
}
#page-diensten .mid-cta-grid>div:last-child{max-width:520px !important;justify-self:end !important}

/* OVER — stronger composition, readable measure */
#page-over > .shell.section-pad,
#page-over .review-strip > .shell{
  width:min(var(--content-text),calc(100% - 88px)) !important;
  margin-inline:auto !important;
}
#page-over .about-layout{
  grid-template-columns:minmax(360px,.9fr) minmax(0,1.1fr) !important;
  gap:54px !important;
  align-items:start !important;
}
#page-over .about-image{height:520px !important;margin:0 !important}
#page-over .about-body{max-width:560px !important;padding-top:6px !important}
#page-over .about-body p{max-width:550px !important;line-height:1.68 !important}
#page-over .about-gallery{margin-top:42px !important;gap:12px !important}
#page-over .review-strip-grid{
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr) !important;
  gap:54px !important;
  align-items:center !important;
}
#page-over .review-strip-grid>div:last-child{max-width:520px !important;justify-self:end !important}

/* CONTACT — 42/58 composition instead of two oversized halves */
#page-contact .contact-layout{
  width:min(var(--content-text),calc(100% - 88px)) !important;
  margin-inline:auto !important;
  grid-template-columns:minmax(0,.78fr) minmax(0,1.08fr) !important;
  gap:56px !important;
  align-items:start !important;
  padding:54px 0 68px !important;
}
#page-contact .contact-layout>div:first-child{max-width:440px !important;padding-top:8px !important}
#page-contact .contact-layout h2{margin:14px 0 24px !important}
#page-contact .contact-layout p{max-width:430px !important}
#page-contact .contact-actions{margin-top:36px !important;gap:0 !important}
#page-contact .contact-actions a{padding:18px 0 !important}
#page-contact .contact-form{
  width:100% !important;
  max-width:620px !important;
  justify-self:end !important;
  margin:0 !important;
  padding:24px !important;
}
#page-contact .contact-form h2{margin:12px 0 24px !important}
#page-contact .field{margin-bottom:15px !important}

/* WORK — controls/cards get one stable wide line, text remains contained */
#page-werk > .shell.section-pad{
  width:min(var(--content-wide),calc(100% - 88px)) !important;
  margin-inline:auto !important;
}
#page-werk .section-head>div:first-child{max-width:680px !important}
#page-werk .section-head .lead{max-width:500px !important}

/* WERKWIJZE — preserve the approved reference width */
#page-werkwijze .workflow-intro,
#page-werkwijze .workflow-steps .shell,
#page-werkwijze .workflow-cta-inner{
  width:min(var(--content-text),calc(100% - 88px)) !important;
}

/* FOOTER — align informational content with text pages */
.footer .shell{
  width:min(var(--content-text),calc(100% - 88px)) !important;
  margin-inline:auto !important;
}
.footer .foot-main{gap:54px !important}
.footer .foot-main>div:first-child{max-width:480px !important}

/* Shared copy measure: no drifting long paragraphs */
#page-home .v46-about-copy p,
#page-home .v46-need-list span,
#page-diensten .mid-cta p,
#page-over .about-body p,
#page-over .review-strip-grid p,
#page-werkwijze .workflow-intro-copy p,
#page-contact .contact-layout p{
  text-wrap:pretty;
}

@media(max-width:1100px){
  .subhero.has-image > .shell,.subhero > .shell,
  #page-home .v46-need > .shell,#page-home .v46-about > .shell,#page-home .v46-reviews > .shell,#page-home .v46-cta > .shell,
  #page-diensten > .shell.section-pad,#page-diensten .mid-cta > .shell,
  #page-over > .shell.section-pad,#page-over .review-strip > .shell,
  #page-contact .contact-layout,#page-werk > .shell.section-pad,
  .footer .shell{
    width:min(100% - 52px,var(--content-text)) !important;
  }
  #page-diensten .service-card{padding:22px !important}
  #page-over .about-layout{grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr) !important;gap:40px !important}
  #page-contact .contact-layout{gap:40px !important}
}

@media(max-width:900px){
  #page-home .v46-need-grid,#page-home .v46-about-grid,#page-home .reviews-head,#page-home .v46-cta .mid-cta-grid,
  #page-diensten .mid-cta-grid,#page-over .about-layout,#page-over .review-strip-grid,#page-contact .contact-layout{
    grid-template-columns:1fr !important;
  }
  #page-diensten .service-list{grid-template-columns:1fr !important}
  #page-diensten .service-card{grid-template-rows:auto auto auto auto auto !important}
  #page-diensten .service-card p{max-width:620px !important}
  #page-diensten .mid-cta-grid>div:last-child,
  #page-over .review-strip-grid>div:last-child,
  #page-contact .contact-form{justify-self:start !important;max-width:680px !important}
  #page-over .about-body{max-width:650px !important}
  #page-over .about-image{height:500px !important;max-width:680px !important}
  #page-contact .contact-layout>div:first-child{max-width:600px !important}
}

@media(max-width:620px){
  .subhero.has-image > .shell,.subhero > .shell,
  #page-home .v46-need > .shell,#page-home .v46-about > .shell,#page-home .v46-reviews > .shell,#page-home .v46-cta > .shell,
  #page-diensten > .shell.section-pad,#page-diensten .mid-cta > .shell,
  #page-over > .shell.section-pad,#page-over .review-strip > .shell,
  #page-contact .contact-layout,#page-werk > .shell.section-pad,
  .footer .shell{
    width:calc(100% - 36px) !important;
  }
  #page-home .v46-need-list>div{grid-template-columns:1fr !important;gap:6px !important}
  #page-home .v46-about-grid{gap:28px !important}
  #page-contact .contact-layout{padding:34px 0 44px !important;gap:34px !important}
  #page-contact .contact-form{padding:18px !important}
  #page-over .about-image{height:390px !important}
  #page-over .about-gallery{grid-template-columns:1fr !important}
}

/* Feedbackronde 12 oktober: showcaller first, mobile controls and accessibility */
#page-home .top-hero .hero-photo.photo-showcaller img{object-position:64% 46% !important;filter:brightness(.83) saturate(.95) !important}
#page-home .top-hero .hero-photo.photo-showcaller::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(2,7,10,.45) 0%,rgba(2,7,10,.08) 65%);pointer-events:none}
@media(max-width:640px){
 #page-home .top-hero .hero-photo.photo-showcaller img{object-position:42% 40% !important}
 .whatsapp-float{bottom:14px !important;right:14px !important;padding:10px 13px !important;font-size:12px !important}
 .whatsapp-float:not(.is-visible){opacity:0 !important;pointer-events:none !important;transform:translateY(8px)}
}
:focus-visible{outline:2px solid #dbc2a4;outline-offset:3px}

/* Fotokeuze 12 oktober: focus op podium, niet op uitvergrote gezichten */
.v46-showcaller .showcaller-feature-image img{object-position:48% 53%!important}
@media(max-width:640px){.v46-showcaller .showcaller-feature-image img{object-position:45% 50%!important}}

/* Spam-trap outside the visual layout */
.form-honeypot{position:absolute!important;left:-10000px!important;top:auto!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important;}


/* HEADERFOTO AANPASSING 12-10-2026 – showcallerfoto subtiel inzoomen */
/* Richt zich uitsluitend op de persoonlijke showcallerfoto in de homepageheader.
   Andere slides, projectfoto's en subpagina's blijven ongewijzigd. */
#page-home .top-hero .hero-photo.photo-showcaller img {
  transform: scale(1.14) !important;
  transform-origin: 64% 46%;
}
@media (max-width: 750px) {
  #page-home .top-hero .hero-photo.photo-showcaller img {
    transform: scale(1.10) !important;
    transform-origin: 42% 40%;
  }
}

/* Oplevercontrole 27 oktober 2026: behoud originele V2; verfijning portret en kolommen */
@media (min-width: 751px) {
  .about-layout { align-items: start; gap: clamp(34px, 4.5vw, 78px); }
  .about-image { height: min(680px, 62vw); }
  .about-image img { object-position: center 24%; }
  .about-body { min-width: 0; }
  .about-body .h2 { text-wrap: balance; }
}
@media (max-width: 750px) {
  .about-image img { object-position: center 23%; }
}