/* =========================================================================
GREENERY IMPORT EXPORT LTD. — VISUAL & DIAGRAM LAYER
Added on top of styles.css. Nothing here overrides existing components;
it only adds new ones, so every existing page keeps working unchanged.
Design goal: a 70-year-old with no import experience should understand
the page from the pictures alone. Big type, obvious icons, clear arrows,
and one consistent colour code:
GREEN = Greenery does this for you
WHITE = you do this / this is yours
AMBER = the problem, the old way, the risk
Every diagram is plain HTML + CSS (no JavaScript, no libraries) and
reflows to a single readable column on phones.
========================================================================= */
/* -------------------------------------------------------------------------
1. PLAIN-LANGUAGE TYPE HELPERS
Larger, calmer text for the "explain it simply" moments.
------------------------------------------------------------------------- */
.plain { font-size:clamp(18px,2vw,21px); line-height:1.65; color:var(--gray-600); }
.plain strong { color:var(--ink); font-weight:650; }
.say-big { font-size:clamp(22px,3.1vw,32px); line-height:1.35; font-weight:650;
letter-spacing:-.025em; color:var(--ink); }
.say-big em { font-style:normal; color:var(--green-700); }
.say-big--white { color:#fff; }
.say-big--white em { color:var(--green-200); }
.muted-note { font-size:15px; color:var(--gray-500); }
/* A short line that sits under a diagram and says what it means. */
.dgm-caption {
display:flex; align-items:flex-start; gap:10px; justify-content:center; text-align:center;
max-width:70ch; margin:22px auto 0; font-size:15.5px; color:var(--gray-500); line-height:1.6;
}
.dgm-caption svg { width:18px; height:18px; color:var(--green-600); flex-shrink:0; margin-top:3px; }
.dgm-caption strong { color:var(--gray-700); }
/* Neutral frame that any diagram can sit inside on a white section. */
.dgm-frame {
background:var(--white); border:1px solid var(--gray-200); border-radius:var(--r-lg);
padding:clamp(22px,3.4vw,40px); box-shadow:var(--sh-sm);
}
.dgm-frame--soft { background:var(--gray-50); box-shadow:none; }
.dgm-frame--tint { background:var(--green-tint); border-color:var(--green-100); box-shadow:none; }
.dgm-title {
font-size:13px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
color:var(--green-700); text-align:center; margin-bottom:26px;
}
/* -------------------------------------------------------------------------
2. FLOW — a left-to-right process with arrows between the steps.
Use for: "how it works", "from your idea to your customer".
Markup:
------------------------------------------------------------------------- */
.flow { display:flex; align-items:stretch; justify-content:center; gap:0; flex-wrap:nowrap; }
.flow-step {
flex:1 1 0; min-width:0; text-align:center; background:#fff;
border:1px solid var(--gray-200); border-radius:var(--r); padding:26px 20px 24px;
display:flex; flex-direction:column; align-items:center; position:relative;
transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.flow-step:hover { transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--green-200); }
.flow-step .fs-num {
position:absolute; top:-15px; left:50%; transform:translateX(-50%);
width:32px; height:32px; border-radius:50%; background:var(--green-700); color:#fff;
display:grid; place-items:center; font-size:14.5px; font-weight:700;
box-shadow:0 0 0 5px #fff, var(--sh-xs);
}
.section--soft .flow-step .fs-num,
.dgm-frame--soft .flow-step .fs-num { box-shadow:0 0 0 5px var(--gray-50), var(--sh-xs); }
.section--tint .flow-step .fs-num,
.dgm-frame--tint .flow-step .fs-num { box-shadow:0 0 0 5px var(--green-tint), var(--sh-xs); }
.flow-step .fs-ic {
width:60px; height:60px; border-radius:18px; background:var(--green-50);
border:1px solid var(--green-100); color:var(--green-700);
display:grid; place-items:center; margin:14px 0 16px;
}
.flow-step .fs-ic svg { width:30px; height:30px; }
.flow-step h3 { font-size:17.5px; margin-bottom:8px; letter-spacing:-.02em; }
.flow-step p { font-size:14.5px; color:var(--gray-500); line-height:1.55; }
.flow-step .fs-who {
margin-top:14px; font-size:11.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
color:var(--green-700); background:var(--green-50); border:1px solid var(--green-100);
padding:5px 11px; border-radius:var(--pill);
}
.flow-step .fs-who--you { color:var(--gray-600); background:var(--gray-100); border-color:var(--gray-200); }
.flow-arrow { display:grid; place-items:center; color:var(--green-300,#9ccdb2); padding:0 6px; flex:0 0 auto; }
.flow-arrow svg { width:26px; height:26px; }
@media (max-width:980px){
.flow { flex-direction:column; align-items:stretch; gap:0; }
.flow-step { padding-top:30px; }
.flow-step .fs-num { top:-14px; }
.flow-arrow { transform:rotate(90deg); padding:10px 0; }
}
/* -------------------------------------------------------------------------
3. DUTY SPLIT — "You do this / We do this".
The single clearest way to explain the brand service.
Markup:
------------------------------------------------------------------------- */
.duty { display:grid; grid-template-columns:1fr auto 1fr; align-items:stretch; gap:0; }
.duty-col { border-radius:var(--r-lg); padding:clamp(24px,3.2vw,36px); }
.duty-col--you { background:#fff; border:1px solid var(--gray-200); box-shadow:var(--sh-sm); }
.duty-col--us { background:var(--green-700); border:1px solid var(--green-700); color:#fff;
box-shadow:0 10px 34px rgba(14,51,32,.20); }
.duty-head { display:flex; align-items:center; gap:14px; padding-bottom:20px; margin-bottom:20px;
border-bottom:1px solid var(--gray-200); }
.duty-col--us .duty-head { border-bottom-color:rgba(255,255,255,.22); }
.duty-head .dh-ic { width:46px; height:46px; border-radius:14px; display:grid; place-items:center; flex-shrink:0;
background:var(--gray-100); color:var(--gray-700); border:1px solid var(--gray-200); }
.duty-col--us .duty-head .dh-ic { background:rgba(255,255,255,.16); color:#fff; border-color:rgba(255,255,255,.22); }
.duty-head .dh-ic svg { width:24px; height:24px; }
.duty-head .dh-kicker { font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
color:var(--gray-400); display:block; margin-bottom:3px; }
.duty-col--us .duty-head .dh-kicker { color:var(--green-200); }
.duty-head h3 { font-size:clamp(19px,2.2vw,23px); letter-spacing:-.025em; }
.duty-col--us .duty-head h3 { color:#fff; }
.duty-list li { display:flex; gap:12px; align-items:flex-start; padding:9px 0; font-size:16px; line-height:1.5; color:var(--gray-700); }
.duty-list li::before {
content:""; flex-shrink:0; margin-top:3px; width:20px; height:20px; border-radius:50%;
background:var(--gray-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.duty-col--us .duty-list li { color:rgba(255,255,255,.92); }
.duty-col--us .duty-list li::before {
background:rgba(255,255,255,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
.duty-foot { margin-top:22px; padding-top:18px; border-top:1px solid var(--gray-200); font-size:14.5px; color:var(--gray-500); }
.duty-col--us .duty-foot { border-top-color:rgba(255,255,255,.22); color:rgba(255,255,255,.72); }
.duty-vs { display:grid; place-items:center; padding:0 18px; }
.duty-vs span {
width:52px; height:52px; border-radius:50%; background:#fff; border:1px solid var(--gray-200);
display:grid; place-items:center; font-size:23px; font-weight:700; color:var(--green-700);
box-shadow:var(--sh-md);
}
@media (max-width:900px){
.duty { grid-template-columns:1fr; }
.duty-vs { padding:14px 0; }
}
/* -------------------------------------------------------------------------
4. JOURNEY — a vertical numbered timeline with a connecting line.
Use for: the brand-building journey, longer step-by-step stories.
------------------------------------------------------------------------- */
.journey { position:relative; display:grid; gap:6px; }
.jstep { display:grid; grid-template-columns:auto 1fr; gap:24px; position:relative; padding-bottom:34px; }
.jstep:last-child { padding-bottom:0; }
.jstep::before { /* the connecting line */
content:""; position:absolute; left:27px; top:58px; bottom:-6px; width:2px;
background:linear-gradient(to bottom,var(--green-200),var(--gray-200));
}
.jstep:last-child::before { display:none; }
.jstep-marker {
width:56px; height:56px; border-radius:18px; background:var(--green-700); color:#fff;
display:grid; place-items:center; font-size:20px; font-weight:700; flex-shrink:0;
box-shadow:0 6px 16px rgba(26,92,56,.24); position:relative; z-index:1;
}
.jstep-marker svg { width:26px; height:26px; }
.jstep-body { padding-top:4px; }
.jstep-body .js-tag {
display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700;
letter-spacing:.08em; text-transform:uppercase; color:var(--green-700);
background:var(--green-50); border:1px solid var(--green-100);
padding:4px 11px; border-radius:var(--pill); margin-bottom:11px;
}
.jstep-body .js-tag--you { color:var(--gray-600); background:var(--gray-100); border-color:var(--gray-200); }
.jstep-body h3 { font-size:clamp(19px,2.1vw,22px); margin-bottom:9px; letter-spacing:-.025em; }
.jstep-body p { font-size:16px; color:var(--gray-500); line-height:1.62; max-width:62ch; }
.jstep-body .js-detail { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
@media (max-width:600px){
.jstep { grid-template-columns:auto 1fr; gap:16px; }
.jstep-marker { width:46px; height:46px; font-size:17px; border-radius:14px; }
.jstep-marker svg { width:22px; height:22px; }
.jstep::before { left:22px; top:50px; }
}
/* -------------------------------------------------------------------------
5. COMPARE — "the hard way" beside "with Greenery".
------------------------------------------------------------------------- */
.compare { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.comp-card { border-radius:var(--r-lg); padding:clamp(24px,3vw,34px); border:1px solid var(--gray-200); background:#fff; }
.comp-card--bad { background:var(--amber-bg); border-color:var(--amber-bd); }
.comp-card--good { background:var(--green-tint); border-color:var(--green-200); }
.comp-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.comp-head .ch-ic { width:42px; height:42px; border-radius:13px; display:grid; place-items:center; flex-shrink:0; }
.comp-head .ch-ic svg { width:22px; height:22px; }
.comp-card--bad .ch-ic { background:#f7e2c8; color:var(--amber-fg); }
.comp-card--good .ch-ic { background:var(--green-100); color:var(--green-700); }
.comp-head h3 { font-size:clamp(18px,2vw,21px); letter-spacing:-.025em; }
.comp-card--bad .comp-head h3 { color:#7c4a06; }
.comp-card--good .comp-head h3 { color:var(--green-900); }
.comp-list li { display:flex; gap:11px; align-items:flex-start; padding:8px 0; font-size:15.5px; line-height:1.55; }
.comp-list li::before { content:""; flex-shrink:0; margin-top:2px; width:20px; height:20px; border-radius:50%; }
.comp-card--bad .comp-list li { color:#7c4a06; }
.comp-card--bad .comp-list li::before {
background:#f4d3ae url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b45309' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/11px no-repeat;
}
.comp-card--good .comp-list li { color:var(--green-900); }
.comp-card--good .comp-list li::before {
background:var(--green-200) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230e3320' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat;
}
@media (max-width:820px){ .compare { grid-template-columns:1fr; } }
/* -------------------------------------------------------------------------
6. LOOP — a repeating cycle (order → ship → restock → order).
Four nodes around a labelled centre. Becomes a simple list on mobile.
------------------------------------------------------------------------- */
/* The centre column gap must clear the dashed ring, or the badge sits on top of
the cards. Geometry, in order: badge 140 + 8px ring = 156, dashed ring 184,
gutter 200. Change one, re-check the other two. */
.loop { display:grid; grid-template-columns:1fr 1fr; gap:24px 200px; position:relative; max-width:1000px; margin:0 auto; }
.loop::before { /* the cycle ring, sitting in the gutter */
content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:184px; height:184px; border-radius:50%;
border:2px dashed var(--green-200); pointer-events:none;
}
.loop-mid {
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
width:140px; height:140px; border-radius:50%; background:var(--green-700); color:#fff;
display:grid; place-items:center; text-align:center; padding:12px;
box-shadow:0 10px 30px rgba(14,51,32,.24), 0 0 0 8px var(--white);
}
.section--soft .loop-mid { box-shadow:0 10px 30px rgba(14,51,32,.24), 0 0 0 8px var(--gray-50); }
.section--tint .loop-mid { box-shadow:0 10px 30px rgba(14,51,32,.24), 0 0 0 8px var(--green-tint); }
.loop-mid .lm-t { font-size:14.5px; font-weight:700; line-height:1.22; letter-spacing:-.015em; }
.loop-mid .lm-s { font-size:11px; color:var(--green-200); margin-top:5px; line-height:1.3; }
.loop-node { background:#fff; border:1px solid var(--gray-200); border-radius:var(--r); padding:20px 22px; box-shadow:var(--sh-xs); }
.loop-node .ln-n { font-size:11.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--green-600); }
.loop-node h3 { font-size:17px; margin:7px 0 6px; letter-spacing:-.02em; }
.loop-node p { font-size:14.5px; color:var(--gray-500); line-height:1.5; }
@media (max-width:820px){
.loop { grid-template-columns:1fr; gap:14px; }
.loop::before { display:none; }
.loop-mid { position:static; transform:none; width:auto; height:auto; border-radius:var(--r);
padding:18px; box-shadow:var(--sh-sm); margin-bottom:4px; }
.loop-mid .lm-t { font-size:16px; }
}
/* -------------------------------------------------------------------------
7. PHOTO COMPONENTS — real pictures, used generously.
------------------------------------------------------------------------- */
/* Photo hero: full-bleed image behind the headline. */
.hero--photo { color:#fff; padding:clamp(74px,10vw,132px) 0 clamp(64px,9vw,118px); }
.hero--photo::before { display:none; }
.hero--photo .hero-bg { position:absolute; inset:0; z-index:-2; overflow:hidden; }
.hero--photo .hero-bg img { width:100%; height:100%; object-fit:cover; }
/* Scrim over the hero photo. The stops are deliberate, not decorative:
the headline and lead sit in the left ~66%, so the overlay stays at .84+
there — which keeps white text above 4.5:1 contrast even if the photo is
swapped for a very bright one — then falls away to .32 on the right so the
photograph is actually visible instead of being crushed to a flat green. */
.hero--photo .hero-bg::after {
content:""; position:absolute; inset:0;
background:linear-gradient(100deg,
rgba(9,32,20,.92) 0%,
rgba(10,38,24,.84) 66%,
rgba(12,44,28,.52) 84%,
rgba(14,51,32,.32) 100%);
}
/* Once the layout stacks, text runs the full width, so the scrim must too. */
@media (max-width:860px){
.hero--photo .hero-bg::after {
background:linear-gradient(180deg, rgba(9,32,20,.86) 0%, rgba(11,40,25,.88) 60%, rgba(12,44,28,.90) 100%);
}
}
.hero--photo h1 { color:#fff; }
/* .92 not .85 — over a photo scrim the lead is the first thing to fall below
4.5:1, and 20px body text has no large-text contrast allowance to fall back on. */
.hero--photo p.lead { color:rgba(255,255,255,.92); }
.hero--photo .hero-eyebrow { background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.28); color:#fff;
backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.hero--photo .hero-eyebrow .dot { background:var(--green-200); box-shadow:0 0 0 4px rgba(191,224,205,.22); }
.hero--photo .trust-line span { color:rgba(255,255,255,.86); }
.hero--photo .trust-line svg { color:var(--green-200); }
/* Photo card: image on top, words underneath. */
.photo-card {
background:#fff; border:1px solid var(--gray-200); border-radius:var(--r); overflow:hidden;
display:flex; flex-direction:column; height:100%;
transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.photo-card:hover { transform:translateY(-5px); box-shadow:var(--sh-lg); border-color:var(--green-200); }
.pc-img { position:relative; aspect-ratio:16/10; overflow:hidden; background:linear-gradient(135deg,var(--green-600),var(--green-900)); }
.pc-img img { width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.photo-card:hover .pc-img img { transform:scale(1.05); }
.pc-img .pc-tag {
position:absolute; top:13px; left:13px; z-index:2; font-size:11.5px; font-weight:700;
background:rgba(255,255,255,.95); color:var(--green-700); padding:5px 12px;
border-radius:var(--pill); box-shadow:var(--sh-xs);
}
.pc-img .pc-ic {
position:absolute; bottom:13px; left:13px; z-index:2; width:42px; height:42px; border-radius:13px;
background:rgba(255,255,255,.94); color:var(--green-700); display:grid; place-items:center; box-shadow:var(--sh-sm);
}
.pc-img .pc-ic svg { width:22px; height:22px; }
.pc-body { padding:22px 24px 26px; display:flex; flex-direction:column; flex:1; }
.pc-body h3 { font-size:19px; margin-bottom:9px; letter-spacing:-.022em; }
.pc-body p { font-size:15.5px; color:var(--gray-500); line-height:1.6; }
.pc-body .pc-more { margin-top:auto; padding-top:16px; font-size:14.5px; font-weight:650; color:var(--green-700);
display:inline-flex; align-items:center; gap:7px; }
.pc-body .pc-more svg { width:16px; height:16px; transition:transform .2s var(--ease); }
.photo-card:hover .pc-more svg { transform:translateX(3px); }
/* Framed picture beside text (use inside .split). */
.figure-frame { border-radius:var(--r-lg); overflow:hidden; border:1px solid var(--gray-200); box-shadow:var(--sh-lg); position:relative; }
.figure-frame img { width:100%; height:100%; object-fit:cover; aspect-ratio:4/3; }
.figure-frame figcaption {
position:absolute; left:0; right:0; bottom:0; padding:38px 20px 16px; color:#fff; font-size:14.5px; font-weight:600;
background:linear-gradient(to top, rgba(8,20,13,.82), rgba(8,20,13,0));
}
.figure-frame--tall img { aspect-ratio:3/4; }
/* A photo strip: several pictures in a row, captioned. */
.photo-strip { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.photo-strip figure { border-radius:var(--r); overflow:hidden; position:relative; border:1px solid var(--gray-200); box-shadow:var(--sh-sm); }
.photo-strip img { width:100%; aspect-ratio:1/1; object-fit:cover; }
.photo-strip figcaption {
position:absolute; left:0; right:0; bottom:0; padding:30px 12px 11px; color:#fff; font-size:13px; font-weight:600;
background:linear-gradient(to top, rgba(8,20,13,.8), rgba(8,20,13,0));
}
@media (max-width:860px){ .photo-strip { grid-template-columns:repeat(2,1fr); } }
/* -------------------------------------------------------------------------
8. ICON ROW — a handful of very obvious icons with one-word labels.
Good for "what we bring in" at a glance.
------------------------------------------------------------------------- */
.iconrow { display:grid; grid-template-columns:repeat(5,1fr); gap:18px; }
.iconrow-item {
text-align:center; padding:24px 14px; border-radius:var(--r); background:#fff;
border:1px solid var(--gray-200); transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.iconrow-item:hover { transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--green-200); }
.iconrow-item .ir-ic {
width:64px; height:64px; margin:0 auto 15px; border-radius:20px; display:grid; place-items:center;
background:var(--green-50); border:1px solid var(--green-100); color:var(--green-700);
}
.iconrow-item .ir-ic svg { width:32px; height:32px; }
.iconrow-item h3 { font-size:16px; margin-bottom:6px; letter-spacing:-.02em; }
.iconrow-item p { font-size:13.5px; color:var(--gray-500); line-height:1.5; }
@media (max-width:980px){ .iconrow { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .iconrow { grid-template-columns:repeat(2,1fr); } .iconrow-item{ padding:20px 10px; } }
/* -------------------------------------------------------------------------
9. ROUTE — "made over there → delivered right here".
A simple two-ended map line. Purely decorative, screen-reader hidden.
------------------------------------------------------------------------- */
.route { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:clamp(14px,3vw,34px); }
.route-end { text-align:center; }
.route-end .re-ic {
width:74px; height:74px; margin:0 auto 14px; border-radius:24px; display:grid; place-items:center;
background:#fff; border:1px solid var(--gray-200); color:var(--green-700); box-shadow:var(--sh-md);
}
.route-end .re-ic svg { width:36px; height:36px; }
.route-end--dest .re-ic { background:var(--green-700); color:#fff; border-color:var(--green-700); }
.route-end h3 { font-size:18px; margin-bottom:6px; letter-spacing:-.02em; }
.route-end p { font-size:14.5px; color:var(--gray-500); }
.route-line { position:relative; min-height:74px; display:grid; place-items:center; }
.route-line svg { width:100%; height:auto; max-width:340px; color:var(--green-500); overflow:visible; }
.route-line .rl-label {
position:absolute; top:-4px; left:50%; transform:translateX(-50%);
font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--green-700);
background:var(--green-50); border:1px solid var(--green-100); padding:5px 13px; border-radius:var(--pill); white-space:nowrap;
}
@media (max-width:760px){
.route { grid-template-columns:1fr; gap:16px; }
.route-line { transform:rotate(90deg); min-height:96px; }
.route-line .rl-label { transform:translateX(-50%) rotate(-90deg); top:auto; }
}
/* -------------------------------------------------------------------------
10. LAYERS — a stack showing everything included in one price/service.
------------------------------------------------------------------------- */
.layers { display:grid; gap:10px; max-width:640px; margin:0 auto; }
.layer {
display:flex; align-items:center; gap:16px; padding:16px 20px; border-radius:var(--r-sm);
background:#fff; border:1px solid var(--gray-200); box-shadow:var(--sh-xs);
}
.layer .ly-ic { width:38px; height:38px; border-radius:11px; background:var(--green-50); border:1px solid var(--green-100);
color:var(--green-700); display:grid; place-items:center; flex-shrink:0; }
.layer .ly-ic svg { width:19px; height:19px; }
.layer .ly-t { font-size:16px; font-weight:600; color:var(--ink); }
.layer .ly-s { font-size:13.5px; color:var(--gray-500); margin-top:2px; }
.layer--total { background:var(--green-700); border-color:var(--green-700); box-shadow:var(--sh-md); }
.layer--total .ly-ic { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.24); color:#fff; }
.layer--total .ly-t { color:#fff; font-weight:700; }
.layer--total .ly-s { color:rgba(255,255,255,.72); }
/* -------------------------------------------------------------------------
11. BIG STATEMENT BAND — one sentence, huge, on brand green.
------------------------------------------------------------------------- */
.statement { background:var(--green-900); color:#fff; position:relative; overflow:hidden; }
.statement::before {
content:""; position:absolute; inset:0;
background:radial-gradient(60% 130% at 15% 0%, rgba(143,211,172,.15), transparent 60%),
radial-gradient(50% 120% at 95% 100%, rgba(143,211,172,.10), transparent 58%);
}
.statement .container { position:relative; }
.statement h2 { color:#fff; }
.statement p { color:rgba(255,255,255,.8); }
/* -------------------------------------------------------------------------
12. NUMBERED "PLAIN ENGLISH" CARDS — big number, short sentence.
------------------------------------------------------------------------- */
.plaincard { background:#fff; border:1px solid var(--gray-200); border-radius:var(--r); padding:28px; height:100%; }
.plaincard .pn {
font-size:40px; font-weight:720; line-height:1; letter-spacing:-.04em; color:var(--green-200); margin-bottom:14px;
}
.plaincard h3 { font-size:19px; margin-bottom:9px; letter-spacing:-.022em; }
.plaincard p { font-size:15.5px; color:var(--gray-500); line-height:1.6; }
/* -------------------------------------------------------------------------
13. SMALL ADDITIONS to existing patterns
------------------------------------------------------------------------- */
.grid-5 { grid-template-columns:repeat(5,1fr); }
@media (max-width:980px){ .grid-5 { grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .grid-5 { grid-template-columns:repeat(2,1fr); } }
.card--flat { box-shadow:none; }
.stretch { height:100%; }
.grid--stretch > * { height:100%; }
.mw-none { max-width:none; }
/* Sub-navigation used on long pages so readers can jump straight to a part. */
.jumpbar { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; }
.jumpbar a {
font-size:14.5px; font-weight:600; color:var(--gray-700); background:#fff;
border:1px solid var(--gray-200); padding:9px 17px; border-radius:var(--pill);
transition:border-color .15s, color .15s, background .15s;
}
.jumpbar a:hover { color:var(--green-700); border-color:var(--green-500); background:var(--green-50); }
/* Green tick used inline in prose. */
.tick { display:inline-grid; place-items:center; width:19px; height:19px; border-radius:50%;
background:var(--green-50); vertical-align:-4px; margin-right:5px; }
.tick svg { width:11px; height:11px; color:var(--green-700); }
/* An image that must never look broken if the file is missing. */
img.safe { background:linear-gradient(135deg,var(--green-tint),var(--green-100)); }
/* -------------------------------------------------------------------------
14. NAVIGATION FIT — required by the 7th nav item ("Your Brand")
The original nav was sized for 6 links and only handed over to the hamburger
at 860px. With 7 links the full-size bar needs ~1103px of the 1104px available
at 1160px container width — a 1px margin — and it overflowed the whole way
from 861px up to ~1180px. Two changes fix it, and they must stay in step:
a) tighten the bar below 1200px so it fits comfortably;
b) hand over to the hamburger at 1000px instead of 860px.
These live here rather than in styles.css so the original file stays untouched;
diagrams.css loads second, so equal-specificity rules here win.
------------------------------------------------------------------------- */
/* a) Full bar, 1061px and up: tighter than the 6-link original so 7 fit with
real headroom (~120px) rather than the 1px the untightened bar had. */
@media (min-width:1061px){
.nav { gap:16px; }
.nav-links { gap:2px; }
.nav-links a { font-size:14.5px; padding:8px 10px; white-space:nowrap; }
.nav-links a.active::after { left:10px; right:10px; }
.nav-ctas .btn { padding:10px 16px; font-size:14px; white-space:nowrap; }
}
/* Narrow end of the full-bar range needs the last few pixels: drop the logo's
second line and tighten once more. */
@media (min-width:1061px) and (max-width:1240px){
.logo-tag { display:none; }
.nav-links a { font-size:14px; padding:8px 8px; }
.nav-links a.active::after { left:8px; right:8px; }
}
/* b) Hamburger at 1060px, not 860px — below this the 7-link bar wraps. */
@media (max-width:1060px){
html { scroll-padding-top:70px; }
/* min-height, NOT height. With a fixed height the open menu overflows the
header box and the links paint straight onto the hero photo with no
background behind them. The bar must be free to grow when it wraps. */
.nav { height:auto; min-height:66px; flex-wrap:wrap; gap:24px; }
.nav-toggle { display:block; order:2; }
.logo { order:1; }
.logo-tag { display:block; }
.nav-links, .nav-ctas { order:3; width:100%; display:none; }
.site-header.open .nav-links {
display:flex; flex-direction:column; align-items:stretch; gap:2px;
margin-top:6px; padding-top:8px; border-top:1px solid var(--gray-150);
}
.site-header.open .nav-links a { padding:13px 6px; font-size:16px; border-radius:8px; }
.site-header.open .nav-links a.active::after { display:none; }
.site-header.open .nav-ctas { display:flex; flex-direction:column; gap:10px; padding:10px 0 14px; }
.site-header.open .nav-ctas .btn { width:100%; padding:14px 24px; font-size:16px; }
/* Solid, not frosted, while the menu is open — the panel now covers a photo
hero on every page, and 80% white over a dark image is not a safe backdrop. */
.site-header.open { background:#fff; border-bottom-color:var(--gray-200); box-shadow:var(--sh-md); }
}
/* -------------------------------------------------------------------------
15. MEDIA — video, testimonials and social proof.
Built so the SPACE exists now and fills in later: the company is new, so
nothing here fabricates a review or a view count. Video cards are a
click-to-load facade — YouTube is only contacted once someone presses play,
so an unfilled card costs nothing and leaks nothing.
------------------------------------------------------------------------- */
.video-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:980px){ .video-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .video-grid { grid-template-columns:1fr; } }
.video-card {
background:#fff; border:1px solid var(--gray-200); border-radius:var(--r); overflow:hidden;
display:flex; flex-direction:column; text-align:left; width:100%; padding:0;
font-family:inherit; cursor:pointer;
transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.video-card:hover { transform:translateY(-4px); box-shadow:var(--sh-md); border-color:var(--green-200); }
.vc-media {
position:relative; aspect-ratio:16/9; overflow:hidden;
background:linear-gradient(140deg,var(--green-700),var(--green-900));
display:grid; place-items:center;
}
.vc-media img { width:100%; height:100%; object-fit:cover; }
.vc-media iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.vc-play {
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
width:62px; height:62px; border-radius:50%; background:rgba(255,255,255,.94);
display:grid; place-items:center; box-shadow:0 6px 22px rgba(8,20,13,.34);
transition:transform .22s var(--ease), background .2s;
}
.vc-play svg { width:24px; height:24px; color:var(--green-700); margin-left:3px; }
.video-card:hover .vc-play { transform:translate(-50%,-50%) scale(1.09); background:#fff; }
.vc-badge {
position:absolute; top:12px; left:12px; font-size:11.5px; font-weight:700;
background:rgba(8,20,13,.72); color:#fff; padding:5px 11px; border-radius:var(--pill);
display:inline-flex; align-items:center; gap:6px; backdrop-filter:blur(4px);
}
.vc-badge svg { width:13px; height:13px; }
.vc-body { padding:18px 20px 22px; }
.vc-body h3 { font-size:17px; margin-bottom:6px; letter-spacing:-.02em; }
/* .vc-text, not . A may only contain phrasing content, so a
paragraph inside the card is invalid HTML — this is the span that replaces it. */
.vc-body .vc-text { display:block; font-size:14.5px; color:var(--gray-500); line-height:1.55; }
.vc-body p { font-size:14.5px; color:var(--gray-500); line-height:1.55; }
/* An honest empty state. Used until there is real content to put in the slot —
it reserves the space without pretending to be a review that does not exist. */
.slot {
border:1.5px dashed var(--gray-300); border-radius:var(--r); background:var(--gray-50);
padding:26px 24px; display:flex; flex-direction:column; justify-content:center; min-height:186px;
}
.slot .slot-ic { width:40px; height:40px; border-radius:12px; background:var(--white);
border:1px solid var(--gray-200); color:var(--gray-400);
display:grid; place-items:center; margin-bottom:14px; }
.slot .slot-ic svg { width:20px; height:20px; }
.slot h3 { font-size:16px; color:var(--gray-600); margin-bottom:7px; letter-spacing:-.015em; }
.slot p { font-size:14px; color:var(--gray-500); line-height:1.55; }
.slot--video { min-height:0; padding:0; overflow:hidden; }
.slot--video .vc-media { background:linear-gradient(140deg,var(--gray-200),var(--gray-300)); }
.slot--video .vc-play { background:rgba(255,255,255,.9); }
.slot--video .vc-play svg { color:var(--gray-500); }
/* Follow-us row: the channels the videos will live on. */
.social-row { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.social-btn {
display:inline-flex; align-items:center; gap:10px; font-size:15px; font-weight:600;
color:var(--gray-700); background:#fff; border:1px solid var(--gray-200);
padding:11px 20px; border-radius:var(--pill); box-shadow:var(--sh-xs);
transition:border-color .15s, color .15s, transform .15s var(--ease);
}
.social-btn:hover { border-color:var(--green-500); color:var(--green-700); transform:translateY(-2px); }
.social-btn svg { width:19px; height:19px; }
/* Illustrated thumbnail — for a category that has no photograph yet. Reads as a
deliberate icon panel rather than a broken image. Swap for a real