/* gtd.css -- GTD ANZ brand components.
Colour, type and spacing come from tokens-gtd.css custom properties only --
never hard-code a brand colour here. Reusable across all /gtd pages. */
body {
background: var(--gtd-bg);
color: var(--gtd-ink);
font-family: var(--gtd-font-body);
font-size: 17px;
}
/* ---- Fonts -----------------------------------------------------------
Oswald (headings) + Open Sans (body) via Google Fonts in .
Swap-to-licensed-fonts hook: when Trade Gothic Next is purchased, add
an Adobe Fonts (Typekit) /kit script in ahead of the
Google Fonts link, then change --gtd-font-head / --gtd-font-body in
tokens-gtd.css to lead with "Trade Gothic Next" -- no markup changes
needed here. */
h1, h2, h3, h4 {
font-family: var(--gtd-font-head);
font-weight: 600;
color: var(--gtd-ink);
text-wrap: pretty;
}
h2, h3 {
font-weight: 500;
}
p {
color: var(--gtd-muted);
}
.gtd-eyebrow {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
font-family: var(--gtd-font-head);
font-weight: 500;
font-size: 0.75rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gtd-ink);
}
.gtd-eyebrow--on-dark {
color: var(--gtd-orange);
}
.gtd-eyebrow__rule {
width: 30px;
height: 3px;
background: var(--gtd-orange);
flex: none;
}
.gtd-reg {
font-family: var(--gtd-font-body);
font-size: 0.6em;
vertical-align: 0.5em;
font-weight: 400;
}
/* ---- Buttons ----------------------------------------------------------- */
.btn {
display: inline-block;
font-family: var(--gtd-font-body);
font-weight: 600;
font-size: 0.95rem;
line-height: 1;
padding: 16px 28px;
border-radius: 2px;
text-decoration: none;
letter-spacing: 0.02em;
border: 1.5px solid transparent;
transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn--primary {
background: var(--gtd-orange);
color: var(--gtd-white);
}
.btn--primary:hover {
background: var(--gtd-orange-hover);
}
.btn--secondary {
background: transparent;
color: var(--gtd-ink);
border-color: var(--gtd-ink);
}
.btn--secondary:hover {
background: var(--gtd-ink);
color: var(--gtd-white);
}
.btn--on-dark {
background: transparent;
color: var(--gtd-white);
border-color: rgba(255, 255, 255, 0.65);
}
.btn--on-dark:hover {
border-color: var(--gtd-white);
background: rgba(255, 255, 255, 0.08);
}
.btn--block {
display: block;
text-align: center;
width: 100%;
}
.link-arrow {
display: inline-block;
font-family: var(--gtd-font-body);
font-weight: 600;
font-size: 0.95rem;
color: var(--gtd-orange);
text-decoration: none;
border-bottom: 2px solid rgba(229, 83, 0, 0.35);
padding-bottom: 2px;
}
.link-arrow:hover {
border-color: var(--gtd-orange);
}
/* ---- Skip link / focus -------------------------------------------------- */
.skip-link {
background: var(--gtd-ink);
color: var(--gtd-white);
font-family: var(--gtd-font-body);
font-weight: 600;
}
/* ---- Header -------------------------------------------------------------- */
.gtd-topbar {
background: var(--gtd-ink);
padding: 7px 0;
}
.gtd-topbar .container {
display: flex;
justify-content: flex-end;
}
.gtd-topbar__link {
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
}
.gtd-topbar__link:hover {
color: rgba(255, 255, 255, 0.9);
}
.gtd-header {
background: var(--gtd-white);
border-bottom: 1px solid var(--gtd-hairline);
position: sticky;
top: 0;
z-index: 100;
}
.gtd-nav {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 60px;
}
@media (min-width: 800px) {
.gtd-nav {
min-height: 76px;
}
}
.gtd-logo {
display: flex;
align-items: baseline;
gap: 8px;
text-decoration: none;
color: var(--gtd-ink);
font-family: Arial, sans-serif;
font-weight: 700;
font-size: 1.25rem;
}
.gtd-logo__sub {
font-family: var(--gtd-font-body);
font-weight: 400;
font-size: 0.7rem;
letter-spacing: 0.18em;
color: var(--gtd-muted);
}
.gtd-nav-toggle {
display: flex;
flex-direction: column;
gap: 5px;
padding: 10px;
margin-inline-start: 12px;
}
.gtd-nav-toggle__bar {
width: 22px;
height: 2px;
background: var(--gtd-ink);
}
@media (min-width: 800px) {
.gtd-nav-toggle {
display: none;
}
}
/* Anchored to .gtd-header (its nearest positioned ancestor, sticky) rather
than a hardcoded viewport offset -- so it sits flush under the header
regardless of the topbar's height. */
.gtd-nav-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--gtd-white);
border-top: 1px solid var(--gtd-hairline);
padding: 8px 24px 32px;
max-height: calc(100vh - 100%);
overflow-y: auto;
display: none;
}
.gtd-nav-menu.is-open {
display: block;
}
.gtd-nav-menu__list {
display: flex;
flex-direction: column;
}
.gtd-nav-menu__list a {
display: block;
padding: 16px 0;
border-top: 1px solid var(--gtd-hairline);
text-decoration: none;
font-size: 1.05rem;
color: var(--gtd-ink);
}
.gtd-nav-menu__list a[aria-current="page"] {
color: var(--gtd-orange);
font-weight: 600;
}
.gtd-nav__cta {
margin-top: 20px;
}
@media (min-width: 800px) {
.gtd-nav-menu {
position: static;
inset: auto;
padding: 0;
display: flex !important;
align-items: center;
gap: 28px;
width: auto;
}
.gtd-nav-menu__list {
flex-direction: row;
align-items: center;
gap: 28px;
}
.gtd-nav-menu__list a {
padding: 0;
border-top: 0;
font-size: 0.92rem;
}
.gtd-nav-menu__list a[aria-current="page"] {
color: var(--gtd-ink);
border-bottom: 2px solid var(--gtd-orange);
padding-bottom: 3px;
}
.gtd-nav__cta {
margin-top: 0;
padding: 12px 22px;
}
}
/* ---- Hero ------------------------------------------------------------- */
.gtd-hero {
background: var(--gtd-white);
padding-block: 56px 48px;
}
@media (min-width: 800px) {
.gtd-hero {
padding-block: 120px 96px;
}
}
.gtd-hero h1 {
font-size: 2.85rem;
line-height: 1.06;
max-width: 20ch;
}
@media (min-width: 800px) {
.gtd-hero h1 {
font-size: 6rem;
line-height: 1.02;
max-width: 1000px;
}
}
.text-accent {
color: var(--gtd-orange);
}
.gtd-hero__foot {
margin-top: 28px;
display: flex;
flex-direction: column;
gap: 20px;
}
@media (min-width: 800px) {
.gtd-hero__foot {
margin-top: 44px;
display: grid;
grid-template-columns: 1fr 480px;
gap: 96px;
align-items: end;
}
}
.gtd-hero__ctas {
display: flex;
flex-direction: column;
gap: 12px;
}
@media (min-width: 540px) {
.gtd-hero__ctas {
flex-direction: row;
align-items: center;
}
}
.gtd-hero__sub {
font-size: 1rem;
line-height: 1.7;
max-width: 40em;
}
@media (min-width: 800px) {
.gtd-hero__sub {
font-size: 1.125rem;
}
}
/* ---- Hero: photographic variant + real logo lockups (added 2026-07-03) --
.gtd-hero--photo turns the hero into a full-bleed water photo with a
charcoal overlay (#392E2C = rgb(57,46,44)) and reversed-out type.
On desktop the overlay runs left-to-right so the water shows through on
the right. Header/footer now use the real GTD ANZ lockups, not text. */
.gtd-hero--photo {
position: relative;
display: flex;
align-items: center;
min-height: 540px;
padding-block: 0;
color: var(--gtd-white);
background: var(--gtd-ink) url("../assets/gtd/images/water-pool-4.jpg") center / cover no-repeat;
}
@media (min-width: 800px) {
.gtd-hero--photo { min-height: 68vh; }
}
.gtd-hero--photo::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(57, 46, 44, 0.90) 0%,
rgba(57, 46, 44, 0.66) 100%
);
}
@media (min-width: 800px) {
.gtd-hero--photo::before {
background: linear-gradient(
100deg,
rgba(57, 46, 44, 0.92) 0%,
rgba(57, 46, 44, 0.80) 32%,
rgba(57, 46, 44, 0.45) 62%,
rgba(57, 46, 44, 0.12) 100%
);
}
}
.gtd-hero--photo .container {
position: relative;
z-index: 1;
width: 100%;
padding-block: 48px;
}
@media (min-width: 800px) {
.gtd-hero--photo .container { padding-block: 76px; }
}
.gtd-hero--photo h1 {
color: var(--gtd-white);
max-width: 18ch;
}
@media (min-width: 800px) {
.gtd-hero--photo h1 { font-size: 4.5rem; line-height: 1.04; max-width: 16ch; }
}
.gtd-hero--photo .gtd-eyebrow { color: var(--gtd-orange); }
.gtd-hero--photo .gtd-hero__sub {
margin-top: 22px;
max-width: 46ch;
color: rgba(255, 255, 255, 0.85);
}
.gtd-hero--photo .gtd-hero__ctas { margin-top: 32px; }
/* Real GTD ANZ logo lockups (replace the Arial text logo) */
.gtd-logo__img { display: block; height: 30px; width: auto; }
@media (min-width: 800px) { .gtd-logo__img { height: 38px; } }
.gtd-footer__logo-img { display: block; height: 44px; width: auto; }
/* ---- Hero: compact photographic variant for inner /gtd pages ------------
Same water-pool + charcoal-overlay treatment as .gtd-hero--photo above,
at the standard (compact) .gtd-hero block size -- the landing keeps the
taller .gtd-hero--photo, inner pages use this instead. Overlay reuses
the same charcoal as --gtd-ink (#392E2C = rgb(57,46,44)); kept as
literal rgba() so each gradient stop can carry its own alpha. */
.gtd-hero--water {
position: relative;
color: var(--gtd-white);
background: var(--gtd-ink) url("../assets/gtd/images/water-pool-4.jpg") center / cover no-repeat;
}
.gtd-hero--water::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
rgba(57, 46, 44, 0.94) 0%,
rgba(57, 46, 44, 0.82) 42%,
rgba(57, 46, 44, 0.40) 100%
);
}
@media (max-width: 640px) {
.gtd-hero--water::before {
background: linear-gradient(
180deg,
rgba(57, 46, 44, 0.90) 0%,
rgba(57, 46, 44, 0.80) 100%
);
}
}
.gtd-hero--water > .container {
position: relative;
z-index: 1;
}
.gtd-hero--water h1,
.gtd-hero--water .gtd-hero__sub {
color: var(--gtd-white);
}
.gtd-hero--water .gtd-eyebrow {
color: var(--gtd-orange);
}
/* ---- Photo band + trust strip ------------------------------------------ */
.gtd-photo-band {
height: 110px;
background: var(--gtd-ink) url("../assets/gtd/images/water-pool-4.jpg") center/cover no-repeat;
}
@media (min-width: 800px) {
.gtd-photo-band {
height: 180px;
}
}
.gtd-trust-strip {
background: var(--gtd-ink);
padding: 18px 0;
text-align: center;
}
.gtd-trust-strip .container {
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
@media (min-width: 800px) {
.gtd-trust-strip .container {
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 32px;
text-align: left;
}
}
.gtd-trust-strip p {
color: var(--gtd-white);
font-size: 0.9rem;
line-height: 1.6;
margin: 0;
}
.gtd-trust-strip__licence {
font-size: 0.72rem;
letter-spacing: 0.1em;
color: var(--gtd-grey);
white-space: nowrap;
}
/* ---- Numbered-column sections (problem / five steps share the pattern) - */
.gtd-numbered-grid {
display: flex;
flex-direction: column;
gap: 20px;
}
@media (min-width: 800px) {
.gtd-numbered-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
}
.gtd-numbered-grid__item {
border-top: 2px solid var(--gtd-ink);
padding-top: 14px;
}
@media (min-width: 800px) {
.gtd-numbered-grid__item {
padding-top: 22px;
}
}
.gtd-numbered-grid__num {
font-family: var(--gtd-font-head);
font-weight: 600;
font-size: 0.85rem;
color: var(--gtd-orange);
display: block;
margin-bottom: 8px;
}
.gtd-numbered-grid__item h3 {
font-size: 1.3rem;
margin-bottom: 6px;
}
.gtd-numbered-grid__item p {
font-size: 0.95rem;
line-height: 1.65;
}
.gtd-problem {
background: var(--gtd-white);
}
.gtd-problem__intro {
margin-bottom: 32px;
}
@media (min-width: 800px) {
.gtd-problem__intro {
display: grid;
grid-template-columns: 440px 1fr;
gap: 96px;
margin-bottom: 56px;
align-items: end;
}
}
.gtd-problem h2 {
font-size: 1.9rem;
line-height: 1.15;
margin-bottom: 16px;
}
@media (min-width: 800px) {
.gtd-problem h2 {
font-size: 2.75rem;
margin-bottom: 0;
}
}
.gtd-problem__intro p {
font-size: 0.97rem;
line-height: 1.7;
max-width: 60ch;
}
/* ---- Five steps (charcoal) ---------------------------------------------- */
.gtd-five-steps {
background: var(--gtd-ink);
}
.gtd-five-steps__head {
margin-bottom: 32px;
}
.gtd-five-steps__head h2,
.gtd-five-steps__head p {
color: var(--gtd-white);
}
.gtd-five-steps__head p {
color: rgba(255, 255, 255, 0.8);
font-size: 0.95rem;
line-height: 1.7;
max-width: 46ch;
margin-top: 10px;
}
@media (min-width: 800px) {
.gtd-five-steps__head {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 48px;
margin-bottom: 56px;
}
.gtd-five-steps__head h2 {
max-width: 520px;
}
.gtd-five-steps__head p {
margin-top: 0;
}
}
.gtd-five-steps h2 {
font-size: 1.9rem;
line-height: 1.15;
}
@media (min-width: 800px) {
.gtd-five-steps h2 {
font-size: 2.75rem;
}
}
.gtd-five-steps__list {
display: flex;
flex-direction: column;
}
@media (min-width: 800px) {
.gtd-five-steps__list {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 32px;
}
}
.gtd-five-steps__item {
border-top: 1px solid rgba(255, 255, 255, 0.25);
padding: 16px 0;
display: flex;
gap: 18px;
align-items: baseline;
}
.gtd-five-steps__item:hover {
border-color: var(--gtd-orange);
}
@media (min-width: 800px) {
.gtd-five-steps__item {
flex-direction: column;
gap: 0;
padding: 24px 0 0;
align-items: stretch;
}
}
.gtd-five-steps__num {
font-family: var(--gtd-font-head);
font-weight: 600;
font-size: 2rem;
line-height: 1;
color: var(--gtd-orange);
width: 52px;
flex: none;
}
@media (min-width: 800px) {
.gtd-five-steps__num {
font-size: 3.25rem;
width: auto;
margin-bottom: 16px;
}
}
.gtd-five-steps__item h3 {
color: var(--gtd-white);
font-size: 1.3rem;
margin-bottom: 2px;
}
@media (min-width: 800px) {
.gtd-five-steps__item h3 {
font-size: 1.6rem;
margin-bottom: 10px;
}
}
.gtd-five-steps__item p {
color: rgba(255, 255, 255, 0.78);
font-size: 0.85rem;
line-height: 1.65;
}
/* ---- Pathway -------------------------------------------------------------- */
.gtd-pathway {
background: var(--gtd-white);
}
.gtd-pathway h2 {
font-size: 1.9rem;
line-height: 1.15;
margin-bottom: 28px;
}
@media (min-width: 800px) {
.gtd-pathway h2 {
font-size: 2.75rem;
margin-bottom: 64px;
}
}
.gtd-pathway__list {
display: flex;
flex-direction: column;
}
@media (min-width: 800px) {
.gtd-pathway__list {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
}
.gtd-pathway__item {
display: flex;
gap: 18px;
}
@media (min-width: 800px) {
.gtd-pathway__item {
flex-direction: column;
gap: 0;
}
}
.gtd-pathway__rail {
display: flex;
flex-direction: column;
align-items: center;
flex: none;
}
@media (min-width: 800px) {
.gtd-pathway__rail {
flex-direction: row;
}
}
.gtd-pathway__node {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--gtd-ink);
color: var(--gtd-white);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--gtd-font-head);
font-weight: 600;
font-size: 0.9rem;
flex: none;
}
.gtd-pathway__node--current {
width: 48px;
height: 48px;
background: var(--gtd-orange);
font-size: 1rem;
box-shadow: 0 0 0 7px rgba(229, 83, 0, 0.12);
}
.gtd-pathway__connector {
width: 2px;
flex: 1;
background: var(--gtd-orange);
min-height: 24px;
}
@media (min-width: 800px) {
.gtd-pathway__connector {
width: auto;
height: 2px;
min-height: 0;
}
}
.gtd-pathway__item:last-child .gtd-pathway__connector {
background: transparent;
}
.gtd-pathway__body {
padding-bottom: 26px;
}
@media (min-width: 800px) {
.gtd-pathway__body {
text-align: center;
padding: 20px 10px 0;
}
}
.gtd-pathway__body h3 {
font-size: 1.15rem;
padding-top: 8px;
}
@media (min-width: 800px) {
.gtd-pathway__body h3 {
padding-top: 0;
font-size: 1.25rem;
margin-bottom: 6px;
}
}
.gtd-pathway__tag {
display: inline-block;
margin-left: 6px;
font-family: var(--gtd-font-body);
font-weight: 600;
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--gtd-orange);
}
.gtd-pathway__body p {
font-size: 0.85rem;
line-height: 1.6;
margin-top: 4px;
}
.gtd-pathway__via {
display: block;
margin-top: 6px;
font-size: 0.68rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--gtd-muted);
}
/* ---- Signature offer ---------------------------------------------------- */
.gtd-offer {
background: var(--gtd-cream);
border-top: 1px solid var(--gtd-hairline);
border-bottom: 1px solid var(--gtd-hairline);
}
@media (min-width: 900px) {
.gtd-offer__grid {
display: grid;
grid-template-columns: 1fr 420px;
gap: 96px;
}
}
.gtd-offer h2 {
font-size: 1.65rem;
line-height: 1.18;
margin-bottom: 18px;
}
@media (min-width: 800px) {
.gtd-offer h2 {
font-size: 2.75rem;
margin-bottom: 20px;
}
}
.gtd-offer__intro {
font-size: 1rem;
line-height: 1.7;
max-width: 60ch;
margin-bottom: 28px;
}
@media (min-width: 800px) {
.gtd-offer__intro {
margin-bottom: 32px;
}
}
.gtd-offer__list {
display: flex;
flex-direction: column;
gap: 14px;
}
@media (min-width: 700px) {
.gtd-offer__list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px 40px;
}
}
.gtd-offer__list li {
border-top: 1px solid var(--gtd-hairline);
padding-top: 12px;
font-size: 0.95rem;
line-height: 1.65;
color: var(--gtd-ink);
}
.gtd-offer__panel {
background: var(--gtd-ink);
padding: 28px 26px;
margin-top: 28px;
}
@media (min-width: 900px) {
.gtd-offer__panel {
padding: 52px 48px;
margin-top: 0;
align-self: start;
}
}
.gtd-offer__panel-label {
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin-bottom: 10px;
}
.gtd-offer__price {
display: flex;
align-items: baseline;
gap: 8px;
margin-bottom: 6px;
}
.gtd-offer__price strong {
font-family: var(--gtd-font-head);
font-weight: 600;
font-size: 2.4rem;
line-height: 1;
color: var(--gtd-white);
}
@media (min-width: 800px) {
.gtd-offer__price strong {
font-size: 3.4rem;
}
}
.gtd-offer__price span {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.78);
}
.gtd-offer__panel p.gtd-offer__note {
font-size: 0.85rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.72);
margin-bottom: 20px;
}
@media (min-width: 800px) {
.gtd-offer__panel p.gtd-offer__note {
margin-bottom: 28px;
}
}
.gtd-offer__panel-foot {
font-size: 0.78rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.5);
margin-top: 16px;
}
/* ---- About / coach ------------------------------------------------------- */
.gtd-about {
background: var(--gtd-white);
}
@media (min-width: 800px) {
.gtd-about__grid {
display: grid;
grid-template-columns: 1fr 320px;
gap: 96px;
align-items: start;
}
.gtd-about__grid--reverse {
grid-template-columns: 320px 1fr;
}
}
.gtd-about h2 {
font-size: 1.7rem;
line-height: 1.2;
margin-bottom: 18px;
}
@media (min-width: 800px) {
.gtd-about h2 {
font-size: 2.75rem;
margin-bottom: 20px;
}
}
.gtd-about__intro {
font-size: 0.95rem;
line-height: 1.7;
max-width: 62ch;
margin-bottom: 20px;
}
@media (min-width: 800px) {
.gtd-about__intro {
font-size: 1.0625rem;
margin-bottom: 28px;
}
}
.gtd-about__photo {
width: 120px;
float: left;
margin: 0 20px 16px 0;
}
@media (min-width: 800px) {
.gtd-about__photo {
width: 100%;
float: none;
margin: 0;
}
}
.gtd-credentials {
display: flex;
flex-wrap: wrap;
gap: 24px 40px;
clear: both;
}
.gtd-credential {
border-left: 2px solid var(--gtd-grey);
padding-left: 18px;
}
.gtd-credential--primary {
border-left-color: var(--gtd-orange);
}
.gtd-credential strong {
display: block;
font-size: 0.92rem;
color: var(--gtd-ink);
}
.gtd-credential > span {
display: block;
font-size: 0.82rem;
color: var(--gtd-muted);
margin-top: 3px;
}
/* ---- More ways (accordion) ------------------------------------------------ */
.gtd-more-ways {
background: var(--gtd-white);
border-top: 1px solid var(--gtd-hairline);
}
.gtd-more-ways h2 {
font-size: 1.6rem;
margin-bottom: 4px;
}
@media (min-width: 800px) {
.gtd-more-ways h2 {
font-size: 2.1rem;
}
}
.gtd-more-ways__kicker {
font-size: 0.85rem;
color: var(--gtd-muted);
margin-bottom: 20px;
}
@media (min-width: 800px) {
.gtd-more-ways__kicker {
margin-bottom: 36px;
}
}
.accordion__item {
border-top: 1px solid var(--gtd-hairline);
}
.accordion__item:last-child {
border-bottom: 1px solid var(--gtd-hairline);
}
.accordion__item h3 {
margin: 0;
font-size: 1rem;
}
.accordion__trigger {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 18px 0;
text-align: left;
font-family: var(--gtd-font-head);
font-weight: 500;
font-size: 1.15rem;
color: var(--gtd-ink);
}
@media (min-width: 800px) {
.accordion__trigger {
font-size: 1.4rem;
padding: 22px 0;
}
}
.accordion__trigger:hover {
color: var(--gtd-orange);
}
.accordion__icon {
flex: none;
width: 24px;
height: 24px;
position: relative;
}
.accordion__icon::before,
.accordion__icon::after {
content: "";
position: absolute;
background: var(--gtd-orange);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.accordion__icon::before {
width: 14px;
height: 2px;
}
.accordion__icon::after {
width: 2px;
height: 14px;
transition: transform 0.15s ease;
}
.accordion__trigger[aria-expanded="true"] .accordion__icon::after {
transform: translate(-50%, -50%) rotate(90deg);
opacity: 0;
}
.accordion__panel {
padding-bottom: 22px;
display: flex;
flex-direction: column;
gap: 12px;
max-width: 68ch;
}
.accordion__panel[hidden] {
display: none;
}
.accordion__panel p {
font-size: 0.95rem;
line-height: 1.65;
}
/* ---- Level 1 lead capture (charcoal) -------------------------------------- */
.gtd-level1 {
background: var(--gtd-ink);
}
@media (min-width: 900px) {
.gtd-level1__grid {
display: grid;
grid-template-columns: 1fr 440px;
gap: 88px;
align-items: center;
}
}
.gtd-level1__kicker {
font-family: var(--gtd-font-head);
font-weight: 500;
font-size: 0.78rem;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--gtd-orange);
margin-bottom: 14px;
}
.gtd-level1 h2 {
color: var(--gtd-white);
font-size: 1.6rem;
line-height: 1.2;
margin-bottom: 14px;
}
@media (min-width: 800px) {
.gtd-level1 h2 {
font-size: 2.75rem;
margin-bottom: 22px;
}
}
.gtd-level1__copy {
color: rgba(255, 255, 255, 0.75);
font-size: 0.95rem;
line-height: 1.7;
max-width: 60ch;
}
@media (min-width: 800px) {
.gtd-level1__copy {
font-size: 1.0625rem;
}
}
.gtd-level1__panel {
background: var(--gtd-charcoal-panel);
padding: 26px 24px;
margin-top: 32px;
}
@media (min-width: 900px) {
.gtd-level1__panel {
padding: 40px;
margin-top: 0;
}
}
.gtd-level1__panel-label {
font-family: var(--gtd-font-body);
font-weight: 600;
font-size: 0.9rem;
color: var(--gtd-white);
margin-bottom: 16px;
}
.gtd-form-field {
display: block;
margin-bottom: 12px;
}
.gtd-form-field label {
display: block;
font-size: 0.82rem;
font-weight: 600;
color: var(--gtd-white);
margin-bottom: 6px;
}
.gtd-form-field input {
width: 100%;
background: var(--gtd-white);
border: 1px solid transparent;
padding: 14px 16px;
font-size: 0.95rem;
color: var(--gtd-ink);
}
.gtd-form-field input:focus-visible {
outline: 2px solid var(--gtd-orange);
outline-offset: 2px;
}
.gtd-level1__form-foot {
font-size: 0.82rem;
line-height: 1.65;
color: rgba(255, 255, 255, 0.6);
margin-top: 14px;
}
.gtd-level1__form-foot a {
color: var(--gtd-white);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---- Resources teaser ------------------------------------------------------ */
.gtd-resources {
background: var(--gtd-white);
}
.gtd-resources__grid {
display: flex;
flex-direction: column;
gap: 28px;
}
@media (min-width: 700px) {
.gtd-resources__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
}
.gtd-resources__item {
border-top: 2px solid var(--gtd-ink);
padding-top: 18px;
}
.gtd-resources__item h3 {
font-size: 1.15rem;
margin-bottom: 6px;
}
@media (min-width: 800px) {
.gtd-resources__item h3 {
font-size: 1.4rem;
}
}
.gtd-resources__item p {
font-size: 0.9rem;
line-height: 1.65;
margin-bottom: 12px;
}
/* ---- Final CTA -------------------------------------------------------------- */
.gtd-final-cta {
background: var(--gtd-cream);
border-top: 1px solid var(--gtd-hairline);
text-align: center;
}
@media (min-width: 800px) {
.gtd-final-cta .container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 64px;
text-align: left;
}
}
.gtd-final-cta h2 {
font-size: 1.85rem;
line-height: 1.12;
margin-bottom: 22px;
}
@media (min-width: 800px) {
.gtd-final-cta h2 {
font-size: 3.15rem;
max-width: 640px;
margin-bottom: 0;
}
}
.gtd-final-cta__actions {
flex: none;
}
.gtd-final-cta__note {
font-size: 0.82rem;
color: var(--gtd-muted);
margin-top: 12px;
}
/* ---- Numbered/card grid column-count modifiers (sub-pages reuse the
landing's .gtd-numbered-grid for option cards with different item counts) */
@media (min-width: 800px) {
.gtd-numbered-grid--cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.gtd-numbered-grid--cols-4 {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 800px) {
.gtd-pathway__list--cols-4 {
grid-template-columns: repeat(4, 1fr);
}
}
/* ---- Quote / testimonial (About) ----------------------------------------- */
.gtd-quote {
border-left: 3px solid var(--gtd-orange);
padding-left: 20px;
margin-top: 28px;
}
@media (min-width: 800px) {
.gtd-quote {
padding-left: 28px;
margin-top: 36px;
}
}
.gtd-quote blockquote {
font-family: var(--gtd-font-head);
font-weight: 500;
font-size: 1.25rem;
line-height: 1.4;
color: var(--gtd-ink);
max-width: 46ch;
}
@media (min-width: 800px) {
.gtd-quote blockquote {
font-size: 1.5rem;
}
}
.gtd-quote cite {
display: block;
margin-top: 14px;
font-style: normal;
font-size: 0.85rem;
color: var(--gtd-muted);
}
.gtd-quote__foot {
margin-top: 6px;
font-size: 0.78rem;
color: var(--gtd-muted);
}
/* ---- Form fields: textarea + inline status (extends .gtd-form-field,
shared by the Level 1 lead-capture band and the Contact enquiry band) --- */
.gtd-form-field textarea {
width: 100%;
background: var(--gtd-white);
border: 1px solid transparent;
padding: 14px 16px;
font-family: var(--gtd-font-body);
font-size: 0.95rem;
color: var(--gtd-ink);
resize: vertical;
min-height: 120px;
}
.gtd-form-field textarea:focus-visible {
outline: 2px solid var(--gtd-orange);
outline-offset: 2px;
}
.gtd-form-field--optional label span {
font-weight: 400;
color: rgba(255, 255, 255, 0.55);
text-transform: none;
letter-spacing: normal;
}
.gtd-form-status {
margin-top: 14px;
font-size: 0.85rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.85);
}
/* ---- Contact details block ------------------------------------------------ */
.gtd-contact-details {
display: flex;
flex-direction: column;
gap: 18px;
}
@media (min-width: 700px) {
.gtd-contact-details {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px 40px;
}
}
.gtd-contact-details__label {
font-family: var(--gtd-font-head);
font-weight: 500;
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--gtd-muted);
margin-bottom: 4px;
}
.gtd-contact-details__value {
font-size: 1rem;
color: var(--gtd-ink);
}
.gtd-contact-details__value a {
color: var(--gtd-ink);
text-decoration: underline;
text-underline-offset: 3px;
}
/* ---- Media section: copy + image, alternating sides. Used across inner
pages to break up single-column text blocks that would otherwise leave
dead space beside a narrow measure on wide viewports. ------------------- */
.gtd-mediasec .container {
display: flex;
flex-direction: column;
gap: 32px;
}
@media (min-width: 820px) {
.gtd-mediasec .container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(32px, 5vw, 72px);
align-items: center;
}
.gtd-mediasec--reverse .gtd-mediasec__media {
order: -1;
}
}
.gtd-mediasec__media {
border-radius: 16px;
overflow: hidden;
aspect-ratio: 16 / 9;
box-shadow: 0 26px 64px -32px rgba(57, 46, 44, 0.4);
}
@media (min-width: 820px) {
.gtd-mediasec__media {
aspect-ratio: 4 / 3;
}
}
.gtd-mediasec__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gtd-mediasec__body p {
max-width: 56ch;
margin-top: 20px;
font-size: 1.0625rem;
line-height: 1.7;
}
/* ---- Centred statement section -- for short reflective copy that would
otherwise hug the left edge of the wide container. --------------------- */
.section--centred .container {
max-width: 74ch;
margin-inline: auto;
text-align: left;
}
/* ---- Footer -------------------------------------------------------------- */
.gtd-footer {
background: var(--gtd-ink);
padding-block: 48px 32px;
}
@media (min-width: 800px) {
.gtd-footer {
padding-block: 72px 40px;
}
}
.gtd-footer__logo {
display: flex;
align-items: baseline;
gap: 8px;
color: var(--gtd-white);
font-family: Arial, sans-serif;
font-weight: 700;
font-size: 1.15rem;
margin-bottom: 14px;
}
.gtd-footer__logo span.gtd-logo__sub {
color: rgba(255, 255, 255, 0.55);
}
.gtd-footer__top {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 800px) {
.gtd-footer__top {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 96px;
padding-bottom: 48px;
}
}
.gtd-footer__blurb {
font-size: 0.9rem;
line-height: 1.7;
color: rgba(255, 255, 255, 0.6);
max-width: 340px;
flex-basis: 100%;
}
@media (min-width: 800px) {
.gtd-footer__blurb {
flex-basis: auto;
}
}
.gtd-footer__col {
display: none;
}
@media (min-width: 800px) {
.gtd-footer__col {
display: flex;
flex-direction: column;
gap: 10px;
}
}
.gtd-footer__col-heading {
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.45);
margin-bottom: 4px;
}
.gtd-footer__col a,
.gtd-footer__links a {
font-size: 0.87rem;
color: rgba(255, 255, 255, 0.75);
text-decoration: none;
}
.gtd-footer__col a:hover,
.gtd-footer__links a:hover {
color: var(--gtd-white);
}
.gtd-footer__links {
display: flex;
flex-wrap: wrap;
gap: 10px 20px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (min-width: 800px) {
.gtd-footer__links {
display: none;
}
}
.gtd-footer__bottom {
padding-top: 20px;
display: flex;
flex-direction: column;
gap: 16px;
}
@media (min-width: 800px) {
.gtd-footer__bottom {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
gap: 48px;
padding-top: 28px;
}
}
.gtd-footer__legal {
font-size: 0.75rem;
line-height: 1.8;
color: rgba(255, 255, 255, 0.62);
max-width: 760px;
}
.gtd-footer__dac {
font-size: 0.75rem;
letter-spacing: 0.06em;
color: var(--gtd-grey);
white-space: nowrap;
}
/* ---- GTD-Q® assessment ---------------------------------------------------
Ported from design/GTD-Q plugin/. Two states (question form / results)
live in the same page and are toggled via [hidden] by src/js/gtdq.js --
no reload, no network request. */
.gtdq-intro {
max-width: 68ch;
font-size: 1.0625rem;
line-height: 1.7;
margin-top: 16px;
margin-bottom: 36px;
}
.gtdq-questions {
display: flex;
flex-direction: column;
margin-bottom: 32px;
}
.gtdq-question {
border-top: 1px solid var(--gtd-hairline);
padding: 22px 0;
border-radius: 4px;
transition: background-color 0.15s ease;
}
.gtdq-question:last-child {
border-bottom: 1px solid var(--gtd-hairline);
}
.gtdq-question--unanswered {
background: #FDEDEA;
box-shadow: inset 3px 0 0 #B3261E;
padding-left: 16px;
padding-right: 16px;
}
.gtdq-question__fieldset {
border: 0;
padding: 0;
margin: 0;
}
.gtdq-question__legend {
display: flex;
gap: 14px;
align-items: baseline;
font-family: var(--gtd-font-body);
font-weight: 600;
font-size: 1rem;
color: var(--gtd-ink);
margin-bottom: 18px;
padding: 0;
}
.gtdq-question__num {
font-family: var(--gtd-font-head);
font-weight: 600;
color: var(--gtd-orange);
flex: none;
}
.gtdq-scale {
display: flex;
flex-wrap: wrap;
gap: 14px 10px;
}
.gtdq-scale__option {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
width: calc(20% - 8px);
min-width: 78px;
text-align: center;
cursor: pointer;
}
@media (max-width: 480px) {
.gtdq-scale__option {
width: calc(33.33% - 7px);
}
}
.gtdq-scale__option input[type="radio"] {
appearance: none;
-webkit-appearance: none;
width: 26px;
height: 26px;
border-radius: 50%;
border: 2px solid var(--gtd-ink);
background: var(--gtd-white);
margin: 0;
flex: none;
}
.gtdq-scale__option input[type="radio"]:checked {
background: var(--gtd-orange);
border-color: var(--gtd-orange);
}
.gtdq-scale__option input[type="radio"]:focus-visible {
outline: 2px solid var(--gtd-orange);
outline-offset: 3px;
}
.gtdq-scale__text {
font-size: 0.76rem;
line-height: 1.3;
color: var(--gtd-muted);
}
.gtdq-submit-row {
margin-top: 8px;
}
/* Validation dialog -- native