/* ============================================================================
   IDEAL overrides on the Industrial template.
   Everything here is a deliberate departure, numbered against the change
   register in the project: claude/ideal-change-register.md
   Loads after css/ideal-tokens.css, which holds the design system.
   ========================================================================= */

/* --- 1: the green topbar becomes thinner with smaller type ---------------- */
.topbar{padding:0;font-size:11px;line-height:1.4}
.topbar .top-nav>li>a,.topbar .top-contact>li{padding-top:var(--space-1);
  padding-bottom:var(--space-1);font-size:11px}
.topbar.style-dark{background:var(--brand-accent)}

/* --- 2: logo comes down, header gains vertical air ------------------------ */
.site-header .navbar-brand img{max-height:36px}
.site-header .navbar-brand{padding-top:var(--space-4);padding-bottom:var(--space-4)}
.site-header .quote-btn .btn{background-color:var(--brand-accent)}

/* --- 3: hero. photographs scroll across the top, nothing written on them,
         headline centred beneath, buttons under the headline ---------------- */
.hero2{padding:0 0 var(--section-y)}
.hero2-rail{overflow:hidden;background:var(--surface-soft);margin-bottom:var(--space-8)}
.hero-track{display:flex;list-style:none;margin:0;padding:0;gap:var(--space-2);
  transition:transform .9s cubic-bezier(.4,0,.2,1);will-change:transform}
.hero-slide{flex:0 0 55%;max-width:55%}
.hero-slide img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;
  border-radius:var(--radius)}
.hero2-text{max-width:760px;margin:0 auto;text-align:center}
.hero2-text .lead{margin-left:auto;margin-right:auto}
.hero2-cta{margin-top:var(--space-6);display:flex;gap:var(--space-2);
  justify-content:center;flex-wrap:wrap}
@media (max-width:767px){.hero-slide{flex:0 0 86%;max-width:86%}}
@media (prefers-reduced-motion:reduce){.hero-track{transition:none}}

/* --- 4: funder names, now the band directly under the hero ---------------- */
.client-line{list-style:none;margin:var(--space-2) 0 0;padding:0;display:flex;
  flex-wrap:wrap;justify-content:center;gap:var(--space-2) var(--space-8)}
.client-line li{font-family:var(--font-display);font-size:var(--text-h4);
  color:var(--text-muted);letter-spacing:.02em}
.center{text-align:center}

/* --- 7: the picture's top corner meets the eyebrow top, its bottom corner
         meets the bottom of the button ---------------------------------------- */
.align-row{display:flex;flex-wrap:wrap;align-items:stretch}
.align-col{display:flex;flex-direction:column}
.align-cta{margin-top:auto;margin-bottom:0;padding-top:var(--space-4)}
.align-shot{flex:1 1 auto;overflow:hidden;border-radius:var(--radius);min-height:260px}
.align-shot img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:767px){.align-row{display:block}.align-shot{min-height:220px;
  margin-top:var(--space-6)}}

/* --- 8 + 9 + 10: six disciplines, static grid, clean image at rest, green
         wash and text on hover, tighter gap under the heading ---------------- */
.disc-head{margin-bottom:var(--space-6)}
.disc-grid{display:flex;flex-wrap:wrap}
.disc-grid>[class*="col-"]{margin-bottom:var(--grid-gutter)}
.dtile{display:block;position:relative;overflow:hidden;border-radius:var(--radius);
  text-decoration:none}
.dtile:hover,.dtile:focus{text-decoration:none}
.dtile-shot{aspect-ratio:4/3;overflow:hidden;background:var(--neutral-200)}
.dtile-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease}
.dtile-empty{display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--surface-soft);border:1px dashed var(--border);padding:var(--space-4)}
.dtile-empty span{font-size:var(--text-eyebrow);letter-spacing:.12em;
  color:var(--text-muted);text-transform:lowercase}
.dtile-over{position:absolute;inset:0;background:rgba(74,112,32,.88);color:#fff;
  display:flex;flex-direction:column;justify-content:center;padding:var(--space-6);
  opacity:0;transition:opacity .35s ease}
.dtile-over .title{color:#fff;margin:0 0 var(--space-2)}
.dtile-over p{color:#EAF1DF;font-size:var(--text-caption);line-height:1.6;margin:0}
.dtile:hover .dtile-over,.dtile:focus-within .dtile-over{opacity:1}
.dtile:hover .dtile-shot img{transform:scale(1.03)}
.dtile-name{margin:var(--space-3) 0 0;font-size:var(--text-h4);color:var(--text-primary)}
.dtile:hover .dtile-name{color:var(--brand-accent)}

/* --- 11: highlight band, half green with the figures, half photograph ------ */
.hband{display:flex;flex-wrap:wrap;padding:0}
.hband-figs{flex:1 1 50%;background:var(--brand-accent);color:#fff;
  padding:var(--section-y) var(--space-8);display:flex;align-items:center}
.hband-inner{max-width:560px;margin-left:auto;width:100%;padding-right:var(--space-8)}
.hband-figs .heading-sm-lead{color:#DCE8CB}
.hband-figs .heading-lead{color:#fff;margin-bottom:var(--space-8)}
.hfig b{display:block;font-family:var(--font-display);font-size:var(--text-h2);
  font-weight:500;line-height:1.1;color:#fff}
.hfig span{display:block;margin-top:var(--space-1);font-size:var(--text-caption);
  color:#DCE8CB}
.hband-shot{flex:1 1 50%;overflow:hidden;min-height:340px}
.hband-shot img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:767px){.hband-figs,.hband-shot{flex:1 1 100%}
  .hband-inner{padding-right:0}.hband-shot{min-height:240px}}

/* --- 12 + 13 + 14: selected projects on grey, Title Case, looping scroll,
         View project always visible ------------------------------------------- */
.proj-section{background:var(--surface-soft)}
.ploop-rail{overflow-x:auto;overflow-y:hidden;margin-top:var(--space-6);
  -webkit-overflow-scrolling:touch;padding-bottom:var(--space-2);scrollbar-width:none}
.ploop-rail::-webkit-scrollbar{display:none}
.ploop-track{display:flex;list-style:none;margin:0;padding:0 var(--space-6);
  gap:var(--grid-gutter)}
.ploop-item{flex:0 0 340px;max-width:340px}
.ploop-item a{display:block;text-decoration:none;color:inherit}
.ploop-item a:hover{text-decoration:none}
.ploop-shot{aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius);
  background:var(--neutral-200)}
.ploop-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease}
.ploop-item a:hover .ploop-shot img{transform:scale(1.03)}
.ploop-cap{padding-top:var(--space-3)}
.ploop-cap h4{margin:0 0 var(--space-1);font-size:var(--text-h4);color:var(--text-primary)}
.ploop-cap p{margin:0;font-size:var(--text-caption);color:var(--text-muted)}
.ploop-link{display:inline-block;margin-top:var(--space-2);font-size:var(--text-caption);
  font-weight:500;color:var(--brand-accent)}
.ploop-item a:hover .ploop-cap h4,.ploop-item a:hover .ploop-link{color:var(--state-hover)}
.proj-all{margin-top:var(--space-8)}
@media (max-width:767px){.ploop-item{flex:0 0 78%;max-width:78%}}

/* --- 15: footer elements sit at balanced distances from each side ---------- */
.footer-widget{background:var(--surface-soft);color:var(--text-muted);
  border-top:1px solid var(--border);padding-top:var(--section-y);
  padding-bottom:var(--section-y)}
.footer-widget .wgs-title{color:var(--text-primary);font-family:var(--font-body);
  font-size:var(--text-eyebrow);letter-spacing:.14em;text-transform:lowercase;
  margin-bottom:var(--space-4)}
.footer-widget a{color:var(--text-body)}
.footer-widget a:hover{color:var(--brand-accent)}
.footer-widget .widget-row{display:flex;flex-wrap:wrap;justify-content:space-between}
.footer-widget .footer-col{padding-left:var(--space-3);padding-right:var(--space-3)}
.footer-widget .offices{list-style:none;padding:0;margin:0}
.footer-widget .offices li{margin-bottom:var(--space-3)}
.footer-widget .offices strong{color:var(--text-primary)}
.footer-widget .menu li{margin-bottom:var(--space-2)}

/* --- 18: the bottom bar goes green with white type ------------------------ */
.copyright{background:var(--brand-accent);color:#fff;border-top:none;
  padding-top:var(--space-4);padding-bottom:var(--space-4);font-size:var(--text-caption)}
.copyright a{color:#fff;text-decoration:underline}
.copyright p{color:#fff;font-size:var(--text-caption);margin:0}

/* --- inner pages ---------------------------------------------------------- */
.banner-inner{min-height:280px;background-size:cover;background-position:center 55%;
  position:relative;display:flex;align-items:flex-end}
.banner-inner::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(29,31,23,.05),rgba(29,31,23,.58))}
.banner-inner .banner-content{position:relative;z-index:2;width:100%;
  padding:var(--space-8) 0}
.banner-inner h1{color:#fff;margin:0}
.cap-tile{margin-bottom:var(--space-8)}
.cap-tile .fbox-photo{aspect-ratio:3/2;overflow:hidden;margin-bottom:var(--space-4);
  border-radius:var(--radius)}
.cap-tile .fbox-photo img{width:100%;height:100%;object-fit:cover}
.cap-tile .fbox-empty{background:var(--surface-soft);border:1px dashed var(--border);
  display:flex;align-items:center;justify-content:center;color:var(--text-muted);
  font-size:var(--text-eyebrow);letter-spacing:.12em;text-transform:lowercase}
.wideshot{aspect-ratio:21/9;overflow:hidden;border-radius:var(--radius)}
.wideshot img{width:100%;height:100%;object-fit:cover}
.gshot{aspect-ratio:4/3;overflow:hidden;margin-bottom:var(--space-2);
  border-radius:var(--radius)}
.gshot img{width:100%;height:100%;object-fit:cover}
.facts th{width:90px;font-weight:500;color:var(--text-muted);
  text-transform:lowercase;font-size:var(--text-eyebrow);letter-spacing:.1em}
.team-photo img{width:160px;height:160px;object-fit:cover;margin-bottom:var(--space-4)}
.quals{list-style:none;padding:0;color:var(--text-muted)}
.quals li{margin-bottom:var(--space-1);font-size:var(--text-caption)}
.col-md-2-4{width:20%;float:left;padding:0 var(--space-3)}
@media (max-width:991px){.col-md-2-4{width:50%}}
.office-box{margin-bottom:var(--space-6)}
.form-box{padding:var(--space-6);background:var(--surface-soft);
  border-radius:var(--radius)}
.form-control{min-height:44px;border-color:var(--border)}
.minih{font-family:var(--font-body);font-size:var(--text-eyebrow);letter-spacing:.14em;
  text-transform:lowercase;color:var(--text-muted);margin:var(--space-6) 0 var(--space-1)}
.creds{margin-top:var(--space-6)}
.creds div{padding:var(--space-3) 0;border-top:1px solid var(--border)}
.creds b{font-family:var(--font-display);font-size:var(--text-h4);
  color:var(--brand-accent);display:block}
.creds span{font-size:var(--text-caption);color:var(--text-muted)}
.register td,.register th{padding:var(--space-3)}

/* --- fixes found in the render pass -------------------------------------- */
/* the CTA band inherits body ink, which lands dark green on green */
.call-action.bg-primary,.call-action.bg-primary p,.call-action.bg-primary h3,
.section-projects.bg-primary,.section-projects.bg-primary h2{color:#fff}
.call-action.bg-primary .btn.btn-outline{color:#fff;border-color:#fff;background:transparent}
.call-action.bg-primary .btn.btn-outline:hover,
.call-action.bg-primary .btn.btn-outline:focus{background:#fff;color:var(--brand-accent);
  border-color:#fff}
/* principle 3, alignment: the loop's first item lines up with the container edge */
.ploop-track{padding-left:max(var(--space-3),calc((100vw - var(--container)) / 2));
  padding-right:max(var(--space-3),calc((100vw - var(--container)) / 2))}