/* 3-TREE unified visual refresh — all inner pages */
:root{--forest:#183c29;--forest2:#2f6244;--sage:#eaf1eb;--cream:#f7f8f4;--ink:#1f2a23;--muted:#68756c;--line:#dce5de;--card:#fff;--max:1240px}
body:not(.home-page){background:var(--cream)!important;color:var(--ink)!important}
body:not(.home-page) #header-wrapper{position:relative!important;z-index:1000!important;padding:22px 0 0!important;background:transparent!important}
body:not(.home-page) #header-wrapper>.container{width:min(calc(100% - 36px),var(--max))!important}
body:not(.home-page) #header .inner{min-height:76px!important;padding:0 24px!important;border-radius:16px!important;background:rgba(24,60,41,.96)!important;box-shadow:0 16px 40px rgba(20,45,28,.13)!important;overflow:visible!important}
#logo{display:flex!important;align-items:center!important;gap:12px!important;color:#fff!important;text-decoration:none!important;text-transform:none!important;letter-spacing:0!important;font-size:inherit!important}
#logo .brand-logo-image{display:block!important;width:78px!important;height:58px!important;object-fit:contain!important;object-position:center!important;flex:0 0 78px!important;margin:0!important;transform:none!important;filter:none!important}
#logo .brand-copy{display:flex!important;flex-direction:column!important;line-height:1.05!important;color:#fff!important}
#logo .brand-copy b{font-size:19px!important;letter-spacing:.12em!important;font-weight:800!important;white-space:nowrap!important}
#logo .brand-copy small{margin-top:6px!important;font-size:9px!important;letter-spacing:.22em!important;opacity:.72!important;white-space:nowrap!important}
body:not(.home-page) #nav{z-index:10000!important;overflow:visible!important}
body:not(.home-page) #nav>ul{gap:3px!important;overflow:visible!important}
body:not(.home-page) #nav a{padding:12px 15px!important;border-radius:10px!important}
body:not(.home-page) #nav .submenu{top:calc(100% + 4px)!important;right:0!important;z-index:100000!important;background:rgba(20,35,27,.98)!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:12px!important;box-shadow:0 18px 45px rgba(0,0,0,.22)!important}
body:not(.home-page) #nav>ul>li:hover>.submenu,body:not(.home-page) #nav>ul>li:focus-within>.submenu{display:block!important}
body:not(.home-page) #nav .submenu a{padding:11px 14px!important}
/* inner page shell */
body:not(.home-page) #main-wrapper{background:transparent!important}
body:not(.home-page) #main-wrapper>.wrapper{padding:0 0 72px!important;background:transparent!important}
body:not(.home-page) #main-wrapper>.wrapper.style2,body:not(.home-page) #main-wrapper>.wrapper.style3{background:transparent!important}
body:not(.home-page) #main-wrapper>.wrapper>.inner{width:min(calc(100% - 36px),var(--max))!important;margin:0 auto!important;padding:0!important}
body:not(.home-page) #main-wrapper .container{width:100%!important;padding:0!important}
body:not(.home-page) #main-wrapper .row{margin:0!important;align-items:flex-start!important}
body:not(.home-page) #main-wrapper .row>[class*="u"]{padding:0 12px 0 0!important}
body:not(.home-page) #main-wrapper .row>[class*="10u"]{padding-left:28px!important}
/* page heading */
body:not(.home-page) article>header.major{padding:70px 0 32px!important;margin:0!important;border:0!important}
body:not(.home-page) article>header.major h2{font-family:"Noto Serif TC","Microsoft JhengHei",serif!important;font-size:clamp(34px,4.2vw,54px)!important;color:var(--forest)!important;letter-spacing:.06em!important;margin:0 0 8px!important}
body:not(.home-page) article>header.major p{font-size:14px!important;letter-spacing:.14em!important;color:#7a867d!important;margin:0!important}
/* sidebar */
body:not(.home-page) #sidebar{position:sticky!important;top:22px!important;margin-top:70px!important;padding:22px!important;border:1px solid var(--line)!important;border-radius:18px!important;background:rgba(255,255,255,.88)!important;box-shadow:0 14px 38px rgba(20,45,28,.07)!important}
body:not(.home-page) #sidebar:before{content:"3-TREE";display:block;margin-bottom:14px;color:var(--forest2);font-size:10px;font-weight:900;letter-spacing:.24em}
body:not(.home-page) #sidebar .major{margin:0!important;padding:0!important;border:0!important}
body:not(.home-page) #sidebar h2{font-size:17px!important;color:var(--forest)!important}
body:not(.home-page) #sidebar h2 a{padding:8px 0!important;color:var(--forest)!important}
body:not(.home-page) #sidebar ul.style2{margin:0 0 12px!important;padding:0!important}
body:not(.home-page) #sidebar ul.style2 li{border:0!important}
body:not(.home-page) #sidebar ul.style2 a{padding:8px 10px!important;border-radius:8px!important;color:var(--muted)!important}
body:not(.home-page) #sidebar ul.style2 a:hover{background:var(--sage)!important;color:var(--forest)!important}
/* content card */
body:not(.home-page) #content{padding-bottom:30px!important}
body:not(.home-page) #content article{padding:0!important}
body:not(.home-page) #content article>.row{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px!important;padding:0!important}
body:not(.home-page) #content article>.row>p{grid-column:1/-1!important}
body:not(.home-page) #content article>.row>.image,body:not(.home-page) #content article>.row>a.image{display:block!important}
body:not(.home-page) #content article>.row>.image img,body:not(.home-page) #content article>.row>a.image img{width:100%!important;display:block!important}
/* product pages */
body:not(.home-page) #content article>.row>img:first-child{grid-column:1/-1!important;max-height:560px!important;object-fit:contain!important;background:#fff!important;border-radius:20px!important;padding:18px!important;border:1px solid var(--line)!important;box-shadow:0 16px 42px rgba(20,45,28,.08)!important}
body:not(.home-page) #content article>.row>p{padding:28px 30px!important;border-radius:18px!important;background:#fff!important;border:1px solid var(--line)!important;box-shadow:0 12px 34px rgba(20,45,28,.06)!important;font-size:17px!important;line-height:2!important}
body:not(.home-page) #content article>.row>p br{line-height:1.6!important}
/* galleries */
body:not(.home-page) #content article>.row>.6u{width:auto!important;min-width:0!important}
body:not(.home-page) #content article>.row>.6u a.image{height:100%!important;padding:0!important;overflow:hidden!important;border:1px solid var(--line)!important;border-radius:16px!important;background:#fff!important;box-shadow:0 12px 30px rgba(20,45,28,.07)!important}
body:not(.home-page) #content article>.row>.6u img{height:300px!important;object-fit:cover!important;transition:transform .35s ease!important}
body:not(.home-page) #content article>.row>.6u:hover img{transform:scale(1.025)!important}
/* case gallery full width */
body:not(.home-page) .case-page #content article>.row{grid-template-columns:repeat(3,minmax(0,1fr))!important}
/* product detail headings inside article */
body:not(.home-page) #content article>header:not(.major){margin-top:34px!important}
body:not(.home-page) #content article>header:not(.major) h3{font-size:24px!important;color:var(--forest)!important}
/* footer */
.site-footer{margin-top:0!important;background:#183c29!important;color:#fff!important;border:0!important}
.footer-inner{width:min(calc(100% - 36px),var(--max))!important;margin:0 auto!important;padding:48px 0 28px!important;display:grid!important;grid-template-columns:1.6fr 1fr 1fr 1.2fr 1fr!important;gap:22px!important;align-items:start!important}
.footer-brand strong{font-size:20px!important;letter-spacing:.08em!important}.footer-brand p{margin:8px 0 0!important;color:rgba(255,255,255,.7)!important}
.footer-item{font-size:14px!important;line-height:1.8!important}.footer-item>span:first-child{display:block!important;margin-bottom:5px!important;color:#a9c7ac!important;font-size:10px!important;font-weight:800!important;letter-spacing:.18em!important}.footer-item a{color:#fff!important;text-decoration:none!important}.footer-item a:hover{text-decoration:underline!important}
.footer-copy{grid-column:1/-1!important;margin-top:12px!important;padding-top:18px!important;border-top:1px solid rgba(255,255,255,.12)!important;color:rgba(255,255,255,.48)!important;font-size:12px!important}
@media(max-width:900px){body:not(.home-page) #header .inner{padding:0 18px!important}body:not(.home-page) #nav{display:none!important}.menu-toggle{display:block!important}.footer-inner{grid-template-columns:1fr 1fr!important}.footer-copy{grid-column:1/-1!important}body:not(.home-page) #main-wrapper .row>[class*="10u"]{padding-left:0!important}.case-page #content article>.row{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:700px){body:not(.home-page) #header-wrapper{padding-top:12px!important}body:not(.home-page) #main-wrapper>.wrapper>.inner{width:min(calc(100% - 24px),var(--max))!important}body:not(.home-page) article>header.major{padding:48px 0 24px!important}body:not(.home-page) #sidebar{position:static!important;margin-top:0!important;margin-bottom:22px!important}.footer-inner{grid-template-columns:1fr!important;padding:38px 0 24px!important}body:not(.home-page) #content article>.row,body:not(.home-page) .case-page #content article>.row{grid-template-columns:1fr!important}body:not(.home-page) #content article>.row>.6u img{height:260px!important}#logo .brand-logo-image{width:68px!important;height:54px!important;flex-basis:68px!important}#logo .brand-copy b{font-size:17px!important}}

/* ===== v11 final visual system ===== */
:root{
  --forest:#10251a;
  --forest2:#315f43;
  --forest3:#1d3f2b;
  --sage:#dfe9e1;
  --cream:#eef2ee;
  --ink:#edf3ee;
  --muted:#b9c8bd;
  --line:rgba(190,214,198,.16);
  --card:#172d20;
  --max:1180px;
  --font-sans:"Noto Sans TC","Microsoft JhengHei",Arial,sans-serif;
  --font-serif:"Noto Serif TC","Microsoft JhengHei",serif;
}

/* One typography system across the whole site */
html,body{font-family:var(--font-sans)!important;font-size:16px!important;line-height:1.9!important}
body:not(.home-page){background:#0b1710!important;color:var(--ink)!important}
body:not(.home-page) p,
body:not(.home-page) li,
body:not(.home-page) dd,
body:not(.home-page) dt,
body:not(.home-page) td,
body:not(.home-page) th{font-family:var(--font-sans)!important;font-size:16px!important;line-height:1.9!important}
body:not(.home-page) h1,body:not(.home-page) h2,body:not(.home-page) h3,body:not(.home-page) h4,
body:not(.home-page) .major h2,body:not(.home-page) .major h3{font-family:var(--font-serif)!important}

/* Same dark-green visual language on every inner page */
body:not(.home-page) #header-wrapper{padding:18px 0 0!important;background:#0b1710!important}
body:not(.home-page) #header-wrapper>.container{width:min(calc(100% - 36px),1180px)!important}
body:not(.home-page) #header .inner{min-height:76px!important;background:rgba(20,48,32,.97)!important;border:1px solid rgba(196,220,202,.14)!important;box-shadow:0 16px 42px rgba(0,0,0,.28)!important}
body:not(.home-page) #nav>ul>li>a{font-size:15px!important;font-weight:700!important;letter-spacing:.06em!important;color:#eef5ef!important}
body:not(.home-page) #nav>ul>li>a:hover,body:not(.home-page) #nav>ul>li:focus-within>a{background:rgba(169,201,175,.13)!important}
body:not(.home-page) #nav .submenu{background:rgba(10,28,18,.98)!important;border-color:rgba(180,211,188,.18)!important}

/* Inner page content: dark cards, generous breathing room */
body:not(.home-page) #main-wrapper{background:#0b1710!important}
body:not(.home-page) #main-wrapper>.wrapper,
body:not(.home-page) #main-wrapper>.wrapper.style2,
body:not(.home-page) #main-wrapper>.wrapper.style3{background:#0b1710!important}
body:not(.home-page) #main-wrapper>.wrapper>.inner{width:min(calc(100% - 36px),1180px)!important;padding:0!important;margin:0 auto!important}
body:not(.home-page) article>header.major{padding:64px 0 30px!important}
body:not(.home-page) article>header.major h2{font-size:clamp(32px,4vw,48px)!important;color:#f1f5f1!important;line-height:1.25!important;letter-spacing:.08em!important}
body:not(.home-page) article>header.major p{font-size:13px!important;line-height:1.6!important;color:#aebdb2!important}
body:not(.home-page) #sidebar{background:#13291c!important;border-color:rgba(190,214,198,.14)!important;box-shadow:0 16px 40px rgba(0,0,0,.22)!important;padding:24px!important}
body:not(.home-page) #sidebar h2,body:not(.home-page) #sidebar h2 a{color:#eef5ef!important;font-size:17px!important}
body:not(.home-page) #sidebar ul.style2 a{color:#b8c8bc!important;font-size:15px!important}
body:not(.home-page) #sidebar ul.style2 a:hover{background:#203d2a!important;color:#fff!important}
body:not(.home-page) #content{padding-bottom:34px!important}
body:not(.home-page) #content article>.row>p{background:#13291c!important;border-color:rgba(190,214,198,.14)!important;color:#e7eee9!important;font-size:16px!important;line-height:2!important;padding:30px 34px!important;box-shadow:0 14px 34px rgba(0,0,0,.20)!important}
body:not(.home-page) #content article>.row>img:first-child{background:#13291c!important;border-color:rgba(190,214,198,.14)!important;box-shadow:0 16px 42px rgba(0,0,0,.24)!important}
body:not(.home-page) #content article>.row>.6u a.image{background:#13291c!important;border-color:rgba(190,214,198,.14)!important;box-shadow:0 14px 32px rgba(0,0,0,.22)!important}
body:not(.home-page) #content article>header:not(.major) h3{font-size:23px!important;line-height:1.4!important;color:#eaf3ec!important}

/* Company page: centered, spacious and no content pressed against the frame */
.company-page{background:#0b1710!important;color:#eaf2ec!important}
.company-hero-section,.company-story-section,.company-values-section,.company-copyright-section{background:#0b1710!important}
.company-hero-section{padding:72px 0 82px!important;border:0!important}
.company-intro-grid{width:min(calc(100% - 72px),1040px)!important;margin:0 auto!important;grid-template-columns:1fr .85fr!important;gap:72px!important}
.company-heading{padding:22px 0!important}
.company-heading h2{font-size:clamp(38px,5vw,60px)!important;line-height:1.2!important;color:#f2f6f2!important}
.company-heading .heading-en{font-size:13px!important;color:#aab9ae!important;line-height:1.6!important}
.company-heading .heading-lead{font-size:17px!important;line-height:2!important;color:#c2cec5!important;max-width:540px!important}
.company-heading .heading-line{background:#78a683!important;margin:24px 0!important}
.company-heading .eyebrow,.company-story-head .eyebrow,.company-values-card .eyebrow{font-size:11px!important;letter-spacing:.24em!important;color:#8eb69a!important;line-height:1.5!important}
.company-logo-frame{max-width:430px!important;aspect-ratio:1.25!important;border-radius:22px!important;background:#12281b!important;border:1px solid rgba(190,214,198,.15)!important;box-shadow:0 20px 48px rgba(0,0,0,.28)!important;padding:24px!important}
.company-logo-frame img{width:100%!important;height:100%!important}
.company-story-section{padding:30px 0 82px!important}
.company-story-section>.container,.company-values-section>.container,.company-copyright-section>.container{width:min(calc(100% - 72px),1040px)!important;margin:0 auto!important}
.company-story-head{max-width:800px!important;margin:0 auto 34px!important;text-align:center!important}
.company-story-head h3{font-size:clamp(26px,3vw,38px)!important;line-height:1.4!important;color:#edf4ee!important}
.company-story-grid{grid-template-columns:1fr 1fr!important;gap:24px!important}
.story-card{padding:34px 36px!important;background:#13291c!important;border:1px solid rgba(190,214,198,.14)!important;border-radius:20px!important;box-shadow:0 16px 36px rgba(0,0,0,.22)!important}
.story-card p{font-size:16px!important;line-height:2!important;color:#d7e1da!important;margin:0!important}
.story-card .dropcap{color:#8eb69a!important}
.company-values-section{padding:0 0 72px!important}
.company-values-card{grid-template-columns:1fr 1.25fr!important;padding:38px 44px!important;border-radius:20px!important;background:#1a3825!important;border:1px solid rgba(190,214,198,.12)!important;box-shadow:0 18px 42px rgba(0,0,0,.24)!important}
.company-values-card h3{font-size:28px!important;line-height:1.4!important;color:#f2f6f2!important}
.company-values-card p{font-size:16px!important;line-height:2!important;color:#d2ded5!important}
.company-copyright-section{padding:0 0 52px!important;color:#8f9f94!important}
.company-copyright-section p{font-size:13px!important;line-height:1.6!important}

/* Homepage: the hero escapes the old centered container and truly reaches both screen edges */
.home-page{background:#07110b!important}
.home-page #header-wrapper{background:transparent!important}
.home-page .home-hero{width:100vw!important;max-width:none!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;min-height:100svh!important;height:100svh!important;background-image:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.08) 42%,rgba(0,0,0,.30)),url('../../images/home-hero.png')!important;background-position:center center!important;background-size:cover!important}
.home-page .hero-content{display:none!important}

/* Mobile */
@media(max-width:900px){
  .company-intro-grid,.company-story-section>.container,.company-values-section>.container,.company-copyright-section>.container{width:min(calc(100% - 36px),1040px)!important}
  .company-intro-grid{grid-template-columns:1fr!important;gap:38px!important}
  .company-heading{text-align:center!important;padding:0!important}
  .company-heading .heading-line{margin:24px auto!important}
  .company-heading .heading-lead{margin-inline:auto!important}
  .company-logo-panel{justify-content:center!important}
  .company-story-grid{grid-template-columns:1fr!important}
  .company-values-card{grid-template-columns:1fr!important;gap:18px!important}
}
@media(max-width:700px){
  html,body{font-size:15px!important}
  body:not(.home-page) #main-wrapper>.wrapper>.inner{width:min(calc(100% - 24px),1180px)!important}
  body:not(.home-page) #content article>.row>p{font-size:15px!important;padding:24px 22px!important;line-height:1.95!important}
  .company-hero-section{padding:54px 0 58px!important}
  .company-intro-grid,.company-story-section>.container,.company-values-section>.container,.company-copyright-section>.container{width:min(calc(100% - 24px),1040px)!important}
  .company-story-section{padding:20px 0 58px!important}
  .story-card{padding:26px 22px!important}
  .story-card p,.company-values-card p{font-size:15px!important;line-height:1.95!important}
  .company-values-card{padding:28px 24px!important}
  .company-values-card h3{font-size:24px!important}
}

/* v12: homepage header matches inner-page header exactly, while the hero fills behind it */
.home-page #header-wrapper{
  position:absolute!important;
  top:0!important;
  left:0!important;
  width:100%!important;
  padding:18px 0 0!important;
  background:transparent!important;
  z-index:1000!important;
}
.home-page #header-wrapper>.container{
  width:min(calc(100% - 36px),1180px)!important;
  margin:0 auto!important;
}
.home-page #header .inner{
  min-height:76px!important;
  padding:0 24px!important;
  border-radius:16px!important;
  background:rgba(20,48,32,.97)!important;
  border:1px solid rgba(196,220,202,.14)!important;
  box-shadow:0 16px 42px rgba(0,0,0,.28)!important;
}
.home-page #nav>ul>li>a{
  padding:12px 15px!important;
  font-size:15px!important;
  font-weight:700!important;
  letter-spacing:.06em!important;
  line-height:1.3!important;
  color:#eef5ef!important;
}
.home-page #nav .submenu a{
  padding:11px 14px!important;
  font-size:14px!important;
}
.home-page .home-hero{
  position:relative!important;
  z-index:1!important;
  width:100vw!important;
  max-width:none!important;
  margin-left:calc(50% - 50vw)!important;
  margin-right:calc(50% - 50vw)!important;
  min-height:100svh!important;
  height:100svh!important;
  background-image:linear-gradient(180deg,rgba(0,0,0,.20),rgba(0,0,0,.08) 42%,rgba(0,0,0,.30)),url('../../images/home-hero.png')!important;
  background-position:center center!important;
  background-size:cover!important;
}
@media(max-width:900px){
  .home-page #header-wrapper>.container{width:min(calc(100% - 28px),1180px)!important}
  .home-page #header .inner{min-height:68px!important;padding:0 18px!important;border-radius:13px!important}
}
@media(max-width:700px){
  .home-page #header-wrapper{padding-top:12px!important}
  .home-page #header-wrapper>.container{width:calc(100% - 24px)!important}
  .home-page #header .inner{min-height:62px!important;padding:0 14px!important;border-radius:11px!important}
  .home-page #nav>ul>li>a{font-size:15px!important}
}


/* ===== v14: company page simplified + original company image restored ===== */
.company-page{background:#0b1710!important;color:#eaf2ec!important}
.company-top{padding:58px 0 42px!important;background:#0b1710!important}
.company-top-inner{width:min(calc(100% - 72px),1120px)!important;margin:0 auto!important;display:grid!important;grid-template-columns:280px 1fr!important;gap:48px!important;align-items:center!important}
.company-title-block{padding:8px 0!important}
.company-title-block .eyebrow,.company-text .section-label,.company-belief .eyebrow{display:block!important;font-size:11px!important;line-height:1.5!important;letter-spacing:.24em!important;color:#8eb69a!important;font-weight:800!important}
.company-title-block h1{margin:12px 0 8px!important;font-size:clamp(38px,4.8vw,56px)!important;line-height:1.15!important;color:#f2f6f2!important;letter-spacing:.08em!important}
.company-title-block p{margin:0!important;font-size:14px!important;color:#aab9ae!important;letter-spacing:.12em!important}
.company-image-card{overflow:hidden!important;border-radius:18px!important;border:1px solid rgba(190,214,198,.15)!important;background:#13291c!important;box-shadow:0 18px 42px rgba(0,0,0,.28)!important}
.company-image-card img{display:block!important;width:100%!important;height:300px!important;object-fit:cover!important;object-position:center!important}
.company-content{padding:20px 0 58px!important;background:#0b1710!important}
.company-content-inner{width:min(calc(100% - 72px),1120px)!important;margin:0 auto!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:24px!important}
.company-text{padding:34px 38px!important;border:1px solid rgba(190,214,198,.12)!important;border-radius:18px!important;background:#12251a!important;box-shadow:0 14px 34px rgba(0,0,0,.18)!important}
.company-text h3{margin:10px 0 18px!important;font-size:25px!important;line-height:1.45!important;color:#edf4ee!important;letter-spacing:.04em!important}
.company-text p{margin:0 0 15px!important;font-size:16px!important;line-height:2!important;color:#d1ddd4!important}
.company-text p:last-child{margin-bottom:0!important}
.company-text b{color:#eef6ef!important;font-weight:700!important}
.company-belief{padding:0 0 44px!important;background:#0b1710!important}
.company-belief>.container{width:min(calc(100% - 72px),1120px)!important;margin:0 auto!important}
.belief-inner{display:grid!important;grid-template-columns:.75fr 1.25fr!important;gap:32px!important;align-items:center!important;padding:26px 34px!important;border-radius:16px!important;background:#183522!important;border:1px solid rgba(190,214,198,.12)!important}
.belief-inner h3{margin:8px 0 0!important;font-size:25px!important;line-height:1.4!important;color:#f2f6f2!important;letter-spacing:.06em!important}
.belief-inner p{margin:0!important;font-size:15px!important;line-height:1.9!important;color:#d1ddd4!important}

/* v14: compact footer */
.site-footer{background:#142c1e!important}
.footer-inner{padding:20px 0 14px!important;gap:10px 18px!important;align-items:center!important}
.footer-brand strong{font-size:16px!important;letter-spacing:.06em!important}
.footer-brand p{margin:3px 0 0!important;font-size:12px!important}
.footer-item{font-size:12px!important;line-height:1.5!important;white-space:nowrap!important}
.footer-item>span:first-child{margin-bottom:2px!important;font-size:9px!important}
.footer-copy{margin-top:4px!important;padding-top:8px!important;font-size:10px!important}
@media(max-width:900px){
 .company-top-inner,.company-content-inner,.company-belief>.container{width:min(calc(100% - 36px),1120px)!important}
 .company-top-inner{grid-template-columns:1fr!important;gap:24px!important}
 .company-title-block{text-align:center!important}
 .company-image-card img{height:280px!important}
 .company-content-inner{grid-template-columns:1fr!important}
 .belief-inner{grid-template-columns:1fr!important;gap:14px!important}
 .footer-inner{grid-template-columns:repeat(2,1fr)!important;padding:18px 0 12px!important}
 .footer-copy{grid-column:1/-1!important}
}
@media(max-width:700px){
 .company-top{padding:42px 0 28px!important}
 .company-top-inner,.company-content-inner,.company-belief>.container{width:min(calc(100% - 24px),1120px)!important}
 .company-image-card img{height:220px!important}
 .company-text{padding:26px 22px!important}
 .company-text h3{font-size:22px!important}
 .company-text p{font-size:15px!important;line-height:1.9!important}
 .belief-inner{padding:22px 20px!important}
 .belief-inner h3{font-size:22px!important}
 .footer-inner{grid-template-columns:1fr!important;padding:16px 0 10px!important}
 .footer-item{white-space:normal!important}
}

/* v15: company page alignment fix — keep title above image and content centered */
.company-page .company-top{padding:52px 0 38px!important;background:#0b1710!important}
.company-page .company-top-inner{width:min(calc(100% - 72px),1120px)!important;margin:0 auto!important;display:flex!important;flex-direction:column!important;gap:26px!important;align-items:stretch!important}
.company-page .company-title-block{text-align:center!important;padding:0!important}
.company-page .company-title-block .eyebrow{display:block!important}
.company-page .company-title-block h1{margin:10px 0 6px!important;font-size:clamp(38px,4.8vw,56px)!important;line-height:1.15!important}
.company-page .company-title-block p{margin:0!important}
.company-page .company-image-card{width:100%!important}
.company-page .company-image-card img{display:block!important;width:100%!important;height:auto!important;aspect-ratio:auto!important;object-fit:contain!important;object-position:center!important}
.company-page .company-content{padding:18px 0 52px!important}
.company-page .company-content-inner{width:min(calc(100% - 72px),1120px)!important;margin:0 auto!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:24px!important}
.company-page .company-belief{padding:0 0 40px!important}
.company-page .company-belief-inner{width:min(calc(100% - 72px),1120px)!important;margin:0 auto!important}
@media(max-width:900px){
 .company-page .company-top-inner,.company-page .company-content-inner,.company-page .company-belief-inner{width:min(calc(100% - 36px),1120px)!important}
 .company-page .company-top{padding:42px 0 30px!important}
 .company-page .company-content-inner{grid-template-columns:1fr!important}
 .company-page .company-image-card img{height:auto!important}
}
@media(max-width:700px){
 .company-page .company-top-inner,.company-page .company-content-inner,.company-page .company-belief-inner{width:min(calc(100% - 24px),1120px)!important}
 .company-page .company-top{padding:34px 0 24px!important}
 .company-page .company-top-inner{gap:20px!important}
 .company-page .company-title-block h1{font-size:38px!important}
}


/* ===== v16: unify navigation typography + company title cleanup ===== */
/* All pages, including homepage, use exactly the same main navigation typography. */
#header #nav>ul>li>a{
  font-family:var(--font-sans)!important;
  font-size:15px!important;
  font-weight:700!important;
  line-height:1.3!important;
  letter-spacing:.06em!important;
  padding:12px 15px!important;
  color:#eef5ef!important;
}
#header #nav>ul{gap:3px!important}
#header #nav .submenu a{
  font-family:var(--font-sans)!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1.4!important;
  letter-spacing:.02em!important;
  padding:11px 14px!important;
}
.home-page #nav>ul>li>a,
body:not(.home-page) #nav>ul>li>a{
  font-family:var(--font-sans)!important;
  font-size:15px!important;
  font-weight:700!important;
  line-height:1.3!important;
  letter-spacing:.06em!important;
  padding:12px 15px!important;
}

/* Company title: left aligned, smaller, with no company-name subtitle. */
.company-page .company-title-block{
  text-align:left!important;
  padding:0!important;
  width:100%!important;
}
.company-page .company-title-block .eyebrow{
  margin:0 0 7px!important;
}
.company-page .company-title-block h1{
  margin:0!important;
  font-size:34px!important;
  line-height:1.25!important;
  letter-spacing:.08em!important;
}
@media(max-width:700px){
  .company-page .company-title-block h1{font-size:30px!important}
}

/* v16: belief block is intentionally removed from company page. */


/* ===== v17: exact header/logo parity + product typography cleanup ===== */
/* Homepage and inner pages share the exact same logo display box and typography. */
#logo{
  gap:12px!important;
}
#logo .brand-logo-image{
  width:78px!important;
  height:58px!important;
  flex:0 0 78px!important;
  margin:0!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  filter:none!important;
}
#logo .brand-copy{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  line-height:1.05!important;
  transform:none!important;
  filter:none!important;
}
#logo .brand-copy b{
  font-family:var(--font-sans)!important;
  font-size:19px!important;
  font-weight:800!important;
  line-height:1.2!important;
  letter-spacing:.12em!important;
  white-space:nowrap!important;
}
#logo .brand-copy small{
  font-family:Arial,sans-serif!important;
  margin-top:6px!important;
  font-size:9px!important;
  font-weight:500!important;
  line-height:1!important;
  letter-spacing:.22em!important;
  opacity:.72!important;
  white-space:nowrap!important;
}

/* Product titles: same restrained size as the company-page title. */
body.product-page #content article>header.major h2{
  font-family:var(--font-sans)!important;
  font-size:34px!important;
  font-weight:700!important;
  line-height:1.35!important;
  letter-spacing:.08em!important;
  color:#f1f5f1!important;
  margin:0!important;
}
/* Product body text: consistent, readable size and spacing. */
body.product-page #content article>.row>p{
  font-family:var(--font-sans)!important;
  font-size:16px!important;
  line-height:2.05!important;
  letter-spacing:.02em!important;
}
body.product-page #content article>.row>p br{display:block!important;content:""!important;margin:.18em 0!important}

/* Single-basin detail: both original images are given a clear, equal display area. */
body.product-page.single-basin #content article>.row>img{
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  max-height:520px!important;
  margin:0!important;
  padding:18px!important;
  object-fit:contain!important;
  background:#13291c!important;
  border:1px solid rgba(190,214,198,.14)!important;
  border-radius:20px!important;
  box-shadow:0 16px 42px rgba(0,0,0,.24)!important;
}
body.product-page.single-basin #content article>.row>img:first-child{grid-column:auto!important}
body.product-page.single-basin #content article>.row>img:nth-child(2){grid-column:auto!important}

@media(max-width:700px){
  #logo{gap:12px!important}
  #logo .brand-logo-image{width:68px!important;height:54px!important;flex-basis:68px!important}
  #logo .brand-copy b{font-size:17px!important}
  #logo .brand-copy small{font-size:8px!important;margin-top:5px!important}
  body.product-page #content article>header.major h2{font-size:30px!important}
}


/* ===== v18: final header parity + light product/site theme ===== */
/* Homepage and inner pages use the exact same header geometry, logo box and typography. */
.home-page #header-wrapper>.container,
body:not(.home-page) #header-wrapper>.container{
  width:min(calc(100% - 36px),1180px)!important;
  margin:0 auto!important;
}
.home-page #header .inner,
body:not(.home-page) #header .inner{
  min-height:76px!important;
  padding:0 24px!important;
}
.home-page #logo,
body:not(.home-page) #logo{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  transform:none!important;
}
.home-page #logo .brand-logo-image,
body:not(.home-page) #logo .brand-logo-image{
  width:78px!important;
  height:58px!important;
  flex:0 0 78px!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:none!important;
  filter:none!important;
}
.home-page #logo .brand-copy,
body:not(.home-page) #logo .brand-copy{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  margin:0!important;
  padding:0!important;
  line-height:1.05!important;
  transform:none!important;
}
.home-page #logo .brand-copy b,
body:not(.home-page) #logo .brand-copy b{
  font-family:var(--font-sans)!important;
  font-size:19px!important;
  font-weight:800!important;
  line-height:1.2!important;
  letter-spacing:.12em!important;
  white-space:nowrap!important;
}
.home-page #logo .brand-copy small,
body:not(.home-page) #logo .brand-copy small{
  font-family:Arial,sans-serif!important;
  margin-top:6px!important;
  font-size:9px!important;
  font-weight:500!important;
  line-height:1!important;
  letter-spacing:.22em!important;
  white-space:nowrap!important;
  opacity:.72!important;
}
.home-page #nav>ul,
body:not(.home-page) #nav>ul{gap:3px!important}
.home-page #nav>ul>li>a,
body:not(.home-page) #nav>ul>li>a{
  font-family:var(--font-sans)!important;
  font-size:15px!important;
  font-weight:700!important;
  line-height:1.3!important;
  letter-spacing:.06em!important;
  padding:12px 15px!important;
}
.home-page #nav .submenu a,
body:not(.home-page) #nav .submenu a{
  font-family:var(--font-sans)!important;
  font-size:14px!important;
  font-weight:700!important;
  line-height:1.4!important;
  letter-spacing:.02em!important;
}

/* Light background for the site except the company page, which is intentionally frozen. */
body:not(.home-page):not(.company-page){
  background:#f3f6f2!important;
  color:#26352c!important;
}
body:not(.home-page):not(.company-page) #main-wrapper,
body:not(.home-page):not(.company-page) #main-wrapper>.wrapper,
body:not(.home-page):not(.company-page) #main-wrapper>.wrapper.style2,
body:not(.home-page):not(.company-page) #main-wrapper>.wrapper.style3{
  background:#f3f6f2!important;
}
body.product-page:not(.company-page) #sidebar{
  background:#ffffff!important;
  border-color:#dce6de!important;
  box-shadow:0 12px 32px rgba(38,67,48,.08)!important;
}
body.product-page:not(.company-page) #sidebar h2,
body.product-page:not(.company-page) #sidebar h2 a{color:#214d33!important}
body.product-page:not(.company-page) #sidebar ul.style2 a{color:#607066!important}
body.product-page:not(.company-page) #sidebar ul.style2 a:hover{background:#e8f0e9!important;color:#214d33!important}
body.product-page:not(.company-page) #content article>.row>p,
body.product-page:not(.company-page) #content article>p{
  background:#ffffff!important;
  border-color:#dce6de!important;
  color:#39463e!important;
  box-shadow:0 10px 28px rgba(38,67,48,.06)!important;
}
body.product-page:not(.company-page) #content article>.row>img:first-child,
body.product-page:not(.company-page) #content article>.row>img{
  background:#ffffff!important;
  border-color:#dce6de!important;
  box-shadow:0 12px 30px rgba(38,67,48,.07)!important;
}
body.product-page:not(.company-page) #content article>header.major h2,
body.product-page:not(.company-page) #content>header.major h2{
  font-family:var(--font-sans)!important;
  font-size:34px!important;
  font-weight:700!important;
  line-height:1.35!important;
  letter-spacing:.08em!important;
  color:#214d33!important;
  margin:0!important;
}
/* These pages had the main title outside <article>, which caused a different vertical position. */
body.product-page:not(.company-page) #content>header.major{
  padding:64px 0 30px!important;
  margin:0!important;
  border:0!important;
}
body.product-page:not(.company-page) #content>header.major h2{text-align:left!important}

/* Assembly: make both product images equally readable and break the description into clear lines. */
body.product-page #content article>.row>img{
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  height:390px!important;
  object-fit:contain!important;
  padding:16px!important;
  border-radius:18px!important;
}
body.product-page #content article>.row>p{
  white-space:normal!important;
}
body.product-page #content article>.row>p br{display:block!important;margin:.28em 0!important}

/* Lamp series: give all three images enough physical size to read the original diagrams. */
body.product-page #content article>.row>.4u a.image{
  display:block!important;
  padding:12px!important;
  border:1px solid #dce6de!important;
  border-radius:18px!important;
  background:#fff!important;
  box-shadow:0 12px 30px rgba(38,67,48,.07)!important;
}
body.product-page #content article>.row>.4u img{
  width:100%!important;
  height:390px!important;
  object-fit:contain!important;
  background:#fff!important;
}

/* Network page: enlarge the first explanatory image and separate the two sections. */
body.product-page #content .box.excerpt{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(260px,.8fr)!important;
  gap:28px!important;
  align-items:center!important;
  padding:22px!important;
  background:#fff!important;
  border:1px solid #dce6de!important;
  border-radius:18px!important;
  box-shadow:0 10px 28px rgba(38,67,48,.06)!important;
}
body.product-page #content .box.excerpt .image.left{
  width:100%!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
}
body.product-page #content .box.excerpt .image.left img{
  width:100%!important;
  height:390px!important;
  object-fit:contain!important;
  background:#fff!important;
}
body.product-page #content .box.excerpt h3{
  margin:0 0 12px!important;
  font-size:22px!important;
  line-height:1.45!important;
  color:#214d33!important;
}
body.product-page #content .box.excerpt p{font-size:16px!important;line-height:2!important;color:#4a574f!important}
body.product-page #content > header.product-section-heading{
  padding:44px 0 20px!important;
  margin:0!important;
  border:0!important;
}
body.product-page #content > header.product-section-heading h3{
  margin:0!important;
  font-family:var(--font-sans)!important;
  font-size:22px!important;
  font-weight:700!important;
  line-height:1.5!important;
  letter-spacing:.04em!important;
  color:#214d33!important;
  text-align:left!important;
}
body.product-page #content .network-detail-row{
  margin-bottom:8px!important;
}
body.product-page #content .network-detail-row section{
  height:100%!important;
  padding:16px!important;
  background:#fff!important;
  border:1px solid #dce6de!important;
  border-radius:16px!important;
  box-shadow:0 10px 28px rgba(38,67,48,.06)!important;
}
body.product-page #content .network-detail-row .image img{
  width:100%!important;
  height:330px!important;
  object-fit:contain!important;
  background:#fff!important;
}
body.product-page #content .network-detail-row h1{
  margin:16px 0 8px!important;
  font-family:var(--font-sans)!important;
  font-size:18px!important;
  font-weight:700!important;
  line-height:1.5!important;
  color:#214d33!important;
}
body.product-page #content .network-detail-row p{
  margin:0 0 12px!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  font-size:15px!important;
  line-height:1.9!important;
  color:#4a574f!important;
}

@media(max-width:900px){
  .home-page #header-wrapper>.container,
  body:not(.home-page) #header-wrapper>.container{width:min(calc(100% - 28px),1180px)!important}
  body.product-page #content article>.row>.4u img{height:320px!important}
  body.product-page #content .box.excerpt{grid-template-columns:1fr!important}
  body.product-page #content .box.excerpt .image.left img{height:340px!important}
}
@media(max-width:700px){
  .home-page #header-wrapper>.container,
  body:not(.home-page) #header-wrapper>.container{width:calc(100% - 24px)!important}
  .home-page #header .inner,
  body:not(.home-page) #header .inner{min-height:62px!important;padding:0 14px!important}
  .home-page #logo .brand-logo-image,
  body:not(.home-page) #logo .brand-logo-image{width:68px!important;height:54px!important;flex-basis:68px!important}
  .home-page #logo .brand-copy b,
  body:not(.home-page) #logo .brand-copy b{font-size:17px!important}
  .home-page #logo .brand-copy small,
  body:not(.home-page) #logo .brand-copy small{font-size:8px!important;margin-top:5px!important}
  body.product-page #content article>.row>img{height:300px!important}
  body.product-page #content article>.row>.4u img{height:280px!important}
  body.product-page #content .box.excerpt .image.left img{height:280px!important}
  body.product-page #content > header.product-section-heading{padding:34px 0 16px!important}
}


/* =========================================================
   3-TREE v19 — flat full-width light navigation + larger case imagery
   Requested changes:
   1) Keep homepage/inner-page logo + nav geometry aligned.
   2) Replace the floating dark navigation block with a flat light full-width bar.
   3) Enlarge portfolio/case images.
   4) Give Lamp-series product images a larger, cleaner presentation.
   ========================================================= */

/* ----- v19: FLAT LIGHT FULL-WIDTH HEADER ----- */
#header-wrapper,
body:not(.home-page) #header-wrapper,
.home-page #header-wrapper{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  width:100%!important;
  padding:0!important;
  margin:0!important;
  background:#f7f9f6!important;
  border-bottom:1px solid #dfe7e1!important;
  box-shadow:none!important;
}
.home-page #header-wrapper{
  position:absolute!important;
  top:0!important;
  left:0!important;
  z-index:1000!important;
}
#header-wrapper>.container,
.home-page #header-wrapper>.container,
body:not(.home-page) #header-wrapper>.container{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
#header,
.home-page #header,
body:not(.home-page) #header{
  width:100%!important;
  margin:0!important;
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
#header .inner,
.home-page #header .inner,
body:not(.home-page) #header .inner{
  width:min(calc(100% - 36px),1180px)!important;
  max-width:1180px!important;
  min-height:76px!important;
  margin:0 auto!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
}
#logo,
.home-page #logo,
body:not(.home-page) #logo{
  color:#214d33!important;
}
#logo .brand-copy,
.home-page #logo .brand-copy,
body:not(.home-page) #logo .brand-copy{
  color:#214d33!important;
}
#logo .brand-copy b,
.home-page #logo .brand-copy b,
body:not(.home-page) #logo .brand-copy b{
  color:#214d33!important;
}
#logo .brand-copy small,
.home-page #logo .brand-copy small,
body:not(.home-page) #logo .brand-copy small{
  color:#52665a!important;
  opacity:.9!important;
}
#nav>ul>li>a,
.home-page #nav>ul>li>a,
body:not(.home-page) #nav>ul>li>a{
  color:#294936!important;
  background:transparent!important;
}
#nav>ul>li>a:hover,
#nav>ul>li.current_page_item>a,
.home-page #nav>ul>li>a:hover,
.home-page #nav>ul>li.current_page_item>a,
body:not(.home-page) #nav>ul>li>a:hover,
body:not(.home-page) #nav>ul>li.current_page_item>a{
  color:#183c29!important;
  background:#e7efe8!important;
}
#nav .submenu,
.home-page #nav .submenu,
body:not(.home-page) #nav .submenu{
  background:#ffffff!important;
  color:#294936!important;
  border:1px solid #dce6de!important;
  border-radius:10px!important;
  box-shadow:0 16px 35px rgba(38,67,48,.12)!important;
}
#nav .submenu a,
.home-page #nav .submenu a,
body:not(.home-page) #nav .submenu a{
  color:#294936!important;
}
#nav .submenu a:hover{
  background:#e8f0e9!important;
  color:#183c29!important;
}

/* Homepage hero: reserve the flat nav area so it does not create a dark block. */
.home-page #header-wrapper{
  background:#f7f9f6!important;
}
.home-page .home-hero{
  margin-top:0!important;
}

/* ----- v19: LARGER WORK / CASE IMAGES ----- */
body:not(.home-page) .case-page #content article>.row{
  gap:28px!important;
}
body:not(.home-page) .case-page #content article>.row>.6u{
  min-width:0!important;
}
body:not(.home-page) .case-page #content article>.row>.6u img{
  width:100%!important;
  height:390px!important;
  max-height:none!important;
  object-fit:cover!important;
  display:block!important;
  border-radius:14px!important;
}
body:not(.home-page) .case-page #content article>.row>.6u a.image{
  display:block!important;
  overflow:hidden!important;
  border-radius:14px!important;
  background:#fff!important;
  border:1px solid #dce6de!important;
  box-shadow:0 12px 30px rgba(38,67,48,.08)!important;
}
body:not(.home-page) .case-page #content article>.row>.6u a.image:hover img{
  transform:scale(1.025)!important;
}

/* ----- v19: LAMP SERIES — make the three source images visually larger ----- */
body.product-page #content article>.row>.4u img{
  height:430px!important;
  object-fit:contain!important;
}
body.product-page #content article>.row>.4u a.image{
  min-height:458px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
@media(max-width:900px){
  body:not(.home-page) .case-page #content article>.row>.6u img{
    height:340px!important;
  }
  body.product-page #content article>.row>.4u img{
    height:360px!important;
  }
  body.product-page #content article>.row>.4u a.image{
    min-height:388px!important;
  }
}
@media(max-width:700px){
  #header .inner,
  .home-page #header .inner,
  body:not(.home-page) #header .inner{
    width:calc(100% - 24px)!important;
    min-height:62px!important;
  }
  body:not(.home-page) .case-page #content article>.row>.6u img{
    height:300px!important;
  }
  body.product-page #content article>.row>.4u img{
    height:300px!important;
  }
  body.product-page #content article>.row>.4u a.image{
    min-height:328px!important;
  }
}

/* ===== v20: dark-green full-width navigation + unified light company page + larger galleries ===== */
:root{--nav-green:#183c29;--nav-green-2:#2f6244}

/* Navigation: same footer green, full-width and flat, no floating dark side panel */
#header-wrapper,
body:not(.home-page) #header-wrapper,
.home-page #header-wrapper{
  width:100%!important;
  padding:0!important;
  margin:0!important;
  background:var(--nav-green)!important;
  box-shadow:none!important;
  border:0!important;
}
#header-wrapper>.container,
body:not(.home-page) #header-wrapper>.container,
.home-page #header-wrapper>.container{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
#header .inner,
body:not(.home-page) #header .inner,
.home-page #header .inner{
  width:100%!important;
  max-width:none!important;
  min-height:78px!important;
  padding:0 34px!important;
  margin:0!important;
  border-radius:0!important;
  border:0!important;
  background:var(--nav-green)!important;
  box-shadow:none!important;
}
#logo,
#logo .brand-copy,
#logo .brand-copy b,
#logo .brand-copy small{color:#fff!important}
#nav>ul>li>a,
body:not(.home-page) #nav>ul>li>a,
.home-page #nav>ul>li>a{
  color:#fff!important;
  font-weight:700!important;
}
#nav>ul>li>a:hover,
#nav>ul>li:focus-within>a{color:#dcebdd!important;background:rgba(255,255,255,.09)!important}
#nav .submenu,
body:not(.home-page) #nav .submenu{
  background:#183c29!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:0 16px 38px rgba(0,0,0,.22)!important;
}
#nav .submenu a{color:#fff!important}
#nav .submenu a:hover{background:rgba(255,255,255,.10)!important;color:#fff!important}

/* Company page: bring it into the same light visual system as the other inner pages */
#main-wrapper.company-page{
  background:#eef2ee!important;
  color:#26352c!important;
}
#main-wrapper.company-page .company-top,
#main-wrapper.company-page .company-content,
#main-wrapper.company-page .company-belief{
  background:#eef2ee!important;
  color:#26352c!important;
}
#main-wrapper.company-page .company-title-block h2,
#main-wrapper.company-page .company-title-block p,
#main-wrapper.company-page .section-label,
#main-wrapper.company-page h3,
#main-wrapper.company-page p,
#main-wrapper.company-page li{color:#26352c!important}
#main-wrapper.company-page .company-title-block .eyebrow{color:#315f43!important}
#main-wrapper.company-page .company-image-card{
  background:#fff!important;
  border:1px solid #dce6de!important;
  border-radius:18px!important;
  box-shadow:0 12px 30px rgba(38,67,48,.08)!important;
  overflow:hidden!important;
}

/* Case gallery: use two generous columns so the photos read as real portfolio images */
body:not(.home-page) .case-page #content article>.row{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:30px!important;
}
body:not(.home-page) .case-page #content article>.row>.6u img{
  width:100%!important;
  height:500px!important;
  max-height:none!important;
  object-fit:cover!important;
}
body:not(.home-page) .case-page #content article>.row>.6u a.image{
  min-height:500px!important;
}

/* Lamp series: enlarge the three product images and their display cards */
body.product-page #content article>.row>.4u img{
  width:100%!important;
  height:560px!important;
  max-height:none!important;
  object-fit:contain!important;
}
body.product-page #content article>.row>.4u a.image{
  min-height:590px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:18px!important;
  background:#fff!important;
  border:1px solid #dce6de!important;
  border-radius:18px!important;
  overflow:hidden!important;
}

@media(max-width:900px){
  #header .inner,body:not(.home-page) #header .inner,.home-page #header .inner{padding:0 20px!important}
  body:not(.home-page) .case-page #content article>.row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body:not(.home-page) .case-page #content article>.row>.6u img{height:420px!important}
  body:not(.home-page) .case-page #content article>.row>.6u a.image{min-height:420px!important}
  body.product-page #content article>.row>.4u img{height:470px!important}
  body.product-page #content article>.row>.4u a.image{min-height:500px!important}
}
@media(max-width:700px){
  #header .inner,body:not(.home-page) #header .inner,.home-page #header .inner{min-height:64px!important;padding:0 14px!important}
  body:not(.home-page) .case-page #content article>.row{grid-template-columns:1fr!important}
  body:not(.home-page) .case-page #content article>.row>.6u img{height:360px!important}
  body:not(.home-page) .case-page #content article>.row>.6u a.image{min-height:360px!important}
  body.product-page #content article>.row>.4u img{height:360px!important}
  body.product-page #content article>.row>.4u a.image{min-height:390px!important}
}

/* ===== v21 fixes from visual review ===== */
/* 1) Homepage: navigation must NOT sit on top of the hero's built-in center logo. */
.home-page #header-wrapper{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  inset:auto!important;
  padding:0!important;
  background:var(--nav-green)!important;
  pointer-events:auto!important;
}
.home-page #header .inner{
  width:100%!important;
  max-width:none!important;
  min-height:78px!important;
  padding:0 34px!important;
  margin:0!important;
  background:var(--nav-green)!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
}
.home-page .home-hero{
  min-height:calc(100svh - 78px)!important;
  height:calc(100svh - 78px)!important;
  margin:0!important;
  background-position:center center!important;
}
/* Keep homepage brand copy clearly visible on the dark-green bar. */
.home-page #logo .brand-copy,
.home-page #logo .brand-copy b,
.home-page #logo .brand-copy small{color:#fff!important}
.home-page #logo .brand-copy small{opacity:.78!important}

/* 2) Unified dark-green navigation: no pale/white active pill and readable dropdown. */
#nav>ul>li>a,
.home-page #nav>ul>li>a,
body:not(.home-page) #nav>ul>li>a{
  color:#fff!important;
  background:transparent!important;
}
#nav>ul>li>a:hover,
#nav>ul>li:focus-within>a,
#nav>ul>li.current_page_item>a{
  color:#fff!important;
  background:#2f6244!important;
}
#nav .submenu,
.home-page #nav .submenu,
body:not(.home-page) #nav .submenu{
  background:#183c29!important;
  border:1px solid rgba(255,255,255,.16)!important;
  box-shadow:0 18px 40px rgba(0,0,0,.24)!important;
}
#nav .submenu a,
.home-page #nav .submenu a,
body:not(.home-page) #nav .submenu a{
  color:#fff!important;
  background:transparent!important;
}
#nav .submenu a:hover,
.home-page #nav .submenu a:hover,
body:not(.home-page) #nav .submenu a:hover{
  color:#fff!important;
  background:#2f6244!important;
}

/* 3) Lamp series: two large columns instead of three small thumbnails. */
body.product-page #content article>.row{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:30px!important;
}
body.product-page #content article>.row>.4u{
  width:auto!important;
  min-width:0!important;
}
body.product-page #content article>.row>.4u a.image{
  min-height:0!important;
  height:auto!important;
  padding:14px!important;
  display:block!important;
}
body.product-page #content article>.row>.4u img{
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  display:block!important;
}

/* 4) Works / portfolio: one large photo per row, using the full content width. */
body:not(.home-page) .case-page #content article>.row{
  grid-template-columns:1fr!important;
  gap:34px!important;
}
body:not(.home-page) .case-page #content article>.row>.6u{
  width:auto!important;
  min-width:0!important;
}
body:not(.home-page) .case-page #content article>.row>.6u a.image{
  min-height:0!important;
  height:auto!important;
  padding:0!important;
}
body:not(.home-page) .case-page #content article>.row>.6u img{
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
  border-radius:14px!important;
  display:block!important;
}

/* 5) Company page: force the same light background system as every other inner page. */
#main-wrapper.company-page,
#main-wrapper.company-page .company-top,
#main-wrapper.company-page .company-content,
#main-wrapper.company-page .company-belief{
  background:#eef2ee!important;
  color:#26352c!important;
}
#main-wrapper.company-page .company-title-block h2,
#main-wrapper.company-page .company-title-block p,
#main-wrapper.company-page h3,
#main-wrapper.company-page p,
#main-wrapper.company-page li{color:#26352c!important}
#main-wrapper.company-page .company-title-block .eyebrow,
#main-wrapper.company-page .section-label{color:#315f43!important}

@media(max-width:900px){
  .home-page .home-hero{min-height:calc(100svh - 78px)!important;height:calc(100svh - 78px)!important}
  body.product-page #content article>.row{grid-template-columns:1fr!important}
  body:not(.home-page) .case-page #content article>.row{grid-template-columns:1fr!important}
}
@media(max-width:700px){
  .home-page #header .inner{min-height:64px!important;padding:0 14px!important}
  .home-page .home-hero{min-height:calc(100svh - 64px)!important;height:calc(100svh - 64px)!important}
}

/* ===== v22: unified navigation + company readability + footer gap cleanup ===== */
/* Navigation must be identical on homepage and every inner page. */
#header-wrapper,
.home-page #header-wrapper,
body:not(.home-page) #header-wrapper{
  position:relative!important;
  top:auto!important;
  left:auto!important;
  inset:auto!important;
  width:100%!important;
  height:auto!important;
  padding:0!important;
  margin:0!important;
  background:#183c29!important;
  border:0!important;
  box-shadow:none!important;
}
#header-wrapper>.container,
.home-page #header-wrapper>.container,
body:not(.home-page) #header-wrapper>.container{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
#header,
.home-page #header,
body:not(.home-page) #header{width:100%!important;margin:0!important;padding:0!important;background:transparent!important}
#header .inner,
.home-page #header .inner,
body:not(.home-page) #header .inner{
  width:100%!important;
  max-width:none!important;
  min-height:78px!important;
  margin:0!important;
  padding:0 34px!important;
  border:0!important;
  border-radius:0!important;
  background:#183c29!important;
  box-shadow:none!important;
}
#logo,
#logo .brand-copy,
#logo .brand-copy b,
#logo .brand-copy small,
.home-page #logo,
.home-page #logo .brand-copy,
.home-page #logo .brand-copy b,
.home-page #logo .brand-copy small,
body:not(.home-page) #logo,
body:not(.home-page) #logo .brand-copy,
body:not(.home-page) #logo .brand-copy b,
body:not(.home-page) #logo .brand-copy small{color:#fff!important}
#logo .brand-copy small,
.home-page #logo .brand-copy small,
body:not(.home-page) #logo .brand-copy small{opacity:.78!important}

/* Active item: clearly different green with white text, not a pale pill. */
#nav>ul>li>a,
.home-page #nav>ul>li>a,
body:not(.home-page) #nav>ul>li>a{
  color:#fff!important;
  background:transparent!important;
}
#nav>ul>li>a:hover,
#nav>ul>li:focus-within>a,
.home-page #nav>ul>li>a:hover,
.home-page #nav>ul>li:focus-within>a,
body:not(.home-page) #nav>ul>li>a:hover,
body:not(.home-page) #nav>ul>li:focus-within>a{
  color:#fff!important;
  background:#315f43!important;
}
#nav>ul>li.current_page_item>a,
.home-page #nav>ul>li.current_page_item>a,
body:not(.home-page) #nav>ul>li.current_page_item>a{
  color:#fff!important;
  background:#4b7f5a!important;
}
#nav .submenu,
.home-page #nav .submenu,
body:not(.home-page) #nav .submenu{
  background:#183c29!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.14)!important;
}
#nav .submenu a,
.home-page #nav .submenu a,
body:not(.home-page) #nav .submenu a{color:#fff!important;background:transparent!important}
#nav .submenu a:hover,
.home-page #nav .submenu a:hover,
body:not(.home-page) #nav .submenu a:hover{color:#fff!important;background:#315f43!important}

/* Company page: section labels must remain readable on the light cards. */
#main-wrapper.company-page .company-content,
#main-wrapper.company-page .company-content-inner{background:#eef2ee!important}
#main-wrapper.company-page .company-text{
  background:#fff!important;
  border:1px solid #dce6de!important;
  box-shadow:0 12px 32px rgba(20,45,28,.07)!important;
}
#main-wrapper.company-page .company-text .section-label{
  color:#183c29!important;
  font-weight:900!important;
  letter-spacing:.24em!important;
  opacity:1!important;
}
#main-wrapper.company-page .company-text h3{color:#203c29!important}
#main-wrapper.company-page .company-text p{color:#39463d!important}

@media(max-width:700px){
  #header .inner,
  .home-page #header .inner,
  body:not(.home-page) #header .inner{min-height:64px!important;padding:0 14px!important}
}

/* ===== v23: company story readability + lamp gallery cleanup ===== */
/* Company story: keep the event names clearly readable on the light card. */
#main-wrapper.company-page .company-text p,
#main-wrapper.company-page .company-text p b,
#main-wrapper.company-page .company-text p strong{
  color:#263c2d!important;
}
#main-wrapper.company-page .company-text p b,
#main-wrapper.company-page .company-text p strong{
  font-weight:900!important;
  background:rgba(223,233,225,.55)!important;
  padding:2px 5px!important;
  border-radius:4px!important;
  box-decoration-break:clone!important;
  -webkit-box-decoration-break:clone!important;
}

/* Lamp series: remove the old 4u/33% width that was leaving huge empty areas.
   The gallery itself controls the columns now. */
body:not(.home-page) #content article>.row>div[class*="4u"]{
  width:auto!important;
  min-width:0!important;
  float:none!important;
  padding:0!important;
  margin:0!important;
}
body:not(.home-page) #content article>.row>div[class*="4u"] a.image{
  display:block!important;
  width:100%!important;
  height:auto!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  background:#fff!important;
}
body:not(.home-page) #content article>.row>div[class*="4u"] a.image img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  aspect-ratio:auto!important;
  margin:0!important;
}
/* Lamp gallery: two genuinely large columns on desktop/tablet. */
body:not(.home-page) #content article>.row:has(>div[class*="4u"]){
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:24px!important;
}
@media(max-width:700px){
  body:not(.home-page) #content article>.row:has(>div[class*="4u"]){
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
}

/* ===== v24: Works / portfolio use the same large-gallery treatment as Lamp series ===== */
body:not(.home-page) .case-page #content article>.row{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:24px!important;
  margin:0!important;
}
body:not(.home-page) .case-page #content article>.row>div[class*="6u"]{
  width:auto!important;
  min-width:0!important;
  float:none!important;
  padding:0!important;
  margin:0!important;
}
body:not(.home-page) .case-page #content article>.row>div[class*="6u"] a.image{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  overflow:hidden!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  background:#fff!important;
}
body:not(.home-page) .case-page #content article>.row>div[class*="6u"] a.image img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  aspect-ratio:auto!important;
  margin:0!important;
  border-radius:14px!important;
}
@media(max-width:700px){
  body:not(.home-page) .case-page #content article>.row{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
}
/* ===== v25: case gallery — use the same proven sizing as Lamp, without legacy 6u width rules ===== */
body:not(.home-page) .case-page #content article > .row.case-gallery,
body:not(.home-page) .case-page #content article > .row{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  column-gap:24px!important;
  row-gap:24px!important;
  width:100%!important;
  margin:0!important;
  padding:0!important;
}
body:not(.home-page) .case-page #content article > .row > .case-gallery-item{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
  float:none!important;
}
body:not(.home-page) .case-page #content article > .row > .case-gallery-item > a.image{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:1px solid var(--line)!important;
  border-radius:16px!important;
  background:#fff!important;
  box-shadow:0 12px 30px rgba(20,45,28,.07)!important;
}
body:not(.home-page) .case-page #content article > .row > .case-gallery-item > a.image img{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  margin:0!important;
  border:0!important;
  border-radius:14px!important;
}
@media(max-width:700px){
  body:not(.home-page) .case-page #content article > .row{
    grid-template-columns:1fr!important;
    gap:18px!important;
  }
}


/* ===== v26: case pages use more of the available desktop width =====
   Keep the same two-column gallery and preserve each image's original aspect ratio.
   The wider container only gives the gallery more horizontal room; it does NOT stretch
   image height independently. */
@media(min-width:901px){
  body.case-page #main-wrapper>.wrapper>.inner>.container{
    width:min(calc(100% - 48px),1450px)!important;
    max-width:1450px!important;
    margin-inline:auto!important;
  }
  body.case-page #content article>.row.case-gallery,
  body.case-page #content article>.row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:24px!important;
    row-gap:24px!important;
  }
  body.case-page #content article>.row>.case-gallery-item,
  body.case-page #content article>.row>.case-gallery-item>a.image,
  body.case-page #content article>.row>.case-gallery-item>a.image img{
    width:100%!important;
    max-width:none!important;
  }
  body.case-page #content article>.row>.case-gallery-item>a.image img{
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
    aspect-ratio:auto!important;
  }
}
@media(min-width:901px) and (max-width:1500px){
  body.case-page #main-wrapper>.wrapper>.inner>.container{
    width:calc(100% - 40px)!important;
  }
}


/* ===== v27: case content container truly expands on desktop =====
   The previous v26 widened the inner container's child, but the parent .inner
   was still capped at 1180px. This override removes that bottleneck only for
   case pages. Gallery images keep their native aspect ratio. */
@media(min-width:901px){
  body.case-page #main-wrapper>.wrapper>.inner{
    width:min(calc(100% - 48px),1600px)!important;
    max-width:1600px!important;
    margin:0 auto!important;
    padding:0!important;
  }
  body.case-page #main-wrapper>.wrapper>.inner>.container{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }
  body.case-page #content article>.row{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    column-gap:24px!important;
    row-gap:24px!important;
  }
  body.case-page #content article>.row>.case-gallery-item{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
  }
  body.case-page #content article>.row>.case-gallery-item>a.image,
  body.case-page #content article>.row>.case-gallery-item>a.image img{
    width:100%!important;
    max-width:none!important;
  }
  body.case-page #content article>.row>.case-gallery-item>a.image img{
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
    aspect-ratio:auto!important;
  }
}
@media(max-width:900px){
  body.case-page #main-wrapper>.wrapper>.inner{
    width:min(calc(100% - 28px),1180px)!important;
    max-width:none!important;
    margin:0 auto!important;
  }
}

/* ===== v28: apply the successful V27 content-width behavior across inner pages =====
   Expand the main inner canvas on desktop so product/company pages can use more
   available screen space. Keep each image's natural aspect ratio; no fixed-height
   stretching is introduced. The existing sidebar/content structure remains intact. */
@media(min-width:901px){
  body:not(.home-page) #main-wrapper>.wrapper>.inner{
    width:min(calc(100% - 48px),1600px)!important;
    max-width:1600px!important;
    margin:0 auto!important;
    padding:0!important;
  }
  body:not(.home-page) #main-wrapper>.wrapper>.inner>.container{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }

  /* Product image blocks: use the extra width while preserving proportions. */
  body.product-page #content article>.row>img,
  body.product-page #content article>.row>a.image img,
  body.product-page #content article>.row>.4u img,
  body.product-page #content .box.excerpt .image.left img,
  body.product-page #content .network-detail-row .image img{
    max-width:100%!important;
    height:auto!important;
    max-height:none!important;
    object-fit:contain!important;
  }

  /* Product gallery cards should fill their grid cells rather than leaving
     the old 4u width restriction visible. */
  body.product-page #content article>.row>.4u{
    width:auto!important;
    min-width:0!important;
  }
  body.product-page #content article>.row>.4u a.image{
    width:100%!important;
    max-width:none!important;
  }
}

@media(max-width:900px){
  body:not(.home-page) #main-wrapper>.wrapper>.inner{
    width:min(calc(100% - 28px),1600px)!important;
    max-width:none!important;
    margin:0 auto!important;
  }
}


/* V30 SEO structure */
#header .site-logo-heading{margin:0!important;padding:0!important;display:block!important}
.seo-page-title{margin:0 0 14px!important;font-size:clamp(30px,3.2vw,44px)!important;line-height:1.25!important;letter-spacing:.03em!important;color:#243f2c!important}
.seo-intro{margin:0 0 28px!important;max-width:920px!important;font-size:16px!important;line-height:1.9!important;color:#4b5a50!important}
.home-seo-intro{padding:16px 24px 18px!important;background:#f4f7f3!important;border-top:1px solid #e4ebe5!important}
.home-seo-intro-inner{width:min(100% - 48px,1180px)!important;margin:0 auto!important}
.home-seo-intro h1{margin:0 0 4px!important;color:#243f2c!important;font-size:11px!important;line-height:1.5!important;letter-spacing:.02em!important}
.home-seo-intro p{margin:0!important;max-width:1050px!important;color:#536158!important;font-size:11px!important;line-height:1.6!important}
.home-seo-links{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:4px!important;margin-top:5px!important;font-size:11px!important;line-height:1.5!important}
.home-seo-links a{display:inline!important;padding:0!important;border:0!important;border-radius:0!important;color:#4f765a!important;text-decoration:none!important;background:transparent!important;font-size:11px!important}
.home-seo-links a:hover{text-decoration:underline!important}
.home-seo-links span{color:#a8b7ac!important}
@media(max-width:700px){
  .home-seo-intro{padding:14px 18px 16px!important}
  .home-seo-intro-inner{width:100%!important}
  .home-seo-intro h1{font-size:11px!important}
  .home-seo-intro p{font-size:11px!important;line-height:1.6!important}
}