/* =========================================================
   MINELLI HOME — stylesheet
   Design concept: Luxembourg craftsman workshop.
   Workwear navy + warm oak + logo green, on blueprint paper.
   Tape-measure tick strips are the signature motif, used as
   dividers and framing devices throughout.
   ========================================================= */

   @import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@600;700;800;900&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800;900&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
   :root{
     --color-ink:      #1B1B18;
     --color-paper:    #EDE7DA;
     --color-paper-2:  #E4DCC9;
     --color-white:    #FBF9F4;
     --color-navy:     #33546E;
     --color-navy-2:   #24455C;
     --color-navy-light:#45708F;
     --color-oak:      #A8703E;
     --color-oak-light:#C48A54;
     --color-tool:     #465328;
     --color-tool-dark:#6B8038;
     --color-tool-light:#B7CE86;
     --color-line:     #C9BFA8;
     --color-line-dark:#54606B;
   
     --font-display: 'Big Shoulders Display', sans-serif;
     --font-body: 'Inter', sans-serif;
     --font-mono: 'IBM Plex Mono', monospace;
   
     --max-width: 1180px;
     --radius: 3px;
   }
   
   *,*::before,*::after{ box-sizing: border-box; }
   html{ scroll-behavior: smooth; }
   @media (prefers-reduced-motion: reduce){
     html{ scroll-behavior: auto; }
     *,*::before,*::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
   }
   
   body{
     margin:0;
     font-family: var(--font-body);
     background: var(--color-paper);
     color: var(--color-ink);
     line-height: 1.6;
     -webkit-font-smoothing: antialiased;
   }
   
   img,svg{ max-width:100%; display:block; }
   a{ color: inherit; text-decoration:none; }
   ul{ margin:0; padding:0; list-style:none; }
   button{ font-family:inherit; cursor:pointer; }
   
   .wrap{
     max-width: var(--max-width);
     margin: 0 auto;
     padding: 0 24px;
   }
   
   h1,h2,h3,h4{
     font-family: var(--font-body);
     font-weight: 800;
     line-height: 0.95;
     margin: 0;
     letter-spacing: 0.5px;
   }
   
   .eyebrow{
     font-family: var(--font-mono);
     font-size: 14px;
     letter-spacing: 0.14em;
     text-transform: uppercase;
     color: var(--color-oak);
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 14px;
   }
   .eyebrow::before{
     content:"";
     width: 22px;
     height: 2px;
     background: var(--color-oak);
     display:inline-block;
   }
   
   /* -------------------- Tape-measure tick strip -------------------- */
   .ruler{
     width:100%;
     height: 20px;
     background-image: repeating-linear-gradient(
       to right,
       var(--color-line-dark) 0,
       var(--color-line-dark) 1px,
       transparent 1px,
       transparent 10px
     ),
     repeating-linear-gradient(
       to right,
       var(--color-line-dark) 0,
       var(--color-line-dark) 2px,
       transparent 2px,
       transparent 50px
     );
     background-size: 100% 8px, 100% 16px;
     background-position: left top, left top;
     background-repeat: repeat-x;
     opacity: 0.35;
   }
   .ruler.dark{ opacity:0.5; }
   .ruler-band{
     background: var(--color-navy);
   }
   
   /* -------------------- Header / Nav -------------------- */
   .site-header{
     position: sticky;
     top:0;
     z-index: 100;
     background: var(--color-paper);
     border-bottom: 1px solid var(--color-line);
   }
   .nav{
     display:flex;
     align-items:center;
     justify-content: space-between;
     padding: 16px 24px;
     max-width: var(--max-width);
     margin: 0 auto;
     gap: 5px;
   }
   .brand{
     display:flex;
     align-items:center;
     gap:10px;
     font-family: var(--font-mono);
     font-weight: 800;
     font-size: 20px;
     color: var(--color-navy);
   }
   .brand .mark{
     height: 38px;
     width: auto;
     flex-shrink:0;
   }
   .brand small{
     display:block;
     font-family: var(--font-mono);
     font-weight: 400;
     font-size: 10px;
     letter-spacing: 0.12em;
     color: var(--color-oak);
     text-transform: uppercase;
   }
   .nav-links{
     display:flex;
     gap: 30px;
     align-items:center;
   }
   .nav-links a{
     font-family: var(--font-mono);
     font-size: 13px;
     letter-spacing: 0.05em;
     text-transform: uppercase;
     color: var(--color-ink);
     padding: 6px 2px;
     border-bottom: 2px solid transparent;
     transition: border-color 0.2s ease, color 0.2s ease;
   }
   .nav-links a:hover, .nav-links a[aria-current="page"]{
     border-bottom-color: var(--color-tool);
     color: var(--color-navy);
   }
   .nav-right{ display:flex; align-items:center; gap:36px; }
   .lang-switch{
     display:flex;
     gap:6px;
     font-family: var(--font-mono);
     font-size: 12px;
   }
   .lang-switch a{
     padding: 4px 8px;
     border: 1px solid var(--color-line-dark);
     border-radius: var(--radius);
     color: var(--color-line-dark);
   }
   .lang-switch a[aria-current="true"]{
     background: var(--color-navy);
     color: var(--color-white);
     border-color: var(--color-navy);
   }
   .lang-switch a:hover{ border-color: var(--color-navy); color: var(--color-navy); }
   .lang-switch a[aria-current="true"]:hover{ color: var(--color-white); }
   
   .mobile-lang-switch{ display:none; }
   
   .btn{
     display:inline-flex;
     align-items:center;
     gap:8px;
     font-family: var(--font-mono);
     font-size: 13px;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     padding: 12px 22px;
     border-radius: var(--radius);
     border: 2px solid var(--color-navy);
     transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
     white-space: nowrap;
   }
   .btn-primary{
     background: var(--color-tool);
     color: var(--color-white);
     border-color: var(--color-white);
   }
   .btn-primary:hover{ background: var(--color-tool-dark); border-color: var(--color-tool-dark); transform: translateY(-1px); }
   .btn-outline{
     background: transparent;
     color: var(--color-navy);
   }
   .btn-outline:hover{ background: var(--color-navy); color: var(--color-white); transform: translateY(-1px); }
   .btn-outline.on-dark{ border-color: var(--color-white); color: var(--color-white); }
   .btn-outline.on-dark:hover{ background: var(--color-white); color: var(--color-navy); }
   
   .nav-toggle{
     display:none;
     background:none;
     border:none;
     width: 40px; height:40px;
     position:relative;
   }
   .nav-toggle span{
     position:absolute; left:8px; right:8px; height:2px; background:var(--color-navy);
   }
   .nav-toggle span:nth-child(1){ top:13px; }
   .nav-toggle span:nth-child(2){ top:19px; }
   .nav-toggle span:nth-child(3){ top:25px; }
   
   /* -------------------- Hero -------------------- */
   .hero{
     background: var(--color-navy);
     color: var(--color-white);
     position: relative;
     overflow:hidden;
     background-image:
       linear-gradient(180deg, rgba(51,84,110,0.94), rgba(36,69,92,0.98)),
       repeating-linear-gradient(0deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 42px),
       repeating-linear-gradient(90deg, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 1px, transparent 42px);
   }
   .hero-inner{
    padding: 48px 24px 60px;
     max-width: var(--max-width);
     margin:0 auto;
     display:grid;
     grid-template-columns: 1.15fr 0.85fr;
     gap: 48px;
     align-items:center;
   }
   .hero h1{
    font-size: clamp(38px, 5.6vw, 72px);
     text-transform: uppercase;
     line-height: 1.15;
   }
   
   .hero-sub{
     font-size: 18px;
     max-width: 46ch;
     color: #DCE3E8;
     margin: 22px 0 32px;
   }
   .hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
   
   .hero-stats{
     display:grid;
     grid-template-columns: 1fr 1fr;
     gap: 1px;
     background: rgba(255,255,255,0.15);
     border: 1px solid rgba(255,255,255,0.15);
   }
   .hero-stat{
     background: var(--color-navy-2);
     padding: 22px 18px;
   }
   .hero-stat .num{
     font-family: var(--font-display);
     font-size: 40px;
     color: var(--color-tool-light);
     font-weight: 800;
   }
   .hero-stat .label{
     font-family: var(--font-mono);
     font-size: 11.5px;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: #B9C3CA;
     margin-top: 4px;
   }
   .hero-photo{
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 14px 30px rgba(0,0,0,0.3);
    aspect-ratio: 4 / 3;
    max-height: 420px;
  }
  .hero-photo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

   /* -------------------- Sections -------------------- */
   section{ padding: 84px 0; }
   .section-tight{ padding: 56px 0; }
   .section-head{
     max-width: 640px;
     margin-bottom: 48px;
   }
   .section-head h2{ font-size: clamp(30px,4vw,46px); text-transform:uppercase; color: var(--color-navy); }
   .section-head p{ margin-top:16px; font-size:16.5px; color:#3E3B33; max-width: 56ch; }
   
   .bg-white{ background: var(--color-white); }
   .bg-navy{ background: var(--color-navy); color: var(--color-white); }
   .bg-navy .section-head h2{ color: var(--color-white); }
   .bg-navy .section-head p{ color: #C6CFD5; }
   
   /* Services grid */
   .services-grid{
     display:grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2px;
     background: var(--color-line-dark);
     border: 1px solid var(--color-line-dark);
   }
   .service-card{
     background: var(--color-white);
     padding: 30px 26px 26px;
     display:flex;
     flex-direction:column;
     gap: 14px;
     transition: background 0.2s ease;
   }
   .service-card:hover{ background: #EFF3E5; }
   .service-card .sku{
     font-family: var(--font-mono);
     font-size: 11.5px;
     color: var(--color-oak);
     letter-spacing: 0.1em;
   }
   .service-card .icon{
     width: 52px; height:52px;
     padding: 11px;
     box-sizing: border-box;
     background: #E7EEDA;
     border-radius: 50%;
     color: var(--color-navy);
     display:flex; align-items:center; justify-content:center;
   }
   .service-card h3{
     font-family: var(--font-display);
     font-size: 23px;
     text-transform: uppercase;
     color: var(--color-navy);
     font-weight: 700;
   }
   .service-card p{ font-size: 14.5px; color: #4A4740; flex-grow:1; }
   .service-card .link{
     font-family: var(--font-mono);
     font-size: 12px;
     text-transform: uppercase;
     color: var(--color-oak);
     letter-spacing: 0.06em;
     border-top: 1px solid var(--color-line);
     padding-top: 12px;
     display:flex;
     justify-content: space-between;
   }
   
   /* Values / process */
   .value-row{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap: 28px;
  }
  .value-row .value-item{
    flex: 0 1 260px;
  }
   .value-item .num{
     font-family: var(--font-mono);
     font-size: 13px;
     color: var(--color-tool-dark);
   }
   .value-item h4{
     font-size: 21px;
     color: var(--color-navy);
     text-transform: uppercase;
     margin: 10px 0 8px;
   }
   .value-item p{ font-size: 14.5px; color: #4A4740; }
   
   /* Testimonials */
   .testi-row{
     display:grid;
     grid-template-columns: repeat(3,1fr);
     gap: 24px;
   }
   .testi-card{
     background: var(--color-white);
     border-left: 4px solid var(--color-tool);
     padding: 26px 24px;
   }
   .testi-card .stars{ color: var(--color-tool-dark); font-family: var(--font-mono); font-size: 14px; letter-spacing:2px; }
   .testi-card p{ font-size: 15px; color: var(--color-ink); margin: 14px 0 16px; font-style: italic; }
   .testi-card .who{ font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; color: var(--color-oak); }
   
   /* Placeholder image blocks (self-contained SVG-pattern, replace with real photos) */
   
   .ph-photo{
     position: relative;
     width: 100%;
     aspect-ratio: 4 / 3;
     overflow: hidden;
   }
   .ph-photo img{
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
   
   .ph-photo-original{
     aspect-ratio: auto;
     height: auto;
   }
   .ph-photo-original img{
     width: 100%;
     height: auto;
     object-fit: unset;
   }
   .gallery-grid .ph-photo,
   .gallery-grid .ph-photo.tall{
     aspect-ratio: 4 / 3;
   }
   .gallery-grid .ph-photo img{
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }
   .gallery-grid .ph-photo{ aspect-ratio: 4/3; min-height:0; }
   .ph-photo-duo .ph-img-secondary{
     position: absolute;
     width: 52%;
     aspect-ratio: 4 / 3;
     bottom: -18px;
     right: -18px;
     object-fit: cover;
     border: 4px solid var(--color-white);
     box-shadow: 0 10px 24px rgba(0,0,0,0.28);
     z-index: 2;
   }
   .ph-slider{
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius);
  }
  .ph-slider-track{
    display:flex;
    width: 200%;      /* 2 slides × 100% each */
    height: 100%;
    transition: transform 0.4s ease;
  }
  .ph-slider-track img{
    width: 50%;        /* 100% ÷ 2 slides */
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
  }
  .ph-slider-nav{
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    background: rgba(27,27,24,0.55);
    color: var(--color-white);
    border:none;
    width:36px; height:36px;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:18px;
  }
  .ph-slider-nav.prev{ left:12px; }
  .ph-slider-nav.next{ right:12px; }
  .ph-slider-nav:hover{ background: var(--color-tool); }
  .ph-slider-dots{
    position:absolute;
    bottom:12px;
    left:50%;
    transform: translateX(-50%);
    display:flex;
    gap:8px;
  }
  .ph-slider-dots button{
    width:8px; height:8px;
    border-radius:50%;
    border:none;
    background: rgba(255,255,255,0.55);
    padding:0;
  }
  .ph-slider-dots button.active{ background: var(--color-white); }
   /* Gallery grid */
   .gallery-grid{
     display:grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 18px;
   }
   
   
   /* About split */
   .about-split{
     display:grid;
     grid-template-columns: 0.9fr 1.1fr;
     gap: 56px;
     align-items:center;
   }
   
   .about-list li{
     display:flex;
     gap: 12px;
     padding: 14px 0;
     border-bottom: 1px solid var(--color-line);
     font-size: 15px;
   }
   .about-list li:last-child{ border-bottom:none; }
   .about-list svg{ width:20px; height:20px; flex-shrink:0; color: var(--color-oak); margin-top:2px; }
   
   /* Coverage / area */
   .area-list{
     display:flex;
     flex-wrap:wrap;
     gap: 10px;
     margin-top: 18px;
   }
   .area-list span{
     font-family: var(--font-mono);
     font-size: 12.5px;
     border: 1px solid var(--color-line-dark);
     padding: 7px 14px;
     border-radius: 999px;
     color: var(--color-navy);
   }
   
   /* Contact / devis */
   .contact-grid{
     display:grid;
     grid-template-columns: 0.85fr 1.15fr;
     gap: 48px;
     align-items:start;
   }
   .contact-card{
     background: var(--color-navy);
     color: var(--color-white);
     padding: 34px 30px;
   }
   .contact-card h3{ font-size:24px; text-transform:uppercase; margin-bottom: 18px; }
   .contact-row{ display:flex; gap:14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.15); }
   .contact-row:last-of-type{ border-bottom:none; }
   .contact-row svg{ width:20px; height:20px; color: var(--color-tool-light); flex-shrink:0; }
   .contact-row .k{ font-family: var(--font-mono); font-size:11px; text-transform:uppercase; color:#9FB0BA; letter-spacing:0.08em; }
   .contact-row .v{ font-size: clamp(13px, 3.6vw, 15px); margin-top:2px; white-space: nowrap; }
   .contact-row a.v:hover{ color: var(--color-tool-light); }
   
   .form-card{
     background: var(--color-white);
     border: 1px solid var(--color-line-dark);
     padding: 34px;
   }
   .form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
   .form-field{ display:flex; flex-direction:column; gap:7px; }
   .form-field.full{ grid-column: 1 / -1; }
   .form-field label{
     font-family: var(--font-mono);
     font-size: 11.5px;
     text-transform: uppercase;
     letter-spacing: 0.06em;
     color: var(--color-navy);
   }
   .form-field label .req{ color: var(--color-oak); }
   .form-field input, .form-field select, .form-field textarea{
     font-family: var(--font-body);
     font-size: 15px;
     padding: 12px 14px;
     border: 1px solid var(--color-line-dark);
     border-radius: var(--radius);
     background: var(--color-paper);
     color: var(--color-ink);
   }
   .form-field input:focus, .form-field select:focus, .form-field textarea:focus{
     outline: 2px solid var(--color-tool);
     outline-offset: 1px;
     background: var(--color-white);
   }
   .form-field textarea{ resize: vertical; min-height: 110px; font-family: var(--font-body); }
   .form-note{ font-size: 13px; color:#6B6656; margin-top:14px; }
   .form-submit{ margin-top: 22px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
   #form-status{ font-family: var(--font-mono); font-size: 13px; }
   #form-status[data-state="ok"]{ color: #3E7A4C; }
   #form-status[data-state="err"]{ color: #B03B2E; }
   
   /* CTA band */
   .cta-band{
     background: var(--color-tool);
     color: var(--color-white);
     padding: 54px 0;
     text-align:center;
   }
   .cta-band h2{ font-size: clamp(26px,4vw,40px); text-transform:uppercase; }
   .cta-band p{ margin: 14px 0 26px; font-size: 16px; }
   .cta-band .btn-outline{ background: var(--color-white); border-color: var(--color-white); color: var(--color-navy); }
   .cta-band .btn-outline:hover{ background: var(--color-navy-2); color: var(--color-white); }
   
   /* Footer */
   .site-footer{
     background: var(--color-navy-2);
     color: #B9C3CA;
     padding: 56px 0 26px;
   }
   .footer-grid{
     display:grid;
     grid-template-columns: 1.3fr 1fr 1fr 1fr;
     gap: 36px;
   }
   .footer-grid h5{
     font-family: var(--font-mono);
     font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: var(--color-tool-light);
     margin-bottom: 16px;
   }
   .footer-brand{ font-family: var(--font-display); font-size:24px; color:var(--color-white); font-weight:800; }
   .footer-logo-chip{
     display:inline-block;
     background: var(--color-paper);
     padding: 12px 18px;
     border-radius: var(--radius);
     line-height: 0;
   }
   .footer-logo-chip img{ height: 46px; width:auto; display:block; }
   .footer-grid p, .footer-grid li{ font-size: 13.5px; line-height: 2; }
   .footer-grid a:hover{ color: var(--color-white); }
   .footer-bottom{
     margin-top: 44px;
     padding-top: 22px;
     border-top: 1px solid rgba(255,255,255,0.12);
     display:flex;
     justify-content: space-between;
     flex-wrap:wrap;
     gap: 10px;
     font-family: var(--font-mono);
     font-size: 11.5px;
     color: #7C8891;
   }
   
   /* Breadcrumb / page header */
   .page-head{
     background: var(--color-navy);
     color: var(--color-white);
     padding: 56px 0 40px;
   }
   .page-head .eyebrow{ color: var(--color-tool-light); }
   .page-head .eyebrow::before{ background: var(--color-tool-light); }
   .page-head h1{ font-size: clamp(36px,5vw,58px); text-transform:uppercase; }
   .breadcrumb{
     font-family: var(--font-mono);
     font-size: 14px;
     color: #9FB0BA;
     margin-top: 14px;
   }
   .breadcrumb a:hover{ color: var(--color-tool-light); }
   
   /* Utility */
   .mt-0{margin-top:0;}
   .center{ text-align:center; }
   .skip-link{
     position:absolute; left:-999px; top:0;
     background: var(--color-tool); color:var(--color-navy-2); padding:10px 16px; z-index:200;
   }
   .skip-link:focus{ left: 12px; top:12px; }
   
   /* -------------------- Responsive -------------------- */
   @media (max-width: 980px){
     .hero-inner{ grid-template-columns: 1fr; }
     .about-split{ grid-template-columns:1fr; }
   
     .contact-grid{ grid-template-columns: 1fr; }
     .services-grid{ grid-template-columns: repeat(2,1fr); }
     .value-row{ grid-template-columns: repeat(2,1fr); }
     .testi-row{ grid-template-columns: 1fr; }
     .gallery-grid{ grid-template-columns: repeat(2,1fr); }
     .footer-grid{ grid-template-columns: 1fr 1fr; }
   }

   @media (max-width: 720px){
    .services-grid{
      gap: 18px;                     /* more breathing room */
      background: transparent;       /* no more grid background bleeding through */
      border: none;                  /* remove the outer frame */
    }
    .service-card{
      border: 4px solid var(--color-navy);  /* thick navy border on each box */
      border-radius: var(--radius);          /* optional: softens corners */
    }
  }
   @media (max-width: 720px){
     .nav{ position:relative; justify-content:flex-end; }
     .brand{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:19px; }
     .brand small{ display:none; }
     .nav-right{ display:none; }
     .nav-links{
       position:fixed; inset: 68px 0 0 0; background: var(--color-paper);
       flex-direction:column; align-items:flex-start; padding: 24px;
       gap: 8px; transform: translateX(100%); transition: transform .25s ease;
       border-top: 1px solid var(--color-line);
     }
     .nav-links.open{ transform: translateX(0); }
     .nav-links a{ width:100%; padding: 12px 0; font-size:15px; }
     .nav-toggle{ display:block; }
     .mobile-lang-switch{
       display:flex;
       gap: 10px;
       margin-top: 18px;
       padding-top: 18px;
       width:100%;
       border-top: 1px solid var(--color-line);
     }
     .mobile-lang-switch a{
       font-family: var(--font-mono);
       font-size: 13px;
       padding: 8px 16px;
       border: 1px solid var(--color-line-dark);
       border-radius: var(--radius);
       color: var(--color-line-dark);
     }
     .mobile-lang-switch a[aria-current="true"]{
       background: var(--color-navy); color: var(--color-white); border-color: var(--color-navy);
     }
     .services-grid{ grid-template-columns: 1fr; }
     .value-row{ grid-template-columns: 1fr; }
     .form-grid{ grid-template-columns: 1fr; }
     .gallery-grid{ grid-template-columns: 1fr; }
     .footer-grid{ grid-template-columns: 1fr; }
     .hero-stats{ grid-template-columns: 1fr 1fr; }
   }
   @media (max-width: 400px){
     .contact-row .v{ font-size: 12.5px; letter-spacing: -0.01em; }
   }