@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--ink:#171717;--gold:#ae8242;--paper:#f3eee5;--line:#ddd6ca;--paper-alt:#faf8f3}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:"DM Sans",Arial,sans-serif;color:var(--ink);background:#fff}a{text-decoration:none;color:inherit}
.nav{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid #eee;position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);z-index:20}.brand img{width:155px;height:72px;object-fit:contain}.nav nav{display:flex;gap:26px;font-size:12px;font-weight:600}.nav nav a:hover{color:var(--gold)}.menu-toggle{display:none;border:0;background:none;font-size:26px}
.hero{min-height:680px;display:grid;grid-template-columns:42% 58%;background:var(--paper)}.hero-copy{display:flex;flex-direction:column;justify-content:center;padding:7vw}.eyebrow{font-size:11px;color:var(--gold);font-weight:700;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:14px}.hero h1{font-size:clamp(55px,7vw,100px);line-height:.88;letter-spacing:-5px;margin:0 0 28px}.hero p{font-size:18px;line-height:1.65;max-width:510px}.hero-image{min-height:680px}.hero-image img{width:100%;height:100%;object-fit:cover}.buttons{display:flex;gap:12px;margin-top:28px}.btn{display:inline-block;background:var(--gold);border:1px solid var(--gold);color:#fff;padding:14px 20px;font-size:12px;font-weight:700;cursor:pointer}.btn span{margin-left:20px}.btn-light{background:#fff;color:var(--ink);border-color:#cfc9bd}
.usp{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}.usp div{padding:25px 10px;text-align:center;border-right:1px solid var(--line);font-size:12px;text-transform:uppercase}.usp strong,.usp small{display:block}.usp small{margin-top:5px;color:#777;font-size:10px;text-transform:none}
.intro{display:grid;grid-template-columns:1fr 1fr;gap:12vw;padding:110px 9vw}.intro h2,.section-head h2,.surfaces h2,.cta h2,.contact h2{font-size:clamp(38px,4vw,58px);line-height:1;letter-spacing:-2.5px;margin:0}.intro p,.section-head p,.cta p,.contact p{font-size:18px;line-height:1.7;margin:0}
.gallery-section{padding:20px 5vw 110px}.section-head{display:grid;grid-template-columns:1fr 1fr;gap:10vw;align-items:end;margin-bottom:35px}.filters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:22px}.filters button{background:#fff;border:1px solid var(--line);padding:9px 15px;font-size:11px;cursor:pointer}.filters button.active,.filters button:hover{background:var(--ink);color:#fff}.masonry{columns:3 280px;column-gap:12px}.tile{margin:0 0 12px;break-inside:avoid;position:relative;cursor:pointer}.tile img{width:100%;display:block}.tile figcaption{position:absolute;left:0;right:0;bottom:0;padding:45px 16px 15px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.8));opacity:0;transition:.2s}.tile:hover figcaption{opacity:1}.tile figcaption b,.tile figcaption span{display:block}.tile figcaption span{font-size:11px;margin-top:3px;opacity:.75}
.video-section{background:#151515;color:#fff;padding:90px 5vw}.light .eyebrow{color:#c59a5a}.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.video-wrap{background:#222;aspect-ratio:16/10}.video-card video{width:100%;height:100%;object-fit:cover}.video-card h3{margin:14px 0 5px}.video-card p{margin:0;color:#999;line-height:1.5}.video-placeholder{min-height:260px;border:1px dashed #555;grid-column:1/-1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#999}.video-placeholder span{font-size:40px;color:#c59a5a}.video-btn{margin-top:35px}
.projects{padding:100px 5vw}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.project-card{background:var(--paper)}.project-card img{width:100%;aspect-ratio:4/3;object-fit:cover}.project-card>div{padding:22px}.project-card h3{font-size:24px;margin:0 0 8px}.project-card p{color:#666;line-height:1.55;margin:0}
.surfaces{text-align:center;padding:100px 5vw;background:#fff}.surface-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:8px;margin-top:45px}.surface-grid span{background:var(--paper);padding:30px 5px;font-size:12px;font-weight:600}
.cta{background:var(--paper);padding:90px 9vw;display:flex;align-items:center;justify-content:space-between;gap:50px}.cta h2{max-width:800px}.cta p{max-width:650px;margin-top:18px}.contact{padding:100px 9vw;display:grid;grid-template-columns:1fr 1fr;gap:10vw}.contact-form form{display:grid;gap:12px}.contact-form input,.contact-form textarea{font:inherit;padding:14px;border:1px solid #d8d3c9;background:#fff}.contact-form textarea{min-height:150px;resize:vertical}.upload-label{border:1px dashed #cfc9bd;padding:14px;font-size:12px;color:#666}.upload-label input{border:0;padding:8px 0}.contact-details{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:0 9vw 80px}.contact-details div{display:flex;flex-direction:column;gap:8px}.contact-details b{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold)}.contact-details a{font-size:18px;font-weight:600}.contact-details span{font-size:16px}
footer{background:#111;color:#999;padding:25px 5vw;font-size:11px}footer span{float:right}.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:100;align-items:center;justify-content:center}.lightbox.open{display:flex}.lightbox img{max-width:88vw;max-height:86vh;object-fit:contain}.lightbox button{position:absolute;background:none;border:0;color:#fff;font-size:48px;cursor:pointer}.lb-close{right:20px;top:8px}.lb-prev{left:18px}.lb-next{right:18px}#lb-caption{position:absolute;bottom:18px;color:#fff;font-size:13px;text-align:center}
@media(max-width:900px){.nav{height:70px}.brand img{width:135px;height:62px}.menu-toggle{display:block}.nav nav{display:none;position:absolute;top:70px;left:0;right:0;background:#fff;padding:20px 6vw;flex-direction:column;gap:18px}.nav nav.open{display:flex}.hero{grid-template-columns:1fr}.hero-copy{padding:60px 7vw}.hero-image{min-height:430px}.usp{grid-template-columns:1fr 1fr}.usp div:nth-child(2){border-right:0}.intro,.contact,.section-head{grid-template-columns:1fr;gap:28px}.video-grid,.project-grid{grid-template-columns:1fr}.surface-grid{grid-template-columns:repeat(2,1fr)}.cta{display:block}.cta .btn{margin-top:25px}.contact-details{grid-template-columns:1fr}.masonry{columns:2 220px}}
@media(max-width:520px){.hero h1{font-size:58px}.usp{grid-template-columns:1fr 1fr}.usp div{padding:20px 5px}.gallery-section,.video-section,.projects,.surfaces{padding-left:5vw;padding-right:5vw}.masonry{columns:1}.surface-grid{grid-template-columns:1fr 1fr}.contact{padding-left:7vw;padding-right:7vw}.contact-details{padding-left:7vw;padding-right:7vw}}

/* UX V3 refinements */
.hero h1{max-width:720px}
.hero p{max-width:540px}
.intro{padding-top:125px;padding-bottom:125px}
.gallery-section{padding-top:45px}
.tile figcaption{padding-top:55px}
.video-section{padding-top:105px;padding-bottom:105px}
.projects{padding-top:105px}
.cta{border-top:1px solid #e5e0d7}
.contact{padding-top:105px}
@media(max-width:900px){.hero-copy{padding-top:75px;padding-bottom:75px}}

.process{padding:100px 5vw}
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.steps article{padding:28px 25px 15px 0;border-right:1px solid var(--line);margin-right:25px}
.steps article:last-child{border:0}.steps span{font-size:11px;color:var(--gold);font-weight:700}
.steps h3{font-size:22px;margin:25px 0 10px}.steps p{font-size:14px;line-height:1.6;color:#666;margin:0}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}.steps article{border-bottom:1px solid var(--line)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}.process{padding-left:5vw;padding-right:5vw}}

/* UX V4 */
.nav{height:96px;padding-left:4.5vw;padding-right:4.5vw}
.brand img{width:205px;height:86px}
.tile figcaption em{display:block;font-style:normal;font-size:10px;margin-top:8px;color:#e8c990}
@media(max-width:900px){.nav{height:78px}.brand img{width:175px;height:72px}.nav nav{top:78px}}

/* UX V5 – visual harmony */
:root{
  --ink:#171717;
  --gold:#a77b3d;
  --paper:#f5f2ec;
  --paper2:#ebe6dc;
  --line:#ded9d0;
}
body{background:#fff;color:var(--ink);font-size:16px}
.nav{height:92px;background:rgba(250,248,244,.97);padding-left:4.2vw;padding-right:4.2vw}
.brand{display:flex;align-items:center}
.brand img{width:230px;height:auto;display:block}
.nav nav{font-size:13px;gap:30px}
.hero-copy{padding:6.5vw}
.hero h1{font-size:clamp(58px,6vw,82px);line-height:.92;letter-spacing:-3.5px;margin-bottom:26px}
.hero p{font-size:17px;line-height:1.65;max-width:500px}
.eyebrow{font-size:11px;letter-spacing:1.7px}
.statement{background:var(--paper);padding:105px 8vw}
.statement h2{font-size:clamp(40px,4.4vw,60px);letter-spacing:-2.5px}
.statement p{font-size:17px}
.trust{background:#fff}
.gallery-section{background:#fff;padding-top:95px}
.section-head h2{font-size:clamp(40px,4.4vw,58px);letter-spacing:-2.5px}
.section-head p{font-size:16px}
.video-section{background:#191919;padding-top:95px;padding-bottom:95px}
.process{background:var(--paper);padding:100px 5vw 105px}
.process .section-head{margin-bottom:42px}
.steps h3{font-size:21px}
.steps p{font-size:14px}
.projects{background:#fff;padding-top:100px}
.project-grid article{background:var(--paper)}
.cta{background:var(--paper2);padding-top:85px;padding-bottom:85px}
.cta h2{font-size:clamp(40px,4.5vw,58px);letter-spacing:-2.5px}
.cta p{font-size:17px}
.contact{background:#fff;padding-top:100px;padding-bottom:105px}
.contact h2{font-size:clamp(40px,4.5vw,58px);letter-spacing:-2.5px}
.contact p{font-size:17px}
footer{background:#171717}
@media(max-width:900px){
 .nav{height:78px}
 .brand img{width:190px}
 .nav nav{top:78px}
 .hero-copy{padding:60px 7vw}
 .hero h1{font-size:58px}
}
@media(max-width:520px){
 .brand img{width:175px}
 .statement{padding:85px 7vw}
}

/* UX V6 – navigation correction */
.nav nav{display:flex;align-items:center;gap:28px;font-size:12px;font-weight:600}
.nav nav a{white-space:nowrap}
.brand img{width:230px;height:auto;max-height:72px;object-fit:contain}
@media(max-width:900px){
 .nav nav{display:none;position:absolute;top:78px;left:0;right:0;background:#fff;padding:20px 6vw;flex-direction:column;align-items:flex-start;gap:18px}
 .nav nav.open{display:flex}
 .brand img{width:190px}
}

/* UX V7 – final header refinement */
.brand img{width:265px;height:auto;max-height:82px;object-fit:contain}
@media(max-width:900px){.brand img{width:215px;max-height:70px}}

/* UX V8 – hero and first customer choices */
.hero-copy .buttons .btn{font-size:12px}
.hero-copy .buttons .text-link{font-size:12px}
.choice-section{padding-top:105px;padding-bottom:105px}
.choice-section>p{max-width:650px;margin:0 auto 45px}
.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1100px;margin:45px auto 0;text-align:left}
.choice-grid a{display:block;background:#fff;border:1px solid #ded9d0;padding:30px 28px;transition:transform .2s,border-color .2s}
.choice-grid a:hover{transform:translateY(-3px);border-color:#a77b3d}
.choice-grid strong{display:block;font-size:18px;margin-bottom:10px}
.choice-grid span{display:block;color:#777;font-size:13px;line-height:1.55}
.trust div{padding-top:28px;padding-bottom:28px}
.trust b{font-size:11px;letter-spacing:.2px}
.trust span{font-size:11px}
@media(max-width:900px){.choice-grid{grid-template-columns:1fr}.choice-section{padding-top:85px;padding-bottom:85px}}

/* UX V9 – first-screen content correction */
.usp{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);background:#fff}
.usp>div{text-align:center;padding:28px 18px;border-right:1px solid var(--line)}
.usp>div:last-child{border-right:0}
.usp strong,.usp small{display:block}
.usp strong{font-size:11px;letter-spacing:.15px}
.usp small{font-size:11px;color:#777;margin-top:6px}
.choice-section{background:var(--paper);padding:105px 5vw 110px}
.choice-intro{text-align:center;max-width:820px;margin:0 auto}
.choice-intro h2{font-size:clamp(42px,4.6vw,62px);line-height:.95;letter-spacing:-2.5px;margin:0 0 20px}
.choice-intro p{font-size:17px;line-height:1.65;color:#555;max-width:650px;margin:0 auto}
.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1120px;margin:48px auto 0}
.choice-grid a{background:#fff;border:1px solid #ded9d0;padding:30px 28px;transition:transform .2s,border-color .2s}
.choice-grid a:hover{transform:translateY(-3px);border-color:var(--gold)}
.choice-grid strong{display:block;font-size:18px;margin-bottom:9px}
.choice-grid span{display:block;color:#777;font-size:13px;line-height:1.55}
.gallery-section{background:#fff}
@media(max-width:900px){
 .usp{grid-template-columns:1fr 1fr}
 .usp>div:nth-child(2){border-right:0}
 .choice-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
 .usp{grid-template-columns:1fr}
 .usp>div{border-right:0;border-bottom:1px solid var(--line)}
}

/* UX V10 – project showcase */
.project-showcase{background:#fff;padding-top:110px;padding-bottom:115px}
.project-showcase .section-head{margin-bottom:48px}
.project-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 22px}
.project-feature{margin:0;background:transparent}
.project-feature a{display:block}
.project-image{overflow:hidden;background:var(--paper);aspect-ratio:4/3}
.project-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.project-feature:hover .project-image img{transform:scale(1.025)}
.project-meta{padding:18px 2px 0}
.project-meta>div{display:flex;justify-content:space-between;align-items:center}
.project-category{font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:var(--gold);font-weight:700}
.project-arrow{font-size:20px;font-weight:300}
.project-meta h3{font-size:26px;letter-spacing:-.8px;margin:8px 0 5px}
.project-meta p{font-size:14px;line-height:1.55;color:#666;margin:0;max-width:620px}
.project-bottom{text-align:center;margin-top:50px}
@media(max-width:700px){
 .project-feature-grid{grid-template-columns:1fr;gap:45px}
 .project-showcase{padding-top:85px;padding-bottom:90px}
}

/* UX V11 – dedicated motif library */
.motif-library{background:var(--paper);padding-top:110px;padding-bottom:115px}
.motif-library .section-head{margin-bottom:40px}
.motif-categories{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:28px}
.motif-categories button{background:transparent;border:1px solid #d5cfc4;padding:9px 15px;font-size:10px;letter-spacing:.4px;cursor:pointer}
.motif-categories button.active,.motif-categories button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.motif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px 18px}
.motif-card{background:#fff;cursor:pointer}
.motif-image{position:relative;overflow:hidden;aspect-ratio:4/3;background:#e8e3da}
.motif-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.motif-card:hover .motif-image img{transform:scale(1.035)}
.motif-image span{position:absolute;right:12px;bottom:12px;background:rgba(20,20,20,.84);color:#fff;padding:8px 10px;font-size:10px;opacity:0;transition:.2s}
.motif-card:hover .motif-image span{opacity:1}
.motif-meta{padding:16px 17px 20px}
.motif-cat{font-size:9px;letter-spacing:1.4px;color:var(--gold);font-weight:700;text-transform:uppercase}
.motif-meta h3{font-size:21px;letter-spacing:-.4px;margin:6px 0 4px}
.motif-meta p{font-size:12px;color:#777;margin:0}
.motif-bottom{text-align:center;margin-top:45px}
.motif-bottom p{display:inline-block;color:#777;font-size:13px;margin-right:7px}
@media(max-width:900px){.motif-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.motif-grid{grid-template-columns:1fr}.motif-library{padding-top:85px;padding-bottom:90px}}

/* UX V12 – repaired motif library */
.motif-library{background:var(--paper);padding-top:110px;padding-bottom:115px}
.motif-library .section-head{margin-bottom:40px}
.motif-categories{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:28px}
.motif-categories button{background:transparent;border:1px solid #d5cfc4;padding:9px 15px;font-size:10px;letter-spacing:.4px;cursor:pointer}
.motif-categories button.active,.motif-categories button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.motif-grid{columns:3 280px;column-gap:18px;display:block}
.motif-card{break-inside:avoid;margin:0 0 28px;background:#fff;cursor:pointer;display:block}
.motif-image{position:relative;overflow:hidden;background:#e8e3da}
.motif-image img{width:100%;height:auto;display:block;transition:transform .45s ease}
.motif-card:hover .motif-image img{transform:scale(1.025)}
.motif-image span{position:absolute;right:12px;bottom:12px;background:rgba(20,20,20,.84);color:#fff;padding:8px 10px;font-size:10px;opacity:0;transition:.2s}
.motif-card:hover .motif-image span{opacity:1}
.motif-meta{display:block;padding:15px 17px 19px}
.motif-meta b,.motif-meta span,.motif-meta em{display:block}
.motif-meta b{font-size:20px;letter-spacing:-.3px;margin-bottom:4px}
.motif-meta span{font-size:9px;letter-spacing:1.3px;text-transform:uppercase;color:var(--gold);font-weight:700}
.motif-meta em{font-size:12px;color:#777;font-style:normal;margin-top:7px}
.motif-bottom{text-align:center;margin-top:45px}
.motif-bottom p{display:inline-block;color:#777;font-size:13px;margin-right:7px}
@media(max-width:900px){.motif-grid{columns:2 220px}}
@media(max-width:520px){.motif-grid{columns:1}.motif-library{padding-top:85px;padding-bottom:90px}}

/* UX V14 – independent motif library, homepage-safe */
.motif-empty{max-width:720px;margin:45px auto 5px;text-align:center;background:#fff;border:1px solid #ded9d0;padding:70px 45px}
.motif-empty-mark{font-size:38px;color:var(--gold);margin-bottom:12px}
.motif-empty h3{font-size:30px;letter-spacing:-.8px;margin:0 0 12px}
.motif-empty p{font-size:15px;line-height:1.7;color:#666;max-width:590px;margin:0 auto 28px}
@media(max-width:600px){.motif-empty{padding:50px 25px}.motif-empty h3{font-size:26px}}

/* UX V15 – readability pass. Header/logo dimensions remain unchanged. */
body{font-size:17px}
.hero p,.choice-intro p,.section-head p,.cta p,.contact p{font-size:17px}
.eyebrow{font-size:13px}
.usp strong{font-size:13px}
.usp small{font-size:13px;line-height:1.45}
.choice-grid span{font-size:15px}
.filters button,.motif-categories button{font-size:13px}
.project-category{font-size:12px}
.project-meta p{font-size:15px}
.motif-image span{font-size:12px}
.motif-meta span{font-size:12px}
.motif-meta em{font-size:14px;line-height:1.5}
.motif-bottom p{font-size:15px}
.steps span{font-size:13px}
.steps p{font-size:15px;line-height:1.55}
.surface-grid span{font-size:14px}
.upload-label{font-size:15px}
.contact-details b{font-size:12px}
footer{font-size:13px}
#lb-caption{font-size:15px}
.video-card p,.video-placeholder small{font-size:15px;line-height:1.5}

/* =========================================================
   UX V16 – Mobile first responsive refinement
   Desktop design is intentionally left unchanged.
   ========================================================= */

/* Tablet / small laptop */
@media (max-width: 900px) {
  html, body { overflow-x:hidden; }
  .nav { padding: 0 5vw; }
  .brand img { width: 215px; max-height: 70px; }
  .nav nav { gap: 18px; font-size: 12px; }

  .hero { grid-template-columns: 1fr 1fr; min-height: 0; }
  .hero-copy { padding: 70px 6vw; }
  .hero-copy h1 { font-size: clamp(42px, 7vw, 64px); line-height: .94; }
  .hero-copy p { font-size: 16px; }
  .hero-media { min-height: 520px; }
  .hero-media img { width:100%; height:100%; object-fit:cover; }

  .usp { grid-template-columns: 1fr 1fr; }
  .usp > div:nth-child(2) { border-right:0; }
  .usp > div { border-bottom:1px solid var(--line); }

  .section-head { gap:25px; }
  .section-head h2 { font-size: clamp(40px, 6vw, 58px); }

  .choice-grid { grid-template-columns:1fr; max-width:720px; }
  .project-feature-grid { grid-template-columns:1fr 1fr; }

  .motif-grid { columns:2 220px; }

  .steps { grid-template-columns:1fr 1fr; }
  .surface-grid { grid-template-columns:1fr 1fr; }
  .video-grid { grid-template-columns:1fr 1fr; }
}

/* Phones */
@media (max-width: 680px) {
  body { font-size:16px; }

  /* Mobile hero: do not retain the desktop 680px hero-image minimum height. */
  .hero-image {
    min-height:0 !important;
    height:auto !important;
  }
  .hero-image img {
    display:block;
    width:100%;
    height:auto !important;
    max-height:none;
    object-fit:contain;
  }

  /* Header: keep approved logo, but make the navigation a proper mobile menu. */
  .nav {
    min-height:76px;
    padding: 0 18px;
    position:relative;
  }
  .brand img { width:190px; max-height:64px; }
  .nav nav {
    display:none;
    position:absolute;
    z-index:100;
    top:76px;
    left:0;
    right:0;
    padding:18px 22px 24px;
    background:#fff;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
  }
  .nav nav.open { display:flex; }
  .nav nav a { display:block; width:100%; padding:12px 0; font-size:14px; }
  .nav .menu-toggle {
    display:flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border:1px solid var(--line);
    background:#fff;
    font-size:0;
    cursor:pointer;
  }
  .nav .menu-toggle:before { content:"☰"; font-size:22px; line-height:1; }

  /* Hero becomes a natural mobile sequence: text first, image second. */
  .hero { display:flex; flex-direction:column; }
  .hero-copy { order:1; padding:58px 22px 48px; }
  .hero-copy h1 { font-size:clamp(43px, 12vw, 58px); line-height:.94; letter-spacing:-2px; max-width:540px; }
  .hero-copy p { font-size:16px; line-height:1.6; max-width:520px; }
  .hero-copy .buttons { display:flex; flex-wrap:wrap; gap:10px; }
  .hero-copy .buttons a { min-height:46px; display:inline-flex; align-items:center; justify-content:center; padding:12px 18px; }
  .hero-media { order:2; min-height:0; height:auto; }
  .hero-media img { display:block; width:100%; height:auto; max-height:none; object-fit:cover; }

  /* Four benefit boxes stack cleanly. */
  .usp { display:grid; grid-template-columns:1fr 1fr; }
  .usp > div { min-height:92px; display:flex; flex-direction:column; justify-content:center; padding:18px 10px; border-right:1px solid var(--line); }
  .usp > div:nth-child(even) { border-right:0; }
  .usp > div:nth-child(3), .usp > div:nth-child(4) { border-bottom:0; }
  .usp strong { font-size:12px; line-height:1.25; }
  .usp small { font-size:12px; line-height:1.4; }

  /* Sections */
  .choice-section, .project-showcase, .motif-library { padding:72px 20px 78px; }
  .section-head { display:block; margin-bottom:34px; }
  .section-head > p { margin-top:18px; font-size:16px; line-height:1.6; }
  .choice-intro h2 { font-size:clamp(38px, 10vw, 50px); letter-spacing:-1.8px; }
  .choice-intro p { font-size:16px; }

  .choice-grid { margin-top:34px; gap:10px; }
  .choice-grid a { padding:23px 21px; }
  .choice-grid strong { font-size:18px; }
  .choice-grid span { font-size:14px; }

  .project-feature-grid { grid-template-columns:1fr; gap:38px; }
  .project-image { aspect-ratio:4/3; }
  .project-meta h3 { font-size:24px; }
  .project-meta p { font-size:15px; line-height:1.55; }

  .motif-categories { gap:7px; overflow-x:auto; flex-wrap:nowrap; padding-bottom:5px; scrollbar-width:none; }
  .motif-categories::-webkit-scrollbar { display:none; }
  .motif-categories button { flex:0 0 auto; padding:10px 14px; font-size:13px; }
  .motif-grid { columns:1; }
  .motif-card { margin-bottom:22px; }
  .motif-image span { opacity:1; font-size:11px; }
  .motif-meta { padding:14px 15px 18px; }
  .motif-meta b { font-size:20px; }
  .motif-meta span { font-size:11px; }
  .motif-meta em { font-size:14px; }

  .steps, .surface-grid, .video-grid { grid-template-columns:1fr; }
  .steps > div, .surface-grid > div { padding:22px 0; }

  /* Contact form: full-width touch targets and file input. */
  .contact-grid { grid-template-columns:1fr; }
  .contact-form { padding:0; }
  .contact-form input, .contact-form textarea, .contact-form select { font-size:16px; min-height:48px; }
  .contact-form textarea { min-height:150px; }
  .contact-form button { width:100%; min-height:50px; font-size:15px; }
  .contact-form input[type=file] { width:100%; padding:12px 0; font-size:14px; }

  footer { padding:35px 20px; }
}

/* Very small phones */
@media (max-width: 390px) {
  .brand img { width:175px; }
  .nav { min-height:70px; }
  .nav nav { top:70px; }
  .hero-copy { padding:50px 18px 40px; }
  .hero-copy h1 { font-size:42px; }
  .hero-copy .buttons { flex-direction:column; align-items:stretch; }
  .hero-copy .buttons a { width:100%; box-sizing:border-box; }
  .usp > div { min-height:100px; padding:15px 7px; }
  .usp strong { font-size:11px; }
  .usp small { font-size:11px; }
}

/* =========================================================
   UX V16.2 – Mobile corrections after real-device test
   ========================================================= */

/* Never let an empty video state create an oversized dark block. */
.video-placeholder {
  min-height: 0 !important;
  height: auto !important;
  padding: 28px 22px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.video-placeholder video,
.video-placeholder iframe {
  width: 100%;
  height: auto;
  max-height: 70vh;
}

@media (max-width: 680px) {
  .video-section,
  .video-gallery,
  .video-grid {
    min-height: 0;
  }
  .video-placeholder {
    min-height: 0 !important;
    height: auto !important;
    padding: 30px 18px !important;
    box-sizing: border-box;
  }
  .video-placeholder p {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
  }

  /* Projects: show the complete photograph rather than aggressively cropping it. */
  .project-image,
  .project-feature-grid .project-image {
    aspect-ratio: auto !important;
    height: auto !important;
    overflow: hidden;
  }
  .project-image img,
  .project-feature-grid .project-image img {
    width: 100%;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    display: block;
  }
}

/* =========================================================
   UX V16.3 – Project cards: hard mobile width constraint
   ========================================================= */
@media (max-width: 680px) {
  .project-showcase,
  .project-showcase .section-head,
  .project-feature-grid,
  .project-feature,
  .project-feature > a,
  .project-image {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  .project-feature-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 38px;
  }

  .project-image {
    aspect-ratio: auto !important;
    height: auto !important;
    overflow: hidden;
  }

  .project-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
  }
}


/* =========================================================
   UX V18 – final polish
   Code-only release. No runtime data or media changes.
   ========================================================= */

/* One consistent warm beige + calm section rhythm. */
body{background:var(--paper)}
.usp{background:#fff}
.choice-section{background:var(--paper)}
.project-showcase{background:var(--paper-alt)}
.motif-library{background:var(--paper)}
.process{background:var(--paper-alt)}
.surfaces{background:var(--paper)}
.cta{background:var(--paper-alt)}
.contact{background:var(--paper)}
.contact-details{background:var(--paper)}
main>section{scroll-margin-top:82px}

/* Projects: always show the complete source photograph. */
.project-image{
  aspect-ratio:auto !important;
  height:auto !important;
  overflow:hidden;
  background:var(--paper);
}
.project-image img{
  display:block;
  width:100%;
  height:auto !important;
  max-width:100%;
  object-fit:contain !important;
  transition:transform .45s ease;
}

/* Motifs: complete image, no forced crop at any breakpoint. */
.motif-image{
  height:auto !important;
  aspect-ratio:auto !important;
  background:var(--paper);
}
.motif-image img{
  width:100%;
  height:auto !important;
  max-width:100%;
  object-fit:contain !important;
  display:block;
}

/* Video: integrate the section with the warm visual language. */
.video-section{
  background:var(--paper-alt);
  color:var(--ink);
  padding-top:95px;
  padding-bottom:100px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.video-section .section-head p{color:#666}
.video-section .light .eyebrow{color:var(--gold)}
.video-wrap{background:#171717}
.video-card p{color:#666}
.video-placeholder{
  border-color:#cfc7bb;
  color:#777;
  background:var(--paper);
}
.video-placeholder span{color:var(--gold)}

/* Remove the visual "hop" when Forside is selected. */
.nav nav a[href="#top"]{scroll-behavior:auto}
@media (min-width:681px){
  .nav{scroll-margin-top:0}
}
@media (max-width:680px){
  main>section{scroll-margin-top:0}
  .video-section{padding-top:78px;padding-bottom:82px}
}