/*
* N Squared theme styles.
* Tokens come from theme.json (var(--wp--preset--...)); this file holds
* layout and component rules that theme.json cannot express.
*
* Sections: 1 base · 2 interim fonts · 3 header · 4 logo · 5 buttons ·
* 6 hero · 7 takeover + reveal · 8 services · 9 approach · 10 people ·
* 11 invitation · 12 page furniture · 13 contact + form · 14 footer ·
* 15 motion states · 16 editor helpers · 17 photography
*/
:root {
--nsq-cream: var(--wp--preset--color--cream);
--nsq-charcoal: var(--wp--preset--color--charcoal);
--nsq-magenta: var(--wp--preset--color--magenta);
--nsq-burgundy: var(--wp--preset--color--burgundy);
--nsq-mint: var(--wp--preset--color--mint);
--nsq-ink-soft: var(--wp--preset--color--ink-soft);
--nsq-ink-faint: #8c857c; /* 3.2:1 on cream: large text only */
--nsq-rule: rgba(24, 24, 24, 0.14);
--nsq-gutter: clamp(1.25rem, 4vw, 3.5rem);
--nsq-header-h: 4.75rem;
--nsq-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
/* 1. Base ---------------------------------------------------------------- */
html {
scroll-padding-top: calc(var(--nsq-header-h) + 1rem);
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: clip;
}
::selection {
background: var(--nsq-magenta);
color: #fff;
}
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
outline: 3px solid var(--nsq-magenta);
outline-offset: 3px;
border-radius: 2px;
}
:where(.has-magenta-background-color, .has-charcoal-background-color, .has-burgundy-background-color) :where(a, button, input, textarea):focus-visible {
outline-color: var(--nsq-mint);
}
.screen-reader-text {
border: 0;
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute !important;
width: 1px;
word-wrap: normal !important;
}
.skip-link.screen-reader-text:focus {
background: var(--nsq-charcoal);
clip: auto !important;
clip-path: none;
color: #fff;
display: block;
font-size: 1rem;
height: auto;
left: 1rem;
padding: 0.9rem 1.2rem;
top: 1rem;
width: auto;
z-index: 100000;
}
.nsq-main {
padding-top: 0;
}
.wp-site-blocks > * {
margin-block: 0;
}
/* Inside full-width sections, narrow children align to the wide grid's left
edge instead of centring. */
:is(.nsq-takeover, .nsq-section, .nsq-page-intro, .nsq-approach, .nsq-people, .nsq-invite) > * {
margin-left: max(0px, calc((100% - var(--wp--style--global--wide-size)) / 2)) !important;
margin-right: auto !important;
}
/* Blocks inside full-bleed sections should not inherit the default gap. */
.nsq-main > .wp-block-post-content > * + * {
margin-block-start: 0;
}
p {
text-wrap: pretty;
}
h1, h2, h3 {
text-wrap: balance;
}
/* 2. Interim fonts --------------------------------------------------------
* Archivo (OFL) stands in for Aeonik and Söhne Breit until licensed files
* arrive. Delete this block when Söhne Breit is installed as its own family.
*/
.has-secondary-font-family,
.nsq-label,
.nsq-logo__tagline,
.nsq-nav,
.nsq-hero__label,
.nsq-services__count,
.nsq-contact__label,
.nsq-form__label,
.nsq-footer__legal {
font-family: var(--wp--preset--font-family--secondary);
font-stretch: 125%;
}
/* 3. Header ---------------------------------------------------------------- */
.nsq-site-header {
position: sticky;
top: 0;
z-index: 60;
background: var(--nsq-cream);
transition: box-shadow 0.3s var(--nsq-ease);
}
.admin-bar .nsq-site-header {
top: var(--wp-admin--admin-bar--height, 0px);
}
.nsq-site-header.is-scrolled {
box-shadow: 0 1px 0 var(--nsq-rule);
}
.nsq-header {
padding-inline: var(--nsq-gutter);
}
.nsq-header__bar {
min-height: var(--nsq-header-h);
gap: 1.5rem;
}
.nsq-header__nav {
gap: clamp(1rem, 2.6vw, 2.5rem);
}
.nsq-nav {
font-size: 0.8125rem;
font-weight: 500;
letter-spacing: 0.01em;
}
.nsq-nav .wp-block-navigation__container {
gap: clamp(1.25rem, 2.4vw, 2.25rem);
}
.nsq-nav .wp-block-navigation-item__content {
text-decoration: none;
padding-block: 0.4rem;
background-image: linear-gradient(var(--nsq-magenta), var(--nsq-magenta));
background-size: 0% 2px;
background-position: 0 100%;
background-repeat: no-repeat;
transition: background-size 0.35s var(--nsq-ease);
}
.nsq-nav .wp-block-navigation-item__content:hover,
.nsq-nav .current-menu-item > .wp-block-navigation-item__content,
.nsq-nav [aria-current="page"] {
background-size: 100% 2px;
color: inherit;
}
/* Mobile overlay menu */
.nsq-nav .wp-block-navigation__responsive-container.is-menu-open {
background: var(--nsq-cream);
color: var(--nsq-charcoal);
padding: var(--nsq-gutter);
}
.nsq-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
padding-top: 4.5rem;
align-items: flex-start;
}
.nsq-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
gap: 0.6rem;
align-items: flex-start;
}
.nsq-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
font-family: var(--wp--preset--font-family--primary);
font-stretch: 100%;
font-size: clamp(2.25rem, 10vw, 3.5rem);
letter-spacing: -0.03em;
line-height: 1.1;
}
.nsq-nav .wp-block-navigation__responsive-container-open,
.nsq-nav .wp-block-navigation__responsive-container-close {
padding: 0.5rem;
margin: -0.5rem;
}
.nsq-nav .wp-block-navigation__responsive-container-open svg,
.nsq-nav .wp-block-navigation__responsive-container-close svg {
width: 28px;
height: 28px;
}
@media (max-width: 359px) {
.nsq-header .nsq-header__cta {
display: none;
}
}
/* 4. Logo ------------------------------------------------------------------- */
.nsq-logo {
--nsq-logo-mark: var(--nsq-magenta);
--nsq-logo-word: var(--nsq-charcoal);
--nsq-logo-tagline: var(--nsq-charcoal);
display: flex;
align-items: center;
gap: 0.9rem;
line-height: 1;
}
.nsq-logo--on-magenta {
--nsq-logo-mark: var(--nsq-charcoal);
--nsq-logo-word: #fff;
--nsq-logo-tagline: var(--nsq-charcoal);
}
.nsq-logo--on-charcoal {
--nsq-logo-mark: var(--nsq-magenta);
--nsq-logo-word: #fff;
--nsq-logo-tagline: var(--nsq-magenta);
}
.nsq-logo--tone {
--nsq-logo-mark: #000;
--nsq-logo-word: #000;
}
.nsq-logo .nsq-mark {
fill: var(--nsq-logo-mark);
}
.nsq-logo .nsq-word {
fill: var(--nsq-logo-word);
}
.nsq-logo .nsq-two {
fill: var(--nsq-magenta);
}
.nsq-logo__link {
display: inline-flex;
align-items: center;
gap: 0.9rem;
color: inherit;
text-decoration: none;
}
.nsq-logo-svg {
display: block;
height: auto;
overflow: visible;
}
.nsq-logo--horizontal .nsq-logo-svg {
width: clamp(8.5rem, 12vw, 10.5rem);
}
.nsq-logo--stacked .nsq-logo-svg {
width: 100%;
}
.nsq-logo--mark .nsq-logo-svg,
.nsq-logo--mark-superscript .nsq-logo-svg {
width: 100%;
max-width: 12rem;
}
.nsq-logo__tagline {
color: var(--nsq-logo-tagline);
font-size: 0.6875rem;
font-weight: 600;
line-height: 1.15;
max-width: 9em;
padding-left: 0.9rem;
border-left: 1px solid var(--nsq-rule);
}
@media (max-width: 1099px) {
.nsq-header .nsq-logo__tagline {
display: none;
}
}
/* 5. Buttons --------------------------------------------------------------- */
.wp-element-button,
.wp-block-button__link {
transition: background-color 0.25s var(--nsq-ease), color 0.25s var(--nsq-ease), border-color 0.25s var(--nsq-ease);
}
.wp-block-button.is-style-outline > .wp-block-button__link {
background: transparent;
border: 1.5px solid currentColor;
color: var(--nsq-charcoal);
padding: 0.75em 1.35em;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
background: var(--nsq-charcoal);
border-color: var(--nsq-charcoal);
color: var(--nsq-cream);
}
.nsq-header__cta .wp-block-button__link {
font-size: 0.875rem;
}
.wp-block-button.is-style-nsq-text > .wp-block-button__link {
background: none;
color: inherit;
padding-inline: 0.25em;
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 0.3em;
}
.wp-block-button.is-style-nsq-text > .wp-block-button__link:hover {
color: var(--nsq-magenta);
}
.has-magenta-background-color .wp-block-button:not(.is-style-outline, .is-style-nsq-text) > .wp-block-button__link,
.has-burgundy-background-color .wp-block-button:not(.is-style-outline, .is-style-nsq-text) > .wp-block-button__link {
background: var(--nsq-cream);
color: var(--nsq-charcoal);
}
.has-magenta-background-color .wp-block-button:not(.is-style-outline, .is-style-nsq-text) > .wp-block-button__link:hover {
background: var(--nsq-charcoal);
color: #fff;
}
.has-mint-background-color .wp-block-button:not(.is-style-outline, .is-style-nsq-text) > .wp-block-button__link {
background: var(--nsq-charcoal);
}
.has-mint-background-color .wp-block-button:not(.is-style-outline, .is-style-nsq-text) > .wp-block-button__link:hover {
background: var(--nsq-burgundy);
}
/* 6. Hero ------------------------------------------------------------------ */
.nsq-hero {
position: relative;
min-height: max(34rem, calc(var(--nsq-hero-height, 85) * 1svh - var(--nsq-header-h)));
display: flex;
align-items: stretch;
padding-inline: var(--nsq-gutter);
overflow: clip;
isolation: isolate;
}
.nsq-hero__inner {
position: relative;
width: 100%;
max-width: var(--wp--style--global--wide-size);
margin-inline: auto;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
align-items: end;
padding-block: clamp(1.5rem, 4svh, 3.5rem) clamp(2rem, 6svh, 4.5rem);
}
.nsq-hero__content {
grid-column: 1 / span 7;
position: relative;
z-index: 2;
}
.nsq-hero__content > * {
margin-block: 0;
}
.nsq-hero__label {
font-size: 0.8125rem;
font-weight: 500;
color: var(--nsq-ink-soft);
margin-bottom: clamp(1rem, 2.5svh, 1.75rem) !important;
}
.nsq-hero__title {
font-size: clamp(3.4rem, min(9.6vw, 14.5svh), 9.25rem) !important;
line-height: 0.9 !important;
letter-spacing: -0.045em !important;
font-weight: 500;
margin-left: -0.05em !important;
}
.nsq-hero__lead {
max-width: 33rem;
margin-top: clamp(1.25rem, 3svh, 2.25rem) !important;
font-size: clamp(1.125rem, 1.1vw + 0.6rem, 1.375rem);
line-height: 1.45;
}
.nsq-hero__content .wp-block-buttons {
margin-top: clamp(1.5rem, 4svh, 2.75rem) !important;
gap: 0.75rem 1.25rem;
}
.nsq-hero__stage {
position: absolute;
z-index: 1;
right: calc(-1 * var(--nsq-gutter) - 4vw);
bottom: 7%;
width: min(56vw, 104svh);
pointer-events: none;
}
.nsq-hero__mark,
.nsq-hero__mark-preview {
display: block;
width: 100%;
height: auto;
overflow: visible;
}
.nsq-hero__mark-path {
fill: var(--nsq-magenta);
}
.nsq-hero__plus {
fill: var(--nsq-charcoal);
visibility: hidden;
}
.nsq-pen {
fill: none;
stroke: #fff;
stroke-width: 30;
stroke-linecap: butt;
stroke-linejoin: round;
}
@media (min-width: 900px) and (max-width: 1199px) {
.nsq-hero__content {
grid-column: 1 / span 8;
}
.nsq-hero__stage {
width: 56vw;
right: calc(-1 * var(--nsq-gutter) - 10vw);
}
}
@media (max-width: 899px) {
.nsq-hero {
min-height: max(32rem, calc(var(--nsq-hero-height, 85) * 1svh - var(--nsq-header-h)));
}
.nsq-hero__inner {
grid-template-columns: 1fr;
align-content: space-between;
padding-top: 0.5rem;
}
/* On small screens the mark sits in the flow above the text, cropped
by the right edge, so it never runs behind the headline. */
.nsq-hero__stage {
position: relative;
grid-row: 1;
justify-self: end;
right: auto;
bottom: auto;
width: min(72vw, 26rem);
margin-right: calc(-1 * var(--nsq-gutter) - 5vw);
margin-bottom: 1.25rem;
}
.nsq-hero__content {
grid-column: 1;
grid-row: 2;
}
.nsq-hero__title {
font-size: clamp(3rem, 15.5vw, 6rem) !important;
}
}
/* Browser toolbar changes can cross 700px in portrait. Keep the mark
width stable there; compact sizing is only for short landscape screens. */
@media (max-width: 899px) and (max-height: 700px) and (orientation: landscape) {
.nsq-hero__stage {
width: min(52vw, 20rem);
}
}
/* 7. Takeover + statement ------------------------------------------------- */
.nsq-takeover {
position: relative;
padding-block: clamp(6rem, 16svh, 12rem) clamp(5rem, 14svh, 10rem) !important;
padding-inline: var(--nsq-gutter) !important;
}
.nsq-takeover .nsq-statement {
font-size: var(--wp--preset--font-size--statement);
font-weight: 500;
line-height: 1.06;
letter-spacing: -0.035em;
max-width: 22ch;
}
.nsq-takeover__aside {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 1.5rem;
margin-top: clamp(3rem, 8svh, 6rem) !important;
}
.nsq-takeover__aside > * {
grid-column: 7 / span 5;
margin: 0 !important;
}
.nsq-takeover__aside p {
font-size: var(--wp--preset--font-size--medium);
line-height: 1.45;
}
@media (max-width: 899px) {
.nsq-takeover__aside > * {
grid-column: 1 / -1;
}
}
.is-style-nsq-reveal .nsq-word {
display: inline-block;
}
/* Statement with photograph: text on the left, photo and supporting copy
stacked on the right, top-aligned with the statement. */
.nsq-takeover__grid {
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: clamp(2.5rem, 5vw, 4rem) var(--nsq-gutter);
align-items: start;
}
.nsq-takeover__text {
grid-column: 1 / span 7;
}
.nsq-takeover__text .nsq-statement {
max-width: 15ch;
}
.nsq-takeover__media {
grid-column: 8 / -1;
max-width: 36rem;
padding-top: clamp(2rem, 4vw, 3.25rem);
}
.nsq-takeover__media > * {
margin-block: 0 1.5rem;
}
.nsq-takeover__media .wp-block-image {
margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.nsq-takeover__media p {
font-size: var(--wp--preset--font-size--medium);
line-height: 1.45;
}
@media (max-width: 899px) {
.nsq-takeover__text,
.nsq-takeover__media {
grid-column: 1 / -1;
padding-top: 0;
}
}
/* 8. Services ------------------------------------------------------------- */
.nsq-services {
padding: clamp(5rem, 12vw, 10rem) var(--nsq-gutter) clamp(3rem, 6vw, 5rem);
}
.nsq-services__inner {
max-width: var(--wp--style--global--wide-size);
margin-inline: auto;
display: grid;
grid-template-columns: repeat(12, minmax(0, 1fr));
gap: 2rem var(--nsq-gutter);
align-items: start;
}
.nsq-services__intro {
grid-column: 1 / span 5;
}
.nsq-services__intro > * {
margin-block: 0 1.25rem;
}
.nsq-services__intro h2 {
font-size: var(--wp--preset--font-size--x-large);
}
.nsq-services__intro p {
max-width: 26rem;
color: var(--nsq-ink-soft);
}
.nsq-services__items {
grid-column: 7 / -1;
list-style: none;
margin: 0;
padding: 0;
counter-reset: none;
}
.nsq-services__item {
border-top: 1px solid var(--nsq-rule);
padding-block: clamp(1rem, 1.8vw, 1.6rem);
}
.nsq-services__item:last-child {
border-bottom: 1px solid var(--nsq-rule);
}
.nsq-services__name {
margin: 0;
font-size: clamp(1.75rem, 3.3vw, 3.25rem);
font-weight: 500;
line-height: 1.04;
letter-spacing: -0.03em;
}
.nsq-services__desc {
max-width: 34rem;
color: var(--nsq-ink-soft);
}
.nsq-services__desc > * {
margin: 0.75rem 0 0;
}
.nsq-services__panel {
display: none;
}
/* Detailed list (Services page). Grouped lists: each group's intro holds a
heading, a line of copy and one photograph; "reverse" swaps sides. */
.nsq-services--list + .nsq-services--list {
padding-top: clamp(1.5rem, 4vw, 3rem);
}
.nsq-services--list .nsq-services__intro h2 {
font-size: var(--wp--preset--font-size--large);
hyphens: manual;
}
.nsq-services--list .nsq-services__intro .wp-block-image {
margin: clamp(1.5rem, 3vw, 2.5rem) 0 0;
max-width: 26rem;
}
@media (min-width: 900px) {
.nsq-services--list.nsq-services--reverse .nsq-services__intro {
grid-column: 9 / -1;
grid-row: 1;
}
.nsq-services--list.nsq-services--reverse .nsq-services__items {
grid-column: 1 / 9;
grid-row: 1;
}
}
.nsq-services--list .nsq-services__intro {
grid-column: 1 / span 4;
}
.nsq-services--list .nsq-services__items {
grid-column: 5 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--nsq-gutter);
}
.nsq-services--list .nsq-services__item {
padding-block: 1.75rem 2.25rem;
}
.nsq-services--list .nsq-services__item:nth-last-child(2):nth-child(odd) {
border-bottom: 1px solid var(--nsq-rule);
}
.nsq-services--list .nsq-services__name {
font-size: var(--wp--preset--font-size--medium);
letter-spacing: -0.015em;
}
@media (max-width: 899px) {
.nsq-services__intro,
.nsq-services__items,
.nsq-services--list .nsq-services__intro,
.nsq-services--list .nsq-services__items {
grid-column: 1 / -1;
}
.nsq-services--list .nsq-services__items {
grid-template-columns: 1fr;
}
}
/* 9. Approach ------------------------------------------------------------- */
.nsq-approach {
padding: clamp(5rem, 12vw, 10rem) var(--nsq-gutter) !important;
}
.nsq-approach__quote {
font-size: var(--wp--preset--font-size--x-large) !important;
font-weight: 500;
line-height: 1.02 !important;
letter-spacing: -0.04em !important;
max-width: 16ch;
margin: 0 !important;
}
.nsq-approach__intro {
max-width: 36rem;
color: var(--nsq-ink-soft);
}
.nsq-steps {
list-style: none;
padding: 0 !important;
margin: clamp(3rem, 7vw, 6rem) 0 0 !important;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--nsq-gutter);
}
.nsq-steps > li {
border-top: 2px solid currentColor;
padding-top: 1.25rem;
margin: 0;
}
/* Step icons (sources in assets-src/icons/): drawn as CSS masks so they take
the section colour, decorative only (the ordered list keeps its order for
assistive tech). Assigned by position; add the class nsq-icon-analysis,
nsq-icon-tailored or nsq-icon-impact to a list item to choose one. */
.nsq-steps {
--nsq-icon-analysis: url("data:image/svg+xml,");
--nsq-icon-tailored: url("data:image/svg+xml,");
--nsq-icon-impact: url("data:image/svg+xml,");
}
.nsq-steps > li::before {
content: "";
display: block;
width: 2.75rem;
height: 2.75rem;
margin-bottom: 2rem;
background-color: var(--nsq-magenta);
-webkit-mask: var(--nsq-step-icon, var(--nsq-icon-analysis)) left center / contain no-repeat;
mask: var(--nsq-step-icon, var(--nsq-icon-analysis)) left center / contain no-repeat;
}
.nsq-steps > li:nth-child(3n + 1) { --nsq-step-icon: var(--nsq-icon-analysis); }
.nsq-steps > li:nth-child(3n + 2) { --nsq-step-icon: var(--nsq-icon-tailored); }
.nsq-steps > li:nth-child(3n + 3) { --nsq-step-icon: var(--nsq-icon-impact); }
.nsq-steps > li.nsq-icon-analysis { --nsq-step-icon: var(--nsq-icon-analysis); }
.nsq-steps > li.nsq-icon-tailored { --nsq-step-icon: var(--nsq-icon-tailored); }
.nsq-steps > li.nsq-icon-impact { --nsq-step-icon: var(--nsq-icon-impact); }
.has-burgundy-background-color .nsq-steps > li::before,
.has-charcoal-background-color .nsq-steps > li::before {
background-color: var(--nsq-mint);
}
.nsq-steps strong {
display: block;
font-size: var(--wp--preset--font-size--medium);
font-weight: 500;
letter-spacing: -0.015em;
line-height: 1.2;
margin-bottom: 0.6rem;
}
@media (max-width: 899px) {
.nsq-steps {
grid-template-columns: 1fr;
gap: 2.5rem;
}
.nsq-steps > li::before {
width: 2.5rem;
height: 2.5rem;
margin-bottom: 1.25rem;
}
}
/* 10. People --------------------------------------------------------------- */
.nsq-people {
padding: clamp(5rem, 10vw, 8rem) var(--nsq-gutter) !important;
}
.nsq-people .wp-block-columns {
gap: var(--nsq-gutter);
}
.nsq-person .wp-block-image {
margin: 0 0 1.25rem;
max-width: 26rem;
}
.nsq-person .wp-block-image img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
filter: grayscale(1) contrast(1.05);
}
.nsq-person h3 {
font-size: var(--wp--preset--font-size--large);
margin: 0;
}
.nsq-person__role {
margin: 0.35rem 0 1rem;
color: var(--nsq-ink-soft);
}
.has-burgundy-background-color .nsq-person__role,
.has-charcoal-background-color .nsq-person__role {
color: var(--nsq-mint);
}
/* 11. Invitation ------------------------------------------------------------ */
.nsq-invite {
padding: clamp(5rem, 12vw, 10rem) var(--nsq-gutter) !important;
}
.nsq-invite__title {
font-size: var(--wp--preset--font-size--display) !important;
line-height: 0.92 !important;
letter-spacing: -0.045em !important;
max-width: 12ch;
margin: 0 !important;
}
.nsq-invite .wp-block-buttons {
margin-top: clamp(2rem, 5vw, 3.5rem) !important;
gap: 0.75rem 1.5rem;
}
/* 12. Page furniture ----------------------------------------------------- */
.nsq-page-intro {
padding: clamp(4rem, 10vw, 8rem) var(--nsq-gutter) clamp(2.5rem, 6vw, 4.5rem) !important;
}
.nsq-page-intro h1 {
font-size: var(--wp--preset--font-size--display) !important;
max-width: 14ch;
margin: 0 !important;
}
.nsq-page-intro .nsq-lead {
font-size: var(--wp--preset--font-size--medium);
line-height: 1.4;
max-width: 36rem;
margin-top: clamp(1.5rem, 3vw, 2.5rem) !important;
}
.nsq-label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--nsq-magenta);
margin-bottom: 1.25rem !important;
}
.has-magenta-background-color .nsq-label,
.has-burgundy-background-color .nsq-label,
.has-charcoal-background-color .nsq-label {
color: var(--nsq-mint);
}
.nsq-section {
padding: clamp(4.5rem, 10vw, 8rem) var(--nsq-gutter) !important;
}
.nsq-split {
gap: var(--nsq-gutter) !important;
}
.nsq-figure img {
width: 100%;
height: auto;
display: block;
}
.nsq-figure--tall img {
aspect-ratio: 4 / 5;
object-fit: cover;
}
.nsq-figure--wide img {
aspect-ratio: 16 / 9;
object-fit: cover;
}
.nsq-values {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
gap: 2.5rem clamp(1.25rem, 2.5vw, 2.5rem);
}
.nsq-values li {
border-top: 1px solid currentColor;
padding-top: 1rem;
}
.nsq-values strong {
display: block;
font-size: var(--wp--preset--font-size--medium);
font-weight: 500;
letter-spacing: -0.015em;
margin-bottom: 0.4rem;
}
.nsq-logos {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
gap: 0 !important;
border-top: 1px solid var(--nsq-rule);
border-left: 1px solid var(--nsq-rule);
}
.nsq-logos .wp-block-image {
margin: 0 !important;
border-right: 1px solid var(--nsq-rule);
border-bottom: 1px solid var(--nsq-rule);
padding: 1rem;
background: #fff;
}
.nsq-logos img {
width: 100%;
height: auto;
mix-blend-mode: multiply;
}
.nsq-packages .wp-block-column {
border-top: 2px solid currentColor;
padding-top: 1.5rem;
}
.nsq-packages h3 {
margin: 0 0 0.5rem;
}
.nsq-packages ol {
padding-left: 1.2rem;
margin-top: 1.5rem;
}
.nsq-packages li + li {
margin-top: 0.6rem;
}
.nsq-prose {
padding-inline: var(--nsq-gutter);
padding-bottom: 6rem;
}
/* 13. Contact details + form ----------------------------------------------- */
.nsq-contact {
display: grid;
gap: 2rem var(--nsq-gutter);
}
.nsq-contact--offices {
grid-template-columns: 1fr;
}
.nsq-contact--footer {
grid-template-columns: minmax(16rem, 1.3fr) minmax(12rem, 1fr) minmax(12rem, 1fr);
}
.nsq-contact--footer .nsq-contact__email {
font-size: clamp(1.125rem, 1.4vw, 1.375rem);
}
@media (max-width: 1099px) {
.nsq-contact--footer {
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}
}
.nsq-contact__group > * {
margin: 0;
}
.nsq-contact__label {
font-size: 0.75rem;
font-weight: 600;
margin-bottom: 0.75rem !important;
opacity: 0.75;
}
.nsq-contact__address {
font-style: normal;
line-height: 1.5;
margin-bottom: 0.75rem !important;
}
.nsq-contact ul {
list-style: none;
padding: 0;
margin: 0;
}
.nsq-contact a {
text-decoration: none;
background-image: linear-gradient(currentColor, currentColor);
background-size: 100% 1px;
background-position: 0 100%;
background-repeat: no-repeat;
padding-bottom: 1px;
}
.nsq-contact a:hover {
color: var(--nsq-magenta);
}
.nsq-contact__email {
font-size: var(--wp--preset--font-size--medium);
letter-spacing: -0.01em;
margin-bottom: 1rem !important;
}
.nsq-contact__social {
display: flex;
flex-wrap: wrap;
gap: 0.4rem 1.25rem;
}
.nsq-form__form {
display: grid;
gap: 1.25rem;
}
.nsq-form__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem var(--nsq-gutter);
}
@media (max-width: 599px) {
.nsq-form__grid {
grid-template-columns: 1fr;
}
}
.nsq-form__field {
margin: 0;
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.nsq-form__label {
font-size: 0.75rem;
font-weight: 600;
}
.nsq-form__optional {
font-weight: 400;
color: var(--nsq-ink-soft);
}
.nsq-form input,
.nsq-form textarea {
font: inherit;
color: var(--nsq-charcoal);
background: #fff;
border: 1.5px solid rgba(24, 24, 24, 0.35);
border-radius: 2px;
padding: 0.85rem 0.95rem;
width: 100%;
box-sizing: border-box;
transition: border-color 0.2s var(--nsq-ease);
}
.nsq-form input:hover,
.nsq-form textarea:hover {
border-color: var(--nsq-charcoal);
}
.nsq-form textarea {
resize: vertical;
min-height: 9rem;
}
.nsq-form__field.is-invalid input,
.nsq-form__field.is-invalid textarea {
border-color: var(--nsq-magenta);
box-shadow: inset 4px 0 0 var(--nsq-magenta);
}
.nsq-form__error {
color: var(--nsq-burgundy);
font-size: 0.875rem;
font-weight: 500;
min-height: 0;
}
.nsq-form__error:empty {
display: none;
}
.nsq-form__note {
margin: 0;
font-size: 0.875rem;
color: var(--nsq-ink-soft);
}
.nsq-form__status:empty {
display: none;
}
.nsq-form__status p {
margin: 0;
padding: 1rem 1.15rem;
font-weight: 500;
}
.nsq-form__status .is-success {
background: var(--nsq-mint);
color: var(--nsq-charcoal);
}
.nsq-form__status .is-error {
background: #fbe3ec;
color: var(--nsq-burgundy);
}
.nsq-form__actions {
margin: 0;
}
.nsq-form__submit {
cursor: pointer;
border: 0;
font-family: inherit;
}
.nsq-form__submit:hover {
background: var(--nsq-burgundy);
}
.nsq-form__submit[disabled] {
opacity: 0.7;
cursor: progress;
}
.nsq-form__trap {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
/* 14. Footer ------------------------------------------------------------------ */
.nsq-footer {
padding: clamp(4rem, 9vw, 7rem) var(--nsq-gutter) 2rem !important;
overflow: clip;
}
.nsq-footer a {
color: inherit;
}
.nsq-footer__top {
gap: 3rem var(--nsq-gutter) !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
align-items: start;
}
.nsq-footer__title {
font-weight: 500;
letter-spacing: -0.025em;
margin: 0 0 1rem !important;
color: var(--nsq-magenta);
}
.nsq-footer__intro p:not(.nsq-footer__title) {
max-width: 24rem;
opacity: 0.85;
margin: 0;
}
.nsq-footer__bottom {
margin-top: clamp(4rem, 10vw, 8rem) !important;
gap: 1.5rem !important;
}
.nsq-footer__mark {
width: min(100%, 44rem);
margin-bottom: -0.5%;
}
.nsq-footer__legal {
margin: 0;
opacity: 0.7;
font-size: 0.75rem !important;
}
@media (max-width: 899px) {
.nsq-footer__top {
grid-template-columns: 1fr !important;
}
}
/* 15. Motion states ---------------------------------------------------------
* Only under html.nsq-motion, which the head script adds and removes again
* if the motion script fails to start. Without it everything is final.
*/
/* Before the script starts, hide the mark so it does not flash complete
and then disappear behind the mask. */
html.nsq-motion [data-nsq-hero][data-nsq-intro="on"]:not([data-intro-state]) .nsq-hero__mark-path {
opacity: 0;
}
html.nsq-motion [data-nsq-hero][data-intro-state="running"] .nsq-hero__plus {
visibility: visible;
}
html.nsq-motion [data-nsq-hero][data-nsq-intro="on"]:not([data-intro-state]) .nsq-hero__title {
opacity: 0;
}
/* Inner-page intros are in view on load: hide them until the text-entrance
script has taken over (html.nsq-reveal-ready), so they do not flash in
and out. The head script adds nsq-reveal-ready after 2.5s regardless. */
html.nsq-motion:not(.nsq-reveal-ready) .nsq-page-intro > * {
opacity: 0;
}
.nsq-hero__title .nsq-line-mask {
padding-bottom: 0.06em;
margin-bottom: -0.06em;
}
@media (min-width: 900px) {
html.nsq-motion .nsq-services--index.is-enhanced .nsq-services__panel {
display: block;
margin-top: clamp(2.5rem, 6vw, 4.5rem);
max-width: 26rem;
}
html.nsq-motion .nsq-services--index.is-enhanced .nsq-services__intro {
position: sticky;
top: calc(var(--nsq-header-h) + 3rem);
}
html.nsq-motion .nsq-services--index.is-enhanced .nsq-services__desc {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
html.nsq-motion .nsq-services--index.is-enhanced .nsq-services__item {
position: relative;
padding-block: clamp(1.4rem, 2.4vw, 2.2rem);
}
html.nsq-motion .nsq-services--index.is-enhanced .nsq-services__name {
color: var(--nsq-ink-faint);
transition: color 0.35s var(--nsq-ease), transform 0.5s var(--nsq-ease);
transform-origin: 0 50%;
}
html.nsq-motion .nsq-services--index.is-enhanced .nsq-services__item.is-active .nsq-services__name {
color: var(--nsq-charcoal);
transform: translateX(0.35em);
}
html.nsq-motion .nsq-services--index.is-enhanced .nsq-services__item::before {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 0.22em;
height: 0.22em;
margin-top: -0.11em;
font-size: clamp(1.75rem, 3.3vw, 3.25rem);
background: var(--nsq-magenta);
transform: scale(0);
transition: transform 0.4s var(--nsq-ease);
}
html.nsq-motion .nsq-services--index.is-enhanced .nsq-services__item.is-active::before {
transform: scale(1);
}
}
.nsq-services__count {
font-size: 0.75rem;
font-weight: 600;
margin: 0 0 0.75rem;
}
.nsq-services__meter {
height: 2px;
background: var(--nsq-rule);
margin-bottom: 1.5rem;
}
.nsq-services__meter span {
display: block;
height: 100%;
background: var(--nsq-magenta);
transform-origin: 0 50%;
transform: scaleX(0);
}
.nsq-services__active {
font-size: var(--wp--preset--font-size--medium);
line-height: 1.4;
min-height: 8.5em;
}
.nsq-services__active p {
margin: 0;
}
/* 16. Editor helpers ------------------------------------------------------ */
/* Proposed copy (not from the client's site) is outlined for logged-in
editors only, so it can be reviewed before launch. */
body.logged-in .nsq-proposed,
.editor-styles-wrapper .nsq-proposed {
outline: 2px dashed var(--nsq-mint);
outline-offset: 4px;
}
.editor-styles-wrapper .nsq-hero__stage {
opacity: 0.9;
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* 17. Photography -------------------------------------------------------------
* Images use core image blocks with an aspect ratio and cover cropping set in
* the block (editable). Classes add focal points and mobile crops; originals
* are never altered. Most supplied photos are ~736px wide, so layouts keep
* them at or below ~600 CSS px on desktop.
*/
.nsq-photo {
margin: 0;
}
.nsq-photo img {
display: block;
width: 100%;
height: auto;
background: rgba(24, 24, 24, 0.06);
}
.nsq-focus-left img { object-position: 30% 50%; }
.nsq-focus-right img { object-position: 70% 50%; }
.nsq-focus-60 img { object-position: 60% 45%; }
.nsq-focus-top img { object-position: 50% 25%; }
.nsq-focus-low img { object-position: 50% 72%; }
@media (max-width: 899px) {
/* Stacked service groups: a wide crop keeps each group compact. */
.nsq-services--list .nsq-crop-m-landscape img {
aspect-ratio: 3 / 2 !important;
}
}
@media (max-width: 599px) {
/* Tall photos become 4:3 on phones so they add rhythm, not length. */
.nsq-crop-m-landscape img {
aspect-ratio: 4 / 3 !important;
}
}
/* About: the worktable photo runs off the left edge beside the story. */
.nsq-story {
align-items: flex-end;
}
.nsq-story .wp-block-image {
margin: 0;
}
.nsq-story__lead {
font-weight: 500;
line-height: 1.02 !important;
letter-spacing: -0.035em;
max-width: 13ch;
margin-top: 0 !important;
}
.nsq-story__text {
padding-bottom: clamp(0rem, 3vw, 2.5rem);
}
@media (min-width: 782px) {
.nsq-bleed-left {
margin-left: calc(-1 * var(--nsq-gutter)) !important;
}
.nsq-bleed-left .wp-block-image {
max-width: 38rem;
}
}
/* About: a tall inset beside the philosophy, top-aligned with the quote. */
.nsq-philosophy__photo .wp-block-image {
margin: 0 0 0 auto;
max-width: 24rem;
}
.nsq-philosophy .nsq-approach__quote {
margin-bottom: clamp(2rem, 4vw, 3rem) !important;
}
.nsq-philosophy p {
max-width: 40rem;
}
@media (max-width: 781px) {
.nsq-philosophy__photo .wp-block-image {
margin: 0;
max-width: none;
}
}
/* 18. Editorial photographic direction. Core image blocks remain replaceable. */
.nsq-editorial-opening {
padding: 0 0 clamp(4rem, 7vw, 7rem) !important;
}
.nsq-editorial-opening > .nsq-opening-photo {
max-width: none !important;
margin: 0 !important;
}
.nsq-opening-photo img { display: block; width: 100%; }
.nsq-opening-table img { object-position: 50% 52%; }
.nsq-editorial-opening > .nsq-takeover__grid {
padding: clamp(3rem, 6vw, 6rem) var(--nsq-gutter) 0;
box-sizing: border-box;
}
.nsq-editorial-opening .nsq-takeover__media { align-self: end; padding-top: 0; }
.nsq-editorial-opening .nsq-takeover__text .nsq-statement { font-size: clamp(2.5rem, 4.8vw, 4.75rem); }
.nsq-about-opening { padding: 0 !important; }
.nsq-about-opening > .nsq-story { max-width: none !important; gap: 0; align-items: stretch; }
.nsq-about-opening .nsq-bleed-left { flex-basis: 60% !important; margin: 0 !important; }
.nsq-about-opening .nsq-story__text {
flex-basis: 40% !important; padding: clamp(2rem, 5vw, 5rem) !important;
background: #68082F; color: #F5EFE6; align-self: stretch !important;
display: flex; flex-direction: column; justify-content: flex-end;
}
.nsq-about-opening .nsq-story__lead { font-size: clamp(2.5rem,4.5vw,4.5rem) !important; }
.nsq-about-opening .nsq-story__text p:last-child { font-size: clamp(1.1rem,1.6vw,1.5rem) !important; }
.nsq-about-opening .nsq-bleed-left .wp-block-image { max-width: none; height: 100%; }
.nsq-about-opening .nsq-worktable-crop img { height: 100%; aspect-ratio: 6/5 !important; object-position: 50% 65%; }
.nsq-service-opening { padding: 0 !important; }
.nsq-service-opening .nsq-opening-photo { margin: 0 !important; width: 100%; max-width: none !important; }
.nsq-opening-architecture img { object-position: 50% 53%; }
.nsq-palette-crop img { object-position: 50% 64%; }
/* Vary service pacing: a quiet strategy index, then a charcoal editorial chapter. */
.nsq-service-opening + .nsq-services--list { padding-top: clamp(3rem,6vw,6rem); }
.nsq-services--list.nsq-services--reverse { background: #181818; color: #F5EFE6; --nsq-rule: rgba(245,239,230,.22); }
.nsq-services--reverse .nsq-services__desc { color: #F5EFE6; }
.nsq-services--reverse .nsq-services__intro .wp-block-image { max-width: none; }
@media (max-width: 899px) {
.nsq-opening-table img { aspect-ratio: 16/9 !important; object-position: 50% 50%; }
.nsq-opening-architecture img { aspect-ratio: 2/1 !important; }
.nsq-about-opening .nsq-story__text { padding: 2.5rem var(--nsq-gutter) !important; }
}
@media (max-width: 781px) {
.nsq-about-opening .nsq-story { display: flex; flex-direction: column; }
.nsq-about-opening .nsq-bleed-left { width: 100%; }
.nsq-about-opening .nsq-worktable-crop img { aspect-ratio: 4/3 !important; height: auto; object-position: 50% 70%; }
.nsq-about-opening .nsq-story__lead { max-width: 16ch; }
}
@media (max-width: 599px) {
.nsq-opening-table img { aspect-ratio: 4/3 !important; object-position: 48% 50%; }
.nsq-opening-architecture img { aspect-ratio: 4/3 !important; object-position: 52% 50%; }
.nsq-editorial-opening > .nsq-takeover__grid { padding-top: 2.5rem; }
.nsq-editorial-opening .nsq-takeover__text .nsq-statement { font-size: 2.5rem; }
.nsq-service-opening { padding: 0 !important; }
}
/* Review refinement: join the About image and colour field; shorten the
statement's line stack without changing its scroll-driven word reveal. */
.nsq-about-opening > .nsq-story { gap: 0 !important; }
.nsq-editorial-opening .nsq-takeover__text .nsq-statement { max-width: 19ch; }
.nsq-about-opening .nsq-story__text { box-sizing: border-box; min-width: 0; }
@media (max-width: 781px) {
.nsq-about-opening > .nsq-story { padding-inline: 0 !important; }
.nsq-about-opening .wp-block-column { width: 100%; box-sizing: border-box; }
}
/* 19. Photographic brand fields: native WP background image + color blend
layer + independent normal-opacity color overlay. Content stays untinted. */
.nsq-photo-surface {
position: relative;
isolation: isolate;
--nsq-surface-color: #181818;
--nsq-surface-opacity: .82;
background-repeat: no-repeat;
background-size: cover;
}
.nsq-photo-surface::before,
.nsq-photo-surface::after {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
border-radius: inherit;
background: var(--nsq-surface-color);
}
.nsq-photo-surface::before { mix-blend-mode: color; }
.nsq-photo-surface::after { opacity: var(--nsq-surface-opacity); }
.nsq-photo-surface > * { position: relative; z-index: 1; }
.nsq-tone-magenta { --nsq-surface-color: #CE025F; --nsq-surface-opacity: .82; }
.nsq-tone-burgundy { --nsq-surface-color: #68082F; --nsq-surface-opacity: .78; }
.nsq-tone-charcoal { --nsq-surface-color: #181818; --nsq-surface-opacity: .82; }
.nsq-tone-mint { --nsq-surface-color: #A8D8B7; --nsq-surface-opacity: .78; }
.nsq-about-opening.nsq-photo-surface .nsq-story__text { background: transparent; }
.nsq-footer.nsq-photo-surface { --nsq-surface-opacity: .86; }
/* Backgrounds are decorative; foreground images retain their own colour. */
@media (max-width: 599px) {
.nsq-photo-surface { background-position: 65% 50% !important; }
}
@media print {
.nsq-photo-surface { background-image: none !important; }
}
/* Keep magenta fields at or darker than their original brand fill, so
cream body copy remains readable while paper shadows stay visible. */
.nsq-tone-magenta { background-blend-mode: multiply; --nsq-surface-opacity: .48; }
.nsq-services--reverse .nsq-services__intro p { color: var(--nsq-cream); }
/* Cream keeps the footer title readable over the lightest paper folds. */
.nsq-footer.nsq-photo-surface .nsq-footer__title { color: var(--nsq-cream); }
/* 20. Native mobile menu enhancement. Without JS the WP icons/menu remain. */
.nsq-nav-animated .wp-block-navigation__responsive-container.is-menu-open { animation: none; }
.nsq-menu-icon { position: relative; display: block; width: 28px; height: 28px; }
.nsq-menu-icon > span { position: absolute; left: 2px; top: 9px; width: 24px; height: 2px; background: currentColor; transform-origin: center; }
.nsq-menu-icon > span + span { top: 17px; }
.nsq-nav-animated .is-menu-open .nsq-menu-icon > span { transform: translateY(4px) rotate(45deg); }
.nsq-nav-animated .is-menu-open .nsq-menu-icon > span + span { transform: translateY(-4px) rotate(-45deg); }
.nsq-nav-animated .is-menu-open .wp-block-navigation__responsive-container-close {
position: fixed;
left: var(--nsq-toggle-x, auto);
top: var(--nsq-toggle-y, 1rem);
right: auto;
width: var(--nsq-toggle-width, 44px);
height: var(--nsq-toggle-height, 44px);
margin: 0;
display: grid;
place-items: center;
}
/* Fold the menu sheet independently, keeping the travelling toggle visible. */
.nsq-nav-animated .wp-block-navigation__responsive-container.is-menu-open {
background: transparent !important;
isolation: isolate;
}
.nsq-menu-sheet {
position: fixed;
inset: 0;
z-index: -1;
background: var(--nsq-cream);
transform-origin: center top;
pointer-events: none;
}
.nsq-nav-animated .is-menu-open .wp-block-navigation__responsive-container-close {
transform: translateX(var(--nsq-toggle-travel, 0px));
}
.nsq-nav-animated .wp-block-navigation__responsive-container-content { transform-origin: center top; }
.nsq-menu-sheet { display: none; }
.is-menu-open > .nsq-menu-sheet { display: block; }
/* Keep one visible toggle during its return; the native button stays focusable. */
.nsq-menu-active .wp-block-navigation__responsive-container-open .nsq-menu-icon { visibility: hidden; }
/* 21. Compact photographic footer band with the original contact layout. */
.nsq-footer.nsq-footer--mockup { padding: 0 !important; }
.nsq-footer--mockup > .nsq-footer__top {
box-sizing: border-box;
padding: clamp(3rem, 6vw, 5rem) var(--nsq-gutter);
margin: 0;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) !important;
align-items: start;
gap: 3rem var(--nsq-gutter) !important;
max-width: none;
}
.nsq-footer--mockup .nsq-footer__title {
color: var(--nsq-magenta);
font-family: var(--wp--preset--font-family--primary);
font-size: var(--wp--preset--font-size--large) !important;
font-weight: 500;
letter-spacing: -.025em;
}
.nsq-footer--mockup .nsq-contact--footer { width: 100%; margin: 0; }
.nsq-footer--mockup .nsq-footer__band {
--nsq-surface-opacity: .65;
box-sizing: border-box;
margin: 0;
padding: 1.25rem var(--nsq-gutter);
background-position: 50% 50%;
}
.nsq-footer--mockup .nsq-footer__band-inner {
max-width: var(--wp--style--global--wide-size);
margin: 0 auto;
gap: 1.5rem;
flex-wrap: nowrap !important;
}
.nsq-footer--mockup .nsq-footer__mark { flex: 0 0 auto; width: 3.5rem; margin: 0; }
.nsq-footer--mockup .nsq-footer__mark .nsq-logo__link { display: block; }
.nsq-footer--mockup .nsq-footer__legal {
opacity: .85;
font-size: .75rem !important;
line-height: 1.5;
letter-spacing: .015em;
text-align: right;
margin: 0;
}
@media (max-width: 899px) {
.nsq-footer--mockup > .nsq-footer__top { grid-template-columns: 1fr !important; }
}
@media (max-width: 599px) {
.nsq-footer--mockup .nsq-footer__band { padding-block: 1rem; background-position: 50% 50% !important; }
.nsq-footer--mockup .nsq-footer__mark { width: 2.75rem; }
.nsq-footer--mockup .nsq-footer__legal { flex: 0 1 15rem; }
}
@media (min-width: 1100px) {
.nsq-footer--mockup .nsq-contact--footer { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); }
}
/* Phone footer: mark above the left-aligned copyright. */
@media (max-width: 599px) {
.nsq-footer--mockup .nsq-footer__band-inner {
flex-direction: column;
align-items: flex-start;
gap: .875rem;
}
.nsq-footer--mockup .nsq-footer__legal {
flex: 0 1 auto;
text-align: left;
max-width: 30ch;
}
}
/* 22. Desktop hero mark meets the photograph without clipping its top.
Cap uniform logo scale by the hero's available height; phone placement
remains controlled by the existing mobile rules. */
@media (min-width: 900px) {
.nsq-hero__stage {
bottom: 0;
width: min(56vw, calc((max(34rem, calc(var(--nsq-hero-height, 85) * 1svh - var(--nsq-header-h))) - 1rem) * 1.31586));
}
}
/* The approved mark's left stem ends 0.848 SVG units above its bowl.
Align that visible stem edge with the photo, not the SVG bounding box,
and let the bowl's extra depth hang over the next section instead of
being cut off: the hero clips only sideways (the mark's right-hand
crop) and paints above the section that follows. */
@media (min-width: 900px) {
.nsq-hero__stage { translate: 0 .818%; }
.nsq-hero {
overflow-x: clip;
overflow-y: visible;
z-index: 2;
}
}
/* 23. Home services holds one viewport while the index steps through.
The block gets a scroll runway (--nsq-runway) and its inner grid sticks
below the header for that distance (position: sticky, no JS pinning).
Classes and variables exist only in the desktop motion enhancement. */
@media (min-width: 900px) {
html.nsq-motion .nsq-services--index.is-pinned-index {
box-sizing: border-box;
padding-top: 0;
padding-bottom: 0;
height: calc(var(--nsq-stage-h) + var(--nsq-runway));
background: var(--nsq-cream);
}
html.nsq-motion .is-pinned-index .nsq-services__inner {
position: sticky;
top: var(--nsq-stage-top);
box-sizing: border-box;
height: var(--nsq-stage-h);
min-height: 0;
padding-top: clamp(3.75rem, 8.5vh, 6rem);
padding-bottom: clamp(1.5rem, 3.5vh, 3rem);
overflow: hidden;
}
html.nsq-motion .nsq-services--index.is-pinned-index .nsq-services__intro { position: static; top: auto; }
.is-pinned-index .nsq-services__intro h2 { font-size: clamp(2.5rem, 3.8vw, 4.25rem); line-height: 1.05; }
.is-pinned-index .nsq-services__intro > p,
.is-pinned-index .nsq-services__active { font-size: clamp(1rem, 1.25vw, 1.25rem); line-height: 1.45; }
html.nsq-motion .nsq-services--index.is-pinned-index .nsq-services__panel { margin-top: clamp(1.25rem, 3vh, 2rem); }
.is-pinned-index .nsq-services__active { min-height: 0; }
.is-pinned-index .nsq-services__window { grid-column: 7 / -1; height: 100%; min-height: 0; overflow: hidden; position: relative; }
.is-pinned-index .nsq-services__items { position: relative; will-change: transform; }
.is-pinned-index .nsq-services__name { font-size: clamp(1.75rem, 2.8vw, 2.75rem); }
}
/* Keep dividers between services, with open edges at the start and end. */
.nsq-services--index .nsq-services__item:first-child { border-top: 0; }
.nsq-services--index .nsq-services__item:last-child { border-bottom: 0; }
/* Home philosophy: shorter landscape image and copy share a clear top edge. */
.nsq-approach { padding-block: clamp(3rem, 5vw, 4.5rem) !important; }
.nsq-approach > .nsq-split { align-items: flex-start !important; }
.nsq-approach .wp-block-column { align-self: flex-start !important; }
.nsq-approach .nsq-approach__quote { font-size: clamp(2.375rem, 4vw, 4.25rem) !important; }
.nsq-approach .nsq-steps { margin-top: clamp(2rem, 3.5vw, 3.5rem) !important; }
.nsq-philosophy-image img { aspect-ratio: 3 / 2 !important; object-fit: cover; object-position: 50% 50%; }
.nsq-approach .nsq-steps { margin-inline: auto !important; }
/* About opening: quiet paper texture supports the reading panel. */
.nsq-about-opening.nsq-photo-surface { --nsq-surface-opacity: .72; }
.nsq-about-opening > .nsq-story { width: 100%; margin-inline: 0 !important; }
.nsq-about-opening .nsq-business-engine-image img {
height: 100%; aspect-ratio: 3 / 2 !important;
object-fit: cover; object-position: 50% 50%;
}
@media (max-width: 781px) {
.nsq-about-opening .nsq-business-engine-image img { height: auto; }
}
/* A wider editorial image closes the philosophy's oversized column gap. */
.nsq-about-philosophy .nsq-philosophy__photo .wp-block-image {
width: 100%; max-width: none; margin: 0;
}
@media (min-width: 782px) {
.nsq-about-philosophy .nsq-philosophy > .wp-block-column:first-child { flex-basis: 52% !important; }
.nsq-about-philosophy .nsq-philosophy > .nsq-philosophy__photo { flex-basis: 48% !important; }
}
@media (min-width: 782px) and (max-width: 899px) {
.nsq-about-philosophy .nsq-philosophy { flex-direction: column; }
.nsq-about-philosophy .nsq-philosophy > .wp-block-column { width: 100%; flex-basis: auto !important; }
}
/* Client marks: an open white field, monochrome until interaction. */
.nsq-clients { background: var(--nsq-cream); }
.nsq-clients > h2 {
text-align: center;
font-size: clamp(2rem, 3.5vw, 3.5rem);
margin-bottom: clamp(2.5rem, 5vw, 4.5rem) !important;
}
.nsq-clients .nsq-logos {
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(1.5rem, 3vw, 3rem) clamp(1rem, 3vw, 3rem) !important;
border: 0;
margin-inline: auto !important;
}
.nsq-clients .nsq-logos .wp-block-image {
border: 0; padding: .75rem; background: transparent;
min-width: 0; height: clamp(7rem, 10vw, 10rem);
display: flex; align-items: center; justify-content: center;
}
.nsq-clients .nsq-logos img {
width: 100%; height: 100%; max-width: 13rem; max-height: 7rem;
object-fit: contain; mix-blend-mode: multiply;
filter: grayscale(1); opacity: .8;
transition: filter .25s ease, opacity .25s ease;
}
@media (hover: hover) {
.nsq-clients .nsq-logos .wp-block-image:hover img { filter: grayscale(0); opacity: 1; }
}
.nsq-clients .nsq-logos .wp-block-image:focus-within img,
.nsq-clients .nsq-logos .wp-block-image:active img { filter: grayscale(0); opacity: 1; }
@media (max-width: 1099px) {
.nsq-clients .nsq-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
.nsq-clients .nsq-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nsq-clients .nsq-logos .wp-block-image { height: 7rem; }
}
@media (prefers-reduced-motion: reduce) {
.nsq-clients .nsq-logos img { transition: none; }
}
/* 24. About: founders ------------------------------------------------------
* Each founder is a card whose portrait is exactly as wide as the text
* beneath it, so the photo sits centred over that founder's story. The pair
* is centred in the section and the heading aligns with the first card.
*/
#founders > h2,
#founders > .nsq-founders {
max-width: 68rem;
margin-left: auto !important;
margin-right: auto !important;
}
.nsq-founders.wp-block-columns {
gap: clamp(2.5rem, 5vw, 4.5rem) !important;
}
.nsq-founders .nsq-person .wp-block-image {
max-width: none;
margin: 0 0 1.5rem;
}
@media (max-width: 781px) {
.nsq-founders .nsq-person .wp-block-image {
max-width: 24rem;
margin-inline: auto;
}
}
/* LinkedIn profile links carry the LinkedIn mark (decorative). */
.nsq-person a[href*="linkedin.com/"] {
display: inline-flex;
align-items: center;
gap: 0.55em;
font-weight: 500;
}
.nsq-person a[href*="linkedin.com/"]::before {
content: "";
flex: none;
width: 1.15em;
height: 1.15em;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,") center / contain no-repeat;
mask: url("data:image/svg+xml,") center / contain no-repeat;
}
/* 25. About: mission and vision labels -------------------------------------
* Larger labels with an icon above each (sources in assets-src/icons/).
* Applied by the classes nsq-label--mission and nsq-label--vision on the
* label paragraphs; icons take the label colour (mint on burgundy).
*/
.nsq-label--mission,
.nsq-label--vision {
font-size: clamp(1.0625rem, 0.85rem + 0.55vw, 1.375rem) !important;
margin-bottom: clamp(1.25rem, 2vw, 1.75rem) !important;
}
.nsq-label--mission::before,
.nsq-label--vision::before {
content: "";
display: block;
width: clamp(2.5rem, 2rem + 1vw, 3.25rem);
height: clamp(2.5rem, 2rem + 1vw, 3.25rem);
margin-bottom: clamp(1rem, 1.6vw, 1.5rem);
background-color: currentColor;
-webkit-mask: var(--nsq-label-icon) left center / contain no-repeat;
mask: var(--nsq-label-icon) left center / contain no-repeat;
}
.nsq-label--mission { --nsq-label-icon: url("data:image/svg+xml,"); }
.nsq-label--vision { --nsq-label-icon: url("data:image/svg+xml,"); }
/* 26. About: values --------------------------------------------------------
* Room between the heading and the list, and an icon above each value
* (sources in assets-src/icons/value-*.svg). Assigned by position; a list
* item can choose one with the class nsq-icon-curiosity, -originality,
* -adaptability, -excellence or -advocacy.
*/
.nsq-section > .nsq-values {
margin-top: clamp(2.5rem, 5vw, 4.5rem) !important;
}
.nsq-values {
--nsq-icon-curiosity: url("data:image/svg+xml,");
--nsq-icon-originality: url("data:image/svg+xml,");
--nsq-icon-adaptability: url("data:image/svg+xml,");
--nsq-icon-excellence: url("data:image/svg+xml,");
--nsq-icon-advocacy: url("data:image/svg+xml,");
}
.nsq-values > li {
padding-top: 1.5rem;
}
.nsq-values > li::before {
content: "";
display: block;
width: 2.75rem;
height: 2.75rem;
margin-bottom: 1.25rem;
background-color: var(--nsq-magenta);
-webkit-mask: var(--nsq-value-icon) left center / contain no-repeat;
mask: var(--nsq-value-icon) left center / contain no-repeat;
}
.has-burgundy-background-color .nsq-values > li::before,
.has-charcoal-background-color .nsq-values > li::before {
background-color: var(--nsq-mint);
}
.nsq-values > li:nth-child(5n + 1) { --nsq-value-icon: var(--nsq-icon-curiosity); }
.nsq-values > li:nth-child(5n + 2) { --nsq-value-icon: var(--nsq-icon-originality); }
.nsq-values > li:nth-child(5n + 3) { --nsq-value-icon: var(--nsq-icon-adaptability); }
.nsq-values > li:nth-child(5n + 4) { --nsq-value-icon: var(--nsq-icon-excellence); }
.nsq-values > li:nth-child(5n + 5) { --nsq-value-icon: var(--nsq-icon-advocacy); }
.nsq-values > li.nsq-icon-curiosity { --nsq-value-icon: var(--nsq-icon-curiosity); }
.nsq-values > li.nsq-icon-originality { --nsq-value-icon: var(--nsq-icon-originality); }
.nsq-values > li.nsq-icon-adaptability { --nsq-value-icon: var(--nsq-icon-adaptability); }
.nsq-values > li.nsq-icon-excellence { --nsq-value-icon: var(--nsq-icon-excellence); }
.nsq-values > li.nsq-icon-advocacy { --nsq-value-icon: var(--nsq-icon-advocacy); }
@media (max-width: 899px) {
.nsq-values > li::before {
width: 2.5rem;
height: 2.5rem;
margin-bottom: 1rem;
}
}
/* Three service groups share one image format and display scale. */
.nsq-services--list .nsq-services__intro .nsq-service-group-image {
width: 100%; max-width: none;
}
.nsq-service-group-image img {
width: 100%; height: auto; aspect-ratio: 3 / 2 !important;
object-fit: cover; object-position: 50% 50%;
}
/* 27. Services: packages -----------------------------------------------------
* Room below the section heading, and an icon above each package: a flame
* for The Starter Ignite and a rising trend for The Growth Catalyst
* (sources in assets-src/icons/package-*.svg). Assigned by column order;
* a column can choose one with the class nsq-icon-ignite or nsq-icon-growth.
*/
.nsq-section > .nsq-packages {
margin-top: clamp(2.5rem, 5vw, 4.5rem) !important;
}
.nsq-packages {
--nsq-icon-ignite: url("data:image/svg+xml,");
--nsq-icon-growth: url("data:image/svg+xml,");
}
.nsq-packages > .wp-block-column::before {
content: "";
display: block;
width: clamp(3rem, 2.4rem + 1vw, 3.75rem);
height: clamp(3rem, 2.4rem + 1vw, 3.75rem);
margin-bottom: 1.25rem;
background-color: var(--nsq-magenta);
-webkit-mask: var(--nsq-package-icon) left center / contain no-repeat;
mask: var(--nsq-package-icon) left center / contain no-repeat;
}
.has-burgundy-background-color .nsq-packages > .wp-block-column::before,
.has-charcoal-background-color .nsq-packages > .wp-block-column::before {
background-color: var(--nsq-mint);
}
.nsq-packages > .wp-block-column:nth-child(2n + 1) { --nsq-package-icon: var(--nsq-icon-ignite); }
.nsq-packages > .wp-block-column:nth-child(2n + 2) { --nsq-package-icon: var(--nsq-icon-growth); }
.nsq-packages > .wp-block-column.nsq-icon-ignite { --nsq-package-icon: var(--nsq-icon-ignite); }
.nsq-packages > .wp-block-column.nsq-icon-growth { --nsq-package-icon: var(--nsq-icon-growth); }
@media (max-width: 781px) {
.nsq-packages > .wp-block-column::before {
width: 2.75rem;
height: 2.75rem;
margin-bottom: 1rem;
}
}
/* 28. Icons above the rules ----------------------------------------------------
* Steps, values and packages show their icon first, then the horizontal
* rule, then the text. The rule is drawn as a background line placed just
* below the icon (its former border-top is removed), so icon size, gap and
* line weight stay in one place.
*/
.nsq-steps > li,
.nsq-values > li,
.nsq-packages > .wp-block-column {
--nsq-ic: 2.75rem;
--nsq-ic-gap: 1.25rem;
--nsq-rule-w: 2px;
--nsq-rule-space: 1.5rem;
border-top: 0 !important;
padding-top: 0 !important;
background: linear-gradient(currentColor, currentColor) 0 calc(var(--nsq-ic) + var(--nsq-ic-gap)) / 100% var(--nsq-rule-w) no-repeat;
}
.nsq-values > li {
--nsq-rule-w: 1px;
}
.nsq-packages > .wp-block-column {
--nsq-ic: clamp(3rem, 2.4rem + 1vw, 3.75rem);
}
.nsq-steps > li::before,
.nsq-values > li::before,
.nsq-packages > .wp-block-column::before {
width: var(--nsq-ic);
height: var(--nsq-ic);
margin-bottom: calc(var(--nsq-ic-gap) + var(--nsq-rule-w) + var(--nsq-rule-space));
}
@media (max-width: 899px) {
.nsq-steps > li,
.nsq-values > li {
--nsq-ic: 2.5rem;
--nsq-ic-gap: 1rem;
--nsq-rule-space: 1.25rem;
}
.nsq-packages > .wp-block-column {
--nsq-ic: 2.75rem;
--nsq-ic-gap: 1rem;
--nsq-rule-space: 1.25rem;
}
}
/* 29. Social links as icons (footer and Contact page) -----------------------
* The contact-details block renders each network as an SVG mark with its
* name as screen-reader text. Hit areas are 44px; the icons are 24px.
*/
.nsq-contact__social {
gap: 0.25rem 0.5rem;
margin-left: -10px !important;
}
.nsq-contact a.nsq-social {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
background: none;
border-radius: 50%;
transition: color 0.2s var(--nsq-ease), background-color 0.2s var(--nsq-ease);
}
.nsq-social__icon {
display: block;
width: 24px;
height: 24px;
}
.nsq-contact a.nsq-social:hover {
color: var(--nsq-magenta);
background-color: rgba(206, 2, 95, 0.08);
}
.nsq-footer .nsq-contact a.nsq-social:hover,
.has-charcoal-background-color .nsq-contact a.nsq-social:hover {
color: var(--nsq-cream);
background-color: rgba(245, 239, 230, 0.12);
}