:root{
  --ink:#0d3035;
  --mint:#8bbdb7;
  --paper:#f8f8f5;
  --white:#fff;
  --line:rgba(13,48,53,.12);
  --header-h:88px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Tahoma,"Segoe UI",Arial,sans-serif;overflow-x:hidden}
body.menu-open,body.modal-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font:inherit}
.loader{position:fixed;inset:0;z-index:9999;background:var(--ink);display:grid;place-items:center;transition:opacity .45s ease,visibility .45s ease}
.loader.hidden{opacity:0;visibility:hidden}
.loader-mark{width:64px;height:64px;border:1px solid rgba(255,255,255,.42);border-radius:50%;display:grid;place-items:center;color:white;font:700 17px/1 Arial;animation:pulse 1.05s infinite alternate}
@keyframes pulse{to{transform:scale(1.1);opacity:.45}}
.site-header{height:var(--header-h);position:fixed;inset:0 0 auto 0;z-index:1000;display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:rgba(248,248,245,.94);border-bottom:1px solid var(--line);transition:transform .36s ease,background .25s ease}
.site-header.header-hidden{transform:translateY(-105%)}
.brand{display:flex;direction:ltr;align-items:center;gap:12px}
.brand-text{font:700 14px/1 Arial;letter-spacing:.26em}
.brand-mark{position:relative;width:31px;height:31px;border:2px solid var(--ink);border-radius:50%;display:block}
.brand-mark:before{content:"";position:absolute;right:-2px;top:12px;width:17px;height:17px;background:var(--paper);border-left:2px solid var(--ink);border-top:2px solid var(--ink)}
.brand-mark i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--mint);right:3px;top:3px}
.menu-btn{width:44px;height:44px;border:0;background:transparent;cursor:pointer;display:grid;align-content:center;justify-items:end;gap:8px;padding:0}
.menu-btn span{display:block;height:1px;background:var(--ink);transition:.3s}
.menu-btn span:first-child{width:28px}.menu-btn span:last-child{width:19px}
.menu-open .menu-btn span:first-child{transform:translateY(4.5px) rotate(45deg);width:28px}.menu-open .menu-btn span:last-child{transform:translateY(-4.5px) rotate(-45deg);width:28px}
.menu-overlay{position:fixed;z-index:950;inset:0;background:var(--paper);padding:125px 6vw 70px;opacity:0;visibility:hidden;transform:translateY(-10px);transition:.3s ease;overflow:auto}
.menu-overlay.open{opacity:1;visibility:visible;transform:none}
.menu-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:9vw;max-width:1400px;margin:auto}
.menu-grid h2{font-size:clamp(24px,2.4vw,40px);margin:0 0 24px;font-weight:500}
.menu-list{display:grid;gap:9px}.menu-list.two-col{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:34px}
.menu-list button,.blog-link{border:0;background:transparent;padding:5px 0;text-align:right;color:var(--ink);cursor:pointer;font-size:16px;opacity:.74;transition:.2s}
.menu-list button:hover,.blog-link:hover{opacity:1;transform:translateX(-5px)}.gap-title{margin-top:44px!important}.blog-link{display:inline-block;margin-top:38px;font-size:21px}
main{padding-top:var(--header-h)}
.hero{background:#fff;min-height:calc(100vh - var(--header-h));display:grid;place-items:center}
.hero img{width:min(1024px,100%);height:auto;max-height:calc(100vh - var(--header-h));object-fit:contain}
.service-sheets{background:#fff;padding:0 36px 70px;display:grid;gap:0}
.service-sheets img{width:100%;max-width:1280px;margin:0 auto;height:auto}
.dark-gallery{background:#020606;display:grid;gap:0;padding:0}
.dark-gallery figure{margin:0;overflow:hidden}
.dark-gallery img{width:100%;height:auto;min-height:60vh;object-fit:cover}
/* v3: brand system + one-row horizontal team rail */
.brand-system{background:#fafaf7;min-height:540px;padding:92px 36px 62px;border-top:1px solid rgba(13,48,53,.05)}
.brand-system-inner{max-width:1280px;margin:0 auto;position:relative;min-height:380px;display:grid;grid-template-columns:minmax(420px,.9fr) minmax(520px,1.1fr);gap:60px;direction:ltr}
.palette{display:flex;gap:10px;align-items:flex-start;padding-top:28px;direction:ltr}
.tone{display:block;width:72px;height:72px;border-radius:50%;box-shadow:0 10px 28px rgba(13,48,53,.05)}
.tone-ink{background:#0d3035}.tone-mint{background:#8bbdb7}.tone-gray{background:#d1d6d7}.tone-paper{background:#f8f8f5;border:1px solid rgba(13,48,53,.08)}.tone-white{background:#fff;border:1px solid rgba(13,48,53,.05)}
.brand-copy{direction:rtl;text-align:right;padding-top:0;display:flex;flex-direction:column;align-items:flex-start}
.eyebrow{font:700 11px/1 Arial,sans-serif;letter-spacing:.28em;color:#79b8b2;direction:ltr;align-self:flex-start;margin-bottom:28px}
.brand-copy h2{font-size:clamp(42px,4.4vw,66px);line-height:1.12;font-weight:500;margin:0;letter-spacing:-.03em}
.family-copy{margin-top:auto;padding-top:130px;width:100%}
.family-copy .eyebrow{margin-bottom:26px}
.family-copy h3{font-size:clamp(50px,5vw,76px);line-height:1;font-weight:700;margin:0;letter-spacing:-.035em}
.team-section{background:#fff;padding:0 0 54px;overflow:hidden;border-top:1px solid var(--line)}
.team-viewport{width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab;overscroll-behavior-x:contain;direction:ltr}
.team-viewport::-webkit-scrollbar{display:none}.team-viewport.dragging{cursor:grabbing;scroll-snap-type:none;user-select:none}
.team-track{display:flex;width:max-content;min-width:100%;border-bottom:1px solid var(--line)}
.team-card{width:clamp(310px,25vw,430px);min-width:clamp(310px,25vw,430px);height:560px;scroll-snap-align:start;background:#fff;border-right:1px solid var(--line);cursor:pointer;display:flex;flex-direction:column;transition:background .22s ease;direction:rtl}
.team-card:first-child{border-left:1px solid var(--line)}
.team-card:hover{background:#f8faf8}
.team-media{height:390px;min-height:390px;background:#fff;display:grid;place-items:center;overflow:hidden;padding:0}
.team-media img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.team-card:hover .team-media img{transform:scale(1.025)}
.team-meta{padding:28px 26px 24px;text-align:right;min-height:168px;position:relative}
.team-name{font-size:25px;line-height:1.35;margin:0 0 8px;font-weight:500}.team-role{font-size:13px;line-height:1.7;opacity:.58}.team-code{margin-top:12px;font:700 11px/1 Arial;letter-spacing:.19em;color:var(--mint);direction:ltr;text-align:right}
.team-nav{max-width:1280px;margin:22px auto 0;padding:0 36px;display:grid;grid-template-columns:40px 1fr 40px;align-items:center;gap:16px;direction:ltr}
.team-nav button{width:40px;height:40px;border:1px solid rgba(13,48,53,.25);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;font-size:18px;transition:.2s}.team-nav button:hover{background:var(--ink);color:#fff}
.team-progress{height:1px;background:rgba(13,48,53,.15);position:relative;overflow:hidden}.team-progress span{position:absolute;left:0;top:0;height:1px;width:25%;background:var(--ink);transform-origin:left center;transition:transform .12s linear}
@media(max-width:980px){.brand-system{min-height:470px;padding:72px 24px 52px}.brand-system-inner{grid-template-columns:1fr;min-height:340px;gap:32px}.brand-copy{grid-row:1}.palette{grid-row:2;padding-top:0;gap:8px}.tone{width:64px;height:64px}.family-copy{padding-top:80px}.team-card{width:min(76vw,420px);min-width:min(76vw,420px);height:520px}.team-media{height:355px;min-height:355px}.team-nav{padding:0 20px}}
@media(max-width:560px){.brand-system{padding:58px 20px 42px;min-height:430px}.brand-system-inner{display:flex;flex-direction:column;gap:30px;min-height:330px}.brand-copy h2{font-size:40px}.family-copy{padding-top:68px}.family-copy h3{font-size:52px}.palette{order:2;gap:7px;flex-wrap:nowrap}.tone{width:52px;height:52px}.team-card{width:84vw;min-width:84vw;height:470px}.team-media{height:320px;min-height:320px}.team-name{font-size:22px}.team-meta{padding:22px 20px}.team-nav{grid-template-columns:38px 1fr 38px;gap:12px;padding:0 16px}}

.client-wall{background:#fff;padding:0 0 90px}
.client-grid{max-width:1366px;margin:0 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:#fff}
.client-grid img{width:100%;height:auto;aspect-ratio:337/190;object-fit:cover;background:white}
.footer{background:var(--ink);color:#fff;padding:75px 6vw 60px}
.footer-inner{max-width:1280px;margin:auto;display:grid;grid-template-columns:1.4fr 1fr;gap:70px;align-items:end}
.footer h2{font-size:34px;margin:0 0 25px;font-weight:500}.footer a{display:block;margin:11px 0;font-size:16px}.footer p{line-height:2;opacity:.68;max-width:620px}.footer-brand{text-align:left;direction:ltr}.footer-brand strong{display:block;font:700 34px/1 Arial;letter-spacing:.18em}.footer-brand span{display:block;margin-top:12px;direction:rtl;opacity:.55}
.back-top{position:fixed;right:38px;bottom:28px;width:42px;height:42px;border:2px solid rgba(13,48,53,.65);border-radius:50%;background:rgba(255,255,255,.88);color:var(--ink);z-index:850;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:.25s;font-size:20px;line-height:1}.back-top.show{opacity:1;visibility:visible;transform:none}
.page-modal{position:fixed;z-index:2000;inset:0;background:var(--ink);color:#fff;display:grid;place-items:center;padding:60px;opacity:0;visibility:hidden;transition:.3s}.page-modal.open{opacity:1;visibility:visible}.modal-close{position:absolute;left:30px;top:24px;border:0;background:transparent;color:#fff;font:200 54px/1 Arial;cursor:pointer}.modal-content{width:min(850px,100%)}.modal-kicker{font:700 11px/1.3 Arial;letter-spacing:.22em;color:var(--mint);direction:ltr;text-align:right}.modal-content h2{font-size:clamp(48px,7vw,104px);line-height:.98;margin:15px 0 25px;font-weight:500}.modal-content p{max-width:690px;line-height:2;font-size:17px;color:rgba(255,255,255,.72)}.outline-btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border:1px solid currentColor;margin-top:24px;font-size:14px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .72s ease,transform .72s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:980px){
  :root{--header-h:76px}.site-header{height:76px;padding:0 20px}.menu-overlay{padding:105px 25px 55px}.menu-grid{grid-template-columns:1fr;gap:56px}.menu-list.two-col{grid-template-columns:1fr}.hero{min-height:auto}.service-sheets{padding-inline:0}.dark-gallery img{min-height:0}.client-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-inner{grid-template-columns:1fr}.footer-brand{text-align:right}.back-top{right:18px;bottom:18px}
}
@media(max-width:560px){
  .client-grid{grid-template-columns:1fr 1fr}.client-grid img{aspect-ratio:337/190}.footer{padding:58px 24px}.page-modal{padding:35px 22px}.modal-close{left:18px;top:18px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* =========================================================
   HEADER V5 — exact geometry from user measurements
   ========================================================= */
:root{
  --header-bg:#D0D7D7;
  --header-text:#86B9B2;
  --header-hover:#4A7272;
  --header-top:16px;
  --header-side:24px;
  --header-h:64px;
  --header-inner-x:32px;
  --drawer-w:320px;
  --drawer-pad:24px;
  --menu-font:20px;
}
body{overflow-x:hidden}
body.header-menu-open{overflow:hidden}

.site-header{
  position:fixed !important;
  z-index:1800;
  top:var(--header-top) !important;
  left:var(--header-side) !important;
  right:var(--header-side) !important;
  height:var(--header-h) !important;
  padding:0 var(--header-inner-x) !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
  background:var(--header-bg) !important;
  border:0 !important;
  border-radius:20px !important;
  box-shadow:none !important;
  transform:none !important;
  transition:background-color .22s ease,backdrop-filter .22s ease,-webkit-backdrop-filter .22s ease !important;
  overflow:hidden;
  isolation:isolate;
}
.site-header.compact{
  background:rgba(208,215,215,.50) !important;
  -webkit-backdrop-filter:blur(4px) saturate(108%);
  backdrop-filter:blur(4px) saturate(108%);
}

.header-left{
  order:2;
  display:flex;
  direction:ltr;
  align-items:center;
  gap:24px;
  position:relative;
  z-index:4;
  flex:0 0 auto;
}
.language-switch{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--header-text);
  font:600 11px/1 Arial,sans-serif;
  letter-spacing:.02em;
  user-select:none;
  white-space:nowrap;
}
.language-option{
  border:0;
  background:transparent;
  color:var(--header-text);
  padding:5px 0;
  cursor:pointer;
  transition:color .18s ease,opacity .18s ease;
}
.language-option:hover,.language-option:focus-visible,.language-option.active{color:var(--header-hover)}
.language-option:not(.active){opacity:.78}

.menu-toggle{
  position:relative !important;
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
  box-sizing:border-box !important;
  border:0 !important;
  background:transparent !important;
  display:block !important;
  padding:0 !important;
  margin:0 !important;
  cursor:pointer;
  flex:0 0 24px !important;
  line-height:0 !important;
  font-size:0 !important;
}
.menu-toggle span{
  position:absolute !important;
  left:0 !important;
  width:24px !important;
  height:2px !important;
  min-height:2px !important;
  display:block !important;
  background:var(--header-hover) !important;
  border:0 !important;
  border-radius:999px !important;
  transform:none !important;
  opacity:1 !important;
  margin:0 !important;
  padding:0 !important;
}
.menu-toggle span:nth-child(1){top:3px !important;}
.menu-toggle span:nth-child(2){top:11px !important;}
.menu-toggle span:nth-child(3){top:19px !important;}
.menu-toggle:hover span{background:var(--header-text) !important}

.header-brand{
  order:1;
  direction:ltr;
  width:152px;
  height:64px;
  display:block;
  position:relative;
  z-index:4;
  flex:0 0 152px;
}
.brand-stage{
  position:absolute;
  width:280px;
  height:64px;
  right:0;
  top:0;
  overflow:visible;
}
.brand-full,.brand-motion,.brand-icon{
  position:absolute;
  inset:0;
  width:280px;
  height:64px;
  max-width:none;
  object-fit:contain;
  opacity:0;
  pointer-events:none;
}
.brand-full{opacity:1}
.brand-kicker{
  position:absolute;
  right:119px;
  top:6px;
  z-index:5;
  color:var(--header-hover);
  font:700 6px/1 Arial,sans-serif;
  letter-spacing:.01em;
  white-space:nowrap;
  transition:opacity .08s linear;
}
.site-header.motion-playing .brand-full,
.site-header.motion-playing .brand-icon,
.site-header.motion-playing .brand-kicker{opacity:0}
.site-header.motion-playing .brand-motion{opacity:1}
.site-header.compact:not(.motion-playing) .brand-full,
.site-header.compact:not(.motion-playing) .brand-kicker{opacity:0}
.site-header.compact:not(.motion-playing) .brand-icon{opacity:1}

main#top{padding-top:calc(var(--header-top) + var(--header-h) + 16px) !important}

.menu-backdrop{
  position:fixed;
  z-index:1900;
  inset:0;
  background:rgba(91,107,145,.58);
  opacity:0;
  visibility:hidden;
  transition:opacity .28s ease,visibility .28s ease;
}
.menu-backdrop.open{opacity:1;visibility:visible}
.menu-drawer{
  position:fixed;
  z-index:2000;
  top:0;
  right:0;
  bottom:0;
  width:min(var(--drawer-w),100vw);
  background:#fff;
  transform:translateX(102%);
  transition:transform .38s cubic-bezier(.22,.72,.24,1);
  box-shadow:-1px 0 0 rgba(20,50,55,.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  direction:rtl;
}
.menu-drawer.open{transform:translateX(0)}
.drawer-head{
  flex:0 0 118px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:24px;
  border-bottom:1px solid #eceeee;
}
.drawer-logo-wrap{position:relative;width:152px;direction:ltr;margin-right:auto}
.drawer-logo-wrap img{width:152px;height:auto;display:block}
.drawer-logo-wrap span{
  position:absolute;
  top:-5px;
  left:8px;
  color:var(--header-hover);
  font:700 6px/1 Arial,sans-serif;
}
.drawer-scroll{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:rgba(74,114,114,.45) transparent;
}
.drawer-nav{padding-bottom:24px}
.menu-section{border-bottom:1px solid #eceeee}
.menu-section-trigger{
  width:100%;
  padding:24px;
  border:0;
  background:#fff;
  display:flex;
  direction:ltr;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  color:var(--header-text);
}
.menu-title{
  direction:rtl;
  text-align:right;
  font-size:var(--menu-font);
  font-weight:400;
  line-height:1.35;
  color:var(--header-text);
  transition:color .18s ease;
}
.menu-plus{
  direction:ltr;
  color:var(--header-hover);
  font:300 30px/1 Arial,sans-serif;
  transform:translateY(-1px);
  flex:0 0 auto;
}
.menu-section-trigger:hover .menu-title,.menu-section-trigger:focus-visible .menu-title{color:var(--header-hover)}
.menu-submenu{display:none;background:#f7f8f8}
.menu-section.open .menu-submenu{display:block}
.menu-submenu a{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:24px;
  color:var(--header-text);
  text-align:right;
  font-size:var(--menu-font);
  line-height:1.45;
  border-top:1px solid #eceeee;
  transition:color .18s ease,background .18s ease;
}
.menu-submenu a:hover,.menu-submenu a:focus-visible{color:var(--header-hover);background:#f1f4f4}
.menu-blog{
  padding:24px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  color:var(--header-text);
  font-size:var(--menu-font);
  line-height:1.35;
  border-bottom:1px solid #eceeee;
  transition:color .18s ease;
}
.menu-blog:hover{color:var(--header-hover)}
.menu-close{
  position:fixed;
  z-index:2100;
  top:28px;
  right:calc(min(var(--drawer-w),100vw) + 14px);
  width:48px;
  height:48px;
  border-radius:50%;
  border:2px solid var(--header-hover);
  background:#fff;
  box-shadow:0 2px 8px rgba(30,55,60,.16);
  opacity:0;
  visibility:hidden;
  transform:scale(.9);
  transition:opacity .22s ease,visibility .22s ease,transform .25s ease;
  cursor:pointer;
}
.menu-close.open{opacity:1;visibility:visible;transform:scale(1)}
.menu-close span{position:absolute;left:50%;top:50%;width:24px;height:2px;background:var(--header-hover);border-radius:2px}
.menu-close span:first-child{transform:translate(-50%,-50%) rotate(45deg)}
.menu-close span:last-child{transform:translate(-50%,-50%) rotate(-45deg)}

html[dir="ltr"] .menu-drawer{right:auto;left:0;transform:translateX(-102%)}
html[dir="ltr"] .menu-drawer.open{transform:translateX(0)}
html[dir="ltr"] .menu-title,html[dir="ltr"] .menu-submenu a{direction:ltr;text-align:left}
html[dir="ltr"] .menu-section-trigger{direction:rtl}
html[dir="ltr"] .menu-close{right:auto;left:calc(min(var(--drawer-w),100vw) + 14px)}

@media(max-width:430px){
  .site-header{padding-inline:32px !important}
  .language-switch{font-size:10px;gap:5px}
  .header-left{gap:24px}
  .header-brand{width:140px;flex-basis:140px}
  .brand-stage{transform:scale(.93);transform-origin:right center}
  .brand-kicker{right:111px;top:7px;font-size:5.7px}
}
@media(max-width:375px){
  .site-header{padding-inline:24px !important}
  .language-switch{font-size:9px;gap:4px}
  .header-left{gap:18px}
  .header-brand{width:132px;flex-basis:132px}
  .brand-stage{transform:scale(.88);transform-origin:right center}
  .brand-kicker{right:104px;top:8px;font-size:5.5px}
}
@media(max-width:382px){
  .menu-close{right:auto;left:12px}
  html[dir="ltr"] .menu-close{left:auto;right:12px}
}

/* v6 — clean logo + glass menu treatment */
.brand-kicker,.drawer-logo-wrap>span{display:none !important}

/* Strongly blur the page behind the open menu while keeping it visible. */
.menu-backdrop{
  background:rgba(35,55,62,.16) !important;
  -webkit-backdrop-filter:blur(22px) saturate(82%) brightness(.92) !important;
  backdrop-filter:blur(22px) saturate(82%) brightness(.92) !important;
  transition:opacity .34s ease,visibility .34s ease,-webkit-backdrop-filter .34s ease,backdrop-filter .34s ease !important;
}

/* The drawer itself is translucent glass, not an opaque white sheet. */
.menu-drawer{
  background:linear-gradient(180deg,rgba(250,252,251,.72),rgba(244,248,247,.57)) !important;
  -webkit-backdrop-filter:blur(30px) saturate(128%) !important;
  backdrop-filter:blur(30px) saturate(128%) !important;
  border-left:1px solid rgba(255,255,255,.55) !important;
  box-shadow:-18px 0 42px rgba(18,43,48,.10) !important;
}
.drawer-head{
  background:rgba(255,255,255,.09) !important;
  border-bottom:1px solid rgba(74,114,114,.12) !important;
}
.drawer-logo-wrap{width:152px !important}
.drawer-logo-wrap img{filter:none !important}
.drawer-scroll{
  background:transparent !important;
  scrollbar-color:rgba(74,114,114,.40) transparent !important;
}
.menu-section{
  border-bottom:1px solid rgba(74,114,114,.12) !important;
  background:transparent !important;
}
.menu-section-trigger,
.menu-blog{
  background:rgba(255,255,255,.03) !important;
}
.menu-section-trigger:hover,
.menu-section-trigger:focus-visible,
.menu-blog:hover,
.menu-blog:focus-visible{
  background:rgba(255,255,255,.20) !important;
}
.menu-submenu{
  background:rgba(208,215,215,.14) !important;
}
.menu-submenu a{
  background:transparent !important;
  border-top:1px solid rgba(74,114,114,.10) !important;
}
.menu-submenu a:hover,
.menu-submenu a:focus-visible{
  background:rgba(255,255,255,.20) !important;
}

/* Glass close button so it belongs to the same open-menu surface. */
.menu-close{
  background:rgba(248,250,249,.62) !important;
  -webkit-backdrop-filter:blur(18px) saturate(120%) !important;
  backdrop-filter:blur(18px) saturate(120%) !important;
  box-shadow:0 8px 24px rgba(22,48,53,.12) !important;
}


/* v7 — drawer-only glass: page outside stays clear */
.menu-backdrop{
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* Only the 320px drawer blurs what is directly underneath it. */
.menu-drawer{
  background:rgba(240,245,244,.42) !important;
  -webkit-backdrop-filter:blur(22px) saturate(112%) !important;
  backdrop-filter:blur(22px) saturate(112%) !important;
  border-left:1px solid rgba(74,114,114,.12) !important;
  box-shadow:-10px 0 30px rgba(18,43,48,.06) !important;
}
.drawer-head{
  background:rgba(255,255,255,.06) !important;
}
.menu-section-trigger,
.menu-blog{
  background:rgba(255,255,255,.025) !important;
}
.menu-submenu{
  background:rgba(208,215,215,.10) !important;
}

/* No X button: click anywhere outside the drawer to close it. */
.menu-close{display:none !important}

/* Plus becomes minus while its section is open. */
.menu-plus{
  width:22px;
  text-align:center;
  transition:color .18s ease,transform .18s ease;
}
.menu-section.open .menu-plus{color:var(--header-hover)}

/* =========================================================
   HEADER V8 — translucent from first paint + dropdown under burger
   ========================================================= */
:root{
  --drawer-left:24px;
  --drawer-width-live:320px;
}

/* Keep the same left/right composition in FA / EN / DE / FR. */
.site-header{
  direction:ltr !important;
  padding-left:32px !important;
  padding-right:48px !important;
  background:rgba(208,215,215,.50) !important;
  -webkit-backdrop-filter:blur(8px) saturate(108%) !important;
  backdrop-filter:blur(8px) saturate(108%) !important;
}
.site-header.compact{
  background:rgba(208,215,215,.50) !important;
  -webkit-backdrop-filter:blur(8px) saturate(108%) !important;
  backdrop-filter:blur(8px) saturate(108%) !important;
}
.header-left{order:1 !important}
.header-brand{
  order:2 !important;
  width:105px !important;
  height:24px !important;
  flex:0 0 105px !important;
  align-self:center !important;
}
.brand-stage{
  width:105px !important;
  height:24px !important;
  right:0 !important;
  top:0 !important;
  transform:none !important;
}
.brand-full,.brand-motion,.brand-icon{
  width:105px !important;
  height:24px !important;
  object-fit:contain !important;
}

/* The menu is a 320px glass dropdown below the hamburger, not a side sheet. */
.menu-backdrop{
  z-index:1900 !important;
  background:transparent !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
.menu-drawer,
html[dir="ltr"] .menu-drawer,
html[dir="rtl"] .menu-drawer{
  z-index:2000 !important;
  top:calc(var(--header-top) + var(--header-h) + 8px) !important;
  left:var(--drawer-left) !important;
  right:auto !important;
  bottom:auto !important;
  width:var(--drawer-width-live) !important;
  max-height:calc(100dvh - var(--header-top) - var(--header-h) - 24px) !important;
  border-radius:20px !important;
  overflow:hidden !important;
  transform:translateY(-10px) scale(.985) !important;
  transform-origin:top left !important;
  opacity:0 !important;
  visibility:hidden !important;
  background:rgba(240,245,244,.42) !important;
  -webkit-backdrop-filter:blur(22px) saturate(112%) !important;
  backdrop-filter:blur(22px) saturate(112%) !important;
  border:1px solid rgba(74,114,114,.12) !important;
  box-shadow:0 14px 38px rgba(18,43,48,.10) !important;
  transition:opacity .24s ease,transform .30s cubic-bezier(.22,.72,.24,1),visibility .24s ease !important;
}
.menu-drawer.open,
html[dir="ltr"] .menu-drawer.open,
html[dir="rtl"] .menu-drawer.open{
  transform:translateY(0) scale(1) !important;
  opacity:1 !important;
  visibility:visible !important;
}
.drawer-head{
  flex:0 0 auto !important;
  min-height:118px !important;
  padding:18px 24px !important;
}
.drawer-logo-wrap{
  width:152px !important;
  margin:0 0 0 auto !important;
  direction:ltr !important;
}
.drawer-logo-wrap img{
  width:152px !important;
  height:auto !important;
  max-height:84px !important;
  object-fit:contain !important;
  object-position:right center !important;
}
.drawer-scroll{max-height:calc(100dvh - var(--header-top) - var(--header-h) - 24px - 118px) !important}

/* Language choice changes text direction, not the physical menu location. */
html[dir="ltr"] .drawer-nav{direction:ltr}
html[dir="rtl"] .drawer-nav{direction:rtl}
html[dir="ltr"] .menu-title,html[dir="ltr"] .menu-submenu a,html[dir="ltr"] .menu-blog{
  direction:ltr !important;text-align:left !important;
}
html[dir="rtl"] .menu-title,html[dir="rtl"] .menu-submenu a,html[dir="rtl"] .menu-blog{
  direction:rtl !important;text-align:right !important;
}

/* Disable older breakpoint scaling so logo size stays stable during its motion. */
@media(max-width:430px){
  .site-header{padding-left:32px !important;padding-right:48px !important}
  .header-brand{width:105px !important;flex-basis:105px !important;height:24px !important}
  .brand-stage{width:105px !important;height:24px !important;transform:none !important}
  .brand-full,.brand-motion,.brand-icon{width:105px !important;height:24px !important}
}
@media(max-width:375px){
  .site-header{padding-left:32px !important;padding-right:48px !important}
  .header-left{gap:18px !important}
  .language-switch{font-size:9px !important;gap:4px !important}
  .header-brand{width:105px !important;flex-basis:105px !important;height:24px !important}
  .brand-stage{width:105px !important;height:24px !important;transform:none !important}
}

/* =========================================================
   HEADER V9 — requested spacing + stable scrollbar + RTL menu logo alignment
   ========================================================= */

/* Keep the page scrollbar visible while the dropdown is open so the layout never jumps. */
html{overflow-y:scroll !important;scrollbar-gutter:stable}
body.header-menu-open{overflow-x:hidden !important;overflow-y:visible !important}

/* Header logo: 64px from the right edge, 16px top/bottom inside a 64px header. */
.site-header,
.site-header.compact{
  padding-left:32px !important;
  padding-right:64px !important;
}
.header-brand{
  width:140px !important;
  height:32px !important;
  flex:0 0 140px !important;
  align-self:center !important;
}
.brand-stage,
.brand-full,
.brand-motion,
.brand-icon{
  width:140px !important;
  height:32px !important;
}
.brand-stage{
  right:0 !important;
  top:0 !important;
  transform:none !important;
}
.brand-full,.brand-motion,.brand-icon{
  object-fit:contain !important;
  object-position:right center !important;
}

/* In Persian, mirror the menu's Bermor logo to the left side of the dropdown. */
html[dir="rtl"] .drawer-logo-wrap{
  margin-left:0 !important;
  margin-right:auto !important;
}
html[dir="rtl"] .drawer-logo-wrap img{
  object-position:left center !important;
}
html[dir="ltr"] .drawer-logo-wrap{
  margin-left:auto !important;
  margin-right:0 !important;
}
html[dir="ltr"] .drawer-logo-wrap img{
  object-position:right center !important;
}

/* Do not shrink the header logo at phone breakpoints. */
@media(max-width:430px){
  .site-header,.site-header.compact{padding-left:32px !important;padding-right:64px !important}
  .header-brand{width:140px !important;flex-basis:140px !important;height:32px !important}
  .brand-stage,.brand-full,.brand-motion,.brand-icon{width:140px !important;height:32px !important}
}
@media(max-width:375px){
  .site-header,.site-header.compact{padding-left:24px !important;padding-right:64px !important}
  .header-left{gap:14px !important}
  .language-switch{font-size:8.5px !important;gap:3px !important}
  .header-brand{width:140px !important;flex-basis:140px !important;height:32px !important}
  .brand-stage,.brand-full,.brand-motion,.brand-icon{width:140px !important;height:32px !important}
}

/* =========================================================
   HEADER V10 — motion safety padding
   The APNG motion frames include transparent side padding so
   animated strokes never touch the bitmap edge and look clipped.
   ========================================================= */
.header-brand .brand-motion{
  width:152px !important;
  height:32px !important;
  inset:auto !important;
  top:0 !important;
  right:-6px !important;
  left:auto !important;
  object-fit:fill !important;
  object-position:center center !important;
  max-width:none !important;
}
@media(max-width:430px){
  .header-brand .brand-motion{width:152px !important;height:32px !important;right:-6px !important}
}


/* =========================================================
   HEADER V11 — unified logo canvas + WebP motion
   Full logo, motion, and icon now use the exact same 304×64
   transparent canvas. This prevents edge/disposal artifacts.
   ========================================================= */
.header-brand{
  width:140px !important;
  height:32px !important;
  flex:0 0 140px !important;
  overflow:visible !important;
}
.brand-stage{
  width:152px !important;
  height:32px !important;
  right:-6px !important;
  top:0 !important;
  overflow:visible !important;
}
.header-brand .brand-full,
.header-brand .brand-motion,
.header-brand .brand-icon{
  width:152px !important;
  height:32px !important;
  inset:auto !important;
  right:0 !important;
  top:0 !important;
  left:auto !important;
  object-fit:fill !important;
  object-position:center center !important;
  max-width:none !important;
  image-rendering:auto !important;
  transform:translateZ(0);
  backface-visibility:hidden;
}
@media(max-width:430px){
  .header-brand{width:140px !important;flex-basis:140px !important;height:32px !important}
  .brand-stage{width:152px !important;height:32px !important;right:-6px !important}
  .header-brand .brand-full,.header-brand .brand-motion,.header-brand .brand-icon{width:152px !important;height:32px !important}
}
@media(max-width:375px){
  .header-brand{width:140px !important;flex-basis:140px !important;height:32px !important}
  .brand-stage{width:152px !important;height:32px !important;right:-6px !important}
  .header-brand .brand-full,.header-brand .brand-motion,.header-brand .brand-icon{width:152px !important;height:32px !important}
}


/* V11b — deterministic sprite motion: no APNG/WebP frame blending or fading. */
.header-brand .brand-motion{
  display:block !important;
  background-repeat:no-repeat !important;
  background-size:152px 2304px !important; /* 72 frames × 32px */
  background-position:0 0;
  background-color:transparent !important;
}


/* =========================================================
   HEADER V13 — V11 base, known-good logo spacing + scrollbar fixes
   ========================================================= */

/* Root stays LTR in every language so the main document scrollbar stays right. */
html{
  direction:ltr !important;
  overflow-y:scroll !important;
  scrollbar-gutter:stable !important;
  scrollbar-width:thin;
  scrollbar-color:#D0D6D6 transparent;
}
body[dir="rtl"]{direction:rtl}
body[dir="ltr"]{direction:ltr}

/* Main page scrollbar. */
html::-webkit-scrollbar{width:10px}
html::-webkit-scrollbar-track{background:transparent}
html::-webkit-scrollbar-thumb{
  background:#D0D6D6;
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
html::-webkit-scrollbar-thumb:hover{background:#4A7272;background-clip:padding-box}

/* Menu scrollbar: same palette and always on the physical right. */
.drawer-scroll{
  direction:ltr !important;
  scrollbar-width:thin !important;
  scrollbar-color:#D0D6D6 transparent !important;
}
.drawer-scroll::-webkit-scrollbar{width:8px}
.drawer-scroll::-webkit-scrollbar-track{background:transparent}
.drawer-scroll::-webkit-scrollbar-thumb{
  background:#D0D6D6;
  border-radius:999px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.drawer-scroll::-webkit-scrollbar-thumb:hover{background:#4A7272;background-clip:padding-box}
.drawer-nav{direction:inherit}
body.lang-rtl .drawer-nav{direction:rtl !important}
body.lang-rtl .menu-title,
body.lang-rtl .menu-submenu a,
body.lang-rtl .menu-blog{direction:rtl !important;text-align:right !important}
body:not(.lang-rtl) .drawer-nav{direction:ltr !important}
body:not(.lang-rtl) .menu-title,
body:not(.lang-rtl) .menu-submenu a,
body:not(.lang-rtl) .menu-blog{direction:ltr !important;text-align:left !important}

/* Preserve the previous Persian menu-logo alignment while root direction remains LTR. */
body.lang-rtl .drawer-logo-wrap{margin-left:0 !important;margin-right:auto !important}
body.lang-rtl .drawer-logo-wrap img{object-position:left center !important}
body:not(.lang-rtl) .drawer-logo-wrap{margin-left:auto !important;margin-right:0 !important}
body:not(.lang-rtl) .drawer-logo-wrap img{object-position:right center !important}

/* Return logo motion to the spacing/size from before the 64px enlargement. */
.site-header,
.site-header.compact{
  padding-left:32px !important;
  padding-right:48px !important;
}
.header-brand{
  width:105px !important;
  height:24px !important;
  flex:0 0 105px !important;
  overflow:visible !important;
  align-self:center !important;
}
.brand-stage{
  width:105px !important;
  height:24px !important;
  right:0 !important;
  top:0 !important;
  transform:none !important;
  overflow:visible !important;
}
.header-brand .brand-full,
.header-brand .brand-motion,
.header-brand .brand-icon{
  width:105px !important;
  height:24px !important;
  inset:auto !important;
  right:0 !important;
  top:0 !important;
  left:auto !important;
  object-fit:contain !important;
  object-position:right center !important;
  max-width:none !important;
  transform:none !important;
}
@media(max-width:430px){
  .site-header,.site-header.compact{padding-left:32px !important;padding-right:48px !important}
  .header-brand{width:105px !important;flex-basis:105px !important;height:24px !important}
  .brand-stage,.header-brand .brand-full,.header-brand .brand-motion,.header-brand .brand-icon{width:105px !important;height:24px !important;right:0 !important}
}
@media(max-width:375px){
  .site-header,.site-header.compact{padding-left:32px !important;padding-right:48px !important}
  .header-brand{width:105px !important;flex-basis:105px !important;height:24px !important}
  .brand-stage,.header-brand .brand-full,.header-brand .brand-motion,.header-brand .brand-icon{width:105px !important;height:24px !important;right:0 !important}
}

/* =========================================================
   HEADER V14 — scrollbar side + track/thumb palette
   User color strings normalized to valid 6-digit CSS hex:
   F5F7F7F -> #F5F7F7, D0D6D6D -> #D0D6D6
   ========================================================= */

/* Main document scrollbar: always on the physical right. */
html{
  direction:ltr !important;
  overflow-y:scroll !important;
  scrollbar-gutter:stable !important;
  scrollbar-width:thin;
  scrollbar-color:#D0D6D6 #F5F7F7;
}
html::-webkit-scrollbar{width:10px}
html::-webkit-scrollbar-track{
  background:#F5F7F7 !important;
}
html::-webkit-scrollbar-thumb{
  background:#D0D6D6 !important;
  border-radius:999px;
  border:2px solid #F5F7F7 !important;
  background-clip:padding-box !important;
}
html::-webkit-scrollbar-thumb:hover{
  background:#86B9B2 !important;
  background-clip:padding-box !important;
}

/* Menu scrollbar: always on the physical left, independent of language. */
.drawer-scroll{
  direction:rtl !important;
  scrollbar-width:thin !important;
  scrollbar-color:#D0D6D6 #F5F7F7 !important;
}
.drawer-scroll::-webkit-scrollbar{width:8px}
.drawer-scroll::-webkit-scrollbar-track{
  background:#F5F7F7 !important;
}
.drawer-scroll::-webkit-scrollbar-thumb{
  background:#D0D6D6 !important;
  border-radius:999px;
  border:2px solid #F5F7F7 !important;
  background-clip:padding-box !important;
}
.drawer-scroll::-webkit-scrollbar-thumb:hover{
  background:#4A7272 !important;
  background-clip:padding-box !important;
}

/* Keep menu text direction controlled by the active language only. */
body.lang-rtl .drawer-nav{direction:rtl !important}
body:not(.lang-rtl) .drawer-nav{direction:ltr !important}

/* =========================================================
   HEADER V15 — requested scrollbar/menu palette only
   ========================================================= */
:root{
  --scroll-track:#F5F7F7;
  --scroll-thumb:#D0D7D7; /* exact solid (100% opacity) header color */
  --scroll-thumb-hover:#4A7272; /* same as header logo */
}

/* Main page scrollbar: right side retained from v14. */
html{
  scrollbar-color:var(--scroll-thumb) var(--scroll-track) !important;
}
html::-webkit-scrollbar-track{
  background:var(--scroll-track) !important;
}
html::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb) !important;
  border-color:var(--scroll-track) !important;
}
html::-webkit-scrollbar-thumb:hover{
  background:var(--scroll-thumb-hover) !important;
}

/* Menu scrollbar: left side retained from v14. */
.drawer-scroll{
  scrollbar-color:var(--scroll-thumb) var(--scroll-track) !important;
}
.drawer-scroll::-webkit-scrollbar-track{
  background:var(--scroll-track) !important;
}
.drawer-scroll::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb) !important;
  border-color:var(--scroll-track) !important;
}
.drawer-scroll::-webkit-scrollbar-thumb:hover{
  background:var(--scroll-thumb-hover) !important;
}

/* Menu panel background now matches the scrollbar track background. */
.menu-drawer,
html[dir="ltr"] .menu-drawer,
html[dir="rtl"] .menu-drawer{
  background:var(--scroll-track) !important;
}


/* =========================================================
   HEADER V16 — exact scrollbar hover sample + scroll progress button
   ========================================================= */
:root{
  --scroll-track:#F5F7F7;
  --scroll-thumb:#D0D7D7;
  --scroll-thumb-hover:#4A7271; /* sampled from the supplied reference screenshot */
}

/* Native scrollbars: use solid colors (no inset border that changes the perceived shade). */
html{
  scrollbar-color:var(--scroll-thumb) var(--scroll-track) !important;
}
html::-webkit-scrollbar{width:10px !important}
html::-webkit-scrollbar-track{background:var(--scroll-track) !important}
html::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb) !important;
  border:0 !important;
  border-radius:999px !important;
  background-clip:border-box !important;
}
html::-webkit-scrollbar-thumb:hover{
  background:var(--scroll-thumb-hover) !important;
  border:0 !important;
}

.drawer-scroll{
  scrollbar-color:var(--scroll-thumb) var(--scroll-track) !important;
}
.drawer-scroll::-webkit-scrollbar{width:8px !important}
.drawer-scroll::-webkit-scrollbar-track{background:var(--scroll-track) !important}
.drawer-scroll::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb) !important;
  border:0 !important;
  border-radius:999px !important;
  background-clip:border-box !important;
}
.drawer-scroll::-webkit-scrollbar-thumb:hover{
  background:var(--scroll-thumb-hover) !important;
  border:0 !important;
}

/* Circular scroll-to-top control with page progress ring. */
.back-top{
  position:fixed !important;
  right:28px !important;
  bottom:28px !important;
  width:48px !important;
  height:48px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:rgba(245,247,247,.92) !important;
  color:var(--scroll-thumb-hover) !important;
  display:grid !important;
  place-items:center !important;
  z-index:850 !important;
  cursor:pointer !important;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .22s ease,visibility .22s ease,transform .22s ease,background .2s ease;
  box-shadow:0 1px 6px rgba(20,54,58,.08);
}
.back-top.show{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}
.back-top:hover{background:#fff !important}
.back-top-progress{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:rotate(-90deg);
  pointer-events:none;
}
.back-top-track,
.back-top-value{
  fill:none;
  stroke-width:2.5;
}
.back-top-track{stroke:#D0D7D7}
.back-top-value{
  stroke:var(--scroll-thumb-hover);
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transition:stroke-dashoffset .08s linear;
}
.back-top-arrow{
  position:relative;
  z-index:1;
  font:400 22px/1 Arial,sans-serif;
  color:var(--scroll-thumb-hover);
  transform:translateY(-1px);
}
@media(max-width:560px){
  .back-top{right:18px !important;bottom:18px !important;width:44px !important;height:44px !important}
}

/* =========================================================
   HEADER V17 — deterministic custom scrollbars + exact up control
   ========================================================= */
:root{
  --scroll-track:#F5F7F7;
  --scroll-thumb:#D0D7D7;
  --scroll-thumb-hover:#4A7271;
}

/* Keep native scrollbar mechanics/gutter, but make the native paint invisible.
   Our own bars below provide identical colors on Chromium/Safari/Firefox. */
html{
  overflow-y:scroll !important;
  scrollbar-gutter:stable !important;
  scrollbar-color:transparent transparent !important;
}
html::-webkit-scrollbar{width:10px !important;height:10px !important}
html::-webkit-scrollbar-track,
html::-webkit-scrollbar-thumb{background:transparent !important;border:0 !important}

.drawer-scroll{
  scrollbar-color:transparent transparent !important;
}
.drawer-scroll::-webkit-scrollbar{width:8px !important;height:8px !important}
.drawer-scroll::-webkit-scrollbar-track,
.drawer-scroll::-webkit-scrollbar-thumb{background:transparent !important;border:0 !important}

.custom-scrollbar{
  position:fixed;
  z-index:2200;
  background:var(--scroll-track);
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}
.custom-scrollbar-page{
  top:0;
  right:0;
  bottom:0;
  width:10px;
}
.custom-scrollbar-thumb{
  position:absolute;
  left:0;
  right:0;
  top:0;
  min-height:32px;
  border-radius:999px;
  background:var(--scroll-thumb);
  transition:background-color .14s ease;
  cursor:pointer;
}
.custom-scrollbar-thumb:hover,
.custom-scrollbar.dragging .custom-scrollbar-thumb{
  background:var(--scroll-thumb-hover);
}

/* Menu scrollbar is always on the physical LEFT in every language. */
.menu-drawer{position:fixed !important}
.custom-scrollbar-menu{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:auto;
  width:8px;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease,visibility .18s ease;
}
.menu-drawer.open .custom-scrollbar-menu{
  opacity:1;
  visibility:visible;
}

/* Exact reference-like scroll-to-top button: teal filled disc, white chevron,
   and a white progress arc that grows as the user moves down the page. */
.back-top{
  position:fixed !important;
  right:28px !important;
  bottom:28px !important;
  width:48px !important;
  height:48px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:#4B7372 !important;
  color:#fff !important;
  display:grid !important;
  place-items:center !important;
  z-index:2150 !important;
  cursor:pointer !important;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .22s ease,visibility .22s ease,transform .22s ease,background-color .16s ease;
  box-shadow:0 2px 8px rgba(18,55,58,.18) !important;
}
.back-top.show{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
}
.back-top:hover{background:#4A7271 !important}
.back-top-progress{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform:rotate(-90deg);
  pointer-events:none;
}
.back-top-track,
.back-top-value{
  fill:none;
  stroke-width:2.15;
}
.back-top-track{stroke:rgba(255,255,255,.22) !important}
.back-top-value{
  stroke:#fff !important;
  stroke-linecap:round;
  stroke-dasharray:100;
  stroke-dashoffset:100;
  transition:stroke-dashoffset .08s linear;
}
.back-top-chevron{
  position:relative;
  z-index:1;
  width:22px;
  height:22px;
  color:#fff;
  transform:translateY(-1px);
  pointer-events:none;
}
@media(max-width:560px){
  .custom-scrollbar-page{width:8px}
  .custom-scrollbar-menu{width:7px}
  .back-top{right:18px !important;bottom:18px !important;width:44px !important;height:44px !important}
  .back-top-chevron{width:20px;height:20px}
}

/* =========================================================
   HEADER V18 — one scrollbar only + stable geometry on Safari/macOS/iOS
   ========================================================= */
/* Completely suppress native painted scrollbars.  V17 only made them
   transparent, which still leaves Safari/macOS overlay thumbs alive. */
html,
body{
  scrollbar-width:none !important;
  -ms-overflow-style:none !important;
}
html{
  overflow-y:auto !important;
  scrollbar-gutter:auto !important;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.drawer-scroll::-webkit-scrollbar{
  display:none !important;
  width:0 !important;
  height:0 !important;
  background:transparent !important;
}

/* Only our custom page bar is visible on the physical right. */
.custom-scrollbar-page{
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:auto !important;
  width:10px !important;
}

/* The menu bar belongs to the scrollable menu BODY only, not to the logo/header.
   JS writes its top/height from #drawerScroll so the thumb can never hide under
   the rounded drawer top and its size is calculated from the correct track. */
.custom-scrollbar-menu{
  top:0;
  bottom:auto !important;
  left:0 !important;
  right:auto !important;
  width:8px !important;
  height:0;
  z-index:5;
}

.custom-scrollbar-thumb{
  min-height:28px !important;
  background:#D0D7D7 !important;
}
.custom-scrollbar-thumb:hover,
.custom-scrollbar.dragging .custom-scrollbar-thumb{
  background:#4A7271 !important;
}
.custom-scrollbar{
  background:#F5F7F7 !important;
}

@media(max-width:560px){
  .custom-scrollbar-page{width:8px !important}
  .custom-scrollbar-menu{width:7px !important}
}

/* =========================================================
   HEADER V19 — ONLY two isolated fixes
   1) deterministic logo motion frames (no APNG disposal/ghost edge)
   2) menu uses virtual scrolling, so Safari/macOS cannot paint a second thumb
   Everything else intentionally remains from v18.
   ========================================================= */

/* Motion is rendered from a frame sprite whose 280x64 canvas matches the
   existing static full-logo canvas. This removes the right-edge ghost/jump. */
.header-brand .brand-motion{
  background-repeat:no-repeat !important;
  background-size:105px 1728px !important; /* 72 frames × 24px */
  background-position:0 0;
  background-color:transparent !important;
  object-fit:unset !important;
}

/* There is deliberately NO native scroll container inside the dropdown.
   Safari/iOS therefore has no native overlay indicator to draw beside ours. */
.drawer-scroll{
  overflow:hidden !important;
  -webkit-overflow-scrolling:auto !important;
  scrollbar-width:none !important;
  overscroll-behavior:contain !important;
}
.drawer-scroll::-webkit-scrollbar{display:none !important;width:0 !important;height:0 !important}
.drawer-nav{
  will-change:transform;
  transform:translate3d(0,0,0);
}


/* =========================================================
   HEADER V20 — ONLY two surgical fixes on top of v19
   1) Berlog is physically left-aligned in every language.
   2) Logo motion sprite is rendered by a DIV, not a source-less IMG.
      This prevents the browser's broken-image placeholder/box from appearing
      while preserving the exact v19 size, position, timing and sprite frames.
   ========================================================= */
.menu-blog{
  display:block !important;
  width:100% !important;
  text-align:left !important;
  justify-content:initial !important;
}
body.lang-rtl .menu-blog{direction:rtl !important}
body:not(.lang-rtl) .menu-blog{direction:ltr !important}

.header-brand .brand-motion{
  display:block !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}


/* =========================================================
   HEADER V21 — surgical fixes only
   1) Berlog physically aligned to the left.
   2) Logo motion sprite is allowed to render; no other layout changes.
   ========================================================= */
.menu-blog{
  direction:ltr !important;
  text-align:left !important;
  display:flex !important;
  justify-content:flex-start !important;
}
.header-brand .brand-motion{
  background-repeat:no-repeat !important;
  background-size:105px 1728px !important;
  background-position:0 0;
  background-color:transparent !important;
}


/* =========================================================
   HEADER V22 — three isolated corrections only
   1) Berlog is physically left-aligned, including Persian.
   2) Logo motion uses the exact known-good v8 280×64 APNG files.
   3) Persian menu labels use the requested joining/half-space.
   No other v21 geometry/scroll/menu behavior is changed.
   ========================================================= */
body.lang-rtl .drawer-nav > .menu-blog,
body:not(.lang-rtl) .drawer-nav > .menu-blog,
.drawer-nav > .menu-blog{
  display:block !important;
  width:100% !important;
  text-align:left !important;
  justify-content:initial !important;
  margin-left:0 !important;
  margin-right:0 !important;
}
body.lang-rtl .drawer-nav > .menu-blog{direction:rtl !important;}
body:not(.lang-rtl) .drawer-nav > .menu-blog{direction:ltr !important;}

/* Exact v8 motion rendering: image source, no sprite/background layer. */
.header-brand .brand-motion{
  background:none !important;
  background-image:none !important;
  object-fit:contain !important;
  object-position:right center !important;
  overflow:visible !important;
}

/* =========================================================
   HEADER V23 — two isolated menu-behavior fixes only
   1) Persian parent rows mirror correctly: + on the physical left,
      title on the physical right, so submenu labels line up underneath.
   2) No geometry, color, scrollbar or logo-motion styles are changed.
   ========================================================= */
body.lang-rtl .menu-section-trigger{
  direction:ltr !important;
}
body.lang-rtl .menu-section-trigger .menu-title{
  flex:1 1 auto !important;
  text-align:right !important;
  direction:rtl !important;
}


/* =========================================================
   HEADER V24 — ONLY requested corrections on top of v23
   1) Persian Berlog aligns to the physical RIGHT.
   2) Logo motion uses the newly supplied main v2 source.
      The motion canvas is 304×64: the existing logo occupies the exact
      same 130..280 / 13..52 area as the static 280×64 logo, while the
      extra 24 transparent pixels on the right prevent motion clipping.
      At 114×24 with right:-9px, the visible logo geometry remains exactly
      aligned with the current 105×24 static logo.
   ========================================================= */
body.lang-rtl .drawer-nav > .menu-blog{
  direction:rtl !important;
  text-align:right !important;
}

.header-brand .brand-motion{
  width:114px !important;
  height:24px !important;
  right:-9px !important;
  left:auto !important;
  top:0 !important;
  object-fit:fill !important;
  object-position:center center !important;
  max-width:none !important;
  overflow:visible !important;
  background:none !important;
  background-image:none !important;
}


/* =========================================================
   V25 — requested menu-state reset + corrected portfolio typography only
   ========================================================= */
.menu-submenu .portfolio-initial{
  font-weight:500 !important;
}

/* V27 — keep spaces in Latin portfolio labels while bolding initials. */
.menu-submenu .portfolio-label{display:inline;white-space:normal}


/* =========================================================
   V28 — submenu Latin initials only
   - Same medium emphasis in Portfolio, Agencies and Contact submenus.
   - Reduced from 700 Bold to 500 Medium as requested.
   - Persian labels remain unchanged.
   ========================================================= */
.menu-submenu .portfolio-initial{font-weight:500 !important;}

/* =========================================================
   HERO V30 — pattern only. Header intentionally untouched.
   New transparent pattern begins exactly 32px below header.
   ========================================================= */
.hero{
  min-height:auto !important;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:16px; /* main already starts 16px below header: total gap = 32px */
  background:#fff;
}
.hero-pattern{
  display:block;
  width:min(1024px,100%);
  height:auto;
  object-fit:contain;
  background:transparent;
}
/* The former pattern is baked into the old hero artwork.
   Crop only that top band, leaving the title/artwork below unchanged. */
.hero-main-crop{
  position:relative;
  width:min(1024px,100%);
  aspect-ratio:1024 / 711;
  overflow:hidden;
}
.hero-main-image{
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  max-width:none;
  height:auto;
  transform:translateY(-15.56%);
  object-fit:contain;
}


/* =========================================================
   HERO V31 — copy beneath the new pattern.
   Header/menu styles are intentionally untouched.
   ========================================================= */
.hero-copy{
  margin-top:64px;
  width:min(1024px,100%);
  text-align:center;
  direction:rtl;
  font-family:Tahoma,"Segoe UI",Arial,sans-serif;
}
.hero-copy h1{
  margin:0;
  color:#4A7272;
  font-size:clamp(38px,4.1vw,56px);
  line-height:1.08;
  font-weight:700;
}
.hero-copy p{
  margin:8px 0 0;
  color:#042630;
  font-size:clamp(17px,1.55vw,22px);
  line-height:1.35;
  font-weight:700;
}
/* Keep only the lower artwork from the legacy hero image so its baked-in
   old pattern/title do not duplicate the new live copy above. */
.hero-main-crop{
  margin-top:28px;
  position:relative;
  width:min(1024px,100%);
  aspect-ratio:1024 / 442;
  overflow:hidden;
}
.hero-main-image{
  position:absolute;
  inset:0 auto auto 0;
  width:100%;
  max-width:none;
  height:auto;
  transform:translateY(-47.5%);
  object-fit:contain;
}
@media(max-width:560px){
  .hero-copy{margin-top:64px;padding-inline:18px}
  .hero-copy h1{font-size:38px}
  .hero-copy p{font-size:17px}
  .hero-main-crop{margin-top:24px}
}


/* =========================================================
   HERO V32 — user-provided bottom artwork + transparent tagline motion.
   Header and menu intentionally untouched.
   ========================================================= */
.hero{
  min-height:auto !important;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:16px; /* main starts 16px below header => total 32px below header */
  background:#fff;
}
.hero-pattern{
  display:block;
  width:min(1024px,100%);
  height:auto;
  object-fit:contain;
  background:transparent;
}
.hero-copy{display:none !important;}
.hero-tagline-wrap{
  width:min(1024px,100%);
  margin-top:32px;
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  direction:ltr;
}
.hero-tagline-motion{
  display:block;
  width:min(620px,68vw);
  max-width:100%;
  height:auto;
  background:transparent;
  object-fit:contain;
}
.hero-main-crop{
  margin-top:32px;
  width:min(1024px,100%);
  aspect-ratio:auto;
  overflow:visible;
  position:relative;
}
.hero-main-image{
  position:static;
  display:block;
  width:100%;
  height:auto;
  max-width:none;
  transform:none;
  object-fit:contain;
}
@media(max-width:560px){
  .hero-tagline-wrap{margin-top:24px;padding-inline:0;}
  .hero-tagline-motion{width:min(78vw,520px);}
  .hero-main-crop{margin-top:24px;}
}


/* =========================================================
   V33 — requested surgical changes only
   1) Remove the lower hero image.
   2) Make the transparent tagline start at the left edge and end exactly with the pattern width.
   3) Make the menu more compact (smaller width / shorter height) without changing its behavior.
   Header intentionally untouched.
   ========================================================= */

/* HERO */
.hero{
  align-items:center !important;
  padding-top:16px !important;
}
.hero-pattern{
  width:min(1024px,100%) !important;
  display:block !important;
}
.hero-tagline-wrap{
  width:min(1024px,100%) !important;
  margin-top:32px !important;
  padding:0 !important;
  display:block !important;
  text-align:left !important;
  direction:ltr !important;
  align-self:center !important;
}
.hero-tagline-motion{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
  margin:0 !important;
  background:transparent !important;
  object-fit:contain !important;
}
.hero-main-crop,
.hero-main-image{
  display:none !important;
}

/* MENU — more compact, but same structure/behavior */
:root{
  --drawer-width-live:292px;
  --menu-font:18px;
}
.menu-drawer,
html[dir="ltr"] .menu-drawer,
html[dir="rtl"] .menu-drawer{
  width:var(--drawer-width-live) !important;
  border-radius:18px !important;
}
.drawer-head{
  min-height:92px !important;
  padding:14px 18px !important;
}
.drawer-logo-wrap{
  width:132px !important;
}
.drawer-logo-wrap img{
  width:132px !important;
  max-height:60px !important;
}
.drawer-scroll{
  max-height:calc(100dvh - var(--header-top) - var(--header-h) - 24px - 92px) !important;
}
.menu-section-trigger,
.menu-submenu a,
.menu-blog{
  padding:18px 18px !important;
  font-size:var(--menu-font) !important;
  line-height:1.35 !important;
}
.menu-section-trigger{
  gap:12px !important;
}
.menu-plus{
  font-size:26px !important;
  line-height:1 !important;
}
.menu-submenu a{
  min-height:56px !important;
}
.drawer-nav{
  padding-bottom:14px !important;
}
@media(max-width:560px){
  :root{ --drawer-width-live:276px; --menu-font:17px; }
  .drawer-head{ min-height:84px !important; padding:12px 16px !important; }
  .drawer-logo-wrap{ width:122px !important; }
  .drawer-logo-wrap img{ width:122px !important; max-height:56px !important; }
  .drawer-scroll{ max-height:calc(100dvh - var(--header-top) - var(--header-h) - 22px - 84px) !important; }
  .menu-section-trigger,.menu-submenu a,.menu-blog{ padding:16px 16px !important; }
}


/* =========================================================
   V34 — requested adjustments only
   1) Menu width = 240px (slightly more compact overall).
   2) Tagline smaller, wrapper width 1050px, 32px below pattern, right-aligned so both end on the same right edge.
   Nothing else changed intentionally.
   ========================================================= */

/* HERO alignment update */
.hero-pattern{
  margin-left:auto !important;
  margin-right:0 !important;
}
.hero-tagline-wrap{
  width:min(1050px, calc(100% - 48px)) !important;
  margin-top:32px !important;
  margin-left:auto !important;
  margin-right:0 !important;
  align-self:flex-end !important;
  text-align:right !important;
}
.hero-tagline-motion{
  width:92% !important;
  max-width:92% !important;
  margin-left:auto !important;
  margin-right:0 !important;
  transform:none !important;
}

/* MENU width update */
:root{
  --drawer-width-live:240px;
  --menu-font:17px;
}
.menu-drawer,
html[dir="ltr"] .menu-drawer,
html[dir="rtl"] .menu-drawer{
  width:var(--drawer-width-live) !important;
}
.drawer-head{
  min-height:78px !important;
  padding:12px 14px !important;
}
.drawer-logo-wrap{
  width:108px !important;
}
.drawer-logo-wrap img{
  width:108px !important;
  max-height:48px !important;
}
.drawer-scroll{
  max-height:calc(100dvh - var(--header-top) - var(--header-h) - 22px - 78px) !important;
}
.menu-section-trigger,
.menu-submenu a,
.menu-blog{
  padding:15px 14px !important;
  font-size:var(--menu-font) !important;
  line-height:1.3 !important;
}
.menu-plus{
  font-size:24px !important;
}
.menu-submenu a{
  min-height:50px !important;
}
.drawer-nav{
  padding-bottom:10px !important;
}
@media(max-width:560px){
  :root{ --drawer-width-live:232px; --menu-font:16px; }
  .drawer-head{ min-height:74px !important; padding:11px 13px !important; }
  .drawer-logo-wrap{ width:102px !important; }
  .drawer-logo-wrap img{ width:102px !important; max-height:44px !important; }
  .drawer-scroll{ max-height:calc(100dvh - var(--header-top) - var(--header-h) - 20px - 74px) !important; }
  .menu-section-trigger,.menu-submenu a,.menu-blog{ padding:14px 13px !important; }
}


/* =========================================================
   V35 — requested final correction on top of v34
   - Header untouched.
   - Keep V34 menu height/spacing; only reduce its width.
   - Tagline is smaller, on the RIGHT, 32px below the pattern.
   - Tagline's right edge aligns with the pattern's right edge.
   ========================================================= */

/* HERO — right aligned smaller tagline */
.hero{
  align-items:flex-end !important;
}
.hero-pattern{
  margin-left:auto !important;
  margin-right:0 !important;
}
.hero-tagline-wrap{
  width:min(1050px, calc(100% - 48px)) !important;
  margin-top:32px !important;
  margin-left:auto !important;
  margin-right:0 !important;
  padding:0 !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:flex-start !important;
  align-self:flex-end !important;
  direction:ltr !important;
  text-align:right !important;
  background:transparent !important;
}
.hero-tagline-motion{
  display:block !important;
  width:min(620px, 100%) !important;
  max-width:100% !important;
  height:auto !important;
  margin-left:auto !important;
  margin-right:0 !important;
  object-fit:contain !important;
  transform:none !important;
  background:transparent !important;
}

/* MENU — width only; keep V34 height and vertical rhythm */
:root{
  --drawer-width-live:220px;
}
.menu-drawer,
html[dir="ltr"] .menu-drawer,
html[dir="rtl"] .menu-drawer{
  width:220px !important;
}

@media(max-width:560px){
  :root{ --drawer-width-live:212px; }
  .menu-drawer,
  html[dir="ltr"] .menu-drawer,
  html[dir="rtl"] .menu-drawer{
    width:212px !important;
  }
  .hero-tagline-wrap{
    width:calc(100% - 24px) !important;
    margin-top:32px !important;
  }
  .hero-tagline-motion{
    width:min(520px, 100%) !important;
  }
}

/* =========================================================
   V36 — HERO alignment correction only
   - Pattern centered again.
   - Tagline exactly 32px below pattern.
   - Tagline width = 600px.
   - Tagline right edge aligns with pattern right edge.
   - Header/menu untouched.
   ========================================================= */
.hero{
  align-items:center !important;
}
.hero-pattern{
  width:min(1024px, 100%) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  align-self:center !important;
}
.hero-tagline-wrap{
  width:min(1024px, 100%) !important;
  margin-top:32px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  padding:0 !important;
  display:flex !important;
  justify-content:flex-end !important;
  align-items:flex-start !important;
  align-self:center !important;
  direction:ltr !important;
  text-align:right !important;
  background:transparent !important;
}
.hero-tagline-motion{
  display:block !important;
  width:600px !important;
  max-width:100% !important;
  height:auto !important;
  margin-left:auto !important;
  margin-right:0 !important;
  object-fit:contain !important;
  transform:none !important;
  background:transparent !important;
}
@media(max-width:560px){
  .hero-pattern,
  .hero-tagline-wrap{
    width:calc(100% - 24px) !important;
  }
  .hero-tagline-wrap{
    margin-top:32px !important;
  }
  .hero-tagline-motion{
    width:min(600px, 100%) !important;
  }
}

/* =========================================================
   V37 — hero tagline fine-tune only
   - 20% smaller than v36 (600px -> 480px)
   - visually raised so the visible artwork sits ~32px below the pattern
   - right edge visually aligned to the pattern right edge
   - header/menu untouched
   ========================================================= */
.hero-tagline-wrap{
  width:min(1024px, 100%) !important;
  margin-top:32px !important;
  overflow:visible !important;
}
.hero-tagline-motion{
  width:480px !important;
  max-width:100% !important;
  display:block !important;
  /* compensate for transparent padding baked into the motion */
  transform:translate(62px, -26px) !important;
  transform-origin:top right !important;
}
@media(max-width:560px){
  .hero-tagline-wrap{
    margin-top:32px !important;
  }
  .hero-tagline-motion{
    width:min(480px, 100%) !important;
    transform:translate(26px, -12px) !important;
  }
}

/* =========================================================
   V38 — requested micro-adjustments only
   1) Tagline slightly higher and slightly more left.
   2) Menu background at 50% opacity.
   Everything else unchanged.
   ========================================================= */
.hero-tagline-motion{
  /* was translate(62px, -26px) */
  transform:translate(46px, -40px) !important;
}

/* Keep the menu itself glassy but at 50% background opacity. */
.menu-drawer,
html[dir="ltr"] .menu-drawer,
html[dir="rtl"] .menu-drawer{
  background:rgba(245,247,247,.50) !important;
}

/* Preserve inner surfaces with matching translucency so the whole menu reads as 50% opacity. */
.drawer-head{background:rgba(255,255,255,.05) !important;}
.menu-section-trigger,
.menu-blog{background:rgba(255,255,255,.02) !important;}
.menu-submenu{background:rgba(245,247,247,.50) !important;}

@media(max-width:560px){
  .hero-tagline-motion{
    transform:translate(18px, -18px) !important;
  }
}

/* =========================================================
   V39 — document links + pricing-table removal support
   Header/logo/tagline/menu geometry intentionally preserved from V38.
   ========================================================= */

/* Home document shortcuts: lightweight links only, no PDF is loaded on home. */
.hero-doc-links{
  width:min(1024px,100%) !important;
  margin:4px auto 36px !important;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  gap:14px !important;
  direction:ltr !important;
  position:relative;
  z-index:2;
}
.hero-doc-card{
  width:126px;
  min-height:116px;
  padding:14px 10px 12px;
  border-radius:18px;
  background:#042630;
  border:1px solid rgba(134,185,178,.28);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:9px;
  text-decoration:none;
  box-shadow:0 12px 26px rgba(4,38,48,.08);
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.hero-doc-card:hover,
.hero-doc-card:focus-visible{
  transform:translateY(-3px);
  border-color:#4A7272;
  box-shadow:0 15px 30px rgba(4,38,48,.14);
}
.hero-doc-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  color:#86B9B2;
  transition:color .22s ease,transform .22s ease;
}
.hero-doc-card:hover .hero-doc-icon,
.hero-doc-card:focus-visible .hero-doc-icon{color:#4A7272;transform:scale(1.035)}
.hero-doc-icon svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.hero-doc-label{
  color:#fff;
  font-size:13px;
  line-height:1.45;
  font-weight:500;
  text-align:center;
  direction:rtl;
}
body:not(.lang-rtl) .hero-doc-label{direction:ltr}

/* New direct document items at the end of the menu. */
.menu-doc-link{
  display:flex;
  align-items:center;
  min-height:50px;
  padding:15px 14px;
  color:var(--header-text);
  text-decoration:none;
  border-top:1px solid rgba(74,114,114,.10);
  font-size:var(--menu-font);
  line-height:1.3;
  background:rgba(255,255,255,.02);
  transition:color .2s ease,background .2s ease;
}
.menu-doc-link:hover,.menu-doc-link:focus-visible{color:var(--header-hover);background:rgba(255,255,255,.12)}
body.lang-rtl .menu-doc-link{direction:rtl;text-align:right;justify-content:flex-start}
body:not(.lang-rtl) .menu-doc-link{direction:ltr;text-align:left;justify-content:flex-start}

@media(max-width:560px){
  .hero-doc-links{
    width:calc(100% - 24px) !important;
    margin-top:0 !important;
    gap:10px !important;
  }
  .hero-doc-card{width:112px;min-height:104px;padding:12px 8px 10px;border-radius:16px}
  .hero-doc-icon{width:42px;height:42px}
  .hero-doc-label{font-size:12px}
}

/* =========================================================
   V40 — home document shortcuts only
   - transparent/minimal icon cards
   - smaller footprint
   - moved higher so both shortcuts sit fully inside the first viewport
   - document pages/menu/header/tagline untouched
   ========================================================= */
.hero-doc-links{
  width:min(1024px,100%) !important;
  margin:-74px auto 26px !important;
  gap:12px !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  position:relative !important;
  z-index:3 !important;
}
.hero-doc-card{
  width:92px !important;
  min-height:82px !important;
  padding:6px 4px 5px !important;
  gap:5px !important;
  border:0 !important;
  border-radius:12px !important;
  background:transparent !important;
  box-shadow:none !important;
}
.hero-doc-card:hover,
.hero-doc-card:focus-visible{
  transform:translateY(-2px) !important;
  border-color:transparent !important;
  box-shadow:none !important;
  background:transparent !important;
}
.hero-doc-icon{
  width:34px !important;
  height:34px !important;
  color:#86B9B2 !important;
}
.hero-doc-card:hover .hero-doc-icon,
.hero-doc-card:focus-visible .hero-doc-icon{
  color:#4A7272 !important;
  transform:scale(1.04) !important;
}
.hero-doc-label{
  color:#fff !important;
  font-size:10px !important;
  line-height:1.35 !important;
  font-weight:500 !important;
  padding:3px 6px !important;
  border-radius:8px !important;
  background:rgba(4,38,48,.42) !important;
  white-space:normal !important;
}

@media(max-width:560px){
  .hero-doc-links{
    width:calc(100% - 24px) !important;
    margin:-52px auto 18px !important;
    gap:8px !important;
  }
  .hero-doc-card{
    width:82px !important;
    min-height:74px !important;
    padding:5px 3px 4px !important;
  }
  .hero-doc-icon{
    width:30px !important;
    height:30px !important;
  }
  .hero-doc-label{
    font-size:9px !important;
    padding:2px 5px !important;
  }
}


/* =========================================================
   V41 — home document shortcuts redesign only
   Luxury / minimal / integrated with the Bermor visual system.
   No label boxes, lighter geometry, softer presence in the hero.
   ========================================================= */
.hero-doc-links{
  width:min(1024px,100%) !important;
  margin:-70px auto 22px !important;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  gap:22px !important;
  padding-inline-start:6px !important;
  position:relative !important;
  z-index:3 !important;
}
.hero-doc-card{
  position:relative !important;
  width:118px !important;
  min-height:92px !important;
  padding:0 !important;
  gap:12px !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:flex-start !important;
  text-decoration:none !important;
  isolation:isolate;
}
.hero-doc-card::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:58px;
  height:58px;
  border-radius:18px;
  border:1px solid rgba(134,185,178,.32);
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.08));
  box-shadow:0 10px 28px rgba(4,38,48,.045);
  transition:border-color .22s ease, box-shadow .22s ease, transform .22s ease, background .22s ease;
  z-index:0;
}
.hero-doc-card::after{
  content:"";
  position:absolute;
  top:9px;
  left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid rgba(134,185,178,.12);
  z-index:0;
  transition:border-color .22s ease, transform .22s ease;
}
.hero-doc-card:hover,
.hero-doc-card:focus-visible{
  transform:translateY(-2px) !important;
  border-color:transparent !important;
  box-shadow:none !important;
  background:transparent !important;
}
.hero-doc-card:hover::before,
.hero-doc-card:focus-visible::before{
  border-color:rgba(74,114,114,.48);
  background:linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.12));
  box-shadow:0 14px 32px rgba(4,38,48,.07);
  transform:translateX(-50%) translateY(-1px);
}
.hero-doc-card:hover::after,
.hero-doc-card:focus-visible::after{
  border-color:rgba(74,114,114,.18);
  transform:translateX(-50%) rotate(45deg) scale(1.015);
}
.hero-doc-icon{
  position:relative !important;
  z-index:1 !important;
  width:28px !important;
  height:28px !important;
  margin-top:15px !important;
  display:grid !important;
  place-items:center !important;
  color:#86B9B2 !important;
  transition:color .22s ease, transform .22s ease !important;
}
.hero-doc-card:hover .hero-doc-icon,
.hero-doc-card:focus-visible .hero-doc-icon{
  color:#4A7272 !important;
  transform:translateY(-1px) scale(1.03) !important;
}
.hero-doc-icon svg{
  width:100%;
  height:100%;
  fill:none;
  stroke:currentColor;
  stroke-width:2.1;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.hero-doc-label{
  position:relative !important;
  z-index:1 !important;
  margin-top:18px !important;
  max-width:112px !important;
  color:#4A7272 !important;
  font-size:12px !important;
  line-height:1.48 !important;
  font-weight:500 !important;
  text-align:center !important;
  direction:rtl;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  white-space:normal !important;
  text-shadow:0 1px 0 rgba(255,255,255,.58);
}
.hero-doc-card:hover .hero-doc-label,
.hero-doc-card:focus-visible .hero-doc-label{
  color:#042630 !important;
}
body:not(.lang-rtl) .hero-doc-label{direction:ltr}

@media(max-width:560px){
  .hero-doc-links{
    width:calc(100% - 24px) !important;
    margin:-44px auto 16px !important;
    gap:14px !important;
    padding-inline-start:0 !important;
  }
  .hero-doc-card{
    width:94px !important;
    min-height:82px !important;
    gap:10px !important;
  }
  .hero-doc-card::before{
    width:52px;
    height:52px;
    border-radius:16px;
  }
  .hero-doc-card::after{
    top:8px;
    width:34px;
    height:34px;
  }
  .hero-doc-icon{
    width:24px !important;
    height:24px !important;
    margin-top:14px !important;
  }
  .hero-doc-label{
    margin-top:14px !important;
    max-width:96px !important;
    font-size:10px !important;
    line-height:1.42 !important;
  }
}


/* =========================================================
   V42 — text-only document buttons (requested mockup)
   - 216 × 58 px on desktop
   - #4A7272 background
   - white semibold text, 6px
   - 24px gap
   - no symbols / no decorative frames
   ========================================================= */
.hero-doc-links{
  width:min(1024px,100%) !important;
  margin:-70px auto 22px !important;
  display:flex !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
  gap:24px !important;
  padding-inline-start:0 !important;
  direction:ltr !important;
  position:relative !important;
  z-index:3 !important;
}
.hero-doc-card{
  width:216px !important;
  height:58px !important;
  min-height:58px !important;
  padding:0 18px !important;
  border:0 !important;
  border-radius:14px !important;
  background:#86B9B2 !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
  transform:none !important;
  transition:background-color .2s ease, transform .2s ease !important;
}
.hero-doc-card::before,
.hero-doc-card::after,
.hero-doc-icon{
  display:none !important;
  content:none !important;
}
.hero-doc-card:hover,
.hero-doc-card:focus-visible{
  background:#4A7272 !important;
  transform:translateY(-1px) !important;
  box-shadow:none !important;
}
.hero-doc-label{
  margin:0 !important;
  padding:0 !important;
  max-width:none !important;
  color:#FFFFFF !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  font-size:12px !important;
  line-height:1.2 !important;
  font-weight:600 !important;
  text-align:center !important;
  white-space:nowrap !important;
  text-shadow:none !important;
  direction:rtl;
}
.hero-doc-card:hover .hero-doc-label,
.hero-doc-card:focus-visible .hero-doc-label{
  color:#FFFFFF !important;
}
body:not(.lang-rtl) .hero-doc-label{direction:ltr}

@media(max-width:560px){
  .hero-doc-links{
    width:calc(100% - 24px) !important;
    margin:-44px auto 16px !important;
    gap:12px !important;
  }
  .hero-doc-card{
    width:calc((100% - 12px)/2) !important;
    height:52px !important;
    min-height:52px !important;
    padding:0 10px !important;
    border-radius:12px !important;
  }
  .hero-doc-label{
    font-size:12px !important;
    white-space:normal !important;
  }
}


/* =========================================================
   V45 — document buttons moved 15px lower only
   ========================================================= */
.hero-doc-links{
  margin:-55px auto 22px !important;
}

@media(max-width:560px){
  .hero-doc-links{
    margin:-29px auto 16px !important;
  }
}


/* =========================================================
   V46 — lower-page images removed; team cards text-only
   ========================================================= */
.team-card{
  height:220px !important;
  justify-content:center !important;
}
.team-media{display:none !important;}
.team-meta{
  min-height:0 !important;
  width:100%;
  padding:30px 26px !important;
}
@media(max-width:980px){
  .team-card{height:210px !important;}
}
@media(max-width:560px){
  .team-card{height:195px !important;}
}


/* =========================================================
   V48 — mobile visual parity with desktop
   - iOS/Safari: use transparent PNG fallback instead of VP9 alpha WebM
     (prevents the black rectangle seen on iPhone).
   - keep the hero tagline and document buttons at desktop-like proportions.
   - reduce mobile Brand System typography so its composition matches desktop.
   Desktop/header/menu/floating actions are intentionally untouched.
   ========================================================= */
.hero-tagline-fallback,
.hero-tagline-safari{
  display:none;
}

@media(max-width:768px){
  .hero-pattern,
  .hero-tagline-wrap{
    width:calc(100% - 32px) !important;
  }

  .hero-tagline-motion{
    display:none !important;
  }

  .hero-tagline-fallback{
    display:block !important;
    width:46.875% !important; /* same 480/1024 proportion as desktop */
    max-width:480px !important;
    height:auto !important;
    margin-left:auto !important;
    margin-right:0 !important;
    object-fit:contain !important;
    transform:translate(18px,-18px) !important;
    transform-origin:top right !important;
    background:transparent !important;
  }

  .hero-doc-links{
    width:calc(100% - 32px) !important;
    margin:-18px auto 20px !important;
    gap:10px !important;
    justify-content:flex-start !important;
    align-items:center !important;
  }

  .hero-doc-card{
    flex:0 0 112px !important;
    width:112px !important;
    height:40px !important;
    min-height:40px !important;
    padding:0 10px !important;
    border-radius:10px !important;
  }

  .hero-doc-label{
    font-size:10px !important;
    line-height:1.25 !important;
    white-space:normal !important;
  }
}

@media(max-width:560px){
  .brand-system{
    min-height:360px !important;
    padding:46px 20px 38px !important;
  }
  .brand-system-inner{
    min-height:276px !important;
    gap:24px !important;
  }
  .eyebrow{
    font-size:9px !important;
    letter-spacing:.24em !important;
    margin-bottom:20px !important;
  }
  .brand-copy h2{
    font-size:28px !important;
    line-height:1.18 !important;
  }
  .family-copy{
    padding-top:44px !important;
  }
  .family-copy .eyebrow{
    margin-bottom:18px !important;
  }
  .family-copy h3{
    font-size:34px !important;
    line-height:1.05 !important;
  }
  .palette{
    gap:6px !important;
  }
  .tone{
    width:40px !important;
    height:40px !important;
  }
}

/* =========================================================
   V50 — Page 2: white background + staged service menus
   ========================================================= */
.services-hub{
  --service-muted:#d0d6d6;
  --service-active:#4a7272;
  --service-frame:#86b9b2;
  position:relative;
  min-height:900px;
  padding:92px 48px 120px;
  background:#fff;
  overflow:hidden;
  isolation:isolate;
}
.services-hub::before,
.services-hub::after{display:none!important}

.services-hub__grid{
  position:relative;
  z-index:1;
  max-width:1320px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"graphic identity" "additional ads";
  gap:92px 120px;
  direction:ltr;
  transition:filter .24s ease, opacity .24s ease;
}
.service-tile[data-service="identity"]{grid-area:identity}
.service-tile[data-service="graphic"]{grid-area:graphic}
.service-tile[data-service="ads"]{grid-area:ads}
.service-tile[data-service="additional"]{grid-area:additional}

.service-tile{
  display:flex;
  align-items:center;
  width:100%;
  min-height:152px;
  padding:10px 0;
  border:0;
  background:transparent;
  color:var(--service-muted);
  cursor:pointer;
  transition:color .2s ease, transform .2s ease;
}
.service-tile--right{
  flex-direction:row-reverse;
  justify-content:flex-start;
  gap:28px;
  direction:rtl;
  text-align:right;
}
.service-tile--left{
  flex-direction:row;
  justify-content:flex-start;
  gap:28px;
  direction:ltr;
  text-align:left;
}
.service-tile__icon{
  position:relative;
  display:block;
  flex:0 0 56px;
  width:56px;
  height:56px;
  border:2px solid var(--service-frame);
  border-radius:10px;
  background:var(--service-muted);
  box-shadow:0 0 0 7px #fff;
  transition:background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.service-tile__title{
  display:block;
  color:inherit;
  font:700 clamp(40px,3.4vw,64px)/1.03 Tahoma,"Segoe UI",Arial,sans-serif;
  letter-spacing:-.025em;
  transition:color .2s ease;
}
.service-tile--right .service-tile__title{text-align:right}
.service-tile--left .service-tile__title{text-align:left}
.service-tile:hover,
.service-tile:focus-visible,
.service-tile.is-active{color:var(--service-active)}
.service-tile:hover .service-tile__icon,
.service-tile:focus-visible .service-tile__icon,
.service-tile.is-active .service-tile__icon{
  background:var(--service-active);
  border-color:var(--service-frame);
  transform:translateY(-1px);
}
.service-tile:focus-visible{outline:none}

.services-hub.is-panel-open .services-hub__grid{
  filter:blur(7px);
  opacity:.50;
  pointer-events:none;
  user-select:none;
}
.services-hub__veil{
  position:absolute;
  inset:0;
  z-index:2;
  background:rgba(255,255,255,.02);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .2s ease, visibility .2s ease;
}
.services-hub.is-panel-open .services-hub__veil{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.service-panel{
  position:absolute;
  z-index:4;
  top:170px;
  right:64px;
  width:min(980px,calc(100% - 128px));
  opacity:0;
  visibility:hidden;
  transform:translateY(18px) scale(.99);
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  direction:rtl;
}
.services-hub.is-panel-open .service-panel{
  opacity:1;
  visibility:visible;
  transform:none;
}
.service-panel.panel-align-left{left:64px;right:auto}
.service-panel.panel-align-right{right:64px;left:auto}

.service-panel__close{
  position:absolute;
  top:0;
  inset-inline-start:0;
  width:40px;
  height:40px;
  transform:translateY(-50px);
  border:1px solid var(--service-frame);
  border-radius:12px;
  background:#fff;
  color:var(--service-active);
  font:300 30px/1 Arial,sans-serif;
  cursor:pointer;
}
.service-panel__top{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:18px;
  direction:ltr;
}
.service-panel__square{
  flex:0 0 56px;
  width:56px;
  height:56px;
  border:2px solid var(--service-frame);
  border-radius:10px;
  background:var(--service-active);
  box-shadow:0 0 0 7px #fff;
}
.service-panel__title{
  margin:0;
  color:var(--service-active);
  font:700 clamp(42px,4vw,70px)/1 Tahoma,"Segoe UI",Arial,sans-serif;
  letter-spacing:-.025em;
}

.service-panel__cards{
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:flex-start;
}
.service-panel__card{
  width:min(760px,100%);
  border-radius:26px;
  background:rgba(208,214,214,.78);
  box-shadow:0 16px 34px rgba(13,48,53,.06);
}
.service-panel__card--categories{padding:18px}
.service-panel__card--pricing{
  width:min(960px,100%);
  padding:24px 26px 28px;
}
.service-panel__card[hidden]{display:none!important}

.service-submenu{
  display:grid;
  gap:8px;
}
.service-submenu__item{
  width:100%;
  border:0;
  border-radius:16px;
  background:transparent;
  padding:12px 16px;
  color:#fff;
  text-align:right;
  font:600 clamp(18px,1.6vw,28px)/1.45 Tahoma,"Segoe UI",Arial,sans-serif;
  cursor:pointer;
  transition:background-color .18s ease,color .18s ease,transform .18s ease;
}
.service-submenu__item:hover,
.service-submenu__item:focus-visible,
.service-submenu__item.is-selected{
  color:var(--service-active);
  background:rgba(255,255,255,.42);
  transform:translateX(-3px);
  outline:none;
}

.service-detail__title{
  margin:0 0 18px;
  color:var(--service-active);
  font:700 clamp(22px,2vw,34px)/1.35 Tahoma,"Segoe UI",Arial,sans-serif;
  text-align:right;
}
.service-pricing{
  display:grid;
  gap:12px;
}
.service-pricing__head,
.service-pricing__row{
  display:grid;
  grid-template-columns:minmax(260px,1.75fr) repeat(3,minmax(86px,.55fr));
  gap:14px;
  align-items:center;
}
.service-pricing__head{
  color:var(--service-active);
  font:700 clamp(14px,1.15vw,20px)/1.2 Tahoma,"Segoe UI",Arial,sans-serif;
  padding-bottom:4px;
}
.service-pricing__head span:not(:first-child){text-align:center}
.service-pricing__label{
  color:var(--service-active);
  font:600 clamp(17px,1.45vw,25px)/1.45 Tahoma,"Segoe UI",Arial,sans-serif;
  text-align:right;
}
.service-pricing__value{
  color:#fff;
  font:600 clamp(17px,1.45vw,25px)/1.2 Arial,sans-serif;
  text-align:center;
  direction:ltr;
}

/* Keep the rest of the site, header, and floating contact actions untouched. */
body.service-panel-open{overflow:hidden}
body.service-panel-open .site-header,
body.service-panel-open .bermor-fab-left{filter:none!important;opacity:1!important}

@media(max-width:1120px){
  .services-hub{padding:78px 30px 110px}
  .services-hub__grid{gap:70px 56px}
  .service-tile__title{font-size:clamp(34px,4.7vw,54px)}
  .service-panel{width:min(880px,calc(100% - 72px))}
  .service-panel.panel-align-left{left:36px}
  .service-panel.panel-align-right{right:36px}
}
@media(max-width:820px){
  .services-hub{min-height:0;padding:62px 20px 90px}
  .services-hub__grid{
    grid-template-columns:1fr;
    grid-template-areas:"identity" "graphic" "ads" "additional";
    gap:24px;
    direction:rtl;
  }
  .service-tile,
  .service-tile--right,
  .service-tile--left{
    min-height:92px;
    flex-direction:row-reverse;
    justify-content:flex-start;
    gap:18px;
    direction:rtl;
    text-align:right;
  }
  .service-tile__icon{flex-basis:48px;width:48px;height:48px;border-radius:9px;box-shadow:0 0 0 5px #fff}
  .service-tile__title{font-size:clamp(28px,7vw,42px);text-align:right!important}
  .service-panel,
  .service-panel.panel-align-left,
  .service-panel.panel-align-right{
    position:relative;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%;
    margin-top:24px;
  }
  .service-panel__close{top:10px;inset-inline-start:10px;transform:none}
  .service-panel__top{padding-inline-start:4px;margin-bottom:14px}
  .service-panel__square{flex-basis:48px;width:48px;height:48px;border-radius:9px;box-shadow:0 0 0 5px #fff}
  .service-panel__title{font-size:clamp(30px,7.5vw,46px)}
  .service-panel__card,.service-panel__card--pricing{width:100%;border-radius:22px}
  .service-pricing__head,
  .service-pricing__row{grid-template-columns:minmax(145px,1.55fr) repeat(3,minmax(54px,.55fr));gap:8px}
  .service-pricing__label{font-size:clamp(14px,3.3vw,20px)}
  .service-pricing__value{font-size:clamp(14px,3.2vw,20px)}
  .service-pricing__head{font-size:12px}
}
@media(max-width:480px){
  .services-hub{padding:54px 16px 80px}
  .service-tile__icon{flex-basis:44px;width:44px;height:44px;border-radius:8px}
  .service-tile__title{font-size:clamp(24px,8.4vw,36px)}
  .service-panel__square{flex-basis:44px;width:44px;height:44px;border-radius:8px}
  .service-panel__card--categories{padding:12px}
  .service-panel__card--pricing{padding:18px 14px 20px}
  .service-submenu__item{font-size:16px;padding:11px 12px}
  .service-pricing__head,
  .service-pricing__row{grid-template-columns:minmax(118px,1.45fr) repeat(3,minmax(48px,.52fr));gap:5px}
  .service-pricing__head{font-size:10px}
}
/* V50 scroll safety for long pricing groups */
body.service-panel-open{overflow-x:hidden;overflow-y:auto}
.services-hub{min-height:1080px}
@media(max-width:820px){.services-hub{min-height:0}}

/* =========================================================
   V51 — compact Page 2 so submenu + prices fit without extra scrolling
   ========================================================= */
@media(min-width:821px){
  .services-hub{
    min-height:760px;
    padding:56px 42px 72px;
  }
  .services-hub__grid{
    max-width:1240px;
    gap:38px 78px;
  }
  .service-tile{
    min-height:94px;
    padding:4px 0;
  }
  .service-tile--right,
  .service-tile--left{gap:20px}
  .service-tile__icon{
    flex-basis:44px;
    width:44px;
    height:44px;
    border-radius:8px;
    box-shadow:0 0 0 5px #fff;
  }
  .service-tile__title{
    font-size:clamp(30px,2.55vw,46px);
    line-height:1.02;
  }

  .service-panel{
    top:104px;
    width:min(1120px,calc(100% - 96px));
  }
  .service-panel.panel-align-left{left:48px}
  .service-panel.panel-align-right{right:48px}
  .service-panel__close{
    width:34px;
    height:34px;
    transform:translateY(-40px);
    border-radius:10px;
    font-size:24px;
  }
  .service-panel__top{
    gap:12px;
    margin-bottom:10px;
  }
  .service-panel__square{
    flex-basis:42px;
    width:42px;
    height:42px;
    border-radius:8px;
    box-shadow:0 0 0 5px #fff;
  }
  .service-panel__title{
    font-size:clamp(30px,3vw,48px);
    line-height:1;
  }
  .service-panel__cards{gap:10px}
  .service-panel__card{border-radius:18px}
  .service-panel__card--categories{
    width:min(760px,100%);
    padding:10px;
  }
  .service-panel__card--pricing{
    width:min(1100px,100%);
    padding:12px 16px 14px;
  }
  .service-submenu{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:4px 8px;
  }
  .service-submenu__item{
    border-radius:11px;
    padding:7px 10px;
    font-size:clamp(13px,1.05vw,17px);
    line-height:1.25;
  }
  .service-detail__title{
    margin:0 0 7px;
    font-size:clamp(16px,1.35vw,22px);
    line-height:1.2;
  }
  .service-pricing{gap:4px}
  .service-pricing__head,
  .service-pricing__row{
    grid-template-columns:minmax(390px,2.25fr) repeat(3,minmax(74px,.45fr));
    gap:9px;
  }
  .service-pricing__head{
    font-size:clamp(11px,.9vw,14px);
    line-height:1.05;
    padding-bottom:1px;
  }
  .service-pricing__label{
    font-size:clamp(12px,1vw,16px);
    line-height:1.18;
  }
  .service-pricing__value{
    font-size:clamp(12px,1vw,16px);
    line-height:1.08;
  }
}

@media(max-width:820px){
  .services-hub{padding-top:44px}
  .service-tile{min-height:76px}
  .service-tile__icon{flex-basis:40px;width:40px;height:40px}
  .service-tile__title{font-size:clamp(24px,6.3vw,34px)}
  .service-panel__square{flex-basis:40px;width:40px;height:40px}
  .service-panel__title{font-size:clamp(27px,6.8vw,40px)}
  .service-submenu__item{font-size:14px;padding:8px 9px}
  .service-panel__card--categories{padding:9px}
  .service-panel__card--pricing{padding:13px 10px 15px}
  .service-detail__title{font-size:17px;margin-bottom:8px}
  .service-pricing{gap:5px}
  .service-pricing__label,
  .service-pricing__value{font-size:12px;line-height:1.2}
  .service-pricing__head{font-size:9px}
}

/* =========================================================
   V52 — Page 2 alignment + staged submenu behavior
   - service squares match the 58px short side of desktop document buttons
   - mirrored two-column layout, shifted toward the physical right
   - Page 2 typography uses #4A7272
   ========================================================= */
@media(min-width:821px){
  .services-hub{
    padding:56px 36px 72px !important;
  }
  .services-hub__grid{
    width:min(1040px,calc(100% - 72px)) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:54px !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:42px 78px !important;
    align-items:center !important;
  }
  .service-tile{
    min-height:98px !important;
    width:100% !important;
    padding:8px 0 !important;
    color:#4A7272 !important;
  }
  /* Physical mirror: outer squares, titles toward the center. */
  .service-tile--right{
    direction:ltr !important;
    flex-direction:row-reverse !important;
    justify-content:flex-start !important;
    gap:20px !important;
    text-align:right !important;
  }
  .service-tile--left{
    direction:ltr !important;
    flex-direction:row !important;
    justify-content:flex-start !important;
    gap:20px !important;
    text-align:left !important;
  }
  .service-tile--right .service-tile__title{
    direction:rtl !important;
    text-align:right !important;
    margin-left:auto !important;
  }
  .service-tile--left .service-tile__title{
    direction:rtl !important;
    text-align:left !important;
    margin-right:auto !important;
  }
  .service-tile__icon{
    flex:0 0 58px !important;
    width:58px !important;
    height:58px !important;
    border:2px solid #86B9B2 !important;
    border-radius:11px !important;
    background:#D0D6D6 !important;
    box-shadow:none !important;
  }
  .service-tile__title{
    color:#4A7272 !important;
    font-size:clamp(28px,2.3vw,40px) !important;
    line-height:1.08 !important;
  }
  .service-tile:hover .service-tile__icon,
  .service-tile:focus-visible .service-tile__icon,
  .service-tile.is-active .service-tile__icon{
    background:#4A7272 !important;
    border-color:#86B9B2 !important;
  }
  .service-panel__square{
    flex-basis:58px !important;
    width:58px !important;
    height:58px !important;
    border:2px solid #86B9B2 !important;
    border-radius:11px !important;
    box-shadow:none !important;
  }
  .service-panel__title{
    color:#4A7272 !important;
  }
  .service-submenu__item,
  .service-submenu__item:hover,
  .service-submenu__item:focus-visible,
  .service-submenu__item.is-selected,
  .service-detail__title,
  .service-pricing__head,
  .service-pricing__label,
  .service-pricing__value{
    color:#4A7272 !important;
  }
  .service-submenu__item{
    background:transparent !important;
  }
  .service-submenu__item:hover,
  .service-submenu__item:focus-visible,
  .service-submenu__item.is-selected{
    background:rgba(255,255,255,.42) !important;
  }
}

@media(max-width:820px){
  .service-tile,
  .service-tile--right,
  .service-tile--left{
    color:#4A7272 !important;
  }
  .service-tile__title,
  .service-submenu__item,
  .service-submenu__item:hover,
  .service-submenu__item:focus-visible,
  .service-submenu__item.is-selected,
  .service-detail__title,
  .service-pricing__head,
  .service-pricing__label,
  .service-pricing__value{
    color:#4A7272 !important;
  }
}

/* =========================================================
   V53 — Page 2 symmetric outer spacing + Page 3 framed video
   ========================================================= */
@media(min-width:821px){
  .services-hub__grid{
    width:min(1040px,calc(100% - 108px)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }
}

.showreel-section{
  background:#fff;
  padding:72px 0 96px;
  min-height:520px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-top:1px solid rgba(13,48,53,.04);
}
.showreel-frame{
  position:relative;
  width:min(100%,2048px);
  aspect-ratio:2048/617;
  background:#fff url('assets/page3/video-demo.jpg') center/100% 100% no-repeat;
  overflow:hidden;
}
.showreel-video{
  position:absolute;
  left:32.15%;
  top:8.4%;
  width:35.7%;
  height:83.1%;
  display:block;
  background:#000;
  object-fit:cover;
  border:0;
  z-index:2;
}
.showreel-play{
  position:absolute;
  left:32.15%;
  top:8.4%;
  width:35.7%;
  height:83.1%;
  z-index:3;
  display:grid;
  place-items:center;
  border:0;
  background:#000;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .2s ease,visibility .2s ease;
}
.showreel-play__triangle{
  width:0;
  height:0;
  border-top:44px solid transparent;
  border-bottom:44px solid transparent;
  border-left:72px solid #86B9B2;
  transform:translateX(8px);
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.08));
}
.showreel-frame.is-playing .showreel-play{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}
.showreel-frame.is-playing .showreel-video{cursor:pointer}
@media(max-width:820px){
  .showreel-section{padding:44px 0 64px;min-height:0}
  .showreel-frame{width:100%;aspect-ratio:2048/617}
  .showreel-play__triangle{
    border-top-width:24px;
    border-bottom-width:24px;
    border-left-width:40px;
    transform:translateX(5px);
  }
}

/* =========================================================
   V54 — Page 2 interaction polish
   ========================================================= */
/* Four main squares: requested normal/hover colors. */
.service-tile__icon{
  background:#D0D6D6 !important;
}
.service-tile:hover .service-tile__icon,
.service-tile:focus-visible .service-tile__icon,
.service-tile.is-active .service-tile__icon{
  background:#4A7272 !important;
}

/* After opening a service/subcategory, fade Page 2 to 50% without blur. */
.services-hub.is-panel-open .services-hub__grid{
  filter:none !important;
  opacity:.50 !important;
}
.services-hub__veil{
  background:rgba(255,255,255,.50) !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
.services-hub.is-panel-open .services-hub__veil{
  opacity:1 !important;
}

/* No close/X control in V54. */
.service-panel__close{display:none !important}

/* =========================================================
   V55 — transparent showreel + Page 2 blur/hover states
   ========================================================= */

/* Page 2: both square and adjacent label use the same resting / hover colors. */
.service-tile,
.service-tile__title{
  color:#D0D6D6 !important;
}
.service-tile__icon{
  background:#D0D6D6 !important;
}
.service-tile:hover,
.service-tile:focus-visible,
.service-tile.is-active,
.service-tile:hover .service-tile__title,
.service-tile:focus-visible .service-tile__title,
.service-tile.is-active .service-tile__title{
  color:#4A7272 !important;
}
.service-tile:hover .service-tile__icon,
.service-tile:focus-visible .service-tile__icon,
.service-tile.is-active .service-tile__icon{
  background:#4A7272 !important;
}

/* Main service or subcategory open: background content is 50% faded + blurred.
   Header, floating contact actions and the active service panel remain crisp. */
.services-hub.is-panel-open .services-hub__grid{
  opacity:.50 !important;
  filter:blur(6px) !important;
}
.services-hub__veil{
  background:rgba(255,255,255,.10) !important;
  -webkit-backdrop-filter:blur(5px) !important;
  backdrop-filter:blur(5px) !important;
}
.services-hub.is-panel-open .services-hub__veil{
  opacity:1 !important;
  visibility:visible !important;
}
.service-panel{
  filter:none !important;
  opacity:1;
}

/* Page 3: only the two frame lines + play icon are visible before playback. */
.showreel-section{
  background:#fff !important;
  padding:72px 0 96px !important;
}
.showreel-frame{
  position:relative;
  width:min(100%,2048px) !important;
  aspect-ratio:2048/617 !important;
  background:#fff !important;
  overflow:visible !important;
}
.showreel-frame::before,
.showreel-frame::after{
  content:"";
  position:absolute;
  left:9.2%;
  right:9.2%;
  height:4px;
  pointer-events:none;
  z-index:1;
  background:linear-gradient(90deg,rgba(74,114,114,0),#4A7272 12%,#4A7272 88%,rgba(74,114,114,0));
}
.showreel-frame::before{top:4.5%}
.showreel-frame::after{bottom:4.5%}
.showreel-video{
  position:absolute !important;
  left:50% !important;
  top:50% !important;
  width:min(768px,58vw) !important;
  height:auto !important;
  max-height:78% !important;
  transform:translate(-50%,-50%) !important;
  object-fit:contain !important;
  background:transparent !important;
  opacity:0;
  visibility:hidden;
  z-index:2 !important;
  border:0 !important;
  transition:opacity .18s ease,visibility .18s ease;
}
.showreel-frame.is-playing .showreel-video{
  opacity:1;
  visibility:visible;
  cursor:pointer;
}
.showreel-video.fallback-blend{
  mix-blend-mode:screen;
}
.showreel-play{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  z-index:3 !important;
  display:grid !important;
  place-items:center !important;
  border:0 !important;
  background:transparent !important;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.showreel-play__triangle{
  width:0;
  height:0;
  border-top:44px solid transparent !important;
  border-bottom:44px solid transparent !important;
  border-left:72px solid #86B9B2 !important;
  transform:translateX(8px);
  filter:none !important;
}
.showreel-frame.is-playing .showreel-play{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
@media(max-width:820px){
  .showreel-frame::before,.showreel-frame::after{height:3px;left:6%;right:6%}
  .showreel-video{width:min(78vw,640px) !important;max-height:76% !important}
  .showreel-play__triangle{
    border-top-width:24px !important;
    border-bottom-width:24px !important;
    border-left-width:40px !important;
    transform:translateX(5px);
  }
}

/* =========================================================
   V56 — stable service tiles + reliable outside-click + audible showreel
   ========================================================= */
/* Keep the main service tiles exactly where they are when a menu opens. */
.service-tile,
.service-tile__icon,
.service-tile__title,
.service-tile:hover,
.service-tile:focus-visible,
.service-tile.is-active,
.service-tile:hover .service-tile__icon,
.service-tile:focus-visible .service-tile__icon,
.service-tile.is-active .service-tile__icon{
  transform:none !important;
}
.service-tile,
.service-tile__title{
  color:#D0D6D6 !important;
}
.service-tile__icon{
  background:#D0D6D6 !important;
}
.service-tile:hover,
.service-tile:focus-visible,
.service-tile.is-active,
.service-tile:hover .service-tile__title,
.service-tile:focus-visible .service-tile__title,
.service-tile.is-active .service-tile__title{
  color:#4A7272 !important;
}
.service-tile:hover .service-tile__icon,
.service-tile:focus-visible .service-tile__icon,
.service-tile.is-active .service-tile__icon{
  background:#4A7272 !important;
}

/* Do not draw a second/duplicated title-square when the submenu opens. */
.service-panel__top{
  display:none !important;
}

/* Active service stays crisp and fixed; the other Page-2 options fade + blur. */
.services-hub__grid{
  z-index:3 !important;
  filter:none !important;
  opacity:1 !important;
  pointer-events:auto !important;
}
.services-hub.is-panel-open .service-tile:not(.is-active){
  opacity:.50 !important;
  filter:blur(6px) !important;
  pointer-events:none !important;
}
.services-hub.is-panel-open .service-tile.is-active{
  opacity:1 !important;
  filter:none !important;
  pointer-events:auto !important;
  position:relative;
  z-index:5;
}
.services-hub__veil{
  z-index:2 !important;
  background:rgba(255,255,255,.50) !important;
  -webkit-backdrop-filter:blur(6px) !important;
  backdrop-filter:blur(6px) !important;
}
.services-hub.is-panel-open .services-hub__veil{
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
}

/* Only the actual submenu/pricing content catches clicks. Blank panel space closes it. */
.service-panel{
  pointer-events:none !important;
  transform:none !important;
}
.service-panel__cards,
.service-panel__card,
.service-submenu__item,
.service-detail__title,
.service-pricing__head,
.service-pricing__row{
  pointer-events:auto !important;
}
.services-hub.is-panel-open .service-panel{
  transform:none !important;
}

/* Page 3: before play there is no video surface at all—only frame lines + Play. */
.showreel-video{
  background:#000 !important;
  mix-blend-mode:normal !important;
  opacity:0 !important;
  visibility:hidden !important;
}
.showreel-frame.is-playing .showreel-video{
  opacity:1 !important;
  visibility:visible !important;
}
.showreel-video.fallback-blend{
  mix-blend-mode:normal !important;
}

/* =========================================================
   V57 — Page 2 submenu palette + Page 3 full-width video crop
   ========================================================= */
/* Page 2: submenu background under the 4-square section */
.service-panel__card--categories{
  background:#4A7272 !important;
}
.service-submenu__item{
  color:#D0D6D6 !important;
  background:transparent !important;
}
.service-submenu__item:hover,
.service-submenu__item:focus-visible,
.service-submenu__item.is-selected{
  color:#FFFFFF !important;
  background:rgba(255,255,255,.10) !important;
}

/* Page 3: remove the left/right black side bars from the video area. */
.showreel-frame{
  overflow:hidden !important;
}
.showreel-video{
  left:9.2% !important;
  top:4.5% !important;
  width:81.6% !important;
  height:91% !important;
  max-height:none !important;
  transform:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  border:0 !important;
}
@media(max-width:820px){
  .showreel-video{
    left:6% !important;
    top:4.5% !important;
    width:88% !important;
    height:91% !important;
  }
}

/* =========================================================
   V58 — original video proportions + white submenu text
   ========================================================= */
/* Page 2: all submenu labels stay white. */
.service-submenu__item,
.service-submenu__item:hover,
.service-submenu__item:focus-visible,
.service-submenu__item.is-selected{
  color:#FFFFFF !important;
}

/* Bring Page 3 closer to the lower service squares: ~300px visual gap. */
@media(min-width:821px){
  .services-hub{
    min-height:560px !important;
    padding-bottom:40px !important;
  }
  .showreel-section{
    padding-top:0 !important;
  }
}

/* Page 3: preserve the source video's native 16:9 shape; never stretch it. */
.showreel-frame{
  width:100% !important;
  max-width:2048px !important;
  height:650px !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
  background:#fff !important;
}
.showreel-frame::before{top:18px !important}
.showreel-frame::after{bottom:18px !important}
.showreel-video{
  left:50% !important;
  top:50% !important;
  width:min(1024px,calc(100vw - 96px)) !important;
  height:auto !important;
  aspect-ratio:16/9 !important;
  max-height:none !important;
  transform:translate(-50%,-50%) !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:#000 !important;
}
@media(max-width:1100px){
  .showreel-frame{height:auto !important;aspect-ratio:16/10 !important}
  .showreel-video{width:min(88vw,1024px) !important}
}
@media(max-width:820px){
  .showreel-section{padding-top:0 !important}
  .showreel-frame{height:auto !important;aspect-ratio:16/10 !important}
  .showreel-frame::before{top:10px !important}
  .showreel-frame::after{bottom:10px !important}
  .showreel-video{
    left:50% !important;
    top:50% !important;
    width:88vw !important;
    height:auto !important;
    aspect-ratio:16/9 !important;
    transform:translate(-50%,-50%) !important;
    object-fit:contain !important;
  }
}

/* =========================================================
   V59 — showreel reduced to half size
   ========================================================= */
/* Page 3: make the video roughly half of the previous displayed size,
   while keeping the original 16:9 proportions and centered placement. */
.showreel-video{
  width:min(512px,calc(100vw - 96px)) !important;
}
@media(max-width:1100px){
  .showreel-video{width:min(64vw,512px) !important;}
}
@media(max-width:820px){
  .showreel-video{width:min(72vw,512px) !important;}
}


/* =========================================================
   V60 — tighter video frame + transient play/pause + fullscreen
   ========================================================= */
.showreel-frame{
  height:340px !important;
  aspect-ratio:auto !important;
}
.showreel-frame::before{top:16px !important}
.showreel-frame::after{bottom:16px !important}

/* Keep V59 video dimensions and original 16:9 proportions. */
.showreel-video{
  cursor:pointer !important;
}

/* Small feedback icon shown briefly after mouse/space play-pause actions. */
.showreel-feedback{
  position:absolute;
  left:50%;
  top:50%;
  z-index:5;
  width:72px;
  height:72px;
  transform:translate(-50%,-50%) scale(.92);
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(13,48,53,.72);
  color:#fff;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}
.showreel-feedback.is-visible{
  opacity:1;
  visibility:visible;
  transform:translate(-50%,-50%) scale(1);
}
.showreel-feedback__play{
  display:none;
  width:0;
  height:0;
  margin-left:5px;
  border-top:15px solid transparent;
  border-bottom:15px solid transparent;
  border-left:24px solid currentColor;
}
.showreel-feedback__pause{
  display:none;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.showreel-feedback__pause i{
  display:block;
  width:8px;
  height:30px;
  border-radius:2px;
  background:currentColor;
}
.showreel-feedback.is-play .showreel-feedback__play{display:block}
.showreel-feedback.is-pause .showreel-feedback__pause{display:flex}

/* Fullscreen control appears only after playback has started. */
.showreel-fullscreen{
  position:absolute;
  z-index:6;
  right:calc(50% - min(256px,36vw) + 8px);
  bottom:28px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:9px;
  background:rgba(13,48,53,.62);
  color:#fff;
  opacity:0;
  visibility:hidden;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:opacity .18s ease,background-color .18s ease,visibility .18s ease;
}
.showreel-fullscreen svg{width:19px;height:19px;display:block}
.showreel-frame.is-playing .showreel-fullscreen{
  opacity:.72;
  visibility:visible;
}
.showreel-fullscreen:hover,
.showreel-fullscreen:focus-visible{
  opacity:1 !important;
  background:#4A7272;
  outline:none;
}

/* In custom fullscreen mode, use the available screen while preserving 16:9. */
.showreel-frame:fullscreen,
.showreel-frame:-webkit-full-screen{
  width:100vw !important;
  max-width:none !important;
  height:100vh !important;
  background:#000 !important;
}
.showreel-frame:fullscreen::before,
.showreel-frame:fullscreen::after,
.showreel-frame:-webkit-full-screen::before,
.showreel-frame:-webkit-full-screen::after{
  display:none !important;
}
.showreel-frame:fullscreen .showreel-video,
.showreel-frame:-webkit-full-screen .showreel-video{
  width:min(92vw,1440px) !important;
  height:auto !important;
  max-height:92vh !important;
  object-fit:contain !important;
}
.showreel-frame:fullscreen .showreel-fullscreen,
.showreel-frame:-webkit-full-screen .showreel-fullscreen{
  right:28px !important;
  bottom:28px !important;
}

@media(max-width:820px){
  .showreel-frame{
    height:min(340px,calc(40.5vw + 52px)) !important;
    aspect-ratio:auto !important;
  }
  .showreel-frame::before{top:12px !important}
  .showreel-frame::after{bottom:12px !important}
  .showreel-feedback{width:58px;height:58px}
  .showreel-feedback__play{
    border-top-width:12px;
    border-bottom-width:12px;
    border-left-width:19px;
  }
  .showreel-feedback__pause i{width:7px;height:24px}
  .showreel-fullscreen{
    right:calc(50% - min(256px,36vw) + 6px);
    bottom:22px;
    width:34px;
    height:34px;
  }
}


/* =========================================================
   V61 — page 3 gallery thumbnails + lightbox navigation
   ========================================================= */
.showcase-gallery{
  padding:14px 0 84px;
}
.showcase-gallery__inner{
  width:min(1180px,calc(100% - 72px));
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:26px;
  align-items:start;
}
.showcase-gallery__item{
  appearance:none;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  cursor:zoom-in;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  box-shadow:0 14px 38px rgba(22,42,44,.12);
  transition:transform .22s ease, box-shadow .22s ease, filter .22s ease;
}
.showcase-gallery__item::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:18px;
  box-shadow:inset 0 0 0 1px rgba(74,114,114,.14);
  pointer-events:none;
}
.showcase-gallery__item:hover,
.showcase-gallery__item:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 18px 46px rgba(22,42,44,.18);
  filter:saturate(1.02);
  outline:none;
}
.showcase-gallery__item img{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}

.gallery-lightbox{
  position:fixed;
  inset:0;
  z-index:1400;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, visibility .22s ease;
}
.gallery-lightbox.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.gallery-lightbox__backdrop{
  position:absolute;
  inset:0;
  background:rgba(7,18,20,.72);
  backdrop-filter:blur(8px);
}
.gallery-lightbox__dialog{
  position:relative;
  z-index:1;
  width:min(92vw,1360px);
  height:min(88vh,900px);
  margin:6vh auto;
  display:grid;
  grid-template-columns:70px minmax(0,1fr) 70px;
  align-items:center;
  gap:20px;
}
.gallery-lightbox__figure{
  margin:0;
  height:100%;
  display:grid;
  place-items:center;
}
.gallery-lightbox__image{
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  border-radius:18px;
  box-shadow:0 28px 80px rgba(0,0,0,.28);
  background:#fff;
}
.gallery-lightbox__nav,
.gallery-lightbox__close{
  appearance:none;
  border:0;
  cursor:pointer;
  background:rgba(208,214,214,.18);
  color:#fff;
  backdrop-filter:blur(10px);
  transition:background-color .18s ease, transform .18s ease, opacity .18s ease;
}
.gallery-lightbox__nav{
  width:58px;
  height:58px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:42px;
  line-height:1;
}
.gallery-lightbox__nav:hover,
.gallery-lightbox__nav:focus-visible,
.gallery-lightbox__close:hover,
.gallery-lightbox__close:focus-visible{
  background:#4A7272;
  transform:translateY(-1px);
  outline:none;
}
.gallery-lightbox__close{
  position:absolute;
  top:10px;
  right:10px;
  width:42px;
  height:42px;
  border-radius:999px;
  font-size:30px;
  line-height:1;
  display:grid;
  place-items:center;
}
body.lightbox-open{
  overflow:hidden;
}

@media (max-width: 1100px){
  .showcase-gallery__inner{
    grid-template-columns:repeat(2,minmax(0,1fr));
    width:min(920px,calc(100% - 48px));
  }
}
@media (max-width: 640px){
  .showcase-gallery{padding:10px 0 64px;}
  .showcase-gallery__inner{
    grid-template-columns:1fr;
    width:min(560px,calc(100% - 28px));
    gap:18px;
  }
  .showcase-gallery__item,
  .showcase-gallery__item::after{
    border-radius:16px;
  }
  .gallery-lightbox__dialog{
    width:min(96vw,720px);
    height:min(86vh,760px);
    grid-template-columns:52px minmax(0,1fr) 52px;
    gap:8px;
  }
  .gallery-lightbox__nav{
    width:44px;
    height:44px;
    font-size:34px;
  }
  .gallery-lightbox__close{
    top:4px;
    right:4px;
  }
}


/* =========================================================
   V62 — 6-column portfolio icon matrix
   ========================================================= */
.portfolio-logo-matrix{
  background:#fff;
  padding:42px 54px 74px;
}
.portfolio-logo-matrix__grid{
  width:min(1180px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:repeat(5,104px);
  column-gap:44px;
  row-gap:24px;
  direction:ltr;
  align-items:center;
  justify-items:center;
}
.portfolio-logo-cell{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  text-decoration:none;
  cursor:pointer;
  border-radius:14px;
  transition:transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.portfolio-logo-cell img{
  display:block;
  width:auto;
  height:auto;
  max-width:138px;
  max-height:82px;
  object-fit:contain;
  transition:transform .2s ease, opacity .2s ease;
}
.portfolio-logo-cell:hover,
.portfolio-logo-cell:focus-visible{
  transform:translateY(-2px);
  background:rgba(208,214,214,.16);
  box-shadow:0 10px 28px rgba(74,114,114,.08);
  outline:none;
}
.portfolio-logo-cell:hover img,
.portfolio-logo-cell:focus-visible img{
  transform:scale(1.035);
}
.portfolio-logo-cell--blank{
  pointer-events:none;
  background:transparent;
  box-shadow:none;
}
@media(max-width:980px){
  .portfolio-logo-matrix{padding:36px 28px 64px}
  .portfolio-logo-matrix__grid{
    column-gap:24px;
    row-gap:18px;
    grid-template-rows:repeat(5,88px);
  }
  .portfolio-logo-cell img{max-width:110px;max-height:68px}
}
@media(max-width:680px){
  .portfolio-logo-matrix{overflow-x:auto;padding:30px 18px 54px}
  .portfolio-logo-matrix__grid{
    width:720px;
    grid-template-columns:repeat(6,100px);
    grid-template-rows:repeat(5,78px);
    column-gap:24px;
    row-gap:16px;
    justify-content:center;
  }
  .portfolio-logo-cell img{max-width:88px;max-height:58px}
}

/* =========================================================
   V63 — portfolio blanks inert + no gray hover background
   ========================================================= */
/* Real portfolio icons keep only a clean micro-scale on hover; no gray tile/background. */
.portfolio-logo-cell:hover,
.portfolio-logo-cell:focus-visible{
  background:transparent !important;
  box-shadow:none !important;
  outline:none !important;
}

/* Empty grid positions are layout spacers only: no hover, no click, no focus, no page. */
.portfolio-logo-cell--blank,
.portfolio-logo-cell--blank:hover,
.portfolio-logo-cell--blank:focus,
.portfolio-logo-cell--blank:focus-visible{
  pointer-events:none !important;
  cursor:default !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  outline:none !important;
}


/* =========================================================
   V64 — inert decorative portfolio cells + mobile parity fixes
   ========================================================= */
/* Desktop + mobile: icon numbers 1/2/3/4 are decorative only. */
.portfolio-logo-cell--inert,
.portfolio-logo-cell--inert:hover,
.portfolio-logo-cell--inert:focus,
.portfolio-logo-cell--inert:focus-visible{
  pointer-events:none !important;
  cursor:default !important;
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
  outline:none !important;
}
.portfolio-logo-cell--inert img,
.portfolio-logo-cell--inert:hover img,
.portfolio-logo-cell--inert:focus img,
.portfolio-logo-cell--inert:focus-visible img{
  transform:none !important;
}

/* Mobile tagline: Safari-friendly animated WebP, visibly sized and aligned. */
@media(max-width:768px){
  .hero-tagline-motion{display:none !important;}
  .hero-tagline-fallback{
    display:block !important;
    width:min(78vw,480px) !important;
    max-width:none !important;
    height:auto !important;
    margin:0 3vw 0 auto !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
    position:relative !important;
    z-index:3 !important;
  }
  .hero-tagline-wrap{
    min-height:72px !important;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    overflow:visible !important;
  }
}

/* Mobile Page 2: keep the four main options in a compact desktop-like 2×2 composition. */
@media(max-width:680px){
  .services-hub{padding:46px 18px 74px !important;}
  .services-hub__grid{
    width:100% !important;
    max-width:100% !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-template-areas:"graphic identity" "additional ads" !important;
    gap:34px 18px !important;
    direction:ltr !important;
  }
  .service-tile,
  .service-tile--left,
  .service-tile--right{
    min-height:76px !important;
    padding:0 !important;
    gap:9px !important;
    justify-content:center !important;
  }
  .service-tile--right{flex-direction:row-reverse !important;direction:rtl !important;}
  .service-tile--left{flex-direction:row !important;direction:ltr !important;}
  .service-tile__icon{
    flex:0 0 36px !important;
    width:36px !important;
    height:36px !important;
    border-radius:7px !important;
    box-shadow:none !important;
  }
  .service-tile__title{
    font-size:clamp(15px,4.2vw,19px) !important;
    line-height:1.18 !important;
    letter-spacing:0 !important;
    white-space:normal !important;
  }
  .service-panel,
  .service-panel.panel-align-left,
  .service-panel.panel-align-right{
    width:calc(100% - 24px) !important;
    margin:18px auto 0 !important;
  }
  .service-panel__card--categories,
  .service-panel__card--pricing{
    width:100% !important;
  }
}

/* Mobile portfolio: one item per row; true blank spacers disappear. */
@media(max-width:680px){
  .portfolio-logo-matrix{
    overflow:visible !important;
    padding:30px 18px 58px !important;
  }
  .portfolio-logo-matrix__grid{
    width:min(320px,100%) !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:none !important;
    grid-auto-rows:82px !important;
    gap:12px !important;
    justify-items:center !important;
  }
  .portfolio-logo-cell{
    width:100% !important;
    height:82px !important;
  }
  .portfolio-logo-cell img{
    max-width:150px !important;
    max-height:68px !important;
  }
  .portfolio-logo-cell--blank{display:none !important;}
}

/* Mobile gallery: one large centered image + 4 thumbnails below. */
.showcase-gallery__mobile-thumbs{display:none;}
@media(max-width:680px){
  .showcase-gallery{padding:16px 0 66px !important;}
  .showcase-gallery__inner{
    width:100% !important;
    display:block !important;
    margin:0 !important;
  }
  .showcase-gallery__item{
    display:none !important;
    width:calc(100% - 28px) !important;
    max-width:560px !important;
    margin:0 auto !important;
    border-radius:14px !important;
    box-shadow:none !important;
    transform:none !important;
  }
  .showcase-gallery__item.is-mobile-active{
    display:block !important;
  }
  .showcase-gallery__item img{
    width:100% !important;
    height:auto !important;
    aspect-ratio:auto !important;
    object-fit:contain !important;
  }
  .showcase-gallery__mobile-thumbs{
    width:calc(100% - 28px) !important;
    max-width:560px !important;
    margin:12px auto 0 !important;
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  .showcase-gallery__mobile-thumb{
    appearance:none;
    border:2px solid transparent;
    padding:0;
    background:transparent;
    border-radius:8px;
    overflow:hidden;
    cursor:pointer;
    opacity:.64;
  }
  .showcase-gallery__mobile-thumb.is-active{
    border-color:#86B9B2;
    opacity:1;
  }
  .showcase-gallery__mobile-thumb img{
    display:block;
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover;
  }
}


/* =========================================================
   V65 — click-anywhere lightbox dismissal + mobile 1-column services
          + 9 portfolio icons per mobile page
   ========================================================= */
/* Lightbox: no X button. Clicking the enlarged image or any matte/empty area closes it. */
.gallery-lightbox__close{display:none !important;}
.gallery-lightbox__dialog{cursor:zoom-out;}
.gallery-lightbox__figure{cursor:zoom-out;}
.gallery-lightbox__image{cursor:zoom-out;}
.gallery-lightbox__nav{cursor:pointer;}

/* Mobile Page 2: the four main service options must sit vertically, one below another. */
@media(max-width:680px){
  .services-hub__grid{
    grid-template-columns:1fr !important;
    grid-template-areas:"identity" "graphic" "ads" "additional" !important;
    gap:18px !important;
    width:min(420px,100%) !important;
    margin-inline:auto !important;
  }
  .service-tile,
  .service-tile--left,
  .service-tile--right{
    width:100% !important;
    min-height:68px !important;
    justify-content:flex-start !important;
    flex-direction:row-reverse !important;
    direction:rtl !important;
    text-align:right !important;
    gap:14px !important;
  }
  .service-tile__title{
    text-align:right !important;
    font-size:clamp(18px,5vw,24px) !important;
  }
}

/* Mobile portfolio: one vertical column, exactly 9 icon cells per in-page page. */
.portfolio-mobile-pager{display:none;}
@media(max-width:680px){
  .portfolio-logo-matrix__grid{
    width:min(340px,100%) !important;
    grid-template-columns:1fr !important;
    grid-auto-rows:78px !important;
    gap:10px !important;
  }
  .portfolio-logo-cell{
    height:78px !important;
  }
  .portfolio-logo-cell img{
    max-width:148px !important;
    max-height:64px !important;
  }
  .portfolio-logo-cell--blank{display:none !important;}
  .portfolio-logo-cell.is-mobile-page-hidden{display:none !important;}

  .portfolio-mobile-pager{
    width:min(340px,100%);
    margin:18px auto 0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
  }
  .portfolio-mobile-pager__btn{
    width:38px;
    height:38px;
    border:1px solid rgba(74,114,114,.34);
    border-radius:50%;
    background:#fff;
    color:#4A7272;
    display:grid;
    place-items:center;
    font:400 28px/1 Arial,sans-serif;
    cursor:pointer;
  }
  .portfolio-mobile-pager__btn:disabled{
    opacity:.28;
    cursor:default;
  }
  .portfolio-mobile-pager__status{
    min-width:52px;
    text-align:center;
    color:#4A7272;
    font:600 13px/1 Arial,sans-serif;
    direction:ltr;
  }
}


/* =========================================================
   V66 — remove extra line above video + center gallery background
   ========================================================= */
/* Remove the faint section divider above the actual showreel top line. */
.showreel-section{
  border-top:0 !important;
}

/* Keep the image row vertically centered inside its background band. */
.showcase-gallery{
  padding-top:42px !important;
  padding-bottom:42px !important;
}

@media(max-width:680px){
  .showcase-gallery{
    padding-top:28px !important;
    padding-bottom:28px !important;
  }
}


/* =========================================================
   V67 — requested portfolio row swaps + 3-column mobile matrix
   ========================================================= */
@media(max-width:680px){
  .portfolio-logo-matrix{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  .portfolio-logo-matrix__grid{
    width:min(390px,100%) !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-auto-rows:92px !important;
    gap:12px 10px !important;
  }
  .portfolio-logo-cell{
    width:100% !important;
    height:92px !important;
    min-width:0 !important;
  }
  .portfolio-logo-cell img{
    max-width:92px !important;
    max-height:64px !important;
  }
  .portfolio-logo-cell--blank{
    display:none !important;
  }
  .portfolio-mobile-pager{
    width:min(390px,100%) !important;
    margin-top:16px !important;
  }
}

@media(max-width:390px){
  .portfolio-logo-matrix__grid{
    grid-auto-rows:84px !important;
    gap:10px 8px !important;
  }
  .portfolio-logo-cell{
    height:84px !important;
  }
  .portfolio-logo-cell img{
    max-width:82px !important;
    max-height:58px !important;
  }
}


/* =========================================================
   V68 — smoother mobile tagline + in-place service overlay
          + continuous 3-column mobile portfolio
   ========================================================= */

/* Mobile tagline: smaller/faster animated asset for smoother iPhone playback. */
@media(max-width:680px){
  .hero-tagline-fallback{
    width:min(76vw,380px) !important;
    height:auto !important;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transform:translateZ(0) !important;
    will-change:auto !important;
  }
}

/* Mobile services:
   - submenu opens over the clicked service's current position, not farther down the document
   - page itself stays fixed, so there is no long jump/scroll
   - panel scrolls internally only when necessary */
@media(max-width:680px){
  body.service-panel-open{
    overflow:hidden !important;
    touch-action:none;
  }

  .services-hub{
    overflow:visible !important;
  }

  .service-panel,
  .service-panel.panel-align-left,
  .service-panel.panel-align-right{
    position:fixed !important;
    left:16px !important;
    right:16px !important;
    top:var(--service-mobile-top, 180px) !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    max-height:min(56dvh,470px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    z-index:1650 !important;
    transform:none !important;
  }

  .service-panel__cards{
    gap:8px !important;
  }

  .service-panel__card--categories{
    padding:10px !important;
    border-radius:22px !important;
  }

  .service-submenu{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:2px !important;
  }

  .service-submenu__item{
    min-height:42px !important;
    padding:9px 13px !important;
    font-size:clamp(15px,4.1vw,18px) !important;
    line-height:1.35 !important;
  }

  .service-panel__card--pricing{
    padding:12px 10px 14px !important;
    border-radius:20px !important;
  }

  .service-detail__title{
    font-size:clamp(17px,4.4vw,21px) !important;
    margin-bottom:8px !important;
  }

  .services-hub__veil{
    position:fixed !important;
    inset:0 !important;
    z-index:1550 !important;
    background:rgba(255,255,255,.50) !important;
    -webkit-backdrop-filter:blur(7px) !important;
    backdrop-filter:blur(7px) !important;
  }

  /* Keep the active tile exactly where it was; the panel floats over that area. */
  .services-hub.is-panel-open .service-tile.is-active{
    z-index:1600 !important;
  }
}

/* Mobile portfolio is one continuous 3-column list.
   No page 1/2/3 controls and no hidden page chunks. */
@media(max-width:680px){
  .portfolio-logo-matrix{
    overflow:visible !important;
    padding:28px 12px 58px !important;
  }

  .portfolio-logo-matrix__grid{
    width:min(390px,100%) !important;
    margin:0 auto !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    grid-auto-rows:92px !important;
    gap:12px 10px !important;
  }

  .portfolio-logo-cell,
  .portfolio-logo-cell.is-mobile-page-hidden{
    display:flex !important;
  }

  .portfolio-logo-cell--blank{
    display:none !important;
  }

  .portfolio-mobile-pager{
    display:none !important;
  }
}

@media(max-width:390px){
  .portfolio-logo-matrix__grid{
    grid-auto-rows:84px !important;
    gap:10px 8px !important;
  }
}

/* =========================================================
   V69 — Team carousel + header-inspired footer
   ========================================================= */
.team-showcase{
  position:relative;
  padding:92px 0 84px;
  background:#fff;
  overflow:hidden;
}
.team-showcase__head{
  width:min(1180px,calc(100% - 64px));
  margin:0 auto 42px;
  text-align:center;
  color:#4A7272;
}
.team-showcase__eyebrow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:14px;
}
.team-showcase__eyebrow i{
  display:block;
  width:72px;
  height:2px;
  background:#D0D6D6;
}
.team-showcase__eyebrow b{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#86B9B2;
}
.team-showcase h2{
  margin:0;
  font-size:clamp(34px,4vw,58px);
  line-height:1.15;
  font-weight:700;
}
.team-showcase p{
  margin:14px auto 0;
  max-width:720px;
  color:#8da1a1;
  font-size:17px;
  line-height:1.9;
}
.team-carousel{
  position:relative;
  width:100%;
}
.team-carousel__viewport{
  width:min(1360px,calc(100% - 96px));
  margin:0 auto;
  overflow:hidden;
  direction:ltr;
  scroll-behavior:smooth;
  scrollbar-width:none;
  outline:none;
}
.team-carousel__viewport::-webkit-scrollbar{display:none}
.team-carousel__track{
  display:flex;
  width:max-content;
  gap:18px;
  padding:12px 4px 24px;
}
.team-card{
  position:relative;
  flex:0 0 238px;
  height:456px;
  border-radius:28px;
  overflow:hidden;
  background:#f5f7f7;
  border:1px solid rgba(208,214,214,.65);
  box-shadow:0 14px 34px rgba(13,48,53,.055);
  cursor:pointer;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
  isolation:isolate;
}
.team-card:hover,
.team-card:focus-within{
  transform:translateY(-5px);
  box-shadow:0 24px 54px rgba(13,48,53,.13);
  border-color:rgba(134,185,178,.72);
}
.team-card>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  filter:saturate(.82) contrast(.96);
  transform:scale(1.02);
  transition:filter .25s ease,transform .35s ease;
}
.team-card:hover>img,
.team-card:focus-within>img{
  filter:saturate(.95) contrast(.98);
  transform:scale(1.045);
}
.team-card__shade{
  position:absolute;
  inset:48% 0 0;
  background:linear-gradient(to bottom,rgba(248,250,249,0),rgba(240,244,243,.90) 27%,rgba(225,233,232,.97) 100%);
  z-index:1;
}
.team-card__meta{
  position:absolute;
  z-index:2;
  left:18px;
  right:18px;
  bottom:28px;
  text-align:center;
  direction:rtl;
  transition:bottom .25s ease;
}
.team-card__meta strong{
  display:block;
  color:#4A7272;
  font-size:18px;
  line-height:1.45;
  font-weight:700;
}
.team-card__meta span{
  display:block;
  margin-top:6px;
  color:#718989;
  font-size:15px;
  font-weight:600;
}
.team-card__socials{
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  bottom:16px;
  display:flex;
  direction:ltr;
  justify-content:center;
  gap:10px;
  opacity:0;
  transform:translateY(14px);
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}
.team-card:hover .team-card__meta,
.team-card:focus-within .team-card__meta{bottom:82px}
.team-card:hover .team-card__socials,
.team-card:focus-within .team-card__socials{
  opacity:1;
  transform:none;
  pointer-events:auto;
}
.team-card__socials a{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  text-decoration:none;
  color:#fff;
  background:#86B9B2;
  box-shadow:0 8px 18px rgba(74,114,114,.13);
  transition:background-color .18s ease,transform .18s ease;
}
.team-card__socials a:first-child{background:#4A7272}
.team-card__socials a:hover,
.team-card__socials a:focus-visible{
  background:#4A7272;
  transform:translateY(-2px);
  outline:none;
}
.team-card__socials span{
  display:block;
  font-size:19px;
  line-height:1;
}
.team-carousel__arrow{
  position:absolute;
  top:50%;
  z-index:4;
  width:46px;
  height:46px;
  margin-top:-23px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#86B9B2;
  color:#fff;
  font-size:36px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(74,114,114,.16);
  transition:background-color .18s ease,transform .18s ease;
}
.team-carousel__arrow:hover{background:#4A7272;transform:scale(1.04)}
.team-carousel__arrow--left{left:18px}
.team-carousel__arrow--right{right:18px}

/* Footer: same soft, rounded language as the header. */
.footer{
  padding:24px 24px 18px !important;
  background:#fff !important;
  color:#4A7272 !important;
}
.footer-shell{
  width:min(1320px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr .85fr 1.35fr;
  align-items:stretch;
  gap:18px;
  padding:30px 34px;
  border-radius:28px;
  background:rgba(229,234,234,.92);
  border:1px solid rgba(208,214,214,.62);
  box-shadow:0 16px 48px rgba(13,48,53,.06);
}
.footer-brand-panel,
.footer-links-panel,
.footer-contact-panel{
  min-height:150px;
  padding:18px 20px;
  border-radius:22px;
  background:rgba(255,255,255,.34);
}
.footer-brand-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  direction:ltr;
}
.footer-brand-panel img{
  display:block;
  width:min(180px,80%);
  height:auto;
  opacity:.92;
}
.footer-brand-panel span{
  margin-top:14px;
  direction:rtl;
  color:#789090;
  font-size:14px;
}
.footer-links-panel{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:10px;
}
.footer-links-panel a{
  display:inline-flex !important;
  align-items:center;
  min-height:38px;
  margin:0 !important;
  padding:7px 16px;
  border-radius:18px;
  background:#86B9B2;
  color:#fff !important;
  font-size:14px !important;
  font-weight:700;
  text-decoration:none;
  transition:background-color .18s ease,transform .18s ease;
}
.footer-links-panel a:hover{background:#4A7272;transform:translateX(-2px)}
.footer-contact-panel{
  text-align:right;
  direction:rtl;
}
.footer-contact-panel h2{
  margin:0 0 12px !important;
  color:#4A7272;
  font-size:25px !important;
  font-weight:700 !important;
}
.footer-contact-panel a{
  margin:7px 0 !important;
  color:#4A7272 !important;
  font-size:15px !important;
  text-decoration:none;
}
.footer-contact-panel p{
  margin:11px 0 0 !important;
  max-width:none !important;
  color:#718989 !important;
  opacity:1 !important;
  font-size:14px;
  line-height:1.9 !important;
}
.footer-bottom{
  width:min(1320px,100%);
  margin:12px auto 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:0 8px;
  color:#9aabab;
  font:600 11px/1 Arial,sans-serif;
  letter-spacing:.08em;
}

@media(max-width:980px){
  .team-showcase{padding:70px 0 64px}
  .team-showcase__head{width:calc(100% - 36px);margin-bottom:28px}
  .team-carousel__viewport{width:calc(100% - 44px)}
  .team-card{flex-basis:214px;height:420px}
  .team-carousel__arrow{width:40px;height:40px;font-size:31px}
  .team-carousel__arrow--left{left:5px}
  .team-carousel__arrow--right{right:5px}
  .footer-shell{grid-template-columns:1fr 1fr;padding:22px}
  .footer-contact-panel{grid-column:1/-1}
}
@media(max-width:680px){
  .team-showcase{padding:58px 0 54px}
  .team-showcase h2{font-size:34px}
  .team-showcase p{font-size:14px;padding:0 14px}
  .team-carousel__viewport{width:calc(100% - 28px)}
  .team-carousel__track{gap:12px;padding-bottom:18px}
  .team-card{flex-basis:76vw;max-width:292px;height:420px}
  .team-card__meta{bottom:76px}
  .team-card__socials{opacity:1;transform:none;pointer-events:auto}
  .team-carousel__arrow{display:none}
  .footer{padding:18px 12px 12px !important}
  .footer-shell{grid-template-columns:1fr;padding:14px;gap:12px;border-radius:24px}
  .footer-brand-panel,.footer-links-panel,.footer-contact-panel{min-height:0;padding:18px;border-radius:18px}
  .footer-brand-panel{align-items:center;text-align:center}
  .footer-links-panel{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center}
  .footer-contact-panel{text-align:center}
  .footer-bottom{padding:0 4px}
}


/* V70 — cleaner team carousel */
.team-showcase__head{display:none!important}
.team-showcase{padding-top:44px!important}
.team-carousel__track{gap:30px!important;padding-left:16px!important;padding-right:16px!important}
.team-card>img{object-position:center 58%!important;transform:scale(1.24)!important}
.team-card:hover>img,.team-card:focus-within>img{transform:scale(1.27)!important}
.team-card--amin>img{object-fit:contain!important;object-position:center!important;transform:none!important;padding:66px 24px 132px!important;background:#fff}
.team-card--amin:hover>img,.team-card--amin:focus-within>img{transform:none!important}
.team-card__meta{left:12px!important;right:12px!important;text-align:center!important;bottom:30px!important}
.team-card__meta strong{font-size:14px!important;line-height:1.45!important;font-weight:700!important;letter-spacing:0!important}
.team-card__meta span{margin-top:4px!important;font-size:12px!important;line-height:1.45!important;font-weight:600!important}
.team-card:hover .team-card__meta,.team-card:focus-within .team-card__meta{bottom:76px!important}
.team-card__socials{gap:9px!important}
.team-card__socials a{width:38px!important;height:38px!important;padding:9px!important}
.team-card__socials a img{display:block;width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1)}
.team-card__socials span{display:none!important}
@media(max-width:680px){.team-showcase{padding-top:34px!important}.team-carousel__track{gap:18px!important}.team-card__meta{bottom:74px!important}.team-card__meta strong{font-size:13px!important}.team-card__meta span{font-size:12px!important}.team-card__socials a{width:36px!important;height:36px!important;padding:8px!important}}


/* =========================================================
   V71 — minimal team cards + simplified footer
   ========================================================= */
.team-showcase{
  padding-top:32px !important;
}
.team-carousel__track{
  gap:38px !important;
  padding-left:24px !important;
  padding-right:24px !important;
}
.team-card{
  position:relative;
  flex:0 0 330px !important;
  max-width:330px;
  height:220px !important;
  min-height:220px;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  overflow:hidden;
  isolation:isolate;
}
.team-card::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(127,177,173,.06), rgba(127,177,173,.025));
  opacity:0;
  transform:scale(.985);
  transition:opacity .28s ease, transform .28s ease;
  z-index:0;
}
.team-card:hover::before,
.team-card:focus-within::before{
  opacity:1;
  transform:scale(1);
}
.team-card:hover,
.team-card:focus-within{
  background:transparent !important;
  transform:translateY(-3px);
}
.team-card > img:not(.team-card__logo),
.team-card__shade{
  display:none !important;
}
.team-card__logo{
  position:absolute;
  top:24px;
  left:28px;
  width:min(58%, 190px);
  height:86px;
  object-fit:contain;
  object-position:left top;
  opacity:.96;
  z-index:1;
  transition:transform .28s ease, opacity .28s ease;
}
.team-card:hover .team-card__logo,
.team-card:focus-within .team-card__logo{
  transform:translateY(-2px) scale(1.02);
  opacity:1;
}
.team-card__meta{
  position:absolute !important;
  right:28px !important;
  left:auto !important;
  bottom:28px !important;
  text-align:right !important;
  max-width:52%;
  z-index:2;
  transition:transform .28s ease;
}
.team-card:hover .team-card__meta,
.team-card:focus-within .team-card__meta{
  bottom:28px !important;
  transform:translateY(-2px);
}
.team-card__meta strong{
  display:block;
  margin:0;
  font-size:13px !important;
  line-height:1.5 !important;
  letter-spacing:0 !important;
  font-weight:600 !important;
  color:rgba(74,114,114,.78);
}
.team-card__meta span{
  display:block;
  margin-top:6px !important;
  font-size:15px !important;
  line-height:1.5 !important;
  font-weight:700 !important;
  color:#4A7272;
}
.team-card__socials{
  position:absolute;
  left:28px;
  bottom:24px;
  display:flex;
  gap:8px !important;
  opacity:0;
  transform:translateY(12px);
  pointer-events:none;
  z-index:2;
  transition:opacity .24s ease, transform .24s ease;
}
.team-card:hover .team-card__socials,
.team-card:focus-within .team-card__socials{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.team-card__socials a{
  width:36px !important;
  height:36px !important;
  padding:8px !important;
  border-radius:999px;
  background:#6f9592 !important;
  box-shadow:none !important;
}
.team-card__socials a:first-child{background:#4A7272 !important}
.team-card__socials a img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  filter:brightness(0) invert(1);
}
.team-card__socials span{display:none !important}

.footer{
  background:transparent !important;
  color:#4A7272 !important;
  padding:42px 5vw 28px !important;
}
.footer-shell{
  max-width:1320px;
  margin:0 auto;
  display:flex !important;
  align-items:flex-start;
  justify-content:space-between;
  gap:40px;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
}
.footer-brand-panel,
.footer-links-panel{display:none !important}
.footer-contact-panel{
  order:2;
  flex:1 1 50%;
  min-height:0 !important;
  padding:0 !important;
  background:transparent !important;
  text-align:right;
  border:none !important;
}
.footer-contact-panel h2{
  margin:0 0 16px !important;
  font-size:38px !important;
  font-weight:700 !important;
  color:#4A7272;
}
.footer-contact-panel a{
  display:block;
  margin:7px 0 !important;
  color:#4A7272;
  font-size:22px !important;
  text-decoration:none;
}
.footer-contact-panel p{
  margin:14px 0 0 !important;
  color:#4A7272;
  opacity:.86 !important;
  font-size:17px !important;
  line-height:2 !important;
}
.footer-social-panel{
  order:1;
  flex:1 1 45%;
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  min-height:100%;
}
.footer-socials{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.footer-socials a{
  display:block;
  width:44px;
  height:44px;
  border-radius:14px;
  overflow:hidden;
  transition:transform .22s ease, opacity .22s ease;
  opacity:.94;
}
.footer-socials a:hover,
.footer-socials a:focus-visible{
  transform:translateY(-2px);
  opacity:1;
}
.footer-socials img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.footer-bottom{
  max-width:1320px;
  margin:22px auto 0;
  padding:18px 0 0 !important;
  border-top:1px solid rgba(74,114,114,.18);
  color:#4A7272;
}

@media (max-width:980px){
  .team-card{flex-basis:290px !important; max-width:290px; height:204px !important; min-height:204px;}
  .team-card__logo{width:min(60%, 175px); height:78px; top:22px; left:24px;}
  .team-card__meta{right:24px !important; bottom:24px !important; max-width:56%;}
  .team-card__socials{left:24px; bottom:20px;}
  .footer-shell{flex-direction:column-reverse; align-items:stretch; gap:26px;}
  .footer-contact-panel{text-align:right;}
}
@media (max-width:680px){
  .team-carousel__track{gap:18px !important; padding-left:12px !important; padding-right:12px !important;}
  .team-card{flex-basis:84vw !important; max-width:84vw; height:188px !important; min-height:188px;}
  .team-card__logo{top:20px; left:22px; width:min(56%, 160px); height:70px;}
  .team-card__meta{right:22px !important; bottom:22px !important; max-width:58%;}
  .team-card__meta strong{font-size:12px !important;}
  .team-card__meta span{font-size:14px !important;}
  .team-card__socials{left:22px; bottom:18px; opacity:1; transform:none; pointer-events:auto;}
  .team-card__socials a{width:34px !important; height:34px !important; padding:8px !important;}
  .footer{padding:28px 16px 22px !important;}
  .footer-contact-panel h2{font-size:30px !important;}
  .footer-contact-panel a{font-size:18px !important;}
  .footer-contact-panel p{font-size:15px !important;}
  .footer-socials{justify-content:flex-start; gap:10px;}
  .footer-socials a{width:40px; height:40px; border-radius:12px;}
}


/* =========================================================
   V72 — team cards: fixed small logo top-left, small meta bottom-right,
   vertical hover socials bottom-left going upward
   ========================================================= */
.team-showcase{
  padding-top:20px !important;
}
.team-carousel__track{
  gap:44px !important;
  align-items:stretch;
}
.team-card{
  flex:0 0 295px !important;
  max-width:295px;
  height:184px !important;
  min-height:184px;
  border-radius:28px;
}
.team-card,
.team-card:hover,
.team-card:focus-within{
  transform:none !important;
}
.team-card::before{
  inset:0 !important;
  border-radius:28px;
  background:linear-gradient(180deg, rgba(127,177,173,.045), rgba(127,177,173,.02));
  opacity:0;
}
.team-card:hover::before,
.team-card:focus-within::before{
  opacity:1;
  transform:none !important;
}
.team-card__logo{
  top:18px !important;
  left:18px !important;
  width:106px !important;
  max-width:38% !important;
  height:48px !important;
  object-fit:contain;
  object-position:left top;
  opacity:.96;
  transform:none !important;
}
.team-card:hover .team-card__logo,
.team-card:focus-within .team-card__logo{
  transform:none !important;
}
.team-card__meta{
  right:18px !important;
  bottom:18px !important;
  max-width:51%;
  transform:none !important;
}
.team-card:hover .team-card__meta,
.team-card:focus-within .team-card__meta{
  bottom:18px !important;
  transform:none !important;
}
.team-card__meta strong{
  font-size:11px !important;
  line-height:1.45 !important;
  color:rgba(74,114,114,.82);
}
.team-card__meta span{
  margin-top:4px !important;
  font-size:13px !important;
  line-height:1.5 !important;
  color:#4A7272;
}
.team-card__socials{
  left:18px !important;
  bottom:18px !important;
  display:flex;
  flex-direction:column-reverse !important;
  align-items:flex-start;
  gap:8px !important;
  opacity:1;
  transform:none !important;
  pointer-events:none;
}
.team-card__socials a{
  width:34px !important;
  height:34px !important;
  padding:8px !important;
  border-radius:999px;
  background:#6f9592 !important;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
  transition:opacity .22s ease, transform .22s ease, background-color .22s ease;
}
.team-card__socials a:first-child{background:#4A7272 !important}
.team-card:hover .team-card__socials,
.team-card:focus-within .team-card__socials{
  pointer-events:auto;
}
.team-card:hover .team-card__socials a,
.team-card:focus-within .team-card__socials a{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.team-card:hover .team-card__socials a:nth-child(1),
.team-card:focus-within .team-card__socials a:nth-child(1){transition-delay:.00s}
.team-card:hover .team-card__socials a:nth-child(2),
.team-card:focus-within .team-card__socials a:nth-child(2){transition-delay:.05s}
.team-card:hover .team-card__socials a:nth-child(3),
.team-card:focus-within .team-card__socials a:nth-child(3){transition-delay:.10s}

@media (max-width:980px){
  .team-card{
    flex-basis:272px !important;
    max-width:272px;
    height:176px !important;
    min-height:176px;
  }
  .team-card__logo{
    top:16px !important;
    left:16px !important;
    width:96px !important;
    height:44px !important;
  }
  .team-card__meta{right:16px !important; bottom:16px !important;}
  .team-card__socials{left:16px !important; bottom:16px !important;}
}
@media (max-width:680px){
  .team-carousel__track{gap:14px !important;}
  .team-card{
    flex-basis:84vw !important;
    max-width:84vw;
    height:166px !important;
    min-height:166px;
  }
  .team-card__logo{
    top:15px !important;
    left:15px !important;
    width:88px !important;
    height:40px !important;
    max-width:36% !important;
  }
  .team-card__meta{
    right:15px !important;
    bottom:15px !important;
    max-width:54%;
  }
  .team-card__meta strong{font-size:10px !important;}
  .team-card__meta span{font-size:12px !important;}
  .team-card__socials{left:15px !important; bottom:15px !important;}
  .team-card__socials a{
    width:32px !important;
    height:32px !important;
    padding:7px !important;
    opacity:1; /* keep accessible on touch devices */
    pointer-events:auto;
    transform:none;
  }
}


/* =========================================================
   V73 — cohesive clients + team design (clean, complete, non-overlapping)
   ========================================================= */
.team-showcase{
  padding:44px 0 58px !important;
  background:#fff;
}
.team-clients{
  width:min(1180px,calc(100% - 64px));
  margin:0 auto 34px;
  padding-bottom:28px;
  border-bottom:1px solid rgba(74,114,114,.14);
}
.team-clients__label{
  margin-bottom:18px;
  color:#4A7272;
  font-size:12px;
  font-weight:700;
  letter-spacing:.02em;
  text-align:right;
  opacity:.78;
}
.team-clients__logos{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  align-items:center;
  gap:28px;
}
.team-clients__logos a{
  height:72px;
  display:grid;
  place-items:center;
  padding:8px 14px;
  opacity:.62;
  transition:opacity .22s ease, transform .22s ease;
}
.team-clients__logos a:hover,
.team-clients__logos a:focus-visible{
  opacity:1;
  transform:translateY(-2px);
  outline:none;
}
.team-clients__logos img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.team-section-title{
  width:min(1180px,calc(100% - 64px));
  margin:0 auto 22px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:24px;
  color:#4A7272;
}
.team-section-title span{
  font-size:20px;
  font-weight:700;
}
.team-section-title small{
  font-size:12px;
  font-weight:500;
  opacity:.62;
}
.team-carousel{
  width:min(1260px,100%);
  margin:0 auto;
}
.team-carousel__viewport{
  width:calc(100% - 112px) !important;
  margin:0 auto;
  padding:4px 0 8px;
}
.team-carousel__track{
  gap:34px !important;
  padding:0 8px 8px !important;
}
.team-card{
  flex:0 0 304px !important;
  width:304px !important;
  max-width:304px !important;
  height:194px !important;
  min-height:194px !important;
  position:relative;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  border-radius:26px;
  overflow:hidden;
  isolation:isolate;
}
.team-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:26px;
  background:rgba(208,214,214,.20);
  opacity:0;
  transition:opacity .22s ease;
  z-index:0;
}
.team-card:hover::before,
.team-card:focus-within::before{
  opacity:1;
}
.team-card,
.team-card:hover,
.team-card:focus-within{
  transform:none !important;
}
.team-card__logo{
  position:absolute;
  top:20px !important;
  left:20px !important;
  width:112px !important;
  height:54px !important;
  max-width:40% !important;
  object-fit:contain;
  object-position:left top;
  z-index:1;
  opacity:.94;
  transform:none !important;
}
.team-card:hover .team-card__logo,
.team-card:focus-within .team-card__logo{
  opacity:1;
  transform:none !important;
}
.team-card__meta{
  position:absolute !important;
  right:20px !important;
  bottom:20px !important;
  left:auto !important;
  width:148px;
  max-width:50%;
  text-align:right !important;
  z-index:2;
  transform:none !important;
}
.team-card:hover .team-card__meta,
.team-card:focus-within .team-card__meta{
  right:20px !important;
  bottom:20px !important;
  transform:none !important;
}
.team-card__meta strong{
  display:block;
  margin:0;
  color:rgba(74,114,114,.78);
  font-size:11px !important;
  line-height:1.5 !important;
  font-weight:600 !important;
}
.team-card__meta span{
  display:block;
  margin-top:4px !important;
  color:#4A7272;
  font-size:13px !important;
  line-height:1.55 !important;
  font-weight:700 !important;
}
.team-card__socials{
  position:absolute;
  left:20px !important;
  bottom:20px !important;
  display:flex;
  flex-direction:column-reverse !important;
  gap:7px !important;
  z-index:3;
  pointer-events:none;
}
.team-card__socials a{
  width:32px !important;
  height:32px !important;
  display:grid;
  place-items:center;
  padding:7px !important;
  border-radius:999px;
  background:#86B9B2 !important;
  opacity:0;
  transform:translateY(7px) scale(.96);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, background-color .18s ease;
}
.team-card__socials a:first-child{background:#4A7272 !important}
.team-card:hover .team-card__socials,
.team-card:focus-within .team-card__socials{
  pointer-events:auto;
}
.team-card:hover .team-card__socials a,
.team-card:focus-within .team-card__socials a{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.team-card:hover .team-card__socials a:nth-child(1),
.team-card:focus-within .team-card__socials a:nth-child(1){transition-delay:.00s}
.team-card:hover .team-card__socials a:nth-child(2),
.team-card:focus-within .team-card__socials a:nth-child(2){transition-delay:.04s}
.team-card:hover .team-card__socials a:nth-child(3),
.team-card:focus-within .team-card__socials a:nth-child(3){transition-delay:.08s}
.team-card__socials a:hover,
.team-card__socials a:focus-visible{
  background:#4A7272 !important;
  outline:none;
}
.team-card__socials a img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:brightness(0) invert(1);
}
.team-carousel__arrow{
  background:rgba(134,185,178,.86) !important;
  color:#fff !important;
  box-shadow:none !important;
}
.team-carousel__arrow:hover,
.team-carousel__arrow:focus-visible{
  background:#4A7272 !important;
}

@media(max-width:980px){
  .team-clients__logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 26px}
  .team-clients__logos a{height:64px}
  .team-carousel__viewport{width:calc(100% - 74px) !important}
  .team-card{flex-basis:286px !important;width:286px !important;max-width:286px !important}
}
@media(max-width:680px){
  .team-showcase{padding:34px 0 44px !important}
  .team-clients,
  .team-section-title{width:calc(100% - 32px)}
  .team-clients{margin-bottom:24px;padding-bottom:22px}
  .team-clients__label{margin-bottom:14px;font-size:11px}
  .team-clients__logos{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px}
  .team-clients__logos a{height:54px;padding:6px 10px}
  .team-section-title{margin-bottom:14px;align-items:flex-end}
  .team-section-title span{font-size:17px}
  .team-section-title small{font-size:10px}
  .team-carousel__viewport{width:100% !important;padding-inline:16px}
  .team-carousel__track{gap:16px !important;padding:0 0 8px !important}
  .team-card{flex:0 0 82vw !important;width:82vw !important;max-width:310px !important;height:184px !important;min-height:184px !important}
  .team-card__logo{top:18px !important;left:18px !important;width:104px !important;height:50px !important}
  .team-card__meta{right:18px !important;bottom:18px !important;width:145px;max-width:54%}
  .team-card__socials{left:18px !important;bottom:18px !important;pointer-events:auto}
  .team-card__socials a{opacity:1;transform:none;pointer-events:auto;width:30px !important;height:30px !important;padding:7px !important}
  .team-carousel__arrow{display:none !important}
}


/* =========================================================
   V74 — minimal team names only: no client strip, no personal logos
   ========================================================= */
.team-clients,
.team-section-title,
.team-card__logo{
  display:none !important;
}

.team-showcase{
  padding:44px 0 52px !important;
  background:#fff !important;
}
.team-carousel{
  width:min(1240px,100%) !important;
}
.team-carousel__viewport{
  width:calc(100% - 92px) !important;
  padding:10px 0 14px !important;
}
.team-carousel__track{
  gap:34px !important;
  padding:0 16px 10px !important;
  align-items:stretch;
}
.team-card{
  position:relative;
  flex:0 0 268px !important;
  width:268px !important;
  max-width:268px !important;
  height:148px !important;
  min-height:148px !important;
  border:0 !important;
  border-radius:24px !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
  isolation:isolate;
}
/* Two very light architectural lines instead of a visible box. */
.team-card::before,
.team-card::after{
  content:"";
  position:absolute;
  right:18px;
  left:18px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(74,114,114,.24),transparent);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none;
}
.team-card::before{top:14px;opacity:.55}
.team-card::after{bottom:14px;opacity:.38}
.team-card:hover::before,
.team-card:focus-within::before,
.team-card:hover::after,
.team-card:focus-within::after{
  opacity:1;
  transform:scaleX(.96);
}
.team-card:hover,
.team-card:focus-within{
  background:linear-gradient(135deg,rgba(134,185,178,.08),rgba(208,214,214,.04)) !important;
  transform:none !important;
}

.team-card__meta{
  position:absolute !important;
  top:50% !important;
  right:22px !important;
  bottom:auto !important;
  left:auto !important;
  width:178px !important;
  max-width:68% !important;
  transform:translateY(-50%) !important;
  text-align:right !important;
  z-index:2;
}
.team-card:hover .team-card__meta,
.team-card:focus-within .team-card__meta{
  top:50% !important;
  right:22px !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
}
.team-card__meta strong{
  display:block;
  margin:0 !important;
  color:rgba(74,114,114,.70) !important;
  font-size:11px !important;
  line-height:1.45 !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
}
.team-card__meta span{
  display:block;
  margin-top:7px !important;
  color:#4A7272 !important;
  font-size:17px !important;
  line-height:1.5 !important;
  font-weight:700 !important;
}

/* Contact actions: lower-left and rise upward on hover, without crowding text. */
.team-card__socials{
  position:absolute !important;
  left:20px !important;
  bottom:25px !important;
  display:flex !important;
  flex-direction:column-reverse !important;
  align-items:center;
  gap:7px !important;
  z-index:3;
  pointer-events:none;
}
.team-card__socials a{
  width:30px !important;
  height:30px !important;
  padding:7px !important;
  display:grid;
  place-items:center;
  border-radius:50% !important;
  border:1px solid rgba(74,114,114,.16) !important;
  background:rgba(255,255,255,.88) !important;
  box-shadow:0 5px 14px rgba(13,48,53,.06) !important;
  opacity:0;
  transform:translateY(8px) scale(.96);
  pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,background-color .18s ease,border-color .18s ease;
}
.team-card:hover .team-card__socials,
.team-card:focus-within .team-card__socials{pointer-events:auto}
.team-card:hover .team-card__socials a,
.team-card:focus-within .team-card__socials a{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.team-card:hover .team-card__socials a:nth-child(1),
.team-card:focus-within .team-card__socials a:nth-child(1){transition-delay:.00s}
.team-card:hover .team-card__socials a:nth-child(2),
.team-card:focus-within .team-card__socials a:nth-child(2){transition-delay:.045s}
.team-card:hover .team-card__socials a:nth-child(3),
.team-card:focus-within .team-card__socials a:nth-child(3){transition-delay:.09s}
.team-card__socials a:hover,
.team-card__socials a:focus-visible{
  background:#4A7272 !important;
  border-color:#4A7272 !important;
  outline:none;
}
.team-card__socials a img{
  width:100% !important;
  height:100% !important;
  object-fit:contain;
  filter:none !important;
}
.team-card__socials a:hover img,
.team-card__socials a:focus-visible img{
  filter:brightness(0) invert(1) !important;
}

.team-carousel__arrow{
  width:38px !important;
  height:38px !important;
  background:rgba(134,185,178,.68) !important;
  color:#fff !important;
  box-shadow:none !important;
  opacity:.72;
}
.team-carousel__arrow:hover,
.team-carousel__arrow:focus-visible{
  background:#4A7272 !important;
  opacity:1;
}

@media(max-width:980px){
  .team-carousel__viewport{width:calc(100% - 64px) !important}
  .team-card{
    flex-basis:252px !important;
    width:252px !important;
    max-width:252px !important;
    height:142px !important;
    min-height:142px !important;
  }
  .team-card__meta{right:20px !important;width:168px !important;}
  .team-card__meta span{font-size:16px !important;}
}

@media(max-width:680px){
  .team-showcase{padding:32px 0 38px !important;}
  .team-carousel__viewport{width:100% !important;padding-inline:16px !important;}
  .team-carousel__track{gap:16px !important;padding:0 0 8px !important;}
  .team-card{
    flex:0 0 78vw !important;
    width:78vw !important;
    max-width:286px !important;
    height:136px !important;
    min-height:136px !important;
  }
  .team-card__meta{
    right:18px !important;
    width:166px !important;
    max-width:68% !important;
  }
  .team-card__meta strong{font-size:10px !important;}
  .team-card__meta span{font-size:15px !important;margin-top:6px !important;}
  .team-card__socials{
    left:16px !important;
    bottom:19px !important;
    pointer-events:auto !important;
  }
  .team-card__socials a{
    width:29px !important;
    height:29px !important;
    padding:7px !important;
    opacity:1;
    transform:none;
    pointer-events:auto;
    background:rgba(255,255,255,.92) !important;
  }
  .team-carousel__arrow{display:none !important;}
}


/* =========================================================
   V75 — transparent team cards with minimalist person logos
   ========================================================= */
.team-showcase{
  padding:36px 0 48px !important;
  background:#fff !important;
}
.team-carousel__track{
  gap:32px !important;
  padding:0 18px 10px !important;
  align-items:stretch !important;
}
.team-card{
  position:relative;
  flex:0 0 286px !important;
  width:286px !important;
  max-width:286px !important;
  height:160px !important;
  min-height:160px !important;
  border:0 !important;
  border-radius:24px !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:hidden !important;
  transform:none !important;
  isolation:isolate;
}
.team-card::before,
.team-card::after{
  display:none !important;
}
.team-card:hover,
.team-card:focus-within{
  background:transparent !important;
  box-shadow:none !important;
  transform:none !important;
}

/* Person logo: fixed, minimal, complete, transparent, top-left. */
.team-card__logo{
  display:flex !important;
  position:absolute !important;
  top:15px !important;
  left:17px !important;
  width:96px !important;
  height:42px !important;
  align-items:flex-start;
  justify-content:flex-start;
  z-index:3;
  pointer-events:none;
  opacity:.92;
  overflow:visible;
}
.team-card__logo img{
  display:block !important;
  width:auto !important;
  height:auto !important;
  max-width:100% !important;
  max-height:100% !important;
  object-fit:contain !important;
  object-position:left top !important;
  background:transparent !important;
  box-shadow:none !important;
  filter:none !important;
  transform:none !important;
}
.team-card:hover .team-card__logo,
.team-card:focus-within .team-card__logo{
  opacity:1;
}

/* Name + role stay fixed at bottom-right. */
.team-card__meta{
  position:absolute !important;
  top:auto !important;
  right:18px !important;
  bottom:17px !important;
  left:auto !important;
  width:158px !important;
  max-width:58% !important;
  transform:none !important;
  text-align:right !important;
  direction:rtl;
  z-index:3;
}
.team-card:hover .team-card__meta,
.team-card:focus-within .team-card__meta{
  top:auto !important;
  right:18px !important;
  bottom:17px !important;
  transform:none !important;
}
.team-card__meta strong{
  display:block;
  margin:0 !important;
  color:rgba(74,114,114,.72) !important;
  font-size:10px !important;
  line-height:1.5 !important;
  font-weight:600 !important;
  letter-spacing:0 !important;
}
.team-card__meta span{
  display:block;
  margin-top:5px !important;
  color:#4A7272 !important;
  font-size:14px !important;
  line-height:1.55 !important;
  font-weight:700 !important;
}

/* Contact actions: horizontal at bottom-left; reveal from top to bottom. */
.team-card__socials{
  position:absolute !important;
  left:17px !important;
  bottom:16px !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:7px !important;
  z-index:4;
  pointer-events:none;
}
.team-card__socials a{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  padding:7px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  border:1px solid rgba(74,114,114,.14) !important;
  background:rgba(255,255,255,.90) !important;
  box-shadow:none !important;
  opacity:0;
  transform:translateY(-12px) !important;
  pointer-events:none;
  transition:opacity .18s ease,transform .20s ease,background-color .18s ease,border-color .18s ease !important;
}
/* Phone: no big round button — only the phone symbol. */
.team-card__socials a:first-child{
  width:30px !important;
  height:30px !important;
  padding:5px !important;
  border-color:transparent !important;
  background:transparent !important;
}
.team-card__socials a img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  filter:none !important;
}
.team-card__socials a:first-child img{
  filter:none !important;
}
.team-card:hover .team-card__socials,
.team-card:focus-within .team-card__socials{
  pointer-events:auto !important;
}
.team-card:hover .team-card__socials a,
.team-card:focus-within .team-card__socials a{
  opacity:1 !important;
  transform:translateY(0) !important;
  pointer-events:auto !important;
}
.team-card:hover .team-card__socials a:nth-child(1),
.team-card:focus-within .team-card__socials a:nth-child(1){transition-delay:.00s !important}
.team-card:hover .team-card__socials a:nth-child(2),
.team-card:focus-within .team-card__socials a:nth-child(2){transition-delay:.055s !important}
.team-card:hover .team-card__socials a:nth-child(3),
.team-card:focus-within .team-card__socials a:nth-child(3){transition-delay:.11s !important}
.team-card__socials a:hover,
.team-card__socials a:focus-visible{
  background:#4A7272 !important;
  border-color:#4A7272 !important;
  outline:none !important;
}
.team-card__socials a:hover img,
.team-card__socials a:focus-visible img{
  filter:brightness(0) invert(1) !important;
}
.team-card__socials a:first-child:hover,
.team-card__socials a:first-child:focus-visible{
  background:transparent !important;
  border-color:transparent !important;
}
.team-card__socials a:first-child:hover img,
.team-card__socials a:first-child:focus-visible img{
  filter:none !important;
}

@media(max-width:980px){
  .team-card{
    flex-basis:264px !important;
    width:264px !important;
    max-width:264px !important;
    height:154px !important;
    min-height:154px !important;
  }
  .team-card__logo{width:88px !important;height:38px !important;top:14px !important;left:16px !important;}
  .team-card__meta{right:16px !important;bottom:16px !important;width:150px !important;}
  .team-card__socials{left:16px !important;bottom:15px !important;}
}

@media(max-width:680px){
  .team-showcase{padding:28px 0 36px !important;}
  .team-carousel__viewport{width:100% !important;padding-inline:16px !important;}
  .team-carousel__track{gap:14px !important;padding:0 0 8px !important;}
  .team-card{
    flex:0 0 82vw !important;
    width:82vw !important;
    max-width:290px !important;
    height:148px !important;
    min-height:148px !important;
  }
  .team-card__logo{top:13px !important;left:15px !important;width:82px !important;height:35px !important;}
  .team-card__meta{right:15px !important;bottom:15px !important;width:145px !important;max-width:58% !important;}
  .team-card__meta strong{font-size:9.5px !important;}
  .team-card__meta span{font-size:13px !important;margin-top:4px !important;}
  .team-card__socials{left:15px !important;bottom:14px !important;pointer-events:auto !important;}
  .team-card__socials a{
    width:29px !important;
    height:29px !important;
    min-width:29px !important;
    padding:7px !important;
    opacity:1 !important;
    transform:none !important;
    pointer-events:auto !important;
  }
  .team-card__socials a:first-child{width:29px !important;height:29px !important;padding:5px !important;}
  .team-carousel__arrow{display:none !important;}
}


/* =========================================================
   V76 — refined team separation + outward arrows
   ========================================================= */
.team-carousel__track{
  gap:48px !important;
  padding-left:24px !important;
  padding-right:24px !important;
}

.team-card{
  flex:0 0 268px !important;
  width:268px !important;
  max-width:268px !important;
  height:150px !important;
  min-height:150px !important;
  border-radius:24px !important;
  border:1px solid rgba(134,185,178,.22) !important;
  background:rgba(229,234,234,.18) !important;
  -webkit-backdrop-filter:blur(6px) saturate(108%) !important;
  backdrop-filter:blur(6px) saturate(108%) !important;
  box-shadow:0 10px 28px rgba(13,48,53,.035) !important;
  overflow:hidden !important;
  transition:background-color .22s ease,border-color .22s ease,box-shadow .22s ease !important;
}
.team-card::before{
  content:"" !important;
  display:block !important;
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg,rgba(255,255,255,.34),rgba(134,185,178,.035));
  pointer-events:none;
  z-index:0;
}
.team-card::after{display:none !important;}
.team-card:hover,
.team-card:focus-within{
  background:rgba(229,234,234,.28) !important;
  border-color:rgba(134,185,178,.42) !important;
  box-shadow:0 14px 32px rgba(13,48,53,.06) !important;
  transform:none !important;
}

/* Tighter logo and identity block. */
.team-card__logo{
  top:14px !important;
  left:16px !important;
  width:84px !important;
  height:34px !important;
}
.team-card__meta{
  right:16px !important;
  bottom:15px !important;
  width:142px !important;
  max-width:56% !important;
}
.team-card:hover .team-card__meta,
.team-card:focus-within .team-card__meta{
  right:16px !important;
  bottom:15px !important;
}
.team-card__meta strong{
  font-size:9.5px !important;
  line-height:1.45 !important;
}
.team-card__meta span{
  margin-top:4px !important;
  font-size:13px !important;
  line-height:1.45 !important;
}
.team-card__socials{
  left:15px !important;
  bottom:14px !important;
  gap:6px !important;
}

/* Both navigation arrows physically point outward. */
.team-carousel__arrow{
  direction:ltr !important;
  unicode-bidi:isolate !important;
  font-family:Arial,sans-serif !important;
  font-size:23px !important;
  font-weight:400 !important;
  line-height:1 !important;
}
.team-carousel__arrow--left{left:18px !important;}
.team-carousel__arrow--right{right:18px !important;}

@media(max-width:980px){
  .team-carousel__track{gap:38px !important;}
  .team-card{
    flex-basis:252px !important;
    width:252px !important;
    max-width:252px !important;
    height:144px !important;
    min-height:144px !important;
  }
  .team-card__logo{width:78px !important;height:32px !important;}
  .team-card__meta{width:136px !important;}
}

@media(max-width:680px){
  .team-carousel__track{gap:20px !important;}
  .team-card{
    flex:0 0 78vw !important;
    width:78vw !important;
    max-width:276px !important;
    height:142px !important;
    min-height:142px !important;
    border-color:rgba(134,185,178,.24) !important;
    background:rgba(229,234,234,.20) !important;
  }
  .team-card__logo{top:13px !important;left:14px !important;width:74px !important;height:30px !important;}
  .team-card__meta{right:14px !important;bottom:14px !important;width:132px !important;}
  .team-card__meta span{font-size:12.5px !important;}
}


/* =========================================================
   V77 — active equal contact icons + chevron carousel arrows
   ========================================================= */
/* All three contact buttons behave and look the same. */
.team-card__socials{
  pointer-events:none !important;
}
.team-card__socials a,
.team-card__socials a:first-child{
  width:30px !important;
  height:30px !important;
  padding:7px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:50% !important;
  border:1px solid rgba(74,114,114,.16) !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 5px 14px rgba(13,48,53,.055) !important;
  cursor:pointer !important;
  text-decoration:none !important;
  -webkit-tap-highlight-color:transparent;
}
.team-card:hover .team-card__socials,
.team-card:focus-within .team-card__socials{
  pointer-events:auto !important;
}
.team-card:hover .team-card__socials a,
.team-card:focus-within .team-card__socials a{
  pointer-events:auto !important;
}
.team-card__socials a img,
.team-card__socials a:first-child img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  filter:none !important;
}
.team-card__socials a:hover,
.team-card__socials a:focus-visible,
.team-card__socials a:first-child:hover,
.team-card__socials a:first-child:focus-visible{
  background:#4A7272 !important;
  border-color:#4A7272 !important;
  outline:none !important;
}
.team-card__socials a:hover img,
.team-card__socials a:focus-visible img,
.team-card__socials a:first-child:hover img,
.team-card__socials a:first-child:focus-visible img{
  filter:brightness(0) invert(1) !important;
}

/* Chevron buttons inspired by the image lightbox controls. */
.team-carousel__arrow{
  width:46px !important;
  height:46px !important;
  border-radius:50% !important;
  border:1px solid rgba(255,255,255,.24) !important;
  background:rgba(74,114,114,.50) !important;
  color:#fff !important;
  -webkit-backdrop-filter:blur(8px) !important;
  backdrop-filter:blur(8px) !important;
  box-shadow:0 8px 22px rgba(13,48,53,.10) !important;
  font-family:Arial,sans-serif !important;
  font-size:38px !important;
  font-weight:400 !important;
  line-height:1 !important;
  opacity:1 !important;
  display:grid !important;
  place-items:center !important;
  padding:0 0 4px !important;
}
.team-carousel__arrow:hover,
.team-carousel__arrow:focus-visible{
  background:rgba(74,114,114,.72) !important;
  transform:none !important;
  outline:none !important;
}
.team-carousel__arrow--left{left:18px !important;}
.team-carousel__arrow--right{right:18px !important;}

@media(max-width:680px){
  .team-card__socials{pointer-events:auto !important;}
  .team-card__socials a,
  .team-card__socials a:first-child{
    width:29px !important;
    height:29px !important;
    padding:7px !important;
    pointer-events:auto !important;
  }
}


/* =========================================================
   V80 — whole team card opens the person's page
   ========================================================= */
.team-card{position:relative !important}
.team-card__hit{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  border-radius:inherit;
  cursor:pointer;
  text-decoration:none;
  background:transparent;
}
.team-card__logo,
.team-card__meta{position:relative;z-index:3;pointer-events:none}
.team-card__socials{z-index:5 !important;pointer-events:none}
.team-card:hover .team-card__socials,
.team-card:focus-within .team-card__socials{pointer-events:auto}
.team-card__socials a{pointer-events:auto}

/* =========================================================
   V84 — centered footer loop between two bottom rules
   ========================================================= */
.footer-bottom{
  width:min(1320px,100%) !important;
  max-width:1320px !important;
  min-height:132px !important;
  margin:24px auto 0 !important;
  padding:14px 0 !important;
  border-top:1px solid rgba(74,114,114,.18) !important;
  border-bottom:1px solid rgba(74,114,114,.18) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  overflow:hidden !important;
}
.footer-bottom > span{
  display:none !important;
}
.footer-loop{
  display:block !important;
  width:190px !important;
  height:auto !important;
  max-width:58vw !important;
  margin:0 auto !important;
  object-fit:contain !important;
  flex:0 0 auto;
}
@media(max-width:680px){
  .footer-bottom{
    min-height:104px !important;
    margin-top:20px !important;
    padding:10px 0 !important;
  }
  .footer-loop{
    width:150px !important;
    max-width:62vw !important;
  }
}

/* =========================================================
   V85 — footer upper background ends before loop; clean white loop area
   ========================================================= */
.footer{
  position:relative !important;
  padding:0 0 28px !important;
  background:#fff !important;
  overflow:visible !important;
}
.footer-upper{
  width:100% !important;
  padding:42px 5vw 24px !important;
  background:var(--paper,#f8f8f5) !important;
}
.footer-upper .footer-shell{
  width:100% !important;
  max-width:1320px !important;
  margin:0 auto !important;
}
.footer-bottom{
  width:min(1320px,calc(100% - 10vw)) !important;
  max-width:1320px !important;
  min-height:132px !important;
  margin:0 auto !important;
  padding:14px 0 !important;
  border-top:0 !important;
  border-bottom:0 !important;
  background:#fff !important;
}
@media(max-width:680px){
  .footer{
    padding:0 0 22px !important;
  }
  .footer-upper{
    padding:28px 16px 20px !important;
  }
  .footer-bottom{
    width:calc(100% - 32px) !important;
    min-height:104px !important;
    margin:0 auto !important;
    padding:10px 0 !important;
  }
}

/* =========================================================
   V86 — 40px shorter white footer-loop area + exact centering
   ========================================================= */
.footer{
  padding-bottom:0 !important;
}
.footer-bottom{
  box-sizing:border-box !important;
  height:148px !important;
  min-height:148px !important;
  padding:0 !important;
  margin:0 auto !important;
  display:grid !important;
  place-items:center !important;
  text-align:center !important;
  background:#fff !important;
}
.footer-loop{
  display:block !important;
  margin:auto !important;
  align-self:center !important;
  justify-self:center !important;
}
@media(max-width:680px){
  .footer{
    padding-bottom:0 !important;
  }
  .footer-bottom{
    height:106px !important;
    min-height:106px !important;
    padding:0 !important;
    margin:0 auto !important;
    display:grid !important;
    place-items:center !important;
  }
  .footer-loop{
    margin:auto !important;
    align-self:center !important;
    justify-self:center !important;
  }
}

/* V90 — visual loader failsafe. JS still hides it normally around page load. */
@keyframes bermorLoaderFailsafeV90{
  to{opacity:0;visibility:hidden;pointer-events:none}
}
.loader:not(.hidden){animation:bermorLoaderFailsafeV90 .01s linear 4s forwards}
.loader:not(.hidden) .loader-mark{animation:pulse 1.05s infinite alternate}

/* =========================================================
   V97 — loader artwork + compositor team loop
   ========================================================= */
.loader-mark.loader-mark--image{
  width:92px!important;
  height:92px!important;
  border:0!important;
  border-radius:0!important;
  object-fit:contain!important;
  display:block!important;
  background:transparent!important;
  color:transparent!important;
}
.team-carousel__viewport{
  overflow:hidden!important;
  scroll-behavior:auto!important;
  overscroll-behavior-x:none!important;
}
.team-carousel__track{
  transform:translate3d(0,0,0);
  will-change:transform;
  backface-visibility:hidden;
}
@media(max-width:680px){
  .loader-mark.loader-mark--image{width:78px!important;height:78px!important}
}

/* =========================================================
   V102 — align all manager names to one visual center line
   ========================================================= */
/* The role may wrap differently by person/language, but the name itself is
   anchored to the same bottom slot on every card. */
.team-card__meta{
  height:52px !important;
}
.team-card__meta > strong{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:24px !important;
  margin:0 !important;
}
.team-card__meta > span{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:0 !important;
  height:20px !important;
  margin:0 !important;
  line-height:20px !important;
  white-space:nowrap !important;
}
@media(max-width:680px){
  .team-card__meta{
    height:50px !important;
  }
  .team-card__meta > strong{
    bottom:23px !important;
  }
  .team-card__meta > span{
    height:19px !important;
    line-height:19px !important;
  }
}


/* =========================================================
   V103 — Bermorning archive + exact manager-name center alignment
   ========================================================= */
.team-card__meta{
  position:absolute !important;
  left:12px !important;
  right:12px !important;
  bottom:30px !important;
  height:64px !important;
  display:grid !important;
  grid-template-rows:36px 22px !important;
  align-content:end !important;
  justify-items:center !important;
  gap:6px !important;
}
.team-card__meta > strong,
.team-card__meta > span{
  position:static !important;
  margin:0 !important;
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
}
.team-card__meta > strong{
  min-height:36px !important;
  line-height:1.35 !important;
}
.team-card__meta > span{
  min-height:22px !important;
  line-height:1.2 !important;
  white-space:nowrap !important;
}
.team-card:hover .team-card__meta,
.team-card:focus-within .team-card__meta{bottom:76px !important;}
@media(max-width:680px){
  .team-card__meta{height:62px !important;grid-template-rows:34px 20px !important;bottom:74px !important;gap:5px !important;}
  .team-card__meta > strong{min-height:34px !important;}
  .team-card__meta > span{min-height:20px !important;}
}
.team-directory-card__text{
  display:grid !important;
  grid-template-rows:24px 24px !important;
  align-content:center !important;
  justify-items:start !important;
  gap:4px !important;
}
.team-directory-card__text small,
.team-directory-card__text strong{
  margin:0 !important;
  display:flex !important;
  align-items:center !important;
}
body.lang-rtl .team-directory-card__text{
  justify-items:end !important;
  text-align:right !important;
}
body:not(.lang-rtl) .team-directory-card__text{
  justify-items:start !important;
  text-align:left !important;
}


/* V109 — language switch visual order: FA / EN / FR / DE */
.language-switch .language-option[data-lang="fa"]{order:1}
.language-switch .language-option[data-lang="en"]{order:2}
.language-switch .language-option[data-lang="fr"]{order:3}
.language-switch .language-option[data-lang="de"]{order:4}


/* =========================================================
   V121 — desktop service pricing: prevent clipping on short laptop viewports
   - The JS expands .services-hub to the actual open panel height.
   - Visible overflow prevents the rounded pricing card from being cut during layout.
   ========================================================= */
@media(min-width:821px){
  .services-hub.is-panel-open{
    overflow:visible !important;
  }
  .service-panel__card--pricing{
    overflow:hidden;
  }
}


/* =========================================================
   V123 — Safari desktop hero tagline high-resolution compatibility
   Safari uses a dedicated 960×540 transparent animated WebP derived
   from the original 1920×1080 motion, preventing Retina upscaling blur.
   Firefox/Chrome and mobile behavior remain unchanged.
   ========================================================= */
@media (min-width:769px){
  html.bermor-safari .hero-tagline-motion,
  html.bermor-safari .hero-tagline-fallback{
    display:none !important;
  }
  html.bermor-safari .hero-tagline-safari{
    display:block !important;
    width:480px !important;
    max-width:100% !important;
    height:auto !important;
    margin-left:auto !important;
    margin-right:0 !important;
    object-fit:contain !important;
    transform:translate(46px,-40px) !important;
    transform-origin:top right !important;
    background:transparent !important;
    image-rendering:auto !important;
    -webkit-transform:translate(46px,-40px) !important;
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
}

/* =========================================================
   V125 — one cross-browser hero tagline + team polish
   - One optimized transparent animated WebP is used by Safari/Firefox/Chrome.
   - 960×540 source preserves Retina sharpness while using half the frame count
     of V123 to keep playback at the intended speed on Safari.
   - Team typography is slightly larger and hover no longer adds a card shadow.
   ========================================================= */
.hero-tagline-motion,
.hero-tagline-fallback,
.hero-tagline-safari{
  display:none !important;
}
.hero-tagline-universal{
  display:block !important;
  width:480px !important;
  max-width:100% !important;
  height:auto !important;
  margin-left:auto !important;
  margin-right:0 !important;
  object-fit:contain !important;
  transform:translate(46px,-40px) !important;
  transform-origin:top right !important;
  background:transparent !important;
  image-rendering:auto !important;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
@media(max-width:768px){
  .hero-tagline-universal{
    width:min(76vw,380px) !important;
    max-width:none !important;
    height:auto !important;
    margin:0 3vw 0 auto !important;
    transform:none !important;
    position:relative !important;
    z-index:3 !important;
  }
  .hero-tagline-wrap{
    min-height:72px !important;
    display:flex !important;
    justify-content:flex-end !important;
    align-items:center !important;
    overflow:visible !important;
  }
}

.team-card__meta > strong{
  font-size:11px !important;
}
.team-card__meta > span{
  font-size:14.5px !important;
}
.team-card:hover,
.team-card:focus-within{
  box-shadow:none !important;
}
@media(max-width:680px){
  .team-card__meta > strong{font-size:10.5px !important;}
  .team-card__meta > span{font-size:13.5px !important;}
}

/* =========================================================
   V126 — cross-browser tagline timing + team cards without shadow
   - APNG uses the source WebM timing at 24 fps for consistent playback.
   - No team card shadow in moving, idle, hover, or keyboard-focus states.
   ========================================================= */
.hero-tagline-picture{
  display:block !important;
  width:480px !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:0 !important;
  transform:translate(46px,-40px) !important;
  transform-origin:top right !important;
}
.hero-tagline-picture .hero-tagline-universal{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 !important;
  transform:none !important;
  background:transparent !important;
  image-rendering:auto !important;
}
.team-card,
.team-card:hover,
.team-card:focus,
.team-card:focus-visible,
.team-card:focus-within{
  box-shadow:none !important;
  filter:none !important;
}
@media(max-width:768px){
  .hero-tagline-picture{
    width:min(76vw,380px) !important;
    max-width:none !important;
    margin:0 3vw 0 auto !important;
    transform:none !important;
    position:relative !important;
    z-index:3 !important;
  }
}

/* =========================================================
   V128 — cross-browser carousel/media compatibility pass
   - SVG chevrons remove Safari/Firefox/Chromium font-glyph differences.
   - Team cards are mouse-draggable while preserving the seamless loop.
   - One trimmed, lower-frame-rate APNG tagline is used at every viewport size.
   ========================================================= */
.hero-tagline-wrap{
  overflow:visible !important;
  box-sizing:border-box !important;
}
.hero-tagline-picture{
  display:block !important;
  width:min(455px,calc(100% - 24px)) !important;
  max-width:calc(100% - 24px) !important;
  margin-left:auto !important;
  margin-right:0 !important;
  transform:translateY(-14px) !important;
  transform-origin:top right !important;
  overflow:visible !important;
}
.hero-tagline-picture .hero-tagline-universal{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  margin:0 !important;
  transform:none !important;
  object-fit:contain !important;
  background:transparent !important;
  image-rendering:auto !important;
}
@media(max-width:768px){
  .hero-tagline-wrap{
    min-height:76px !important;
    padding-inline:12px !important;
  }
  .hero-tagline-picture{
    width:min(76vw,360px) !important;
    max-width:calc(100% - 24px) !important;
    margin-left:auto !important;
    margin-right:0 !important;
    transform:translateY(-8px) !important;
  }
}

.team-carousel__viewport{
  cursor:grab !important;
  -webkit-user-select:none !important;
  user-select:none !important;
}
.team-carousel__viewport.is-pointer-dragging{
  cursor:grabbing !important;
}
.team-carousel__viewport.is-pointer-dragging .team-card,
.team-carousel__viewport.is-pointer-dragging .team-card *{
  -webkit-user-select:none !important;
  user-select:none !important;
}
.team-carousel__arrow{
  background:#D0D6D6 !important;
  color:#fff !important;
  box-shadow:none !important;
  border:0 !important;
  padding:0 !important;
  font-size:0 !important;
  line-height:0 !important;
  opacity:1 !important;
  display:grid !important;
  place-items:center !important;
  transition:background-color .18s ease,transform .18s ease !important;
}
.team-carousel__arrow:hover,
.team-carousel__arrow:focus-visible{
  background:#4A7272 !important;
  color:#fff !important;
  transform:none !important;
  outline:none !important;
}
.team-carousel__arrow svg,
.gallery-lightbox__nav svg{
  display:block !important;
  width:19px !important;
  height:19px !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2.15 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  pointer-events:none !important;
}
.gallery-lightbox__nav{
  background:#D0D6D6 !important;
  color:#fff !important;
  font-size:0 !important;
  line-height:0 !important;
  padding:0 !important;
  border:0 !important;
  display:grid !important;
  place-items:center !important;
}
.gallery-lightbox__nav:hover,
.gallery-lightbox__nav:focus-visible{
  background:#4A7272 !important;
  color:#fff !important;
}

/* The footer animation is an RGBA APNG now, so every browser uses the same
   transparent compositor path instead of Safari decoding VP9 alpha as black. */
.footer-loop{
  background:transparent !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* Keep responsive video surfaces predictable in Safari and other engines. */
.portfolio-video-stage video{
  max-width:100% !important;
  max-height:100% !important;
}
.portfolio-video-card:fullscreen .portfolio-video-stage video,
.portfolio-video-card:-webkit-full-screen .portfolio-video-stage video{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
}


/* =========================================================
   V130 — curved cross-browser carousel arrows + click-safe drag
   ========================================================= */
.team-carousel__arrow,
.gallery-lightbox__nav{
  background:#D0D6D6 !important;
  color:#fff !important;
}
.team-carousel__arrow:hover,
.team-carousel__arrow:focus-visible,
.gallery-lightbox__nav:hover,
.gallery-lightbox__nav:focus-visible{
  background:#4A7272 !important;
  color:#fff !important;
}
.team-carousel__arrow svg,
.gallery-lightbox__nav svg{
  width:22px !important;
  height:22px !important;
  overflow:visible !important;
}
.team-carousel__arrow svg path,
.gallery-lightbox__nav svg path{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2.35 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  vector-effect:non-scaling-stroke !important;
}


/* =========================================================
   V131 — smooth curved navigation arrows
   One continuous rounded curve, identical in all browsers.
   ========================================================= */
.team-carousel__arrow svg,
.gallery-lightbox__nav svg{
  width:24px !important;
  height:24px !important;
  overflow:visible !important;
}
.team-carousel__arrow svg path,
.gallery-lightbox__nav svg path{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2.05 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  vector-effect:non-scaling-stroke !important;
}


/* =========================================================
   V132 — focused fixes only
   - Team identity block returns to idle position after mouse leave even if a
     link inside the card still owns focus.
   - Gallery navigation keeps the curved outward-facing shape cross-browser.
   ========================================================= */
@media (hover:hover) and (pointer:fine){
  .team-card:focus-within:not(:hover) .team-card__meta{
    bottom:30px !important;
  }
}
.gallery-lightbox__nav svg path{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2.05 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  vector-effect:non-scaling-stroke !important;
}

/* =========================================================
   V133 — exact scroll-to-top chevron geometry for all carousel arrows
   The icon is one shared upward chevron, rotated outward per side.
   This avoids browser/font differences and keeps Safari/Firefox/Chromium identical.
   ========================================================= */
.team-carousel__arrow svg,
.gallery-lightbox__nav svg{
  width:22px !important;
  height:22px !important;
  overflow:visible !important;
  transform-origin:50% 50% !important;
}
.team-carousel__arrow svg path,
.gallery-lightbox__nav svg path{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2.2 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  vector-effect:non-scaling-stroke !important;
}
.team-carousel__arrow--left svg,
.gallery-lightbox__nav--prev svg{
  transform:rotate(-90deg) !important;
}
.team-carousel__arrow--right svg,
.gallery-lightbox__nav--next svg{
  transform:rotate(90deg) !important;
}

/* =========================================================
   V135 — smooth outward arrows, one geometry in every browser
   Left uses the native curve; right mirrors the same curve.
   No font glyphs and no 90-degree chevron rotation.
   ========================================================= */
.team-carousel__arrow svg,
.gallery-lightbox__nav svg{
  width:25px !important;
  height:25px !important;
  overflow:visible !important;
  transform-origin:50% 50% !important;
}
.team-carousel__arrow svg path,
.gallery-lightbox__nav svg path{
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:2.15 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  vector-effect:non-scaling-stroke !important;
}
.team-carousel__arrow--left svg,
.gallery-lightbox__nav--prev svg{
  transform:none !important;
}
.team-carousel__arrow--right svg,
.gallery-lightbox__nav--next svg{
  transform:scaleX(-1) !important;
}

/* =========================================================
   V136 — gallery arrows: keep V135 geometry, reverse direction only.
   Do not alter the team-carousel arrow geometry or any button styling.
   ========================================================= */
.gallery-lightbox__nav--prev svg{
  transform:scaleX(-1) !important;
}
.gallery-lightbox__nav--next svg{
  transform:none !important;
}

/* =========================================================
   V140 — homepage editorial inserts based on V138 only
   Add the supplied artwork into empty spaces without touching
   existing typography, object styling, or responsive systems.
   ========================================================= */
.home-accent-row,
.home-feature-art{
  box-sizing:border-box;
  width:min(1320px,calc(100% - 48px));
  margin:26px auto;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.home-accent-row__inner,
.home-feature-art__inner{
  display:flex;
  width:100%;
  direction:ltr;
  align-items:flex-start;
  justify-content:space-between;
  gap:32px;
}
.home-accent-row--mid .home-accent-row__inner{
  justify-content:flex-start;
}
.home-accent-row--between .home-accent-row__inner{
  justify-content:flex-end;
}
.home-accent-card{
  flex:0 0 auto;
  width:min(300px,100%);
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.home-accent-card img,
.home-feature-art__image{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  object-fit:contain;
}
.home-feature-art{
  margin:30px auto 34px;
}
.home-feature-art__inner{
  justify-content:center;
}
.home-feature-art__image{
  width:min(100%,1100px);
}

/* Keep the supplied art roomy and stable when the window is not full-screen. */
@media (max-width:1100px){
  .home-accent-row,
  .home-feature-art{
    width:calc(100% - 40px);
  }
  .home-accent-card{
    width:min(280px,100%);
  }
  .home-feature-art__image{
    width:min(100%,960px);
  }
}
@media (max-width:860px){
  .home-accent-row__inner,
  .home-feature-art__inner{
    gap:24px;
    flex-wrap:wrap;
  }
  .home-accent-row--top .home-accent-row__inner,
  .home-accent-row--mid .home-accent-row__inner,
  .home-accent-row--between .home-accent-row__inner{
    justify-content:center;
  }
  .home-accent-card{
    width:min(300px,calc(100vw - 56px));
  }
}
@media (max-width:680px){
  .home-accent-row,
  .home-feature-art{
    width:calc(100% - 24px);
    margin:20px auto;
  }
  .home-accent-row__inner,
  .home-feature-art__inner{
    justify-content:center;
    gap:18px;
  }
  .home-accent-card{
    width:min(300px,calc(100vw - 32px));
  }
  .home-feature-art__image{
    width:min(100%,calc(100vw - 32px));
  }
}

/* V140 — keep gallery arrows the same shape but reverse only their direction. */
.gallery-lightbox__nav{
  background:#D0D6D6 !important;
}
.gallery-lightbox__nav--prev svg{
  transform:none !important;
}
.gallery-lightbox__nav--next svg{
  transform:scaleX(-1) !important;
}
.team-carousel__arrow{
  background:#D0D6D6 !important;
}
.team-carousel__arrow:hover,
.team-carousel__arrow:focus-visible,
.gallery-lightbox__nav:hover,
.gallery-lightbox__nav:focus-visible{
  background:#4A7272 !important;
}

/* =========================================================
   V141 — surgical homepage placement refinements only
   Base remains V140 (which itself is based on V138).
   ========================================================= */

/* Top pair: half-size; aligned to the 1024px hero pattern edges.
   Design sits above the proposal shortcut; Azadi mirrors it on the right. */
.hero{position:relative !important;}
.hero-doc-zone{
  position:relative !important;
  width:min(1024px,100%) !important;
  margin:-55px auto 22px !important;
}
.hero-doc-zone .hero-doc-links{
  width:100% !important;
  margin:0 !important;
}
.hero-doc-zone .home-accent-row--top{
  position:absolute !important;
  left:0 !important;
  right:0 !important;
  bottom:calc(100% + 12px) !important;
  width:100% !important;
  margin:0 !important;
  pointer-events:none !important;
}
.hero-doc-zone .home-accent-row--top .home-accent-row__inner{
  width:100% !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-end !important;
  gap:0 !important;
}
.home-accent-card{
  width:150px !important;
  max-width:150px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.home-accent-card img,
.home-feature-art__image{
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

/* Remove the old desktop dead-space under Services only while closed. */
.services-hub:not(.is-panel-open){
  min-height:0 !important;
}

/* Lamp: left side, below Services but visually closer to the top of the video. */
.home-accent-row--mid{
  width:min(1320px,calc(100% - 48px)) !important;
  margin:46px auto 6px !important;
}
.home-accent-row--mid .home-accent-row__inner{
  justify-content:flex-start !important;
}

/* Creativity: right side between portfolio icons and team section. */
.home-accent-row--between{
  width:min(1320px,calc(100% - 48px)) !important;
  margin:18px auto 18px !important;
}
.home-accent-row--between .home-accent-row__inner{
  justify-content:flex-end !important;
}

/* Main collage: half of the previous display size, with a roomier dedicated band. */
.home-feature-art{
  width:min(1320px,calc(100% - 48px)) !important;
  margin:38px auto 42px !important;
  padding:18px 0 !important;
}
.home-feature-art__inner{
  justify-content:center !important;
}
.home-feature-art__image{
  width:550px !important;
  max-width:100% !important;
  height:auto !important;
}

/* Gallery arrows: reverse direction only; preserve the existing curved geometry/style. */
.gallery-lightbox__nav--prev svg{
  transform:scaleX(-1) !important;
}
.gallery-lightbox__nav--next svg{
  transform:none !important;
}
.team-carousel__arrow,
.gallery-lightbox__nav{
  background:#D0D6D6 !important;
}
.team-carousel__arrow:hover,
.team-carousel__arrow:focus-visible,
.gallery-lightbox__nav:hover,
.gallery-lightbox__nav:focus-visible{
  background:#4A7272 !important;
}

/* Responsive containment for the new images only. Existing site breakpoints remain untouched. */
@media (max-width:860px){
  .hero-doc-zone{
    width:calc(100% - 24px) !important;
    margin:-29px auto 16px !important;
    padding-top:82px !important;
  }
  .hero-doc-zone .home-accent-row--top{
    position:absolute !important;
    bottom:auto !important;
    top:0 !important;
  }
  .home-accent-card{
    width:min(150px,42vw) !important;
    max-width:min(150px,42vw) !important;
  }
  .home-accent-row--mid,
  .home-accent-row--between,
  .home-feature-art{
    width:calc(100% - 24px) !important;
  }
  .home-accent-row--mid .home-accent-row__inner{
    justify-content:flex-start !important;
    flex-wrap:nowrap !important;
  }
  .home-accent-row--between .home-accent-row__inner{
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;
  }
  .home-feature-art__image{
    width:min(550px,100%) !important;
  }
}
@media (max-width:480px){
  .hero-doc-zone{
    padding-top:72px !important;
  }
  .home-accent-card{
    width:min(130px,38vw) !important;
    max-width:min(130px,38vw) !important;
  }
  .home-accent-row--mid{margin-top:30px !important;}
  .home-feature-art{padding:10px 0 !important;}
}

/* =========================================================
   V142 — placement-only refinements requested after V141
   No typography, component sizing, menu, footer or existing responsive logic changed.
   ========================================================= */

/* Top art: keep both cards aligned to the same 1024px edges as hero-pattern.
   Left/design sits visually under the pattern; right/Azadi sits under the tagline.
   Document shortcuts start lower so they never touch the cards. */
.hero-doc-zone{
  width:min(1024px,100%) !important;
  margin:0 auto 20px !important;
  padding-top:176px !important;
}
.hero-doc-zone .home-accent-row--top{
  top:0 !important;
  bottom:auto !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  height:176px !important;
  margin:0 !important;
}
.hero-doc-zone .home-accent-row--top .home-accent-row__inner{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
}
.hero-doc-zone .home-accent-card--design,
.hero-doc-zone .home-accent-card--azadi{
  position:absolute !important;
}
.hero-doc-zone .home-accent-card--design{
  left:0 !important;
  top:-86px !important;
}
.hero-doc-zone .home-accent-card--azadi{
  right:0 !important;
  top:10px !important;
}
.hero-doc-zone .hero-doc-links{
  margin:0 !important;
}

/* Closed Services: remove the unused lower band. Lamp is directly below the
   Additional Services (left) column and uses the same max-width alignment. */
.services-hub:not(.is-panel-open){
  padding-bottom:18px !important;
}
.home-accent-row--mid{
  width:min(1320px,calc(100% - 96px)) !important;
  margin:0 auto 6px !important;
}
.home-accent-row--mid .home-accent-row__inner{
  justify-content:flex-start !important;
  align-items:flex-start !important;
}

/* Creativity card: align its right edge with the 1180px portfolio icon grid above it
   and remove the extra empty band between portfolio and team. */
.home-accent-row--between{
  width:min(1180px,calc(100% - 108px)) !important;
  margin:0 auto 6px !important;
}
.home-accent-row--between .home-accent-row__inner{
  justify-content:flex-end !important;
  align-items:flex-start !important;
}

@media (max-width:1100px){
  .hero-doc-zone{
    width:calc(100% - 40px) !important;
  }
  .home-accent-row--mid{
    width:calc(100% - 56px) !important;
  }
  .home-accent-row--between{
    width:calc(100% - 56px) !important;
  }
}

@media (max-width:860px){
  .hero-doc-zone{
    width:calc(100% - 24px) !important;
    margin:0 auto 16px !important;
    padding-top:150px !important;
  }
  .hero-doc-zone .home-accent-row--top{
    height:150px !important;
    top:0 !important;
  }
  .hero-doc-zone .home-accent-card--design{
    left:0 !important;
    top:-54px !important;
  }
  .hero-doc-zone .home-accent-card--azadi{
    right:0 !important;
    top:8px !important;
  }
  .services-hub:not(.is-panel-open){
    padding-bottom:12px !important;
  }
  .home-accent-row--mid,
  .home-accent-row--between{
    width:calc(100% - 24px) !important;
    margin-top:0 !important;
  }
  .home-accent-row--mid .home-accent-row__inner{
    justify-content:flex-start !important;
  }
  .home-accent-row--between .home-accent-row__inner{
    justify-content:flex-end !important;
  }
}

@media (max-width:480px){
  .hero-doc-zone{
    padding-top:128px !important;
  }
  .hero-doc-zone .home-accent-row--top{
    height:128px !important;
  }
  .hero-doc-zone .home-accent-card--design{
    top:-34px !important;
  }
  .hero-doc-zone .home-accent-card--azadi{
    top:8px !important;
  }
}


/* =========================================================
   V143 — precise homepage artwork placement fixes
   Requested adjustments only:
   - top two artworks aligned with the hero pattern edges
   - right artwork under tagline; left artwork under pattern
   - proposal moved lower so it does not touch the left artwork
   - lamp artwork directly below Additional Services and aligned
   - creativity artwork aligned with the portfolio icon grid above
   - extra whitespace removed
   ========================================================= */
.hero-doc-zone{
  position:relative !important;
  width:min(1024px,calc(100% - 48px)) !important;
  margin:-34px auto 10px !important;
  padding-top:146px !important;
}
.hero-doc-zone .home-accent-row--top{
  position:absolute !important;
  inset:0 0 auto 0 !important;
  width:100% !important;
  height:146px !important;
  margin:0 !important;
  pointer-events:none !important;
}
.hero-doc-zone .home-accent-row--top .home-accent-row__inner{
  position:relative !important;
  width:100% !important;
  height:100% !important;
  display:block !important;
}
.hero-doc-zone .home-accent-card--design,
.hero-doc-zone .home-accent-card--azadi{
  position:absolute !important;
  top:auto !important;
  bottom:auto !important;
}
.hero-doc-zone .home-accent-card--design{
  left:0 !important;
  top:0 !important;
}
.hero-doc-zone .home-accent-card--azadi{
  right:0 !important;
  top:28px !important;
}
.hero-doc-zone .hero-doc-links{
  width:100% !important;
  margin:0 !important;
  gap:14px !important;
  justify-content:flex-start !important;
  align-items:flex-start !important;
}
.hero-doc-zone .hero-doc-card[data-doc-type="proposal"]{
  margin-top:42px !important;
}

.services-hub:not(.is-panel-open){
  padding-bottom:18px !important;
  min-height:0 !important;
}
.home-accent-row--mid{
  width:min(1040px,calc(100% - 108px)) !important;
  margin:0 auto 0 !important;
}
.home-accent-row--mid .home-accent-row__inner{
  justify-content:flex-start !important;
  align-items:flex-start !important;
}
.home-accent-card--thinking{
  margin-left:0 !important;
}

.home-accent-row--between{
  width:min(1180px,calc(100% - 72px)) !important;
  margin:0 auto 8px !important;
}
.home-accent-row--between .home-accent-row__inner{
  justify-content:flex-end !important;
  align-items:flex-start !important;
}

@media (max-width:1100px){
  .hero-doc-zone{
    width:calc(100% - 40px) !important;
  }
  .home-accent-row--mid{
    width:calc(100% - 56px) !important;
  }
  .home-accent-row--between{
    width:calc(100% - 56px) !important;
  }
}

@media (max-width:860px){
  .hero-doc-zone{
    width:calc(100% - 24px) !important;
    margin:-12px auto 10px !important;
    padding-top:128px !important;
  }
  .hero-doc-zone .home-accent-row--top{
    height:128px !important;
  }
  .hero-doc-zone .home-accent-card--design{
    top:0 !important;
  }
  .hero-doc-zone .home-accent-card--azadi{
    top:18px !important;
  }
  .hero-doc-zone .hero-doc-card[data-doc-type="proposal"]{
    margin-top:30px !important;
  }
  .services-hub:not(.is-panel-open){
    padding-bottom:12px !important;
  }
  .home-accent-row--mid,
  .home-accent-row--between{
    width:calc(100% - 24px) !important;
    margin:0 auto 8px !important;
  }
}

@media (max-width:480px){
  .hero-doc-zone{
    padding-top:118px !important;
  }
  .hero-doc-zone .home-accent-row--top{
    height:118px !important;
  }
  .hero-doc-zone .home-accent-card--azadi{
    top:14px !important;
  }
  .hero-doc-zone .hero-doc-card[data-doc-type="proposal"]{
    margin-top:22px !important;
  }
}

/* =========================================================
   V144 — requested alignment-only correction
   No typography, sizing, menus, footer, or existing components changed.
   ========================================================= */

/* Top artwork: use the exact same 1024px horizontal frame as hero-pattern. */
.hero-doc-zone{
  width:min(1024px,100%) !important;
  margin:-34px auto 10px !important;
  padding-top:124px !important;
}
.hero-doc-zone .home-accent-row--top{
  height:124px !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
}
.hero-doc-zone .home-accent-row--top .home-accent-row__inner{
  width:100% !important;
  height:100% !important;
}
/* Left image moves upward; both outer edges stay aligned to hero-pattern. */
.hero-doc-zone .home-accent-card--design{
  left:0 !important;
  top:-36px !important;
}
.hero-doc-zone .home-accent-card--azadi{
  right:0 !important;
  top:28px !important;
}
/* Proposal returns to the same baseline as Brand Services Guide. */
.hero-doc-zone .hero-doc-card[data-doc-type="proposal"]{
  margin-top:0 !important;
}

/* Creativity artwork: right edge follows the exact portfolio icon grid above. */
.home-accent-row--between{
  width:min(1180px,calc(100% - 108px)) !important;
  margin:0 auto 8px !important;
}
.home-accent-row--between .home-accent-row__inner{
  justify-content:flex-end !important;
  align-items:flex-start !important;
}

@media (max-width:1100px){
  .hero-doc-zone{
    width:100% !important;
  }
  .home-accent-row--between{
    width:calc(100% - 108px) !important;
  }
}

@media (max-width:860px){
  .hero-doc-zone{
    width:100% !important;
    margin:-12px auto 10px !important;
    padding-top:116px !important;
  }
  .hero-doc-zone .home-accent-row--top{
    height:116px !important;
  }
  .hero-doc-zone .home-accent-card--design{
    top:-24px !important;
  }
  .hero-doc-zone .home-accent-card--azadi{
    top:18px !important;
  }
  .hero-doc-zone .hero-doc-card[data-doc-type="proposal"]{
    margin-top:0 !important;
  }
  .home-accent-row--between{
    width:calc(100% - 36px) !important;
  }
}

@media (max-width:480px){
  .hero-doc-zone{
    padding-top:106px !important;
  }
  .hero-doc-zone .home-accent-row--top{
    height:106px !important;
  }
  .hero-doc-zone .home-accent-card--design{
    top:-18px !important;
  }
  .hero-doc-zone .home-accent-card--azadi{
    top:12px !important;
  }
  .hero-doc-zone .hero-doc-card[data-doc-type="proposal"]{
    margin-top:0 !important;
  }
}

/* =========================================================
   V145 — screenshot-guided alignment only
   1) Azadi: move slightly upward and align to the visible right line of hero pattern.
   2) Design: move upward and align to the visible left line of hero pattern.
   3) Creativity: align to the marked line under the portfolio icons.
   Nothing else is changed.
   ========================================================= */
.hero-doc-zone .home-accent-card--design{
  left:60px !important;
  top:-58px !important;
}
.hero-doc-zone .home-accent-card--azadi{
  right:60px !important;
  top:8px !important;
}
.home-accent-card--creativity{
  margin-right:30px !important;
}

@media (max-width:1100px){
  .hero-doc-zone .home-accent-card--design{
    left:clamp(24px,5vw,60px) !important;
  }
  .hero-doc-zone .home-accent-card--azadi{
    right:clamp(24px,5vw,60px) !important;
  }
  .home-accent-card--creativity{
    margin-right:clamp(14px,2.6vw,30px) !important;
  }
}

@media (max-width:860px){
  .hero-doc-zone .home-accent-card--design{
    top:-38px !important;
  }
  .hero-doc-zone .home-accent-card--azadi{
    top:6px !important;
  }
}

@media (max-width:480px){
  .hero-doc-zone .home-accent-card--design{
    left:14px !important;
    top:-28px !important;
  }
  .hero-doc-zone .home-accent-card--azadi{
    right:14px !important;
    top:4px !important;
  }
  .home-accent-card--creativity{
    margin-right:10px !important;
  }
}

/* =========================================================
   V146 — screenshot-guided micro-positioning only
   1) document buttons: right + up, aligned to visible hero-pattern left line
   2) tagline: up, keeping air below the hero pattern
   3) Azadi artwork: up, while preserving gap below tagline
   4) Design artwork: up
   No typography, dimensions, menus, footer, services or global responsive logic changed.
   ========================================================= */
@media (min-width:861px){
  /* 1 */
  .hero-doc-zone .hero-doc-links{
    transform:translate(58px,-28px) !important;
  }

  /* 2 */
  .hero-tagline-picture{
    transform:translateY(-68px) !important;
  }

  /* 3 */
  .hero-doc-zone .home-accent-card--azadi{
    top:-52px !important;
  }

  /* 4 */
  .hero-doc-zone .home-accent-card--design{
    top:-112px !important;
  }
}

@media (max-width:860px) and (min-width:481px){
  .hero-doc-zone .hero-doc-links{
    transform:translate(24px,-18px) !important;
  }
  .hero-tagline-picture{
    transform:translateY(-38px) !important;
  }
  .hero-doc-zone .home-accent-card--azadi{
    top:-24px !important;
  }
  .hero-doc-zone .home-accent-card--design{
    top:-70px !important;
  }
}

@media (max-width:480px){
  .hero-doc-zone .hero-doc-links{
    transform:translate(8px,-12px) !important;
  }
  .hero-tagline-picture{
    transform:translateY(-24px) !important;
  }
  .hero-doc-zone .home-accent-card--azadi{
    top:-10px !important;
  }
  .hero-doc-zone .home-accent-card--design{
    top:-52px !important;
  }
}

/* =========================================================
   V147 — requested final micro-adjustments only
   1) move the two document buttons upward
   2) move the left DESIGN artwork upward
   3) move the hero tagline downward by 36px from V146
   Nothing else changed.
   ========================================================= */
@media (min-width:861px){
  .hero-doc-zone .hero-doc-links{
    transform:translate(58px,-54px) !important;
  }
  .hero-doc-zone .home-accent-card--design{
    top:-142px !important;
  }
  .hero-tagline-picture{
    transform:translateY(-32px) !important;
  }
}

@media (max-width:860px) and (min-width:481px){
  .hero-doc-zone .hero-doc-links{
    transform:translate(24px,-34px) !important;
  }
  .hero-doc-zone .home-accent-card--design{
    top:-94px !important;
  }
  .hero-tagline-picture{
    transform:translateY(-2px) !important;
  }
}

@media (max-width:480px){
  .hero-doc-zone .hero-doc-links{
    transform:translate(8px,-24px) !important;
  }
  .hero-doc-zone .home-accent-card--design{
    top:-70px !important;
  }
  .hero-tagline-picture{
    transform:translateY(12px) !important;
  }
}

/* =========================================================
   V148 — equal upward move for items 1, 2, 3
   - both document buttons move up
   - left DESIGN artwork moves up by the same amount
   - aligned closer with the right artwork reference line
   ========================================================= */
@media (min-width:861px){
  .hero-doc-zone .hero-doc-links{
    transform:translate(58px,-86px) !important;
  }
  .hero-doc-zone .home-accent-card--design{
    top:-174px !important;
  }
}

@media (max-width:860px) and (min-width:481px){
  .hero-doc-zone .hero-doc-links{
    transform:translate(24px,-56px) !important;
  }
  .hero-doc-zone .home-accent-card--design{
    top:-116px !important;
  }
}

@media (max-width:480px){
  .hero-doc-zone .hero-doc-links{
    transform:translate(8px,-40px) !important;
  }
  .hero-doc-zone .home-accent-card--design{
    top:-86px !important;
  }
}

/* =========================================================
   V149 — services must not move surrounding content when opened
   Keep Page-2 geometry identical in closed/open states. The menu panel overlays
   the section instead of expanding it, preventing scroll-anchor jumps.
   ========================================================= */
@media (min-width:821px){
  .services-hub,
  .services-hub.is-panel-open{
    min-height:0 !important;
    padding-bottom:18px !important;
    overflow:visible !important;
  }
}

/* =========================================================
   V150 — services alignment + no-jump service overlay
   Requested:
   - left/right service items aligned with the top decorative images
   - lower decorative images stay on the same visual guide lines
   - opening service buttons must not push or scroll the page content
   ========================================================= */

@media (min-width:821px){
  /* Keep the service grid on the same visual frame as the hero top images. */
  .services-hub{
    padding-top:32px !important;
    padding-bottom:28px !important;
    overflow:visible !important;
  }

  .services-hub__grid{
    max-width:1024px !important;
    gap:68px 96px !important;
    align-items:start !important;
  }

  /* Align the lower decorative cards to the same left/right guide lines. */
  .home-accent-row--mid,
  .home-accent-row--between{
    width:min(1024px,calc(100% - 48px)) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .home-accent-row--mid{
    margin-top:6px !important;
    margin-bottom:8px !important;
  }

  .home-accent-row--between{
    margin-top:8px !important;
    margin-bottom:10px !important;
  }

  .home-accent-row--mid .home-accent-row__inner{
    justify-content:flex-start !important;
    align-items:flex-start !important;
  }

  .home-accent-row--between .home-accent-row__inner{
    justify-content:flex-end !important;
    align-items:flex-start !important;
  }

  .home-accent-card--thinking,
  .home-accent-card--creativity{
    margin:0 !important;
  }

  /* Desktop service panel becomes a true overlay so nothing in the page jumps. */
  .services-hub__veil{
    position:fixed !important;
    inset:0 !important;
    z-index:1550 !important;
    background:rgba(255,255,255,.42) !important;
    -webkit-backdrop-filter:blur(6px) !important;
    backdrop-filter:blur(6px) !important;
  }

  .service-panel,
  .service-panel.panel-align-left,
  .service-panel.panel-align-right{
    position:fixed !important;
    top:var(--service-desktop-top, 180px) !important;
    width:min(980px,calc(100vw - 96px)) !important;
    max-width:980px !important;
    max-height:min(72vh,560px) !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch;
    margin:0 !important;
    z-index:1600 !important;
  }

  .service-panel.panel-align-left{
    left:max(24px, calc(50vw - 512px)) !important;
    right:auto !important;
  }

  .service-panel.panel-align-right{
    right:max(24px, calc(50vw - 512px)) !important;
    left:auto !important;
  }

  .service-panel__cards{
    align-items:start !important;
  }
}

@media (max-width:820px){
  .services-hub__grid{
    align-items:start !important;
  }
}

.services-hub,.service-panel{overflow-anchor:none !important;}

/* =========================================================
   V151 — equalize vertical spacing around the two new artworks
   Screenshot-guided placement only. No component sizes/typography changed.
   ========================================================= */

/* Creativity artwork between portfolio logos and team cards:
   move only the artwork upward so the visible top/bottom air is balanced. */
.home-accent-card--creativity{
  transform:translateY(-12px) !important;
}

/* Main collage between team section and footer:
   move only the artwork upward so its top/bottom air is balanced. */
.home-feature-art__image{
  transform:translateY(-22px) !important;
}

@media (max-width:860px){
  .home-accent-card--creativity{
    transform:translateY(-9px) !important;
  }
  .home-feature-art__image{
    transform:translateY(-16px) !important;
  }
}

@media (max-width:480px){
  .home-accent-card--creativity{
    transform:translateY(-6px) !important;
  }
  .home-feature-art__image{
    transform:translateY(-12px) !important;
  }
}

/* =========================================================
   V152 — exact shared horizontal guide alignment
   Align the top artworks, service icons, lower left artwork and
   creativity artwork to the same 1024px visual frame.
   Vertical positions and all other styling stay unchanged.
   ========================================================= */
@media (min-width:861px){
  .hero-doc-zone,
  .services-hub__grid,
  .home-accent-row--mid,
  .home-accent-row--between{
    width:min(1024px,calc(100% - 48px)) !important;
    max-width:1024px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    box-sizing:border-box !important;
  }

  .hero-doc-zone .home-accent-card--design{
    left:0 !important;
  }

  .hero-doc-zone .home-accent-card--azadi{
    right:0 !important;
  }

  .home-accent-row--mid .home-accent-row__inner{
    justify-content:flex-start !important;
  }

  .home-accent-card--thinking{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .home-accent-row--between .home-accent-row__inner{
    justify-content:flex-end !important;
  }

  .home-accent-card--creativity{
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

@media (max-width:860px){
  .hero-doc-zone,
  .home-accent-row--mid,
  .home-accent-row--between{
    width:calc(100% - 24px) !important;
    margin-left:auto !important;
    margin-right:auto !important;
  }

  .hero-doc-zone .home-accent-card--design{left:0 !important;}
  .hero-doc-zone .home-accent-card--azadi{right:0 !important;}
  .home-accent-card--thinking,
  .home-accent-card--creativity{
    margin-left:0 !important;
    margin-right:0 !important;
  }
}

/* =========================================================
   V153 — equal 34px spacing above/below the main collage only
   ========================================================= */
.home-feature-art{
  margin:34px auto !important;
  padding:0 !important;
}
.home-feature-art__image{
  transform:none !important;
}

@media (max-width:860px){
  .home-feature-art{
    margin:34px auto !important;
    padding:0 !important;
  }
  .home-feature-art__image{
    transform:none !important;
  }
}

@media (max-width:480px){
  .home-feature-art{
    margin:34px auto !important;
    padding:0 !important;
  }
  .home-feature-art__image{
    transform:none !important;
  }
}

/* =========================================================
   V154 — main collage spacing
   Exactly 64px above and below the main collage section.
   ========================================================= */
.home-feature-art{
  margin:64px auto !important;
  padding:0 !important;
}
.home-feature-art__image{
  transform:none !important;
}

@media (max-width:860px){
  .home-feature-art{
    margin:64px auto !important;
    padding:0 !important;
  }
}

@media (max-width:480px){
  .home-feature-art{
    margin:64px auto !important;
    padding:0 !important;
  }
}

/* =========================================================
   V155 — 64px visible edge-to-edge spacing around main collage
   A = visible bottom edge of scrolling team cards
   B = visible top edge of main collage frame
   C = visible bottom edge of main collage frame
   D = visible top edge of footer
   Target: A→B = 64px and C→D = 64px
   ========================================================= */
.home-feature-art{
  /* Desktop team area already contributes 58px below the visible cards:
     10px track bottom padding + 48px team section bottom padding.
     Add only 6px here so the visible total is exactly 64px. */
  margin:6px auto 64px !important;
  padding:0 !important;
}
.home-feature-art__image{
  transform:none !important;
}

@media (max-width:680px){
  .home-feature-art{
    /* Mobile contributes 44px below the visible cards:
       8px track bottom padding + 36px team section bottom padding. */
    margin:20px auto 64px !important;
    padding:0 !important;
  }
}

/* =========================================================
   V156 — align Design artwork + both document buttons
   Reference: black vertical guide from the user's screenshot.
   Keep vertical positions unchanged; move the entire two-button group together.
   ========================================================= */
@media (min-width:861px){
  .hero-doc-zone .hero-doc-links{
    transform:translate(0,-86px) !important;
  }
}

@media (max-width:860px) and (min-width:481px){
  .hero-doc-zone .hero-doc-links{
    transform:translate(0,-56px) !important;
  }
}

@media (max-width:480px){
  .hero-doc-zone .hero-doc-links{
    transform:translate(0,-40px) !important;
  }
}

/* =========================================================
   V157 — align right edge of Creativity artwork to the user's black guide line
   Only horizontal position of the Creativity artwork is adjusted.
   ========================================================= */
@media (min-width:861px){
  .home-accent-card--creativity{
    transform:translate(38px,-12px) !important;
  }
}

@media (max-width:860px) and (min-width:481px){
  .home-accent-card--creativity{
    transform:translate(24px,-9px) !important;
  }
}

@media (max-width:480px){
  .home-accent-card--creativity{
    transform:translate(12px,-6px) !important;
  }
}

/* =========================================================
   V158 — vertically center the large collage between the two user-marked X guides
   Only the vertical placement of the large collage is adjusted.
   Move the collage slightly downward while preserving the overall spacing block.
   ========================================================= */
@media (min-width:861px){
  .home-feature-art{
    margin:14px auto 56px !important;
    padding:0 !important;
  }
}

@media (max-width:860px) and (min-width:481px){
  .home-feature-art{
    margin:18px auto 60px !important;
    padding:0 !important;
  }
}

@media (max-width:480px){
  .home-feature-art{
    margin:22px auto 62px !important;
    padding:0 !important;
  }
}


/* =========================================================
   V166 — cross-browser hamburger normalization
   Render the three bars as one SVG asset so Chrome/Firefox/Safari
   cannot round individual span widths/thicknesses differently.
   ========================================================= */
.menu-toggle{
  position:relative !important;
  width:24px !important;
  height:24px !important;
  min-width:24px !important;
  min-height:24px !important;
  padding:0 !important;
  margin:0 !important;
  border:0 !important;
  background:transparent !important;
  box-sizing:border-box !important;
  overflow:visible !important;
  -webkit-appearance:none !important;
  appearance:none !important;
}
.menu-toggle span{
  display:none !important;
}
.menu-toggle::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:3px !important;
  width:24px !important;
  height:18px !important;
  display:block !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-size:24px 18px !important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='18' viewBox='0 0 24 18'%3E%3Crect x='0' y='0' width='24' height='2' rx='1' fill='%234A7272'/%3E%3Crect x='0' y='8' width='24' height='2' rx='1' fill='%234A7272'/%3E%3Crect x='0' y='16' width='24' height='2' rx='1' fill='%234A7272'/%3E%3C/svg%3E") !important;
  transform:none !important;
  -webkit-transform:none !important;
  image-rendering:auto !important;
}
.menu-toggle:hover::before,
.menu-toggle:focus-visible::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='18' viewBox='0 0 24 18'%3E%3Crect x='0' y='0' width='24' height='2' rx='1' fill='%230D3035'/%3E%3Crect x='0' y='8' width='24' height='2' rx='1' fill='%230D3035'/%3E%3Crect x='0' y='16' width='24' height='2' rx='1' fill='%230D3035'/%3E%3C/svg%3E") !important;
}


/* =========================================================
   V170 — home header/menu cross-browser lock
   Mirrors the shared component rules so Home behaves exactly like
   every inner page in FA / EN / FR / DE and across major browsers.
   ========================================================= */
.language-switch{
  display:flex !important;
  align-items:center !important;
  gap:7px !important;
  min-height:24px !important;
  line-height:1 !important;
  white-space:nowrap !important;
  -webkit-text-size-adjust:100% !important;
  text-size-adjust:100% !important;
}
.language-switch .language-option{
  -webkit-appearance:none !important;
  appearance:none !important;
  box-sizing:border-box !important;
  flex:0 0 18px !important;
  width:18px !important;
  min-width:18px !important;
  max-width:18px !important;
  height:24px !important;
  min-height:24px !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  color:var(--header-text) !important;
  font-family:Arial,Helvetica,sans-serif !important;
  font-size:11px !important;
  font-style:normal !important;
  font-weight:600 !important;
  font-stretch:normal !important;
  font-synthesis:none !important;
  line-height:24px !important;
  letter-spacing:0 !important;
  word-spacing:0 !important;
  text-align:center !important;
  text-transform:uppercase !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.language-switch .language-option.active,
.language-switch .language-option:hover,
.language-switch .language-option:focus-visible{
  font-size:11px !important;
  font-weight:600 !important;
  line-height:24px !important;
}
.drawer-scroll,
.drawer-nav,
.menu-section,
.menu-blog,
.menu-doc-link,
.menu-submenu a{
  box-sizing:border-box !important;
  min-width:0 !important;
}
.menu-blog,
.menu-doc-link,
.menu-submenu a,
.menu-title{
  max-width:100% !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:anywhere !important;
  hyphens:auto !important;
}
.menu-blog .bermor-word,
.menu-doc-link .bermor-word,
.menu-submenu a .bermor-word,
.menu-title .bermor-word{
  display:inline !important;
  width:auto !important;
  max-width:100% !important;
  white-space:normal !important;
}
.menu-blog,
.menu-doc-link{
  min-height:68px !important;
  padding:20px 24px !important;
  line-height:1.4 !important;
}
.drawer-nav{padding-bottom:32px !important;}
@media(max-width:430px){
  .language-switch{gap:5px !important;}
  .language-switch .language-option,
  .language-switch .language-option.active,
  .language-switch .language-option:hover,
  .language-switch .language-option:focus-visible{
    flex-basis:17px !important;width:17px !important;min-width:17px !important;max-width:17px !important;font-size:10px !important;
  }
}
@media(max-width:375px){
  .language-switch{gap:4px !important;}
  .language-switch .language-option,
  .language-switch .language-option.active,
  .language-switch .language-option:hover,
  .language-switch .language-option:focus-visible{
    flex-basis:16px !important;width:16px !important;min-width:16px !important;max-width:16px !important;font-size:9px !important;
  }
}


/* =========================================================
   V172 — AUTHORITATIVE MENU FIX
   Cross-browser: Chrome / Firefox / Safari
   - Menu text is never split inside a word.
   - FR/DE long labels wrap only at spaces when needed.
   - The last document row grows to its content and remains fully reachable.
   - English label keeps the exact wording: Brand Services Guide.
   - Hover/focus color is #4A7272.
   ========================================================= */
.menu-drawer,
.drawer-scroll,
.drawer-nav,
.menu-section,
.menu-section-trigger,
.menu-title,
.menu-submenu,
.menu-submenu a,
.menu-blog,
.menu-doc-link{
  box-sizing:border-box !important;
}

/* The drawer can scroll vertically, never crop the final item horizontally. */
.menu-drawer{
  overflow:hidden !important;
}
.drawer-scroll{
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-bottom:24px !important;
  -webkit-overflow-scrolling:touch;
}
.drawer-nav{
  width:100% !important;
  min-width:0 !important;
  padding-bottom:24px !important;
}

/* Use ordinary text flow. No character-level wrapping or auto hyphenation. */
.menu-title,
.menu-submenu a,
.menu-blog,
.menu-doc-link{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  -webkit-hyphens:none !important;
  text-wrap:wrap !important;
  letter-spacing:normal !important;
}

/* Defensive rule for pages cached with older typography wrappers. */
.menu-title .bermor-word,
.menu-submenu a .bermor-word,
.menu-blog .bermor-word,
.menu-doc-link .bermor-word{
  display:inline !important;
  width:auto !important;
  max-width:none !important;
  min-width:auto !important;
  white-space:nowrap !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  -webkit-hyphens:none !important;
}

/* Rows size themselves from content. */
.menu-blog,
.menu-doc-link{
  height:auto !important;
  min-height:68px !important;
  padding:20px 24px !important;
  line-height:1.45 !important;
  overflow:visible !important;
}
.drawer-nav > .menu-doc-link:last-child{
  margin-bottom:0 !important;
  padding-bottom:22px !important;
}

/* Long translated guide labels: natural two-line wrap at words only. */
html[lang='fr'] .menu-doc-link[data-doc-type='guide'],
html[lang='de'] .menu-doc-link[data-doc-type='guide']{
  font-size:17px !important;
  line-height:1.5 !important;
}

/* Unified hover/focus color. */
.menu-section-trigger:hover,
.menu-section-trigger:focus-visible,
.menu-section-trigger:hover .menu-title,
.menu-section-trigger:focus-visible .menu-title,
.menu-section-trigger:hover .menu-title *,
.menu-section-trigger:focus-visible .menu-title *,
.menu-submenu a:hover,
.menu-submenu a:focus-visible,
.menu-submenu a:hover *,
.menu-submenu a:focus-visible *,
.menu-blog:hover,
.menu-blog:focus-visible,
.menu-blog:hover *,
.menu-blog:focus-visible *,
.menu-doc-link:hover,
.menu-doc-link:focus-visible,
.menu-doc-link:hover *,
.menu-doc-link:focus-visible *{
  color:#4A7272 !important;
}

/* =========================================================
   V175 — HOME authoritative language state color
   Mirrors the shared header rule because Home owns its header styles.
   Active + hover/focus = hero tagline teal #4A7272.
   ========================================================= */
:root{--bermor-tagline-teal:#4A7272;}
.site-header .language-switch .language-option{
  color:#86B9B2 !important;
  -webkit-text-fill-color:#86B9B2 !important;
  opacity:.78 !important;
}
.site-header .language-switch .language-option.active,
.site-header .language-switch .language-option[aria-pressed="true"],
.site-header .language-switch .language-option:hover,
.site-header .language-switch .language-option:focus,
.site-header .language-switch .language-option:focus-visible,
.site-header .language-switch .language-option:active{
  color:var(--bermor-tagline-teal) !important;
  -webkit-text-fill-color:var(--bermor-tagline-teal) !important;
  opacity:1 !important;
}
.site-header .language-switch .language-option:hover *,
.site-header .language-switch .language-option:focus *,
.site-header .language-switch .language-option:focus-visible *,
.site-header .language-switch .language-option.active *,
.site-header .language-switch .language-option[aria-pressed="true"] *{
  color:var(--bermor-tagline-teal) !important;
  -webkit-text-fill-color:var(--bermor-tagline-teal) !important;
}


/* =========================================================
   V176 — HEADER LOCK + CROSS-BROWSER MENU INITIAL WEIGHT
   LOCKED: header geometry, language switch, logo, hamburger and drawer shell.
   Do not alter these header rules in future versions unless explicitly requested.
   Submenu word initials use a real 600 font weight in Chrome / Firefox / Safari.
   ========================================================= */
:root{
  --bermor-header-lock-version:"v176";
}
/* Keep submenu words intact while allowing wrapping only between words. */
.menu-submenu a .portfolio-label,
.menu-submenu a .menu-label{
  display:inline !important;
  white-space:normal !important;
  word-break:normal !important;
  overflow-wrap:normal !important;
  hyphens:none !important;
  -webkit-hyphens:none !important;
}
.menu-submenu a .portfolio-initial,
.menu-submenu a .menu-capital{
  display:inline !important;
  font-family:'Bai Jamjuree','Segoe UI',Arial,sans-serif !important;
  font-style:normal !important;
  font-weight:600 !important;
  font-synthesis:weight !important;
  -webkit-font-smoothing:antialiased !important;
  text-rendering:geometricPrecision !important;
  color:inherit !important;
}
/* Chrome/WebKit can render 500/600 closer than Firefox; this tiny stroke makes
   the intended capital emphasis visually consistent without changing size. */
@supports (-webkit-appearance:none){
  .menu-submenu a .portfolio-initial,
  .menu-submenu a .menu-capital{
    -webkit-text-stroke:.12px currentColor;
  }
}

/* V243 — align homepage content to visible hero pattern edges */
:root{--home-visible-frame:910px;--home-visible-ratio:88.8671875vw}

/* Keep the source hero pattern at 1024px; align the content to its visible 910px artwork. */
.hero-tagline-wrap,
.hero-doc-zone,
.services-hub__grid,
.home-accent-row--mid,
.home-accent-row--between,
.showreel-frame,
.showcase-gallery__inner,
.portfolio-logo-matrix__grid,
.team-carousel,
.home-feature-art__inner{
  width:min(var(--home-visible-frame),var(--home-visible-ratio)) !important;
  max-width:var(--home-visible-frame) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* Keep items inside the same visible left/right guides. */
.hero-doc-zone .home-accent-row--top,
.hero-doc-zone .home-accent-row--top .home-accent-row__inner{
  width:100% !important;
  left:0 !important;
  right:0 !important;
}
.hero-doc-zone .home-accent-card--design{left:0 !important;}
.hero-doc-zone .home-accent-card--azadi{right:0 !important;}
.home-accent-row--mid .home-accent-row__inner,
.home-accent-row--between .home-accent-row__inner,
.home-feature-art__inner{width:100% !important;box-sizing:border-box !important;}

.showreel-section{display:flex !important;justify-content:center !important;}
.showreel-frame{flex:0 0 auto !important;}
.showcase-gallery__inner{padding-left:0 !important;padding-right:0 !important;}
.portfolio-logo-matrix{box-sizing:border-box !important;}
.portfolio-logo-matrix__grid{box-sizing:border-box !important;}
.team-carousel__viewport{
  width:100% !important;
  max-width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}
.home-feature-art__image{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@media(max-width:720px){
  :root{--home-visible-ratio:88.8671875vw}
}