/* ==========================================================================
   Emma child theme: layout CSS for the Elementor build
   --------------------------------------------------------------------------
   Colours and fonts are set in Elementor > Site Settings (Global Colors and
   Global Fonts). This file holds the layout of each section, attached through
   CSS classes (Advanced > CSS Classes in Elementor), e.g. "emma-hero".
   Selectors are kept at low specificity on purpose: whatever you set in the
   Elementor panel wins over this file.
   Contents: 0 fonts · 1 base · 2 helpers · 3 header · 4 hero · 5 intro
             6 services · 7 band · 8 work + portfolio · 9 process · 10 cta
             11 inner pages · 12 pricing + faq · 13 project · 14 contact + form
             15 footer · 16 client content (M2) · 17 responsive
   ========================================================================== */

/* 0 fonts (self-hosted) ---------------------------------------------------- */
@font-face { font-family: "Gloock"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/gloock-400.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/hanken-grotesk-var.woff2") format("woff2"); }

/* 1 base ------------------------------------------------------------------- */
:root {
	--emma-bg: #FAF7F2;
	--emma-soft: #FDF5E6;
	--emma-dusk: #FBE7BE;
	--emma-line: #E8E3DA;
	--emma-ink: var(--e-global-color-primary, #12100E);
	--emma-text: var(--e-global-color-text, #5A544C);
	--emma-olive: var(--e-global-color-secondary, #54654A);
	--emma-sun: var(--e-global-color-accent, #F2B02F);
	--emma-amber: #D9822B;
	--emma-display: "Gloock", Georgia, serif;
	--emma-sans: "Hanken Grotesk", system-ui, sans-serif;
	--emma-gutter: clamp(20px, 5vw, 56px);
	--emma-section: clamp(88px, 12vw, 168px);
	--emma-radius: 14px;
}
body { background: var(--emma-bg); color: var(--emma-text); font-family: var(--emma-sans); font-size: 1.0625rem; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4 { font-family: var(--emma-display); font-weight: 400; color: var(--emma-ink); letter-spacing: -.01em; margin: 0; }
h1 { font-size: clamp(3rem, 7.4vw, 6.6rem); line-height: .98; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); line-height: 1.05; }
h3 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); line-height: 1.1; }
a { color: var(--emma-ink); }
:focus-visible { outline: 2px solid var(--emma-ink); outline-offset: 4px; border-radius: 2px; }
.elementor-widget-text-editor p:last-child, .elementor-widget-text-editor ul:last-child { margin-bottom: 0; }

/* 2 helpers ---------------------------------------------------------------- */
.e-con[class*="emma-"] { --row-gap: 0px; --column-gap: 0px; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }
.e-con.emma-section { --padding-left: var(--emma-gutter); --padding-right: var(--emma-gutter); --content-width: 1128px; }

.emma-label { font-size: .75rem; font-weight: 600; line-height: 1; letter-spacing: .18em; text-transform: uppercase; }
.emma-lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.55; }

.elementor-button { transition: background .25s, color .25s; }
.emma-sun .elementor-button { background: var(--emma-sun); color: var(--emma-ink); fill: var(--emma-ink); }
.emma-sun .elementor-button:hover { background: var(--emma-amber); color: var(--emma-ink); }
.emma-textlink .elementor-button,
.emma-textlink .elementor-button:hover {
	border-radius: 0; padding: 0 0 .35em; color: var(--emma-ink); fill: var(--emma-ink);
	background: linear-gradient(var(--emma-sun), var(--emma-sun)) 0 100% / 100% 2px no-repeat; transition: background-size .3s;
}
.emma-textlink .elementor-button:hover { background-size: 100% 100%; }
.e-con.emma-actions { --flex-direction: row; --align-items: center; --column-gap: 1.8rem; --row-gap: 1rem; --flex-wrap: wrap; margin-top: 2.2rem; }
.emma-actions > .elementor-widget { width: auto; }

.emma-photo img { display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--emma-radius); background: var(--emma-line); }
.emma-photo.emma-ratio-16-10 img { aspect-ratio: 16 / 10; }
.emma-photo.emma-ratio-4-5 img { aspect-ratio: 4 / 5; }
.emma-photo.emma-ratio-4-3 img { aspect-ratio: 4 / 3; }
.emma-photo.emma-ratio-21-9 img { aspect-ratio: 21 / 9; }
.emma-photo figure { margin: 0; }
.emma-photo figcaption { margin: .9rem 0 0; font-size: .85rem; font-weight: 500; font-style: normal; line-height: 1.4; text-align: left; color: var(--emma-text); }

.e-con.emma-section-head { --flex-direction: row; --justify-content: space-between; --align-items: flex-end; --column-gap: 2rem; margin-bottom: clamp(40px, 5vw, 64px); }
.emma-section-head > .elementor-widget { width: auto; }

/* the sunflower */
.elementor-widget.emma-bloom { position: absolute; z-index: 1; width: auto; pointer-events: none; }
.emma-bloom::before {
	content: ""; position: absolute; inset: -18% -18% 20%; border-radius: 50%;
	background: radial-gradient(closest-side, rgba(242,176,47,.34), rgba(242,176,47,.12) 55%, rgba(242,176,47,0));
}
.emma-bloom img { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 852 / 900; }

/* 3 header ----------------------------------------------------------------- */
.e-con.emma-header { --flex-direction: row; --justify-content: space-between; --align-items: center; --column-gap: 2rem; --min-height: 92px; position: relative; z-index: 5; }
.emma-header .e-con-inner > .elementor-widget, .emma-header-nav > .elementor-widget { width: auto; }
.emma-logo img { height: 76px; width: auto; display: block; }
.e-con.emma-header-nav { --flex-direction: row; --align-items: center; --column-gap: 2.2rem; --width: auto; width: auto; }
.emma-nav .elementor-nav-menu--main .elementor-nav-menu { gap: 2.2rem; }
.emma-nav .elementor-nav-menu--main .elementor-item { padding: 0; font-size: .95rem; font-weight: 400; color: var(--emma-ink); }
.emma-nav .elementor-nav-menu--main .elementor-item:hover,
.emma-nav .elementor-nav-menu--main .elementor-item.elementor-item-active {
	color: var(--emma-ink); text-decoration: underline; text-decoration-color: var(--emma-sun); text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.emma-nav .elementor-menu-toggle { background: none; color: var(--emma-ink); }
.emma-nav .elementor-nav-menu--dropdown { background: var(--emma-bg); }
.emma-nav .elementor-nav-menu--dropdown .elementor-item { font-family: var(--emma-display); font-size: 1.6rem; color: var(--emma-ink); padding: .7rem var(--emma-gutter); }
.emma-header-cta .elementor-button { padding: .85em 1.3em; }

/* fallback: Hello's own header and footer, shown only while Elementor Pro is not active */
.site-header { padding: 14px var(--emma-gutter); }
.site-header .site-logo img, .site-header .custom-logo { height: 76px; width: auto; max-width: none; }
.site-header .site-description { display: none; }
.site-header .site-navigation a { color: var(--emma-ink); font-size: .95rem; }
.site-footer { padding: 32px var(--emma-gutter); }
.site-footer .site-logo img, .site-footer .custom-logo { height: 48px; width: auto; }

/* 4 hero ------------------------------------------------------------------- */
.e-con.emma-hero { position: relative; overflow: hidden; --padding-top: clamp(40px, 5vw, 72px); --padding-bottom: clamp(96px, 12vw, 170px); }
.emma-hero > .e-con-inner > .elementor-widget:not(.emma-bloom), .emma-hero > .e-con-inner > .e-con { position: relative; z-index: 2; }
.emma-hero .elementor-widget-heading { margin-top: 2rem; }
.emma-hero h1 { max-width: 9ch; }
.emma-hero .emma-lead { margin-top: clamp(36px, 5vw, 60px); }
.emma-hero .emma-lead > * { max-width: 34ch; }
.emma-hero .emma-bloom {
	width: clamp(320px, 42vw, 600px); right: max(2vw, calc((100vw - 1240px) / 2)); bottom: -14%;
	animation: emma-rise 2s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes emma-rise { from { transform: translateY(18%) rotate(-7deg); opacity: 0; } to { transform: none; opacity: 1; } }
.elementor-editor-active .emma-bloom { animation: none; }

.e-con.emma-page-hero { --padding-top: clamp(56px, 8vw, 120px); --padding-bottom: clamp(56px, 7vw, 96px); border-bottom: 1px solid var(--emma-line); }
.emma-page-hero .elementor-widget-heading, .emma-page-hero .elementor-widget-theme-archive-title { margin-top: 1.6rem; }
.emma-page-hero h1 { font-size: clamp(2.8rem, 6.4vw, 5.6rem); max-width: 14ch; }
.emma-page-hero .emma-lead { margin-top: 2rem; }
.emma-page-hero .emma-lead > * { max-width: 46ch; }

/* 5 intro ------------------------------------------------------------------ */
.e-con.emma-intro { --padding-top: var(--emma-section); --padding-bottom: var(--emma-section); border-top: 1px solid var(--emma-line); }
.e-con.emma-intro-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.e-con.emma-intro-head { --gap: 0; }
.emma-intro-head > .emma-label + .emma-statement { margin-top: 1.6rem; }
.emma-intro-grid > .emma-photo { max-width: 440px; justify-self: end; }
.emma-statement { font-family: var(--emma-display); font-size: clamp(1.7rem, 3.3vw, 2.9rem); line-height: 1.22; color: var(--emma-ink); }
.emma-statement > * { max-width: 24ch; }
.emma-statement em { font-style: normal; color: var(--emma-olive); }

/* 6 services --------------------------------------------------------------- */
.e-con.emma-services { --padding-bottom: var(--emma-section); }
.e-con.emma-service-list { border-top: 1px solid var(--emma-line); }
.e-con.emma-service {
	position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) 2rem; gap: 2rem; align-items: center;
	padding: clamp(22px, 2.6vw, 34px) 0; border-bottom: 1px solid var(--emma-line);
}
.emma-service::before {
	content: ""; position: absolute; left: 0; top: 50%; width: 14px; height: 14px; border-radius: 50%;
	background: var(--emma-sun); transform: translate(-8px, -50%) scale(0); transition: transform .3s;
}
.emma-service::after { content: "\2192"; font-size: 1.3rem; color: var(--emma-ink); justify-self: end; transition: transform .3s; }
.emma-service .elementor-widget-heading { position: static; transition: transform .3s; }
.emma-service h3 a { color: inherit; text-decoration: none; }
.emma-service h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.emma-service-text { font-size: 1rem; }
.emma-service-text .elementor-widget > * { max-width: 44ch; }
.emma-service-text .emma-tags > * { max-width: none; }
.emma-tags { margin-top: .55rem; font-size: .7rem; font-weight: 600; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--emma-olive); }
.emma-service:hover::before { transform: translate(0, -50%) scale(1); }
.emma-service:hover .elementor-widget-heading { transform: translateX(30px); }
.emma-service:hover::after { transform: translateX(4px); }

/* 7 band ------------------------------------------------------------------- */
.e-con.emma-band { position: relative; height: clamp(300px, 40vw, 580px); overflow: hidden; }
.emma-band .emma-band-photo, .emma-band .emma-band-photo .elementor-widget-container { height: 100%; }
.emma-band img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

/* 8 work + portfolio ------------------------------------------------------- */
.e-con.emma-work { --padding-top: var(--emma-section); --padding-bottom: var(--emma-section); background: var(--emma-soft); }
.e-con.emma-work-foot { --align-items: center; margin-top: clamp(48px, 6vw, 80px); }
.emma-work-foot > .elementor-widget { width: auto; }

.emma-cases .elementor-loop-container { gap: clamp(20px, 3vw, 40px); }
.emma-cases .e-loop-item { position: relative; }
.emma-case-image img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--emma-radius); background: var(--emma-line); transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.emma-case-image, .emma-case-image .elementor-widget-container, .emma-case-image a { display: block; overflow: hidden; border-radius: var(--emma-radius); }
.e-loop-item:hover .emma-case-image img { transform: scale(1.035); }
.e-con.emma-case-meta { --flex-direction: row; --justify-content: space-between; --align-items: baseline; --column-gap: 1rem; margin-top: 1.2rem; }
.emma-case-meta > .elementor-widget { width: auto; }
.emma-case-title .elementor-heading-title { font-size: clamp(1.4rem, 2.2vw, 1.85rem); }
.emma-case-title a { color: inherit; text-decoration: none; }
.emma-case-terms .elementor-post-info, .emma-case-terms .elementor-icon-list-text, .emma-case-terms a {
	font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: var(--emma-olive); text-decoration: none;
}
.emma-case-excerpt { margin-top: .4rem; font-size: .98rem; }
.emma-case-excerpt > * { max-width: 46ch; }

/* "Sample project" label: a tick box on each project */
.e-loop-item.emma-is-sample::before,
body.emma-is-sample .emma-case-cover::before {
	content: "Sample project"; position: absolute; z-index: 2; top: 14px; left: 14px; background: rgba(250,247,242,.92); color: var(--emma-ink);
	font-size: .66rem; font-weight: 600; line-height: 1; letter-spacing: .16em; text-transform: uppercase; padding: .6em .8em; border-radius: 99px;
}

/* project cards from the [emma_projects] shortcode (works without Elementor Pro) */
.emma-projects { display: grid; gap: clamp(20px, 3vw, 40px); }
/* Portfolio page: three in a row (2026-09-29, Ariful: 2 + 1 left an empty gap). Phones: one column, see 17. */
.emma-projects-grid { grid-template-columns: repeat(3, 1fr); row-gap: clamp(40px, 5vw, 72px); }
.emma-projects-grid .emma-project-meta { flex-direction: column; align-items: flex-start; gap: .45rem; }
.emma-projects-grid .emma-project-title { font-size: clamp(1.3rem, 1.9vw, 1.6rem); }
.emma-projects-featured { grid-template-columns: repeat(12, 1fr); }
.emma-project { position: relative; display: flex; flex-direction: column; margin: 0; }
.emma-projects-featured .emma-project { grid-column: span 5; }
.emma-projects-featured .emma-project:first-child { grid-column: 1 / span 7; grid-row: 1 / span 2; }
/* projects 4 and 5 (the client may show up to 5): two equal cards in a row under the first three */
.emma-projects-featured .emma-project:nth-child(n+4) { grid-column: span 6; }
.emma-project-image { display: block; overflow: hidden; border-radius: var(--emma-radius); background: var(--emma-line); aspect-ratio: 4 / 3; }
.emma-project-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.emma-project:hover .emma-project-image img { transform: scale(1.035); }
.emma-projects-featured .emma-project:first-child .emma-project-image { position: relative; flex: 1; min-height: 320px; aspect-ratio: auto; }
.emma-projects-featured .emma-project:first-child .emma-project-image img { position: absolute; inset: 0; }
.emma-project-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-top: 1.2rem; }
.emma-project-title { font-size: clamp(1.4rem, 2.2vw, 1.85rem); margin: 0; }
.emma-project-title a { color: inherit; text-decoration: none; }
.emma-project-terms { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; color: var(--emma-olive); }
.emma-project-excerpt { margin: .4rem 0 0; font-size: .98rem; max-width: 46ch; }
.emma-project.emma-is-sample::before {
	content: "Sample project"; position: absolute; z-index: 2; top: 14px; left: 14px; background: rgba(250,247,242,.92); color: var(--emma-ink);
	font-size: .66rem; font-weight: 600; line-height: 1; letter-spacing: .16em; text-transform: uppercase; padding: .6em .8em; border-radius: 99px;
}

/* homepage: one large project + two stacked (Elementor Pro Loop Grid version) */
.emma-cases-featured.elementor-widget .elementor-loop-container { grid-template-columns: repeat(12, 1fr); }
.emma-cases-featured .e-loop-item { grid-column: span 5; }
.emma-cases-featured .e-loop-item:first-child { grid-column: 1 / span 7; grid-row: 1 / span 2; display: flex; }
.emma-cases-featured .e-loop-item:nth-child(n+4) { grid-column: span 6; }
.emma-cases-featured .e-loop-item:first-child > .elementor { display: flex; flex: 1; flex-direction: column; }
.emma-cases-featured .e-loop-item:first-child .emma-case-card { flex: 1; }
.emma-cases-featured .e-loop-item:first-child .emma-case-image { position: relative; flex: 1; min-height: 320px; }
.emma-cases-featured .e-loop-item:first-child .emma-case-image :is(.elementor-widget-container, a) { height: 100%; }
.emma-cases-featured .e-loop-item:first-child .emma-case-image img { position: absolute; inset: 0; aspect-ratio: auto; }

/* The call to action below brings its own top space: a full section padding here doubled the gap (2026-09-29). */
.e-con.emma-archive { --padding-top: clamp(48px, 6vw, 88px); --padding-bottom: clamp(24px, 3vw, 40px); }
.emma-cases-grid .elementor-loop-container { row-gap: clamp(40px, 5vw, 72px); }
.emma-archive .emma-filter + .emma-cases { margin-top: clamp(40px, 5vw, 64px); }
.emma-filter .e-filter { display: flex; flex-wrap: wrap; gap: .6rem; }
.emma-filter .e-filter-item {
	cursor: pointer; background: none; color: var(--emma-ink); border: 1px solid var(--emma-line); border-radius: 99px;
	padding: .7em 1.1em; font-family: var(--emma-sans); font-size: .88rem; font-weight: 500; line-height: 1;
}
.emma-filter .e-filter-item:hover { border-color: var(--emma-ink); background: none; color: var(--emma-ink); }
.emma-filter .e-filter-item[aria-pressed="true"] { background: var(--emma-ink); border-color: var(--emma-ink); color: var(--emma-bg); }
.emma-cases .e-load-more-anchor ~ .elementor-button-wrapper { margin-top: clamp(40px, 5vw, 64px); text-align: center; }

/* 9 process ---------------------------------------------------------------- */
.e-con.emma-process { --padding-top: var(--emma-section); --padding-bottom: var(--emma-section); }
.e-con.emma-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 48px); counter-reset: emma-step; }
.e-con.emma-step { counter-increment: emma-step; border-top: 1px solid var(--emma-ink); padding-top: 1.4rem; }
/* Elementor positions .e-con::before absolutely (it is its overlay layer): put it back in the flow. */
.e-con.emma-step::before { content: counter(emma-step); position: static; display: block; width: auto; height: auto; opacity: 1; transform: none; margin-bottom: 1.6rem; font-family: var(--emma-display); font-size: 2.6rem; line-height: 1; color: var(--emma-ink); }
.emma-step .elementor-heading-title { font-family: var(--emma-sans); font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; margin-bottom: .6rem; }
.emma-step .elementor-widget-text-editor { font-size: .98rem; }

/* 10 cta ------------------------------------------------------------------- */
.e-con.emma-cta {
	position: relative; overflow: hidden; text-align: center; --align-items: center;
	background: linear-gradient(to bottom, var(--emma-bg) 0%, var(--emma-dusk) 100%);
	--padding-top: var(--emma-section); --padding-bottom: clamp(200px, 26vw, 340px);
}
.emma-cta > .e-con-inner > .elementor-widget:not(.emma-bloom) { position: relative; z-index: 2; }
.emma-cta h2 { font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 1; max-width: 14ch; margin: 1.6rem auto 1.8rem; }
.emma-cta .emma-lead { font-size: 1.12rem; }
.emma-cta .emma-lead > * { max-width: 40ch; margin-inline: auto; }
.emma-cta .elementor-widget-button { margin-top: 2.4rem; }
.emma-cta .emma-bloom { width: clamp(260px, 32vw, 440px); left: 50%; bottom: calc(clamp(260px, 32vw, 440px) * -.62); transform: translateX(-50%); }

/* 11 inner pages ----------------------------------------------------------- */
.e-con.emma-story, .e-con.emma-values, .e-con.emma-team, .e-con.emma-faq, .e-con.emma-pricing-section { --padding-top: var(--emma-section); --padding-bottom: var(--emma-section); }
.e-con.emma-values, .e-con.emma-pricing-section { background: var(--emma-soft); }
.e-con.emma-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.emma-split-text > .elementor-widget + .elementor-widget { margin-top: 1.2rem; }
.emma-split-text > .emma-label + .elementor-widget-heading { margin-top: 1.4rem; }
.emma-split-text > .elementor-widget-heading + .elementor-widget { margin-top: 1.8rem; }
.emma-split-text > .elementor-widget + .elementor-widget-button { margin-top: 2rem; }

.e-con.emma-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 48px); }
.e-con.emma-cards-4 { grid-template-columns: repeat(4, 1fr); }
.e-con.emma-card { border-top: 1px solid var(--emma-ink); padding-top: 1.4rem; }
.emma-card .elementor-heading-title { font-size: 1.6rem; margin-bottom: .8rem; }
.emma-card .elementor-widget-text-editor { font-size: .98rem; }
.e-con.emma-team { border-top: 1px solid var(--emma-line); }

/* "The Story About Emma": the client's own story, last on About. Quiet on purpose: no buttons, no extra colour. */
.e-con.emma-emma-story { --padding-top: var(--emma-section); --padding-bottom: var(--emma-section); background: var(--emma-soft); }
.e-con.emma-story-body { max-width: 680px; margin: clamp(56px, 7vw, 96px) auto 0; }
.emma-story-body > .emma-label, .emma-story-body > .elementor-widget-heading { text-align: center; }
.emma-story-body > .emma-label + .elementor-widget-heading { margin-top: 1.4rem; }
.emma-story-body .elementor-heading-title { text-wrap: balance; }
.emma-story-text { margin-top: clamp(36px, 4.5vw, 56px); font-size: clamp(1.05rem, 1.25vw, 1.15rem); line-height: 1.8; color: var(--emma-ink); }
.emma-story-text p { margin: 0; }
.emma-story-text p + p { margin-top: 1.25em; }
.emma-story-note { margin-top: clamp(48px, 6vw, 72px); padding: clamp(4px, .6vw, 8px) 0 clamp(4px, .6vw, 8px) clamp(20px, 2.4vw, 32px); border-left: 4px solid var(--emma-sun); font-size: clamp(1rem, 1.15vw, 1.08rem); line-height: 1.8; color: var(--emma-ink); }
/* 2026-09-30: the client found the larger note too big: now just under the story text, the gold bar keeps it prominent. */
.emma-story-note em { font-weight: 600; }
.emma-story-note p, .emma-story-sign p { margin: 0; }
.emma-story-sign { margin-top: clamp(36px, 4.5vw, 52px); text-align: center; font-family: var(--emma-display); font-size: clamp(1.4rem, 2vw, 1.7rem); color: var(--emma-ink); }
.emma-member .elementor-heading-title { font-family: var(--emma-sans); font-size: 1.05rem; font-weight: 600; letter-spacing: 0; margin-bottom: .2rem; }

.e-con.emma-service-detail { --padding-top: clamp(64px, 8vw, 112px); --padding-bottom: clamp(64px, 8vw, 112px); border-bottom: 1px solid var(--emma-line); scroll-margin-top: 24px; }
.emma-service-detail .emma-split { align-items: start; }
.emma-service-detail h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.emma-checklist ul, .emma-price-list ul { margin: 0; padding: 0; list-style: none; }
.emma-checklist li { position: relative; padding: .7rem 0 .7rem 1.6rem; border-top: 1px solid var(--emma-line); }
.emma-checklist li::before { content: ""; position: absolute; left: 0; top: 1.25rem; width: 8px; height: 8px; border-radius: 50%; background: var(--emma-sun); }
.emma-related > .emma-cases { margin-top: 1.4rem; }
.emma-cases-small .emma-case-title .elementor-heading-title { font-size: 1.3rem; }

/* 12 pricing + faq --------------------------------------------------------- */
.e-con.emma-pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px); align-items: stretch; }
.e-con.emma-price-card { background: var(--emma-bg); border: 1px solid var(--emma-line); border-radius: var(--emma-radius); padding: clamp(24px, 3vw, 40px); }
.e-con.emma-price-card.is-featured { border-color: var(--emma-ink); }
.emma-price-card .elementor-heading-title { font-size: 1.7rem; }
.emma-price { font-family: var(--emma-display); font-size: 3rem; line-height: 1; color: var(--emma-ink); margin-top: 1.4rem; }
.emma-price-note { font-size: .88rem; margin-top: .4rem; }
.emma-price-list { margin-top: 1.6rem; font-size: .98rem; }
.emma-price-list li { padding: .6rem 0; border-top: 1px solid var(--emma-line); }
.emma-price-card > .elementor-widget-button { margin-top: auto; padding-top: 2rem; }

.emma-faq-list > * { max-width: 820px; }
.emma-faq-list .elementor-accordion .elementor-accordion-item { border: 0; border-bottom: 1px solid var(--emma-line); }
.emma-faq-list .elementor-accordion .elementor-accordion-item:first-child { border-top: 1px solid var(--emma-line); }
.emma-faq-list .elementor-accordion .elementor-tab-title { display: flex; flex-direction: row-reverse; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; font-family: var(--emma-display); font-size: 1.4rem; font-weight: 400; line-height: 1.25; color: var(--emma-ink); }
.emma-faq-list .elementor-tab-title a, .emma-faq-list .elementor-tab-title.elementor-active a { color: var(--emma-ink); text-decoration: none; }
.emma-faq-list .elementor-accordion-icon { color: var(--emma-ink); font-size: .9rem; }
.emma-faq-list .elementor-accordion .elementor-tab-content { border: 0; padding: 0 0 1.4rem; max-width: 60ch; }

/* 13 project (single case study) ------------------------------------------- */
.e-con.emma-case-hero { --padding-top: clamp(48px, 7vw, 104px); --padding-bottom: clamp(40px, 5vw, 64px); }
.emma-case-hero .elementor-widget-theme-post-title { margin-top: 1.6rem; }
.emma-case-hero h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); max-width: 16ch; }
.emma-case-hero .emma-lead { margin-top: 2rem; }
.emma-case-hero .emma-lead > * { max-width: 52ch; }
.emma-case-cover { position: relative; }
.emma-case-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--emma-radius); }
.e-con.emma-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; align-items: end; padding: clamp(32px, 4vw, 48px) 0; border-bottom: 1px solid var(--emma-line); }
.emma-fact .emma-label { color: var(--emma-olive); }
.emma-fact-value { margin-top: .7rem; color: var(--emma-ink); font-weight: 500; }
.e-con.emma-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; padding: clamp(40px, 5vw, 72px) 0 0; }
.emma-result-number .elementor-heading-title { font-family: var(--emma-display); font-size: clamp(2.6rem, 5vw, 4.4rem); line-height: 1; color: var(--emma-ink); margin: 0; }
.emma-result-label { margin-top: .6rem; }
.emma-result-label > * { max-width: 24ch; }
.e-con.emma-case-body { --padding-top: clamp(40px, 6vw, 88px); --padding-bottom: var(--emma-section); }
.emma-case-content > * { max-width: 760px; margin-inline: auto; }
.emma-case-content h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: 3.2rem 0 1rem; }
.emma-case-content h2:first-child { margin-top: 0; }
.emma-case-content .wp-block-gallery, .emma-case-content .wp-block-image { margin-block: 2.4rem; }
.emma-case-content img { border-radius: var(--emma-radius); }
.e-con.emma-quote { --align-items: center; max-width: 900px; margin: clamp(48px, 6vw, 88px) auto 0; text-align: center; }
.emma-quote-text { font-family: var(--emma-display); font-size: clamp(1.6rem, 3vw, 2.6rem); line-height: 1.25; color: var(--emma-ink); }
.emma-quote-name { margin-top: 1.6rem; font-weight: 600; color: var(--emma-ink); }
.emma-quote-role { font-size: .9rem; }

/* pages without Elementor (privacy policy etc.) use Hello's page layout */
.page-header .entry-title, .site-main .page-content { max-width: 760px; margin-inline: auto; }
.site-main { padding-inline: var(--emma-gutter); padding-block: clamp(56px, 8vw, 120px); }
.site-main.elementor-page, body.elementor-page .site-main { padding: 0; }

/* 14 contact + form -------------------------------------------------------- */
.e-con.emma-contact { --padding-top: clamp(56px, 7vw, 104px); --padding-bottom: var(--emma-section); }
.e-con.emma-split-form { grid-template-columns: 5fr 7fr; align-items: start; }
.emma-contact-details .emma-label { color: var(--emma-olive); }
.emma-contact-details .emma-label:not(:first-child) { margin-top: 1.6rem; }
.emma-contact-details .elementor-widget-text-editor:not(.emma-label) { margin-top: .6rem; color: var(--emma-ink); font-size: 1.15rem; }

.emma-form { background: var(--emma-soft); border-radius: var(--emma-radius); padding: clamp(24px, 4vw, 48px); }
.emma-form .elementor-form-fields-wrapper { row-gap: 1.4rem; }
.emma-form .elementor-field-group > label { font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--emma-ink); padding-bottom: .5rem; }
.emma-form .elementor-field-group .elementor-field-textual, .emma-form .elementor-field-group .elementor-select-wrapper select {
	font-family: var(--emma-sans); font-size: 1rem; color: var(--emma-ink); background: var(--emma-bg);
	border: 1px solid var(--emma-line); border-radius: 10px; padding: .9em 1em; min-height: 0;
}
.emma-form .elementor-field-group .elementor-field-textual:focus { border-color: var(--emma-ink); box-shadow: 0 0 0 1px var(--emma-ink); outline: none; }
.emma-form .elementor-button { background: var(--emma-sun); color: var(--emma-ink); padding: 1.1em 1.7em; }
.emma-form .elementor-button:hover { background: var(--emma-amber); color: var(--emma-ink); }
.emma-form .e-form__buttons { justify-content: flex-start; }
.emma-form .elementor-field-type-submit { flex: 0 0 auto; width: auto; }
.emma-form .elementor-message { margin-top: 1.2rem; border-radius: 10px; padding: 1em 1.2em; font-weight: 500; color: var(--emma-ink); }
.emma-form .elementor-message.elementor-message-success { background: #E4EBDD; }
.emma-form .elementor-message.elementor-message-danger { background: #F9E0CC; }
.emma-form .elementor-message::before { display: none; }

/* 15 footer ---------------------------------------------------------------- */
.e-con.emma-footer { position: relative; z-index: 3; background: var(--emma-ink); color: #cfc6b8; font-size: .95rem; --padding-top: clamp(56px, 7vw, 88px); --padding-bottom: 32px; }
.e-con.emma-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
.emma-footer-logo img { display: block; height: 64px; width: auto; }
.emma-footer .elementor-widget-image { text-align: left; }
.emma-footer-note { margin-top: 1.2rem; }
.emma-footer-note > * { max-width: 30ch; }
.emma-footer .elementor-heading-title { font-family: var(--emma-sans); font-size: .72rem; font-weight: 600; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: #8f877b; margin-bottom: 1.1rem; }
.emma-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.emma-footer a { color: inherit; text-decoration: none; }
.emma-footer a:hover { color: var(--emma-sun); }
.e-con.emma-legal { --flex-direction: row; --justify-content: space-between; --flex-wrap: wrap; --column-gap: 1rem; margin-top: clamp(48px, 6vw, 72px); padding-top: 24px; border-top: 1px solid #3a352f; font-size: .82rem; color: #8f877b; }
.emma-legal > .elementor-widget { width: auto; }

/* 16 client content, M2 (2026-09-29) -------------------------------------- */
.emma-page-hero .emma-lead p + p { margin-top: 1em; }
.e-con.emma-cards-2 { grid-template-columns: repeat(2, 1fr); row-gap: clamp(32px, 4vw, 56px); }
.emma-role { margin-top: .8rem; font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--emma-olive); }

/* services: the "from" price sits in the title, as the client asked */
.emma-from { display: block; margin-top: .7rem; font-family: var(--emma-sans); font-size: .95rem; font-weight: 600; letter-spacing: .02em; color: var(--emma-olive); }
.emma-service-detail .emma-checklist { align-self: center; }
.e-con.emma-services-note { --padding-top: clamp(32px, 4vw, 48px); --padding-bottom: clamp(32px, 4vw, 48px); }
.emma-small-print { font-size: .88rem; line-height: 1.6; }
.emma-small-print > * { max-width: 72ch; }

/* price list: free widgets, so it shows with or without Elementor Pro */
.e-con.emma-pricing-section { scroll-margin-top: 24px; }
.e-con.emma-price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: start; margin-bottom: clamp(28px, 3vw, 40px); }
.emma-price-group > .emma-label { color: var(--emma-olive); margin-bottom: 1rem; }
.emma-price-table { width: 100%; border-collapse: collapse; margin: 0; font-size: 1rem; }
.emma-price-table th, .emma-price-table td { padding: .8rem 0; border: 0; border-top: 1px solid var(--emma-line); background: none; text-align: left; font-weight: 400; vertical-align: baseline; }
.emma-price-table tr:last-child th, .emma-price-table tr:last-child td { border-bottom: 1px solid var(--emma-line); }
.emma-price-table td { padding-left: 1rem; text-align: right; white-space: nowrap; font-family: var(--emma-display); font-size: 1.2rem; color: var(--emma-ink); }
/* Hello's reset stripes and hovers tables */
.emma-price-table tbody > tr:nth-child(odd) > td, .emma-price-table tbody > tr:nth-child(odd) > th,
.emma-price-table tbody tr:hover > td, .emma-price-table tbody tr:hover > th { background: none; }
.e-con.emma-care { margin-top: clamp(28px, 3vw, 40px); background: var(--emma-bg); border: 1px solid var(--emma-line); border-radius: var(--emma-radius); --padding-top: clamp(22px, 2.6vw, 32px); --padding-bottom: clamp(22px, 2.6vw, 32px); --padding-left: clamp(22px, 2.6vw, 32px); --padding-right: clamp(22px, 2.6vw, 32px); }
.emma-care .elementor-heading-title { font-size: 1.5rem; margin-bottom: .7rem; }
.emma-care .elementor-widget-text-editor { font-size: .95rem; }
.e-con.emma-not-included { margin-top: clamp(40px, 5vw, 64px); max-width: 760px; }
.emma-not-included .elementor-heading-title { font-size: 1.6rem; margin-bottom: 1rem; }
.emma-not-included strong { color: var(--emma-ink); font-weight: 600; }

/* portfolio: the label the client requires on every project */
.emma-partner, .emma-partner p { margin: .9rem 0 0; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--emma-olive); }
.emma-case-hero .emma-partner { margin-top: 1.4rem; }
.e-loop-item.emma-is-sample .emma-partner, body.emma-is-sample .emma-partner { display: none; }
.emma-work-note { margin-top: clamp(40px, 5vw, 56px); text-align: center; font-size: .98rem; }

/* contact form ([emma_enquiry]) */
.emma-enquiry { display: flex; flex-wrap: wrap; gap: 1.4rem 1.2rem; margin: 0; }
.emma-enquiry .emma-field { flex: 1 1 100%; margin: 0; }
.emma-enquiry .emma-field-half { flex: 1 1 calc(50% - .6rem); min-width: 200px; }
.emma-enquiry label { display: block; padding-bottom: .5rem; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--emma-ink); }
.emma-enquiry label span { font-weight: 400; letter-spacing: .02em; text-transform: none; color: var(--emma-text); }
.emma-enquiry input[type="text"], .emma-enquiry input[type="email"], .emma-enquiry textarea {
	display: block; width: 100%; font-family: var(--emma-sans); font-size: 1rem; color: var(--emma-ink); background: var(--emma-bg);
	border: 1px solid var(--emma-line); border-radius: 10px; padding: .9em 1em;
}
.emma-enquiry input:focus, .emma-enquiry textarea:focus { border-color: var(--emma-ink); box-shadow: 0 0 0 1px var(--emma-ink); outline: none; }
.emma-enquiry button { cursor: pointer; border: 0; border-radius: 999px; background: var(--emma-sun); color: var(--emma-ink); font-family: var(--emma-sans); font-size: .95rem; font-weight: 500; line-height: 1; padding: 1.1em 2.2em; transition: background .25s; }
.emma-enquiry button:hover, .emma-enquiry button:focus { background: var(--emma-amber); color: var(--emma-ink); }
.emma-enquiry-note { flex: 1 1 100%; margin: 0; font-size: .9rem; }
.emma-enquiry-message { flex: 1 1 100%; margin: 0; border-radius: 10px; padding: 1em 1.2em; font-weight: 500; color: var(--emma-ink); }
.emma-enquiry-message.is-success { background: #E4EBDD; }
.emma-enquiry-message.is-error { background: #F9E0CC; }
.emma-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* privacy policy */
.e-con.emma-legal-page { --padding-top: clamp(40px, 5vw, 72px); --padding-bottom: var(--emma-section); }
.emma-legal-text { max-width: 760px; }
.emma-legal-text h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin: 2.6rem 0 .9rem; }
.emma-legal-text h2:first-child { margin-top: 0; }
.emma-legal-text p, .emma-legal-text ul { margin: 0 0 1em; }
.emma-legal-text li + li { margin-top: .4em; }
.emma-legal-text strong { color: var(--emma-ink); font-weight: 600; }

/* footer: the legal line the client requires in full */
.emma-legal-line > * { max-width: 70ch; }

/* home, client sections (2026-09-30): figures, film, The problem, How it works, The guarantee */
.e-con.emma-hero.emma-hero-film { --padding-bottom: clamp(48px, 6vw, 88px); }
.e-con.emma-figures { display: grid; grid-template-columns: repeat(3, minmax(0, max-content)); gap: clamp(24px, 4vw, 64px); margin-top: clamp(32px, 4vw, 48px); padding-top: clamp(20px, 2.4vw, 28px); border-top: 1px solid var(--emma-line); }
.emma-figure-value { font-family: var(--emma-display); font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1; color: var(--emma-ink); }
.emma-figure-label { margin-top: .5rem; font-size: .9rem; line-height: 1.35; }

/* the sunflower film: full width, plays once, stays on the golden frame */
/* the band fades from the page cream into the film's own wall colour, so no edge shows */
.e-con.emma-film-band { --padding-top: 0px; --padding-bottom: 0px; overflow: hidden;
	background: linear-gradient(to bottom, var(--emma-bg) 0%, #F4F0E0 8%, #F4F0E0 92%, var(--emma-bg) 100%); }
.emma-film, .emma-film .elementor-widget-container { width: 100%; }
/* Full width, as the client asked: never letterboxed; up to a full screen tall (2026-10-02). The stem is trimmed
   on short screens, never the petals. */
.emma-sunflower-video { display: block; width: 100%; height: min(100vh, calc(100vw * 1080 / 1920)); object-fit: cover; object-position: 50% 12%; background: transparent;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 6%, #000 94%, transparent 100%); }

.e-con.emma-problem { --padding-top: var(--emma-section); --padding-bottom: clamp(56px, 7vw, 96px); }
.emma-problem > .e-con-inner > .emma-label + .elementor-widget-heading { margin-top: 1.4rem; }
.emma-problem h2 { max-width: 16ch; }
.emma-problem-text { margin-top: clamp(28px, 3.5vw, 40px); font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--emma-ink); }
.emma-problem-text p { max-width: 52ch; margin: 0; }
.emma-problem-text p + p { margin-top: 1em; color: var(--emma-olive); }

.e-con.emma-steps.emma-steps-3 { grid-template-columns: repeat(3, 1fr); counter-reset: emma-step; }
.e-con.emma-steps-3 .emma-step::before { content: counter(emma-step, decimal-leading-zero); }
.emma-steps-3 .emma-step .elementor-heading-title { font-size: 1.15rem; }

/* The guarantee: "give this visual weight", the client's strongest reason to choose Emma */
.e-con.emma-guarantee { --padding-top: var(--emma-section); --padding-bottom: var(--emma-section); background: var(--emma-ink); color: #d9d1c4; }
.emma-guarantee .emma-label { color: var(--emma-sun); }
.emma-guarantee > .e-con-inner > .emma-label + .elementor-widget-heading { margin-top: 1.4rem; }
.emma-guarantee h2 { color: #faf7f2; font-size: clamp(2.6rem, 6vw, 5rem); max-width: 14ch; }
.emma-guarantee .emma-lead { margin-top: clamp(24px, 3vw, 36px); color: #efe8dc; }
.emma-guarantee .emma-lead > * { max-width: 52ch; }
.e-con.emma-promises { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 40px) clamp(32px, 5vw, 72px); margin-top: clamp(40px, 5vw, 64px); }
.e-con.emma-promise { border-top: 2px solid var(--emma-sun); padding-top: 1.1rem; }
.emma-promise .elementor-heading-title { font-family: var(--emma-sans); font-size: 1.1rem; font-weight: 600; letter-spacing: 0; line-height: 1.35; color: #faf7f2; margin-bottom: .45rem; }
.emma-promise .elementor-widget-text-editor { font-size: .98rem; }
.emma-guarantee .emma-small-print { margin-top: clamp(40px, 5vw, 56px); padding-top: 1.2rem; border-top: 1px solid #3a352f; color: #9f968a; }
.emma-guarantee a { color: var(--emma-sun); }

/* 17 responsive ------------------------------------------------------------ */
@media (max-width: 1024px) {
	.e-con.emma-intro-grid { grid-template-columns: 1fr; }
	.emma-intro-grid > .emma-photo { max-width: 460px; justify-self: start; }
	.e-con.emma-service { grid-template-columns: 1fr 2rem; gap: .6rem 1.5rem; }
	.emma-service > .elementor-widget-heading { grid-column: 1; }
	.emma-service > .emma-service-text { grid-column: 1; grid-row: 2; }
	.emma-service::after { grid-column: 2; grid-row: 1 / span 2; }
	.e-con.emma-steps, .e-con.emma-cards, .e-con.emma-cards-4, .e-con.emma-facts { grid-template-columns: 1fr 1fr; }
	.e-con.emma-footer-grid { grid-template-columns: 1fr 1fr; }
	.emma-footer-grid > .emma-footer-col:first-child { grid-column: 1 / -1; }
	.emma-hero .emma-bloom { width: 46vw; right: -4vw; bottom: -10%; }
	.e-con.emma-split-form { grid-template-columns: 1fr; }
	.e-con.emma-pricing { grid-template-columns: 1fr; max-width: 560px; }
	.e-con.emma-price-grid { grid-template-columns: 1fr; }
	.e-con.emma-promises { gap: 28px 40px; }
}
@media (max-width: 767px) {
	.e-con.emma-header { --min-height: 76px; }
	.emma-logo img, .site-header .site-logo img, .site-header .custom-logo { height: 58px; }
	.emma-header-cta { display: none; }
	.e-con.emma-hero { --padding-bottom: 300px; }
	.emma-hero .emma-bloom { width: 72vw; right: -6vw; bottom: -60px; }
	.emma-hero h1, .emma-page-hero h1 { max-width: none; }
	.e-con.emma-section-head { --flex-direction: column; --align-items: flex-start; --row-gap: 1rem; }
	.e-con.emma-split, .e-con.emma-cards, .e-con.emma-steps, .e-con.emma-results { grid-template-columns: 1fr; }
	.e-con.emma-cards-4 { grid-template-columns: 1fr 1fr; }
	.e-con.emma-cards-2 { grid-template-columns: 1fr; }
	.e-con.emma-steps.emma-steps-3, .e-con.emma-promises { grid-template-columns: 1fr; }
	.e-con.emma-figures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.emma-figure-value { font-size: 1.45rem; }
	.emma-figure-label { font-size: .8rem; }
	/* phones: the square cut of the film, flower fills the width */
	.emma-sunflower-video { height: auto; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 50%; }
	.emma-enquiry .emma-field-half { flex-basis: 100%; }
	.emma-projects-featured, .emma-projects-grid { grid-template-columns: 1fr; }
	.emma-projects-featured .emma-project:nth-child(n) { grid-column: 1; grid-row: auto; }
	.emma-projects-featured .emma-project:first-child .emma-project-image { flex: none; min-height: 0; aspect-ratio: 4 / 3; }
	.emma-projects-featured .emma-project:first-child .emma-project-image img { position: static; }
	.emma-cases-featured.elementor-widget .elementor-loop-container { grid-template-columns: 1fr; }
	.emma-cases-featured .e-loop-item:nth-child(n) { grid-column: 1; grid-row: auto; }
	.emma-cases-featured .e-loop-item:first-child .emma-case-image { flex: none; min-height: 0; }
	.emma-cases-featured .e-loop-item:first-child .emma-case-image img { position: static; aspect-ratio: 4 / 3; }
	.emma-service:hover .elementor-widget-heading { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}