.elementor-kit-712{--e-global-color-primary:#54B435;--e-global-color-secondary:#22324A;--e-global-color-text:#4C5769;--e-global-color-accent:#2F6FD6;--e-global-color-39869a84:#4054B2;--e-global-color-2fa9788b:#23A455;--e-global-color-24559b33:#000;--e-global-color-1ed4962e:#FFF;--e-global-color-mlgreendark:#458F2C;--e-global-color-mlgreentint:#EEF7E9;--e-global-color-mlmint:#EAF5E2;--e-global-color-mlblueband:#EAF2FE;--e-global-color-mlwarm:#F6F8F2;--e-global-color-mlgrey:#F3F5F7;--e-global-color-mlline:#E9EEE3;--e-global-color-mlmuted:#7C8797;--e-global-color-mljapanred:#BC002D;--e-global-typography-primary-font-family:"Newsreader";--e-global-typography-primary-font-weight:500;--e-global-typography-secondary-font-family:"Newsreader";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Figtree";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Figtree";--e-global-typography-accent-font-weight:600;font-size:17px;}.elementor-kit-712 e-page-transition{background-color:#FFBC7D;}.elementor-kit-712 h5{line-height:1.72em;}.elementor-kit-712 h6{line-height:1.72em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1100px;}.e-con{--container-max-width:1100px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:920px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* built 16 Sep 2026, industry pages: mini hero, case study logo, service icons and links */
/* ==========================================================================
MacroLingo homepage design rules
Every number below is taken from the approved concept. Colours and fonts
live in Site Settings (Global Colors / Global Fonts) and everything here
reads from them, so changing a swatch there changes the whole page.
Each block is a class you add or remove on any element in Elementor under
Advanced > CSS Classes. The class names are listed with each block.
Cards, buttons and arrow links lift a little on hover, the way the
concept has it. The numbers are the concept's own.
========================================================================== */
/* --- The two faces themselves ---------------------------------------------
The font files are named here rather than fetched through a stylesheet on
Google's server, so the browser starts downloading them the moment it
reads the page instead of waiting for a round trip first. They are marked
"block", which means a word is never drawn in a substitute face: the
browser holds it back for the moment the real one takes to arrive, then
draws it once, correctly. The stand-ins further down are only a safety net
for the rare case where the files cannot be reached at all.
Newsreader and Figtree are both variable, so one file covers every weight
the design uses. */
/* latin-ext */
@font-face {
font-display: block;
font-family: 'Figtree';
font-style: normal;
font-weight: 400 700;
src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4q9DbZs.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-display: block;
font-family: 'Figtree';
font-style: normal;
font-weight: 400 700;
src: url(https://fonts.gstatic.com/s/figtree/v9/_Xms-HUzqDCFdgfMm4S9DQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-display: block;
font-family: 'Newsreader';
font-style: italic;
font-weight: 400 600;
src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9CfjOCX1hbuyalUrK439vCgIhCFpY.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-display: block;
font-family: 'Newsreader';
font-style: italic;
font-weight: 400 600;
src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9CfjOCX1hbuyalUrK439vCjohC.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-display: block;
font-family: 'Newsreader';
font-style: normal;
font-weight: 400 600;
src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9AfjOCX1hbuyalUrK439DyjJBG.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-display: block;
font-family: 'Newsreader';
font-style: normal;
font-weight: 400 600;
src: url(https://fonts.gstatic.com/s/newsreader/v26/cY9AfjOCX1hbuyalUrK4397yjA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --- While the web fonts are still on their way --------------------------
Until Newsreader and Figtree arrive the page has to draw with something,
and if that something is a different width the text jumps when they land.
These two stand-ins are the fonts already on the reader's machine, told to
occupy exactly the same space as the real ones: the same line width, the
same height above and below the line. Every number was measured on this
build by drawing the same sentence in both faces, so when the real font
lands nothing moves, only the shapes of the letters change. */
@font-face{
font-family: "Newsreader stand-in";
src: local("Georgia"), local("Times New Roman"), local("Times");
size-adjust: 102.43%;
ascent-override: 72.24%;
descent-override: 26.36%;
line-gap-override: 0%;
}
@font-face{
font-family: "Figtree stand-in";
src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
size-adjust: 101.22%;
ascent-override: 93.86%;
descent-override: 24.70%;
line-gap-override: 0%;
}
/* Elementor writes the font on each element with a plain "sans-serif" behind
it, which is what makes a heading swap from a sans face to a serif one as
the page loads. These two lines are marked important so the stand-in is
what the page draws with in the meantime. Nothing else here uses !important
for type. */
body,
body .elementor-widget-text-editor,
body .elementor-widget-icon-list,
body .elementor-widget-button .elementor-button{
font-family: var(--e-global-typography-text-font-family), "Figtree stand-in", Arial, sans-serif !important;
}
/* Only the real headings. The small capital labels are heading widgets too,
but they are set in the body face, so they are left out of this. */
body .elementor-widget-heading h1.elementor-heading-title,
body .elementor-widget-heading h2.elementor-heading-title,
body .elementor-widget-heading h3.elementor-heading-title,
body .elementor-widget-heading h4.elementor-heading-title,
body .elementor-icon-box-title{
font-family: var(--e-global-typography-primary-font-family), "Newsreader stand-in", Georgia, serif !important;
}
/* the name under a quote is a heading of its own but reads in the body face */
body .ml-quote-name h4.elementor-heading-title{
font-family: var(--e-global-typography-accent-font-family), "Figtree stand-in", Arial, sans-serif !important;
}
/* So is the line under an industry page's title, which lists what the page
covers. It is marked up as an h2 so that a reader on a screen reader gets
the hierarchy, but it reads as a subheading in the body face; set in the
serif at 17px it looked like a caption someone had forgotten to style. */
body .ml-ind-sub h1.elementor-heading-title,
body .ml-ind-sub h2.elementor-heading-title,
body .ml-ind-sub h3.elementor-heading-title{
font-family: var(--e-global-typography-accent-font-family), "Figtree stand-in", "Noto Sans JP", Arial, sans-serif !important;
}
/* Headings the theme draws itself, on the blog and anywhere else outside
this design, take the same pair of faces. The Customizer no longer names
a font, so nothing is fetched twice. */
h1, h2, h3, h4, h5, h6{ font-family: var(--ml-serif); }
.ml-jp h1, .ml-jp h2, .ml-jp h3, .ml-jp h4, .ml-jp h5, .ml-jp h6,
html[lang^="ja"] h1, html[lang^="ja"] h2, html[lang^="ja"] h3,
html[lang^="ja"] h4, html[lang^="ja"] h5, html[lang^="ja"] h6{
font-family: var(--e-global-typography-primary-font-family), "Newsreader stand-in", "Noto Serif JP", Georgia, serif;
}
/* --- Moving down the page -------------------------------------------------
Jumping to a section, or back to the top, glides rather than snaps. The
header is pinned, so the landing point is set below it. */
html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--ml-header-h, 81px) + 16px); }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } }
/* selected text and the keyboard focus ring, both in the brand green */
::selection{ background: rgba(84,180,53,.24); color: var(--e-global-color-secondary); }
:focus-visible{ outline: 2.5px solid var(--e-global-color-primary); outline-offset: 3px; border-radius: 6px; }
/* --- Shared values -------------------------------------------------------
Corner radius, shadows and hairline colours, in one place.
These sit on body rather than :root because the Global Colors do, and a
value here that reads one of them has to be written where it can see it. */
body{
font-size: 17px;
line-height: 1.72;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body{
/* the two stacks, with the stand-ins in them, so every rule below reads
from one place */
--ml-serif: var(--e-global-typography-primary-font-family), "Newsreader stand-in", Georgia, serif;
--ml-sans: var(--e-global-typography-accent-font-family), "Figtree stand-in", Arial, sans-serif;
--ml-body: var(--e-global-typography-text-font-family), "Figtree stand-in", Arial, sans-serif;
--ml-content-width: 1100px;
--ml-radius: 22px;
--ml-radius-lg: 30px;
--ml-shadow-soft: 0 1px 2px rgba(34,50,74,.04), 0 8px 22px rgba(34,50,74,.06);
--ml-shadow-lift: 0 6px 16px rgba(34,50,74,.06), 0 26px 56px rgba(34,50,74,.10);
--ml-line: var(--e-global-color-mlline);
--ml-line-2: #DDE6D6;
--ml-blue-line: #D7E6FB;
--ml-blue-ink: #2559B4;
--ml-green-tint-2: #DBEFCE;
--ml-grey-line: #E4E9EE;
--ml-star: #F5A623;
}
/* --- Icons ---------------------------------------------------------------
The line drawings from the concept. Each one is a file in the project's
icons folder, written in here as a mask so it takes the colour of the
text around it.
ml-i-pen ml-i-check ml-i-search ml-i-send ml-i-arrow ml-i-tick
ml-i-pin ml-i-mail ml-i-clock ml-i-dot ml-i-chevron
ml-i-globe ml-i-leaf ml-i-cap ml-i-arw ml-i-doc ml-i-spark ml-i-tag
Put the class on an Icon, Icon Box or Icon List widget. */
[class*="ml-i-"] .elementor-icon > *,
[class*="ml-i-"] .elementor-icon-list-icon > *{ display: none; }
[class*="ml-i-"] .elementor-icon,
[class*="ml-i-"] .elementor-icon-list-icon{ display: block; color: inherit; }
/* the drawing sits inside the shape, so a tick can still have its own circle
round it and a service icon its own tile */
[class*="ml-i-"] .elementor-icon:before,
[class*="ml-i-"] .elementor-icon-list-icon:before{
content: "";
display: block;
width: 100%;
height: 100%;
background: currentColor;
}
.ml-i-arrow .elementor-icon:before,
.ml-i-arrow .elementor-icon-list-icon:before{
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22%3E%3Cpath d=%22M3 8h10M9 4l4 4-4 4%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22%3E%3Cpath d=%22M3 8h10M9 4l4 4-4 4%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}
.ml-i-arw .elementor-icon:before,
.ml-i-arw .elementor-icon-list-icon:before{
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22%3E%3Cpath d=%22M5 11 11 5M6 5h5v5%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22%3E%3Cpath d=%22M5 11 11 5M6 5h5v5%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}
.ml-i-cap .elementor-icon:before,
.ml-i-cap .elementor-icon-list-icon:before{
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cpath d=%22M22 10 12 5 2 10l10 5 10-5Z%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M6 12v5c0 1 3 3 6 3s6-2 6-3v-5%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cpath d=%22M22 10 12 5 2 10l10 5 10-5Z%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M6 12v5c0 1 3 3 6 3s6-2 6-3v-5%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}
.ml-i-check .elementor-icon:before,
.ml-i-check .elementor-icon-list-icon:before{
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cpath d=%22M20 6 9 17l-5-5%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}
.ml-i-chevron .elementor-icon:before,
.ml-i-chevron .elementor-icon-list-icon:before{
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22%3E%3Cpath d=%22M4 6l4 4 4-4%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22%3E%3Cpath d=%22M4 6l4 4 4-4%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}
.ml-i-clock .elementor-icon:before,
.ml-i-clock .elementor-icon-list-icon:before{
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cg stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5.2l3.2 2%22/%3E%3C/g%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cg stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 7v5.2l3.2 2%22/%3E%3C/g%3E%3C/svg%3E");
}
.ml-i-doc .elementor-icon:before,
.ml-i-doc .elementor-icon-list-icon:before{
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cg stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z%22/%3E%3Cpath d=%22M14 3v5h5%22/%3E%3Cpath d=%22M9 13h6%22/%3E%3Cpath d=%22M9 17h4%22/%3E%3C/g%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cg stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8Z%22/%3E%3Cpath d=%22M14 3v5h5%22/%3E%3Cpath d=%22M9 13h6%22/%3E%3Cpath d=%22M9 17h4%22/%3E%3C/g%3E%3C/svg%3E");
}
.ml-i-dot .elementor-icon:before,
.ml-i-dot .elementor-icon-list-icon:before{
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22%3E%3Ccircle cx=%228%22 cy=%228%22 r=%228%22 fill=%22%23000%22/%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22%3E%3Ccircle cx=%228%22 cy=%228%22 r=%228%22 fill=%22%23000%22/%3E%3C/svg%3E");
}
.ml-i-globe .elementor-icon:before,
.ml-i-globe .elementor-icon-list-icon:before{
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 stroke=%22%23000%22 stroke-width=%221.7%22/%3E%3Cpath d=%22M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M2 12h20%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%2210%22 stroke=%22%23000%22 stroke-width=%221.7%22/%3E%3Cpath d=%22M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M2 12h20%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22/%3E%3C/svg%3E");
}
.ml-i-leaf .elementor-icon:before,
.ml-i-leaf .elementor-icon-list-icon:before{
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cpath d=%22M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M2 21c0-3 1.85-5.36 5.08-6%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cpath d=%22M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M2 21c0-3 1.85-5.36 5.08-6%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}
.ml-i-mail .elementor-icon:before,
.ml-i-mail .elementor-icon-list-icon:before{
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cg stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%225%22 width=%2218%22 height=%2214%22 rx=%222.4%22/%3E%3Cpath d=%22m3.6 6.6 8.4 6 8.4-6%22/%3E%3C/g%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cg stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%225%22 width=%2218%22 height=%2214%22 rx=%222.4%22/%3E%3Cpath d=%22m3.6 6.6 8.4 6 8.4-6%22/%3E%3C/g%3E%3C/svg%3E");
}
.ml-i-pen .elementor-icon:before,
.ml-i-pen .elementor-icon-list-icon:before{
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cg stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 20h9%22/%3E%3Cpath d=%22M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z%22/%3E%3C/g%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cg stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 20h9%22/%3E%3Cpath d=%22M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z%22/%3E%3C/g%3E%3C/svg%3E");
}
.ml-i-pin .elementor-icon:before,
.ml-i-pin .elementor-icon-list-icon:before{
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cg stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11Z%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%222.6%22/%3E%3C/g%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cg stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 21s7-5.5 7-11a7 7 0 1 0-14 0c0 5.5 7 11 7 11Z%22/%3E%3Ccircle cx=%2212%22 cy=%2210%22 r=%222.6%22/%3E%3C/g%3E%3C/svg%3E");
}
.ml-i-search .elementor-icon:before,
.ml-i-search .elementor-icon-list-icon:before{
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cg stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%227%22/%3E%3Cpath d=%22m21 21-4.3-4.3%22/%3E%3C/g%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cg stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2211%22 cy=%2211%22 r=%227%22/%3E%3Cpath d=%22m21 21-4.3-4.3%22/%3E%3C/g%3E%3C/svg%3E");
}
.ml-i-send .elementor-icon:before,
.ml-i-send .elementor-icon-list-icon:before{
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cpath d=%22M3 11 22 2l-9 19-2-8Z%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cpath d=%22M3 11 22 2l-9 19-2-8Z%22 stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}
.ml-i-spark .elementor-icon:before,
.ml-i-spark .elementor-icon-list-icon:before{
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cg stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M11 3.5 12.9 9.1 18.5 11 12.9 12.9 11 18.5 9.1 12.9 3.5 11 9.1 9.1Z%22/%3E%3Cpath d=%22M18.5 16v4%22/%3E%3Cpath d=%22M20.5 18h-4%22/%3E%3C/g%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cg stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M11 3.5 12.9 9.1 18.5 11 12.9 12.9 11 18.5 9.1 12.9 3.5 11 9.1 9.1Z%22/%3E%3Cpath d=%22M18.5 16v4%22/%3E%3Cpath d=%22M20.5 18h-4%22/%3E%3C/g%3E%3C/svg%3E");
}
.ml-i-tag .elementor-icon:before,
.ml-i-tag .elementor-icon-list-icon:before{
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cg stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.5 12.1V4.5a1 1 0 0 1 1-1h7.6a1 1 0 0 1 .7.3l7.9 7.9a1.5 1.5 0 0 1 0 2.1l-6.9 6.9a1.5 1.5 0 0 1-2.1 0L3.8 12.8a1 1 0 0 1-.3-.7Z%22/%3E%3Ccircle cx=%228.3%22 cy=%228.3%22 r=%221.4%22/%3E%3C/g%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22%3E%3Cg stroke=%22%23000%22 stroke-width=%221.7%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3.5 12.1V4.5a1 1 0 0 1 1-1h7.6a1 1 0 0 1 .7.3l7.9 7.9a1.5 1.5 0 0 1 0 2.1l-6.9 6.9a1.5 1.5 0 0 1-2.1 0L3.8 12.8a1 1 0 0 1-.3-.7Z%22/%3E%3Ccircle cx=%228.3%22 cy=%228.3%22 r=%221.4%22/%3E%3C/g%3E%3C/svg%3E");
}
.ml-i-tick .elementor-icon:before,
.ml-i-tick .elementor-icon-list-icon:before{
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22%3E%3Cpath d=%22M3 8.5l3.5 3.5L13 4.5%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22%3E%3Cpath d=%22M3 8.5l3.5 3.5L13 4.5%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}
/* --- Background bands ----------------------------------------------------
Put one of these on a section container.
ml-band-warm ml-band-mint ml-band-blue ml-band-grey */
.ml-band-warm { background-color: var(--e-global-color-mlwarm); }
.ml-band-mint { background-color: var(--e-global-color-mlmint); }
.ml-band-blue {
background-color: var(--e-global-color-mlblueband);
border-top: 1px solid var(--ml-blue-line);
border-bottom: 1px solid var(--ml-blue-line);
}
.ml-band-grey {
background-color: var(--e-global-color-mlgrey);
border-top: 1px solid var(--ml-grey-line);
border-bottom: 1px solid var(--ml-grey-line);
}
/* --- Green highlighter behind a few words --------------------------------
ml-highlight
Use it inside a heading or a text block, around the words you want to
pick out. In the Elementor text editor switch to the Text tab and write:
your words
To take the highlight off, delete the span. To change its colour, edit
Brand green in Site Settings > Global Colors. */
.ml-highlight{
background-image: linear-gradient(120deg, transparent 0 3%, rgba(84,180,53,.30) 3% 97%, transparent 97%);
background-image: linear-gradient(120deg,
transparent 0 3%,
color-mix(in srgb, var(--e-global-color-primary) 30%, transparent) 3% 97%,
transparent 97%);
background-repeat: no-repeat;
background-position: 0 74%;
background-size: 100% 42%;
padding: 0 .06em;
border-radius: 3px;
}
/* --- Heading that fades from green into blue -----------------------------
ml-gradient-heading
Meant for one or two headings a page, never more. Blue only ever appears
coming out of the green, never as a block of its own next to it. */
.ml-gradient-heading .elementor-heading-title{
background-image: linear-gradient(102deg,
var(--e-global-color-mlgreendark) 18%,
var(--e-global-color-accent) 92%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
/* --- Headings and paragraphs ---------------------------------------------
Headings break their lines evenly rather than leaving one word stranded,
which is what keeps the wording sitting the way the concept shows it.
The theme puts space under every heading and paragraph; the concept sets
its own spacing, so the theme's is cleared here. */
.elementor-widget-heading .elementor-heading-title{ margin: 0; line-height: 1.72; }
.elementor-widget-heading h1.elementor-heading-title,
.elementor-widget-heading h2.elementor-heading-title,
.elementor-widget-heading h3.elementor-heading-title,
.elementor-widget-heading h4.elementor-heading-title{
line-height: 1.14;
letter-spacing: -.01em;
text-wrap: balance;
}
.elementor-widget-text-editor p:last-child{ margin-bottom: 0; }
/* --- Small label above a heading -----------------------------------------
ml-label green dot, used everywhere
ml-label-centred same but centred under a centred heading */
.ml-label .elementor-heading-title{
display: inline-flex;
align-items: center;
gap: 9px;
font-family: var(--ml-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: .06em;
line-height: 1.72;
text-transform: uppercase;
color: var(--e-global-color-mlgreendark);
}
.ml-label .elementor-heading-title:before{
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--e-global-color-primary);
flex: 0 0 auto;
}
.ml-label-centred .elementor-heading-title{ justify-content: center; }
/* --- Intro paragraph under a section heading -----------------------------
ml-lead */
.ml-lead.elementor-widget{
font-size: 18px;
line-height: 1.72;
color: var(--e-global-color-text);
max-width: 60ch;
margin: 16px auto 0;
}
/* --- Small note next to a button -----------------------------------------
ml-note */
.ml-note.elementor-widget{ font-size: 14.5px; line-height: 1.72; color: var(--e-global-color-mlmuted); }
/* --- Section headings ----------------------------------------------------
ml-section-head on the container holding label, heading and intro
ml-heading-mid the NGO and contact headings
ml-heading-small the compact founder heading */
.ml-section-head{ max-width: 60ch; margin-left: auto; margin-right: auto; }
.ml-section-head .elementor-widget-heading + .elementor-widget-heading{ margin-top: 14px; }
.ml-section-head .elementor-widget-heading h2.elementor-heading-title{
font-size: clamp(30px, 3.6vw, 46px);
font-weight: 500;
}
.ml-heading-mid.elementor-widget-heading .elementor-heading-title{
font-size: clamp(28px, 3.3vw, 42px);
font-weight: 500;
}
.ml-heading-small.elementor-widget-heading .elementor-heading-title{
font-size: clamp(24px, 2.7vw, 32px);
font-weight: 500;
line-height: 1.3;
}
/* --- Buttons -------------------------------------------------------------
A solid green button, and a white one with a hairline round it. */
/* written as body ... .elementor-button.elementor-button because the theme's
own Elementor button rule (body .elementor-button.elementor-size-sm) is a
notch more specific than a plain class and would otherwise win */
body .elementor-widget-button .elementor-button.elementor-button{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-family: var(--ml-sans);
font-size: 14.5px;
font-weight: 600;
line-height: 1.72;
padding: 11px 21px;
border-radius: 11px;
border: 1.6px solid transparent;
white-space: nowrap;
transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease, border-color .18s ease;
}
/* ml-btn-primary and ml-btn-soft are put on by the build; the solid button
carries a green shadow and both rise 2px under the pointer */
.ml-btn-primary .elementor-button{ box-shadow: 0 10px 22px rgba(84,180,53,.24); }
.ml-btn-primary .elementor-button:hover{
background-color: var(--e-global-color-mlgreendark);
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(84,180,53,.28);
}
.ml-btn-soft .elementor-button:hover{
border-color: var(--e-global-color-primary);
color: var(--e-global-color-mlgreendark);
transform: translateY(-2px);
box-shadow: var(--ml-shadow-soft);
}
.ml-band-blue .ml-btn-soft .elementor-button:hover{
border-color: var(--e-global-color-accent);
color: var(--ml-blue-ink);
}
/* --- Text link with an arrow ---------------------------------------------
ml-arrow-link put it on a Button widget set to the Link style */
.ml-arrow-link,
.ml-arrow-link .elementor-button-wrapper{ text-align: left; }
/* the widget is a flex box, so its height is the link's own and no line
box of the body leading is left around it */
.ml-arrow-link.elementor-widget{ display: flex; }
/* the link sits on the top of its line rather than the baseline, so no
descender space is left under it */
body .ml-arrow-link .elementor-button.elementor-button{
vertical-align: top;
white-space: normal;
padding: 0;
background: none;
border: 0;
color: var(--e-global-color-mlgreendark);
font-weight: 600;
font-size: 15px;
line-height: 1.72;
}
/* a visited or focused link keeps its colour; the theme would otherwise
leave it white after it has been clicked */
.ml-arrow-link .elementor-button,
.ml-arrow-link .elementor-button:link,
.ml-arrow-link .elementor-button:visited,
.ml-arrow-link .elementor-button:focus,
.ml-arrow-link .elementor-button:active{
color: var(--e-global-color-mlgreendark);
background: none;
}
.ml-arrow-link .elementor-button:hover{ background: none; color: var(--e-global-color-mlgreendark); }
.ml-arrow-link .elementor-button-icon > *{ display: none; }
/* the words and the arrow sit on one middle line, 8px apart */
.ml-arrow-link .elementor-button-content-wrapper{
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 8px;
line-height: 1.72;
}
.ml-arrow-link .elementor-button-text{ display: inline-block; line-height: 1.72; }
/* the widget keeps its icon on the left, so Elementor writes no
row-reverse of its own; the order below is what puts the arrow after the
words */
.ml-arrow-link .elementor-button-icon{
order: 20;
display: block;
align-self: center;
width: 16px;
height: 16px;
flex: 0 0 auto;
margin: 0;
line-height: 0;
font-size: 0;
background: currentColor;
transition: transform .18s ease;
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22%3E%3Cpath d=%22M3 8h10M9 4l4 4-4 4%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22%3E%3Cpath d=%22M3 8h10M9 4l4 4-4 4%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}
.ml-arrow-link .elementor-button:hover .elementor-button-icon{ transform: translateX(4px); }
/* --- White card ----------------------------------------------------------
ml-card
The service boxes, the quotes and the blog posts all use this so they
stay consistent. */
/* the border has to be written out longhand and aimed at the container as
well, because Elementor sets border-style: none on a container that has
no border of its own, which would otherwise cancel the shorthand */
.ml-card,
.e-con.ml-card,
.elementor-widget.ml-card{
background: #fff;
border-width: 1px;
border-style: solid;
border-color: var(--ml-line);
border-radius: var(--ml-radius);
box-shadow: var(--ml-shadow-soft);
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.e-con.ml-card:hover,
.elementor-widget.ml-card:hover{ transform: translateY(-4px); box-shadow: var(--ml-shadow-lift); }
.e-con.ml-service-card:hover{ border-color: var(--ml-green-tint-2); }
/* --- Service box ---------------------------------------------------------
ml-service on the Icon Box widget
ml-service-card on the container around it
ml-service-plain Japanese page: the icon sits on its own line */
.e-con.ml-service-card{ padding: 32px; }
.e-con.ml-service-card > .e-con-inner{
padding: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.ml-service.elementor-widget-icon-box .elementor-icon-box-wrapper{
display: flex;
align-items: flex-start;
gap: 20px;
text-align: left;
}
.ml-service.elementor-widget-icon-box .elementor-icon-box-icon{
flex: 0 0 auto;
width: 56px;
height: 56px;
border-radius: 18px;
background: var(--e-global-color-mlmint);
display: grid;
place-items: center;
margin: 0;
color: var(--e-global-color-mlgreendark);
}
.ml-service .elementor-icon-box-icon .elementor-icon{
width: 27px;
height: 27px;
color: var(--e-global-color-mlgreendark);
}
.ml-service .elementor-icon-box-content{ display: flex; flex-direction: column; flex: 1; }
.ml-service .elementor-icon-box-title,
.ml-service .elementor-icon-box-title a{
font-family: var(--ml-serif);
font-size: 22px;
font-weight: 600;
line-height: 1.14;
letter-spacing: -.01em;
color: var(--e-global-color-secondary);
}
.ml-service .elementor-icon-box-title{ margin-bottom: 8px; }
.ml-service .elementor-icon-box-description{
font-size: 15px;
line-height: 1.6;
color: var(--e-global-color-text);
margin-bottom: 0;
}
/* the link sits under the words, not under the icon: 56px tile + 20px gap */
/* 56px tile plus the 20px beside it, so the link begins under the first
letter of the heading */
.e-con.ml-service-card > .e-con-inner > .ml-arrow-link.elementor-widget{
margin-top: auto;
padding-top: 16px;
margin-left: 76px;
align-self: flex-start;
width: auto;
max-width: calc(100% - 76px);
}
body .ml-service-card .ml-arrow-link .elementor-button.elementor-button{ font-size: 14px; }
/* Japanese page: the icon sits above the heading, and the line under the
heading is the green tagline */
.ml-service-plain.elementor-widget-icon-box .elementor-icon-box-wrapper,
.ml-service-plain.elementor-widget-icon-box .elementor-icon-box-title,
.ml-service-plain.elementor-widget-icon-box .elementor-icon-box-description{
text-align: left;
}
.ml-service-plain.elementor-widget-icon-box .elementor-icon-box-wrapper{ display: block; }
.ml-service-plain.elementor-widget-icon-box .elementor-icon-box-icon{
margin-left: 0;
margin-right: auto;
}
.ml-service-plain.elementor-widget-icon-box .elementor-icon-box-icon{
width: 50px;
height: 50px;
border-radius: 12px;
margin-bottom: 20px;
}
.ml-service-plain .elementor-icon-box-icon .elementor-icon{ width: 25px; height: 25px; }
.ml-service-plain .elementor-icon-box-title{ font-size: 24px; line-height: 1.42; margin-bottom: 10px; }
.ml-service-plain .elementor-icon-box-description{
font-size: 15.5px;
font-weight: 600;
line-height: 1.7;
color: var(--e-global-color-mlgreendark);
}
/* --- Client strip ---------------------------------------------------------
ml-strip-label the small line above it on the English page
ml-strip-title the heading above it on the Japanese page
ml-logo-carousel the marks themselves, further down this file */
.ml-strip-label .elementor-heading-title{
font-family: var(--ml-sans);
font-size: 13.5px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
line-height: 1.72;
color: var(--e-global-color-mlmuted);
}
/* The client strip is Elementor's Image Carousel, on the class
ml-logo-carousel. Adding a client, dropping one, or changing the order is
done in the widget's own gallery, with no code involved.
Every mark is shown exactly as its owner drew it. Most logo guidelines
forbid altering a mark, and full colour reads better here anyway, so
nothing is dimmed or turned to grey.
A mark is held to a height and a wide wordmark to the width of its place,
which is what keeps a long name and a compact badge reading as the same
weight without giving each one a number of its own. */
/* A strip that never stops has a mark half in and half out at each end.
Cut off square that reads as a mistake, so both edges fade instead. */
.ml-logo-carousel .elementor-image-carousel-wrapper{
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
/* Dragging the strip should move the strip. Without this the pointer picks
up the picture under it instead, or paints a blue selection across the
row, both of which read as the page coming apart. Events still reach the
strip itself, so it can be taken hold of anywhere along it. */
.ml-logo-carousel,
.ml-logo-carousel .swiper-slide{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.ml-logo-carousel .swiper-slide-image{
-webkit-user-drag: none;
pointer-events: none;
}
.ml-logo-carousel .swiper,
.ml-logo-carousel .swiper-container{ cursor: grab; }
.ml-logo-carousel .swiper:active,
.ml-logo-carousel .swiper-container:active{ cursor: grabbing; }
/* one even speed from end to end, rather than easing in and out at every
step, is what makes the travel read as a drift instead of a series of
slides */
.ml-logo-carousel .swiper-wrapper{ transition-timing-function: linear !important; }
.ml-logo-carousel .swiper-slide{ display: flex; align-items: center; justify-content: center; }
.ml-logo-carousel figure.swiper-slide-inner{
display: flex;
align-items: center;
justify-content: center;
width: 100%;
margin: 0;
}
.ml-logo-carousel .swiper-slide-image{
display: block;
width: auto;
height: auto;
max-height: 42px;
max-width: 100%;
object-fit: contain;
margin: 0 auto;
}
@media (max-width: 1024px){ .ml-logo-carousel .swiper-slide-image{ max-height: 36px; } }
@media (max-width: 767px){ .ml-logo-carousel .swiper-slide-image{ max-height: 32px; } }
/* --- Hairline between two sections of the same colour --------------------
ml-rule-top ml-rule-bottom
The line is the width of the content, not the whole screen. Put it
wherever two sections of the same colour meet. */
.ml-rule-top, .ml-rule-bottom{ position: relative; }
.ml-rule-top:before, .ml-rule-bottom:after{
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
width: min(100%, var(--ml-content-width));
height: 1px;
/* the same fade as the line that finishes the hero, so the one above a
section and the one below it are the same line */
background: linear-gradient(90deg, transparent, var(--ml-line-2) 8%,
var(--ml-line-2) 92%, transparent);
}
.ml-rule-top:before{ top: 0; }
.ml-rule-bottom:after{ bottom: 0; }
/* --- Tick list -----------------------------------------------------------
ml-ticks on an Icon List widget
ml-ticks-on-blue the same list inside the blue band
ml-ticks-two two columns, so a long list still fits one screen */
.ml-ticks .elementor-icon-list-item{
align-items: center;
gap: 12px;
margin-bottom: 13px;
padding: 0;
}
.ml-ticks .elementor-icon-list-icon{
width: 24px;
height: 24px;
padding: 5.5px;
border-radius: 50%;
background: #fff;
box-shadow: var(--ml-shadow-soft);
color: var(--e-global-color-mlgreendark);
flex: 0 0 auto;
margin: 0;
}
.ml-ticks .elementor-icon-list-text{
font-size: 15.5px;
font-weight: 500;
line-height: 1.72;
color: var(--e-global-color-secondary);
padding: 0;
}
/* inside the blue band the ticks read blue, like the label above them */
.ml-ticks-on-blue .elementor-icon-list-item{
align-items: flex-start;
padding: 12px 0;
margin-bottom: 0;
gap: 13px;
}
.ml-ticks-on-blue .elementor-icon-list-icon{
width: 26px;
height: 26px;
padding: 6px;
background: #fff;
color: var(--ml-blue-ink);
margin-top: 2px;
box-shadow: none;
}
.ml-ticks-on-blue .elementor-icon-list-text{ font-size: 16.5px; font-weight: 400; }
.ml-ticks-two .elementor-icon-list-items{ columns: 2; column-gap: 34px; }
.ml-ticks-two .elementor-icon-list-item{ break-inside: avoid; padding: 8px 0; align-items: flex-start; }
.ml-ticks-two .elementor-icon-list-text{ font-size: 14.5px; line-height: 1.6; }
.ml-ticks-two .elementor-icon-list-icon{ width: 22px; height: 22px; padding: 5px; margin-top: 1px; }
/* --- Quote card ----------------------------------------------------------
ml-quote
The person's name always sits on the bottom line of the card, so the
four cards line up whatever the length of the quote. */
.e-con.ml-quote{ display: flex; flex-direction: column; padding: 26px; }
.e-con.ml-quote > .e-con-inner{ padding: 0; gap: 0; height: 100%; width: 100%; }
.e-con.ml-quote > .e-con-inner > .elementor-widget-text-editor{ margin-top: 12px; }
/* the author row: no padding of its own, name and role beside the photo */
.e-con.ml-quote-who > .e-con-inner > .e-con{ flex: 1 1 0; width: auto; min-width: 0; }
.ml-quote .ml-quote-text{
font-family: var(--ml-serif);
font-size: 16.5px;
line-height: 1.5;
color: var(--e-global-color-secondary);
margin: 0;
}
/* the client wording is quoted as it was given, never as a set of links */
.ml-quote .ml-quote-text a{ color: inherit; text-decoration: none; pointer-events: none; }
.ml-quote .ml-quote-who{
margin-top: auto;
padding-top: 18px;
border-top: 1px solid var(--ml-line);
}
.e-con.ml-quote-who > .e-con-inner{ padding: 0; }
.e-con.ml-quote-who .e-con > .e-con-inner{ padding: 0; }
.ml-quote-avatar{ width: 48px; min-width: 48px; flex: 0 0 auto; }
.ml-quote-avatar img{
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
display: block;
/* Most of these marks are drawn on white and sit on a white card, so
without a ring of its own the circle has no edge at all. The green
hairline used elsewhere was too faint to give it one; this is a soft
ink instead, dark enough to read and light enough not to draw the eye
away from the mark inside it. */
border: 1px solid rgba(34, 50, 74, .24);
}
.ml-quote-name .elementor-heading-title,
.ml-quote-name h4.elementor-heading-title{
font-family: var(--ml-sans);
font-size: 15px;
font-weight: 600;
line-height: 1.72;
/* the name is a plain line in the concept, not a heading, so it keeps the
normal spacing between its letters */
letter-spacing: 0;
color: var(--e-global-color-secondary);
}
/* in the concept this line is an inline span in a 17px block, so its line
box is the block's, 17 x 1.72; the same box is written here */
.ml-quote-role{ font-size: 13px; line-height: 29.24px; color: var(--e-global-color-mlmuted); }
.ml-quote .elementor-star-rating{ font-size: 13px; letter-spacing: 2px; line-height: 1.72; }
.ml-quote .elementor-star-rating__wrapper{ justify-content: flex-start; }
/* --- Small cards floating over the hero photo ----------------------------
ml-float ml-float-quote-card ml-float-years */
.ml-float{
position: absolute;
z-index: 2;
background: #fff;
border: 1.5px solid #D4DFC8;
border-radius: 18px;
box-shadow: var(--ml-shadow-lift);
padding: 16px 18px;
}
.e-con.ml-float > .e-con-inner{ padding: 0; }
.ml-float-quote-card{ width: 250px; left: -26px; bottom: 36px; }
.ml-float-years{
right: -14px;
top: 30px;
width: auto;
text-align: center;
padding: 11px 15px;
border-radius: 14px;
}
.ml-float .ml-float-quote{
font-family: var(--ml-serif);
font-style: italic;
font-size: 14px;
line-height: 1.4;
color: var(--e-global-color-secondary);
}
.ml-years{
font-family: var(--ml-serif);
font-size: 22px;
font-weight: 600;
line-height: 1;
background-image: linear-gradient(120deg, var(--e-global-color-mlgreendark) 5%, var(--e-global-color-accent) 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.ml-years-label{ font-size: 10.5px; line-height: 1.72; color: var(--e-global-color-mlmuted); letter-spacing: .02em; margin-top: 2px; }
/* --- Photos --------------------------------------------------------------
ml-photo-square the hero picture, a square
ml-photo-panel a picture that stretches beside a column of words
ml-photo-panel-tall / -taller the two taller ones */
.ml-photo img{ border-radius: var(--ml-radius-lg); box-shadow: var(--ml-shadow-lift); display: block; }
.ml-photo-square img{ aspect-ratio: 1 / 1; object-fit: cover; width: 100%; border: 1px solid var(--ml-line-2); }
.ml-photo-panel{
align-self: stretch;
min-height: 340px;
border-radius: var(--ml-radius-lg);
box-shadow: var(--ml-shadow-lift);
background-size: cover;
background-position: center;
}
.ml-photo-panel-tall{ min-height: 360px; }
.ml-photo-panel-taller{ min-height: 420px; }
/* --- Frequently asked questions ------------------------------------------
ml-faq on the accordion widget
The questions run in two columns, each its own white card, with a thin
green cross on the right that turns into a minus when opened. */
/* two columns side by side, each its own list, so opening a question on one
side leaves the other side where it is */
.ml-faq-cols > .e-con-inner{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 22px;
align-items: start;
max-width: 1040px;
margin: 0 auto;
padding-left: 0;
padding-right: 0;
}
.ml-faq-cols > .e-con-inner > *{ width: 100%; max-width: 100%; min-width: 0; }
.ml-faq.elementor-widget-n-accordion .e-n-accordion{
display: flex;
flex-direction: column;
gap: 14px;
}
.ml-faq.elementor-widget-n-accordion .e-n-accordion-item{
background: #fff;
border: 1px solid var(--ml-line);
border-radius: 16px;
margin: 0;
overflow: hidden;
transition: box-shadow .25s ease, border-color .25s ease;
}
.ml-faq.elementor-widget-n-accordion .e-n-accordion-item[open]{
box-shadow: var(--ml-shadow-soft);
border-color: var(--ml-green-tint-2);
}
.ml-faq.elementor-widget-n-accordion .e-n-accordion-item-title{
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 80px;
padding: 20px 24px;
background: transparent;
border: 0;
border-radius: 0;
}
.ml-faq.elementor-widget-n-accordion .e-n-accordion-item-title-header{ flex: 1 1 auto; }
.ml-faq.elementor-widget-n-accordion .e-n-accordion-item-title-text{
font-family: var(--ml-serif);
font-size: 18.5px;
/* the questions are set bold and the answers left as they were, so a
column of cards reads as a list of questions first. 600 is the heaviest
cut either serif carries: the Newsreader file covers 400 to 600, and
Noto Serif JP is asked for at 500 and 600. Anything above that would be
drawn by the browser thickening the letters itself. */
font-weight: 600;
line-height: 1.72;
color: var(--e-global-color-secondary);
margin: 0;
}
/* the cross, drawn as two thin bars the way the concept has it */
.ml-faq.elementor-widget-n-accordion .e-n-accordion-item-title-icon{
order: 2;
position: relative;
flex: 0 0 auto;
width: 24px;
height: 24px;
transition: transform .3s ease;
}
/* Elementor keeps its own plus and minus in there; the cross below
replaces them, so they are marked out of the way */
.ml-faq.elementor-widget-n-accordion .e-n-accordion-item-title-icon > *{ display: none !important; }
.ml-faq.elementor-widget-n-accordion .e-n-accordion-item-title-icon:before,
.ml-faq.elementor-widget-n-accordion .e-n-accordion-item-title-icon:after{
content: "";
position: absolute;
background: var(--e-global-color-primary);
border-radius: 2px;
}
.ml-faq.elementor-widget-n-accordion .e-n-accordion-item-title-icon:before{ left: 11px; top: 3px; width: 2px; height: 18px; }
.ml-faq.elementor-widget-n-accordion .e-n-accordion-item-title-icon:after{ left: 3px; top: 11px; width: 18px; height: 2px; }
.ml-faq.elementor-widget-n-accordion .e-n-accordion-item[open] .e-n-accordion-item-title-icon{ transform: rotate(45deg); }
.ml-faq.elementor-widget-n-accordion .e-n-accordion-item > .e-con,
.ml-faq.elementor-widget-n-accordion .e-n-accordion-item .e-con-inner{ padding: 0; border: 0; }
/* Elementor draws a rule between a question and its answer; the concept
runs them together */
.ml-faq.elementor-widget-n-accordion .e-n-accordion-item-title{ border-bottom: 0 !important; }
.ml-faq.elementor-widget-n-accordion .e-n-accordion-item p{
margin: 0;
padding: 0 24px;
font-size: 15.5px;
line-height: 1.75;
color: var(--e-global-color-text);
}
/* an answer can run to several paragraphs, so they space themselves and only
the last one holds the card open at the bottom */
.ml-faq.elementor-widget-n-accordion .e-n-accordion-item p + p{ margin-top: 15px; }
.ml-faq.elementor-widget-n-accordion .e-n-accordion-item p:last-child{ padding-bottom: 24px; }
/* --- Blog posts ----------------------------------------------------------
ml-posts on the Loop Grid widget
ml-post-card the card, in the loop item template
ml-post-image ml-post-cat ml-post-title ml-post-excerpt */
/* The card is a column: picture, then words. The words stretch to fill what
is left, so the link at the foot sits on one line across all three cards.
These are written as .e-con. because Elementor's own container
rules would otherwise cancel them. */
.e-con.ml-post-card{ overflow: hidden; height: 100%; display: flex; flex-direction: column; }
.e-con.ml-post-card > .e-con-inner{ padding: 0; height: 100%; display: flex; flex-direction: column; }
.ml-post-image img{ width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.e-con.ml-post-body{ flex: 1 1 auto; align-self: stretch; }
.e-con.ml-post-body > .e-con-inner{ height: 100%; display: flex; flex-direction: column; }
.ml-post-cat .elementor-icon-list-icon{ display: none; }
/* A post can be filed under several categories, and this used to draw the
first one only - so which of five a reader saw was whichever came first
in the list, which is not a decision anybody made. Up to three are drawn
now, as pills; the rule that shapes them is further down with the rest
of the blog work. */
.ml-post-cat .elementor-post-info__terms-list{ font-size: 0; }
.ml-post-cat .elementor-icon-list-item{ margin: 0; }
.ml-post-cat .elementor-post-info__item,
.ml-post-cat .elementor-icon-list-text{
font-family: var(--ml-sans);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--e-global-color-mlgreendark);
}
.ml-post-title .elementor-heading-title,
.ml-post-title h3.elementor-heading-title,
.ml-post-title .elementor-heading-title a{
font-family: var(--ml-serif);
font-size: 20px;
font-weight: 600;
line-height: 1.28;
color: var(--e-global-color-secondary);
text-decoration: none;
}
.ml-post-title .elementor-heading-title a:hover{ color: var(--e-global-color-mlgreendark); }
.ml-post-excerpt.elementor-widget{ flex: 1 1 auto; }
.ml-post-excerpt .elementor-heading-title{
font-family: var(--ml-sans);
font-size: 14.5px;
font-weight: 400;
line-height: 1.55;
letter-spacing: 0;
color: var(--e-global-color-mlmuted);
text-wrap: initial;
}
.ml-post-card .ml-arrow-link{
margin-top: auto;
padding-top: 6px;
align-self: flex-start;
}
body .ml-post-card .ml-arrow-link .elementor-button.elementor-button{ font-size: 14px; }
/* cards rise into place, one just after another, both on the first draw and
as more of them are fetched */
.ml-posts .e-loop-item{
height: 100%;
animation: ml-card-in .55s cubic-bezier(.22,.61,.36,1) both;
}
.ml-posts .e-loop-item:nth-child(3n+2){ animation-delay: .09s; }
.ml-posts .e-loop-item:nth-child(3n+3){ animation-delay: .18s; }
@keyframes ml-card-in{
from{ opacity: 0; transform: translateY(18px); }
to{ opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){ .ml-posts .e-loop-item{ animation: none; } }
.ml-posts a{ text-decoration: none; box-shadow: none; }
/* the show more control is quiet text with a small chevron, not a button */
.ml-posts .elementor-button-wrapper{ margin-top: 32px; text-align: center; }
body .ml-posts .elementor-button-wrapper .elementor-button.elementor-button{
background: none;
color: var(--e-global-color-mlmuted);
font-family: var(--ml-sans);
font-weight: 500;
font-size: 14.5px;
padding: 0;
box-shadow: none;
border: 0;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 7px;
}
/* the chevron rides with the words, so while the posts are being fetched
Elementor takes both away and only the green ring is left */
.ml-posts .elementor-button-wrapper .elementor-button-text{
display: inline-flex;
align-items: center;
gap: 7px;
line-height: 1.72;
}
.ml-posts .elementor-button-wrapper .elementor-button-text:after{
content: "";
width: 14px;
height: 14px;
flex: 0 0 auto;
background: currentColor;
-webkit-mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22%3E%3Cpath d=%22M4 6l4 4 4-4%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
mask: no-repeat center / contain url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 16 16%22 fill=%22none%22%3E%3Cpath d=%22M4 6l4 4 4-4%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E");
}
.ml-posts .elementor-button-wrapper .elementor-button:hover{ background: none; color: var(--e-global-color-mlgreendark); }
.ml-posts .elementor-button-wrapper .elementor-button,
.ml-posts .elementor-button-wrapper .elementor-button:visited,
.ml-posts .elementor-button-wrapper .elementor-button:focus,
.ml-posts .elementor-button-wrapper .elementor-button:active{ color: var(--e-global-color-mlmuted); }
/* Fetching more posts takes a moment, so a small green ring turns while it
happens. Elementor shows and hides its own spinner, so the ring is drawn
on that: when Elementor puts it away the ring goes with it. */
.ml-posts .e-load-more-spinner{
align-items: center;
justify-content: center;
}
.ml-posts .e-load-more-spinner svg{
width: 15px;
height: 15px;
box-sizing: border-box;
border-radius: 50%;
border: 2px solid rgba(84,180,53,.25);
border-top-color: var(--e-global-color-primary);
fill: transparent;
color: transparent;
animation: ml-spin .7s linear infinite;
}
@keyframes ml-spin{ to{ transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
.ml-posts .e-load-more-spinner svg{ animation-duration: 2s; }
}
/* --- Contact details -----------------------------------------------------
ml-crow ml-crow-icon ml-crow-label ml-crow-value */
.ml-split-contact .ml-heading-mid.elementor-widget{ margin-top: 14px; }
.e-con > .e-con-inner > .ml-contact-intro.elementor-widget{ max-width: 38ch; margin-top: 16px; }
.ml-crow{ border-top: 1px solid var(--ml-line-2); }
.e-con.ml-crow > .e-con-inner{
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 14px;
padding: 18px 0;
width: 100%;
}
.e-con.ml-crow > .e-con-inner > .ml-crow-icon{ flex: 0 0 auto; width: auto; }
.e-con.ml-crow > .e-con-inner > .e-con{ flex: 1 1 0; width: auto; min-width: 0; }
.e-con.ml-crow > .e-con-inner{ flex-wrap: nowrap; }
.ml-crow-icon .elementor-icon-wrapper{
width: 38px;
height: 38px;
border-radius: 12px;
background: #fff;
border: 1px solid var(--ml-line-2);
display: grid;
place-items: center;
}
.ml-crow-icon .elementor-icon{
width: 17px;
height: 17px;
color: var(--e-global-color-mlgreendark);
}
.ml-crow-label .elementor-heading-title{
font-family: var(--ml-sans);
font-size: 12.5px;
font-weight: 700;
line-height: 1.72;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--e-global-color-mlmuted);
}
/* same story: inline text in a 17px block, every line 29.24px tall */
.ml-crow-value{ font-size: 15.5px; line-height: 29.24px; color: var(--e-global-color-secondary); }
.ml-crow-value a{ color: inherit; text-decoration: none; }
.ml-crow-value a:hover{ color: var(--e-global-color-mlgreendark); }
/* --- Map -----------------------------------------------------------------
ml-map grows to fill whatever height is left in its column, so it
finishes level with the form beside it */
.ml-map{
flex: 1 1 auto;
align-self: stretch;
min-height: 220px;
margin-top: 24px;
border-radius: var(--ml-radius);
overflow: hidden;
border: 1px solid var(--ml-line-2);
box-shadow: var(--ml-shadow-soft);
background: #fff;
}
.ml-map .elementor-widget-container,
.ml-map .elementor-custom-embed{ height: 100%; }
.ml-map iframe{ height: 100% !important; min-height: 220px; width: 100%; border: 0; display: block; }
/* --- Contact form --------------------------------------------------------
ml-form on the container holding the Forminator form
ml-form-note the line under it
Forminator ships its own colours and rounding per form, so a few of the
rules below have to be marked important to come through. */
.ml-form{
background: #fff;
border: 1px solid var(--ml-line);
border-radius: var(--ml-radius-lg);
box-shadow: var(--ml-shadow-lift);
padding: 38px;
}
.ml-form > .e-con-inner{ padding: 0; width: 100%; }
.ml-form .forminator-ui .forminator-label,
.ml-form .forminator-label{
font-family: var(--ml-sans) !important;
font-size: 13.5px !important;
font-weight: 600 !important;
color: var(--e-global-color-secondary) !important;
margin-bottom: 8px !important;
}
.ml-form .forminator-required{ color: var(--e-global-color-mlgreendark) !important; }
.ml-form .forminator-ui .forminator-input,
.ml-form .forminator-ui .forminator-textarea,
.ml-form .forminator-input,
.ml-form .forminator-textarea{
font-family: var(--ml-body) !important;
font-size: 15.5px !important;
color: var(--e-global-color-secondary) !important;
background: #fff !important;
border: 1.5px solid var(--ml-line-2) !important;
border-radius: 12px !important;
padding: 12px 14px !important;
line-height: normal !important;
box-shadow: none !important;
}
.ml-form .forminator-ui .forminator-textarea{ min-height: 138px !important; line-height: 1.65 !important; }
.ml-form .forminator-ui .forminator-input:focus,
.ml-form .forminator-ui .forminator-textarea:focus{
outline: none !important;
border-color: var(--e-global-color-primary) !important;
box-shadow: 0 0 0 4px rgba(84,180,53,.13) !important;
}
.ml-form .forminator-ui .forminator-input::placeholder,
.ml-form .forminator-ui .forminator-textarea::placeholder{ color: #A8B1BD !important; }
.ml-form .forminator-ui .forminator-uploader,
.ml-form .forminator-ui .forminator-multi-upload{
border: 1.6px dashed var(--ml-line-2) !important;
border-radius: 14px !important;
background: var(--e-global-color-mlwarm) !important;
}
/* the drop zone: bold line, then the quiet note Forminator prints under it */
.ml-form .forminator-ui .forminator-row{ margin-bottom: 18px !important; }
.ml-form .forminator-ui .forminator-row:last-child{ margin-bottom: 0 !important; }
.ml-form .forminator-ui .forminator-row:has(.forminator-field-consent),
.ml-form .forminator-ui .forminator-row:has(.forminator-field-gdprcheckbox){
margin-top: 4px !important;
margin-bottom: 24px !important;
}
.ml-form .forminator-ui .forminator-multi-upload{
padding: 24px !important;
text-align: center;
transition: border-color .18s, background-color .18s;
}
.ml-form .forminator-ui .forminator-multi-upload:hover,
.ml-form .forminator-ui .forminator-multi-upload.forminator-dragover{
border-color: var(--e-global-color-primary) !important;
background: var(--e-global-color-mlgreentint) !important;
}
.ml-form .forminator-ui .forminator-multi-upload-message p{
font-family: var(--ml-sans) !important;
font-size: 14.5px !important;
font-weight: 600 !important;
color: var(--e-global-color-secondary) !important;
margin: 9px 0 0 !important;
}
.ml-form .forminator-ui .forminator-icon-upload{ color: var(--e-global-color-mlgreendark) !important; }
.ml-form .forminator-ui .forminator-description{
font-family: var(--ml-sans) !important;
font-size: 12px !important;
color: var(--e-global-color-mlmuted) !important;
margin-top: 7px !important;
}
.ml-form .forminator-ui .forminator-field-upload .forminator-description{ font-size: 13px !important; margin-top: 3px !important; }
/* the consent line: the words beside the box carry the meaning, so the
field's caption over it is left out, as in the concept */
.ml-form .forminator-field-consent > .forminator-field > .forminator-label,
.ml-form .forminator-field-gdprcheckbox > .forminator-field > .forminator-label{ display: none !important; }
.ml-form .forminator-ui .forminator-checkbox,
.ml-form .forminator-ui .forminator-consent{
font-family: var(--ml-sans) !important;
font-size: 14px !important;
line-height: 1.6 !important;
color: var(--e-global-color-text) !important;
}
.ml-form .forminator-ui .forminator-consent a,
.ml-form .forminator-ui .forminator-checkbox a{ text-decoration: underline; text-underline-offset: 3px; }
.ml-form .forminator-ui .forminator-checkbox{ align-items: flex-start !important; gap: 11px; }
.ml-form .forminator-ui .forminator-checkbox .forminator-checkbox-box.forminator-checkbox-box{
box-sizing: border-box !important;
width: 17px !important;
min-width: 17px !important;
max-width: 17px !important;
height: 17px !important;
margin: 3px 0 0 !important;
border-radius: 4px !important;
border: 1.5px solid var(--ml-line-2) !important;
background: #fff !important;
flex: 0 0 auto;
}
.ml-form .forminator-ui .forminator-checkbox input:checked + .forminator-checkbox-box{
background: var(--e-global-color-primary) !important;
border-color: var(--e-global-color-primary) !important;
}
.ml-jp .ml-form .forminator-ui .forminator-checkbox input:checked + .forminator-checkbox-box{
background: var(--e-global-color-mljapanred) !important;
border-color: var(--e-global-color-mljapanred) !important;
}
.ml-form .forminator-ui .forminator-button-upload,
.ml-form .forminator-ui .forminator-multi-upload-message a{
color: var(--e-global-color-mlgreendark) !important;
background: none !important;
font-weight: 600 !important;
}
.ml-form .forminator-ui .forminator-button-submit,
.ml-form button.forminator-button-submit{
width: 100% !important;
justify-content: center;
background: var(--e-global-color-primary) !important;
background-image: none !important;
border: 0 !important;
color: #fff !important;
border-radius: 11px !important;
font-family: var(--ml-sans) !important;
font-size: 14.5px !important;
font-weight: 600 !important;
line-height: normal !important;
border: 1.6px solid transparent !important;
padding: 11px 21px !important;
box-shadow: 0 10px 22px rgba(84,180,53,.24) !important;
transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease !important;
}
.ml-form .forminator-ui .forminator-button-submit:hover,
.ml-form button.forminator-button-submit:hover{
transform: translateY(-2px);
box-shadow: 0 14px 28px rgba(84,180,53,.28) !important;
}
.ml-form .forminator-ui .forminator-button-submit:hover,
.ml-form button.forminator-button-submit:hover{ background: var(--e-global-color-mlgreendark) !important; }
.ml-form .forminator-ui a{ color: var(--e-global-color-mlgreendark) !important; font-weight: 600; }
.ml-form .forminator-error-message{ color: var(--e-global-color-mljapanred) !important; }
/* Forminator shows anyone signed in an "Edit form" link. It is no business
of a visitor's, and it is not in the design. */
.forminator-module-edit-link,
.ml-form .forminator-edit-module{ display: none !important; }
.ml-form-note.elementor-widget{
margin-top: 14px;
text-align: center;
font-size: 12.5px;
color: var(--e-global-color-mlmuted);
}
/* --- Two columns of set proportions --------------------------------------
ml-split-hero ml-split-ngo ml-split-about ml-split-seo
ml-split-topics ml-split-contact
The numbers are the proportions the concept uses. Both columns become one
on a tablet. */
.ml-split-hero > .e-con-inner{ display: grid; grid-template-columns: 1.06fr .94fr; gap: 60px; align-items: center; }
.ml-split-ngo > .e-con-inner{ display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: stretch; }
.ml-split-about > .e-con-inner{ display: grid; grid-template-columns: .9fr 1.1fr; gap: 54px; align-items: stretch; }
.ml-split-seo > .e-con-inner{ display: grid; grid-template-columns: 1.12fr .88fr; gap: 54px; align-items: stretch; }
.ml-split-topics > .e-con-inner,
.ml-split-contact > .e-con-inner{ display: grid; grid-template-columns: .82fr 1.18fr; gap: 56px; align-items: stretch; }
.ml-split-hero > .e-con-inner > *,
.ml-split-ngo > .e-con-inner > *,
.ml-split-about > .e-con-inner > *,
.ml-split-seo > .e-con-inner > *,
.ml-split-topics > .e-con-inner > *,
.ml-split-contact > .e-con-inner > *{ width: 100%; max-width: 100%; min-width: 0; }
/* a column runs the full width of its share, with nothing tucked in at the
sides, so the wording breaks its lines exactly as the concept shows */
.ml-split-hero > .e-con-inner > .e-con:not(.ml-form),
.ml-split-ngo > .e-con-inner > .e-con:not(.ml-form),
.ml-split-about > .e-con-inner > .e-con:not(.ml-form),
.ml-split-seo > .e-con-inner > .e-con:not(.ml-form),
.ml-split-topics > .e-con-inner > .e-con:not(.ml-form),
.ml-split-contact > .e-con-inner > .e-con:not(.ml-form){ padding-left: 0; padding-right: 0; }
/* Two boxes across, one on a phone. Used by the services and the quotes. */
.ml-two-up > .e-con-inner{ display: grid; grid-template-columns: repeat(2, 1fr); align-items: stretch; }
.ml-two-up > .e-con-inner > *{ width: 100%; max-width: 100%; }
/* --- Hero ----------------------------------------------------------------
ml-hero ml-hero-photo ml-hero-title ml-hero-intro
The hero fills one screen, so the client names never peek in underneath,
and it sits close under the header the way the concept has it. */
.ml-hero{
position: relative;
justify-content: center;
background-image:
radial-gradient(44% 56% at 8% -6%, rgba(84,180,53,.09), transparent 60%),
radial-gradient(48% 62% at 94% -8%, rgba(47,111,214,.11), transparent 62%);
background-repeat: no-repeat;
}
/* One screen exactly. --ml-header-h is the height of the header bar; the
second line takes the WordPress admin bar off as well, so the strip below
never peeks in while you are logged in. */
:root{ --ml-header-h: 81px; --ml-admin-bar: 0px; }
body.admin-bar{ --ml-admin-bar: 32px; }
@media (min-height: 680px){
.ml-hero{
min-height: calc(100vh - 80px - var(--ml-admin-bar));
min-height: calc(100svh - 80px - var(--ml-admin-bar));
}
}
@media (max-width: 782px){
body.admin-bar{ --ml-admin-bar: 46px; }
}
/* a soft line finishes the hero, the width of the content, fading out */
.ml-hero:after{
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: min(100%, var(--ml-content-width));
height: 1px;
background: linear-gradient(90deg, transparent, var(--ml-line-2) 8%, var(--ml-line-2) 92%, transparent);
}
.ml-hero-title.elementor-widget-heading .elementor-heading-title{
font-size: clamp(38px, 5vw, 60px);
font-weight: 500;
line-height: 1.05;
letter-spacing: -.02em;
}
/* The English headline is a long line of words, and at the concept's full
size it falls onto a fifth line on a wide screen. A shade smaller holds it
to four lines the whole way from a tablet up. The Japanese headline keeps
the larger size, because its four lines fit at it. */
html[lang^="en"] .ml-hero-title.elementor-widget-heading .elementor-heading-title{
font-size: clamp(38px, 4.7vw, 56px);
}
.ml-hero-intro.elementor-widget{ font-size: 19px; line-height: 1.6; max-width: 50ch; }
/* both columns sit in the middle of the hero, as the concept centres its
grid; Elementor would otherwise stretch the words column to the full
height and leave them at its top */
.ml-split-hero > .e-con-inner > .e-con{ align-self: center; height: auto; min-height: 0; }
.ml-hero-photo{ position: relative; align-self: center; height: auto; }
.e-con.ml-hero-photo > .e-con-inner{ padding: 0; }
/* the spacing down the left hand column, the concept's own numbers */
.ml-hero-title.elementor-widget{ margin-top: 22px; }
.ml-hero-intro.elementor-widget{ margin-top: 22px; }
.ml-hero-cta{ margin-top: 30px; }
/* --- The NGO band --------------------------------------------------------
ml-ngo-band ml-micro
Green fading across to blue with two soft glows over the top. */
.ml-ngo-band{
position: relative;
overflow: hidden;
overflow: clip;
background-image: linear-gradient(128deg,
var(--e-global-color-mlmint) 0%,
#E6F2DF 26%,
#E8F0F8 62%,
var(--e-global-color-mlblueband) 100%);
}
.ml-ngo-band:before{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(58% 78% at 10% 16%, rgba(84,180,53,.20), transparent 62%),
radial-gradient(54% 74% at 90% 84%, rgba(47,111,214,.17), transparent 64%),
radial-gradient(40% 60% at 52% 50%, rgba(255,255,255,.55), transparent 70%);
}
.ml-ngo-band > *{ position: relative; z-index: 1; }
.ml-micro .elementor-heading-title{
font-family: var(--ml-sans);
font-size: 13px;
font-weight: 600;
line-height: 1.72;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--e-global-color-mlgreendark);
}
/* the spacing down the NGO copy, the concept's own numbers. The container
holding them has no gap of its own; each line carries its distance. */
.ml-split-ngo .ml-micro.elementor-widget{ margin-top: 8px; }
.ml-split-ngo .ml-heading-mid.elementor-widget{ margin-top: 12px; }
.e-con > .e-con-inner > .ml-ngo-intro.elementor-widget{ margin-top: 16px; font-size: 17px; max-width: 46ch; }
.ml-split-ngo .ml-ticks.elementor-widget{ margin-top: 24px; }
.ml-cta-row{ margin-top: 30px; }
/* --- The blue band -------------------------------------------------------
Inside it the label, its dot and the ticks read blue rather than green,
exactly as the concept has it. The Japanese page uses the hinomaru red
for that one dot instead. */
.ml-band-blue .ml-label .elementor-heading-title{ color: var(--ml-blue-ink); }
.ml-band-blue .ml-label .elementor-heading-title:before{ background: var(--e-global-color-accent); }
.ml-band-blue .ml-micro .elementor-heading-title{ color: var(--ml-blue-ink); }
.ml-band-blue .ml-ticks .elementor-icon-list-icon{ background: #fff; color: var(--ml-blue-ink); }
/* the spacing down the About copy. The English heading is a size up from
the Japanese one, which the concept sets compact. */
.ml-heading-about.elementor-widget-heading .elementor-heading-title{
font-size: clamp(28px, 3.4vw, 42px);
font-weight: 500;
}
.ml-split-about .ml-heading-about.elementor-widget{ margin-top: 14px; }
.ml-split-about .ml-heading-small.elementor-widget{ margin-top: 12px; }
.ml-split-about .ml-ticks.elementor-widget{ margin-top: 22px; }
.ml-split-about .ml-bio.elementor-widget{ margin-top: 22px; font-size: 16.5px; line-height: 1.85; color: var(--e-global-color-text); }
.ml-jp.ml-split-about .ml-bio.elementor-widget{ margin-top: 16px; font-size: 15.5px; line-height: 1.8; }
.ml-split-about .ml-micro.elementor-widget{ margin-top: 20px; }
.ml-split-about .ml-micro .elementor-heading-title{ font-size: 12.5px; font-weight: 700; color: var(--ml-blue-ink); }
.ml-jp.ml-band-blue .ml-label .elementor-heading-title{ color: var(--e-global-color-secondary); }
.ml-jp.ml-band-blue .ml-label .elementor-heading-title:before{ background: var(--e-global-color-mljapanred); }
/* --- Japanese page: services in four boxes with hairlines between them ---
ml-jp-services on the container, ml-jp-service on each box */
.ml-jp-services > .e-con-inner{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0;
padding: 0;
border-top: 1px solid var(--ml-line-2);
border-left: 1px solid var(--ml-line-2);
align-items: stretch;
}
.ml-jp-service{
border-right: 1px solid var(--ml-line-2);
border-bottom: 1px solid var(--ml-line-2);
}
.ml-jp-service .elementor-widget-text-editor{ font-size: 15.5px; line-height: 1.95; margin-top: 16px; }
.ml-jp-service .elementor-widget-text-editor p{ margin-bottom: 0; }
.ml-jp-service .ml-arrow-link{ margin-top: auto; padding-top: 24px; align-self: flex-start; }
body .ml-jp-service .ml-arrow-link .elementor-button.elementor-button{ font-size: 14.5px; }
.ml-keywords, .ml-keywords p, .ml-jp-service .ml-keywords.elementor-widget-text-editor{ font-size: 13.5px; line-height: 1.95; color: var(--e-global-color-mlmuted); }
.ml-side-note, .ml-jp-service .ml-side-note.elementor-widget-text-editor{
font-size: 13px;
line-height: 1.75;
color: var(--e-global-color-mlmuted);
padding-left: 13px;
border-left: 2px solid var(--ml-line-2);
}
.ml-side-note p{ font-size: inherit; line-height: inherit; color: inherit; }
/* --- Japanese page: the list of subjects beside a photo ------------------
ml-subject-list on an Icon List widget */
.ml-subject-list .elementor-icon-list-items{ display: block; columns: 2; column-gap: 44px; }
.ml-subject-list .elementor-icon-list-item{
break-inside: avoid;
border-bottom: 1px solid var(--ml-line-2);
padding: 12px 0;
align-items: center;
gap: 12px;
margin: 0;
}
.ml-subject-list .elementor-icon-list-icon{
width: 7px;
height: 7px;
flex: 0 0 auto;
margin: 0;
color: var(--e-global-color-primary);
}
.ml-subject-list .elementor-icon-list-text{ font-size: 16.5px; color: var(--e-global-color-secondary); }
/* --- The Japanese page runs tighter --------------------------------------
ml-jp sits on every section of the Japanese homepage. Smaller corners,
flatter shadows, and neither the highlighter nor the fading heading. */
.ml-jp{
--ml-radius: 14px;
--ml-radius-lg: 18px;
--ml-shadow-soft: 0 1px 2px rgba(34,50,74,.05);
--ml-shadow-lift: 0 2px 10px rgba(34,50,74,.07);
}
/* the header and footer sit outside the page's sections, so the Japanese
values are repeated for them by language */
html[lang^="ja"] body{
--ml-shadow-soft: 0 1px 2px rgba(34,50,74,.05);
--ml-shadow-lift: 0 2px 10px rgba(34,50,74,.07);
}
html[lang^="ja"] .ml-header-cta .elementor-button{ border-radius: 8px; }
/* the stat over the hero photo is plain green, not the fading heading */
.ml-jp .ml-years{ background: none; -webkit-text-fill-color: initial; color: var(--e-global-color-mlgreendark); }
/* required marks and errors carry the hinomaru red */
.ml-jp .ml-form .forminator-required{ color: var(--e-global-color-mljapanred) !important; }
.ml-jp .ml-form .forminator-ui .forminator-input.forminator-has_error,
.ml-jp .ml-form .forminator-ui .forminator-textarea.forminator-has_error,
.ml-jp .ml-form .forminator-ui .forminator-field.forminator-has_error .forminator-input,
.ml-jp .ml-form .forminator-ui .forminator-field.forminator-has_error .forminator-textarea{
border-color: var(--e-global-color-mljapanred) !important;
box-shadow: 0 0 0 4px rgba(188,0,45,.10) !important;
}
.ml-jp .ml-form .forminator-error-message{ color: var(--e-global-color-mljapanred) !important; }
.ml-jp .ml-form .forminator-ui .forminator-button-submit,
.ml-jp .ml-form button.forminator-button-submit{ border-radius: 8px !important; }
.ml-jp .ml-form .forminator-ui .forminator-multi-upload{ border-radius: 10px !important; }
/* the NGO intro is two paragraphs on this page */
.ml-jp .ml-ngo-intro p{ margin-bottom: 0; }
.ml-jp .ml-ngo-intro p + p{ margin-top: 14px; }
.ml-jp.ml-split-ngo .ml-cta-row .ml-arrow-link .elementor-button{ padding-left: 0; padding-right: 0; }
/* founder band: the list sits 18px under the small line */
.ml-jp.ml-split-about .ml-ticks-two.elementor-widget{ margin-top: 18px; }
/* organic search: the concept's own distances
ml-heading-seo ml-bio-wide */
.ml-heading-seo.elementor-widget-heading .elementor-heading-title{
font-size: clamp(26px, 3.2vw, 40px);
font-weight: 500;
line-height: 1.14;
}
.ml-split-seo .ml-heading-seo.elementor-widget{ margin-top: 14px; }
.ml-bio-wide.elementor-widget{ font-size: 16.5px; line-height: 1.85; color: var(--e-global-color-text); }
.ml-split-seo .ml-bio-wide.elementor-widget{ margin-top: 22px; }
.ml-split-seo .ml-side-note.elementor-widget{ margin-top: 20px; }
.ml-split-seo .ml-arrow-link.elementor-widget{ margin-top: 26px; }
.ml-subject-list .elementor-icon-list-text{ line-height: 1.72; }
/* --- Japanese page: one heading names each block --------------------------
macrolingo.com/ja names a block with a single heading rather than the small
line above a large one the English page uses, so the heads on this page are
one line and every piece of wording stays in the block it belongs to.
ml-strip-title the client strip, which holds no other wording
ml-heading-solo a section head that is one heading on its own
ml-heading-feature the two blocks beside the organic search wording
ml-photo-caption who is in the picture */
/* The tag and the class both have to be named here, because the rule that
sets the line height of every real heading names the tag as well, and a
rule that leaves the tag out loses to it. */
.ml-strip-title.elementor-widget-heading h3.elementor-heading-title{
/* the same size as the heading of the section below it */
font-size: clamp(26px, 3vw, 38px);
font-weight: 500;
line-height: 1.3;
letter-spacing: 0;
}
.ml-section-head .ml-heading-solo.elementor-widget-heading h2.elementor-heading-title{
font-size: clamp(26px, 3vw, 38px);
font-weight: 500;
line-height: 1.3;
}
.ml-heading-feature.elementor-widget-heading h3.elementor-heading-title{
font-size: clamp(21px, 2vw, 26px);
font-weight: 500;
line-height: 1.38;
}
/* the wording now starts at the top of its column, level with the picture */
.ml-jp .ml-split-seo .ml-heading-seo.elementor-widget:first-child{ margin-top: 0; }
.ml-feature .ml-bio-wide.elementor-widget{ margin-top: 16px; }
.ml-feature .ml-side-note.elementor-widget{ margin-top: 16px; }
/* a hairline separates the three from each other the way the live site does,
with the same air above and below it */
.ml-features{ border-top: 1px solid var(--ml-grey-line); margin-top: 44px; }
/* the founder's name, in the column beside his picture */
.ml-signature.elementor-widget{ margin-top: 22px; }
.ml-signature p{
font-family: var(--ml-sans);
font-size: 14.5px;
font-weight: 700;
line-height: 1.6;
margin-bottom: 0;
color: var(--e-global-color-secondary);
}
/* The wording in this block runs long on the Japanese page, so the picture
holds a square and travels down beside it rather than being stretched into
a ribbon. It comes to rest below the header. */
.ml-jp.ml-split-ngo > .e-con-inner{ align-items: start; }
.ml-jp.ml-split-ngo .ml-photo-panel{
align-self: start;
position: sticky;
top: calc(var(--ml-header-h, 81px) + var(--ml-admin-bar, 0px) + 28px);
aspect-ratio: 1 / 1;
min-height: 0;
}
@media (max-width: 1024px){
.ml-jp.ml-split-ngo .ml-photo-panel{
position: static;
aspect-ratio: 16 / 10;
}
}
/* the approach list sits back beside the expert wording. Its lines run to
two, so each tick sits level with the first line rather than the middle. */
.ml-jp.ml-split-ngo .ml-micro.elementor-widget{ margin-top: 26px; }
.ml-jp.ml-split-ngo .ml-ticks.elementor-widget{ margin-top: 14px; }
.ml-jp.ml-split-ngo .ml-ticks .elementor-icon-list-item{ align-items: flex-start; }
.ml-jp.ml-split-ngo .ml-ticks .elementor-icon-list-icon{ margin-top: 3px; }
/* Japanese has no spaces, so a browser left to itself will break a heading
in the middle of a word. This asks it to break where the phrase does.
Browsers that do not know the value carry on as before. */
.ml-jp .elementor-heading-title,
.ml-jp .elementor-icon-box-title,
html[lang^="ja"] .elementor-heading-title{ word-break: auto-phrase; }
@media (max-width: 1024px){
.ml-features{ margin-top: 34px; }
}
.ml-jp .ml-highlight{ background: none; padding: 0; }
.ml-jp .ml-gradient-heading .elementor-heading-title{
background: none;
-webkit-text-fill-color: initial;
color: var(--e-global-color-secondary);
}
.ml-jp .elementor-widget-button .elementor-button{ border-radius: 8px; }
.ml-jp .ml-card{ box-shadow: 0 1px 2px rgba(34,50,74,.05); border-color: var(--ml-line-2); }
.ml-jp .ml-float{ border-radius: 12px; }
.ml-jp .ml-float-years{ border-radius: 10px; }
.ml-jp .ml-service .elementor-icon-box-icon{ border-radius: 12px; }
.ml-jp .ml-crow-icon .elementor-icon-wrapper{ border-radius: 12px; }
.ml-jp .ml-faq.elementor-widget-n-accordion .e-n-accordion-item{ border-radius: 10px; }
.ml-jp .ml-faq.elementor-widget-n-accordion .e-n-accordion-item-title-text{ font-size: 17px; }
.ml-jp .ml-form .forminator-ui .forminator-input,
.ml-jp .ml-form .forminator-ui .forminator-textarea{ border-radius: 9px !important; }
/* Japanese needs its own faces behind the Latin ones, or the browser picks
whatever it has and the headings come out gothic instead of mincho. The
stand-ins sit in these stacks too, for the same reason as above. */
:lang(ja) body,
.ml-jp,
.ml-jp .elementor-widget-text-editor,
.ml-jp .elementor-widget-icon-list,
.ml-jp .elementor-widget-button .elementor-button,
.ml-jp .elementor-icon-box-description{
font-family: var(--e-global-typography-text-font-family), "Figtree stand-in", "Noto Sans JP", Arial, sans-serif !important;
}
/* the same split as on the English page: real headings take the serif, the
small capital labels stay in the body face */
.ml-jp .elementor-widget-heading h1.elementor-heading-title,
.ml-jp .elementor-widget-heading h2.elementor-heading-title,
.ml-jp .elementor-widget-heading h3.elementor-heading-title,
.ml-jp .elementor-widget-heading h4.elementor-heading-title,
.ml-jp .elementor-icon-box-title,
.ml-jp .e-n-accordion-item-title-text,
.ml-jp .ml-quote-text,
.ml-jp h1, .ml-jp h2, .ml-jp h3, .ml-jp h4{
font-family: var(--e-global-typography-primary-font-family), "Newsreader stand-in", "Noto Serif JP", Georgia, serif !important;
}
.ml-jp .ml-quote-name h4.elementor-heading-title{
font-family: var(--e-global-typography-accent-font-family), "Figtree stand-in", "Noto Sans JP", Arial, sans-serif !important;
}
/* ==========================================================================
Header
Templates > Theme Builder > Header. Logo, menu, language switch, button.
The bar carries no line until the page is scrolled, and then it is a
single hairline.
ml-header ml-logo ml-nav ml-header-right ml-lang ml-header-cta
========================================================================== */
.ml-header{
background: rgba(255,255,255,.9);
-webkit-backdrop-filter: saturate(1.1) blur(10px);
backdrop-filter: saturate(1.1) blur(10px);
border-bottom: 1px solid transparent;
box-shadow: none;
transition: border-color .3s ease, box-shadow .3s ease;
}
/* the theme paints its own dark line under the header; the concept has none
until the page is scrolled, and then only a hairline */
.elementor-location-header,
.ml-header{ border-bottom-color: transparent !important; }
.ml-header.elementor-sticky--effects{ border-bottom-color: var(--ml-line) !important; }
.ml-header > .e-con-inner{
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
min-height: 80px;
padding-top: 0;
padding-bottom: 0;
}
.ml-header.elementor-sticky--effects{
border-bottom-color: var(--ml-line);
box-shadow: 0 1px 0 rgba(34,50,74,.02);
}
.ml-header > .e-con-inner > .ml-logo{ flex: 0 0 auto; width: auto; }
.ml-logo img{ height: 34px; width: auto; }
.ml-header > .e-con-inner > .ml-nav{ flex: 1 1 auto; min-width: 0; width: auto; }
.ml-header > .e-con-inner > .ml-header-right{ flex: 0 0 auto; width: auto; }
.ml-header-right > .e-con-inner{
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
padding: 0;
width: auto;
}
/* Astra puts a margin under every list and list item, and Elementor its own
padding on a menu link; both are cleared here so a link is exactly as tall
as its own words and centres on the same line as the logo. */
.ml-nav ul.elementor-nav-menu,
.ml-nav .elementor-nav-menu li{ margin: 0; padding: 0; line-height: 1.72; }
/* only on a wide screen: below the breakpoint this list is put away and the
burger takes over, so the rule must not bring it back */
@media (min-width: 921px){
.ml-nav .elementor-nav-menu--main{ display: flex; align-items: center; }
/* the list fills the space left between the logo and the switch, and its
own centring then leaves the same air on either side */
.ml-nav .elementor-nav-menu--main .elementor-nav-menu{ flex: 1 1 0; }
/* the theme adds a clearing line at the end of every list; in a row that
counts as one more item and leaves an extra gap on the right, which is
what pushed the links towards the logo */
.ml-nav .elementor-nav-menu--main .elementor-nav-menu:before,
.ml-nav .elementor-nav-menu--main .elementor-nav-menu:after{ display: none; }
}
.ml-nav.elementor-widget{ margin: 0; align-self: center; }
.ml-nav .elementor-nav-menu--main .elementor-nav-menu{
justify-content: center;
align-items: center;
flex-wrap: nowrap;
gap: 18px;
}
/* the link is a plain block in the body leading, a 25px box, with the
underline 7px under it, as in the concept */
.ml-nav .elementor-nav-menu--main a.elementor-item,
.ml-nav .elementor-nav-menu--main a.elementor-item:hover,
.ml-nav .elementor-nav-menu--main a.elementor-item-active{
display: inline-block;
font-family: var(--ml-sans);
font-size: 14.5px;
font-weight: 500;
line-height: 1.72;
letter-spacing: 0;
text-transform: none;
color: var(--e-global-color-text);
padding: 0;
height: auto;
position: relative;
white-space: nowrap;
transition: color .16s ease;
}
html[lang^="ja"] .ml-nav .elementor-nav-menu--main a.elementor-item{
font-family: var(--e-global-typography-accent-font-family), "Figtree stand-in", "Noto Sans JP", Arial, sans-serif;
}
.ml-nav .elementor-nav-menu--main a.elementor-item:after{
content: "";
position: absolute;
left: 0; right: 0; bottom: -7px;
height: 2px;
border-radius: 2px;
background: var(--e-global-color-primary);
transform: scaleX(0);
transform-origin: center;
transition: transform .18s ease;
}
.ml-nav .elementor-nav-menu--main a.elementor-item:hover,
.ml-nav .elementor-nav-menu--main a.elementor-item-active{ color: var(--e-global-color-secondary); }
.ml-nav .elementor-nav-menu--main a.elementor-item:hover:after,
.ml-nav .elementor-nav-menu--main a.elementor-item-active:after{ transform: scaleX(1); }
/* --- The language switch --------------------------------------------------
ml-lang, in the header beside the button so the two read as one group.
It is WPML's own switcher, dropped in with its shortcode; the flag, and
the fact that it offers only the language you are not reading, are set
under WPML > Languages > Custom language switchers, not here.
The padding is what there is to aim at, and it answers to the pointer
with the same tint the burger uses. */
.ml-lang.elementor-widget{ display: flex; align-items: center; margin: 0; }
.ml-lang .elementor-shortcode{ display: flex; align-items: center; }
.ml-lang .wpml-ls{ padding: 0; border: 0; background: none; }
.ml-lang .wpml-ls > ul,
.ml-lang .wpml-ls .wpml-ls-item{
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
.ml-lang .wpml-ls a,
.ml-lang .wpml-ls a:link,
.ml-lang .wpml-ls a:visited{
display: inline-flex;
align-items: center;
/* WPML leaves whitespace around the flag, and in a flex row a run of
whitespace becomes an item of its own with a gap on either side of it.
Nothing is spaced with gap here for that reason: the flag carries its
own margin, and the link is set to no font size so the whitespace
measures nothing. The word gets its size back below. */
gap: 0;
font-size: 0;
margin: 0;
padding: 8px 11px;
border: 0;
border-radius: 9px;
background: none;
font-family: var(--ml-sans);
font-size: 13.5px;
font-weight: 600;
line-height: 1.72;
white-space: nowrap;
color: var(--e-global-color-text);
text-decoration: none;
transition: color .16s ease, background-color .16s ease;
}
.ml-lang .wpml-ls a:hover,
.ml-lang .wpml-ls a:focus-visible{
background: var(--e-global-color-mlmint);
color: var(--e-global-color-mlgreendark);
}
.ml-lang .wpml-ls .wpml-ls-native{ font-size: 13.5px; }
/* WPML's own stylesheet puts .4em between the flag and the word on top of
whatever we ask for; the flag's margin below is the whole distance */
.ml-lang .wpml-ls .wpml-ls-flag + span{ margin-left: 0; margin-right: 0; }
/* both flags carry white, so a hairline keeps them off the white bar */
.ml-lang .wpml-ls-flag{
display: block;
width: 18px;
height: auto;
margin: 0 6px 0 0;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(34,50,74,.12);
}
body .ml-header .ml-header-cta .elementor-button.elementor-button{
background-color: var(--e-global-color-primary);
border-radius: 11px;
padding: 9px 17px;
font-size: 13.5px;
line-height: 1.72;
color: #fff;
}
.ml-header-cta .elementor-button:hover{ background-color: var(--e-global-color-mlgreendark); }
/* ==========================================================================
Footer
Templates > Theme Builder > Footer. Four columns, then one quiet line.
ml-footer ml-footer-cols ml-footer-head ml-footer-links
ml-footer-bottom
========================================================================== */
.ml-footer{ background-color: #E4EBDD; border-top: 1px solid #D3DDC8; }
.ml-footer > .e-con-inner{ padding: 66px 0 32px; }
.e-con.ml-footer-cols > .e-con-inner{
display: grid;
grid-template-columns: 1.6fr 1fr 1fr 1fr;
gap: 40px;
padding: 0;
}
.ml-footer-mark img{ height: 38px; width: auto; }
.ml-footer-tag{ margin-top: 16px; font-size: 14.5px; line-height: 1.6; color: var(--e-global-color-mlmuted); max-width: 34ch; }
.ml-footer-head .elementor-heading-title{
font-family: var(--ml-sans);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--e-global-color-mlmuted);
}
.ml-footer-links .elementor-icon-list-icon{ display: none; }
.ml-footer-links .elementor-icon-list-item{ margin-bottom: 11px; }
.ml-footer-links .elementor-icon-list-item,
.ml-footer-links .elementor-icon-list-text,
.ml-footer-links a{
font-family: var(--ml-sans);
font-size: 14.5px;
line-height: 1.72;
color: var(--e-global-color-text);
text-decoration: none;
transition: color .16s ease;
}
.ml-footer-links a:hover .elementor-icon-list-text,
.ml-footer-links a:hover{ color: var(--e-global-color-mlgreendark); }
/* the closing line sits with the columns rather than in a box of its own */
.ml-footer-bottom{ border-top: 0; margin-top: 0; }
.e-con.ml-footer-bottom > .e-con-inner{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: baseline;
flex-wrap: wrap;
gap: 20px;
padding: 26px 0 0;
}
/* the copyright and the strapline share one line, one at each end.
Elementor gives every widget in a container the full width through
--container-widget-width, so that is what has to be answered here. */
.e-con.ml-footer-bottom > .e-con-inner{ --container-widget-width: auto; }
.e-con.ml-footer-bottom > .e-con-inner > .elementor-widget{ width: auto; max-width: 100%; }
.ml-footer-bottom p{
font-family: var(--ml-sans);
font-size: 13.5px;
color: var(--e-global-color-mlmuted);
margin: 0;
}
/* WPML drops a second language list at the very end of the page. The header
already carries the switch, so this one is left out. */
body > .wpml-ls-statics-footer{ display: none; }
/* --- One language at a time ----------------------------------------------
ml-only-en shown on the English pages
ml-only-ja shown on the Japanese pages
WPML on this licence does not serve a translated Theme Builder template,
so the header, footer and blog card carry both languages and these two
rules show whichever belongs. See the notes for what was tried. */
html[lang^="ja"] .ml-only-en{ display: none !important; }
html[lang^="en"] .ml-only-ja{ display: none !important; }
/* ==========================================================================
Movement
Blocks lift into place as they come up the screen. That is the class
ml-reveal plus the snippet under Elementor > Custom Code called "Blocks
lift into place on scroll". Take the class off a block under Advanced >
CSS Classes and that block stops moving.
The rules only apply once the snippet has marked the page (html.ml-js), so
if the snippet is ever removed nothing is left hidden.
ml-reveal-1, -2, -3 make the second, third and fourth block in a row
follow the first by a beat.
========================================================================== */
html.ml-js .ml-reveal{
opacity: 0;
transform: translateY(24px);
transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1);
}
html.ml-js .ml-reveal.ml-in{ opacity: 1; transform: none; }
/* Inside Elementor nothing is ever hidden. The editor draws the page again
after this has run, so a block added by the editor would never be released
and the section would look empty while you work on it. */
body.elementor-editor-active .ml-reveal,
body.elementor-editor-preview .ml-reveal,
html.ml-js body.elementor-editor-active .ml-reveal,
html.ml-js body.elementor-editor-preview .ml-reveal{
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
html.ml-js .ml-reveal-1{ transition-delay: .07s; }
html.ml-js .ml-reveal-2{ transition-delay: .14s; }
html.ml-js .ml-reveal-3{ transition-delay: .21s; }
@media (prefers-reduced-motion: reduce){
html.ml-js .ml-reveal{ opacity: 1; transform: none; transition: none; }
*, *:before, *:after{ animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* ==========================================================================
Small screens
The menu becomes a burger. The panel it opens is styled to match the rest
of the site rather than left as the theme default.
========================================================================== */
.ml-nav .elementor-menu-toggle{
background: transparent;
color: var(--e-global-color-secondary);
border-radius: 10px;
padding: 8px;
transition: background-color .18s ease, color .18s ease;
}
.ml-nav .elementor-menu-toggle:hover,
.ml-nav .elementor-menu-toggle.elementor-active{
background: var(--e-global-color-mlmint);
color: var(--e-global-color-mlgreendark);
}
.ml-nav .elementor-nav-menu--dropdown{
background-color: #fff;
border-top: 1px solid var(--ml-line);
box-shadow: 0 18px 40px rgba(34,50,74,.10);
border-radius: 0 0 var(--ml-radius) var(--ml-radius);
overflow: hidden;
}
.ml-nav .elementor-nav-menu--dropdown a.elementor-item{
font-family: var(--ml-sans);
font-size: 15.5px;
font-weight: 500;
color: var(--e-global-color-secondary);
padding: 15px 24px;
border-bottom: 1px solid var(--ml-line);
}
.ml-nav .elementor-nav-menu--dropdown a.elementor-item:after{ display: none; }
.ml-nav .elementor-nav-menu--dropdown a.elementor-item:hover,
.ml-nav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{
background-color: var(--e-global-color-mlgreentint);
color: var(--e-global-color-mlgreendark);
}
@media (max-width: 1080px){
.ml-nav .elementor-nav-menu--main a.elementor-item{ font-size: 13.5px; }
.ml-nav .elementor-nav-menu--main .elementor-nav-menu{ gap: 13px; }
}
@media (max-width: 920px){
.ml-header > .e-con-inner{ flex-wrap: nowrap; gap: 10px; }
.ml-header > .e-con-inner > .ml-nav{ flex: 0 0 auto; width: auto; max-width: none; order: 3; }
.ml-header > .e-con-inner > .ml-header-right{ margin-left: auto; }
.ml-hero{ min-height: 0; }
.ml-float-quote-card, .ml-float-years{ display: none; }
}
@media (max-width: 920px){
.e-con.ml-footer-cols > .e-con-inner{ grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 920px){
.ml-split-hero > .e-con-inner,
.ml-split-ngo > .e-con-inner,
.ml-split-about > .e-con-inner,
.ml-split-seo > .e-con-inner,
.ml-split-topics > .e-con-inner,
.ml-split-contact > .e-con-inner{ grid-template-columns: 1fr; gap: 34px; }
.ml-two-up > .e-con-inner{ grid-template-columns: 1fr; }
.ml-jp-services > .e-con-inner{ grid-template-columns: 1fr; }
.ml-faq-cols > .e-con-inner{ grid-template-columns: 1fr; gap: 14px; }
.ml-ticks-two .elementor-icon-list-items,
.ml-subject-list .elementor-icon-list-items{ columns: 1; }
.ml-photo-panel, .ml-photo-panel-tall, .ml-photo-panel-taller{ min-height: 280px; }
.ml-map{ flex: 0 0 auto; height: 240px; }
}
/* The burger's list is put away by collapsing its height, but it is still
laid out as wide as its longest item, and that width was making the bar
wider than the screen and pushing the burger itself off the right edge.
The widget is held to the burger, and the list hangs under the whole bar
the way a menu on a phone should. */
@media (max-width: 920px){
.ml-header .ml-nav.elementor-widget{ flex: 0 0 auto; width: auto; min-width: 0; position: static; }
.ml-header .ml-nav .elementor-nav-menu--dropdown{
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid var(--ml-line);
box-shadow: 0 14px 26px rgba(34,50,74,.07);
}
}
@media (max-width: 767px){
.ml-form{ padding: 28px; }
.ml-logo img{ height: 28px; }
}
@media (max-width: 600px){
.e-con.ml-footer-cols > .e-con-inner{ grid-template-columns: 1fr; }
/* the logo, the switch, the button and the burger will not all fit across
a phone with the word in place, so the flag carries the switch on its
own and the bar draws in a little */
.ml-header{ padding-left: 18px !important; padding-right: 18px !important; }
.ml-header > .e-con-inner{ gap: 10px; }
.ml-lang .wpml-ls a{ padding: 8px; }
.ml-lang .wpml-ls-flag{ margin: 0; }
.ml-lang .wpml-ls .wpml-ls-native{
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
}
/* ==========================================================================
Cookie notice
The plugin keeps its own Custom CSS behind a paid plan, so the notice is
dressed from here instead. Everything below reads from the Global Colors,
so it follows the rest of the site.
========================================================================== */
/* ==========================================================================
INNER PAGES
Everything from here down belongs to the pages other than the homepage:
About, Our Work and the ones that follow.
The numbers are taken from the A-5 concept, a5prev/about.html and
a5prev/our-work.html, rather than from a picture of it. Where the concept
already had a twin in the homepage rules above, the homepage rule is used
instead of a second copy of the same values.
========================================================================== */
/* --- The top of an inner page --------------------------------------------
ml-page-hero on the section, with ml-split-hero beside it
The same grid, the same headline size and the same 16px / 84px as the
homepage hero, but without the rule that makes it fill the screen: the
reader came for what is on the page, so the first block of content has to
be within reach. */
.ml-page-hero{
position: relative;
background-image:
radial-gradient(44% 62% at 8% -12%, rgba(84,180,53,.08), transparent 62%),
radial-gradient(48% 66% at 94% -14%, rgba(47,111,214,.10), transparent 64%);
background-repeat: no-repeat;
}
.ml-page-hero:after{
content: "";
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 0;
width: min(100%, var(--ml-content-width));
height: 1px;
background: linear-gradient(90deg, transparent, var(--ml-line-2) 8%,
var(--ml-line-2) 92%, transparent);
}
.ml-page-hero .ml-hero-photo{ align-self: center; }
/* --- Three boxes across --------------------------------------------------
ml-three-up on the container that holds them
Three on a desktop, two on a tablet, one on a phone. The 22px gap and the
46px above are the concept's. */
.ml-three-up > .e-con-inner{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
align-items: stretch;
}
.ml-three-up > .e-con-inner > *{ width: 100%; max-width: 100%; min-width: 0; }
/* --- A value box ---------------------------------------------------------
ml-value on the Icon Box, beside ml-service
The same 56px mint tile, 22px heading and 15px body as a service box on
the homepage. The one difference the concept draws is that the mark sits
above the words rather than beside them. */
.ml-value.elementor-widget-icon-box .elementor-icon-box-wrapper{
display: block;
text-align: left;
}
.ml-value.elementor-widget-icon-box .elementor-icon-box-icon{ margin-bottom: 18px; }
/* --- A passage set in the serif, centred ---------------------------------
ml-prose on a Text Editor
The concept's own reading passage: the serif at 19 to 22px, centred, held
to 72 characters a line. It is what carries the story and the Japan
passage, and it is deliberately not the body sans. */
.ml-prose.elementor-widget{
max-width: 72ch;
margin-left: auto;
margin-right: auto;
font-family: var(--ml-serif);
font-weight: 400;
font-size: clamp(19px, 2vw, 22px);
line-height: 1.55;
color: var(--e-global-color-secondary);
text-align: center;
}
.ml-prose p{ font-size: inherit; line-height: inherit; color: inherit; margin-bottom: 0; }
.ml-prose i, .ml-prose em{ font-style: italic; }
/* --- Pills ---------------------------------------------------------------
ml-pills on an Icon List set to inline, with a dot for its mark
Short statements that are a list rather than a paragraph, laid across the
middle of a band. */
.ml-pills .elementor-icon-list-items{
display: flex;
flex-wrap: wrap;
gap: 11px;
justify-content: center;
}
.ml-pills .elementor-icon-list-item{
display: inline-flex;
align-items: center;
gap: 9px;
background: #fff;
border: 1px solid var(--ml-line-2);
border-radius: 999px;
padding: 11px 19px;
margin: 0;
box-shadow: var(--ml-shadow-soft);
}
.ml-pills .elementor-icon-list-item:after{ display: none; }
.ml-pills .elementor-icon-list-icon{
width: 8px;
height: 8px;
flex: 0 0 auto;
margin: 0;
padding: 0;
color: var(--e-global-color-primary);
}
.ml-pills .elementor-icon-list-text{
padding: 0;
font-size: 14.5px;
font-weight: 500;
line-height: 1.5;
color: var(--e-global-color-secondary);
}
/* --- The founder block ---------------------------------------------------
ml-split-founder on the section, ml-adam-photo on the picture column
ml-heading-founder ml-ticks-founder ml-bels
His photograph is square in the concept, at the larger corner and the
deeper shadow. */
.ml-split-founder > .e-con-inner{
display: grid;
grid-template-columns: .9fr 1.1fr;
gap: 54px;
align-items: center;
}
.ml-split-founder > .e-con-inner > *{ width: 100%; max-width: 100%; min-width: 0; }
.ml-split-founder > .e-con-inner > .e-con{ padding-left: 0; padding-right: 0; }
.e-con.ml-adam-photo > .e-con-inner{ padding: 0; }
.ml-heading-founder.elementor-widget{ margin-top: 14px; }
.ml-heading-founder .elementor-heading-title{
font-size: clamp(28px, 3.4vw, 42px);
font-weight: 500;
}
.ml-split-founder .ml-bio-wide.elementor-widget{
margin-top: 22px;
font-size: 16.5px;
line-height: 1.7;
color: var(--e-global-color-text);
}
.ml-split-founder .ml-bio-wide p + p{ margin-top: 16px; }
/* the line he signs off with reads as another line of the same passage,
not as a caption */
.ml-split-founder .ml-signature.elementor-widget{ margin-top: 20px; }
.ml-split-founder .ml-signature p{
font-family: var(--ml-body);
font-size: 16.5px;
font-weight: 400;
line-height: 1.7;
color: var(--e-global-color-text);
}
/* his qualifications: a mint disc rather than the white one the homepage
uses, because these sit on white rather than on a card */
.ml-ticks-founder.elementor-widget{ margin-top: 22px; }
.ml-ticks-founder .elementor-icon-list-item{
align-items: flex-start;
gap: 13px;
padding: 12px 0;
margin-bottom: 0;
}
.ml-ticks-founder .elementor-icon-list-icon{
width: 26px;
height: 26px;
padding: 6px;
border-radius: 50%;
background: var(--e-global-color-mlmint);
box-shadow: none;
color: var(--e-global-color-mlgreendark);
margin-top: 2px;
flex: 0 0 auto;
}
.ml-ticks-founder .elementor-icon-list-text{
font-size: 16.5px;
font-weight: 400;
line-height: 1.5;
color: var(--e-global-color-secondary);
}
.ml-ticks-founder .elementor-icon-list-text a{
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
.ml-ticks-founder .elementor-icon-list-text a:hover{ color: var(--e-global-color-mlgreendark); }
.ml-split-founder .elementor-widget-button{ margin-top: 26px; }
/* the one line he leads with on the Japanese page: the serif, at reading
size, left where the rest of his column is */
.ml-founder-line.elementor-widget{
margin-top: 18px;
font-family: var(--ml-serif);
font-weight: 400;
font-size: 20px;
line-height: 1.5;
color: var(--e-global-color-secondary);
}
.ml-founder-line p{ font-size: inherit; line-height: inherit; color: inherit; margin-bottom: 0; }
/* the editing certificate, under his photograph. It is drawn on white, so
it is multiplied onto whatever is behind it. */
.ml-bels.elementor-widget{ align-self: flex-start; }
.ml-bels img{
width: 92px;
height: auto;
border-radius: 0;
box-shadow: none;
mix-blend-mode: multiply;
}
/* --- A picture that is not square ----------------------------------------
ml-photo-wide, beside ml-photo */
.ml-photo-wide img{
aspect-ratio: 4 / 3;
object-fit: cover;
width: 100%;
border: 1px solid var(--ml-line-2);
}
/* --- The company details, Japanese About ---------------------------------
ml-jp-table on a Text Editor holding the table
One white card with a hairline between rows and the label column on the
warm ground, as the concept draws it. A table typed into a Text Editor
rather than a table widget, because this install has none outside
Ultimate Addons and a table in the editor can be changed cell by cell. */
.ml-jp-table.elementor-widget{
width: 100%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
table.ml-facts{
width: 100%;
border-collapse: collapse;
background: #fff;
border: 1px solid var(--ml-line-2);
border-radius: var(--ml-radius);
overflow: hidden;
}
table.ml-facts th,
table.ml-facts td{
border: 0;
border-bottom: 1px solid var(--ml-line);
vertical-align: top;
padding: 18px 22px;
text-align: left;
}
table.ml-facts tr:last-child th,
table.ml-facts tr:last-child td{ border-bottom: 0; }
table.ml-facts th{
width: 1%;
white-space: nowrap;
/* teal on Vadym's word (13 Sep 2026), replacing the warm green-grey. The
tint keeps the labels readable; the hairline between rows turns teal
with it so the column reads as one strip rather than stacked tiles. */
background: var(--ml-accent-tint);
border-bottom-color: var(--ml-accent-line);
font-family: var(--ml-body);
font-size: 15px;
font-weight: 600;
line-height: 1.7;
color: var(--ml-accent-ink);
}
table.ml-facts td{
font-size: 15.5px;
line-height: 1.8;
color: var(--e-global-color-text);
}
@media (max-width: 600px){
table.ml-facts th,
table.ml-facts td{ display: block; width: auto; white-space: normal; }
table.ml-facts th{ border-bottom: 0; padding-bottom: 0; background: none; }
table.ml-facts td{ padding-top: 6px; }
}
/* --- Three client marks that are not the trimmed WebP --------------------
Rijk Zwaan, Germanwatch and Edanz appear only on About and Our Work, so
they are still the files already in Adam's library rather than the
cleaned WebP made for the homepage six. A square badge has to stand
taller than a wordmark to read at the same weight, which is why each is
given its own ceiling rather than the strip's one number.
Replace the file and this block goes with it. */
.ml-logo-carousel img[src*="RZ-1"]{ max-height: 60px; }
.ml-logo-carousel img[src*="GW-1"]{ max-height: 50px; }
.ml-logo-carousel img[src*="Ed-1"]{ max-height: 38px; }
@media (max-width: 1024px){
.ml-logo-carousel img[src*="RZ-1"]{ max-height: 52px; }
.ml-logo-carousel img[src*="GW-1"]{ max-height: 44px; }
.ml-logo-carousel img[src*="Ed-1"]{ max-height: 33px; }
}
@media (max-width: 767px){
.ml-logo-carousel img[src*="RZ-1"]{ max-height: 46px; }
.ml-logo-carousel img[src*="GW-1"]{ max-height: 39px; }
.ml-logo-carousel img[src*="Ed-1"]{ max-height: 29px; }
}
/* --- Inner pages on smaller screens -------------------------------------- */
@media (max-width: 1024px){
.ml-three-up > .e-con-inner{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 920px){
.ml-split-founder > .e-con-inner{ grid-template-columns: 1fr; gap: 34px; }
.ml-adam-photo{ max-width: 440px; }
}
@media (max-width: 767px){
.ml-three-up > .e-con-inner{ grid-template-columns: 1fr; }
}
/* ==========================================================================
OUR WORK
The A-5 work page, a5prev/our-work.html.
========================================================================== */
/* --- The hero with the picture on the left -------------------------------
ml-hero-rev on the section, beside ml-page-hero and ml-split-hero */
.ml-page-hero.ml-hero-rev > .e-con-inner{ grid-template-columns: .92fr 1.08fr; }
.ml-page-hero.ml-hero-rev .ml-hero-photo{ order: -1; }
/* --- Two figures under the hero ------------------------------------------
ml-stats on the row, ml-stat on each one, ml-stat-sep on the hairline
The figure takes the green to blue gradient, the same one the homepage
uses on a heading, so the two numbers read as one pair. */
.ml-stats{ margin-top: 32px; }
.ml-stats > .e-con-inner{
display: flex;
align-items: center;
gap: 26px;
padding: 0;
}
.ml-stat > .e-con-inner{ padding: 0; }
.ml-stat-figure .elementor-heading-title{
font-family: var(--ml-serif);
font-size: 30px;
font-weight: 600;
line-height: 1;
background-image: linear-gradient(120deg,
var(--e-global-color-mlgreendark) 5%,
var(--e-global-color-accent) 95%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.ml-stat-label.elementor-widget{ margin-top: 5px; }
.ml-stat-label p{
font-size: 13px;
line-height: 1.3;
color: var(--e-global-color-mlmuted);
margin-bottom: 0;
}
.ml-stat-sep{
width: 1px;
min-width: 1px;
max-width: 1px;
height: 40px;
background: var(--ml-line-2);
flex: 0 0 auto;
}
.ml-stat-sep > .e-con-inner{ padding: 0; }
/* --- A piece of work -----------------------------------------------------
ml-case on the card, ml-case-tag ml-case-title ml-case-note */
.e-con.ml-case{
background-color: #fff;
border: 1px solid var(--ml-line);
border-radius: var(--ml-radius);
box-shadow: var(--ml-shadow-soft);
padding: 28px;
transition: transform .2s, box-shadow .2s;
}
.e-con.ml-case > .e-con-inner{ padding: 0; height: 100%; }
.e-con.ml-case:hover{ transform: translateY(-4px); box-shadow: var(--ml-shadow-lift); }
.ml-case-tag .elementor-heading-title{
display: inline-block;
font-family: var(--ml-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--e-global-color-mlgreendark);
background: var(--e-global-color-mlmint);
padding: 5px 12px;
border-radius: 999px;
line-height: 1.72;
}
.ml-case-title.elementor-widget{ margin-top: 16px; }
.ml-case-title .elementor-heading-title{
font-family: var(--ml-serif);
font-size: 19px;
font-weight: 600;
line-height: 1.25;
}
.ml-case-note.elementor-widget{ margin-top: 8px; }
.ml-case-note p{
font-size: 14.5px;
line-height: 1.55;
color: var(--e-global-color-text);
margin-bottom: 0;
}
/* --- A list of links that leave the site ---------------------------------
ml-tlist on an Icon List, with ml-i-arw for its mark
Hairline between the rows, the mark at the far right, and the row steps
a little to the right under the pointer. */
.ml-colhead .elementor-heading-title{
font-family: var(--ml-sans);
font-size: 12.5px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--e-global-color-mlgreendark);
line-height: 1.72;
}
.ml-tlist.elementor-widget{ margin-top: 6px; }
.ml-tlist .elementor-icon-list-items{ display: block; }
.ml-tlist .elementor-icon-list-item{
display: block;
margin: 0;
padding: 0;
border-top: 1px solid var(--ml-line);
}
.ml-tlist .elementor-icon-list-item:first-child{ border-top: 0; }
.ml-tlist .elementor-icon-list-item > a,
.ml-tlist .elementor-icon-list-item > span{
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
padding: 14px 0;
transition: color .16s ease, padding-left .16s ease;
}
.ml-tlist .elementor-icon-list-item > a:hover{ padding-left: 5px; }
.ml-tlist .elementor-icon-list-text{
order: 1;
padding: 0;
font-size: 15px;
line-height: 1.5;
color: var(--e-global-color-secondary);
}
.ml-tlist .elementor-icon-list-item > a:hover .elementor-icon-list-text{
color: var(--e-global-color-mlgreendark);
}
/* the mark sits at the end of the row, not in front of it */
.ml-tlist .elementor-icon-list-icon{
order: 2;
width: 15px;
height: 15px;
padding: 0;
margin: 0;
flex: 0 0 auto;
align-self: center;
color: var(--e-global-color-primary);
transition: transform .18s ease;
}
.ml-tlist .elementor-icon-list-item > a:hover .elementor-icon-list-icon{
transform: translate(3px, -3px);
}
/* --- Two columns of those lists ------------------------------------------
ml-work-cols on the container */
.ml-work-cols > .e-con-inner{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
.ml-work-cols > .e-con-inner > *{ width: 100%; max-width: 100%; min-width: 0; }
.ml-work-cols > .e-con-inner > .e-con{ padding-left: 0; padding-right: 0; }
/* the white papers, narrower and in the middle */
.ml-work-narrow{ max-width: 720px; margin-left: auto; margin-right: auto; }
.ml-work-narrow > .e-con-inner{ padding: 0; }
.ml-work-narrow .ml-colhead .elementor-heading-title{ text-align: center; }
/* the closing note under the lists */
.ml-work-note.elementor-widget{
max-width: 880px;
margin: 36px auto 0;
text-align: center;
font-size: 15px;
color: var(--e-global-color-mlmuted);
}
.ml-work-note p{ font-size: inherit; color: inherit; margin-bottom: 0; }
.ml-work-note a{ color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.ml-work-note a:hover{ color: var(--e-global-color-mlgreendark); }
@media (max-width: 920px){
.ml-page-hero.ml-hero-rev > .e-con-inner{ grid-template-columns: 1fr; }
.ml-page-hero.ml-hero-rev .ml-hero-photo{ order: 0; }
.ml-work-cols > .e-con-inner{ grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 600px){
.ml-stats > .e-con-inner{ gap: 18px; }
}
/* the footnote under the three pieces reads smaller than the note above it */
.ml-work-footnote.elementor-widget{ margin-top: 20px; font-size: 13.5px; }
/* the note that sits between the cards and the pills keeps its distance */
.ml-three-up + .ml-work-note.elementor-widget{ margin-top: 34px; }
/* links inside a card title and inside a link list are the whole row, so
they carry no underline of their own; the row itself is the affordance */
.ml-case-title a{ color: inherit; text-decoration: none; }
.ml-case-title a:hover{ color: var(--e-global-color-mlgreendark); }
.ml-tlist .elementor-icon-list-item > a,
.ml-tlist .elementor-icon-list-item > a:hover,
.ml-tlist .elementor-icon-list-text a{ text-decoration: none; box-shadow: none; }
.ml-pills .elementor-icon-list-text a{
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
.ml-pills .elementor-icon-list-text a:hover{ color: var(--e-global-color-mlgreendark); }
/* the theme underlines every link inside a heading with a .elementor-kit-712 that
beats a plain class, so the card title says it plainly */
.ml-case-title.elementor-widget-heading .elementor-heading-title a,
.ml-case-title .elementor-heading-title a:hover{
text-decoration: none !important;
box-shadow: none;
}
/* the two figures stay side by side on a phone; stacked, the hairline
between them reads as a stray mark */
.ml-stats > .e-con-inner{ flex-wrap: nowrap; }
/* a container is full width by default, so two of them in a row wrap onto
two lines. Each figure takes only the room its own words need. */
.ml-stats > .e-con-inner{ flex-wrap: nowrap !important; }
.ml-stats > .e-con-inner > .e-con{ width: auto; flex: 0 1 auto; }
/* ==========================================================================
A-5 EXACTLY, AND ONLY ON THESE PAGES
Every rule below is scoped to ml-inner, which the builders put on every
section of About and Our Work and on nothing else. The homepage keeps the
numbers Adam has already approved twice.
Each value here was read off the concept's own rendered stylesheet at
1440, not off a picture of it:
headline 60px / 63 .hero h1
section heading 550px column .sechead{max-width:60ch}
intro under it 18px, 513px .sechead .lead{max-width:56ch}
the passage Newsreader 22 / 34.1, 877px, 32 above .prose
boxes 46 above .vcards{margin-top:46px}
pills 32 above .pills{margin-top:32px}
client strip 24 gap, 12px label
========================================================================== */
/* the headline. The homepage holds English to 56px so its four lines fit;
the concept's inner pages run the full 60. */
/* the homepage rule is html[lang^="en"] ... , which carries one element
.elementor-kit-712, so a fourth class is needed here to outrank it */
.ml-inner.ml-page-hero .ml-hero-title.elementor-widget-heading .elementor-heading-title{
font-size: clamp(38px, 5vw, 60px);
line-height: 1.05;
letter-spacing: -.02em;
font-weight: 500;
}
/* The heading block over a section, and the line under it.
The concept writes these as 60ch and 56ch. A ch is the width of a nought
in whatever face the browser has at that moment, so the concept's own
three headings come out at 550, 654 and 654 depending on when each one
was laid out. Two of the three are 654 and every heading in the concept
sits on two lines at that width, so 654 is the number, said in pixels so
it cannot drift. */
.ml-inner .ml-section-head{ max-width: 820px; }
.ml-inner .ml-lead.elementor-widget{
max-width: 760px;
margin-left: auto;
margin-right: auto;
margin-top: 16px;
font-size: 18px;
}
/* The passage. Two Elementor rules outrank a plain class here: the kit sets
the body face on every Text Editor, and the container rule holds every
widget to the width of its column. Both are said again, out loud, or the
passage comes out in the body sans across the whole page, which is the
one thing that stops these pages looking like the concept. */
body .ml-inner .ml-prose.elementor-widget,
body .ml-inner .ml-prose.elementor-widget p{
font-family: var(--ml-serif) !important;
font-weight: 400;
font-size: clamp(19px, 2vw, 22px);
line-height: 1.55;
color: var(--e-global-color-secondary);
text-align: center;
}
.ml-inner .ml-prose.elementor-widget{
max-width: 1000px !important;
margin: 32px auto 0 !important;
}
/* A longer passage than the concept was drawn with does not get taller and
narrower, it gets wider: the column opens to the full content width and
the face steps down a little, so the block stays about the same height.
ml-prose-wide, beside ml-prose. */
body .ml-inner .ml-prose-wide.elementor-widget,
body .ml-inner .ml-prose-wide.elementor-widget p{
font-size: clamp(18px, 1.45vw, 20px);
line-height: 1.62;
}
.ml-inner .ml-prose-wide.elementor-widget{ max-width: 1100px !important; }
/* the spacing the concept sets on the blocks themselves */
.ml-inner .ml-three-up{ margin-top: 46px; }
.ml-inner .ml-pills.elementor-widget{ margin-top: 32px; }
.ml-inner .ml-work-cols{ margin-top: 46px; }
.ml-inner .ml-work-narrow{ margin-top: 44px; }
.ml-inner .ml-work-note.elementor-widget{ margin-top: 36px; }
.ml-inner .ml-three-up + .ml-work-note.elementor-widget{ margin-top: 34px; }
.ml-inner .ml-work-footnote.elementor-widget{ margin-top: 20px; }
.ml-inner .ml-jp-table.elementor-widget{ margin-top: 40px; }
/* the client strip on these two pages takes the concept's small label */
.ml-inner .ml-strip-label .elementor-heading-title{ font-size: 12px; letter-spacing: .12em; }
/* On the work page the concept's pills carry no mark, only the words, and
the row is held to 900 rather than the full width. ml-pills-plain, beside
ml-pills. */
.ml-pills-plain .elementor-icon-list-icon{ display: none; }
.ml-pills-plain .elementor-icon-list-items{
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
.ml-inner .ml-pills-plain.elementor-widget{ margin-top: 30px; }
/* --- A run of short statements -------------------------------------------
ml-taglist on an Icon List set to inline
The concept draws these as white rounded chips with a hairline and a
shadow. That shape has become the tell of a generated page, so the words
stand on their own: a small green dot in front of each, spaced evenly and
centred, wrapping to a second line when they run out of room. The chip
rules further up are kept, unused, so the concept's look can be put back
by swapping the class in Elementor.
A separator between the items was tried first and dropped: when the row
wraps, the last item on a line is left with a mark dangling after it. */
.ml-taglist .elementor-icon-list-items{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px 30px;
}
.ml-taglist .elementor-icon-list-item{
display: inline-flex;
align-items: center;
gap: 9px;
background: none;
border: 0;
box-shadow: none;
border-radius: 0;
padding: 0;
margin: 0;
}
/* Elementor's own bar between inline items, off */
.ml-taglist .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:not(:last-child):after,
.ml-taglist .elementor-icon-list-item:after{ content: none; display: none; }
/* the mark is a plain dot drawn by the box itself, not the widget's icon */
.ml-taglist .elementor-icon-list-icon{
width: 6px;
height: 6px;
min-width: 6px;
padding: 0;
margin: 0;
border-radius: 50%;
background-color: var(--e-global-color-primary);
flex: 0 0 auto;
}
.ml-taglist .elementor-icon-list-icon svg,
.ml-taglist .elementor-icon-list-icon i,
.ml-taglist .elementor-icon-list-icon:before{ display: none; }
.ml-taglist .elementor-icon-list-text{
padding: 0;
font-size: 15.5px;
font-weight: 500;
line-height: 1.72;
color: var(--e-global-color-secondary);
}
.ml-taglist .elementor-icon-list-text a{
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
}
.ml-taglist .elementor-icon-list-text a:hover{ color: var(--e-global-color-mlgreendark); }
.ml-inner .ml-taglist.elementor-widget{ margin-top: 30px; }
/* His qualifications on their own line under the picture and the words,
across the full width in two columns. ml-cred-wide on the Icon List. */
.ml-inner .ml-cred-wide.elementor-widget{
margin-top: 44px;
padding-top: 34px;
border-top: 1px solid var(--ml-line);
}
.ml-cred-wide .elementor-icon-list-items{ columns: 2; column-gap: 60px; }
.ml-cred-wide .elementor-icon-list-item{ break-inside: avoid; }
@media (max-width: 767px){
.ml-cred-wide .elementor-icon-list-items{ columns: 1; }
}
/* ==========================================================================
ROUND FOUR
========================================================================== */
/* --- A link in running text is green, always -----------------------------
Underlined and a different colour from the moment it is drawn, not only
under the pointer. This covers every block on these two pages that can
hold a link inside its words. */
.ml-inner .ml-prose a,
.ml-inner .ml-bio-wide a,
.ml-inner .ml-work-note a,
.ml-inner .ml-taglist .elementor-icon-list-text a,
.ml-inner .ml-founder-line a,
.ml-inner .ml-lead a,
.ml-inner .ml-hero-intro a,
.ml-inner .ml-case-note a{
color: var(--e-global-color-mlgreendark);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.ml-inner .ml-prose a:hover,
.ml-inner .ml-bio-wide a:hover,
.ml-inner .ml-work-note a:hover,
.ml-inner .ml-taglist .elementor-icon-list-text a:hover,
.ml-inner .ml-founder-line a:hover,
.ml-inner .ml-lead a:hover,
.ml-inner .ml-hero-intro a:hover,
.ml-inner .ml-case-note a:hover{
color: var(--e-global-color-primary);
text-decoration-thickness: 2px;
}
/* his qualifications carry one link; same treatment */
.ml-inner .ml-ticks-founder .elementor-icon-list-text a,
.ml-inner .ml-cred-wide .elementor-icon-list-text a{
color: var(--e-global-color-mlgreendark);
text-decoration: underline;
text-underline-offset: 3px;
}
/* --- A link list row does not reflow under the pointer -------------------
The row used to gain 5px of left padding on hover, which pushed the
longest title onto a second line and made the whole list jump. The step
is now a transform, which moves the words without taking any width, and
the two columns sit a little closer so each row has more room to begin
with. */
.ml-work-cols > .e-con-inner{ gap: 40px; }
.ml-tlist .elementor-icon-list-item > a{ transition: color .16s ease; }
.ml-tlist .elementor-icon-list-item > a:hover{ padding-left: 0; }
.ml-tlist .elementor-icon-list-text{
transition: transform .16s ease;
transform: translateX(0);
}
.ml-tlist .elementor-icon-list-item > a:hover .elementor-icon-list-text{
transform: translateX(5px);
}
/* --- The work cards --------------------------------------------------------
A firmer edge, and the whole card is the link rather than the words in
it. The stretched area is drawn by the call to action at the foot of the
card, so there is one link per card and the keyboard reaches it. */
.e-con.ml-case{
position: relative;
border-color: var(--ml-line-2);
}
.e-con.ml-case:hover{
border-color: var(--e-global-color-primary);
box-shadow: var(--ml-shadow-lift);
}
.e-con.ml-case > .e-con-inner{ display: flex; flex-direction: column; }
.ml-case .ml-case-cta.elementor-widget{ margin-top: auto; padding-top: 18px; }
/* The whole card is the link. The button's own box is stretched over the
card, and every wrapper between the two is put back to static first: a
positioned wrapper anywhere in between and the stretched box would only
cover the button, which is exactly what it did at first. The pointer is
set on the card as well, so the hand shows the moment it is over any part
of it and not only over the words of the button. */
.e-con.ml-case{ cursor: pointer; }
.e-con.ml-case > .e-con-inner,
.ml-case .ml-case-cta.elementor-widget,
.ml-case .ml-case-cta .elementor-button-wrapper,
.ml-case .ml-case-cta .elementor-button{ position: static; }
.ml-case .ml-case-cta .elementor-button:after{
content: "";
position: absolute;
inset: 0;
z-index: 2;
}
/* --- Three statements, three equal columns -------------------------------
ml-taglist-cols, beside ml-taglist. Centred words of different lengths
read as a ragged pile; on their own equal columns they line up. */
/* said with both classes, because the flex rule above it carries the same
weight and would otherwise win on order alone */
.ml-taglist.ml-taglist-cols .elementor-icon-list-items{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px 30px;
justify-content: stretch;
align-items: start;
}
.ml-taglist.ml-taglist-cols .elementor-icon-list-item{ align-items: flex-start; }
.ml-taglist.ml-taglist-cols .elementor-icon-list-icon{ margin-top: 10px; }
@media (max-width: 767px){
.ml-taglist.ml-taglist-cols .elementor-icon-list-items{ grid-template-columns: 1fr; }
}
/* the signature and the button under his photograph, left aligned with it */
.ml-adam-photo .ml-signature.elementor-widget{ margin-top: 20px; }
.ml-adam-photo .elementor-widget-button{ margin-top: 18px; }
.ml-adam-photo .elementor-widget-button .elementor-button-wrapper{ text-align: left; }
/* ==========================================================================
THE FOOTER, WITH THE WHOLE SITE IN IT
Adam asked for every page in the footer, not only the top level. That is
five columns now instead of four: the mark and the address, then Company,
Services, By industry and Academia. The Japanese footer has the same five
with its own sixteen pages.
========================================================================== */
.e-con.ml-footer-cols > .e-con-inner{
grid-template-columns: 1.5fr 1fr 1.15fr 1.15fr 1fr;
gap: 40px 34px;
}
/* a column of six links wants a little less air between them than a column
of four did */
.ml-footer-links .elementor-icon-list-item{ margin-bottom: 9px; }
.ml-footer-links .elementor-icon-list-item,
.ml-footer-links .elementor-icon-list-text,
.ml-footer-links a{ font-size: 14px; line-height: 1.6; }
/* the address moves into the mark column, where the words about the company
already are */
.ml-footer-addr{
margin-top: 16px;
font-size: 13.5px;
line-height: 1.7;
color: var(--e-global-color-mlmuted);
}
.ml-footer-addr p{ font-size: inherit; line-height: inherit; color: inherit; margin: 0; }
/* the small print in the closing line: privacy, terms, DMCA, the other
language. Separated by a thin rule rather than a comma. */
.ml-footer-small p{ display: flex; flex-wrap: wrap; align-items: center; gap: 0; }
.ml-footer-small a{
font-family: var(--ml-sans);
font-size: 13.5px;
color: var(--e-global-color-mlmuted);
text-decoration: none;
padding: 0 13px;
border-left: 1px solid #C9D5BC;
line-height: 1.2;
}
.ml-footer-small a:first-child{ border-left: 0; padding-left: 0; }
.ml-footer-small a:hover{ color: var(--e-global-color-mlgreendark); }
@media (max-width: 1080px){
.e-con.ml-footer-cols > .e-con-inner{ grid-template-columns: 1.4fr 1fr 1fr; gap: 36px 30px; }
}
/* On a phone the list stays two across rather than one, or a footer holding
the whole site runs longer than the page above it. The mark, the words
and the address take the full width above them. */
@media (max-width: 767px){
.e-con.ml-footer-cols > .e-con-inner{ grid-template-columns: 1fr 1fr; gap: 30px 22px; }
.e-con.ml-footer-cols > .e-con-inner > *:first-child{ grid-column: 1 / -1; }
}
/* ==========================================================================
THE COPYWRITING PAGE
A service page, the first of its kind here. There was no concept drawing
for one, so everything below is the language the other inner pages
settled: the same card, the same ticks, the same section head. Only three
things are new, because the content asked for them — a card without a
category, a comparison table, and five numbered steps.
========================================================================== */
/* --- The six services ----------------------------------------------------
The work card without its category tag. A tag here would be teal, and
teal is reserved for what has already been done; a service is a promise,
not a proof, so it carries no mark at all. */
.e-con.ml-svc{
background-color: #fff;
border: 1px solid var(--ml-line-2);
border-radius: var(--ml-radius);
box-shadow: var(--ml-shadow-soft);
padding: 28px;
transition: transform .2s, box-shadow .2s, border-color .2s;
}
.e-con.ml-svc > .e-con-inner{ padding: 0; height: 100%; }
.e-con.ml-svc:hover{
transform: translateY(-4px);
border-color: var(--e-global-color-primary);
box-shadow: var(--ml-shadow-lift);
}
.ml-svc-title .elementor-heading-title{
font-family: var(--ml-serif);
font-size: 20px;
font-weight: 600;
line-height: 1.25;
}
.ml-svc-note.elementor-widget{ margin-top: 10px; }
.ml-svc-note p{
font-size: 14.5px;
line-height: 1.6;
color: var(--e-global-color-text);
margin-bottom: 0;
}
/* A service card may close on a line sending the reader to the page that
covers that service properly.
No colour here on purpose. These cards sit on the blue band, and the band
already says what a link on it looks like: blue, teal on hover. Writing a
colour here fought that rule at equal specificity and lost, which is the
right outcome - one rule decides link colour per band, and this one only
says how the line is drawn. */
.ml-inner .ml-svc-note a{
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.ml-inner .ml-svc-note a:hover{ text-decoration-thickness: 2px; }
/* --- A button on its own line, centred -----------------------------------
Several sections end on one call to action. The row is a container so an
editor can drop a second button beside the first without touching CSS. */
/* flex-direction has to be named: an e-con-inner is a column by default, so
justify-content on its own centres the button vertically inside a box that
is exactly as tall as the button, which looks like nothing happened. */
.e-con.ml-cta-centred > .e-con-inner{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 16px;
padding: 0;
}
/* The 44px set on the container in the builder lands on the inner box, and
the line above zeroes that padding — so every button on this page sat flat
against the block above it, measured at exactly 0px. The air is a margin
on the container instead, where nothing can wipe it. */
.e-con.ml-cta-centred{ margin-top: 44px; }
/* --- Why choose us -------------------------------------------------------
The photograph and the argument share a row, then the two lists sit
underneath at half width each. ml-split-founder already draws the row. */
.ml-why-photo > .e-con-inner{ padding: 0; }
/* Round two. Holding the picture to 440px square left it 440 tall beside a
210 tall paragraph: the two columns were a pair in width only, and the
right half of the row sat half empty. Now the two columns are stretched
to one height and the photograph fills its column edge to edge, cropped
by object-fit rather than squashed. Its 5/4 ratio is what sets the row
height; the words centre themselves inside the same height beside it. */
body .ml-inner .ml-why-photo .ml-photo.elementor-widget{
max-width: 100% !important;
width: 100%;
margin-left: 0;
margin-right: 0;
height: 100%;
}
body .ml-inner .ml-why-photo .ml-photo .elementor-widget-container,
body .ml-inner .ml-why-photo .ml-photo figure,
body .ml-inner .ml-why-photo .ml-photo figure > a{ height: 100%; }
body .ml-inner .ml-why-photo .ml-photo img{
width: 100%;
height: 100%;
min-height: 100%;
aspect-ratio: 5 / 4;
object-fit: cover;
object-position: center;
}
/* the column itself must be allowed to be as tall as the row */
.e-con.ml-why-split > .e-con-inner > .ml-why-photo{ height: 100%; }
.e-con.ml-why-split > .e-con-inner > .ml-why-photo > .e-con-inner{
height: 100%;
padding: 0;
}
/* Even columns and a centred picture, so the photograph and the paragraph
sit either side of the middle rather than the picture being pushed into
a narrower half. The extra top margin is the air under "and business
outcomes". */
.e-con.ml-why-split > .e-con-inner{ grid-template-columns: 1fr 1fr; gap: 56px; }
.ml-inner .ml-why-split{ margin-top: 34px; }
/* one paragraph beside a tall photograph: left at the top it hangs in the
air with the whole lower half of the row empty, so the two columns are
centred against each other instead. Its own class, because the founder
rows on About must keep their top alignment. */
.e-con.ml-why-split > .e-con-inner{ align-items: stretch; }
/* the paragraph keeps its own middle inside the taller box */
.e-con.ml-why-split > .e-con-inner > .e-con:not(.ml-why-photo) > .e-con-inner{
height: 100%;
justify-content: center;
}
/* One column below the desktop, where a picture beside a paragraph leaves
both too narrow to read. The photograph keeps object-fit, so it crops
rather than stretches at every width. */
@media (max-width: 1024px){
.e-con.ml-why-split > .e-con-inner{ grid-template-columns: 1fr; gap: 26px; }
body .ml-inner .ml-why-photo .ml-photo img{ aspect-ratio: 16 / 9; }
.e-con.ml-why-split > .e-con-inner > .e-con:not(.ml-why-photo) > .e-con-inner{
justify-content: flex-start;
}
}
@media (max-width: 767px){
body .ml-inner .ml-why-photo .ml-photo img{ aspect-ratio: 4 / 3; }
}
.ml-colhead-lg .elementor-heading-title{
font-family: var(--ml-serif);
font-size: 21px;
font-weight: 600;
line-height: 1.3;
color: var(--e-global-color-secondary);
}
.ml-colhead-lg + .ml-ticks.elementor-widget{ margin-top: 14px; }
/* --- The comparison ------------------------------------------------------
Three columns against eight rows: this is a table in the plain sense, so
it is written as one and reads correctly to a screen reader. Our column
is tinted and its marks are green; the other two are drawn in ink, not in
red, because a page does not need to shout at its competitors.
The wrapper scrolls sideways on a small screen rather than squeezing the
words to nothing. */
.ml-flags{
font-size: .62em;
vertical-align: .12em;
letter-spacing: .04em;
white-space: nowrap;
}
.ml-compare-wrap.elementor-widget{
margin-top: 42px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
:root{
/* the table grid: --ml-line is a whisper meant for edges, not for a grid
the reader has to follow across three columns */
--ml-grid: #CBD8C4;
--ml-grid-head: #A9BEA0;
}
/* border-collapse: collapse merges the table's own border into the edge
cells, and with overflow:hidden and a radius on top of that the outer
frame was clipped away entirely: the grid had inner lines and no box
around it. Separate borders with zero spacing keep the same grid and
let the frame draw. */
table.ml-compare{
width: 100%;
min-width: 620px;
border-collapse: separate;
border-spacing: 0;
background: #fff;
border: 1px solid var(--ml-grid-head);
border-radius: var(--ml-radius);
overflow: hidden;
}
/* The grid was one hairline in --ml-line between the rows and nothing at
all between the columns, which on a white card read as a list rather
than a table: at a glance there was no telling which tick belonged to
which column. Both directions are drawn now, in a line dark enough to
survive a laptop screen at an angle, and the head is ruled off harder
than the body so the eye finds the column names first. */
table.ml-compare th,
table.ml-compare td{
border: 0;
border-bottom: 1px solid var(--ml-grid);
border-right: 1px solid var(--ml-grid);
padding: 15px 20px;
text-align: center;
vertical-align: middle;
}
table.ml-compare th:last-child,
table.ml-compare td:last-child{ border-right: 0; }
table.ml-compare tbody tr:last-child th,
table.ml-compare tbody tr:last-child td{ border-bottom: 0; }
table.ml-compare thead th,
table.ml-compare thead td{ border-bottom: 2px solid var(--ml-grid-head); }
/* the row label */
table.ml-compare tbody th[scope="row"]{
text-align: left;
font-family: var(--ml-body);
font-size: 15px;
font-weight: 500;
line-height: 1.5;
color: var(--e-global-color-secondary);
}
/* the head of each column */
table.ml-compare thead th{
font-family: var(--ml-sans);
font-size: 12.5px;
font-weight: 600;
letter-spacing: .05em;
text-transform: uppercase;
line-height: 1.5;
color: var(--e-global-color-text);
background: var(--e-global-color-mlwarm);
}
table.ml-compare thead td{ background: var(--e-global-color-mlwarm); }
/* our column, tinted the whole way down and named to the reader as ours */
table.ml-compare .ml-col-us{ background: var(--e-global-color-mlmint); }
table.ml-compare thead th.ml-col-us{
color: var(--e-global-color-mlgreendark);
background: var(--e-global-color-mlmint);
}
.ml-mark{
display: inline-block;
min-width: 26px;
font-size: 17px;
line-height: 1;
font-weight: 700;
}
.ml-mark-yes{ color: var(--e-global-color-mlgreendark); }
.ml-mark-maybe{ color: var(--e-global-color-text); font-weight: 600; }
/* a cross drawn in the hairline colour was so faint it read as an empty
cell, which is a different claim entirely. Muted, but legible. Not
--ml-muted: that variable is declared inside the cookie notice's own
block and resolves to nothing out here, which left the cross in full ink
and as loud as a tick. */
.ml-mark-no{ color: var(--e-global-color-mlmuted, #7C8797); font-size: 19px; }
/* --- How we work together ------------------------------------------------
Five steps, so a three-across grid would leave two stranded on a second
row. They run five across on a desktop and fold to two, then one. */
.ml-steps > .e-con-inner{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 18px 26px;
align-items: start;
padding: 0;
}
.ml-steps > .e-con-inner > *{ width: 100%; max-width: 100%; min-width: 0; }
.ml-inner .ml-steps{ margin-top: 46px; }
/* These were white cards, stretched to a common height. Step four is three
times longer than the others, so steps one, three and five ended as tall
boxes two thirds empty — and at tablet width the five became three plus
two, leaving a hole where the sixth would be. A process is not five
products: the boxes are gone, each step is ruled off at the top by the
green line the number sits on, and uneven lengths now read as what they
are rather than as cards that failed to fill. */
/* Round two: the ruled version put 14px grey-green words straight onto the
mint ground, and at that size on that tint it was work to read. Each step
now sits on a white card, which is the highest contrast the palette has,
and the green rule moved to the top edge of the card so the layout the
steps had is unchanged. The cards are NOT stretched to a common height --
that is what made the first attempt fail -- so a short step stays short. */
.e-con.ml-step{
background-color: #fff;
border: 1px solid var(--ml-line-2);
border-top: 3px solid rgba(69, 143, 44, .55);
border-radius: 14px;
box-shadow: 0 1px 2px rgba(22, 36, 28, .04);
padding: 18px 16px 20px 16px;
}
.e-con.ml-step > .e-con-inner{ padding: 0; }
/* the numeral: green, because a step is something we do */
.ml-step-no .elementor-heading-title{
font-family: var(--ml-serif);
font-size: 30px;
font-weight: 600;
line-height: 1;
color: var(--e-global-color-primary);
}
.ml-step-label.elementor-widget{ margin-top: 12px; }
.ml-step-label .elementor-heading-title{
font-family: var(--ml-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--e-global-color-mlgreendark);
line-height: 1.6;
}
.ml-step-title.elementor-widget{ margin-top: 6px; }
.ml-step-title .elementor-heading-title{
font-family: var(--ml-serif);
font-size: 18.5px;
font-weight: 600;
line-height: 1.3;
}
.ml-step-note.elementor-widget{ margin-top: 8px; }
.ml-step-note p{
font-size: 15px;
line-height: 1.6;
color: var(--e-global-color-secondary);
margin-bottom: 0;
}
/* --- Japanese line breaking ----------------------------------------------
Japanese has no spaces, so a browser may break a line between any two
characters: the hero came out as 英語コピーライ / ティング, which splits a
word in half. A phrase wrapped in ml-nb cannot break inside itself, so the
only break left is the one the copy asks for. */
.ml-nb{ display: inline-block; }
html[lang^="ja"] .ml-nb{ max-width: 100%; }
/* The Japanese headline runs longer than the English one at the same size —
eleven characters at 60px do not fit the half column — so it is set a size
down. The English page is untouched. */
/* A Japanese headline is denser than an English one: twelve full-width
characters in half a row cannot be set at the English 60px, and holding
the phrase together means its width sets the size. Rather than shrink the
title until it was smaller than the h2s underneath it — which inverted the
hierarchy, the page title reading at 40px under a 46px section heading —
the words column is given more of the row on Japanese, and the title goes
back up above its own headings. */
.ml-jp.ml-split-hero > .e-con-inner{ grid-template-columns: 1.2fr .8fr; }
.ml-inner.ml-jp.ml-page-hero .ml-hero-title.elementor-widget-heading .elementor-heading-title{
font-size: clamp(25px, 3.6vw, 50px);
line-height: 1.34;
}
/* A closing line of thirty-three characters beside a form: at the contact
heading's usual size it fell into six short lines. */
.ml-head-long{
display: inline-block;
font-size: clamp(21px, 2.1vw, 26px);
line-height: 1.6;
}
/* A tick beside a line of Japanese that wraps: centred, the mark floated
between the two lines. It belongs against the first one. */
.ml-jp .ml-ticks .elementor-icon-list-item{ align-items: flex-start; }
.ml-jp .ml-ticks .elementor-icon-list-icon{ margin-top: 3px; }
/* --- Five service cards, Japanese ----------------------------------------
These carry a sentence and a list each, which is a great deal more than
the English page's six short cards, so they run two across rather than
three: at three the Japanese lines break every few characters. Five in a
two-column grid would strand the last one, so an odd last card takes the
whole row, the same way the Service menu handles it. */
.ml-svc-grid > .e-con-inner{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 22px;
align-items: stretch;
padding: 0;
}
.ml-svc-grid > .e-con-inner > *{ width: 100%; max-width: 100%; min-width: 0; }
.ml-svc-grid > .e-con-inner > *:last-child:nth-child(odd){ grid-column: 1 / -1; }
.ml-inner .ml-svc-grid{ margin-top: 46px; }
/* the list inside one of those cards: the same tick as everywhere else, a
size down, because it is a detail of the card and not its argument */
.ml-svc-list.elementor-widget{ margin-top: 14px; }
.ml-svc-list .elementor-icon-list-item{
align-items: flex-start;
gap: 10px;
padding: 5px 0;
margin-bottom: 0;
}
.ml-svc-list .elementor-icon-list-icon{
width: 18px;
height: 18px;
padding: 4px;
border-radius: 50%;
background: var(--e-global-color-mlmint);
color: var(--e-global-color-mlgreendark);
margin-top: 3px;
flex: 0 0 auto;
}
.ml-svc-list .elementor-icon-list-text{
padding: 0;
font-size: 14px;
line-height: 1.6;
color: var(--e-global-color-text);
}
/* --- The Service menu ----------------------------------------------------
The old calculator was a dropdown and a slider: to ask "what would 2,000
words cost" you had to find the service in a list and then drag a handle
until the number under it happened to say 2000. This asks the same two
questions the way a person would: pick the thing, type the amount.
Every price is an ordinary Heading widget and the arithmetic reads the
figure off the page, so Adam can open a card in Elementor, type a new
rate, and the estimate follows. Nothing here holds a second copy of a
number that lives somewhere else. */
.e-con.ml-menu{
background: #fff;
border: 1px solid var(--ml-line-2);
border-radius: var(--ml-radius);
box-shadow: var(--ml-shadow-soft);
max-width: 900px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
.ml-inner .ml-menu{ margin-top: 40px; }
.e-con.ml-menu{ padding: 38px 38px 34px; }
.ml-menu > .e-con-inner{ padding: 0; }
.ml-menu-head .elementor-heading-title{
font-family: var(--ml-serif);
font-size: 22px;
font-weight: 600;
line-height: 1.3;
}
.ml-menu-intro.elementor-widget{ margin-top: 10px; }
.ml-menu-intro p{
font-size: 14.5px;
line-height: 1.6;
color: var(--e-global-color-text);
margin-bottom: 0;
}
/* the five choices */
.ml-opts > .e-con-inner{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 0;
align-items: stretch;
}
.ml-opts > .e-con-inner > *{ width: 100%; max-width: 100%; min-width: 0; }
/* five services in a two-column grid leaves the last one stranded beside an
empty space, which reads as a card that failed to load. When the count is
odd the last card takes the whole row instead, so the block always ends
on a straight edge — and it keeps working if Adam adds a sixth service. */
.ml-opts > .e-con-inner > *:last-child:nth-child(odd){ grid-column: 1 / -1; }
.e-con.ml-opts{ margin-top: 24px; }
.e-con.ml-opt{
background: var(--e-global-color-mlwarm);
border: 1px solid var(--ml-line);
border-radius: 14px;
padding: 16px 18px;
cursor: pointer;
transition: border-color .15s, background-color .15s, box-shadow .15s;
}
.e-con.ml-opt > .e-con-inner{ padding: 0; height: 100%; }
.e-con.ml-opt:hover{ border-color: var(--e-global-color-primary); }
/* the chosen one: mint ground and a green edge, the same pair the site uses
for anything active */
/* White rather than mint: the chosen card lifts off the warm ones by being
the clean one, and the green edge does the saying. A green ground here
read as a highlighter drawn over the words. */
.e-con.ml-opt.is-on{
background: #fff;
border-color: var(--e-global-color-primary);
box-shadow: 0 0 0 1px var(--e-global-color-primary) inset;
}
.e-con.ml-opt:focus-visible{
outline: 2px solid var(--e-global-color-mlgreendark);
outline-offset: 2px;
}
.ml-opt-name .elementor-heading-title{
font-family: var(--ml-serif);
font-size: 16.5px;
font-weight: 600;
line-height: 1.3;
}
.e-con.ml-opt-price{ margin-top: 6px; }
.ml-opt-price > .e-con-inner{ padding: 0; }
.ml-opt-rate .elementor-heading-title{
font-family: var(--ml-serif);
font-size: 21px;
font-weight: 600;
line-height: 1.1;
color: var(--e-global-color-mlgreendark);
}
.ml-opt-unit .elementor-heading-title{
font-family: var(--ml-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: .03em;
color: var(--e-global-color-text);
line-height: 1.4;
}
.ml-opt-note.elementor-widget{ margin-top: 7px; }
.ml-opt-note p{
font-size: 12.5px;
line-height: 1.5;
color: var(--e-global-color-mlmuted, #7C8797);
margin-bottom: 0;
}
/* the question and the answer */
.ml-est-wrap.elementor-widget{ margin-top: 26px; }
.ml-est{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 18px;
border-top: 1px solid var(--ml-line);
padding-top: 22px;
}
.ml-est-ask{ display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ml-est-label{
font-family: var(--ml-sans);
font-size: 13px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--e-global-color-mlgreendark);
}
.ml-est-field{ display: flex; align-items: baseline; gap: 9px; }
input.ml-qty-input{
width: 148px;
font-family: var(--ml-body);
font-size: 17px;
color: var(--e-global-color-secondary);
background: #fff;
border: 1px solid var(--ml-line-2);
border-radius: 10px;
padding: 11px 14px;
line-height: 1.2;
transition: border-color .15s, box-shadow .15s;
}
input.ml-qty-input:focus{
outline: none;
border-color: var(--e-global-color-primary);
box-shadow: 0 0 0 3px var(--e-global-color-mlmint);
}
.ml-qty-unit{
font-family: var(--ml-body);
font-size: 15px;
color: var(--e-global-color-text);
}
.ml-est-answer{ display: flex; align-items: baseline; gap: 12px; }
.ml-total-label{
font-family: var(--ml-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--e-global-color-text);
}
.ml-total-value{
font-family: var(--ml-serif);
font-size: 34px;
font-weight: 600;
line-height: 1;
color: var(--e-global-color-secondary);
}
.ml-menu-note.elementor-widget{ margin-top: 16px; }
.ml-menu-note p{
font-size: 12.5px;
line-height: 1.5;
color: var(--e-global-color-mlmuted, #7C8797);
margin-bottom: 0;
}
@media (max-width: 1024px){
.ml-steps > .e-con-inner{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px){
.ml-steps > .e-con-inner{ grid-template-columns: 1fr; gap: 22px; }
/* The comparison is the point of that table, and on a phone the two
columns it compares us against sat off the right edge, behind a scroll
nobody could see: a visitor met a list of our own ticks and no
comparison at all. Held to the screen instead, tighter and smaller, so
all three columns are there to be read. */
table.ml-compare{ min-width: 0; }
table.ml-compare th,
table.ml-compare td{ padding: 11px 4px; }
table.ml-compare tbody th[scope="row"]{
font-size: 13px;
line-height: 1.35;
padding-left: 12px;
padding-right: 8px;
}
table.ml-compare thead th{ font-size: 9.5px; letter-spacing: .02em; padding: 10px 4px; }
.ml-mark{ min-width: 0; font-size: 15px; }
.ml-mark-no{ font-size: 16px; }
/* one service to a row on a phone, and the question sits above its answer
rather than trying to share the line with it */
.ml-opts > .e-con-inner{ grid-template-columns: 1fr; }
.ml-svc-grid > .e-con-inner{ grid-template-columns: 1fr; }
.e-con.ml-menu{ padding: 22px 18px; }
.ml-est{ flex-direction: column; align-items: flex-start; gap: 16px; }
.ml-est-answer{ width: 100%; justify-content: space-between; }
input.ml-qty-input{ width: 120px; }
.ml-calc.elementor-widget{ padding: 16px; }
table.ml-compare th,
table.ml-compare td{ padding: 12px 14px; }
}
/* --- The proof callout ---------------------------------------------------
A test the reader can run in ten seconds, which on the old AI Search page
sat three sentences deep in a grey paragraph. Framed, so the eye lands on
it. Mint rather than teal ground: teal is the accent and never a ground
larger than a pill. */
.e-con.ml-proof{
background: var(--e-global-color-mlmint);
border-radius: var(--ml-radius);
border-left: 3px solid var(--e-global-color-primary);
padding: 20px 22px;
margin-top: 22px;
}
.ml-proof > .e-con-inner{ padding: 0; }
.ml-proof-text p{
font-size: 15.5px;
line-height: 1.6;
color: var(--e-global-color-secondary);
margin-bottom: 0;
}
.ml-proof-text strong{ font-weight: 600; }
.ml-proof-line.elementor-widget{ margin-top: 10px; }
.ml-proof-line p{
font-family: var(--ml-serif);
font-size: 17px;
font-weight: 600;
line-height: 1.4;
color: var(--e-global-color-mlgreendark);
margin-bottom: 0;
}
/* --- Three across, with the last row centred -----------------------------
ml-three-up is a grid, which is right for six cards and wrong for five:
the fifth sits alone against an empty third column and reads as a card
that failed to load. Laid out as a wrapping row instead, the last two
centre under the first three and the block ends deliberately. */
.ml-three-up-centred > .e-con-inner{
display: flex;
flex-wrap: wrap;
/* the container carries Elementor's own flex settings, and its
justify-content wins over a plain class, so the row stayed left */
justify-content: center !important;
align-items: stretch;
gap: 22px;
padding: 0;
}
.ml-three-up-centred > .e-con-inner > *{
width: calc((100% - 44px) / 3);
max-width: 100%;
min-width: 0;
}
.ml-inner .ml-three-up-centred{ margin-top: 46px; }
@media (max-width: 1024px){
.ml-three-up-centred > .e-con-inner > *{ width: calc((100% - 22px) / 2); }
}
@media (max-width: 767px){
.ml-three-up-centred > .e-con-inner > *{ width: 100%; }
}
/* --- Measured figures ----------------------------------------------------
The PR page argues from numbers. On the old page they counted up from
zero when scrolled into view, which means anyone whose script is slow or
blocked reads "$0T" — the argument showing as nothing. They are set text
here, and they take the accent, because a figure of something already
measured is evidence. */
.ml-figs > .e-con-inner{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 20px;
align-items: stretch;
padding: 0;
}
.ml-figs-three > .e-con-inner{ grid-template-columns: repeat(3, 1fr); }
.ml-figs > .e-con-inner > *{ width: 100%; max-width: 100%; min-width: 0; }
.ml-inner .ml-figs{ margin-top: 46px; }
.e-con.ml-fig{
background: #fff;
border: 1px solid var(--ml-line-2);
border-radius: var(--ml-radius);
box-shadow: var(--ml-shadow-soft);
padding: 26px 24px;
}
.e-con.ml-fig > .e-con-inner{ padding: 0; height: 100%; }
.ml-fig-number .elementor-heading-title{
font-family: var(--ml-serif);
font-size: clamp(34px, 3.6vw, 46px);
font-weight: 600;
line-height: 1;
color: var(--ml-accent-ink, #00595A);
}
.ml-fig-label.elementor-widget{ margin-top: 12px; }
.ml-fig-label .elementor-heading-title{
font-family: var(--ml-sans);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--e-global-color-mlgreendark);
line-height: 1.6;
}
.ml-fig-note.elementor-widget{ margin-top: 8px; }
.ml-fig-note p{
font-size: 14px;
line-height: 1.55;
color: var(--e-global-color-text);
margin-bottom: 0;
}
/* the three questions in the PR hero */
.ml-asks.elementor-widget{ margin-top: 20px; }
.ml-asks .elementor-icon-list-item{ align-items: flex-start; gap: 11px; margin-bottom: 9px; }
.ml-asks .elementor-icon-list-icon{
width: 8px; height: 8px; flex: 0 0 auto; margin-top: 9px; padding: 0;
color: var(--e-global-color-primary);
}
.ml-asks .elementor-icon-list-text{
padding: 0;
font-size: 16px;
line-height: 1.6;
color: var(--e-global-color-secondary);
}
/* the line that names the study a set of numbers came from */
.ml-source.elementor-widget{ margin-top: 20px; }
.ml-source p{
font-size: 12.5px;
line-height: 1.5;
color: var(--e-global-color-mlmuted, #7C8797);
text-align: center;
margin-bottom: 0;
}
/* --- A person on the team ------------------------------------------------ */
.e-con.ml-team{
background: #fff;
border: 1px solid var(--ml-line-2);
border-radius: var(--ml-radius);
box-shadow: var(--ml-shadow-soft);
padding: 26px 24px 28px;
}
.e-con.ml-team > .e-con-inner{ padding: 0; height: 100%; }
.ml-team-photo img{
width: 96px;
height: 96px;
object-fit: contain;
border-radius: 50%;
background: var(--e-global-color-mlwarm);
padding: 6px;
}
.ml-team-name.elementor-widget{ margin-top: 16px; }
.ml-team-name .elementor-heading-title{
font-family: var(--ml-serif);
font-size: 20px;
font-weight: 600;
line-height: 1.25;
}
.ml-team-role.elementor-widget{ margin-top: 5px; }
.ml-team-role .elementor-heading-title{
font-family: var(--ml-sans);
font-size: 11.5px;
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--e-global-color-mlgreendark);
line-height: 1.6;
}
.ml-team-note.elementor-widget{ margin-top: 10px; }
.ml-team-note p{
font-size: 14.5px;
line-height: 1.6;
color: var(--e-global-color-text);
margin-bottom: 0;
}
@media (max-width: 1024px){
.ml-figs > .e-con-inner{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px){
.ml-figs > .e-con-inner,
.ml-figs-three > .e-con-inner{ grid-template-columns: 1fr; }
}
/* --- Three or four numbered blocks ---------------------------------------
ml-steps runs five across, which is right for a five-step process and
wrong for three problems or four stages. */
.ml-steps-three > .e-con-inner{ grid-template-columns: repeat(3, 1fr); }
.ml-steps-four > .e-con-inner{ grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px){
.ml-steps-three > .e-con-inner,
.ml-steps-four > .e-con-inner{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px){
.ml-steps-three > .e-con-inner,
.ml-steps-four > .e-con-inner{ grid-template-columns: 1fr; }
}
/* a heading inside a framed callout */
.ml-proof-head .elementor-heading-title{
font-family: var(--ml-serif);
font-size: 19px;
font-weight: 600;
line-height: 1.35;
}
.ml-proof-head + .ml-proof-text.elementor-widget{ margin-top: 9px; }
/* an award, which is a word rather than a number, in the figure's place */
.ml-fig-number-sm .elementor-heading-title{
font-family: var(--ml-serif);
font-size: 26px;
font-weight: 600;
line-height: 1.15;
color: var(--ml-accent-ink, #00595A);
}
/* --- One market ---------------------------------------------------------- */
.ml-mkts > .e-con-inner{
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 16px;
align-items: stretch;
padding: 0;
}
.ml-mkts > .e-con-inner > *{ width: 100%; max-width: 100%; min-width: 0; }
.ml-inner .ml-mkts{ margin-top: 46px; }
.e-con.ml-mkt{
background: #fff;
border: 1px solid var(--ml-line-2);
border-radius: 14px;
padding: 18px 14px;
text-align: center;
}
.e-con.ml-mkt > .e-con-inner{ padding: 0; }
.ml-mkt-code .elementor-heading-title{
font-family: var(--ml-sans);
font-size: 12px;
font-weight: 700;
letter-spacing: .1em;
color: var(--ml-accent-ink, #00595A);
text-align: center;
}
.ml-mkt-name.elementor-widget{ margin-top: 8px; }
.ml-mkt-name .elementor-heading-title{
font-family: var(--ml-serif);
font-size: 16px;
font-weight: 600;
line-height: 1.3;
text-align: center;
}
.ml-mkt-en.elementor-widget{ margin-top: 3px; }
.ml-mkt-en p{
font-size: 11.5px;
line-height: 1.4;
color: var(--e-global-color-mlmuted, #7C8797);
text-align: center;
margin-bottom: 0;
}
.ml-team-latin.elementor-widget{ margin-top: 2px; }
.ml-team-latin .elementor-heading-title{
font-family: var(--ml-body);
font-size: 13px;
font-weight: 400;
color: var(--e-global-color-mlmuted, #7C8797);
line-height: 1.5;
}
.ml-hero-note.elementor-widget{ margin-top: 16px; }
.ml-hero-note p{
font-size: 14px;
line-height: 1.6;
color: var(--e-global-color-mlmuted, #7C8797);
margin-bottom: 0;
}
@media (max-width: 1024px){ .ml-mkts > .e-con-inner{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px){ .ml-mkts > .e-con-inner{ grid-template-columns: repeat(2, 1fr); } }
/* the one-line promise under a Japanese hero headline */
.ml-hero-tag.elementor-widget{ margin-top: 14px; }
.ml-hero-tag p{
font-family: var(--ml-serif);
font-size: 19px;
font-weight: 600;
line-height: 1.5;
color: var(--e-global-color-mlgreendark);
margin-bottom: 0;
}
/* --- A question and its answer, in the open ------------------------------
Used where a page has only a handful of questions and every one of them is
a reason somebody does not write in. An accordion would hide them. */
.e-con.ml-ask{
background: #fff;
border: 1px solid var(--ml-line-2);
border-radius: var(--ml-radius);
box-shadow: var(--ml-shadow-soft);
padding: 26px 26px 28px;
}
.e-con.ml-ask > .e-con-inner{ padding: 0; height: 100%; }
.ml-ask-q .elementor-heading-title{
font-family: var(--ml-serif);
font-size: 19px;
font-weight: 600;
line-height: 1.35;
}
.ml-ask-a.elementor-widget{ margin-top: 10px; }
.ml-ask-a p{
font-size: 15px;
line-height: 1.65;
color: var(--e-global-color-text);
margin-bottom: 0;
}
.ml-ask-a a{
color: var(--e-global-color-mlgreendark);
text-decoration: underline;
text-underline-offset: 3px;
}
.ml-ask-a a:hover{ color: var(--e-global-color-primary); }
/* the client's own mark at the top of a case card */
.ml-case-logo.elementor-widget{ margin-bottom: 16px; }
.ml-case-logo img{
max-width: 150px;
max-height: 46px;
width: auto;
object-fit: contain;
}
.ml-case-note a{
color: var(--e-global-color-mlgreendark);
text-decoration: underline;
text-underline-offset: 3px;
}
.ml-case-note p + p{ margin-top: 10px; }
/* --- The clicks chart ----------------------------------------------------
mlc, on an HTML widget
This replaces a 431px screenshot of Search Console with the axis values
painted out in red and the caption baked into the pixels. The curve is
the same one, read back out of that screenshot column by column, so the
shape is still the client's; only the drawing is ours. Blue and the
green-to-blue line are the homepage's own colours, which the service
pages had otherwise dropped. */
.mlc{
background: #fff;
border: 1px solid var(--ml-line-2);
border-radius: var(--ml-radius);
padding: 20px 22px 16px;
box-shadow: 0 1px 2px rgba(22, 36, 28, .04);
}
.mlc-head{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 14px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.mlc-kicker{
margin: 0;
font-family: var(--ml-serif);
font-size: 18px;
font-weight: 600;
color: var(--e-global-color-secondary);
}
.mlc-rise{
margin: 0;
font-family: var(--ml-sans);
font-size: 13px;
font-weight: 700;
letter-spacing: .03em;
color: var(--e-global-color-accent);
}
.mlc-plot{ position: relative; }
.mlc-plot svg{ display: block; width: 100%; height: 300px; }
.mlc-grid{ stroke: #E7ECE4; stroke-width: 1; }
.mlc-area{ fill: url(#mlcFill); }
.mlc-line{
fill: none;
stroke: url(#mlcLine);
stroke-width: 2.4;
stroke-linejoin: round;
stroke-linecap: round;
vector-effect: non-scaling-stroke;
}
.mlc-yt, .mlc-xt{
font-family: var(--ml-sans);
font-size: 11px;
fill: var(--e-global-color-mlmuted, #7C8797);
}
.mlc-yt{ text-anchor: end; }
.mlc-dot{
fill: #fff;
stroke: var(--e-global-color-accent);
stroke-width: 2.2;
opacity: 0;
transition: opacity .12s ease;
vector-effect: non-scaling-stroke;
}
.mlc-hit{ fill: transparent; cursor: pointer; }
.mlc-pt.is-on .mlc-dot,
.mlc-pt:hover .mlc-dot{ opacity: 1; }
.mlc-tip{
position: absolute;
z-index: 3;
pointer-events: none;
background: var(--e-global-color-secondary);
color: #fff;
font-family: var(--ml-sans);
font-size: 12.5px;
font-weight: 600;
line-height: 1.35;
padding: 7px 10px;
border-radius: 8px;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(22, 36, 28, .18);
}
.mlc-note{
margin: 10px 0 0;
font-family: var(--ml-sans);
font-size: 12.5px;
line-height: 1.5;
color: var(--e-global-color-mlmuted, #7C8797);
}
.mlc-ylab{
margin: 4px 0 0;
font-family: var(--ml-sans);
font-size: 12px;
color: var(--e-global-color-mlmuted, #7C8797);
}
@media (max-width: 767px){
.mlc{ padding: 16px 14px 12px; }
.mlc-plot svg{ height: 230px; }
.mlc-kicker{ font-size: 16px; }
}
/* --- The green-to-blue band, for the service pages -----------------------
ml-band-flow
The homepage carries the whole palette: a heading that fades green into
blue, a pale blue ground, and one band where green runs across into blue
under two soft glows. The service pages had been built out of white,
warm and mint only, so they read as a different site by the third page.
This is the homepage's own band under a name that is not about NGOs, so
a service page can take it once, where the page turns from the problem
to what we do about it. Blue still only ever arrives out of the green. */
.ml-band-flow{
position: relative;
overflow: hidden;
overflow: clip;
background-image: linear-gradient(128deg,
var(--e-global-color-mlmint) 0%,
#E6F2DF 26%,
#E8F0F8 62%,
var(--e-global-color-mlblueband) 100%);
}
.ml-band-flow:before{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
radial-gradient(58% 78% at 10% 16%, rgba(84,180,53,.18), transparent 62%),
radial-gradient(54% 74% at 90% 84%, rgba(47,111,214,.15), transparent 64%),
radial-gradient(40% 60% at 52% 50%, rgba(255,255,255,.50), transparent 70%);
}
.ml-band-flow > *{ position: relative; z-index: 1; }
/* the chart sits in the column the photograph used to hold, so it has to
be allowed to fill that column the same way */
.ml-why-chart > .e-con-inner{ height: 100%; padding: 0; }
.ml-why-chart .elementor-widget-html,
.ml-why-chart .elementor-widget-html > .elementor-widget-container{ height: 100%; }
.ml-why-chart .mlc{ height: 100%; display: flex; flex-direction: column; }
.ml-why-chart .mlc-plot{ flex: 1 1 auto; }
/* --- A callout must not share its ground ---------------------------------
.ml-proof is mint, which is right on white or on the warm ground and
invisible on a mint band: on the Japanese PR page the closing note under
the three team cards sat mint-on-mint and read as loose text with a
green tick beside it. On any tinted band the callout turns white, which
is the one ground none of the bands use. */
.ml-band-mint .e-con.ml-proof,
.ml-band-flow .e-con.ml-proof,
.ml-band-blue .e-con.ml-proof{
background: #fff;
border: 1px solid var(--ml-line-2);
border-left: 3px solid var(--e-global-color-primary);
box-shadow: 0 1px 2px rgba(22, 36, 28, .04);
}
/* --- The steps must not be stretched to one height -----------------------
Elementor writes align-items on the container from the widget panel, and
that beats a plain class, so the five cards came back out as equal-height
boxes with steps one, three and five two thirds empty -- the same fault
the ruled version was built to escape. Named with !important because the
generated rule is the one being overruled, and on the card itself as
well, since a grid item can stretch on its own account. */
.ml-steps > .e-con-inner{ align-items: start !important; }
.e-con.ml-step{ align-self: start !important; }
/* --- Round three, from Vadym's review ------------------------------------ */
/* Wider steps. Five across put each card at 196px, which is four or five
words a line and hard work to read. Three to a row at ~349px, with the
last two centred under them, so the cards are half as wide again and the
block still ends on a deliberate edge rather than a hole. */
.ml-steps > .e-con-inner{
display: flex !important;
flex-wrap: wrap;
justify-content: center;
grid-template-columns: none;
gap: 20px 26px;
}
.ml-steps > .e-con-inner > .e-con.ml-step{
flex: 0 1 320px;
max-width: 349px;
width: auto;
}
/* The gradient band must never melt into the band above it. It used to
begin in mint, so where a mint section sat on top the two greens met
with no edge at all down the left-hand side. It begins in white now,
and carries a hairline top and bottom so the join is stated whatever
colour happens to be next to it. */
.ml-band-flow{
background-image: linear-gradient(128deg,
#FFFFFF 0%,
#EDF4E8 24%,
#E8F0F8 62%,
var(--e-global-color-mlblueband) 100%);
border-top: 1px solid rgba(47, 111, 214, .16);
border-bottom: 1px solid rgba(47, 111, 214, .16);
}
/* The estimate is the one block on the site that is costed rather than
sold, so it drops the green altogether: white cards on the pale blue
band, blue for anything active, teal for the rates themselves. Scoped by
the section id, so it cannot leak into the service cards further up the
page that look almost the same. */
#estimate .e-con.ml-opt{
background: #F4F7FB;
border-color: #D7E2F0;
}
#estimate .e-con.ml-opt:hover{ border-color: var(--e-global-color-accent); }
#estimate .e-con.ml-opt.is-on{
background: #fff;
border-color: var(--e-global-color-accent);
box-shadow: 0 0 0 1px var(--e-global-color-accent) inset;
}
#estimate .e-con.ml-opt:focus-visible{
outline-color: var(--e-global-color-accent);
}
#estimate .ml-opt-rate .elementor-heading-title{ color: var(--ml-accent-ink); }
#estimate .ml-est-label{ color: var(--e-global-color-accent); }
#estimate input.ml-qty-input:focus{
border-color: var(--e-global-color-accent);
box-shadow: 0 0 0 3px rgba(47, 111, 214, .16);
}
#estimate .ml-total-value{ color: var(--ml-accent-ink); }
/* the highlighter under "estimate" is a green marker everywhere else */
#estimate .ml-highlight{
background-image: linear-gradient(120deg,
transparent 0 3%,
rgba(47, 111, 214, .20) 3% 97%,
transparent 97%);
}
#estimate .ml-est{ border-top-color: #D7E2F0; }
/* The contact form is shorter than the details beside it on several pages
-- 594px against 906 on PR & Media -- so it sat at the top of its half
with 312px of white underneath. Centred in its column instead: it starts
lower and the space is the same above as below. */
.ml-split-contact .ml-form > .e-con-inner{
justify-content: center !important;
}
@media (max-width: 1024px){
.ml-split-contact .ml-form > .e-con-inner{
justify-content: flex-start !important;
}
}
/* Elementor writes justify-content on the container too, so the two cards
on the second row sat against the left edge instead of under the middle
of the three above them. And on a phone a 320px basis is wider than the
column, so the basis goes full width there. */
.ml-steps > .e-con-inner{ justify-content: center !important; }
@media (max-width: 767px){
.ml-steps > .e-con-inner > .e-con.ml-step{ flex: 1 1 100%; max-width: 100%; }
}
/* the last green left in the estimate: the link in its opening paragraph */
/* the link inside the opening paragraph. Written as a bare `a` it also
caught the section's own button, which came out blue text on a green
ground and unreadable the moment a button was put in this section. */
#estimate a:not(.elementor-button){ color: var(--e-global-color-accent); }
#estimate a:not(.elementor-button):hover{ color: var(--ml-accent-ink); }
/* =========================================================================
ROUND FOUR — the review Vadym asked for, done section by section
========================================================================= */
/* --- A row of cards must never leave an orphan ---------------------------
The rule the client set: four cards are two-by-two or one row, never
three and one. Every grid is named by how many it holds, so the count
decides the shape instead of the container width deciding it. */
/* four steps: two and two, not three and a straggler */
.ml-steps.ml-steps-four > .e-con-inner > .e-con.ml-step{
flex: 0 1 calc(50% - 13px);
max-width: calc(50% - 13px);
}
/* three steps: one row, they fit */
.ml-steps.ml-steps-three > .e-con-inner > .e-con.ml-step{
flex: 0 1 calc(33.333% - 18px);
max-width: calc(33.333% - 18px);
}
@media (max-width: 767px){
.ml-steps.ml-steps-four > .e-con-inner > .e-con.ml-step,
.ml-steps.ml-steps-three > .e-con-inner > .e-con.ml-step{
flex: 1 1 100%;
max-width: 100%;
}
}
/* Three figures were laid out two and one, hard against the left. Three
across, which is what a row of three is for. */
.ml-stats > .e-con-inner{
display: grid !important;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
}
@media (max-width: 767px){
.ml-stats > .e-con-inner{ grid-template-columns: 1fr; }
}
/* The fifth card in a two-column grid was stretched across the whole row,
so one line of text sat in a card three times too wide and the block
looked unfinished. It keeps its half width and centres instead. */
.ml-opts > .e-con-inner > *:last-child:nth-child(odd),
.ml-svc-grid > .e-con-inner > *:last-child:nth-child(odd){
grid-column: auto;
justify-self: center;
width: 100%;
}
.ml-opts > .e-con-inner,
.ml-svc-grid > .e-con-inner{ justify-items: center; }
.ml-opts > .e-con-inner > *,
.ml-svc-grid > .e-con-inner > *{ width: 100%; }
/* an odd last card sits under the middle of the two above it */
.ml-opts > .e-con-inner > *:last-child:nth-child(odd),
.ml-svc-grid > .e-con-inner > *:last-child:nth-child(odd){
grid-column: 1 / -1;
max-width: calc(50% - 6px);
}
/* Seven cards in a three-column grid left one alone on the left of the
last row. Centred, it reads as the end of a set rather than as a gap. */
.ml-three-up > .e-con-inner{ justify-items: center; }
.ml-three-up > .e-con-inner > *:last-child:nth-child(3n + 1){
grid-column: 1 / -1;
max-width: calc(33.333% - 15px);
}
/* --- A blue band is a blue section --------------------------------------
Vadym's rule: if the ground is blue, everything on it is blue or teal.
Green is the doing colour and it belongs on white, warm and mint. This
covers the pale blue band and the green-to-blue gradient, where the
cards that land over the blue half were carrying green numerals. */
.ml-band-blue .ml-step-no .elementor-heading-title,
.ml-band-flow .ml-step-no .elementor-heading-title{
color: var(--e-global-color-accent);
}
.ml-band-blue .e-con.ml-step,
.ml-band-flow .e-con.ml-step{
border-top-color: rgba(47, 111, 214, .55);
}
.ml-band-blue .ml-step-label .elementor-heading-title,
.ml-band-flow .ml-step-label .elementor-heading-title,
.ml-band-blue .ml-label,
.ml-band-flow .ml-label,
.ml-band-blue .ml-strip-label .elementor-heading-title,
.ml-band-flow .ml-strip-label .elementor-heading-title{
color: var(--ml-accent-ink);
}
.ml-band-blue .ml-label:before,
.ml-band-flow .ml-label:before{ background-color: var(--e-global-color-accent); }
.ml-band-blue .ml-highlight,
.ml-band-flow .ml-highlight{
background-image: linear-gradient(120deg,
transparent 0 3%, rgba(47, 111, 214, .20) 3% 97%, transparent 97%);
}
.ml-band-blue a:not(.elementor-button),
.ml-band-flow a:not(.elementor-button){ color: var(--e-global-color-accent); }
.ml-band-blue a:not(.elementor-button):hover,
.ml-band-flow a:not(.elementor-button):hover{ color: var(--ml-accent-ink); }
.ml-band-blue .ml-btn-primary .elementor-button,
.ml-band-flow .ml-btn-primary .elementor-button{
background-color: var(--e-global-color-accent);
box-shadow: 0 10px 22px rgba(47, 111, 214, .24);
}
.ml-band-blue .ml-btn-primary .elementor-button:hover,
.ml-band-flow .ml-btn-primary .elementor-button:hover{
background-color: var(--ml-accent-ink);
}
.ml-band-blue .ml-arrow-link .elementor-button,
.ml-band-flow .ml-arrow-link .elementor-button{ color: var(--e-global-color-accent); }
.ml-band-blue .ml-ticks .elementor-icon-list-icon,
.ml-band-flow .ml-ticks .elementor-icon-list-icon,
.ml-band-blue .ml-ticks .elementor-icon-list-icon i,
.ml-band-flow .ml-ticks .elementor-icon-list-icon i,
.ml-band-blue .ml-ticks .elementor-icon-list-icon svg,
.ml-band-flow .ml-ticks .elementor-icon-list-icon svg{
color: var(--e-global-color-accent);
fill: var(--e-global-color-accent);
}
.ml-band-blue .ml-mark-yes,
.ml-band-flow .ml-mark-yes{ color: var(--ml-accent-ink); }
.ml-band-blue .ml-opt-rate .elementor-heading-title,
.ml-band-flow .ml-opt-rate .elementor-heading-title{ color: var(--ml-accent-ink); }
/* --- The marquee fades at both ends --------------------------------------
The mask was written for .elementor-image-carousel-wrapper, which this
version of the widget no longer uses on these pages, so the strip was
cut off square and the first and last mark were sliced in half. */
.ml-logo-carousel .swiper,
.ml-logo-carousel .swiper-container,
.ml-logo-carousel .elementor-image-carousel-wrapper{
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
/* Two greens survived the first pass, both because the colour sits on an
inner element rather than on the one the class is written for: a filled
button carries it on .elementor-button, and a section label on the
heading inside .ml-label. */
.ml-band-blue .elementor-widget-button:not(.ml-arrow-link) .elementor-button,
.ml-band-flow .elementor-widget-button:not(.ml-arrow-link) .elementor-button{
background-color: var(--e-global-color-accent);
box-shadow: 0 10px 22px rgba(47, 111, 214, .24);
}
.ml-band-blue .elementor-widget-button:not(.ml-arrow-link) .elementor-button:hover,
.ml-band-flow .elementor-widget-button:not(.ml-arrow-link) .elementor-button:hover{
background-color: var(--ml-accent-ink);
}
.ml-band-blue .ml-label .elementor-heading-title,
.ml-band-flow .ml-label .elementor-heading-title,
.ml-band-blue .ml-label-centred .elementor-heading-title,
.ml-band-flow .ml-label-centred .elementor-heading-title{
color: var(--ml-accent-ink);
}
/* Elementor writes each button's colour into that PAGE's stylesheet, which
loads after the kit, so the kit's rule lost every time. These are the
only declarations on the site that need !important for that reason: the
band has to be able to overrule a per-widget colour. */
/* Only a FILLED button takes the blue ground. The text links are Elementor
button widgets too, and ml-arrow-link sits on the widget, not on the
anchor inside it -- an earlier version of this rule tested the anchor's
own classes, so the arrow links were given a solid blue background under
blue text and disappeared. Both .elementor-kit-712s are anchored on the widget. */
.ml-band-blue .elementor-widget-button:not(.ml-arrow-link) .elementor-button,
.ml-band-flow .elementor-widget-button:not(.ml-arrow-link) .elementor-button{
background-color: var(--e-global-color-accent) !important;
}
.ml-band-blue .elementor-widget-button.ml-arrow-link .elementor-button,
.ml-band-flow .elementor-widget-button.ml-arrow-link .elementor-button,
.ml-band-blue .ml-arrow-link .elementor-button,
.ml-band-flow .ml-arrow-link .elementor-button{
background-color: transparent !important;
color: var(--e-global-color-accent) !important;
}
/* the small green sub-heads over a blue ground: teal, which is the accent
that belongs on blue */
.ml-band-blue h6.elementor-heading-title,
.ml-band-flow h6.elementor-heading-title{
color: var(--ml-accent-ink) !important;
}
/* the closing line of a callout is green everywhere else; on blue it is teal */
.ml-band-blue .ml-proof-line p,
.ml-band-flow .ml-proof-line p,
.ml-band-blue .ml-proof-line strong,
.ml-band-flow .ml-proof-line strong{ color: var(--ml-accent-ink); }
/* =========================================================================
ROUND FIVE - Adam page-by-page review, block A
The sitewide items: every one of them is a note he made on more than one
page, so each is fixed once here rather than page by page.
========================================================================= */
/* --- A1. The dot-and-label subheads --------------------------------------
His note, repeated on all six reviewed pages: increase their size and
prominence wherever they carry key information, treat them as primary
headings when appropriate. At 13px they read as a caption over the
heading. 16px at 700 with a larger dot makes them a heading in their own
right; the h2 underneath is still far larger, so the order of the page is
unchanged -- only the bottom of the ladder moved up. */
.ml-label .elementor-heading-title,
.ml-label-centred .elementor-heading-title{
font-size: 16px;
font-weight: 700;
letter-spacing: .045em;
gap: 11px;
}
.ml-label .elementor-heading-title:before,
.ml-label-centred .elementor-heading-title:before{
width: 10px;
height: 10px;
}
/* the same ladder inside a step card */
.ml-step-label .elementor-heading-title{
font-size: 12.5px;
letter-spacing: .06em;
}
/* --- A2. The comparison table --------------------------------------------
Enlarge the check marks, question marks, Xs and all table text; give the
table stronger contrast and colour; reduce the excessive white space.
The marks were 17px in a 61px row, which is why the table read as empty,
and the grid was a pale green hairline. Text up, marks up half again,
grid darkened, and the air round the table cut. */
.ml-compare-wrap.elementor-widget{ margin-top: 28px; }
:root{
--ml-grid: #BACCB1;
--ml-grid-head: #7F9A73;
}
table.ml-compare th,
table.ml-compare td{ padding: 13px 18px; }
table.ml-compare tbody th[scope="row"]{
font-size: 17px;
font-weight: 600;
}
table.ml-compare thead th{
font-size: 13.5px;
letter-spacing: .045em;
color: var(--e-global-color-secondary);
}
.ml-mark{ font-size: 25px; min-width: 32px; }
.ml-mark-maybe{ font-size: 23px; }
.ml-mark-no{ font-size: 27px; }
/* our column is the answer the table is built to give, so it is stated in
the brand green rather than implied by a tint */
table.ml-compare thead th.ml-col-us{
background: #E4F2DA;
border-bottom: 3px solid var(--e-global-color-primary);
padding: 9px 18px;
}
table.ml-compare .ml-col-us{ background: #E4F2DA; }
/* the logo replaces the word, which is what he asked for */
.ml-compare .ml-logo-cell{
display: block;
width: 138px;
max-width: 100%;
margin: 0 auto;
}
/* less air between the table and the button under it */
#difference .ml-cta-centred{ padding-top: 30px !important; }
/* --- A3. Five steps as a sequence ----------------------------------------
Fix the uneven layout when it wraps into three items above and two below,
and make the five steps read as a sequence using arrows, connecting lines
or a background path.
Five equal cards across a row is 196px each, which Vadym had rejected as
too narrow to read; three-and-two is what Adam has now rejected as
uneven. Both hold at once only if the steps stop being a row: each step
is a full-width card, joined to the next by the line the number sits on.
Nothing wraps, so nothing can be left over, and the cards are three times
wider than either arrangement gave them.
Scoped away from ml-steps-three and ml-steps-four, which are a row of
three and a two-by-two and are not this section. */
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) > .e-con-inner{
display: flex !important;
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch !important;
justify-content: flex-start !important;
gap: 20px;
}
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) > .e-con-inner > .e-con.ml-step{
flex: 0 0 auto;
width: 100%;
max-width: 100%;
position: relative;
border-top: 1px solid var(--ml-line-2);
padding: 20px 26px 22px 22px;
}
/* the line that makes it a sequence: it runs out of one number and into
the next, through the gap between the cards */
.ml-steps:not(.ml-steps-three):not(.ml-steps-four)
> .e-con-inner > .e-con.ml-step:not(:last-child):after{
content: "";
position: absolute;
left: 45px;
top: 100%;
width: 2px;
height: 20px;
background: #C2D3BA;
}
/* number to the left in its own column, the words beside it */
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) .e-con.ml-step > .e-con-inner{
display: grid !important;
grid-template-columns: 70px minmax(0, 1fr);
align-items: start;
row-gap: 0;
padding: 0;
}
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) .ml-step-no{
grid-column: 1;
grid-row: 1 / span 3;
/* the numeral belongs against the middle of the card, not stuck to its
top edge: it labels the whole step, not the line it starts on */
align-self: center !important;
}
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) .ml-step-label,
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) .ml-step-title,
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) .ml-step-note{
grid-column: 2;
}
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) .ml-step-label.elementor-widget{
margin-top: 2px;
}
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) .ml-step-no .elementor-heading-title{
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--e-global-color-primary);
color: #fff;
font-size: 21px;
line-height: 1;
}
.ml-band-blue .ml-steps:not(.ml-steps-three):not(.ml-steps-four)
.ml-step-no .elementor-heading-title{
background: var(--e-global-color-accent);
color: #fff;
}
.ml-band-blue .ml-steps:not(.ml-steps-three):not(.ml-steps-four)
> .e-con-inner > .e-con.ml-step:not(:last-child):after{
background: #A9C4EC;
}
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) .ml-step-title .elementor-heading-title{
font-size: 20px;
}
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) .ml-step-note p{
font-size: 15.5px;
max-width: 74ch;
}
@media (max-width: 767px){
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) .e-con.ml-step > .e-con-inner{
grid-template-columns: 56px minmax(0, 1fr);
}
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) .ml-step-no .elementor-heading-title{
width: 38px;
height: 38px;
font-size: 18px;
}
.ml-steps:not(.ml-steps-three):not(.ml-steps-four)
> .e-con-inner > .e-con.ml-step:not(:last-child):after{ left: 40px; }
}
/* --- A4. The gradient section headings -----------------------------------
"Gradient H2s feel weak; explore a stronger heading treatment."
Tried twice: the gradient behind the text as a tinted panel, then as one
rounded panel with the lines balanced inside it. Vadym rejected both --
a ground behind a heading reads as a box, not as emphasis. So the
heading is simply set in the same ink as every other h2 on the site,
which is what the Japanese pages had been doing all along. The strength
now comes from the size and the weight, not from colour.
-webkit-background-clip must be reset: the original rule clipped the
gradient to the letterforms, and left in place it clips a solid colour
away too and the heading disappears. */
.ml-gradient-heading .elementor-heading-title{
background-image: none;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-text-fill-color: currentColor;
color: var(--e-global-color-secondary);
font-weight: 600;
}
.ml-band-blue .ml-gradient-heading .elementor-heading-title,
.ml-band-flow .ml-gradient-heading .elementor-heading-title{
color: var(--e-global-color-secondary);
}
/* --- A5. The service menu ------------------------------------------------
Remove per-word and per-character pricing, retain the descriptions,
increase the text size. What is left has to read at a size that suits a
card of two lines rather than four. */
.ml-opt-name .elementor-heading-title{ font-size: 20px; }
.ml-opt-note p{ font-size: 15.5px; line-height: 1.6; }
.ml-menu-intro p{ font-size: 16.5px; }
/* --- A5, second pass: the estimate keeps working -------------------------
Adam asked for the per-word and per-character prices to come off the
page, not for the calculator to go. The rate widget therefore stays in
every card, still editable in the Elementor panel and still the thing the
arithmetic reads, and only the figure is hidden. The unit stays visible,
because "per word" is what tells a reader what the box is asking for. */
.ml-opt-rate{ display: none !important; }
.ml-opt-unit .elementor-heading-title{
font-size: 14px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--e-global-color-mlgreendark);
}
#estimate .ml-opt-unit .elementor-heading-title{ color: var(--ml-accent-ink); }
.ml-opt-price{ margin-top: 2px; }
/* the button that carries the three figures down to the contact form */
.ml-est-send{
appearance: none;
border: 0;
cursor: pointer;
font-family: var(--ml-sans);
font-size: 15px;
font-weight: 600;
line-height: 1;
padding: 14px 22px;
border-radius: 10px;
color: #fff;
background: var(--e-global-color-accent);
box-shadow: 0 10px 22px rgba(47, 111, 214, .24);
transition: background-color .18s ease, transform .18s ease;
}
.ml-est-send:hover{ background: var(--ml-accent-ink); transform: translateY(-1px); }
.ml-est-send:focus-visible{ outline: 3px solid var(--e-global-color-accent); outline-offset: 3px; }
.ml-est-said{
margin: 0;
font-size: 13.5px;
font-weight: 600;
color: var(--e-global-color-mlgreendark);
flex-basis: 100%;
}
/* the slip drawn above the contact form, so the three figures can be read
without opening the details field they were also written into */
.ml-est-slip{
margin: 0 0 20px;
padding: 16px 18px;
border: 1px solid var(--ml-line-2);
border-left: 3px solid var(--e-global-color-accent);
border-radius: 10px;
background: var(--e-global-color-mlblueband, #EAF2FE);
}
.ml-est-slip-head{
display: block;
font-family: var(--ml-sans);
font-size: 11.5px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ml-accent-ink);
margin-bottom: 10px;
}
.ml-est-slip-rows{ margin: 0; display: grid; gap: 6px; }
.ml-est-slip-rows > div{
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.ml-est-slip-rows dt{
font-family: var(--ml-sans);
font-size: 12.5px;
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
color: var(--e-global-color-text);
min-width: 118px;
}
.ml-est-slip-rows dd{
margin: 0;
font-family: var(--ml-body);
font-size: 16px;
font-weight: 600;
color: var(--e-global-color-secondary);
}
@media (max-width: 767px){
.ml-est-send{ width: 100%; }
.ml-est-slip-rows dt{ min-width: 0; }
}
/* =========================================================================
The Japanese Translation page (/ja/translation_localization/)
Two components it needs that no other page had: the language pairs, and a
body paragraph that is argument rather than an intro line.
========================================================================= */
/* --- The four language pairs ---------------------------------------------
Four cards, so one row: the site rule is that four is a row or a two by
two and never three with one stranded underneath. They fold to two and
then to one, and both of those are even. */
.ml-pairs > .e-con-inner{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
align-items: stretch;
padding: 0;
}
.ml-pairs > .e-con-inner > *{ width: 100%; max-width: 100%; min-width: 0; }
.ml-inner .ml-pairs{ margin-top: 42px; }
.e-con.ml-pair{
background: #fff;
border: 1px solid var(--ml-line-2);
border-radius: 14px;
padding: 20px 18px 18px;
text-align: center;
box-shadow: 0 1px 2px rgba(22, 36, 28, .04);
}
.e-con.ml-pair > .e-con-inner{ padding: 0; }
/* Adam's note about small subheadings applies to a component invented after
he wrote it as much as to the ones he was looking at: this card name is
the heading of its card, so it is set as one. */
.ml-pair-name .elementor-heading-title{
font-size: 22px;
font-weight: 600;
line-height: 1.3;
}
/* the arrow is the only coloured thing in the card, because it is the only
part carrying the meaning. Teal, not green: green is what we DO, and this
is a statement of fact about a language pair. */
.ml-pair-arrow{ color: var(--ml-accent-ink); font-weight: 700; }
.ml-pair-note.elementor-widget{ margin-top: 8px; }
.ml-pair-note p{
font-size: 15px;
line-height: 1.55;
color: var(--e-global-color-text);
margin-bottom: 0;
}
@media (max-width: 1024px){
.ml-pairs > .e-con-inner{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px){
.ml-pairs > .e-con-inner{ grid-template-columns: 1fr; }
}
/* --- A paragraph that is the argument, not an introduction ---------------
ml-lead is centred at 60ch and sits under a heading. These two paragraphs
are the case the section makes, so they read at body width and length. */
.ml-lead-body.elementor-widget{ margin-top: 22px; }
.ml-lead-body p{
font-size: 17px;
line-height: 1.85;
color: var(--e-global-color-text);
max-width: 78ch;
margin: 0 auto;
}
.ml-lead-body.elementor-widget + .ml-lead-body.elementor-widget{ margin-top: 16px; }
/* Three service cards, one row. ml-svc-grid is a two-column grid built for
the five cards the Japanese Copywriting page carries, and its odd-last
rule centres a third card at half width under the two above it - which is
the orphan row the site rule forbids. Three across, and the odd-last rule
is cancelled because with three there is no orphan to rescue. */
.ml-svc-grid-three > .e-con-inner{ grid-template-columns: repeat(3, 1fr); }
.ml-svc-grid-three > .e-con-inner > *:last-child:nth-child(odd){
grid-column: auto;
max-width: 100%;
justify-self: stretch;
}
@media (max-width: 1024px){
.ml-svc-grid-three > .e-con-inner{ grid-template-columns: 1fr; }
}
/* --- Two figures in a full-width section ---------------------------------
ml-stats was written for the Our Work hero, where it sits in a half-row
and the two figures fall naturally side by side. Dropped into a
full-width section the three children take a third of 1100px each, which
throws the numbers to opposite edges and strands the hairline a third of
the way across. This modifier makes the row shrink to its own content and
centre, which is what a pair of figures under a paragraph wants. */
/* A later rule turns every ml-stats row into a three-column grid, for the
page that carries three figures across. Two figures and a hairline in
three equal columns is what threw these to opposite edges of 1100px, so
this modifier puts the row back to flex before centring it. */
.ml-stats-centred > .e-con-inner{
display: flex !important;
grid-template-columns: none !important;
flex-wrap: nowrap !important;
align-items: center;
justify-content: center !important;
gap: 48px;
}
/* The hairline sits on the middle of the page, which only happens if the
two figures are the same width: shrink-to-fit put "90%" and "最大500%"
either side of a centred row, and the line landed wherever their
different widths left it. Equal fixed columns, so the join is the middle
of the row and the row is the middle of the page. */
.ml-stats-centred > .e-con-inner > .e-con.ml-stat{
flex: 0 0 300px !important;
width: 300px !important;
max-width: 300px !important;
}
.ml-stats-centred > .e-con-inner > .e-con.ml-stat-sep{
flex: 0 0 1px !important;
width: 1px !important;
}
.ml-stats-centred .ml-stat{ text-align: center; }
/* "Green does, blue reaches, teal proves." A repeat-business rate and an
uplift figure are proof, so they take teal rather than the green-to-blue
the Our Work hero uses on its counts. */
.ml-stats-centred .ml-stat-figure .elementor-heading-title{
font-size: 40px;
background-image: none;
-webkit-background-clip: border-box;
background-clip: border-box;
-webkit-text-fill-color: currentColor;
color: var(--ml-accent-ink);
}
.ml-stats-centred .ml-stat-label p{
font-size: 15px;
font-weight: 500;
color: var(--e-global-color-text);
}
.ml-stats-centred .ml-stat-sep{ height: 54px; }
@media (max-width: 767px){
.ml-stats-centred > .e-con-inner{ gap: 26px; }
.ml-stats-centred .ml-stat-figure .elementor-heading-title{ font-size: 32px; }
}
/* --- A1, continued: the label over the client marks ----------------------
Missed on the first pass. The base rule sets it at 13.5px and a later one
drops it to 12px inside ml-inner, which is every section, so it rendered
at twelve. It names the kind of client the row is showing - trading
houses, small and medium businesses, NGOs, research institutes - which is
the point of the strip, not a caption under it.
Size only. The colour is teal, set in accent.css, and it stays teal: this
.elementor-kit-712 carries one class more than that one, so naming a colour here at
all overrules it - which is how it went dark ink for one round. */
.ml-inner .ml-strip-label .elementor-heading-title,
.ml-strip-label .elementor-heading-title{
font-size: 16px;
font-weight: 700;
letter-spacing: .08em;
color: var(--ml-accent-ink);
}
/* =========================================================================
The case-study box (ml-cs), on every service page
Adam: "Add a case-study box; content will be supplied. Apply this
requirement across all service pages."
Words on the left, the screenshot on the right, in one bordered card so
it reads as a single object however much text ends up in it.
========================================================================= */
.ml-cs > .e-con-inner{
display: grid;
grid-template-columns: 1.02fr .98fr;
gap: 44px;
align-items: center;
padding: 34px 36px;
}
.ml-cs{
background: #fff;
border: 1px solid var(--ml-line-2);
border-radius: var(--ml-radius);
box-shadow: 0 1px 2px rgba(22, 36, 28, .04);
}
.ml-inner .ml-cs{ margin-top: 8px; }
.ml-cs-words > .e-con-inner,
.ml-cs-pic > .e-con-inner{ padding: 0; }
.ml-cs-head.elementor-widget{ margin-top: 10px; }
.ml-cs-head .elementor-heading-title{
font-size: clamp(23px, 2.2vw, 28px);
font-weight: 600;
line-height: 1.3;
}
/* one labelled line: the key is teal because it names a fact rather than
an action, and it is set at a size that can be read, not a caption */
.ml-cs-row{ margin-top: 18px; }
.ml-cs-key .elementor-heading-title{
font-family: var(--ml-sans);
font-size: 13px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ml-accent-ink);
line-height: 1.5;
}
.ml-cs-val.elementor-widget{ margin-top: 3px; }
.ml-cs-val p{
font-size: 16px;
line-height: 1.65;
color: var(--e-global-color-text);
margin-bottom: 0;
}
/* Everywhere a case study was built from a data file, each paragraph is its
own widget and the space between them comes from the widget. The JX case
study is one widget holding two paragraphs, so the space has to come from
the paragraphs; without this they ran together as a single block. */
.ml-cs-val p + p{ margin-top: 14px; }
/* the line that says this is not finished. Deliberately plain and quiet:
it is a note to whoever fills the box in, not part of the page. */
.ml-cs-note.elementor-widget{ margin-top: 22px; }
.ml-cs-note p{
font-size: 13.5px;
line-height: 1.6;
font-style: italic;
color: var(--e-global-color-mlmuted, #7C8797);
margin-bottom: 0;
padding-top: 14px;
border-top: 1px dashed var(--ml-line-2);
}
/* the empty frame. A placeholder that fills its half of the card reads as
a slot waiting for a screenshot; one at its natural size reads as a
broken image. */
.ml-cs-shot img{
width: 100%;
height: auto;
min-height: 260px;
object-fit: cover;
border-radius: 14px;
background: var(--e-global-color-mlgrey, #F3F5F7);
border: 1px dashed var(--ml-line-2);
}
@media (max-width: 1024px){
.ml-cs > .e-con-inner{
grid-template-columns: 1fr;
gap: 26px;
padding: 26px 24px;
}
.ml-cs-shot img{ min-height: 200px; }
}
/* --- The five steps, second pass -----------------------------------------
Vadym: smaller boxes, a more visible line, and the line should end in an
arrowhead so it reads as a direction rather than a tick of rule.
The connector is still one pseudo-element. Rather than adding a second
one for the head - Elementor uses ::before on a container for its own
background overlay and that is not worth fighting - the single box is
cut into an arrow with clip-path: a shaft down the middle and a head at
the foot. Shaft is 3px of an 18px box, which is the "more visible"; the
colour is darker than the hairline it was. */
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) > .e-con-inner{
gap: 28px;
}
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) > .e-con-inner > .e-con.ml-step{
padding: 15px 22px 17px 18px;
}
.ml-steps:not(.ml-steps-three):not(.ml-steps-four)
> .e-con-inner > .e-con.ml-step:not(:last-child):after{
left: 29px; /* the circle's centre is 18 + 19 = 37; 37 - 9 = 28 */
width: 18px;
height: 28px;
background: #9DB593;
clip-path: polygon(
41.5% 0,
58.5% 0,
58.5% 58%,
100% 58%,
50% 100%,
0 58%,
41.5% 58%);
}
.ml-band-blue .ml-steps:not(.ml-steps-three):not(.ml-steps-four)
> .e-con-inner > .e-con.ml-step:not(:last-child):after{
background: #6E9BE0;
}
/* the column and the numeral come in with the card */
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) .e-con.ml-step > .e-con-inner{
grid-template-columns: 60px minmax(0, 1fr);
}
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) .ml-step-no .elementor-heading-title{
width: 38px;
height: 38px;
font-size: 18px;
}
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) .ml-step-title .elementor-heading-title{
font-size: 18.5px;
}
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) .ml-step-label .elementor-heading-title{
font-size: 12px;
}
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) .ml-step-note p{
font-size: 15px;
}
@media (max-width: 767px){
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) .e-con.ml-step > .e-con-inner{
grid-template-columns: 50px minmax(0, 1fr);
}
.ml-steps:not(.ml-steps-three):not(.ml-steps-four) .ml-step-no .elementor-heading-title{
width: 32px;
height: 32px;
font-size: 16px;
}
.ml-steps:not(.ml-steps-three):not(.ml-steps-four)
> .e-con-inner > .e-con.ml-step:not(:last-child):after{ left: 25px; }
}
/* =========================================================================
Editing & Proofreading: the three levels
The card itself is ml-svc, which every service card on the site already
uses. Only the badge and the "popular" state are new, and the CTA is
pushed to the foot so three cards of different lengths still line their
buttons up.
========================================================================= */
.e-con.ml-plan > .e-con-inner{
display: flex;
flex-direction: column;
height: 100%;
}
.ml-plan-badge .elementor-heading-title{
display: inline-block;
font-family: var(--ml-sans);
font-size: 12px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ml-accent-ink);
background: var(--ml-accent-tint, #D4E5E5);
border-radius: 999px;
padding: 5px 12px;
line-height: 1.4;
}
.ml-plan .ml-svc-title.elementor-widget{ margin-top: 14px; }
.ml-plan-cta.elementor-widget,
.e-con.ml-plan-cta{ margin-top: auto; padding-top: 22px; }
/* the level most clients take is stated, not just badged */
.e-con.ml-plan-on{
border-color: var(--e-global-color-primary);
box-shadow: 0 10px 30px rgba(69, 143, 44, .12);
}
/* The price, under the one-line description and above the tick list. The
figure is set in the serif at heading weight so it reads as the thing a
reader is looking for; the unit stays small and quiet beside it. Adam,
16 Sep 2026: the prices were on the old pages and the redesign dropped
them - they come straight from the live editing pages (EN per word in
USD, JA per word in yen). */
.ml-plan-price.elementor-widget{ margin-top: 14px; margin-bottom: 2px; }
.ml-plan-price p{ margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; }
.ml-plan-price .ml-plan-amt{
font-family: var(--ml-serif);
font-size: 34px;
font-weight: 600;
line-height: 1;
letter-spacing: -.01em;
color: var(--e-global-color-secondary);
}
.ml-plan-price .ml-plan-unit{
font-family: var(--ml-sans);
font-size: 14px;
color: var(--e-global-color-mlmuted, #7C8797);
}
/* the certification mark inside the first reason */
.ml-plan-badge-img.elementor-widget{ margin-top: 16px; }
.ml-plan-badge-img img{ max-width: 190px; height: auto; }
/* the two supporting photographs under the reasons */
.ml-edit-photos > .e-con-inner{ gap: 22px; }
.ml-edit-photo img{
width: 100%;
height: 260px;
object-fit: cover;
border-radius: var(--ml-radius);
}
@media (max-width: 767px){
.ml-edit-photo img{ height: 190px; }
}
/* =========================================================================
REPEATING CARDS: the geometry is a rule, not a coincidence
Cards in a row are stretched to a common height already. That is not
enough: whatever sits at the foot of each card has to start at the SAME
offset, or three quotes read as three different components. Anything that
varies in length gets a floor, so the block below it cannot move.
========================================================================= */
/* --- Quote cards ---------------------------------------------------------
The person block is bottom-aligned, but a one-line role made it 29px
shorter than a two-line one, so the name sat lower on that card. The
block now has a floor of its own and the role is held to two lines. */
.ml-quote .ml-quote-who{
min-height: 0;
align-items: center;
}
/* Two lines, always. Clamping alone was not enough: a one-line role left
that card's person block 19px shorter than its neighbours, so the name
sat lower. A floor in em rather than px, so it holds at any type size. */
/* Measured, not guessed: in a three-across row these roles run to THREE
lines, and a two-line one left that card's person block 19px shorter. The
display needs !important because something else sets it to flow-root and
the clamp was silently doing nothing. Three lines is both the floor and
the ceiling, so every role occupies the same space and none is cut. */
.ml-quote-role p{
display: -webkit-box !important;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 4.5em;
}
/* the card fills its cell so the foot is always the foot of the row */
.e-con.ml-card.ml-quote{ height: 100%; }
.e-con.ml-card.ml-quote > .e-con-inner{
display: flex;
flex-direction: column;
height: 100%;
}
/* --- Service and reason cards -------------------------------------------
Same rule: a card whose title wraps to two lines must not push its body
down relative to its neighbours. */
.e-con.ml-svc{ height: 100%; }
.e-con.ml-svc > .e-con-inner{
display: flex;
flex-direction: column;
height: 100%;
}
.ml-svc-title .elementor-heading-title{ min-height: 2.6em; }
.ml-svc-grid-three .ml-svc-title .elementor-heading-title,
.ml-three-up .ml-svc-title .elementor-heading-title{ min-height: 0; }
/* --- Language pair cards ------------------------------------------------ */
.e-con.ml-pair{ height: 100%; }
.e-con.ml-pair > .e-con-inner{
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
/* --- The same rule, applied to every card sub-block that can wrap --------
A line that is one line on one card and two on the next moves everything
under it. Each of these gets a floor in em, so the blocks below start at
the same offset whatever the words are. */
.ml-team-role .elementor-heading-title{ min-height: 3.5em; }
.ml-plan .ml-svc-note p{ min-height: 2.9em; }
.ml-pair-note p{ min-height: 2.8em; }
/* the team name too: identical geometry beats tight spacing, Vadym's call */
.ml-team-name .elementor-heading-title{ min-height: 2.5em; }
/* Service-card notes run two, three and four lines on the same row, which
moved each card's tick list to a different height. Floored at four lines,
measured off the Japanese editing page where the spread was widest.
Scoped to ml-svc-listed, the cards that actually carry a list under the
note. Applied to every service card it padded out cards that are nothing
but paragraphs - the industry pages - with a block of empty space after
each one. */
.ml-svc-listed .ml-svc-note p{ min-height: 6em; }
/* =========================================================================
The six industry pages - one layout, so one block of rules
========================================================================= */
/* The hero was words only: these pages carried no photograph of their own
and inventing one would have been worse than leaving the space to the
title. Each now has a real one beside the words - see "Industry pages: a
face, a client, and a way out" at the end of this file. */
.ml-ind-hero > .e-con-inner{ padding-top: 54px; padding-bottom: 54px; }
.ml-ind-hero-words > .e-con-inner{ padding: 0; max-width: 62rem; }
.ml-ind-hero .ml-hero-title.elementor-widget .elementor-heading-title{
font-size: clamp(30px, 3.6vw, 46px);
line-height: 1.18;
margin-top: 12px;
}
/* the line under the title lists what the page covers; it is a subheading,
so it is sized as one rather than as a caption */
.ml-ind-sub.elementor-widget{ margin-top: 14px; }
.ml-ind-sub .elementor-heading-title{
font-family: var(--ml-sans);
font-size: 17px;
font-weight: 600;
line-height: 1.5;
color: var(--ml-accent-ink);
}
.ml-ind-hero .ml-lead-body.elementor-widget{ margin-top: 18px; }
.ml-ind-hero .ml-lead-body p{ margin-left: 0; }
/* A case study that is real rather than a placeholder has no picture beside
it, so the card is one column and the words run the full width. */
.ml-cs-solo > .e-con-inner{
grid-template-columns: 1fr;
gap: 0;
}
.ml-cs-solo .ml-cs-val.elementor-widget + .ml-cs-val.elementor-widget{
margin-top: 12px;
}
.ml-cs-solo .ml-cs-head.elementor-widget{ margin-top: 8px; }
/* --- Legal pages ---------------------------------------------------------
Privacy Policy, Terms of Use and DMCA. Adam asked for "basic adaptation
to new site", so the words are untouched and only the frame is ours.
The document is one Text Editor widget, because a policy is a document
and he should be able to click into it and type. Everything below styles
what is inside that one widget, which is why the rules key off tag names
rather than classes: there are no classes to key off, and there should
not be - a heading he adds later has to look like the ones already there
without him having to know a class name.
Width is the point. The site's content column is 1100px, which is right
for cards and wrong for twenty-five paragraphs of prose: a line that long
is genuinely hard to follow back to the left margin. Legal text is capped
at 820px and centred. */
.ml-legal-hero > .e-con-inner{ display: block; }
/* Vadym: the heading sits on the left, not in the middle of the page. The
measure is still capped, so the block starts on the same line as every
other page's headline and simply stops short on the right. */
.ml-legal-head{ max-width: 820px; margin-left: 0; margin-right: auto; }
.ml-legal-head > .e-con-inner{ padding-left: 0; padding-right: 0; }
.ml-legal-hero .ml-hero-title.elementor-widget .elementor-heading-title{
font-size: clamp(32px, 4vw, 48px);
line-height: 1.15;
margin-top: 12px;
}
.ml-legal-hero .ml-hero-intro.elementor-widget{ margin-top: 18px; }
.ml-legal-updated.elementor-widget{
margin-top: 16px;
font-size: 14px;
color: var(--e-global-color-mlmuted);
}
.ml-legal-updated p{ font-size: inherit; color: inherit; margin-bottom: 0; }
/* Elementor caps every widget in a container with
`.e-con.e-con > .e-con-inner > .elementor-widget { max-width: 100% }`,
which is four classes and beats a two-class rule. A measure has to be
written in the same shape to hold. */
.e-con > .e-con-inner > .elementor-widget.ml-legal{
max-width: 820px;
margin-left: 0;
margin-right: auto;
}
.ml-legal p{
font-size: 16.5px;
line-height: 1.78;
color: var(--e-global-color-text);
margin: 0 0 18px;
}
.ml-legal h3{
font-family: var(--ml-serif);
font-size: 22px;
font-weight: 600;
line-height: 1.3;
color: var(--e-global-color-secondary);
margin: 38px 0 12px;
}
/* the first heading sits right under the rule, so it does not need the
full gap the ones between paragraphs do */
.ml-legal > *:first-child{ margin-top: 0; }
.ml-legal ul,
.ml-legal ol{
margin: 0 0 18px;
padding-left: 24px;
font-size: 16.5px;
line-height: 1.78;
color: var(--e-global-color-text);
}
.ml-legal li{ margin-bottom: 9px; }
.ml-legal li::marker{ color: var(--e-global-color-mlgreendark); }
.ml-legal strong{ color: var(--e-global-color-secondary); font-weight: 600; }
.ml-legal a{
color: var(--e-global-color-mlgreendark);
text-decoration: underline;
text-underline-offset: 3px;
overflow-wrap: anywhere; /* the policies quote full URLs inline */
}
.ml-legal a:hover{ color: var(--e-global-color-primary); }
/* --- The agency issue cards ----------------------------------------------
Twelve of them, two to a row, each carrying the agency's problem and then
what Agency Assist does about it. The ask card gives the shape; these
rules add the second half and hold the two halves of every pair of cards
on the same lines.
The headings run to one line or two depending on the challenge, so the
card that follows a one-line heading would otherwise start its problem
text a line higher than its neighbour. The floor is the measured height
of two lines at this size. */
.e-con.ml-issue > .e-con-inner{ height: 100%; }
.ml-issue .ml-ask-q .elementor-heading-title{ min-height: 2.6em; }
.ml-issue .ml-ask-a p{ min-height: 5.2em; }
/* the answer is separated from the problem by a hairline rather than by a
panel: a tinted block inside a card that already has its own ground
reads as a card inside a card */
/* ml-ask-split is the hairline on its own, for a card whose titles are
short: ml-issue also holds a 2.6em floor under the title, which keeps a
row of long headings level and leaves an empty line on a card whose
heading is one line. Academia's pain points are short, so they take the
separator without the floor. */
.ml-issue .ml-cs-key.elementor-widget,
.ml-ask-split .ml-cs-key.elementor-widget{
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--ml-line-2);
}
.ml-issue .ml-cs-val.elementor-widget,
.ml-ask-split .ml-cs-val.elementor-widget{ margin-top: 8px; }
.ml-issue .ml-cs-val p,
.ml-ask-split .ml-cs-val p{ margin-bottom: 0; }
/* --- The blog index ------------------------------------------------------
/blog/ and /ja/blog/ are WordPress's posts page, so this is an Archive
template rather than a page. The head reads like every other page's head;
the grid below it is one Loop Grid widget repeating loop item 19709, the
same card the homepage uses. */
.ml-archive-hero > .e-con-inner{ display: block; }
.ml-archive-head{ max-width: 820px; margin-left: 0; margin-right: auto; }
.ml-archive-head > .e-con-inner{ padding-left: 0; padding-right: 0; }
.ml-archive-hero .ml-hero-title.elementor-widget .elementor-heading-title{
font-size: clamp(32px, 4vw, 48px);
line-height: 1.15;
margin-top: 12px;
}
.ml-archive-hero .ml-hero-intro.elementor-widget{ margin-top: 18px; }
/* Numbered pagination. Elementor draws it as a row of links with no styling
of its own worth keeping; this makes it read as part of the site. */
.ml-posts-archive .elementor-pagination{
margin-top: 46px;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
font-family: var(--ml-sans);
}
.ml-posts-archive .elementor-pagination .page-numbers{
min-width: 40px;
height: 40px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--ml-line-2);
border-radius: 10px;
font-size: 14.5px;
font-weight: 600;
color: var(--e-global-color-text);
text-decoration: none;
transition: background-color .15s, border-color .15s, color .15s;
}
.ml-posts-archive .elementor-pagination .page-numbers:hover{
border-color: var(--e-global-color-primary);
color: var(--e-global-color-mlgreendark);
}
.ml-posts-archive .elementor-pagination .page-numbers.current{
background: var(--e-global-color-primary);
border-color: var(--e-global-color-primary);
color: #fff;
}
.ml-posts-archive .elementor-pagination .page-numbers.dots{
border-color: transparent;
}
/* --- One post ------------------------------------------------------------
A Single Post template, so all 108 posts take it at once. Not one word of
any post changes: the template only decides how the words are set.
Measure first. A post at the site's 1100px content width runs to roughly
140 characters a line, which is about twice what a reader can follow back
to the left margin. The article is capped at 780px and, like the legal
pages, sits on the left rather than in the middle of the page. */
.ml-article-hero > .e-con-inner{ display: block; }
.ml-article-head{ max-width: 780px; margin-left: 0; margin-right: auto; }
.ml-article-head > .e-con-inner{ padding-left: 0; padding-right: 0; }
/* Vadym, having seen both: "it was better without bullets, looked way
better, but should be teal, and also the date". So no pills here - the
categories and the date are one line of bold teal capitals above the
title, with a fat dot between them, and the author stays underneath in
the quiet grey. */
.ml-post-cats.elementor-widget{ margin-bottom: 14px; }
.ml-post-cats .elementor-icon-list-icon,
.ml-post-cats .elementor-icon-list-icon svg,
.ml-post-cats .elementor-post-info__terms-list svg{ display: none !important; }
.ml-post-cats .elementor-post-info__terms-list-item:after{ content: none !important; }
.ml-post-cats .elementor-icon-list-items{ align-items: baseline; gap: 0; }
.ml-post-cats .elementor-icon-list-item{ margin: 0 !important; padding: 0; }
.ml-post-cats .elementor-icon-list-text,
.ml-post-cats .elementor-post-info__item,
.ml-post-cats .elementor-post-info__terms-list-item{
font-family: var(--ml-sans);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--ml-accent-ink);
}
/* Elementor joins the terms with a comma written as a text node between the
spans, which no .elementor-kit-712 can reach. Collapsing the list to font-size 0 and
giving each term its own size is how the commas go and the dots stay. */
.ml-post-cats .elementor-post-info__terms-list{ font-size: 0; }
/* one dot between two categories, and one between the last category and
the date; never a leading or trailing one */
.ml-post-cats .elementor-post-info__terms-list-item + .elementor-post-info__terms-list-item:before,
.ml-post-cats .elementor-icon-list-item + .elementor-icon-list-item:before{
content: "•";
display: inline-block;
margin: 0 9px;
font-size: 13px;
font-weight: 700;
line-height: 1;
position: relative;
top: -1px;
color: var(--ml-accent-line);
}
/* the author, under the title */
.ml-post-byline.elementor-widget{ margin-top: 16px; }
.ml-post-byline .elementor-icon-list-icon{ display: none; }
.ml-post-byline .elementor-icon-list-item{ margin: 0 !important; padding: 0; }
.ml-post-byline .elementor-icon-list-text,
.ml-post-byline .elementor-post-info__item{
font-family: var(--ml-sans);
font-size: 14.5px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
color: var(--e-global-color-secondary);
}
/* a hairline closes the header and opens the picture, so the two read as
one block rather than as a title floating above a photograph */
.ml-article-hero{ border-bottom: 1px solid var(--e-global-color-mlline); }
/* The picture sits on the same left edge as the text and runs wider, so the
article reads as one column with a picture set into it rather than as two
blocks that happen to be near each other. Written in Elementor's own
shape, or its `max-width: 100%` on every widget wins. */
.e-con > .e-con-inner > .elementor-widget.ml-article-photo{
width: 100%;
max-width: var(--ml-content-width);
margin: 26px auto 0 0;
}
.elementor-widget.ml-article-photo img{
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--ml-radius);
display: block;
}
/* The body. Like the legal pages this is one widget whose contents are the
client's own markup, so the rules key off tag names: a heading Adam adds
to a post next year has to look right without him knowing a class. */
.e-con > .e-con-inner > .elementor-widget.ml-article{
max-width: 780px;
margin-left: 0;
margin-right: auto;
}
.ml-article p,
.ml-article li{
font-size: 17.5px;
line-height: 1.78;
color: var(--e-global-color-text);
}
.ml-article p{ margin: 0 0 22px; }
.ml-article h2,
.ml-article h3,
.ml-article h4{
font-family: var(--ml-serif);
color: var(--e-global-color-secondary);
line-height: 1.24;
letter-spacing: -.01em;
}
.ml-article h2{ font-size: 30px; font-weight: 600; margin: 48px 0 16px; }
.ml-article h3{ font-size: 23px; font-weight: 600; margin: 38px 0 12px; }
.ml-article h4{ font-size: 19px; font-weight: 600; margin: 30px 0 10px; }
.ml-article > *:first-child{ margin-top: 0; }
.ml-article ul,
.ml-article ol{ margin: 0 0 22px; padding-left: 26px; }
.ml-article li{ margin-bottom: 10px; }
.ml-article li::marker{ color: var(--e-global-color-mlgreendark); }
.ml-article a{
color: var(--e-global-color-mlgreendark);
text-decoration: underline;
text-underline-offset: 3px;
overflow-wrap: anywhere;
}
.ml-article a:hover{ color: var(--e-global-color-primary); }
.ml-article strong{ color: var(--e-global-color-secondary); font-weight: 600; }
.ml-article img{
max-width: 100%;
height: auto;
border-radius: var(--ml-radius);
display: block;
margin: 28px 0;
}
.ml-article figure{ margin: 28px 0; }
.ml-article figcaption{
font-family: var(--ml-sans);
font-size: 14px;
color: var(--e-global-color-mlmuted);
margin-top: 10px;
}
.ml-article blockquote{
margin: 30px 0;
padding: 4px 0 4px 24px;
border-left: 3px solid var(--e-global-color-primary);
font-family: var(--ml-serif);
font-size: 20px;
line-height: 1.55;
color: var(--e-global-color-secondary);
}
.ml-article blockquote p{ font: inherit; color: inherit; margin-bottom: 0; }
/* a post may carry a table; it scrolls rather than pushing the page wide */
.ml-article table{
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 15.5px;
margin: 28px 0;
}
.ml-article table th,
.ml-article table td{
border: 1px solid var(--ml-grid);
padding: 11px 14px;
text-align: left;
vertical-align: top;
}
.ml-article table th{
background: var(--e-global-color-mlwarm);
color: var(--e-global-color-secondary);
font-weight: 600;
}
.ml-article pre,
.ml-article code{
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 14.5px;
}
.ml-article pre{
background: var(--e-global-color-mlwarm);
border: 1px solid var(--ml-line-2);
border-radius: 14px;
padding: 18px 20px;
overflow-x: auto;
margin: 26px 0;
}
.ml-article hr{
border: 0;
border-top: 1px solid var(--e-global-color-mlline);
margin: 40px 0;
}
/* the Japanese posts take the Japanese faces, the same way the pages do */
html[lang^="ja"] .ml-article h2,
html[lang^="ja"] .ml-article h3,
html[lang^="ja"] .ml-article h4{
font-family: var(--e-global-typography-primary-font-family),
"Newsreader stand-in", "Noto Serif JP", Georgia, serif;
}
html[lang^="ja"] .ml-article p,
html[lang^="ja"] .ml-article li{ line-height: 1.95; }
@media (max-width: 767px){
.ml-article p, .ml-article li{ font-size: 16.5px; }
.ml-article h2{ font-size: 25px; margin-top: 38px; }
.ml-article h3{ font-size: 20px; margin-top: 30px; }
}
/* --- Two corrections from Vadym, 11 Sep 2026 -----------------------------
1. Green on a blue band.
`.ml-svc-list` draws its tick in a mint disc with green ink, and it did so
on a blue band too - which breaks the rule that a coloured ground is a
themed section. The blue-band block already recolours `.ml-ticks`, but
the service lists are a different component and were never covered; it
only became visible when the AI-JX and Agency Assist pages put a list
inside a blue section for the first time. A probe now sweeps every blue
band for the green tokens, so the next component to do this is caught
before it ships rather than after. */
.ml-band-blue .ml-svc-list .elementor-icon-list-icon{
background: rgba(47, 111, 214, .13);
color: var(--e-global-color-accent);
}
.ml-band-blue .ml-svc-list .elementor-icon-list-icon svg,
.ml-band-blue .ml-svc-list .elementor-icon-list-icon i{
color: var(--e-global-color-accent);
fill: var(--e-global-color-accent);
}
/* 2. A card that links somewhere is a link.
On the industry hub the whole card should be clickable, with the cursor
and the hover to say so, not just the small arrow line at its foot. The
link is still an ordinary Button widget in the panel - Adam edits its
words and its destination the way he would anywhere else - and the rule
below simply stretches that one anchor over the card it sits in. Scoped
to `ml-svc-linked`, because a card with no link must not get a pointer. */
.ml-svc-linked .e-con.ml-svc{ position: relative; transition: border-color .16s, box-shadow .16s, transform .16s; }
/* Elementor gives every widget wrapper `position: relative`, so the anchor's
stretched pseudo-element resolved against the little link box rather than
against the card - 231x26 instead of the whole 192px tall card. Inside a
linked card that one wrapper goes static, and the card is the only
positioned ancestor left. */
.ml-svc-linked .e-con.ml-svc .ml-arrow-link.elementor-widget{ position: static; }
.ml-svc-linked .e-con.ml-svc .ml-arrow-link a:after{
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
}
.ml-svc-linked .e-con.ml-svc:hover{
border-color: var(--e-global-color-primary);
box-shadow: 0 10px 28px rgba(34, 50, 74, .08);
transform: translateY(-2px);
cursor: pointer;
}
.ml-svc-linked .e-con.ml-svc:hover .ml-svc-title .elementor-heading-title{
color: var(--e-global-color-mlgreendark);
}
/* on a blue band the hover is blue, like everything else there */
.ml-band-blue .ml-svc-linked .e-con.ml-svc:hover{
border-color: var(--e-global-color-accent);
}
.ml-band-blue .ml-svc-linked .e-con.ml-svc:hover .ml-svc-title .elementor-heading-title{
color: var(--e-global-color-accent);
}
/* the anchor's own focus ring has to show on the card, not behind it */
.ml-svc-linked .e-con.ml-svc:focus-within{
border-color: var(--e-global-color-primary);
box-shadow: 0 0 0 3px rgba(84, 180, 53, .22);
}
/* --- The PR diagnostic landing page, 18589 -------------------------------
The page is one HTML widget holding a complete Tailwind document, and
that document brought its own header and footer: a bare logo with a
button at the top, and at the foot a different column structure with
"QUICK LINKS" in English on a Japanese page and emoji in the link list.
It was a deliberate Elementor Canvas landing page, so the site's own
chrome never appeared and the reader met two different MacroLingos.
The page now uses the ordinary page template, so the real header, the
language switcher and the real footer are there. The document's own
header and footer are hidden rather than deleted: nothing is lost, and
if Adam wants the distraction-free version back it is this rule and one
template setting. */
body.page-id-18589 .elementor-widget-html header,
body.page-id-18589 .elementor-widget-html footer{ display: none !important; }
/* its stand-in paints a ground of its own that would otherwise run
under the site header */
body.page-id-18589 .elementor-widget-html > .elementor-widget-container{
background: transparent;
}
/* the statistic labels are Japanese in a narrow column; break them on
phrase boundaries where the browser can, rather than mid-word */
body.page-id-18589 .elementor-widget-html .text-xs,
body.page-id-18589 .elementor-widget-html .text-[11px]{
word-break: auto-phrase;
overflow-wrap: anywhere;
}
/* the column headings on a blue band, same rule: no green on blue */
.ml-band-blue .ml-colhead .elementor-heading-title{
color: var(--e-global-color-secondary);
}
/* --- Inside a post: the blocks Adam's own writing already uses -----------
The single-post template sets the words; these rules give the two
structures that recur inside them a shape, without editing one post.
1. A labelled list. Thirteen posts open with a bold line - "Takeaways",
"Key Takeaways:", "📌 Three Takeaways:" - and then a list. In plain
body type that summary looks like any other paragraph, which is the
one thing it is not. The rule matches the shape rather than the
words: a paragraph that is nothing but bold text, immediately
followed by a list. That is a labelled summary wherever it appears,
so a post that uses the same shape for something else is improved
too rather than broken. */
.ml-article p:has(> strong:only-child):has(+ ul),
.ml-article p:has(> strong:only-child):has(+ ol){
margin: 34px 0 0;
padding: 20px 24px 12px;
background: var(--e-global-color-mlwarm);
border-left: 3px solid var(--e-global-color-primary);
border-radius: 14px 14px 0 0;
}
.ml-article p:has(> strong:only-child):has(+ ul) strong,
.ml-article p:has(> strong:only-child):has(+ ol) strong{
font-family: var(--ml-sans);
font-size: 13px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ml-accent-ink);
}
.ml-article p:has(> strong:only-child) + ul,
.ml-article p:has(> strong:only-child) + ol{
margin: 0 0 34px;
padding: 0 24px 22px 48px;
background: var(--e-global-color-mlwarm);
border-left: 3px solid var(--e-global-color-primary);
border-radius: 0 0 14px 14px;
}
.ml-article p:has(> strong:only-child) + ul li:last-child,
.ml-article p:has(> strong:only-child) + ol li:last-child{ margin-bottom: 0; }
/* 2. The table of contents. Twenty posts carry one, written by two
different plugins - Rank Math on five and Easy TOC on the rest - each
with its own idea of what a list of links looks like. Both are set
here as the same quiet box, so a reader moving between posts does not
meet two different designs. */
.ml-article .wp-block-rank-math-toc-block,
.ml-article #ez-toc-container{
margin: 34px 0;
padding: 22px 26px;
background: #fff;
border: 1px solid var(--ml-line-2);
border-radius: 16px;
box-shadow: none;
float: none;
width: auto;
}
.ml-article .wp-block-rank-math-toc-block h2,
.ml-article #ez-toc-container .ez-toc-title{
font-family: var(--ml-sans);
font-size: 13px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ml-accent-ink);
margin: 0 0 12px;
}
.ml-article .wp-block-rank-math-toc-block ul,
.ml-article #ez-toc-container ul{
margin: 0;
padding-left: 20px;
list-style: none;
}
.ml-article .wp-block-rank-math-toc-block li,
.ml-article #ez-toc-container li{
position: relative;
margin-bottom: 7px;
font-size: 15.5px;
line-height: 1.6;
}
.ml-article .wp-block-rank-math-toc-block li:before,
.ml-article #ez-toc-container li:before{
content: "";
position: absolute;
left: -16px;
top: .62em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ml-accent-line);
}
.ml-article .wp-block-rank-math-toc-block a,
.ml-article #ez-toc-container a{
color: var(--e-global-color-text);
text-decoration: none;
}
.ml-article .wp-block-rank-math-toc-block a:hover,
.ml-article #ez-toc-container a:hover{
color: var(--e-global-color-mlgreendark);
text-decoration: underline;
text-underline-offset: 3px;
}
/* the toggle Easy TOC draws in the corner */
.ml-article #ez-toc-container .ez-toc-title-container{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.ml-article #ez-toc-container .ez-toc-btn{ background: none; border: 0; padding: 0; }
.ml-article #ez-toc-container svg{ fill: var(--e-global-color-mlmuted); }
/* A third plugin, Gutentoc, writes the contents box on the newer Japanese
posts, and none of the above reached it: it kept its own grey table with
a hairline border (Vadym caught it, 13 Sep 2026). Same quiet box here.
Its show/hide toggle is dropped and the list always shown: the toggle is
in English on Japanese posts and its label runs one click out of step
with the list ("show" while the list is open). */
.ml-article .gutentoc{
display: block;
max-width: none !important;
margin: 34px 0;
padding: 22px 26px;
background: #fff;
border: 1px solid var(--ml-line-2);
border-radius: 16px;
box-shadow: none;
}
.ml-article .gutentoc .gutentoc-toc-title-wrap{ display: block; margin: 0 0 12px; }
.ml-article .gutentoc .gutentoc-toc-title{
display: block;
font-family: var(--ml-sans);
font-size: 13px;
font-weight: 700;
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ml-accent-ink);
}
.ml-article .gutentoc .text_open{ display: none !important; }
.ml-article .gutentoc #toclist{ display: block !important; }
.ml-article .gutentoc ul{
margin: 0 !important;
padding: 0 0 0 20px !important;
list-style: none;
}
/* the plugin nests a sub-list as a sibling of its parent item, not inside
it, so the indent is given to that list rather than to a child li */
.ml-article .gutentoc ul ul{ margin: 0 0 7px !important; }
.ml-article .gutentoc li{
position: relative;
margin: 0 0 7px;
font-size: 15.5px;
line-height: 1.6;
list-style: none;
}
.ml-article .gutentoc li:before{
content: "";
position: absolute;
left: -16px;
top: .62em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ml-accent-line);
}
.ml-article .gutentoc ul ul li:before{ background: var(--ml-line-2); }
.ml-article .gutentoc a{
color: var(--e-global-color-text);
text-decoration: none;
}
.ml-article .gutentoc a:hover{
color: var(--e-global-color-mlgreendark);
text-decoration: underline;
text-underline-offset: 3px;
}
/* --- The categories on a blog card ---------------------------------------
A post can be filed under five categories, and the card used to draw the
first one only - so which of the five a reader saw was whichever came
first in the list, which is not a decision anybody made. Up to three are
drawn now, as small pills, which is honest about the post belonging to
several and reads as a tag row rather than as a label that means
something. A primary category per post is still Adam's call to make. */
.ml-post-cat .elementor-post-info__terms-list{ font-size: 0; }
.ml-post-cat .elementor-post-info__terms-list-item{
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
line-height: 1.7;
color: var(--ml-accent-ink);
}
.ml-post-cat .elementor-post-info__terms-list-item:nth-child(-n + 3){ display: inline; }
.ml-post-cat .elementor-post-info__terms-list-item:nth-child(n + 4){ display: none !important; }
/* The fat dot goes between two categories and nowhere else. The first
attempt used nth-child arithmetic and put one in front of the first term
as well; a sibling combinator says what is actually meant - a dot before
any term that follows another one. */
.ml-post-cat .elementor-post-info__terms-list-item:after{ content: none !important; }
.ml-post-cat .elementor-post-info__terms-list-item + .elementor-post-info__terms-list-item:before{
content: "•";
display: inline-block;
margin: 0 9px;
font-size: 13px;
font-weight: 700;
line-height: 1;
position: relative;
top: -1px;
color: var(--ml-accent-line);
}
/* Elementor draws a tag glyph in front of the list whatever show_icon says */
.ml-post-cat .elementor-icon-list-icon,
.ml-post-cat .elementor-icon-list-icon svg,
.ml-post-cat .elementor-post-info__terms-list svg{ display: none !important; }
/* One card carries one category and its neighbour carries three, so the
pill row is one line on one and two on the other, and the two titles
start nineteen pixels apart. A row of cards holds the same geometry: the
pill row gets the floor of the taller case, measured, so every title in
a row begins on the same line. */
.ml-post-cat.elementor-widget{ min-height: 48px; }
/* On the Japanese index the three columns came out 366 / 365 / 396 wide,
so the third card's picture was eighteen pixels taller than its
neighbours' and its title started lower. `1fr` is `minmax(auto, 1fr)`,
and a Japanese line has no spaces to break at, so one long string sets a
min-content wider than the track's share and the track grows to fit.
`minmax(0, 1fr)` lets the text wrap instead. The column count is
Elementor's own variable, so the widget's 3 / 2 / 1 setting still rules. */
.ml-posts .elementor-grid{
grid-template-columns: repeat(var(--grid-columns, 3), minmax(0, 1fr)) !important;
}
.ml-posts .elementor-grid > *{ min-width: 0; }
.ml-jp .ml-post-title .elementor-heading-title,
html[lang^="ja"] .ml-post-title .elementor-heading-title,
html[lang^="ja"] .ml-post-excerpt .elementor-heading-title{
word-break: auto-phrase;
overflow-wrap: anywhere;
}
/* One date per language. WordPress keeps a single date format for the whole
site, so a Japanese post read "1月 2, 2026" - the English shape with a
Japanese month dropped into it. The template carries both and the wrong
one is hidden by its repeater id, the same way ml-only-en works for
ordinary widgets. The separator still draws once: a hidden item renders
no pseudo-element. */
html[lang^="ja"] .ml-post-cats .elementor-repeater-item-pidateen,
html[lang^="ja"] .ml-post-byline .elementor-repeater-item-pidateen{ display: none !important; }
html[lang^="en"] .ml-post-cats .elementor-repeater-item-pidateja,
html[lang^="en"] .ml-post-byline .elementor-repeater-item-pidateja{ display: none !important; }
/* --- The blog cards, after Vadym saw the pills ---------------------------
"id prefer just plain bold teal text instead of this bullets and
separting different topics with a fat dot between them, also blog cards
should be a little bit wider, and header text should be bold, all of
this changes should be as well as on blog page also on home"
So: no pills anywhere, bold teal capitals with a fat dot between two
categories, a bolder title, and more room. The grid runs wider than the
site's 1100px column - on the index and on the homepage's Latest
insights alike, because they are the same card and should not drift
apart. Written in Elementor's own shape, or its widget cap wins. */
.e-con > .e-con-inner > .elementor-widget.ml-posts,
.e-con > .elementor-widget.ml-posts{
width: min(100%, 1280px);
max-width: min(100%, 1280px);
margin-left: auto;
margin-right: auto;
}
/* A section marked ml-wide runs wider than the site's 1100px column. It is
a class on the section, so it shows in Elementor under Advanced > CSS
Classes and can be taken off there to put the section back to the normal
width - which is the point: the first version of this was a structural
`:has()` .elementor-kit-712, and it silently missed the homepage because the
homepage builders keep their own copy of `section()` that does not add
`ml-inner`. A class says what it does and cannot miss. */
.ml-wide > .e-con-inner{
width: min(100%, 1280px);
max-width: 1280px;
}
/* the card title carries the weight now that the category line is quieter */
.ml-post-title .elementor-heading-title,
.ml-post-title h3.elementor-heading-title,
.ml-post-title .elementor-heading-title a{ font-weight: 700; }
/* the pill row is gone, so the floor that held two rows of pills goes too:
one line of capitals is one line on every card */
.ml-post-cat.elementor-widget{ min-height: 0; }
/* The category line on a card is one line on every card, always. Three
categories with dots between them ran to two lines on some cards and one
on others, which put the titles in a row nineteen pixels apart. Two are
shown, on one line, and the rare long pair ends in an ellipsis rather
than pushing everything below it down. The post's own page shows the
full set. */
.ml-post-cat .elementor-post-info__terms-list-item:nth-child(n + 3){ display: none !important; }
.ml-post-cat .elementor-icon-list-text,
.ml-post-cat .elementor-post-info__item{
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.ml-post-cat.elementor-widget{ min-height: 30px; }
/* --- Show more, instead of page numbers ----------------------------------
The index loads the next nine posts underneath. Elementor's button holds
one label and the template serves both languages, so the Japanese label
is drawn in place of the English one rather than duplicated. */
.ml-posts-archive .elementor-button{
font-family: var(--ml-sans);
font-size: 15px;
font-weight: 600;
}
/* The label is hidden outright and the Japanese one drawn on the button
itself. Setting the span to font-size 0 and putting the text in its own
::after collapsed the button to 21px: a pseudo-element inside a
zero-sized parent does not give the parent its width back. */
/* Scoped to the load-more button itself. Written against every button in
the archive, it also reached the read-more link inside each card: the
card lost its 続きを読む and the link's full-card ::after overlay drew
もっと見る across the middle of the card (caught 13 Sep 2026). */
html[lang^="ja"] .ml-posts-archive .e-loop__load-more .elementor-button-text{ display: none; }
html[lang^="ja"] .ml-posts-archive .e-loop__load-more .elementor-button:after{
content: "もっと見る";
font-size: 15px;
font-weight: 600;
letter-spacing: .02em;
}
/* The archive template's own generated stylesheet loads after the kit and
sets the card title from the global typography weight, with a .elementor-kit-712
carrying its document id - so a plain class rule loses and the titles on
the index stayed at 500 while the same card on a post page was at 700.
Named again here, and stated, so the two never drift apart. */
.ml-post-title .elementor-heading-title,
.ml-post-title h3.elementor-heading-title,
.ml-post-title .elementor-heading-title a{ font-weight: 700 !important; }
/* The loop item on the index carried 20px of side padding and the one on
the homepage did not, so the same card came out 369px in one place and
409px in the other. The card is the thing with a width; its wrapper has
none. */
.ml-posts .e-loop-item{ padding-left: 0; padding-right: 0; }
/* --- Team cards ----------------------------------------------------------
Three people on MacroLingo Academia, and two on JX: a round portrait, a
name, what they do, a paragraph, and a link to their profile.
It is deliberately the quote card's furniture rather than a new one. The
difference is where the person block sits: a testimonial is the words
first and the person underneath, so `.ml-quote .ml-quote-who` is pushed
to the foot with margin-top:auto and given a rule above it. A team card
is the person first, so this card is `ml-person` instead of `ml-quote`
and that rule never applies - nothing has to be undone.
The profile link is pushed to the foot instead, so three cards of
different bio lengths still line their links up. */
.e-con.ml-person{ height: 100%; }
.e-con.ml-person > .e-con-inner{
display: flex;
flex-direction: column;
height: 100%;
}
.ml-person-who{ padding-bottom: 16px; }
.ml-person-role p{
font-size: 13.5px;
line-height: 1.5;
color: var(--e-global-color-text);
margin-bottom: 0;
}
.ml-person .ml-person-link.elementor-widget{ margin-top: auto; padding-top: 18px; }
/* The three things that come of a JX programme, listed under the sample
plan rather than beside it, so the plan reads as the cause and these as
the effect. */
.ml-outcomes.elementor-widget{ margin-top: 30px; }
/* --- A card that ends on a link ------------------------------------------
A service card may close on "read the page that covers this properly".
The list above it is a different length in every card, so without this
the links in a row sit at three different heights. Pushing the link to
the foot lines them up, and the card already fills its cell. */
.e-con.ml-svc > .e-con-inner > .ml-arrow-link.elementor-widget{
margin-top: auto;
padding-top: 16px;
}
/* --- A band that says one thing ------------------------------------------
Two industry pages carry a heading here with no paragraph under it, and
his own page has none to give. At full section padding that reads as a
section whose text failed to load - measured 370px of band for two lines
of type. Closed down, the same heading reads as a deliberate statement
between two sections. */
.ml-inner.ml-statement{
padding-top: 54px !important;
padding-bottom: 54px !important;
}
.ml-statement .ml-section-head.e-con{ padding-bottom: 0 !important; }
/* --- Case study: the photo takes a corner, the words take the rest -------
Vadym, 13 Sep 2026: "case study text is locked to the left side, it
cannot go under the photo currently so there's a lot of blank space, fix
it so the photo zone is limited."
The card was a two-column grid, so however long a case study ran, its
words were held to half the card and the space under the photograph sat
empty. Now the photograph is floated into the top-right corner at a fixed
share of the card, and the words run beside it and then on under it at
the full width.
A float only wraps text that comes after it, so the picture has to be the
first thing in the card - it was moved there in the editor on every case
study, which changes nothing else about either half. The rule is written
against that order (`:first-child`), so a card still in the old order
keeps the old grid instead of breaking.
Every box in the words half is set to plain block flow: a flex box sits
beside a float as one solid block and would still leave the gap; a block
lets each line of text find its own width. */
@media (min-width: 768px){
.ml-cs > .e-con-inner:has(> .ml-cs-pic:first-child){
display: block !important;
}
.ml-cs > .e-con-inner:has(> .ml-cs-pic:first-child)::after{
content: "";
display: table;
clear: both;
}
.ml-cs > .e-con-inner > .ml-cs-pic.e-con:first-child{
float: right;
width: 40% !important;
max-width: 440px;
margin: 4px 0 20px 40px !important;
}
.ml-cs > .e-con-inner > .ml-cs-pic:first-child + .ml-cs-words.e-con,
.ml-cs > .e-con-inner > .ml-cs-pic:first-child + .ml-cs-words > .e-con-inner,
.ml-cs > .e-con-inner > .ml-cs-pic:first-child + .ml-cs-words .ml-cs-row.e-con,
.ml-cs > .e-con-inner > .ml-cs-pic:first-child + .ml-cs-words .ml-cs-row > .e-con-inner{
display: block !important;
width: auto !important;
/* a boxed container caps its inner box at the content width and centres
it; in plain block flow that left every row 1008px wide in a 1028px
column, 10px in from the heading above it */
max-width: none !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* The theme sets `clear: both` on every h1-h6, so each heading in the
words - the title, and every row's key - jumped to below the photo and
took all the text after it along. Inside this card a heading must not
clear the float. */
.ml-cs > .e-con-inner > .ml-cs-pic:first-child + .ml-cs-words :is(h1, h2, h3, h4, h5, h6){
clear: none !important;
}
/* the photo zone is a fixed shape, so a tall portrait cannot push the
corner down the whole card */
.ml-cs > .e-con-inner > .ml-cs-pic:first-child img{
width: 100%;
aspect-ratio: 4 / 3;
height: auto;
min-height: 0;
object-fit: cover;
}
}
@media (min-width: 768px) and (max-width: 1024px){
.ml-cs > .e-con-inner > .ml-cs-pic.e-con:first-child{
width: 44% !important;
margin-left: 28px !important;
}
}
/* --- Two figures, the same distance either side of their divider --------
Vadym, 13 Sep 2026, on Our Work: "3000 and 15 should be on the same
distance from divider, because 15 is very far currently."
The row is a grid of three equal thirds - figure, hairline, figure - and
each child sits at the left of its third. So the hairline was at the
start of the middle third: 89px after "3,000+" and 195px before "15+".
Sized to their content instead, with one gap either side, the two figures
sit exactly the same distance from the line. The centred row on the
Localization page (ml-stats-centred) has its own layout and is left
alone; on a phone the figures stack as before. */
@media (min-width: 768px){
.ml-stats:not(.ml-stats-centred) > .e-con-inner{
grid-template-columns: max-content 1px max-content !important;
justify-content: start !important;
column-gap: 36px !important;
align-items: center;
}
.ml-stats:not(.ml-stats-centred) > .e-con-inner > .e-con{ width: auto !important; }
/* The label under "3,000+" is wider than the figure, so with both blocks
left-aligned the number itself still sat 13px further from the line
than "15+". The first figure reads from the right instead, so the two
numbers face the line from the same distance, a mirrored pair. */
.ml-stats:not(.ml-stats-centred) > .e-con-inner > .ml-stat:first-child .elementor-heading-title,
.ml-stats:not(.ml-stats-centred) > .e-con-inner > .ml-stat:first-child p{
text-align: right !important;
}
}
/* --- Japanese line breaking, the whole site (14 Sep 2026) -----------------
A line-by-line measurement of every Japanese page at three widths found
the same three faults everywhere, all of them the browser's defaults:
1. lines starting with ー or a small kana (コミ / ュニケーション,
ハ / ードル). Japanese typesetting forbids that; `line-break: strict`
is the rule set that does.
2. words cut in half outside the headings - list items, buttons, card
text, labels, the FAQ questions, the quiz page (最適 / 化, 権 / 利).
The heading rule above only reached .elementor-heading-title, so the
same phrase-aware breaking is given to every short piece of text.
Running text in a blog article keeps ordinary breaking.
3. one or two characters alone on a last line (…しま / す。). `text-wrap:
pretty` lets the browser move a word down so the last line is not a
stub; it changes nothing else about the paragraph.
No text is changed by any of this. overflow-wrap: break-word is the
safety net for a phrase longer than its box; unlike `anywhere` it does
not let a flex or grid column shrink below the longest phrase. */
html[lang^="ja"] body{ line-break: strict; }
html[lang^="ja"] [data-elementor-type] :is(h1,h2,h3,h4,h5,h6,th,td,dt,dd,label,summary,figcaption,
.elementor-button-text,.elementor-icon-list-text,.elementor-counter-title,.elementor-heading-title),
html[lang^="ja"] [data-elementor-type] li:not(.ml-article *),
html[lang^="ja"] [data-elementor-type] .e-con.e-child .e-con.e-child p:not(.ml-article *),
html[lang^="ja"] .ml-article :is(h1,h2,h3,h4,h5,h6,th,td,figcaption){
word-break: auto-phrase;
overflow-wrap: break-word;
}
/* A paragraph at full measure on a wide screen keeps ordinary Japanese
breaking: phrase breaks over forty characters leave a ragged right edge
a reader notices. The rule above still reaches a paragraph inside a card
(two nested boxes deep), where lines are short. On a phone every line is
short, so every paragraph breaks by phrase there. */
@media (max-width: 767px){
html[lang^="ja"] [data-elementor-type] p:not(.ml-article *){ word-break: auto-phrase; overflow-wrap: break-word; }
}
html[lang^="ja"] :is(p,li,dd,blockquote,figcaption){ text-wrap: pretty; }
/* The same two faults in English, milder: a heading inside a text block or
a blog article ends on a single word (…is 100% / Unaware), and a paragraph
ends on one short word. Elementor heading widgets already balance their
lines (see the heading rules at the top); these headings are not heading
widgets, so they did not. */
[data-elementor-type] .elementor-widget-text-editor :is(h2,h3,h4,h5){ text-wrap: balance; }
/* not in a blog post: Adam, 14 Sep 2026, "why does this subheading break in
the middle? but others don't" - balance halves a two-line heading, which
in a long article reads as a break in the wrong place. Pretty only stops
the lone last word. */
[data-elementor-type] .ml-article :is(h2,h3,h4,h5){ text-wrap: pretty; }
[data-elementor-type] :is(p,li){ text-wrap: pretty; }
/* The PR score quiz is one HTML widget, so its narrow cards are not "two
boxes deep" and kept ordinary breaking: 評価し / ます。 on four cards.
Chrome's text-wrap: pretty does nothing for Japanese broken between
characters; breaking by phrase is what brings the verb back up. */
html[lang^="ja"] .elementor-widget-html :is(p,li,h3,h4){ word-break: auto-phrase; overflow-wrap: break-word; }
/* --- Scholarly AI Tool Finder (/ai-tool-search/) ---------------------------
The tool's interface, rebuilt from Adam's Vercel app (build_tool_finder.py
writes the snippet). Same site language as everything else: a white card
on the page's ground, Figtree for the controls, Newsreader for the view
titles, green for the action, teal for categories (a category is a label
of evidence, so it takes the accent pill, as post categories do). */
.ml-tf{
width: 100%;
background: #fff;
border: 1px solid var(--ml-line-2);
border-radius: var(--ml-radius);
box-shadow: var(--ml-shadow-soft);
overflow: hidden;
font-family: var(--ml-body);
color: var(--e-global-color-text);
}
.ml-tf-bar{
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
padding: 12px 18px;
border-bottom: 1px solid var(--ml-line-2);
background: var(--e-global-color-mlwarm);
}
.ml-tf-tab{
font: 600 14.5px/1.2 var(--ml-sans);
padding: 10px 18px;
border-radius: 11px;
border: 1.6px solid transparent;
background: transparent;
color: var(--e-global-color-text);
cursor: pointer;
transition: background .18s, color .18s, border-color .18s;
}
.ml-tf-tab:hover{ color: var(--e-global-color-secondary); background: rgba(255,255,255,.7); }
.ml-tf-tab.is-on{
background: #fff;
color: var(--e-global-color-secondary);
border-color: var(--ml-line-2);
box-shadow: var(--ml-shadow-soft);
}
.ml-tf-new{
margin-left: auto;
font: 600 14px/1.2 var(--ml-sans);
padding: 9px 16px;
border-radius: 11px;
border: 1.6px solid var(--ml-line-2);
background: #fff;
color: var(--e-global-color-secondary);
cursor: pointer;
}
.ml-tf-new:hover{ border-color: var(--e-global-color-primary); color: var(--e-global-color-mlgreendark); }
.ml-tf-body{ padding: 38px 42px 30px; }
.ml-tf-view{ display: flex; flex-direction: column; animation: mlTfIn .3s ease both; }
@keyframes mlTfIn{ from{ opacity: 0; transform: translateY(6px); } to{ opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce){ .ml-tf-view, .ml-tf-result{ animation: none !important; } }
.ml-tf-title{
font-family: var(--ml-serif);
font-size: 34px;
font-weight: 500;
line-height: 1.15;
color: var(--e-global-color-secondary);
margin: 0 0 10px;
text-wrap: balance;
}
.ml-tf-lead{ font-size: 17.5px; line-height: 1.65; margin: 0 0 6px; max-width: 640px; }
.ml-tf-meta{ font: 600 13px/1.6 var(--ml-sans); color: var(--ml-accent-ink); margin: 0 0 22px; }
.ml-tf-sr{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ml-tf-input{
width: 100%;
min-height: 130px;
padding: 16px 18px;
font: 400 16px/1.65 var(--ml-body);
color: var(--e-global-color-secondary);
background: #fff;
border: 1.6px solid var(--ml-line-2);
border-radius: 14px;
resize: vertical;
transition: border-color .18s, box-shadow .18s;
}
.ml-tf-input:focus{
outline: none;
border-color: var(--e-global-color-primary);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--e-global-color-primary) 16%, transparent);
}
.ml-tf-row{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.ml-tf-hint{ font: 500 12.5px/1.4 var(--ml-sans); color: var(--e-global-color-mlmuted); }
.ml-tf-btn{
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
font: 600 15px/1.2 var(--ml-sans);
padding: 11px 24px;
border-radius: 11px;
border: 1.6px solid transparent;
background: var(--e-global-color-primary);
color: #fff !important;
text-decoration: none !important;
cursor: pointer;
box-shadow: 0 10px 22px rgba(84,180,53,.24);
transition: background .18s, transform .18s, box-shadow .18s;
white-space: nowrap;
}
.ml-tf-btn:hover{ background: var(--e-global-color-mlgreendark); transform: translateY(-2px); }
.ml-tf-btn:disabled{ background: var(--ml-line-2); color: var(--e-global-color-mlmuted) !important; box-shadow: none; transform: none; cursor: default; }
.ml-tf-btn-soft{ background: #fff; color: var(--e-global-color-secondary) !important; border-color: var(--ml-line-2); box-shadow: none; }
.ml-tf-btn-soft:hover{ background: #fff; border-color: var(--e-global-color-primary); color: var(--e-global-color-mlgreendark) !important; }
.ml-tf-wait{ display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 34px; font-size: 15px; color: var(--e-global-color-mlmuted); }
.ml-tf-dots{ display: flex; gap: 6px; }
.ml-tf-dots i{ width: 8px; height: 8px; border-radius: 50%; background: var(--e-global-color-primary); animation: mlTfPulse 1.2s ease infinite; }
.ml-tf-dots i:nth-child(2){ animation-delay: .2s; }
.ml-tf-dots i:nth-child(3){ animation-delay: .4s; }
@keyframes mlTfPulse{ 0%,100%{ opacity: .25; } 50%{ opacity: 1; } }
.ml-tf-alert{ margin: 22px 0 0; padding: 14px 18px; border-radius: 14px; font-size: 15px; line-height: 1.6; background: #FDF1EF; border: 1px solid #F3D3CD; color: #7A2A1F; }
.ml-tf-alert-soft{ background: var(--e-global-color-mlwarm); border-color: var(--ml-line-2); color: var(--e-global-color-secondary); }
/* results */
.ml-tf-summary{ font-size: 15px; line-height: 1.6; margin: 0 0 22px; padding-bottom: 16px; border-bottom: 1px solid var(--ml-line-2); color: var(--e-global-color-mlmuted); }
.ml-tf-summary-label{ color: var(--e-global-color-text); font-weight: 600; }
.ml-tf-summary-query{ color: var(--e-global-color-secondary); font-weight: 600; }
.ml-tf-results{ display: flex; flex-direction: column; gap: 14px; }
.ml-tf-result{
padding: 22px 26px;
background: #fff;
border: 1px solid var(--ml-line-2);
border-radius: 18px;
transition: box-shadow .2s, transform .2s, border-color .2s;
animation: mlTfIn .35s ease both;
}
.ml-tf-result:hover{ box-shadow: var(--ml-shadow-lift); border-color: var(--e-global-color-primary); transform: translateY(-2px); }
.ml-tf-result-top{ display: flex; align-items: center; gap: 10px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.ml-tf-result-name{ font: 600 21px/1.3 var(--ml-serif); color: var(--e-global-color-secondary) !important; text-decoration: none !important; }
.ml-tf-result-name:hover{ color: var(--e-global-color-mlgreendark) !important; }
.ml-tf-ext{ color: var(--e-global-color-primary); font-family: var(--ml-sans); font-size: .8em; }
.ml-tf-pill{
font: 700 11px/1 var(--ml-sans);
letter-spacing: .07em;
text-transform: uppercase;
color: var(--ml-accent-ink);
background: var(--ml-accent-tint);
padding: 6px 10px;
border-radius: 999px;
}
.ml-tf-reason{ font-size: 16px; line-height: 1.7; margin: 0 0 12px; }
.ml-tf-actions{ display: flex; gap: 18px; align-items: center; }
.ml-tf-star, .ml-tf-similar{
font: 600 14px/1.2 var(--ml-sans);
background: none;
border: 0;
padding: 6px 0;
cursor: pointer;
color: var(--e-global-color-mlmuted);
}
.ml-tf-star.is-on{ color: var(--e-global-color-mlgreendark); }
.ml-tf-star:hover, .ml-tf-similar:hover{ color: var(--e-global-color-secondary); }
.ml-tf-empty{ font-size: 16px; }
.ml-tf-again{ align-self: flex-start; margin-top: 24px; }
/* notes under a view */
.ml-tf-note{
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px 24px;
flex-wrap: wrap;
margin-top: 26px;
padding: 20px 24px;
background: var(--e-global-color-mlwarm);
border: 1px solid var(--ml-line-2);
border-radius: 18px;
}
.ml-tf-note + .ml-tf-note{ margin-top: 12px; }
.ml-tf-note-accent{ background: #fff; }
.ml-tf-note-head{ font: 600 16px/1.4 var(--ml-sans); color: var(--e-global-color-secondary); margin: 0 0 2px; }
.ml-tf-note-text{ font-size: 14.5px; line-height: 1.55; margin: 0; color: var(--e-global-color-text); }
/* browse */
.ml-tf-cats{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.ml-tf-cat.is-open{ grid-column: 1 / -1; }
.ml-tf-cat-btn{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 15px 18px;
font: 600 15px/1.35 var(--ml-sans);
color: var(--e-global-color-secondary);
text-align: left;
background: #fff;
border: 1.6px solid var(--ml-line-2);
border-radius: 14px;
cursor: pointer;
transition: border-color .18s, background .18s;
}
.ml-tf-cat-btn:hover{ border-color: var(--e-global-color-primary); }
.ml-tf-cat.is-open .ml-tf-cat-btn{ border-color: var(--e-global-color-primary); background: var(--e-global-color-mlwarm); border-radius: 14px 14px 0 0; }
.ml-tf-cat-side{ display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ml-tf-cat-n{ font: 700 12px/1 var(--ml-sans); color: var(--ml-accent-ink); background: var(--ml-accent-tint); padding: 5px 9px; border-radius: 999px; }
.ml-tf-cat-arrow{ font-size: 18px; color: var(--e-global-color-mlmuted); transition: transform .2s; }
.ml-tf-cat.is-open .ml-tf-cat-arrow{ transform: rotate(90deg); color: var(--e-global-color-mlgreendark); }
.ml-tf-cat-list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; border: 1.6px solid var(--e-global-color-primary); border-top: 0; border-radius: 0 0 14px 14px; background: #fff; }
.ml-tf-saved{ border: 0; padding: 0; }
.ml-tf-tool{ display: flex; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 1px solid var(--ml-line-2); border-radius: 12px; background: #fff; }
.ml-tf-tool:hover{ border-color: var(--e-global-color-primary); }
.ml-tf-tool-name{ font: 600 15.5px/1.35 var(--ml-sans); color: var(--e-global-color-secondary) !important; text-decoration: none !important; }
.ml-tf-tool-name:hover{ color: var(--e-global-color-mlgreendark) !important; }
.ml-tf-tool-brief{ font-size: 14px; line-height: 1.55; margin: 4px 0 0; color: var(--e-global-color-text); }
.ml-tf-tool .ml-tf-star{ font-size: 19px; padding: 0 2px; align-self: flex-start; }
.ml-tf-none{ text-align: center; padding: 34px 16px 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ml-tf-none-star{ font-size: 44px; color: var(--ml-line-2); line-height: 1; }
.ml-tf-none p{ margin: 0; font-size: 16px; }
.ml-tf-none .ml-tf-btn{ margin-top: 14px; }
.ml-tf-foot{ margin: 0; padding: 14px 24px; border-top: 1px solid var(--ml-line-2); text-align: center; font-size: 13px; font-style: italic; color: var(--e-global-color-mlmuted); background: #fff; }
@media (max-width: 1024px){
.ml-tf-body{ padding: 30px 28px 24px; }
.ml-tf-cat-list{ grid-template-columns: 1fr; }
}
@media (max-width: 767px){
.ml-tf-bar{ padding: 10px 12px; gap: 4px; }
.ml-tf-tab{ padding: 9px 12px; font-size: 14px; }
.ml-tf-new{ margin-left: 0; width: 100%; }
.ml-tf-body{ padding: 24px 18px 20px; }
.ml-tf-title{ font-size: 27px; }
.ml-tf-lead{ font-size: 16px; }
.ml-tf-row .ml-tf-btn{ width: 100%; }
.ml-tf-hint{ display: none; }
.ml-tf-result{ padding: 18px; }
.ml-tf-result-name{ font-size: 19px; }
.ml-tf-cats{ grid-template-columns: 1fr; }
.ml-tf-note{ padding: 18px; }
.ml-tf-note .ml-tf-btn{ width: 100%; }
}
/* The theme styles every