← col 1: headline + supporting copy
...
...
← col 2: CTA standing alone
Do NOT place h2 directly in col 1 with tag+CTA bundled together in col 2.
That orphans the headline on the left and stacks the copy with the button
on the right. The headline belongs WITH its supporting copy in the inner
div; the CTA sits alone in its own column. */
.closing-grid{
display:grid;
grid-template-columns:1.4fr 1fr;
gap:clamp(2rem,5vw,4rem);
align-items:end;
}
.closing h2{
font-family:var(--sans); font-weight:200;
font-size:clamp(1.8rem,3.4vw,2.8rem);
line-height:1.08;
letter-spacing:-.022em; color:var(--on-blue);
max-width:30rem;
margin-bottom:1.6rem;
}
.closing h2 em{
font-family:var(--sans); font-style:normal; font-weight:200;
color:var(--on-blue);
}
.closing-tag{
font-family:var(--sans);
font-weight:400;
font-size:clamp(1.3rem,1.7vw,1.55rem);
line-height:1.35;
color:var(--on-blue);
max-width:30rem; text-wrap:balance;
}
.closing-cta{
background:var(--on-blue); color:var(--blue);
font-family:var(--sans); font-size:.94rem; font-weight:500;
padding:.85rem 1.5rem; border-radius:999px;
display:inline-flex; gap:.7rem; align-items:center;
transition:all .25s ease;
justify-self:start;
align-self:end;
white-space:nowrap;
}
.closing-cta .arr{ display:inline-block; transition:transform .3s ease; }
.closing-cta:hover{ background:#fff; gap:1rem; }
.closing-cta:hover .arr{ transform:translate(2px,-2px); }
/* ──── footer — dark #242424 ──── */
footer{
background:var(--ink-foot);
color:var(--paper-soft);
padding:clamp(4rem,8vw,6rem) 0 2rem;
position:relative; z-index:10;
}
.foot-lockup{ display:block; width:fit-content; margin-bottom:clamp(4rem,8vw,6rem); }
.foot-grid{
display:grid;
grid-template-columns:5fr 2fr 2fr;
column-gap:clamp(2rem,5vw,4rem);
row-gap:2rem;
margin-bottom:3rem;
align-items:start;
}
.foot-col a, .foot-col .item{
display:block; font-size:.94rem; color:var(--paper-soft);
margin-bottom:.7rem; transition:color .25s ease;
line-height:1.4;
}
.foot-col a:hover{ color:var(--paper); }
.foot-lockup svg{ width:clamp(160px,17vw,275px); height:auto; }
.foot-langrand{
font-size:.96rem; color:var(--paper-soft); line-height:1.65; max-width:54ch;
margin-bottom:1.6rem;
}
.foot-langrand strong{ color:var(--paper); font-weight:500; }
.foot-col a.foot-visit{
font-family:var(--sans); font-size:.9rem; font-weight:500;
color:var(--paper);
display:inline-flex;
width:auto;
gap:.55rem;
align-items:center;
padding-bottom:.3rem;
border-bottom:1px solid var(--paper);
transition:gap .3s ease, border-color .3s ease;
margin-bottom:0;
}
.foot-col a.foot-visit .arr{ display:inline-block; transition:transform .3s ease; }
.foot-col a.foot-visit:hover{ gap:.85rem; border-bottom-color:var(--paper); }
.foot-col a.foot-visit:hover .arr{ transform:translate(2px,-2px); }
.foot-address{
font-style:normal;
font-size:.94rem; color:var(--paper-soft); line-height:1.55;
margin-bottom:.6rem; max-width:24ch;
display:block;
transition:color .25s ease;
}
.foot-address:hover{ color:var(--paper); }
.foot-col a.foot-directions{
font-family:var(--sans);
font-size:.84rem; font-weight:500;
color:var(--paper);
display:inline-flex;
width:auto;
gap:.5rem; align-items:center;
padding-bottom:.25rem;
border-bottom:1px solid var(--paper);
margin-bottom:1.3rem;
transition:gap .3s ease, border-color .3s ease;
}
.foot-col a.foot-directions .arr{ display:inline-block; transition:transform .3s ease; }
.foot-col a.foot-directions:hover{ gap:.75rem; border-bottom-color:var(--paper); }
.foot-col a.foot-directions:hover .arr{ transform:translate(2px,-2px); }
.foot-bottom{
display:flex; justify-content:space-between; flex-wrap:wrap; gap:1rem;
padding-top:1.6rem; border-top:1px solid var(--paper-line);
font-family:var(--mono); font-size:.72rem; color:var(--paper-faint);
letter-spacing:.02em;
}
/* ──── scroll-reveal utility (driven by tectonic.js) ──── */
.reveal{
transition:opacity .7s cubic-bezier(.25,.1,.25,1), transform .7s cubic-bezier(.25,.1,.25,1);
}
/* hidden only when JS is running (html.js); without JS, content stays visible */
.js .reveal{ opacity:0; transform:translateY(16px); }
.js .reveal.in{ opacity:1; transform:none; }
/* ──── balanced wrapping on multi-line headings ──── */
.section-head h2,
.case h3,
.case p,
.closing h2,
.fn-card h3,
.prose h2{
text-wrap:balance;
}
/* ──── responsive ──── */
@media (max-width:960px){
.nav-right{ display:none; }
.nav-toggle{ display:flex; }
.nav{ gap:1rem; }
.work-grid{ grid-template-columns:1fr; }
.closing-grid{ grid-template-columns:1fr; align-items:start; }
.foot-grid{ grid-template-columns:1fr; row-gap:2.2rem; column-gap:0; }
.foot-lockup{ margin-bottom:2.5rem; }
.fn-track{ grid-auto-columns:80%; }
}
/* ──── reduced motion ──── */
@media (prefers-reduced-motion:reduce){
*, *::before, *::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
.wash{ background:none; color:var(--ink); -webkit-text-fill-color:var(--ink); }
.reveal{ opacity:1; transform:none; }
.form-sent{ opacity:1; transform:none; }
.form-sent.show{ animation:none; }
.form-sent.show .sent-mark .chk{ animation:none; stroke-dashoffset:0; }
}
/* =================================================================
Case-study / content template — promoted from the work pages so the
whole site shares one definition (token-driven, namespaced cs-*).
================================================================= */
.back-row{ background:var(--paper); border-bottom:1px solid var(--rule); position:relative; z-index:5; }
.back-row a{
display:inline-flex; align-items:center; gap:.55rem; padding:.95rem 0;
font-family:var(--mono); font-size:.72rem; font-weight:500; letter-spacing:.14em;
text-transform:uppercase; color:var(--ink-2); transition:color .2s ease;
}
.back-row a:hover{ color:var(--ink); }
/* breadcrumb back-arrow: the link arrow (↗), mirrored to point up-left */
.bc-arr{ display:inline-block; transform:scaleX(-1); transition:transform .2s ease; }
.crumb:hover .bc-arr,
.back-row a:hover .bc-arr,
.back-link:hover .bc-arr{ transform:scaleX(-1) translateX(3px); }
.hero{
position:relative; overflow:hidden;
padding-top:clamp(3rem,7vh,5rem); padding-bottom:clamp(5rem,11vh,8rem);
background:
radial-gradient(circle at 16% 18%,
rgba(31,51,221,0.12) 0%, rgba(31,51,221,0.05) 24%, transparent 56%),
linear-gradient(135deg, var(--paper) 0%, var(--paper) 58%, #DCDEEC 100%);
}
.hero .wrap{ position:relative; z-index:1; }
.hero-eyebrow{ position:relative; margin-bottom:1.8rem; color:var(--blue);
opacity:0; animation:csRise .45s ease .025s forwards; }
.case-title{
position:relative; font-family:var(--sans); font-weight:300;
font-size:clamp(1.9rem,3.6vw,3rem); line-height:1.12; letter-spacing:-.02em;
max-width:24ch; text-wrap:balance;
opacity:0; animation:csRise .45s cubic-bezier(.2,.7,.2,1) .11s forwards;
}
.hero-rule{ width:72px; height:1px; margin:2.3rem 0 1.7rem;
background:linear-gradient(90deg, var(--blue), rgba(31,51,221,0.12));
opacity:0; animation:csRise .45s ease .28s forwards; }
.hero-sub{ max-width:48ch; font-size:clamp(1.05rem,1.3vw,1.2rem);
color:var(--ink-2); line-height:1.6; font-weight:400;
opacity:0; animation:csRise .45s ease .34s forwards; }
.hero-figure{
margin-top:clamp(3rem,6vw,4.5rem);
opacity:0; transform:translateY(20px);
animation:csRise .5s cubic-bezier(.2,.7,.2,1) .41s forwards;
}
.hero-figure img{ display:block; width:100%; height:auto; }
@keyframes csRise{ to{ opacity:1; transform:translateY(0); } }
.cs-head{ margin-bottom:1.8rem; }
.cs-head .eyebrow{ display:block; margin-bottom:1.4rem; color:var(--blue); }
.cs-head h2{
font-family:var(--sans); font-weight:300;
font-size:clamp(1.55rem,2.7vw,2.15rem); line-height:1.18;
letter-spacing:-.018em; max-width:22ch; text-wrap:balance;
}
.cap-lead .cs-head{ margin-bottom:1.4rem; }
.body-prose p{ font-size:1.05rem; line-height:1.66; color:var(--ink-2);
max-width:58ch; margin-bottom:1.1rem; }
.body-prose p:last-child{ margin-bottom:0; }
.big-statement{
font-family:var(--sans); font-weight:300; color:var(--ink);
font-size:clamp(1.4rem,2.4vw,1.95rem); line-height:1.32;
letter-spacing:-.012em; max-width:42ch; text-wrap:balance;
}
.big-statement .quiet{ color:var(--ink-2); }
.big-statement--blue{ color:var(--blue); }
.big-statement--smaller{ font-size:clamp(1.05rem,1.8vw,1.45rem); }
.cs-bold-spacer{ min-height:55vh; height:55vh; background:var(--paper); padding:0; z-index:1; }
.cs-takeover{
position:fixed; inset:0; pointer-events:none; z-index:5;
display:flex; align-items:center; overflow:hidden;
}
.cs-takeover-fill{
position:absolute; left:0; right:0; bottom:0;
height:var(--cs-fill,0%);
background:var(--blue); z-index:0; will-change:height;
}
.cs-takeover-fill::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(ellipse at 82% 18%, rgba(255,255,255,0.10) 0%, transparent 52%),
radial-gradient(ellipse at 14% 88%, rgba(255,255,255,0.06) 0%, transparent 46%);
}
.cs-takeover-content{
position:relative; z-index:1; width:100%;
opacity:0; transition:opacity .12s linear;
}
.cs-takeover-content .wrap{ width:100%; }
.cs-question-text{
font-family:var(--sans); font-weight:300;
font-size:clamp(1.9rem,4.4vw,3.6rem); line-height:1.1;
letter-spacing:-.02em; color:var(--on-blue); max-width:20ch; text-wrap:balance;
transform:translateY(20px);
transition:transform .6s cubic-bezier(.25,.1,.25,1);
}
.cs-takeover.is-revealed .cs-question-text{ transform:none; }
.cs-stack-cover{ position:relative; z-index:6; background:var(--paper); }
.full-width-image{
margin-top:clamp(2.4rem,4vw,3.4rem);
border:1px solid var(--rule); background:var(--paper-2); border-radius:3px;
overflow:hidden;
}
.full-width-image img{ display:block; width:100%; height:auto; }
.cs-video{ border:1px solid var(--rule); background:var(--paper-2);
border-radius:3px; overflow:hidden; }
.cs-video video{ display:block; width:100%; height:auto; }
.cap-body{ display:grid; grid-template-columns:1fr 0.9fr; gap:3.6rem; align-items:start; }
.cap-body--balanced{ grid-template-columns:1fr 1fr; gap:clamp(2.4rem,4vw,3.4rem); }
.cap-lead p{ font-size:1.05rem; color:var(--ink-2); line-height:1.66; margin-bottom:1.1rem; }
.cap-lead p:last-child{ margin-bottom:0; }
.cap-visual{ border:1px solid var(--rule); background:var(--paper-2);
border-radius:3px; overflow:hidden; align-self:stretch; }
.cap-visual img{ display:block; width:100%; height:auto; }
.cap-visual.photo{ display:flex; flex-direction:column; align-self:start; }
.cap-visual.bare,
.full-width-image.bare{ background:transparent; border:0; border-radius:0; overflow:visible; }
.cap-detail{ margin-top:3.4rem; padding-top:2.7rem; border-top:1px solid var(--rule); }
.cap-detail .eyebrow{ display:block; margin-bottom:1.35rem; color:var(--ink-3); }
.cs-list{ list-style:none; display:grid; grid-template-columns:1fr 1fr; column-gap:2.6rem; }
.cs-list li{ display:flex; gap:.9rem; align-items:flex-start;
padding:.82rem 0; border-top:1px solid var(--rule); font-size:1rem; color:var(--ink-2); }
.cs-list li:first-child,
.cs-list li:nth-child(2){ border-top:0; padding-top:0; }
.cs-list li::before{ content:""; flex-shrink:0; width:6px; height:6px; margin-top:.52rem;
background:var(--blue); transform:rotate(45deg); }
.partners-list{ list-style:none; display:grid; grid-template-columns:1fr; max-width:calc(50% - 1.3rem); }
.partners-list li{ display:flex; gap:.9rem; align-items:flex-start;
padding:.82rem 0; border-top:1px solid var(--rule); font-size:1rem; color:var(--ink-2); }
.partners-list li:first-child{ border-top:0; padding-top:0; }
.partners-list li::before{ content:""; flex-shrink:0; width:6px; height:6px;
margin-top:.52rem; background:var(--blue); transform:rotate(45deg); }
.engagement-meta{ list-style:none; display:grid; grid-template-columns:1fr; max-width:calc(72% - 1.3rem); }
.engagement-row{ display:grid; grid-template-columns:11rem 1fr; gap:1.4rem; align-items:baseline;
padding:.95rem 0; border-top:1px solid var(--rule); }
.engagement-row:first-child{ border-top:0; padding-top:0; }
.engagement-row dt{ font-family:var(--mono); font-size:.7rem; font-weight:500;
letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); }
.engagement-row dd{ font-size:1rem; color:var(--ink-2); line-height:1.55; }
.cs-closing-grid{ display:grid; grid-template-columns:1fr 1.3fr;
gap:clamp(2.4rem,5vw,4.2rem); align-items:start; }
.cs-closing-cta{ padding-top:.6rem; }
.related-work .eyebrow{ display:block; color:var(--blue); margin-bottom:1.4rem; }
.related-list{ list-style:none; }
.related-list li{ border-top:1px solid var(--rule); }
.related-list li:first-child{ border-top:0; }
.related-item{ display:flex; flex-direction:column; padding:1.2rem 0;
transition:padding-left .25s cubic-bezier(.3,.6,.2,1); }
.related-item:hover{ padding-left:.4rem; }
.related-title{ font-size:1.05rem; color:var(--ink); font-weight:500;
letter-spacing:-.005em; margin-bottom:.35rem; }
.related-item:hover .related-title{ color:var(--blue); }
.related-context{ font-size:.85rem; color:var(--ink-2); line-height:1.5; }
.btn{ display:inline-flex; align-items:center; gap:.6rem; white-space:nowrap;
font-family:var(--sans); transition:all .25s ease; }
.btn-ghost{
font-size:.9rem; font-weight:500; color:var(--ink);
border:1px solid var(--ink); border-radius:999px; padding:.85rem 1.6rem;
}
.btn-ghost:hover{ background:var(--ink); color:var(--paper); gap:.85rem; }
@media (max-width:860px){
.cap-body{ grid-template-columns:1fr; gap:2.4rem; }
.cs-list{ grid-template-columns:1fr; }
.cs-list li:nth-child(2){ border-top:1px solid var(--rule); padding-top:.82rem; }
.partners-list{ max-width:none; }
.engagement-meta{ max-width:none; }
.engagement-row{ grid-template-columns:1fr; gap:.4rem; }
.cs-closing-grid{ grid-template-columns:1fr; gap:2.4rem; }
}
/* ── Langrand masthead — site-system chrome, all pages ──────────────────
Unique class names (lg-mast*, tf-nav*, foot-wordmark) deliberately do NOT
reuse any legacy selector (.brand-logo, .brand-lockup, .foot-lockup, etc.)
so nothing from the old full/mark toggle system can collide with or
override these rules regardless of cascade order or stale caches. ── */
/* Langrand logo height mirrors thinklangrand.com's own three breakpoint
tiers (measured directly off their live site — NOT a smooth fluid scale,
Wix snaps between independently-set values per tier, so we do too).
Transformation's nav mark is derived from --lg-h at --tf-ratio, so the
two can never drift out of sync when either changes. Ratio is higher at
tablet/mobile (0.75) than desktop (0.55) — at the smaller Langrand sizes,
0.55 made the full "TRANSFORMATION" wordmark unreadably small. */
:root{ --lg-h:22.48px; --tf-ratio:0.55; }
@media (max-width:1200px){ :root{ --lg-h:13.16px; --tf-ratio:0.75; } } /* tablet — assumed split, verify against Wix's actual breakpoint */
@media (max-width:960px){ :root{ --lg-h:15.74px; } } /* mobile — synced to the site's existing nav-collapse breakpoint; ratio stays 0.75 from the tablet tier above */
/* Outer strip carries the full-bleed border + the collapse animation, so the
divider always spans edge-to-edge and disappears cleanly with the rest of
the masthead on scroll. Inner .lg-mast stays wrap-constrained for layout. */
.lg-mast-outer{
border-bottom:1px solid var(--rule);
max-height:110px; opacity:1; overflow:hidden;
transition:max-height .3s ease, opacity .25s ease, border-color .3s ease;
}
.site-header.is-scrolled .lg-mast-outer{
max-height:0; opacity:0; border-bottom-color:transparent;
}
.lg-mast{
display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:.6rem;
padding:1.4rem var(--pad);
max-width:var(--maxw); margin:0 auto; box-sizing:border-box;
}
.lg-mast-spacer{ display:block; }
.lg-mast-mark{ display:flex; align-items:center; justify-content:center; line-height:0; }
.lg-mast-mark svg{ display:block; height:var(--lg-h); width:auto; }
.lg-mast-link{
justify-self:end; font-family:var(--sans); font-size:.92rem; color:var(--ink-2); text-decoration:none;
display:inline-flex; align-items:center; gap:.35rem; transition:color .2s ease; white-space:nowrap;
}
.lg-mast-link:hover{ color:var(--blue); }
.lg-mast-link .arr{ font-size:.8rem; display:inline-block; }
/* mobile — logo moves to the left margin, matching thinklangrand.com's own mobile header */
@media (max-width:960px){
.lg-mast{ grid-template-columns:auto 1fr; padding-top:1rem; padding-bottom:1rem; }
.lg-mast-spacer{ display:none; }
.lg-mast-mark{ justify-content:flex-start; }
}
/* Nav wordmark — Transformation mark, sole clickable logo, derived from --lg-h * --tf-ratio */
.tf-nav-mark{ display:block; line-height:0; }
.tf-nav-mark svg{ display:block; height:calc(var(--lg-h) * var(--tf-ratio)); width:auto; }