Hello, World!

@import "tailwindcss" source(none); @source "../src"; @import "tw-animate-css"; @theme inline { --color-background: var(--bone); --color-foreground: var(--ink); --color-primary: var(--ink); --color-primary-foreground: var(--bone); --color-secondary: var(--silver); --color-secondary-foreground: var(--ink); --color-muted: var(--silver); --color-muted-foreground: var(--stone); --color-accent: var(--sage); --color-accent-foreground: var(--ink); --color-border: var(--silver); --color-input: var(--silver); --color-ring: var(--sage); --font-sans: Arial, Helvetica, sans-serif; --font-display: Georgia, "Times New Roman", serif; } :root { --ink: #0d0d0d; --charcoal: #171717; --stone: #242424; --silver: #c7c7c7; --bone: #f0efec; --sage: #7d9b76; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bone); color: var(--ink); font-family: Arial, Helvetica, sans-serif; } a { color: inherit; text-decoration: none; } button, input, textarea { font: inherit; } ::selection { background: var(--sage); color: var(--ink); } .site-shell { min-height: 100vh; overflow: hidden; } .skip-link { position: fixed; z-index: 100; left: 1rem; top: 1rem; transform: translateY(-200%); background: var(--bone); padding: .75rem 1rem; } .skip-link:focus { transform: none; } .site-header { height: 96px; padding: 0 clamp(1.5rem,5vw,5rem); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--silver); background: color-mix(in srgb, var(--bone) 94%, transparent); position: relative; z-index: 10; } .wordmark { font-family: Georgia, "Times New Roman", serif; font-size: 2rem; line-height: 1; color: var(--ink); letter-spacing: 0; } .wordmark-reversed { color: var(--bone); } .site-header nav { display: flex; gap: clamp(1.5rem,4vw,4rem); font-size: .78rem; text-transform: uppercase; } .site-header nav a { padding: .6rem 0; border-bottom: 1px solid transparent; } .site-header nav a:hover, .site-header nav a[aria-current="page"] { border-color: var(--sage); } .site-footer { min-height: 180px; padding: 3rem clamp(1.5rem,5vw,5rem); display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 2rem; border-top: 1px solid var(--silver); font-size: .72rem; } .site-footer > :last-child { justify-self: end; } .site-footer p { margin: 0; } .site-footer p a { text-decoration: underline; text-underline-offset: 3px; } .eyebrow { margin: 0 0 1.25rem; color: var(--sage); font-size: .68rem; font-weight: 700; line-height: 1.4; text-transform: uppercase; } h1,h2,h3,h4,p { letter-spacing: 0; } h1,h2,h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; } h1 em,h2 em { color: var(--sage); font-weight: 400; } .editorial-section { padding: clamp(5rem,10vw,10rem) clamp(1.5rem,7vw,7rem); } .editorial-section h2 { margin: 0; font-size: clamp(2.5rem,5.6vw,5.6rem); line-height: 1.02; } .body-copy { font-size: clamp(1rem,1.25vw,1.2rem); line-height: 1.7; } .body-copy p { margin: 0 0 1.5rem; } .sage-statement { color: var(--sage); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.35rem,2vw,2rem); line-height: 1.35; } .home-hero { min-height: calc(100svh - 96px); background: var(--ink); color: var(--bone); padding: clamp(3rem,6vw,6rem) clamp(1.5rem,5vw,5rem) 2rem; display: grid; grid-template-columns: minmax(180px,1fr) minmax(0,2.65fr); grid-template-rows: 1fr auto; gap: 2rem; } .hero-brand .wordmark { display: block; font-size: clamp(3rem,5vw,5rem); margin-bottom: 2rem; } .hero-statement { align-self: center; max-width: 1000px; } .hero-statement h1 { margin: 0; font-size: clamp(3.4rem,7vw,7.8rem); line-height: .96; max-width: 12ch; } .hero-statement h1 .h1-lead { display: block; margin-bottom: .55em; color: var(--sage); font-size: .3em; line-height: 1.35; letter-spacing: .01em; } .hero-outcome { max-width: 780px; margin: clamp(2rem,3vw,3rem) 0 0; color: var(--sage); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.2rem,1.8vw,1.65rem); line-height: 1.45; } .hero-promise { margin: 1.25rem 0 0; color: var(--bone); font-size: .74rem; font-weight: 700; text-transform: uppercase; } .hero-copy { margin-top: clamp(2.5rem,5vw,5rem); max-width: 900px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem,5vw,5rem); color: var(--silver); line-height: 1.65; } .hero-copy p { margin: 0; } .hero-actions { margin-top: 3rem; display: flex; gap: 1rem; color: var(--sage); font-size: .78rem; text-transform: uppercase; } .hero-tagline { grid-column: 1 / -1; margin: 0; padding-top: 1.5rem; border-top: 1px solid var(--stone); color: var(--silver); font-family: Georgia, "Times New Roman", serif; font-size: .9rem; } .firm-value-section { padding: clamp(4rem,7vw,7rem) clamp(1.5rem,7vw,7rem); border-top: 1px solid var(--silver); border-bottom: 1px solid var(--silver); display: grid; grid-template-columns: minmax(180px,.6fr) minmax(0,1.4fr); gap: clamp(3rem,8vw,8rem); } .firm-value-section > p:last-child { max-width: 1000px; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.8rem,3.6vw,3.8rem); line-height: 1.15; } .two-column-section,.pathway-section { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr); gap: clamp(4rem,10vw,10rem); } .dark-section { background: var(--charcoal); color: var(--bone); } .dark-section .eyebrow { color: var(--sage); } .program-section .section-heading { max-width: 900px; } .program-copy { margin: 4rem 0 2rem auto; width: min(100%,650px); color: var(--silver); font-size: 1.05rem; line-height: 1.7; } .number-list { margin: 4rem 0; padding: 0; list-style: none; border-top: 1px solid var(--stone); } .number-list li { display: grid; grid-template-columns: 8rem 1fr; gap: 2rem; padding: 1.4rem 0; border-bottom: 1px solid var(--stone); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.2rem,2vw,2rem); } .number-list span { color: var(--sage); font-family: Arial, Helvetica, sans-serif; font-size: .7rem; padding-top: .5rem; } .program-closing { max-width: 750px; margin: 0 0 0 auto; color: var(--silver); line-height: 1.7; } .room-section { min-height: 820px; display: grid; grid-template-columns: 1fr 1fr; } .room-title { padding: clamp(5rem,8vw,8rem) clamp(1.5rem,7vw,7rem); background: var(--sage); display: flex; flex-direction: column; justify-content: space-between; } .room-title .eyebrow { color: var(--ink); } .room-title h2 { margin: 0; font-size: clamp(3rem,6vw,6rem); line-height: 1; } .room-sequence { padding: clamp(5rem,8vw,8rem) clamp(1.5rem,7vw,7rem); display: flex; flex-direction: column; justify-content: center; gap: 2rem; line-height: 1.6; } .room-sequence p { margin: 0; } .room-list { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.7rem,3vw,3rem); line-height: 1.35; } .capability-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(4rem,10vw,10rem); } .capability-section .section-heading p { margin-top: 3rem; max-width: 48ch; line-height: 1.7; } .list-intro { margin: 0 0 2rem; color: var(--sage); font-weight: 700; font-size: .75rem; text-transform: uppercase; } .capability-list { list-style: none; margin: 0; padding: 0; counter-reset: points; } .capability-list li { counter-increment: points; position: relative; padding: 1.4rem 0 1.4rem 4rem; border-top: 1px solid var(--silver); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.15rem,1.8vw,1.65rem); line-height: 1.35; } .capability-list li::before { content: "0" counter(points); position: absolute; left: 0; top: 1.65rem; color: var(--sage); font: 700 .66rem Arial, sans-serif; } .contact-strip { min-height: 520px; padding: clamp(5rem,8vw,8rem) clamp(1.5rem,7vw,7rem); background: var(--ink); color: var(--bone); display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 4rem; } .contact-strip h2 { margin: 0; font-size: clamp(2rem,3vw,3.2rem); } .contact-strip p { color: var(--silver); } .contact-details { display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; font-size: clamp(1rem,1.3vw,1.2rem); } .contact-details a { border-bottom: 1px solid var(--sage); } .contact-details p { margin: 1rem 0 0; } .coming-soon { grid-column: 1 / -1; border-top: 1px solid var(--stone); padding-top: 2rem; font-family: Georgia, "Times New Roman", serif; } .coming-soon span { font: .65rem Arial, sans-serif; text-transform: uppercase; } .page-intro { padding: clamp(5rem,10vw,10rem) clamp(1.5rem,7vw,7rem); border-bottom: 1px solid var(--silver); } .page-intro > div { max-width: 1200px; } .page-intro h1 { margin: 0; font-size: clamp(3.5rem,8vw,8.5rem); line-height: .96; } .intro-copy { margin: 5rem 0 0 auto; max-width: 680px; font-size: 1.08rem; line-height: 1.75; } .role-grid { margin-top: 5rem; display: grid; grid-template-columns: repeat(2,1fr); border-top: 1px solid var(--stone); border-left: 1px solid var(--stone); } .role-grid article { padding: clamp(2rem,4vw,4rem); border-right: 1px solid var(--stone); border-bottom: 1px solid var(--stone); } .role-number { color: var(--sage); font-size: .68rem; } .role-grid h3 { margin: 2rem 0 .6rem; font-size: 2rem; } .role-grid h4 { color: var(--sage); font: 700 .68rem Arial, sans-serif; text-transform: uppercase; } .role-grid article > p:last-child { color: var(--silver); line-height: 1.65; } .beliefs-section { display: grid; grid-template-columns: .65fr 1.35fr; gap: 4rem; } .beliefs-section > h2 { font-size: clamp(2.5rem,4.5vw,4.5rem); } .beliefs-copy { grid-column: 2; max-width: 760px; line-height: 1.7; } .beliefs-copy .large-line { margin-top: 3rem; font: 400 clamp(1.6rem,2.5vw,2.5rem)/1.3 Georgia, serif; color: var(--sage); } .human-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(4rem,10vw,10rem); background: var(--sage); } .human-section .eyebrow,.human-section .sage-statement { color: var(--ink); } .human-section h2 { max-width: 10ch; } .how-section { border-top: 1px solid var(--silver); display: grid; grid-template-columns: 1fr 2fr; } .how-section > p { margin: 0; max-width: 850px; font: 400 clamp(1.8rem,3.8vw,3.8rem)/1.25 Georgia, serif; } .evidence-section { display: grid; grid-template-columns: 1.35fr .65fr; background: var(--charcoal); color: var(--bone); } .evidence-section article { padding: clamp(4rem,7vw,7rem); } .evidence-section article + article { border-left: 1px solid var(--stone); } .evidence-section p:last-child { max-width: 700px; margin: 0; color: var(--silver); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.25rem,2vw,2rem); line-height: 1.4; } .quote-section { min-height: 560px; padding: clamp(4rem,7vw,7rem); background: var(--ink); color: var(--bone); display: flex; flex-direction: column; justify-content: space-between; } .quote-section blockquote { margin: 4rem 0 1rem; max-width: 16ch; font: 400 clamp(3rem,7vw,7rem)/1 Georgia, serif; } .quote-section > p { color: var(--sage); } .contact-page { padding: clamp(5rem,10vw,10rem) clamp(1.5rem,7vw,7rem); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(4rem,10vw,10rem); min-height: 750px; } .contact-heading h1 { margin: 0 0 2rem; font-size: clamp(3.5rem,7vw,7.5rem); line-height: .95; } .contact-heading > p { max-width: 440px; line-height: 1.6; } .contact-form { align-self: center; } .contact-form label { display: block; margin-bottom: 2rem; color: var(--sage); font-size: .68rem; font-weight: 700; text-transform: uppercase; } .contact-form input,.contact-form textarea { display: block; width: 100%; margin-top: .7rem; padding: .9rem 0; border: 0; border-bottom: 1px solid var(--silver); border-radius: 0; background: transparent; color: var(--ink); outline: 0; } .contact-form input:focus,.contact-form textarea:focus { border-color: var(--sage); } .form-submit { min-width: 150px; height: 48px; border-radius: 0; background: var(--ink); color: var(--bone); box-shadow: none; } .form-submit:hover { background: var(--sage); color: var(--ink); } @media (prefers-reduced-motion: no-preference) { .hero-statement h1,.page-intro h1 { animation: enter .9s ease-out both; } @keyframes enter { from { opacity: 0; transform: translateY(20px); } } } @media (max-width: 760px) { .site-header { height: 78px; } .wordmark { font-size: 1.6rem; } .site-footer { grid-template-columns: 1fr; align-items: start; } .site-footer > :last-child { justify-self: start; } .home-hero { min-height: auto; grid-template-columns: 1fr; padding-top: 3rem; } .hero-brand { display: flex; justify-content: space-between; align-items: flex-start; } .hero-brand .wordmark { font-size: 2.4rem; } .hero-copy,.two-column-section,.pathway-section,.firm-value-section,.room-section,.capability-section,.contact-strip,.beliefs-section,.human-section,.how-section,.evidence-section,.contact-page { grid-template-columns: 1fr; } .hero-statement h1 { font-size: clamp(3.2rem,15vw,5.2rem); } .hero-tagline,.coming-soon,.beliefs-copy { grid-column: 1; } .number-list li { grid-template-columns: 3rem 1fr; } .room-title { min-height: 560px; } .role-grid { grid-template-columns: 1fr; } .evidence-section article + article { border-left: 0; border-top: 1px solid var(--stone); } .contact-page { min-height: auto; } } /* Squarespace native header, footer and contact form */ .header, .header-announcement-bar-wrapper { background: var(--bone) !important; } .header-title-text a { font-family: Georgia, "Times New Roman", serif !important; color: var(--ink) !important; } .header-nav-item a { font-family: Arial, Helvetica, sans-serif !important; font-size: .78rem !important; letter-spacing: 0 !important; text-transform: uppercase; } .header-nav-item--active a { border-bottom: 1px solid var(--sage); } footer.sections { background: var(--bone) !important; border-top: 1px solid var(--silver); } .form-wrapper .field-list .title { color: var(--sage) !important; font: 700 .68rem Arial, sans-serif !important; letter-spacing: 0 !important; text-transform: uppercase; } .form-wrapper input, .form-wrapper textarea { border: 0 !important; border-bottom: 1px solid var(--silver) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } .form-wrapper input:focus, .form-wrapper textarea:focus { border-color: var(--sage) !important; } .form-wrapper input[type=submit], .form-wrapper .button { border-radius: 0 !important; background: var(--ink) !important; color: var(--bone) !important; font-family: Arial, Helvetica, sans-serif !important; } .form-wrapper input[type=submit]:hover, .form-wrapper .button:hover { background: var(--sage) !important; color: var(--ink) !important; }