/*
Theme Name: Houtershout
Author: Houtershout
Description: Een korte, premium parketwebsite met direct contact en subtiele plankanimatie.
Version: 1.3.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: houtershout
*/
:root{--paper:#f3f0e7;--ink:#292d22;--olive:#50563a;--line:#d1d0c3;--ease:cubic-bezier(.22,1,.36,1)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}img{display:block;max-width:100%;height:auto}h1,h2,p{margin:0}h1,h2{font-weight:400;letter-spacing:-.065em;line-height:1.04}em{font-family:Georgia,serif;font-weight:400}a:focus-visible{outline:3px solid #b86d3e;outline-offset:6px}a:hover{text-decoration:underline;text-underline-offset:5px}.skip{position:absolute;top:-100px;left:20px;background:white;padding:12px;z-index:10}.skip:focus{top:10px}.header{max-width:1600px;margin:auto;padding:27px 5%;display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-family:Georgia,serif;font-size:23px;line-height:.9;letter-spacing:-1px}.brand:hover{text-decoration:none}.brand-bottom{display:flex;align-items:center;gap:8px;font-size:31px}.brand-sub{font:7px Arial;letter-spacing:1px}.star{font:54px Georgia;line-height:1}.header-note,.eyebrow{font-size:10px;letter-spacing:2px;font-weight:500}.header-cta{font-size:13px;border-bottom:1px solid;padding:6px 0}.header-cta span{margin-left:30px}.hero{max-width:1600px;margin:auto;display:grid;grid-template-columns:1fr 1.05fr;padding:45px 5% 55px;gap:6%}.hero-copy{display:flex;flex-direction:column;justify-content:center;align-items:start;padding:30px 0}.hero h1{font-size:clamp(60px,7.6vw,114px);margin:32px 0;position:relative;z-index:1}.hero-intro{max-width:310px;font-size:15px;color:#5a5e50}.actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-top:35px}.button{background:var(--olive);color:var(--paper);display:inline-flex;align-items:center;gap:60px;font-size:14px;padding:17px 24px;transition:background .3s,transform .4s var(--ease)}.button:hover{background:#363e29;transform:translateY(-2px);text-decoration:none}.button span,.header-cta span{display:inline-block;transition:transform .4s var(--ease)}.button:hover span,.header-cta:hover span{transform:translate(3px,-3px)}.text-link{font-size:13px;border-bottom:1px solid;padding:7px 0}.hero-photo{position:relative;min-height:550px;overflow:hidden;background:#e6dfcf}.hero-accessible{width:100%;height:100%;position:absolute;object-fit:cover;opacity:0;animation:base-in 0s 1.9s forwards}.laid-floor{position:absolute;inset:0;display:flex}.plank{position:relative;width:12.5%;height:100%;overflow:hidden;animation:lay-plank 1.3s var(--ease) both;animation-delay:calc(var(--i)*.075s);transform-origin:bottom center;flex-shrink:0}.plank img{position:absolute;width:800%;max-width:none;height:100%;object-fit:cover;left:calc(var(--i)*-100%)}.image-index{position:absolute;bottom:22px;left:22px;color:white;letter-spacing:2px;font-size:9px;text-shadow:0 1px 6px #000;background:#292d2260;padding:8px 10px}.signature{max-width:1440px;margin:0 auto;padding:22px 0 55px;display:flex;justify-content:space-between;align-items:center;gap:25px;width:90%}.signature p{font:italic clamp(24px,3vw,40px) Georgia;letter-spacing:-1px}.signature>span:last-child{font-size:35px}.section{max-width:1600px;margin:auto}.contact{padding:80px 7%;background:var(--olive);color:var(--paper);display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:13%}.contact h2{font-size:clamp(42px,5vw,72px);margin:26px 0}.contact-intro{max-width:340px;font-size:14px;color:#e2e2d8}.contact-links{margin-top:30px}.contact-primary{display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid #858975;padding:16px 0;font-size:clamp(17px,2vw,26px);letter-spacing:-.6px}.contact-primary>span:first-child{min-width:0;overflow-wrap:anywhere}.contact-primary small{display:block;font-size:9px;letter-spacing:1.8px;color:#e2e2d8;margin-bottom:4px}.contact-primary>span:last-child{transition:transform .4s var(--ease)}.contact-primary:hover{text-decoration:none}.contact-primary:hover>span:last-child{transform:translate(4px,-4px)}.contact-primary:hover>span:first-child{text-decoration:underline;text-underline-offset:5px}.region{font-size:12px;margin-top:15px}.contact-portrait{margin:0;position:relative}.contact-portrait img{width:100%;aspect-ratio:4/5;object-fit:cover}.contact-portrait figcaption{font-size:9px;letter-spacing:2px;padding-top:15px}.contact.is-in-view .contact-portrait{animation:portrait-settle 1.25s var(--ease) both}.footer{max-width:1600px;margin:auto;padding:30px 5%;display:flex;flex-wrap:wrap;gap:25px;align-items:center;justify-content:space-between;font-size:10px}.footer>span:first-child{font-size:16px;font-weight:bold;letter-spacing:-.6px}.footer small{display:block;font-size:10px;font-weight:400;letter-spacing:0;margin-top:5px}.mobile-contact{display:none}.content-page{min-height:60vh;padding:70px 7%}.content-page h1{font-size:50px;margin:25px 0}.content-page article{margin-bottom:50px}.content-page p{margin:20px 0}.content-page a{text-decoration:underline}.alignwide,.wp-caption{max-width:100%}.wp-caption-text,.gallery-caption{font-size:13px}.sticky{border-top:1px solid}.bypostauthor{font-weight:inherit}.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px)}
@keyframes lay-plank{from{transform:translateY(17%) rotate(2deg);opacity:0}to{transform:translateY(0) rotate(0);opacity:1}}@keyframes base-in{to{opacity:1}}@keyframes portrait-settle{from{transform:translateY(24px) rotate(1deg)}to{transform:translateY(0) rotate(0)}}
@media(min-width:1600px){.hero h1{font-size:114px}}
@media(max-width:950px){.hero{gap:4%}.hero h1{font-size:clamp(58px,8vw,76px)}.hero-photo{min-height:520px}.contact{gap:7%;padding:65px 6%}.header-note{font-size:9px}.actions{gap:16px}.button{gap:35px}}
@media(max-width:650px){body{padding-bottom:calc(64px + env(safe-area-inset-bottom,0px))}.header{padding:18px 6%}.header-note{display:none}.brand{font-size:19px}.brand-bottom{font-size:26px}.star{font-size:42px}.header-cta{font-size:12px}.header-cta span{margin-left:15px}.hero{grid-template-columns:1fr;padding:25px 6% 28px;gap:30px}.hero-copy{padding:10px 0 0}.eyebrow{font-size:9px;letter-spacing:1.6px}.hero h1{font-size:clamp(55px,13vw,82px);margin:22px 0}.hero-intro{max-width:330px;font-size:14px}.actions{margin-top:24px}.button{padding:15px 22px;gap:45px}.hero-photo{min-height:360px;aspect-ratio:1/1}.signature{padding:0 0 30px;gap:15px}.signature .eyebrow{font-size:8px;max-width:90px}.signature p{font-size:23px;letter-spacing:-.8px}.signature>span:last-child{display:none}.contact{grid-template-columns:1fr;padding:45px 7%;gap:35px}.contact h2{font-size:48px;margin:20px 0}.contact-primary{font-size:23px}.contact-portrait{display:grid;grid-template-columns:110px 1fr;align-items:end;gap:20px}.contact-portrait img{aspect-ratio:1/1;object-position:center 25%}.contact-portrait figcaption{max-width:140px;font-size:9px;line-height:1.7;padding-bottom:8px}.footer{padding:26px 7%;gap:18px}.footer>span:first-child{width:100%}.mobile-contact{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;background:var(--paper);border-top:1px solid var(--line);padding:10px 6% calc(10px + env(safe-area-inset-bottom,0px));gap:10px}.mobile-contact a{flex:1;text-align:center;padding:10px;background:var(--olive);color:var(--paper);font-size:14px}.mobile-contact a+a{background:transparent;color:var(--olive);border:1px solid var(--olive)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.hero-accessible{opacity:1}.plank{opacity:1;transform:none}}
/* Version 1.2 — personal contact and true herringbone reveal. */
.header{padding-top:15px;padding-bottom:15px;min-height:115px}.brand-logo{width:76px;height:auto;mix-blend-mode:multiply}.header-contact{display:flex;gap:35px;align-items:center;font-size:13px}.header-contact a{display:inline-flex;gap:10px;align-items:center}.contact-icon{width:20px;height:20px;flex-shrink:0}.hero-copy{padding:15px 0}.hero h1{margin-top:0}.hero-intro{max-width:385px;line-height:1.8}.actions{gap:12px;align-items:stretch}.button{gap:12px;padding:16px 19px;border:1px solid var(--olive);font-size:13px}.button-outline{background:transparent;color:var(--olive)}.button-outline:hover{color:var(--paper)}.button:hover span{transform:none}.hero-photo{min-height:0;aspect-ratio:10/11}.hero-accessible{animation:base-in 0s 2.4s forwards}.herringbone-reveal{position:absolute;inset:0;width:100%;height:100%}.reveal-board{animation:lay-herringbone .75s var(--ease) both;animation-delay:var(--delay)}@keyframes lay-herringbone{from{opacity:0}to{opacity:1}}
.contact{gap:9%;padding-top:70px;padding-bottom:70px}.contact h2{font-size:clamp(40px,4.7vw,68px)}.contact-links{display:grid;gap:12px;margin-top:30px}.contact-primary{display:grid;grid-template-columns:44px minmax(0,1fr) 20px;gap:16px;border:1px solid #838973;padding:19px 20px;font-size:clamp(18px,1.8vw,25px);transition:background .3s,border-color .3s}.contact-primary:hover{background:#ffffff0a;border-color:#d4d8c7}.contact-symbol{width:44px;height:44px;border:1px solid #848c74;border-radius:50%;display:grid;place-items:center}.contact-primary>span:nth-child(2){min-width:0;overflow-wrap:anywhere}.contact-primary:hover>span:first-child{text-decoration:none}.contact-primary small{font-size:8px}.contact-portrait img{aspect-ratio:4/4.7}.contact-portrait figcaption{display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:.3px;color:#e5e5d9}.mobile-contact a{display:flex;align-items:center;justify-content:center;gap:9px}.mobile-contact .contact-icon{width:17px;height:17px}
@media(max-width:950px){.header-contact{gap:22px;font-size:12px}.actions{flex-direction:column;align-items:start}.button{min-width:225px}.contact-primary{gap:12px;padding:16px 13px;grid-template-columns:36px minmax(0,1fr) 16px;font-size:18px}.contact-symbol{width:36px;height:36px}.contact-portrait figcaption{flex-direction:column;gap:2px}}
@media(max-width:650px){.header{min-height:105px}.brand-logo{width:64px}.header-contact{flex-direction:column;align-items:flex-end;gap:10px;font-size:12px}.header-contact .contact-icon{width:16px;height:16px}.hero-copy{padding:5px 0 0}.hero h1{margin-top:0}.hero-intro{font-size:14px;line-height:1.8}.actions{align-items:stretch;width:100%;gap:10px}.button{justify-content:center;min-width:0;font-size:14px;padding:14px 16px}.hero-photo{min-height:0;aspect-ratio:10/11}.contact{padding:45px 6%;gap:28px}.contact h2{font-size:44px}.contact-primary{font-size:19px;padding:17px 14px}.contact-portrait{grid-template-columns:95px 1fr}.contact-portrait img{aspect-ratio:1/1}.contact-portrait figcaption{display:block;max-width:none;letter-spacing:.2px}.contact-portrait figcaption span{display:block}.contact-portrait figcaption span:first-child{font:italic 22px Georgia;margin-bottom:7px}}
@media(prefers-reduced-motion:reduce){.hero-accessible{opacity:1}.herringbone-reveal{display:none}}
/* Mobile refinement: readable type, generous touch targets and safe areas. */
html{-webkit-text-size-adjust:100%;scroll-padding-bottom:100px}.hero-copy,.contact-copy,.header-contact{min-width:0}.button,.contact-primary,.header-contact a,.mobile-contact a{touch-action:manipulation}.button span{overflow-wrap:anywhere}
@media(max-width:767px){
 body:has(.mobile-contact){padding-bottom:calc(78px + env(safe-area-inset-bottom,0px))}
 .header{padding:10px max(18px,env(safe-area-inset-right,0px)) 10px max(18px,env(safe-area-inset-left,0px));gap:14px;min-height:100px}
 .brand-logo{width:62px}.header-contact{flex-direction:column;align-items:flex-end;gap:0;font-size:13px}.header-contact a{min-height:44px;gap:8px}.header-contact .contact-icon{width:17px;height:17px}
 .hero{grid-template-columns:minmax(0,1fr);padding:25px 20px 26px;gap:27px}.hero-copy{padding:0}.hero h1{font-size:clamp(43px,11.8vw,76px);line-height:1.06;margin:0 0 20px;letter-spacing:-.065em;max-width:100%;overflow-wrap:break-word}.hero-intro{font-size:16px;line-height:1.65;max-width:540px}.actions{display:grid;grid-template-columns:1fr;gap:10px;width:100%;margin-top:23px}.button{min-width:0;min-height:52px;justify-content:center;padding:13px 16px;font-size:15px;gap:12px}.hero-photo{width:100%;min-height:0;aspect-ratio:10/11;align-self:start}.image-index{left:14px;bottom:14px;font-size:8px;letter-spacing:1.4px}
 .signature{width:auto;margin:0 20px;padding:0 0 28px;gap:18px;flex-wrap:wrap}.signature .eyebrow{font-size:9px;max-width:none}.signature p{font-size:clamp(21px,5.6vw,30px)}.signature>span:last-child{display:none}
 .contact{grid-template-columns:minmax(0,1fr);padding:38px 20px;gap:30px}.contact h2{font-size:clamp(35px,9.6vw,55px);line-height:1.08;margin:0 0 18px}.contact-intro{font-size:16px;line-height:1.6;max-width:100%}.contact-links{margin-top:24px;gap:10px}.contact-primary{grid-template-columns:36px minmax(0,1fr) 14px;gap:10px;padding:17px 12px;font-size:clamp(16px,4.3vw,23px);min-height:82px;letter-spacing:-.4px}.contact-primary small{font-size:10px;letter-spacing:1.2px;margin-bottom:5px}.contact-symbol{width:36px;height:36px}.contact-primary .contact-icon{width:18px;height:18px}.contact-primary>span:nth-child(2){overflow-wrap:anywhere}
 .contact-portrait{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:18px}.contact-portrait img{aspect-ratio:1/1;object-position:center 25%}.contact-portrait figcaption{display:block;padding:0;max-width:none;font-size:11px}.contact-portrait figcaption span{display:block}.contact-portrait figcaption span:first-child{font:italic clamp(18px,4.7vw,25px) Georgia;margin-bottom:7px}
 .footer{padding:24px 20px;gap:12px;font-size:12px}.footer>span:first-child{width:100%}.footer small{font-size:12px}.footer>a{display:inline-flex;align-items:center;min-height:44px}
 .mobile-contact{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;gap:10px;background:var(--paper);border-top:1px solid var(--line);box-shadow:0 -6px 24px #292d2208;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}.mobile-contact a{flex:1;min-height:50px;padding:10px;font-size:15px;background:var(--olive);color:var(--paper)}.mobile-contact a+a{background:transparent;color:var(--olive);border:1px solid var(--olive)}
 .content-page{padding:35px 20px}.content-page h1{font-size:clamp(32px,9vw,50px);overflow-wrap:anywhere}
}
@media(min-width:520px) and (max-width:767px){.actions{grid-template-columns:1.15fr 1fr}.hero-photo{max-width:560px;margin:auto}.contact-portrait{grid-template-columns:130px minmax(0,1fr)}}
@media(max-width:359px){.header{padding-left:14px;padding-right:14px;gap:10px}.brand-logo{width:54px}.header-contact{font-size:12px}.hero,.contact{padding-left:16px;padding-right:16px}.contact-primary{grid-template-columns:30px minmax(0,1fr);gap:9px}.contact-symbol{width:30px;height:30px}.contact-arrow{display:none}.signature{margin-left:16px;margin-right:16px;gap:8px}}
@media(hover:none){.button:hover{transform:none}.contact-primary:hover>span:last-child{transform:none}}