/* Page-specific styles: projects.html */

.wrap{max-width:1400px;margin:0 auto;padding:0 56px;}
  @media(max-width:900px){.wrap{padding:0 24px;}}

  
  
  
  
  
  
  
  
  
  
  

  /* ===== HEADER (shared) ===== */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  @media(max-width:900px){nav.main-nav,.header-enquiry{display:none;}.hamburger{display:flex;}}

  
  
  
  
  
  
  
  

  /* ===== PROJECTS HERO ===== */
  .breadcrumb{color:var(--charcoal);font-size:12px;letter-spacing:1.5px;margin-bottom:0;opacity:.6;}
  .breadcrumb a{color:var(--charcoal);}
  .breadcrumb a:hover{color:var(--green-dark);}

  /* ===== INTRO (page opener, no banner) ===== */
  .proj-intro{background:var(--warm-white);}
  .proj-intro-opener{padding:170px 0 90px;background:var(--charcoal-deep);}
  .proj-intro-opener .breadcrumb{margin-bottom:40px;color:var(--soft-grey);opacity:.7;}
  .proj-intro-opener .breadcrumb a{color:var(--soft-grey);}
  .proj-intro-opener .breadcrumb a:hover{color:var(--green);}
  .proj-intro-opener .eyebrow .bar{background:var(--green);}
  .proj-intro-opener .intro-heading{color:var(--warm-white);}
  .proj-intro-opener .intro-body p{color:var(--soft-grey);}
  .intro-grid{display:grid;grid-template-columns:.9fr 1.4fr;gap:70px;}
  @media(max-width:900px){.intro-grid{grid-template-columns:1fr;gap:30px;}}
  
  
  .intro-heading{font-size:clamp(28px,3.6vw,46px);font-weight:700;line-height:1.14;letter-spacing:-.5px;}
  .intro-body p{font-size:15px;line-height:1.9;color:var(--charcoal);font-weight:300;margin-bottom:16px;max-width:620px;}

  /* ===== TABS BAR ===== */
  .tabs-bar{position:sticky;top:0;z-index:500;background:var(--warm-white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:0;}
  .tabs-bar-inner{display:flex;align-items:stretch;justify-content:space-between;flex-wrap:wrap;}
  .cat-tabs{display:flex;flex:1;min-width:0;}
  .cat-tab{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:26px 30px;background:var(--warm-white);color:var(--charcoal);border-right:1px solid var(--line);transition:all .35s var(--ease);text-align:left;}
  .cat-tab:last-child{border-right:none;}
  .cat-tab .tab-name{font-size:15px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:4px;}
  .cat-tab .tab-count{font-size:11.5px;letter-spacing:1px;color:var(--charcoal);opacity:.6;}
  .cat-tab.active{background:var(--green);color:var(--charcoal-deep);}
  .cat-tab.active .tab-count{color:var(--charcoal-deep);opacity:.75;}
  .cat-tab:not(.active):hover{background:var(--soft-grey);}
  .view-controls{display:flex;align-items:center;gap:2px;padding:0 30px;border-left:1px solid var(--line);}
  @media(max-width:700px){.view-controls{display:none;}}
  .view-btn{width:38px;height:38px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--charcoal);transition:all .3s var(--ease);}
  .view-btn.active{background:var(--charcoal-deep);color:var(--warm-white);border-color:var(--charcoal-deep);}
  @media(max-width:700px){.cat-tab{padding:18px 14px;}.cat-tab .tab-name{font-size:12px;letter-spacing:1px;}.cat-tab .tab-count{font-size:10px;}}

  /* ===== COUNT STRIP ===== */
  .count-strip{padding:56px 0 30px;background:var(--off-white);}
  .count-strip-inner{display:flex;align-items:baseline;gap:18px;}
  .count-num{font-size:clamp(38px,5vw,64px);font-weight:700;color:var(--green-dark);letter-spacing:-1px;transition:opacity .3s var(--ease);}
  .count-label{font-size:13px;letter-spacing:1.5px;text-transform:uppercase;color:var(--charcoal);font-weight:500;}

  /* ===== GRID ===== */
  .grid-section{background:var(--off-white);padding-bottom:130px;}
  .proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:var(--warm-white);transition:opacity .4s var(--ease);}
  .proj-grid.fading{opacity:0;}

  /* The first project is always a single, full-width "grand" opener.
     Every project after it sits in a uniform 3-per-row grid — same
     column span, same aspect-ratio, so every card in a row is identically
     sized and tiles edge-to-edge with no leftover white space. */
  .p-card{
    position:relative;overflow:hidden;cursor:pointer;background:var(--charcoal-deep);
    grid-column:span 1;aspect-ratio:4/3;
  }
  .p-card-hero{grid-column:1 / -1;aspect-ratio:21/9;}

  /* Tablet: 2-column grid; the opener still spans full width */
  @media(max-width:900px){
    .proj-grid{grid-template-columns:repeat(2,1fr);}
    .p-card{grid-column:span 1;aspect-ratio:4/3;}
    .p-card-hero{grid-column:1 / -1;aspect-ratio:16/9;}
  }
  /* Mobile: one card per row */
  @media(max-width:600px){
    .proj-grid{grid-template-columns:1fr;}
    .p-card,.p-card-hero{grid-column:1 / -1;aspect-ratio:4/3;}
  }

  .p-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease);}
  .p-card:hover img{transform:scale(1.05);}
  .p-card-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,20,19,0) 40%,rgba(20,20,19,.85) 100%);transition:background .4s var(--ease);}
  .p-card:hover .p-card-overlay{background:linear-gradient(180deg,rgba(20,20,19,.1) 30%,rgba(20,20,19,.92) 100%);}
  .p-card-num{position:absolute;top:18px;left:18px;font-size:11px;letter-spacing:1.5px;color:var(--soft-grey);opacity:0;transform:translateY(-6px);transition:all .4s var(--ease);}
  .p-card:hover .p-card-num{opacity:.85;transform:translateY(0);}
  .p-card-arrow{position:absolute;top:16px;right:16px;width:36px;height:36px;background:rgba(247,247,242,.14);border:1px solid var(--line-light);display:flex;align-items:center;justify-content:center;color:var(--warm-white);font-size:15px;transition:all .35s var(--ease);}
  .p-card:hover .p-card-arrow{background:var(--green);border-color:var(--green);color:var(--charcoal-deep);transform:translate(3px,-3px);}
  .p-card-info{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;}
  .p-card-cat{font-size:10.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:8px;}
  .p-card-title{font-size:19px;font-weight:700;color:var(--warm-white);letter-spacing:.2px;line-height:1.2;margin-bottom:4px;}
  .p-card-loc{font-size:12px;color:var(--soft-grey);font-weight:300;letter-spacing:.3px;}
  .p-card-hero .p-card-title{font-size:clamp(22px,3vw,32px);}
  .p-card-hero .p-card-info{padding:32px 36px;}
  @media(max-width:600px){.p-card-title{font-size:18px;}}

  /* LIST VIEW */
  .proj-list{display:none;flex-direction:column;background:var(--warm-white);border-top:1px solid var(--line);}
  .proj-list.active{display:flex;}
  .proj-grid.hidden{display:none;}
  .p-row{display:grid;grid-template-columns:60px 1fr 220px 220px;align-items:center;gap:20px;padding:22px 26px;border-bottom:1px solid var(--line);position:relative;cursor:pointer;transition:background .3s var(--ease);}
  .p-row:hover{background:var(--soft-grey);}
  @media(max-width:800px){.p-row{grid-template-columns:40px 1fr;row-gap:4px;}}
  .p-row-num{font-size:12px;color:var(--green-dark);font-weight:700;}
  .p-row-name{font-size:16px;font-weight:600;color:var(--charcoal-deep);}
  .p-row-loc{font-size:13px;color:var(--charcoal);font-weight:300;}
  .p-row-cat{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:var(--green-dark);font-weight:600;justify-self:end;}
  @media(max-width:800px){.p-row-cat{justify-self:start;}}
  .p-row-preview{position:absolute;right:26px;top:50%;width:120px;height:80px;transform:translateY(-50%) scale(.9);opacity:0;pointer-events:none;transition:all .3s var(--ease);overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.25);z-index:5;}
  .p-row-preview img{width:100%;height:100%;object-fit:cover;}
  .p-row:hover .p-row-preview{opacity:1;transform:translateY(-50%) scale(1);}
  @media(max-width:800px){.p-row-preview{display:none;}}

  /* ===== LIGHTBOX ===== */
  .lightbox{position:fixed;inset:0;background:var(--charcoal-deep);z-index:2000;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .45s var(--ease);}
  .lightbox.open{opacity:1;pointer-events:auto;}
  .lb-top{display:flex;justify-content:space-between;align-items:center;padding:24px 32px;}
  .lb-counter{color:var(--soft-grey);font-size:13px;letter-spacing:2px;}
  .lb-close{width:42px;height:42px;border:1px solid var(--line-light);color:var(--warm-white);display:flex;align-items:center;justify-content:center;font-size:20px;transition:all .3s;}
  .lb-close:hover{background:var(--green);border-color:var(--green);color:var(--charcoal-deep);}
  .lb-body{flex:1;display:flex;align-items:center;justify-content:center;position:relative;padding:0 90px 40px;min-height:0;}
  @media(max-width:800px){.lb-body{padding:0 20px 30px;}}
  .lb-img-wrap{max-width:1100px;max-height:100%;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;}
  .lb-img-wrap img{max-width:100%;max-height:80vh;object-fit:contain;opacity:0;transform:scale(.97);transition:opacity .5s var(--ease),transform .5s var(--ease);}
  .lb-img-wrap img.show{opacity:1;transform:scale(1);}
  .lb-nav{width:50px;height:50px;border:1px solid var(--line-light);color:var(--warm-white);display:flex;align-items:center;justify-content:center;font-size:20px;position:absolute;top:50%;transform:translateY(-50%);transition:all .3s;flex-shrink:0;}
  .lb-nav:hover{background:var(--green);border-color:var(--green);color:var(--charcoal-deep);}
  .lb-prev{left:24px;}
  .lb-next{right:24px;}
  @media(max-width:800px){.lb-nav{width:40px;height:40px;font-size:16px;}.lb-prev{left:6px;}.lb-next{right:6px;}}
  .lb-info{text-align:center;padding:0 20px 40px;}
  .lb-cat{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--green);font-weight:600;margin-bottom:10px;}
  .lb-name{font-size:clamp(20px,3vw,30px);font-weight:700;color:var(--warm-white);margin-bottom:6px;}
  .lb-loc{font-size:13px;color:var(--soft-grey);font-weight:300;}

  /* ===== CLOSING CTA ===== */
  .closing{display:grid;grid-template-columns:1fr 1fr;min-height:600px;}
  @media(max-width:960px){.closing{grid-template-columns:1fr;min-height:auto;}}
  .closing-img{position:relative;overflow:hidden;min-height:340px;}
  .closing-img img{width:100%;height:100%;object-fit:cover;}
  .closing-form-side{background:var(--green);padding:100px 64px;display:flex;flex-direction:column;justify-content:center;}
  @media(max-width:960px){.closing-form-side{padding:70px 28px;}}
  .closing-small{font-size:13px;letter-spacing:3px;font-weight:700;text-transform:uppercase;color:var(--charcoal-deep);margin-bottom:18px;}
  .closing-heading{font-size:clamp(28px,3.4vw,44px);font-weight:700;line-height:1.1;letter-spacing:-.5px;color:var(--charcoal-deep);margin-bottom:22px;}
  .closing-body{font-size:14.5px;line-height:1.8;color:rgba(42,42,41,.85);margin-bottom:40px;max-width:460px;font-weight:400;}

  /* ===== FOOTER (shared) ===== */
  
  
  @media(max-width:900px){.footer-grid{grid-template-columns:1fr;gap:44px;}}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  @media (prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;transition-duration:.01ms !important;}}