margin */ } body.home-wrap .section.hero-slim p:empty{ display:none; } /* hides the empty
*/ /* Reduce the top padding of the cards section */ body.home-wrap .home-hero{ padding-top: 12px; /* was 40px; adjust if you want a hair more/less */ } /* HOME — tighten the hero headline → cards space even more */ body.home-wrap .section.hero-slim{ padding: 2px 0 0; /* less vertical padding */ margin-bottom: 6px; /* tiny buffer before the cards */ } body.home-wrap .section.hero-slim h1.home-title{ margin: 0 0 2px; /* tighter headline bottom */ } body.home-wrap .section.hero-slim p{ margin: 0; /* kill default
margin */
}
body.home-wrap .section.hero-slim p:empty{ display:none; } /* safety */
/* Reduce the top padding and internal gaps of the hero block */
body.home-wrap .home-hero{
padding-top: 6px; /* was larger; now snug */
}
body.home-wrap .home-hero .wrap{
row-gap: 10px; /* less vertical gap inside the grid */
column-gap: 16px; /* slightly tighter column spacing */
}
/* Slightly tighter spacing between the two audience cards */
body.home-wrap .audience{ gap: 12px; }
/* HOME — make Services → CTA gap match other white boxes */
body.home-wrap{
--block-gap: 16px; /* change this one value to tighten/loosen globally */
}
/* same top/bottom margin as other cards */
body.home-wrap .home-services{
margin-top: var(--block-gap) !important;
margin-bottom: var(--block-gap) !important; /* was larger */
}
/* kill extra top space coming from the section wrapper */
body.home-wrap #cta.section{
padding-top: var(--block-gap) !important; /* or 0 if you want them very tight */
padding-bottom: 0; /* leave bottom to .cta-strip */
}
/* ensure the white CTA card itself doesn’t add extra top margin */
body.home-wrap #cta .cta-strip{
margin-top: 0 !important;
}
/* ============================
HOME — make hero cards as tall as the image (desktop)
============================ */
@media (min-width: 981px){
/* Let the two cells in row 2 (audience | media) share the same height */
.home-hero .wrap{ align-items: stretch; }
/* The whole audience block should fill that row’s height */
.home-hero .audience{
height: 100%;
align-items: stretch; /* grid items in the audience fill their cells */
}
/* Each card fills its grid cell vertically */
.home-hero .audience > .aud-card{
height: 100%;
}
/* Optional: give the image a sensible minimum so the cards aren’t too short */
.home-hero .hero-media{ min-height: 420px; }
}
/* #######################################################################
7) FOOTER
####################################################################### */
.footer{ background:#0f172a; color:#c9d4e6; padding:24px 0; margin-top:72px; }
.footer .bar{
width:92%; max-width:var(--container); margin:0 auto;
display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.footer a.cta{
display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
border-radius:9999px; border:1px solid rgba(255,255,255,.18); color:#e5edff;
text-decoration:none; font-weight:600;
}
.footer a.cta:hover{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.32); }
/* #######################################################################
8) PAGE SCOPES — About / FAQ / Contact / Services / Careers
####################################################################### */
/* =========================
ABOUT PAGE (scoped / tighter)
========================= */
.about-page{
/* knobs — tighter defaults */
--about-y: 10px; /* section vertical padding */
--about-gap: 8px; /* gaps between UI elements */
--about-card-pad: 10px; /* inner card padding */
--about-hero-pad: 8px; /* padding inside the about hero text */
}
/* Sections: snug + predictable spacing inside containers */
.about-page .section{ padding: var(--about-y) 0; }
.about-page .section + .section{ margin-top: var(--about-gap); }
.about-page .container > *:first-child{ margin-top: 0; }
.about-page .container > *:last-child { margin-bottom: 0; }
/* Tight hero */
body.about-page{
--about-hero-src: url("/evermorev2/assets/img/image%20for%20about%20us.png");
--about-hero-y: 50%;
--about-hero-min: 180px;
--about-hero-pref: 42vh;
--about-hero-max: 460px;
--about-hero-shade: .50;
}
body.about-page .about-hero{
position:relative; display:grid; place-items:center;
border-radius:16px; overflow:hidden; box-shadow:var(--shadow);
height: clamp(var(--about-hero-min), var(--about-hero-pref), var(--about-hero-max));
background: var(--about-hero-src) center / cover no-repeat;
background-position: 50% var(--about-hero-y);
}
body.about-page .about-hero::after{ content:none !important; }
body.about-page .about-hero::before{
content:""; position:absolute; inset:0; z-index:0;
background: linear-gradient(180deg, rgba(0,0,0,var(--about-hero-shade)), rgba(0,0,0,var(--about-hero-shade)));
pointer-events:none;
}
body.about-page .about-hero > img.hero-bg{ display:none !important; }
body.about-page .about-hero .inner{
position:relative; z-index:1; text-align:center; color:#fff !important;
padding:12px 12px; display:flex; flex-direction:column; align-items:center; gap:4px;
}
body.about-page .about-hero h2,
body.about-page .about-hero p{ color:#fff !important; text-shadow:0 2px 8px rgba(0,0,0,.35); }
body.about-page .about-hero h2{ margin:0 0 4px; }
body.about-page .about-hero p{ margin:0; }
/* Pills under hero */
.about-page .hero-pills{ display:flex; gap:6px; flex-wrap:wrap; justify-content:center; margin-top:6px; }
.about-page .hero-pills .pill{
background:#fff; color:var(--ink-900); border:1px solid var(--ink-200);
border-radius:14px; padding:6px 10px; font-weight:700; box-shadow:var(--shadow); text-shadow:none;
}
.about-page .hero-pills .pill:hover{ transform:translateY(-1px); box-shadow:0 12px 20px rgba(2,12,33,.10); }
/* Grids */
.about-page .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap: var(--about-gap); }
.about-page .grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap: var(--about-gap); }
@media (max-width: 900px){ .about-page .grid-2, .about-page .grid-3{ grid-template-columns:1fr; } }
/* Cards + headings */
.about-page .card{ padding: var(--about-card-pad); }
.about-page .card.icon h3{ margin: 0 0 4px; }
/* Lists/checklists */
.about-page .checklist{ list-style:none; padding-left:0; margin:0; }
.about-page .checklist li{ margin:4px 0; line-height:1.25; }
.about-page .checklist .check,
.about-page .checklist .xmark{
display:inline-block; min-width:1.2em; margin-right:.35rem; font-weight:900; line-height:1; transform:translateY(-1px);
}
.about-page .checklist .check{ color:#16a34a; } /* green */
.about-page .checklist .xmark{ color:#dc2626; } /* red */
/* Cards: shadow + hover lift (scoped) */
body.about-page .card{
background:#fff;
border:1px solid var(--ink-200, #e2e8f0);
border-radius:16px;
box-shadow: 0 6px 18px rgba(2,12,33,.08), 0 2px 6px rgba(2,12,33,.05);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.about-page .card:hover,
body.about-page .card:focus-within,
body.about-page .card:focus-visible{
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(2,12,33,.12), 0 6px 12px rgba(2,12,33,.08);
border-color: #cfe0ff;
}
@media (prefers-reduced-motion: reduce){
body.about-page .card{ transition: box-shadow .18s ease, border-color .18s ease; }
body.about-page .card:hover,
body.about-page .card:focus-within,
body.about-page .card:focus-visible{ transform:none; }
}
/* “Experience” chips row */
body.about-page .stat-chips{ display:flex; gap:10px; flex-wrap:wrap; }
body.about-page .stat-chips .chip{
background:transparent; border:0; box-shadow:none; padding:0; border-radius:0;
color:var(--ink-900); font-weight:700;
}
body.about-page .stat-chips .chip::before{ content:"•"; margin-right:8px; color:var(--brand-600); font-weight:900; }
/* Responsive hero tweaks */
@media (max-width: 900px){
body.about-page{ --about-hero-pref: 38vh; --about-hero-max: 520px; --about-hero-y: 50%; }
}
@media (max-width: 640px){
body.about-page{ --about-hero-pref: 42vh; --about-hero-max: 560px; --about-hero-y: 50%; }
}
/* =========================
ABOUT — tighten the 2 white-card rows
========================= */
/* Smaller base spacing on this page */
body.about-page{
--about-y: 5px; /* section padding */
--about-gap: 5px; /* gap between sections */
}
/* 1) Tighten the hero header's bottom space a bit */
body.about-page .section.hero-slim{
padding-bottom: 5px !important;
margin-bottom: 5px !important;
}
/* 2) Tighten ONLY the sections that contain the 2-up grids */
body.about-page .section:has(.grid-2){
padding-top: 5px !important; /* space above each grid row */
padding-bottom: 5px !important; /* space below each grid row */
margin-top: 5px !important; /* space between the two rows */
}
/* 3) Tighten the space before the image hero section */
body.about-page .section:has(.about-hero){
padding-top: 5px !important;
padding-bottom: 5px !important;
}
/* 4) Keep the grid itself snug */
body.about-page .grid-2{
row-gap: 10px !important; /* vertical space inside the grid */
column-gap: 10px !important;
margin-block: 0 !important;
}
/* 5) Slightly tighter card internals */
body.about-page .card{ padding: 12px 14px; }
body.about-page .card h3{ margin: 0 0 6px; }
body.about-page .card p{ margin: 6px 0; }
/* ABOUT — center the CTA card */
body.about-page{
/* how wide the centered card can get */
--about-cta-max: 480px; /* tweak this (e.g., 780–1040px) */
--about-cta-outer: clamp(16px, 4vw, 28px); /* outer breathing room */
}
.about-page .cta-card{
/* center the box and keep it from spanning the full container */
width: min(var(--about-cta-max), calc(100% - (var(--about-cta-outer) * 2)));
margin: 14px auto 24px; /* ← centers it */
padding: 16px 20px;
text-align: left; /* keep text left-aligned */
}
/* If you want the buttons centered inside the card too, keep this.
Remove it if you prefer them left or right aligned. */
.about-page .cta-card .cta-actions{
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
}
/* =========================
FAQ PAGE (scoped/tight)
========================= */
body.faq-page{
--faq-y: 8px; /* section vertical padding */
--faq-gap: 10px; /* gap between FAQ cards */
--faq-card-pad: 14px; /* inner padding on cards */
}
/* Keep hero snug under navbar */
body.faq-page .hero-slim{
padding: 6px 0 4px;
margin-top: 0;
}
body.faq-page .hero-slim h1{ margin: 0 0 4px; }
/* Sections tighter; remove surprise margins */
body.faq-page .section{ padding: var(--faq-y) 0; }
body.faq-page .container > *:first-child{ margin-top: 0; }
body.faq-page .container > *:last-child { margin-bottom: 0; }
body.faq-page .section:first-of-type{ padding-top: var(--faq-y); }
/* FAQ grids/rows closer to section heading */
body.faq-page .grid,
body.faq-page .faq-grid{
display: grid;
gap: var(--faq-gap);
margin-top: 6px; /* pull white boxes up toward the title */
}
/* White cards + hover lift (scoped) */
body.faq-page .card{
background: #fff;
border: 1px solid var(--ink-200, #e2e8f0);
border-radius: 16px;
padding: var(--faq-card-pad);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
will-change: transform;
}
body.faq-page .card:hover,
body.faq-page .card:focus-within{
transform: translateY(-2px);
box-shadow: 0 16px 28px rgba(2,12,33,.12), 0 2px 6px rgba(2,12,33,.06);
border-color: var(--brand-200, #bcd4ff);
}
/* =========================
CONTACT PAGE — TIGHT MODE
========================= */
body.contact-page{
/* knobs */
--contact-rail: clamp(16px, 4vw, 28px); /* page side gutters */
--contact-y: 10px; /* section vertical padding */
--contact-gap: 14px; /* gaps inside grids */
--contact-card-pad: 14px; /* inner padding in white boxes */
--nav-offset: calc(var(--nav-height, 72px) + 12px); /* sticky clears navbar */
background: linear-gradient(180deg,#eef3fa 0%,#f6f8fb 60%,#fff 100%);
}
/* Section rhythm + kill surprise margins inside containers */
body.contact-page .section{ padding: var(--contact-y) 0; }
body.contact-page .container > *:first-child{ margin-top: 0; }
body.contact-page .container > *:last-child { margin-bottom: 0; }
/* Toast helper (unchanged) */
.toast{
position: fixed;
left: 50%;
bottom: 20px;
transform: translate(-50%, 16px);
background: #111; color: #fff;
padding: 12px 16px; border-radius: 10px;
box-shadow: 0 10px 20px rgba(0,0,0,.25);
opacity: 0; pointer-events: none; z-index: 9999;
transition: opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity: 1; transform: translate(-50%, 0); }
/*
“Contact us / Where we work” card
*/
body.contact-page .info-card{
max-width: var(--container, 1160px);
margin: 0 auto;
padding: var(--contact-card-pad) var(--contact-rail);
background: #fff;
border: 1px solid var(--ink-200, #e2e8f0);
border-radius: var(--radius, 16px);
box-shadow: var(--shadow, 0 6px 24px rgba(16,24,40,.06));
}
/* Two-column: left content | right cards */
body.contact-page .work-grid{
display: grid;
grid-template-columns: minmax(0,1fr) 360px;
gap: var(--contact-gap);
align-items: stretch;
}
/* Map frame */
body.contact-page .map-shell{
margin-top: 8px;
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--ink-200, #e2e8f0);
background: #f7f9fc;
aspect-ratio: 16 / 9;
max-height: 360px;
}
body.contact-page .map-shell img{
width: 100%; height: 100%;
display: block; object-fit: cover; transform: scale(1.02);
}
/* Stacked contact cards (sticky on wide) */
body.contact-page .contact-cards{
display: grid;
grid-auto-rows: minmax(110px, 1fr);
border: 1px solid var(--ink-200, #e2e8f0);
border-radius: 16px;
overflow: hidden;
background: #fff;
box-shadow: var(--shadow, 0 6px 24px rgba(16,24,40,.06));
position: sticky;
top: var(--nav-offset);
}
body.contact-page .contact-cards a.contact-card{
display: flex;
flex-direction: column;
justify-content: center;
min-height: 110px;
padding: 14px 16px;
text-decoration: none; color: inherit;
border-top: 1px solid var(--ink-200, #e2e8f0);
transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
body.contact-page .contact-cards a.contact-card:first-child{ border-top: 0; }
body.contact-page .contact-cards a.contact-card:hover,
body.contact-page .contact-cards a.contact-card:focus-visible{
background: #f7faff;
transform: translateY(-1px);
box-shadow: 0 10px 16px rgba(2,6,23,.08) inset;
outline: none;
}
/* Card text */
body.contact-page .card-heading{ margin: 0 0 4px; color: var(--ink-900, #0f172a); font-weight: 800; }
body.contact-page .card-email { color: var(--brand-600, #295ff0); font-weight: 700; }
body.contact-page .card-note { color: var(--ink-600, #475569); margin-top: 4px; }
/*
Message form stack (cards)
*/
body.contact-page .contact-stack{
max-width: var(--container, 1160px);
margin: 0 auto;
padding-inline: var(--contact-rail);
display: grid;
gap: calc(var(--contact-gap) + 2px);
}
body.contact-page .contact-stack .contact-card{
background: #fff;
border: 1px solid var(--ink-200, #e2e8f0);
border-radius: 16px;
box-shadow: var(--shadow, 0 6px 24px rgba(16,24,40,.06));
padding: var(--contact-card-pad) calc(var(--contact-card-pad) + 6px);
}
/* Simple form controls */
body.contact-page .field{ margin: 8px 0; }
body.contact-page .field label{ display:block; font-weight:600; margin-bottom:6px; }
body.contact-page .field input,
body.contact-page .field textarea,
body.contact-page .field select{
width:100%;
padding:10px 12px;
border:1px solid var(--ink-300, #cbd5e1);
border-radius:12px;
background:#fff;
outline:none;
font-size:.95rem;
}
body.contact-page .field textarea{ min-height: 100px; resize: vertical; }
body.contact-page .actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px; }
body.contact-page .small-note{ color:var(--ink-600, #475569); font-size:.9rem; }
/* Jump target highlight */
body.contact-page #contact-form.flash{
animation: targetPulse 1.2s ease-in-out 2;
outline: 2px solid var(--brand-500, #295ff0);
outline-offset: 3px;
}
@keyframes targetPulse{
0% { box-shadow: 0 0 0 0 rgba(41,95,240,.35); }
100% { box-shadow: 0 0 0 12px rgba(41,95,240,0); }
}
/*
Responsive
*/
@media (max-width: 980px){
body.contact-page .work-grid{ grid-template-columns: 1fr; gap: 12px; }
body.contact-page .contact-cards{ position: static; }
body.contact-page .map-shell{ max-height: 300px; }
}
@media (prefers-reduced-motion: reduce){
body.contact-page .contact-cards a.contact-card{ transition: background-color .15s ease; }
}
/* CONTACT — align the OUTSIDE edges of every white box */
body.contact-page{
/* optional hairline tweak if you need a 1–2px visual nudge later */
--edge-nudge: 0px;
}
/* 1) Remove the extra rails around the form stack */
body.contact-page .contact-stack{
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 2) Give the *card* the same inside rails as the other cards */
body.contact-page .contact-stack .contact-card{
/* keep your vertical pad, add the shared rails horizontally */
padding: var(--contact-card-pad) calc(var(--contact-rail) + var(--edge-nudge)) !important;
}
/* (Optional) If you ever wrap other single cards on this page, use this helper */
body.contact-page .align-card-rails{
padding-left: calc(var(--contact-rail) + var(--edge-nudge));
padding-right: calc(var(--contact-rail) + var(--edge-nudge));
}
/* White box around the LEFT column only */
body.contact-page .left-card{
background:#fff;
border:1px solid var(--ink-200, #e2e8f0);
border-radius:16px;
box-shadow: var(--shadow, 0 6px 24px rgba(16,24,40,.06));
padding: var(--contact-card-pad) calc(var(--contact-card-pad) + 6px);
}
/* Tighter text spacing inside the card */
body.contact-page .left-card .small-note{
margin: 0 0 10px;
color: var(--ink-700, #334155);
}
/* Map inside the card: no extra border, rounded corners */
body.contact-page .left-card .map-shell{
margin: 0;
border: 0; /* override previous border */
background: none; /* remove gray frame */
border-radius: 12px;
overflow: hidden;
aspect-ratio: 16 / 9;
max-height: none; /* let the card control height */
}
body.contact-page .left-card .map-shell img{
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* =========================================================
SERVICES PAGE — CLEAN FINAL (scoped to body.services-page)
Paste at the end of your CSS and remove older .svc-grid /
.chip-section / .how-wrap rules to avoid conflicts.
========================================================= */
body.services-page{
/* Page rails & sizing */
--svc-rail: clamp(16px, 4vw, 28px); /* side gutters (match site) */
--svc-max: var(--container, 1160px); /* page max width (match site) */
/* Tiles */
--svc-gap: 16px; /* gap between service tiles */
/* Optional horizontal nudges (negative=left, positive=right) */
--tiles-nudge: -32px; /* moves the tile grid */
--how-nudge: -32px; /* moves the How-we-work block */
}
/* =========================
0) Heading block spacing
========================= */
body.services-page .services-hero,
body.services-page .section.hero-slim.services-hero{
max-width: var(--svc-max);
margin-inline: auto;
padding-left: max(var(--svc-rail), env(safe-area-inset-left));
padding-right: max(var(--svc-rail), env(safe-area-inset-right));
padding-block: 10px;
box-sizing: border-box;
}
/* ===========================================
1) SERVICE TILES — 3/2/1 flush with rails
=========================================== */
body.services-page .svc-grid{
max-width: var(--svc-max);
margin-inline: auto;
/* Rails + optional nudge */
padding-left: max(calc(var(--svc-rail) + var(--tiles-nudge)),
env(safe-area-inset-left));
padding-right: max(calc(var(--svc-rail) - var(--tiles-nudge)),
env(safe-area-inset-right));
box-sizing: border-box;
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important; /* desktop: 3 */
gap: var(--svc-gap) !important;
justify-content: stretch !important; /* align to rails */
justify-items: stretch !important;
overflow: visible; /* let card shadows show */
}
/* Tablet → 2 columns */
@media (max-width: 1100px){
body.services-page .svc-grid{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* Phone → 1 column */
@media (max-width: 640px){
body.services-page .svc-grid{
grid-template-columns: 1fr !important;
}
}
/* Tile items fill tracks and drop legacy widths/margins */
body.services-page .svc-grid > *{
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
/* Card look for tiles (use either .card.svc or .svc) */
body.services-page .card.svc,
body.services-page .svc{
background: #fff;
border: 1px solid var(--ink-200, #e2e8f0);
border-radius: 14px;
padding: 16px;
box-shadow: var(--shadow, 0 6px 24px rgba(16,24,40,.06));
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
body.services-page .card.svc:hover,
body.services-page .svc:hover{
transform: translateY(-2px);
box-shadow: 0 12px 22px rgba(2,12,33,.10);
border-color: #cfe0ff;
}
/* ====================================
2) CHIPS / PILLS under the tiles
==================================== */
body.services-page .chip-section{
max-width: var(--svc-max);
margin: 8px auto 10px;
padding-left: max(var(--svc-rail), env(safe-area-inset-left));
padding-right: max(var(--svc-rail), env(safe-area-inset-right));
box-sizing: border-box;
}
body.services-page .chip-row{
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center; /* change to flex-start to left-align */
}
/* Each chip/pill */
body.services-page .chip-row > *,
body.services-page .chips > *,
body.services-page .pills > *{
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
border-radius: 12px;
background: #fff;
border: 1px solid var(--ink-200, #e2e8f0);
color: var(--ink-700, #334155);
font-size: 13px;
line-height: 1;
white-space: nowrap;
box-shadow: 0 6px 18px rgba(16,24,40,.06);
}
/* =========================================
3) HOW WE WORK — card + circle image
========================================= */
body.services-page .how-wrap{
max-width: var(--svc-max);
margin-inline: auto;
/* Rails + optional nudge */
padding-left: max(calc(var(--svc-rail) + var(--how-nudge)),
env(safe-area-inset-left));
padding-right: max(calc(var(--svc-rail) - var(--how-nudge)),
env(safe-area-inset-right));
box-sizing: border-box;
overflow: visible;
display: grid;
gap: clamp(20px, 3vw, 36px);
}
/* Desktop: two columns; Mobile: single column */
@media (min-width: 901px){
body.services-page .how-wrap{
grid-template-columns: 0.62fr 0.38fr; /* left info / right image */
align-items: start;
}
}
@media (max-width: 900px){
body.services-page .how-wrap{
grid-template-columns: 1fr;
}
}
/* Left info card */
body.services-page .how{
background: #fff;
border: 1px solid var(--ink-200, #e2e8f0);
border-radius: 16px;
box-shadow: var(--shadow, 0 6px 24px rgba(16,24,40,.06));
padding: 24px 20px;
}
body.services-page .how h2{ margin: 0 0 6px; color: var(--ink-900, #0f172a); }
body.services-page .how .sub{ margin: 0 0 12px; color: var(--ink-700, #334155); max-width: 70ch; }
body.services-page .steps{ display: flex; flex-direction: column; gap: 12px; }
body.services-page .step{
background: #f7f9fd;
border: 1px solid var(--ink-200, #e2e8f0);
border-radius: 10px;
padding: 12px;
transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease, background-color .18s ease;
}
body.services-page .step:hover,
body.services-page .step:focus-within{
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(16,24,40,.10), 0 2px 6px rgba(16,24,40,.06);
border-color: #cfe0ff;
background: #fff;
}
/* Right circle image */
body.services-page .how-hero{
display: flex;
justify-content: flex-end;
align-items: center;
}
body.services-page .how-hero img{
width: clamp(260px, 32vw, 520px);
max-width: 100%;
height: auto;
aspect-ratio: 1 / 1;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 10px 28px rgba(2,6,23,.12);
}
/* ==========================
4) CTA (same rails)
========================== */
body.services-page .services-cta{
max-width: var(--svc-max);
margin: 12px auto 28px;
padding-left: max(var(--svc-rail), env(safe-area-inset-left));
padding-right: max(var(--svc-rail), env(safe-area-inset-right));
box-sizing: border-box;
background: #fff;
border: 1px solid var(--ink-200, #e2e8f0);
border-radius: 16px;
box-shadow: var(--shadow, 0 6px 24px rgba(16,24,40,.06));
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
padding-block: 16px;
}
body.services-page .services-cta .cta-copy h3{ margin: 0 0 4px; color: var(--ink-900, #0f172a); }
body.services-page .services-cta .cta-copy p { margin: 0; color: var(--ink-700, #334155); }
@media (max-width: 700px){
body.services-page .services-cta{ text-align: center; align-items: center; }
body.services-page .services-cta .cta-actions{ justify-content: center; width: 100%; }
}
/* =========================
CAREERS PAGE (scoped)
========================= */
body.careers-page{
--careers-y: 10px; /* section vertical padding */
--careers-gap: 14px; /* gaps between UI elements */
--careers-card-pad: 16px; /* inner card padding */
}
/* HERO (tight under nav) */
body.careers-page .section{ padding: var(--careers-y) 0; }
body.careers-page .section.hero-slim{ padding: 8px 0; margin-top: 0; }
body.careers-page .section.hero-slim .home-title{ margin: 0 0 6px; }
/* Intro row: paragraph left | buttons right */
body.careers-page .hero-row{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px 28px;
align-items: center;
margin-top: 8px;
}
body.careers-page .hero-row .sub{
margin: 0; max-width: 60ch; text-align: left; color: var(--ink-700, #334155);
}
body.careers-page .hero-row .hero-actions{
display: flex; gap: 12px; align-items: center; justify-content: flex-start;
}
/* Make ghost button a solid white pill here */
body.careers-page .hero-row .btn.ghost{
background:#fff; border:1px solid var(--ink-200, #e2e8f0);
color:var(--ink-900, #0f172a); box-shadow:0 8px 18px rgba(2,12,33,.08);
}
body.careers-page .hero-row .btn.ghost:hover{
transform: translateY(-1px); border-color:#cfe0ff; color: var(--brand-700, #183a9b);
}
body.careers-page .hero-row .btn.ghost:focus-visible{
outline: 2px solid var(--brand-400, #3e76ff); outline-offset: 2px;
}
/* MAIN 2-COL ROW (photo | text, smaller) */
body.careers-page .careers-row{
display: grid;
grid-template-columns: 33.33% 66.67%;
gap: var(--careers-gap);
align-items: stretch;
}
/* Photo block */
body.careers-page .careers-photo{
margin: 0; height: 100%;
border: 1px solid var(--ink-200, #e2e8f0);
border-radius: 16px; overflow: hidden;
box-shadow: var(--shadow, 0 6px 24px rgba(16,24,40,.06));
background: #f4f7fc;
}
body.careers-page .careers-photo img{
width:100%; height:100%; display:block; object-fit:cover; object-position:center;
}
/* Right column card */
body.careers-page .build-card{
display:flex; flex-direction:column; height:100%; padding: var(--careers-card-pad);
}
/* WHY JOIN EVERMORE (card) */
body.careers-page .why-join{
padding:18px 20px; border:1px solid var(--ink-200, #e2e8f0);
border-radius:16px; box-shadow: var(--shadow, 0 6px 24px rgba(16,24,40,.06));
background:#fff;
}
/* Header (no underline) */
body.careers-page .why-head{
display:flex; align-items:center; justify-content:space-between; gap:12px;
margin-bottom:10px;
}
body.careers-page .why-head h2{ margin:0; }
body.careers-page .why-tag{
display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:9999px;
font-weight:700; font-size:.9rem; color:#0f172a; background:#f7f9fd; border:1px solid #e6eeff;
}
/* Grid layout: reasons | aside */
body.careers-page .why-grid{
display:grid; gap:24px; grid-template-columns: minmax(0,1fr) 300px; align-items:flex-start;
}
/* Left: reasons list (no lines) */
body.careers-page .why-list{ margin:0; padding:0; list-style: none; }
body.careers-page .why-list li{ position:relative; padding:12px 0 12px 28px; }
body.careers-page .why-list .dot{
position:absolute; left:0; top:14px; width:10px; height:10px; border-radius:50%;
background: var(--brand-500, #295ff0); box-shadow:0 0 0 4px rgba(41,95,240,.08);
}
body.careers-page .why-list .k{ font-weight:800; color: var(--ink-900, #0f172a); }
/* Right: aside */
body.careers-page .aside-title{ margin:0 0 10px; font-weight:800; }
/* Perk list (green checks) */
body.careers-page ul.check{ list-style:none; margin:0; padding:0; }
body.careers-page ul.check li{
position:relative; padding:10px 0 10px 22px; line-height:1.25;
}
body.careers-page ul.check li::before{
content:"✓"; position:absolute; left:0; top:.1em; font-weight:800; color:#22c55e; line-height:1;
}
/* Optional red X */
body.careers-page ul.check li.x::before,
body.careers-page ul.check li.no::before{ content:"✖"; color:#ef4444; }
/* ROLES (3 → 2 → 1) */
body.careers-page .cl-roles{
display:grid; gap: var(--careers-gap);
grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: calc(var(--careers-gap) + 4px);
}
body.careers-page .cl-roles .role{
display:flex; align-items:center; justify-content:center; text-align:center;
min-height:56px; padding:14px; color:inherit; text-decoration:none;
background:#fff; border:1px solid var(--ink-200, #e2e8f0); border-radius:14px; box-shadow:0 8px 18px rgba(0,0,0,.06);
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease, color .15s ease;
}
body.careers-page .cl-roles .role:hover,
body.careers-page .cl-roles .role:focus-visible{
transform: translateY(-2px);
box-shadow: 0 12px 22px rgba(41,95,240,.22);
background: var(--brand-500, #295ff0);
border-color: var(--brand-500, #295ff0);
color:#fff;
}
body.careers-page .cl-roles .role *{ color: inherit; }
/* Feature pills (centered) */
body.careers-page .tag-row{
display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
gap:12px 24px; margin:6px 0 14px; color: var(--ink-900, #0f172a);
}
body.careers-page .tag-row .pill{
position:relative; background:#fff; color: var(--ink-900, #0f172a);
border:1px solid var(--ink-200, #e2e8f0); border-radius:9999px;
padding:8px 14px; font-weight:700; box-shadow:0 8px 18px rgba(2,12,33,.08);
}
/* CTA strip */
body.careers-page .cta-strip{
width:92%; max-width: var(--container, 1160px);
margin:0 auto 30px; padding:18px;
background:#fff; border:1px solid var(--ink-200, #e2e8f0);
border-radius:16px; box-shadow: var(--shadow, 0 6px 24px rgba(16,24,40,.06));
display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
body.careers-page .cta-strip h3{ margin:0 0 6px; }
body.careers-page .cta-strip p { margin:0; color: var(--ink-700, #334155); }
/* Responsive */
@media (max-width: 1100px){
body.careers-page .cl-roles{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 900px){
body.careers-page .hero-row{ grid-template-columns:1fr; text-align:center; }
body.careers-page .hero-row .sub{ margin:0 auto; text-align:center; }
body.careers-page .hero-row .hero-actions{ justify-content:center; }
body.careers-page .careers-row{ grid-template-columns:1fr; }
body.careers-page .careers-photo{ height:240px; }
body.careers-page .why-grid{ grid-template-columns:1fr; }
}
@media (max-width: 640px){
body.careers-page .tag-row{ gap: 10px 16px; }
body.careers-page .cl-roles{ grid-template-columns:1fr; }
}
/* =========================
CAREERS — hero intro as a white card
(works with your existing .hero-row)
========================= */
/* Knobs you can tweak */
body.careers-page{
--hero-left: 58%; /* text column width on desktop */
--hero-right: 42%; /* buttons column width on desktop */
--hero-gap: 18px; /* space between text and buttons */
--hero-pad-x: 24px; /* inside padding (left/right) */
--hero-pad-y: 16px; /* inside padding (top/bottom) */
}
/* Title spacing above the card */
body.careers-page .section.hero-slim .home-title{ margin: 0 0 10px; }
/* The card */
body.careers-page .section.hero-slim .hero-row{
display: grid !important;
grid-template-columns: var(--hero-left) var(--hero-right);
align-items: center;
gap: var(--hero-gap);
background: #fff;
border: 1px solid var(--ink-200, #e2e8f0);
border-radius: 16px;
box-shadow: 0 6px 24px rgba(16,24,40,.06);
padding: var(--hero-pad-y) var(--hero-pad-x);
margin: 8px 0 4px; /* space around the card */
box-sizing: border-box;
}
/* Text column */
body.careers-page .hero-row .sub{
margin: 0;
max-width: 66ch;
color: var(--ink-700, #334155);
}
/* Buttons column */
body.careers-page .hero-row .hero-actions{
display: flex;
justify-content: flex-end;
align-items: center;
gap: 12px;
flex-wrap: wrap;
}
/* Mobile / tablet: stack and center */
@media (max-width: 900px){
body.careers-page .section.hero-slim .hero-row{
grid-template-columns: 1fr;
text-align: center;
}
body.careers-page .hero-row .sub{ margin-inline: auto; }
body.careers-page .hero-row .hero-actions{ justify-content: center; }
}
/* === Careers hero: per-column nudges (left/right) ===
Negative = shift left, Positive = shift right
*/
body.careers-page{
/* keep your width split here if you want */
--hero-left: 60%;
--hero-right: 40%;
/* NEW: fine-tune horizontal position of each column */
--hero-left-nudge: 0px; /* moves the paragraph column */
--hero-right-nudge: 0px; /* moves the buttons column */
}
/* apply the nudges without breaking the grid */
body.careers-page .hero-row .sub{
transform: translateX(var(--hero-left-nudge));
}
body.careers-page .hero-row .hero-actions{
transform: translateX(var(--hero-right-nudge));
justify-content: flex-end; /* keeps buttons to the right of their column */
}
/* Disable nudges on small screens where the layout stacks */
@media (max-width: 900px){
body.careers-page .hero-row .sub,
body.careers-page .hero-row .hero-actions{
transform: none;
}
}
/* =========================
CAREERS — pill buttons
(primary + ghost variants)
========================= */
body.careers-page .btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
height:44px;
padding:0 20px;
border-radius:9999px;
border:1px solid transparent;
font-weight:700;
text-decoration:none;
color:#fff;
/* primary fill */
background: linear-gradient(180deg, #2e6af8 0%, #2563eb 60%, #1d4ed8 100%);
box-shadow: 0 14px 28px rgba(37,99,235,.28), inset 0 1px 0 rgba(255,255,255,.35);
transition: transform .12s ease, filter .12s ease, box-shadow .12s ease;
}
body.careers-page .btn:hover{ filter:brightness(.98); transform:translateY(-1px); }
body.careers-page .btn:focus-visible{ outline:2px solid #94b8ff; outline-offset:2px; }
/* outlined/secondary */
body.careers-page .btn.ghost{
background:#fff;
color:var(--ink-900, #0f172a);
border-color:var(--ink-300, #cbd5e1);
box-shadow:0 8px 18px rgba(16,24,40,.06);
}
body.careers-page .btn.ghost:hover{
border-color:#94a3b8;
transform:translateY(-1px);
}
/* Careers — make the intro row a white card */
body.careers-page .hero-row{
/* keep your grid */
display:grid;
grid-template-columns: 1fr 1fr; /* text | buttons */
align-items:center;
gap: 16px 24px;
/* the white box */
background:#fff;
border:1px solid var(--ink-200, #e2e8f0);
border-radius:16px;
box-shadow: 0 8px 22px rgba(2,12,33,.08), 0 2px 6px rgba(2,12,33,.05);
padding: clamp(14px, 2.5vw, 24px);
/* breathing room under the H1 */
margin-top: 10px;
}
/* tidy text + keep it readable */
body.careers-page .hero-row .sub{
margin:0;
max-width: 60ch;
color: var(--ink-700, #334155);
}
/* button group stays as-is; just ensure spacing */
body.careers-page .hero-row .hero-actions{
display:flex;
gap:12px;
justify-content:flex-start;
align-items:center;
}
/* stack nicely on small screens */
@media (max-width: 900px){
body.careers-page .hero-row{
grid-template-columns: 1fr; /* stack */
text-align:center;
}
body.careers-page .hero-row .sub{
margin-inline:auto;
}
body.careers-page .hero-row .hero-actions{
justify-content:center;
}
}
/* Careers hero — let the text fill its whole column */
body.careers-page .hero-row .sub{
max-width: none !important; /* remove the 60ch cap */
width: 100%; /* occupy the full track */
padding-right: 0; /* just in case */
}
/* (optional) keep a readable cap only on very wide screens */
@media (min-width: 1400px){
body.careers-page .hero-row .sub{ max-width: 80ch; } /* tweak or remove */
}
/* =========================
WHY JOIN — divider + centered aside
========================= */
/* Stack the two sections (reasons then aside) */
body.careers-page .why-join .why-layout{
display: block !important; /* override any grid/2-col rules */
}
/* Full-width divider under the reasons list */
body.careers-page .why-join .reasons{
margin: 0 0 14px 1.1rem; /* keep bullets slightly indented */
padding: 0 0 12px 0;
border-bottom: 2px solid #e6eefc; /* ← the line */
/* subtle highlight for a crisp line */
box-shadow: inset 0 -1px 0 rgba(255,255,255,.7);
}
/* Center the "Life at Evermore" block */
body.careers-page .why-join .why-aside{
width: fit-content;
margin: 0 auto; /* center the whole aside */
text-align: center;
}
body.careers-page .why-join .aside-title{
margin: 0 0 10px;
text-align: center;
}
/* Center the checklist itself (override default left-aligned checks) */
body.careers-page .why-join .why-aside ul.check{
list-style: none;
padding: 0;
margin: 0;
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
body.careers-page .why-join .why-aside ul.check li{
position: static; /* cancel left-indent layout */
padding: 0; /* no indent */
display: flex;
align-items: center;
gap: 6px;
line-height: 1.25;
}
body.careers-page .why-join .why-aside ul.check li::before{
content: "✓";
position: static;
color: #22c55e;
font-weight: 800;
}
/* ==== CAREERS — tighten space above the roles row ==== */
body.careers-page{
/* How much to pull the roles row upward.
Increase this value to make the gap smaller. */
--roles-tighten:2px; /* try 18–32px */
}
/* Pull the roles grid upward into the section padding */
body.careers-page .container .cl-roles{
margin-top: calc(-1 * var(--roles-tighten)) !important;
}
/* If your browser supports :has(), also reduce the section's top padding */
@supports(selector(:has(*))){
body.careers-page section:has(.cl-roles){
padding-top: 6px !important; /* was ~12px inline */
}
}
/* Keep some breathing room below the roles row */
body.careers-page .cl-roles{
margin-bottom: 10px; /* adjust if needed */
}
/* Trim the right edge of the Build card so the border sits 10px in */
@media (min-width: 901px){
body.careers-page .build-card{
box-sizing: border-box; /* width includes padding + border */
width: calc(100% - 14px); /* <-- change 10px to taste */
}
}
/* Optional: don’t trim on single-column mobile */
@media (max-width: 900px){
body.careers-page .build-card{
width: auto;
}
}
/* ==============================
SERVICES — Pill chips row only
(adds white pill boxes + aligns
the row to the same rails)
============================== */
body.services-page{ --svc-rail: clamp(16px, 4vw, 28px); }
/* The row container: same width & rails as other white boxes */
body.services-page .chip-section{
max-width: var(--container, 1160px);
margin: 6px auto 12px;
padding-inline: var(--svc-rail);
box-sizing: border-box;
}
/* The chips line */
body.services-page .chip-row{
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center; /* or flex-start if you prefer left-aligned */
}
/* Turn each item into a pill; works for , ,