/* ========================================================================== CASA NEXUS - Sales funnel site Shared design system. Warm, grounded, editorial. Earth tones. Display: Fraunces (characterful serif). Body: Karla (warm grotesque). ========================================================================== */ :root { /* Palette - warm earth tones on a clean cream ground */ --ink: #241c17; /* near-black, warm */ --ink-soft: #4a3d34; --muted: #6f6155; --muted-2: #91826f; --cream: #faf5ec; /* page background */ --paper: #ffffff; --sand: #f3e9da; /* raised surfaces */ --sand-2: #ece0cd; --line: #e2d4bf; /* borders */ --line-soft: #eee2ce; /* Rust / terracotta - the brand accent */ --rust: #b4471f; --rust-deep: #8f3413; --rust-tint: #f6e5dc; /* Division accents (all within the warm family) */ --consulting: #b4471f; /* rust */ --research: #b9822b; /* ochre / amber */ --media: #7c3a2c; /* deep sienna */ --foundation: #6a6a35; /* olive */ --shadow-sm: 0 1px 2px rgba(36,28,23,.06), 0 2px 6px rgba(36,28,23,.05); --shadow-md: 0 6px 22px rgba(36,28,23,.10), 0 2px 8px rgba(36,28,23,.06); --shadow-lg: 0 24px 60px rgba(36,28,23,.16); --radius: 14px; --radius-lg:22px; --maxw: 1180px; --gutter: clamp(1.15rem, 4vw, 2.75rem); --accent: var(--rust); --accent-deep: var(--rust-deep); --accent-tint: var(--rust-tint); } /* Per-page division theming: set data-division on */ body[data-division="research"] { --accent: var(--research); --accent-deep:#8d5f14; --accent-tint:#f6ecd6; } body[data-division="media"] { --accent: var(--media); --accent-deep:#5d281d; --accent-tint:#f2e2dc; } body[data-division="foundation"] { --accent: var(--foundation); --accent-deep:#4f4f22; --accent-tint:#edecd8; } body[data-division="consulting"] { --accent: var(--consulting); --accent-deep: var(--rust-deep); --accent-tint: var(--rust-tint); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { margin: 0; overflow-x: hidden; font-family: "Karla", system-ui, sans-serif; color: var(--ink); background-color: var(--cream); background-image: radial-gradient(1200px 600px at 82% -8%, rgba(180,71,31,.06), transparent 60%), radial-gradient(900px 500px at -6% 12%, rgba(185,130,43,.05), transparent 55%); background-attachment: fixed; line-height: 1.6; font-size: 17px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 550; line-height: 1.08; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 .5em; font-optical-sizing: auto; overflow-wrap: break-word; hyphens: auto; } p { margin: 0 0 1rem; overflow-wrap: break-word; } a { color: var(--accent-deep); text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); text-underline-offset: 3px; } img { max-width: 100%; display: block; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .narrow { max-width: 760px; } section { padding-block: clamp(3rem, 7vw, 6rem); } /* Eyebrow / kicker */ .kicker { display: inline-flex; align-items: center; gap: .55rem; font-family: "Karla", sans-serif; font-weight: 700; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-deep); margin: 0 0 1.1rem; } .kicker::before { content:""; width: 26px; height: 2px; background: var(--accent); display:inline-block; } .lede { font-size: clamp(1.08rem, 1.6vw, 1.28rem); color: var(--ink-soft); max-width: 60ch; } /* ---------- Buttons ---------- */ .btn { --btn-bg: var(--accent); display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: "Karla", sans-serif; font-weight: 700; font-size: .98rem; /* line-height must leave room for a wrapped label: long CTAs ("Discuss delivering in a hard place") wrap on narrow phones, and at line-height:1 the two lines collide and become unreadable. */ line-height: 1.25; letter-spacing: .005em; text-align: center; padding: .95rem 1.5rem; border-radius: 999px; border: 1.5px solid transparent; cursor: pointer; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease; will-change: transform; } .btn svg { width: 1.05em; height: 1.05em; } .btn-primary { background: var(--btn-bg); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--accent-deep); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent-deep); transform: translateY(-2px); background: var(--paper); } .btn-dark { background: var(--ink); color: var(--cream); } .btn-dark:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: #120d0a; } .btn-lg { padding: 1.1rem 1.9rem; font-size: 1.05rem; } .btn-row { display: flex; flex-wrap: wrap; gap: .8rem; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--cream) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line-soft); } .site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; height: 72px; } .brand { display: flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--ink); } .brand .brand-name { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.4rem; letter-spacing: -.01em; line-height: 1; position: relative; padding-left: .85rem; } .brand .brand-name::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 8px; height: 8px; border-radius: 50%; background: var(--accent); } .brand:hover .brand-name { color: var(--accent-deep); } .nav { display: flex; align-items: center; gap: .35rem; } .nav a { font-weight: 600; font-size: .95rem; color: var(--ink-soft); text-decoration: none; padding: .5rem .8rem; border-radius: 999px; transition: color .15s, background .15s; } .nav a:hover { color: var(--accent-deep); background: var(--sand); } .nav a.active { color: var(--accent-deep); } .nav a.active::after { content:""; display:block; height:2px; background: var(--accent); border-radius: 2px; margin: 3px .8rem 0; } .header-cta { display: flex; align-items: center; gap: 1rem; } .header-phone { font-weight: 700; color: var(--ink); text-decoration: none; font-size: .95rem; white-space: nowrap; } .header-phone:hover { color: var(--accent-deep); } .nav-toggle { display:none; background:none; border:1.5px solid var(--line); border-radius: 10px; width: 44px; height: 42px; cursor:pointer; align-items:center; justify-content:center; } .nav-toggle svg { width: 22px; height: 22px; stroke: var(--ink); } /* The full nav + email + phone needs ~1120px before it starts colliding with the brand and clipping labels, so the menu takes over below that - this covers landscape tablets and small laptops, not just phones. */ @media (max-width: 1120px) { .nav, .header-cta .header-phone, .header-cta .btn { display: none; } .nav-toggle { display: inline-flex; } .nav.open { display: flex; flex-direction: column; align-items: stretch; gap: .2rem; position: absolute; top: 72px; left: 0; right: 0; background: var(--cream); border-bottom: 1px solid var(--line); padding: .8rem var(--gutter) 1.2rem; box-shadow: var(--shadow-md); } .nav.open a { padding: .8rem .4rem; font-size: 1.05rem; } .nav.open a.active::after { display:none; } .nav.open .mobile-only { display: inline-flex !important; } } .mobile-only { display: none; } /* The bar carries the phone number only. Both the six-item nav and a full email address never fit together inside --maxw, so the email was being ellipsed mid-address on laptops; it now lives in the menu and the footer. */ .nav { min-width: 0; } @media (max-width: 1220px) { .nav a { padding-inline: .6rem; } } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding-block: clamp(3.5rem, 8vw, 7rem); } .hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; } .hero h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); font-weight: 500; } .hero h1 em { font-style: italic; color: var(--accent-deep); } .hero .lede { margin-top: 1.2rem; font-size: clamp(1.1rem, 1.8vw, 1.35rem); } .hero .btn-row { margin-top: 2rem; } .hero-figure { position: relative; border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(155deg, var(--accent) 0%, var(--accent-deep) 100%); /* Height follows the copy inside. A fixed aspect-ratio here clipped the stat text on phones and narrow tablets, where the panel is far shorter than the two stat blocks it holds. */ min-height: min(56vh, 400px); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.4rem, 4vw, 2rem); color: #fff; } .hero-figure::before { content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 20px 20px, rgba(255,255,255,.10) 2px, transparent 0); background-size: 34px 34px; opacity:.6; } .hero-figure .stat { position: relative; z-index:1; } .hero-figure .stat + .stat { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.22); } .hero-figure .stat b { font-family: "Fraunces", serif; font-size: clamp(1.5rem, 4.4vw, 2rem); font-weight: 600; display:block; } .hero-figure .stat span { font-size: .92rem; opacity: .9; } @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } .hero-figure { order: -1; min-height: 0; } } /* ---------- Section headings ---------- */ .section-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3rem); } .section-head.center { margin-inline: auto; text-align: center; } .section-head.center .kicker { justify-content: center; } .section-head h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); } /* ---------- Doors (home four-way sort) ---------- */ .doors { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; } .door { position: relative; display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.9rem 1.8rem 1.6rem; text-decoration: none; color: var(--ink); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .door::before { content:""; position:absolute; inset: 0 auto 0 0; width: 5px; background: var(--door-accent, var(--accent)); } .door:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; } .door-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .door-icon { width: 52px; height: 52px; border-radius: 14px; flex: none; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--door-accent, var(--accent)) 12%, var(--paper)); color: var(--door-accent, var(--accent)); border: 1px solid color-mix(in srgb, var(--door-accent, var(--accent)) 25%, var(--line)); } .door-icon svg { width: 27px; height: 27px; } .door .door-index { font-family:"Fraunces",serif; font-size: .95rem; color: var(--door-accent, var(--accent)); font-weight: 600; } .door h3 { font-size: 1.55rem; margin: .5rem 0 .5rem; } .door p { color: var(--muted); margin: 0; } .door .door-go { margin-top: 1.2rem; font-weight: 700; color: var(--door-accent, var(--accent)); display:inline-flex; align-items:center; gap:.4rem; } .door:hover .door-go svg { transform: translateX(4px); } .door .door-go svg { width: 1em; height: 1em; transition: transform .18s ease; } .door[data-d="consulting"] { --door-accent: var(--consulting); } .door[data-d="research"] { --door-accent: var(--research); } .door[data-d="media"] { --door-accent: var(--media); } .door[data-d="foundation"] { --door-accent: var(--foundation); } @media (max-width: 680px) { .doors { grid-template-columns: 1fr; } } /* ---------- Why band / proof points ---------- */ .band { background: var(--ink); color: var(--sand); } .band h2, .band h3 { color: #fff; } .band .kicker { color: color-mix(in srgb, var(--accent) 70%, #fff); } .band .kicker::before { background: var(--accent); } .proof { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem; } .proof .pt { padding: 1.6rem; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); background: rgba(255,255,255,.03); } .proof .pt h3 { font-size: 1.2rem; margin-bottom: .5rem; } .proof .pt p { color: rgba(243,233,218,.78); margin: 0; font-size: .98rem; } .proof .pt .num { font-family:"Fraunces",serif; color: color-mix(in srgb, var(--accent) 65%, #fff); font-size: 1.1rem; } @media (max-width: 760px) { .proof { grid-template-columns: 1fr; } } /* ---------- Product cards (division pages) ---------- */ .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } @media (max-width: 820px) { .cards { grid-template-columns: 1fr; } } .card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.8rem; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; } .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .card-icon { width: 46px; height: 46px; border-radius: 12px; margin-bottom: 1rem; display: flex; align-items: center; justify-content: center; background: var(--accent-tint); color: var(--accent-deep); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); } .card-icon svg { width: 24px; height: 24px; } .card h3 { font-size: 1.35rem; margin-bottom: .25rem; } .card .promise { font-weight: 700; color: var(--accent-deep); margin: 0 0 1rem; font-size: 1rem; } .card .field { margin: .85rem 0 0; } .card .field .lbl { display:block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--muted-2); margin-bottom: .25rem; } .card .field p { margin: 0; color: var(--ink-soft); font-size: .96rem; } .card .card-foot { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px dashed var(--line); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .card .price-note { font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; } /* Inline "go" link - used inside .card foots and .svc service lines alike, so it is deliberately unscoped: the icon must stay 1em wherever it appears. */ .card-cta { font-weight: 700; font-size: .96rem; color: var(--accent-deep); text-decoration: none; display:inline-flex; gap:.4rem; align-items:center; white-space: nowrap; } .card-cta svg { width:1em; height:1em; flex:none; transition: transform .18s ease; } .card:hover .card-cta svg, .svc:hover .card-cta svg, .card-cta:hover svg { transform: translateX(3px); } /* ---------- Forms ---------- */ .form-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3vw, 2.4rem); box-shadow: var(--shadow-md); } /* Sized by the space the form actually has, not by the viewport: this grid sits inside a half-width column on tablets, where a viewport-based breakpoint left the two fields too narrow to read their own labels. */ .field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1rem 1.1rem; } .form-field { display: flex; flex-direction: column; } .form-field.full { grid-column: 1 / -1; } .form-field label { font-weight: 700; font-size: .85rem; margin-bottom: .4rem; color: var(--ink-soft); } .form-field label .opt { color: var(--muted-2); font-weight: 500; } .form-field input, .form-field select, .form-field textarea { font-family: "Karla", sans-serif; font-size: 1rem; color: var(--ink); background: var(--cream); border: 1.5px solid var(--line); border-radius: 11px; padding: .8rem .95rem; transition: border-color .15s, box-shadow .15s, background .15s; width: 100%; } .form-field textarea { min-height: 130px; resize: vertical; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); background: var(--paper); } .hp { position: absolute; left: -5000px; height: 0; overflow: hidden; } .form-actions { margin-top: 1.4rem; } .form-note { font-size: .88rem; color: var(--muted); margin-top: .9rem; } /* Inline email-capture (lead magnet) */ .capture { display: flex; gap: .7rem; flex-wrap: wrap; align-items: stretch; max-width: 520px; } .capture input[type="email"] { flex: 1 1 240px; font-size: 1rem; font-family:"Karla",sans-serif; border: 1.5px solid var(--line); border-radius: 999px; padding: .95rem 1.3rem; background: var(--paper); } .capture input[type="email"]:focus { outline:none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); } /* ---------- Lead-magnet strip ---------- */ .magnet { background: var(--sand); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .magnet-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem; align-items: center; } @media (max-width: 800px) { .magnet-grid { grid-template-columns: 1fr; } } /* ---------- Ladder / contact strip on division pages ---------- */ .talk-now { margin-top: 1.6rem; padding: 1.2rem 1.4rem; border-radius: var(--radius); background: var(--accent-tint); border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line)); display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; } .talk-now strong { font-family:"Fraunces",serif; font-weight:600; } .talk-now a { font-weight: 700; text-decoration: none; color: var(--accent-deep); } .talk-now a:hover { text-decoration: underline; } /* ---------- Trust band ---------- */ .trust { background: var(--sand); } .trust-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items:center; } @media (max-width: 800px){ .trust-grid{ grid-template-columns:1fr; } } .placeholder { border: 2px dashed color-mix(in srgb, var(--accent) 40%, var(--line)); background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(180,71,31,.04) 10px, rgba(180,71,31,.04) 20px); border-radius: var(--radius); padding: 1.6rem; color: var(--muted); font-size: .9rem; text-align:center; } .placeholder b { color: var(--accent-deep); font-family:"Karla",sans-serif; letter-spacing:.04em; } .note { border: 1px solid var(--line); border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 5%, transparent); border-radius: var(--radius); padding: 1.1rem 1.3rem; color: var(--muted); font-size: .9rem; line-height: 1.55; } .note b { color: var(--accent-deep); font-family:"Karla",sans-serif; letter-spacing:.04em; } .testimonial { margin: 0; background: var(--paper, #fff); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 1.8rem; box-shadow: var(--shadow-lg); } .testimonial blockquote { margin: 0; font-family:"Fraunces",serif; font-size: 1.2rem; line-height: 1.5; color: var(--ink); } .testimonial figcaption { display:flex; align-items:center; gap: 1rem; flex-wrap: wrap; margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); } .testimonial .client-logo { height: 46px; width: auto; display:block; } .testimonial .cite-name { font-weight: 700; font-size: .95rem; color: var(--ink-soft, var(--muted)); } /* ---------- Split intro (division top) ---------- */ .page-hero { padding-block: clamp(2.6rem, 6vw, 4.5rem) clamp(1.5rem,3vw,2.5rem); } .page-hero .hero-grid { align-items: center; } .page-hero h1 { font-size: clamp(2.2rem, 5vw, 3.8rem); } .serves { display:inline-flex; align-items:center; gap:.6rem; margin-top: 1rem; background: var(--accent-tint); color: var(--accent-deep); font-weight:700; font-size:.9rem; padding: .5rem 1rem; border-radius: 999px; } /* ---------- Footer ---------- */ .site-footer { background: var(--ink); color: var(--sand); padding-block: clamp(3rem,5vw,4rem) 2rem; } .site-footer a { color: var(--sand); text-decoration: none; } .site-footer a:hover { color: #fff; text-decoration: underline; } .footer-grid { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.15fr; gap: 2.5rem; } @media (max-width: 980px){ .footer-grid{ grid-template-columns: 1fr 1fr; gap:2.2rem; } } @media (max-width: 760px){ .footer-grid{ grid-template-columns:1fr; gap:2rem; } } .footer-brand .brand-name { font-family:"Fraunces",serif; font-size:1.5rem; color:#fff; } .footer-brand p { color: rgba(243,233,218,.72); max-width: 34ch; margin-top:.7rem; } .footer-tag { color: color-mix(in srgb, var(--accent) 68%, #fff); font-family:"Fraunces",serif; font-style:italic; margin-top:1rem; } .footer-col h4 { color:#fff; font-family:"Karla",sans-serif; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; font-weight:700; margin-bottom:1rem; } .footer-col ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.6rem; } .footer-contact a { display:flex; gap:.6rem; align-items:center; } .footer-contact svg { width:1.05em; height:1.05em; opacity:.75; flex:none; } .footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top:1px solid rgba(255,255,255,.14); display:flex; flex-wrap:wrap; gap:.8rem 1.5rem; justify-content:space-between; color: rgba(243,233,218,.6); font-size:.85rem; } /* ---------- Reveal on scroll ---------- */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .btn:hover, .card:hover, .door:hover, .svc:hover { transform: none; } } /* ---------- Success page ---------- */ .success { min-height: 66vh; display:flex; align-items:center; } .success-card { max-width: 620px; margin-inline:auto; text-align:center; } .success .mark { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 1.5rem; background: var(--accent-tint); color: var(--accent-deep); display:flex; align-items:center; justify-content:center; } .success .mark svg { width: 36px; height: 36px; } .success h1 { font-size: clamp(2rem, 4vw, 3rem); } /* utilities */ .mt-0{margin-top:0}.mb-0{margin-bottom:0} .center{text-align:center} /* ---------- Screen-size tiers ---------- Four tiers matter for this site: small phones (under ~6in, 320-390px), large phones (390-430px), tablets, and laptops. The display headings' clamp() floors were tuned for laptops, so on the two phone tiers long single words ("organisations") crowded or clipped against the frame. */ @media (max-width: 480px) { .hero h1 { font-size: clamp(2rem, 9vw, 2.5rem); } .page-hero h1 { font-size: clamp(1.9rem, 8.5vw, 2.2rem); } .section-head h2{ font-size: clamp(1.6rem, 7.5vw, 1.9rem); } .success h1 { font-size: clamp(1.8rem, 8vw, 2rem); } :root { --gutter: 1.15rem; } } /* Small phones (under 6in). Trim the frame further so nothing touches an edge and long CTA labels stay on one or two clean lines. */ @media (max-width: 400px) { :root { --gutter: 1rem; } body { font-size: 16.5px; } .hero h1 { font-size: clamp(1.85rem, 9.5vw, 2.1rem); } .page-hero h1 { font-size: clamp(1.75rem, 9vw, 2rem); } .section-head h2{ font-size: clamp(1.5rem, 8vw, 1.75rem); } .btn { font-size: .94rem; padding: .85rem 1.15rem; } .btn-lg { font-size: .98rem; padding: 1rem 1.3rem; } .card, .svc { padding: 1.4rem 1.15rem; } .hero-figure .stat b { font-size: 1.45rem; } .testimonial { padding: 1.3rem; } .testimonial blockquote { font-size: 1.08rem; } .talk-now { padding: 1rem 1.1rem; } } /* ---------- Visual layer: media panels, showcase, placeholders ---------- */ /* Division header visual panel (right column of the division page hero) */ .hero-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; /* min-height, not aspect-ratio: this panel carries a tag and a note, and a fixed ratio cropped them on narrow screens. */ min-height: clamp(240px, 34vw, 340px); background: linear-gradient(150deg, color-mix(in srgb, var(--accent) 88%, #000 4%) 0%, var(--accent-deep) 100%); color: #fff; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; justify-content: space-between; padding: 1.6rem; } .hero-media::before { content:""; position:absolute; inset:0; background-image: radial-gradient(circle at 18px 18px, rgba(255,255,255,.12) 2px, transparent 0); background-size: 30px 30px; opacity:.5; } .hero-media .hm-motif { position: relative; z-index:1; align-self: flex-end; opacity: .92; } .hero-media .hm-motif svg { width: 76px; height: 76px; stroke: rgba(255,255,255,.9); } .hero-media .hm-tag { position: relative; z-index:1; align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; background: rgba(0,0,0,.28); color:#fff; padding: .4rem .7rem; border-radius: 999px; border: 1px dashed rgba(255,255,255,.5); } .hero-media .hm-note { position: relative; z-index:1; font-family:"Fraunces",serif; font-size: 1.15rem; line-height: 1.3; max-width: 26ch; } /* Division header photo (replaces the placeholder panel once a real image is set) */ .hero-photo { width: 100%; aspect-ratio: 5 / 4; min-height: 240px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: block; } /* Showcase / video strip */ .showcase .embed { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; background: var(--ink); box-shadow: var(--shadow-lg); } .showcase .embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; } /* Placeholder shown until a real embed URL is dropped in */ .video-ph { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: .9rem; text-align:center; color: rgba(255,255,255,.9); padding: 1.5rem; background: radial-gradient(120% 120% at 50% 0%, rgba(180,71,31,.35), transparent 60%), var(--ink); } .video-ph .play { width: 68px; height: 68px; border-radius: 50%; display:flex; align-items:center; justify-content:center; background: var(--accent); color:#fff; box-shadow: 0 10px 30px rgba(0,0,0,.35); } .video-ph .play svg { width: 26px; height: 26px; margin-left: 3px; } .video-ph b { font-family:"Fraunces",serif; font-weight:600; font-size:1.15rem; color:#fff; letter-spacing:.02em; } .video-ph span { font-size:.9rem; color: rgba(255,255,255,.7); max-width: 42ch; } .showcase-grid { display:grid; grid-template-columns: .85fr 1.15fr; gap: 2.5rem; align-items:center; } @media (max-width: 800px){ .showcase-grid{ grid-template-columns:1fr; } } /* Two-up podcast grid (home "See our work") */ .pod-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; margin-top: 2.6rem; } @media (max-width: 800px){ .pod-grid{ grid-template-columns:1fr; } } .pod { display:flex; flex-direction:column; gap: 1.2rem; } .pod-body h3 { font-family:"Fraunces",serif; font-weight:600; font-size:1.4rem; line-height:1.2; margin:0 0 .6rem; } .pod-body p { margin:0 0 1.2rem; } /* ---------- Media: Watch our shows (assorted showreel) ---------- */ .shows { padding-block: clamp(2.5rem, 5vw, 4rem); } .section-intro { margin-top: 1rem; color: var(--ink-soft); font-size: clamp(1.02rem, 1.4vw, 1.15rem); max-width: 62ch; } .btn-sm { padding: .55rem 1rem; font-size: .92rem; } .show-intros { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-bottom: 2rem; } @media (max-width: 720px) { .show-intros { grid-template-columns: 1fr; } } .show-intro { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: .55rem; } .show-intro h3 { font-family: "Fraunces", serif; font-weight: 600; font-size: 1.35rem; margin: 0; } .show-intro p { margin: 0 0 .4rem; color: var(--ink-soft); } .show-intro .btn { align-self: flex-start; margin-top: auto; } .video-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.15rem; } @media (max-width: 1000px) { .video-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .video-grid { grid-template-columns: 1fr; } } .reel-loading { grid-column: 1 / -1; color: var(--muted); padding: 2rem 0; text-align: center; } .video-card { margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; } .video-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .video-facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; cursor: pointer; background: var(--ink); overflow: hidden; } .video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease, opacity .2s ease; } .video-facade:hover img { transform: scale(1.05); opacity: .85; } .video-play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent); color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.35); transition: transform .18s ease, background .18s ease; } .video-facade:hover .video-play { transform: scale(1.08); background: var(--accent-deep); } .video-play svg { width: 26px; height: 26px; margin-left: 3px; } .video-show { position: absolute; top: .6rem; left: .6rem; padding: .28rem .6rem; background: rgba(20,13,10,.78); color: #fff; font-size: .72rem; font-weight: 600; letter-spacing: .02em; border-radius: 999px; backdrop-filter: blur(4px); } .video-frame { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; } .video-card figcaption { padding: .75rem .9rem .9rem; font-size: .92rem; line-height: 1.35; color: var(--ink); font-weight: 500; overflow-wrap: break-word; } .reel-note { margin-top: 1.6rem; color: var(--muted); font-size: .98rem; } /* ---------- Media: Casa Media Podcasts (top trending per show) ---------- */ .podcasts-sub { margin-top: clamp(2.75rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); } .podcast-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; } @media (max-width: 720px) { .podcast-grid { grid-template-columns: 1fr; } } .podcast-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; } .podcast-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .podcast-card-media { border: 0; border-radius: 0; box-shadow: none; } .podcast-card-media:hover { transform: none; box-shadow: none; } .podcast-card-body { padding: 1.15rem 1.3rem 1.35rem; display: flex; flex-direction: column; gap: .5rem; } .podcast-tag { align-self: flex-start; padding: .28rem .6rem; border-radius: 999px; background: var(--accent); color: #fff; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .podcast-name { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; font-weight: 600; letter-spacing: .01em; } .podcast-title { margin: 0; font-family: "Fraunces", serif; font-weight: 600; font-size: 1.3rem; line-height: 1.25; color: var(--ink); } .podcast-card-body .btn { align-self: flex-start; margin-top: .5rem; } /* ========================================================================== Service lines - the expanded division offer (Consulting / Research) Numbered blocks that read as one system; one may be promoted with .svc-feature when it is the page's differentiator. ========================================================================== */ .svc-lines { display: grid; gap: 1.15rem; } .svc { display: grid; grid-template-columns: auto 1fr; gap: 0 1.5rem; align-items: start; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.75rem 1.9rem; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .svc:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); } .svc-num { flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: "Fraunces", serif; font-weight: 600; font-size: 1rem; line-height: 1; background: var(--accent-tint); color: var(--accent-deep); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); } .svc h3 { font-size: 1.42rem; margin: .2rem 0 .35rem; } .svc .promise { font-weight: 700; color: var(--accent-deep); margin: 0 0 1.05rem; font-size: 1rem; } .svc-lead { color: var(--ink-soft); font-size: 1.04rem; margin: 0 0 1.2rem; max-width: 64ch; } .svc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .62rem; } .svc-list li { position: relative; padding-left: 1.5rem; color: var(--ink-soft); font-size: .98rem; } .svc-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: .5rem; height: .5rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 55%, transparent); } .svc-foot { margin-top: 1.5rem; } @media (max-width: 620px) { .svc { grid-template-columns: 1fr; gap: 1rem; padding: 1.5rem 1.35rem; } } /* Promoted service line - visual weight for the page's differentiator */ .svc-feature { border-width: 1.5px; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--paper)), var(--paper) 55%); box-shadow: var(--shadow-md); padding: clamp(1.8rem, 3vw, 2.5rem); } .svc-feature .svc-num { background: var(--accent); color: #fff; border-color: transparent; } .svc-feature h3 { font-size: clamp(1.55rem, 2.6vw, 2rem); } .svc-tag { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .8rem; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; padding: .32rem .72rem; border-radius: 999px; } /* Generic sub-block divider inside a section */ .section-sub { margin-top: clamp(2.75rem, 5vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); } /* ---------- Differentiators (dark band, e.g. why our evaluations differ) ---------- */ .diffs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 2.2rem; } @media (max-width: 760px) { .diffs { grid-template-columns: 1fr; } } .diff { padding: 1.7rem 1.8rem; border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); background: rgba(255,255,255,.04); } .diff .diff-num { display: block; font-family: "Fraunces", serif; font-size: .95rem; letter-spacing: .04em; color: color-mix(in srgb, var(--accent) 62%, #fff); margin-bottom: .5rem; } .diff h3 { font-size: 1.3rem; margin-bottom: .6rem; } .diff p { color: rgba(243,233,218,.8); margin: 0; font-size: .99rem; } /* ---------- Closing band - take one piece, or the whole project ---------- */ .close-band { text-align: center; } .close-band h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); } .close-band p { max-width: 64ch; margin-inline: auto; color: rgba(243,233,218,.82); font-size: 1.08rem; } .close-band .btn-row { justify-content: center; margin-top: 1.8rem; } /* ---------- How we work - the associate model ---------- */ .assoc { background: var(--sand); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .assoc-grid { display: grid; grid-template-columns: 1fr 1.35fr; gap: 1.5rem 3rem; align-items: center; } @media (max-width: 820px) { .assoc-grid { grid-template-columns: 1fr; } } .assoc-grid h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin: 0; } .assoc-grid p { margin: 0; color: var(--ink-soft); font-size: clamp(1.02rem, 1.4vw, 1.14rem); } /* ========================================================================== LIGHT LAYER - the Media-page method, applied to Consulting and Research -------------------------------------------------------------------------- The Media pages read light because they say one thing per block, give every idea a mark you can see, and keep the detail one tap away instead of on the page. These components carry that method into the warm parent brand: .glance quick pills - the whole offer in six words .arc an interactive four-step diagram, one panel at a time .tiles a pictograph per idea, headline, promise, detail on demand .pills filter the catalogue instead of scrolling all of it .minis compact catalogue cards, body copy behind a disclosure .gauges a two-dimension score you can watch move Everything degrades open: with no JavaScript, every panel and card is visible and every disclosure still works, because they are

. ========================================================================== */ /* Filtered-out cards are hidden with the hidden attribute; the component classes below set display, so they need it to win. */ [hidden] { display: none !important; } /* ---------- Quick pills: the offer at a glance ---------- */ .glance { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; padding: 0; list-style: none; } .glance li { display: inline-flex; align-items: center; gap: .45rem; background: var(--paper); border: 1px solid var(--line); border-radius: 999px; padding: .5rem .95rem; font-size: .88rem; font-weight: 600; color: var(--ink-soft); } .glance svg { width: 1.05em; height: 1.05em; color: var(--accent); flex: none; } /* ---------- Disclosure: detail on demand ---------- */ .disclose { margin-top: 1.15rem; border-top: 1px dashed var(--line); } .disclose > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 0 .1rem; font-weight: 700; font-size: .9rem; color: var(--accent-deep); } .disclose > summary::-webkit-details-marker { display: none; } .disclose > summary::after { content: ""; width: .46rem; height: .46rem; flex: none; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s ease; } .disclose[open] > summary::after { transform: rotate(-135deg) translateY(-2px); } .disclose > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .disclose > summary:hover { color: var(--accent); } .disclose-body { padding-bottom: .3rem; } /* ---------- The arc: an interactive four-step diagram ---------- */ .arc { display: grid; gap: clamp(1.4rem, 3vw, 2rem); } .arc-rail { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; position: relative; } .arc-rail::before { content: ""; position: absolute; top: 27px; left: 12%; right: 12%; height: 2px; background: var(--line); z-index: 0; } .arc-step { position: relative; z-index: 1; background: none; border: 0; padding: .1rem .2rem 0; font-family: "Karla", sans-serif; cursor: pointer; text-align: center; color: inherit; } .arc-dot { width: 54px; height: 54px; border-radius: 50%; margin: 0 auto .65rem; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--line); color: var(--muted-2); transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; } .arc-dot svg { width: 24px; height: 24px; } .arc-step b { display: block; font-family: "Fraunces", serif; font-weight: 600; font-size: 1.04rem; color: var(--ink-soft); line-height: 1.15; } .arc-step small { display: block; margin-top: .2rem; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); } .arc-step:hover .arc-dot { border-color: var(--accent); color: var(--accent-deep); } .arc-step[aria-selected="true"] .arc-dot { background: var(--accent); border-color: var(--accent); color: #fff; transform: scale(1.06); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--accent) 70%, transparent); } .arc-step[aria-selected="true"] b { color: var(--ink); } .arc-step[aria-selected="true"] small { color: var(--accent-deep); } .arc-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 12px; } .arc-panels { display: grid; gap: .8rem; } .arc-panel { background: var(--paper); border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 1.4rem 1.5rem; box-shadow: var(--shadow-sm); } .arc-panel h3 { font-size: 1.28rem; margin: 0 0 .45rem; } .arc-panel p { margin: 0; color: var(--ink-soft); max-width: 68ch; } .arc-panel .arc-mark { font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-deep); display: block; margin-bottom: .5rem; } /* Only once the switcher is live does the page show one panel at a time. */ [data-arc-ready] .arc-panel { display: none; } [data-arc-ready] .arc-panel.is-active { display: block; } .hint { font-size: .86rem; color: var(--muted); display: none; align-items: center; gap: .45rem; margin: 0; } .hint svg { width: 1.05em; height: 1.05em; flex: none; } [data-arc-ready] .hint, [data-filters-ready] .hint, [data-scen-ready] .hint { display: inline-flex; } @media (max-width: 620px) { .arc-rail { grid-template-columns: repeat(2, 1fr); row-gap: 1.3rem; } .arc-rail::before { display: none; } .arc-dot { width: 46px; height: 46px; } .arc-dot svg { width: 21px; height: 21px; } .arc-step b { font-size: .98rem; } } /* ---------- Pictograph tiles: one mark, one line, detail on demand ---------- */ .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17.5rem, 100%), 1fr)); gap: 1.05rem; } .tile { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.55rem 1.45rem 1.35rem; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 32%, var(--line)); } .tile-ico { width: 54px; height: 54px; border-radius: 15px; flex: none; margin-bottom: 1.1rem; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-deep); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line)); } .tile-ico svg { width: 27px; height: 27px; } .tile h3 { font-size: 1.22rem; margin: 0 0 .4rem; } .tile .promise { margin: 0; font-weight: 700; font-size: .96rem; color: var(--accent-deep); } .tile .tile-note { margin: .7rem 0 0; color: var(--muted); font-size: .94rem; } .tile .disclose { margin-top: auto; } .tile .svc-list { margin-top: .3rem; } .tile .svc-list li { font-size: .94rem; } /* The page's differentiator: same tile, more room and a warmer ground. */ .tile-lead { grid-column: 1 / -1; border-width: 1.5px; border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 8%, var(--paper)), var(--paper) 60%); box-shadow: var(--shadow-md); padding: clamp(1.6rem, 3vw, 2.2rem); } .tile-lead .tile-ico { background: var(--accent); color: #fff; border-color: transparent; width: 60px; height: 60px; } .tile-lead .tile-ico svg { width: 30px; height: 30px; } .tile-lead h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); } .tile-lead .promise { font-size: 1.04rem; } .tile-lead .tile-note { max-width: 62ch; } .tile-lead .disclose { margin-top: 1.2rem; } @media (min-width: 900px) { .tile-lead { display: grid; grid-template-columns: auto 1fr; gap: 0 1.6rem; align-items: start; } .tile-lead .tile-ico { margin-bottom: 0; } .tile-lead > .tile-lead-body { min-width: 0; } } /* ---------- Catalogue filters ---------- */ .pills { display: none; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1.4rem; } [data-filters-ready] .pills, [data-scen-ready] .pills { display: flex; } .pill { font-family: "Karla", sans-serif; font-weight: 700; font-size: .88rem; line-height: 1.2; background: var(--paper); color: var(--ink-soft); border: 1.5px solid var(--line); border-radius: 999px; padding: .58rem 1rem; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; } .pill:hover { border-color: var(--accent); color: var(--accent-deep); } .pill[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; } .pill:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---------- Compact catalogue cards ---------- */ .minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr)); gap: 1rem; } .mini { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem 1.4rem 1.25rem; box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .mini:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); } .mini-top { display: flex; gap: .9rem; align-items: flex-start; } .mini-ico { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent-deep); border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line)); } .mini-ico svg { width: 22px; height: 22px; } .mini-head { min-width: 0; } .mini h3 { font-size: 1.08rem; line-height: 1.22; margin: 0 0 .25rem; } .mini .promise { margin: 0; font-weight: 700; font-size: .92rem; color: var(--accent-deep); } .mini .mini-for { margin: .9rem 0 0; font-size: .86rem; color: var(--muted); display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; } .mini .mini-for b { font-size: .7rem; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); } .mini .disclose { margin-top: auto; } .mini .field { margin-top: .8rem; } .mini .field .lbl { display: block; font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--muted-2); margin-bottom: .2rem; } .mini .field p { margin: 0; font-size: .93rem; color: var(--ink-soft); } .mini-foot { margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; } .mini .price-note { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); } /* A mini whose disclosure sits above the footer must not have the footer pushed to the bottom as well, or the two margins fight; the disclosure wins. */ .mini .disclose + .mini-foot { margin-top: 1rem; } .no-match { grid-column: 1 / -1; color: var(--muted); padding: 1.5rem 0; margin: 0; } /* ---------- Two-dimension gauges (Research) ---------- */ .scored { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); box-shadow: var(--shadow-md); } .gauges { display: grid; gap: 1.15rem; margin-top: 1.4rem; } .gauge b { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; font-family: "Karla", sans-serif; font-size: .76rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: .45rem; } .gauge b span { letter-spacing: 0; text-transform: none; font-size: .95rem; color: var(--ink); } .gauge-track { height: 12px; border-radius: 999px; background: var(--sand-2); overflow: hidden; } .gauge-fill { display: block; height: 100%; border-radius: 999px; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-deep)); transition: width .75s cubic-bezier(.2,.7,.2,1); } .gauge-fill[data-dim="confidence"] { background: linear-gradient(90deg, var(--muted-2), var(--ink-soft)); } .verdict { margin: 1.5rem 0 0; padding: 1.05rem 1.2rem; border-radius: var(--radius); background: var(--accent-tint); border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line)); font-family: "Fraunces", serif; font-size: 1.08rem; line-height: 1.4; color: var(--ink); } @media (prefers-reduced-motion: reduce) { .gauge-fill { transition: none; } } /* A quiet raised ground, used to alternate surfaces down a long page the way the Media pages do. */ .soft { background: var(--sand); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } /* ========================================================================== INSTITUTIONAL LAYER -------------------------------------------------------------------------- The parent brand publishes. This layer gives the site the frame of a research institution rather than a services brochure: hairline rules instead of shadows, letterspaced metadata instead of body copy, oversized figures, and an index you read down rather than cards you scan across. It sits on top of the warm palette above; nothing here re-themes the existing pages, it only adds vocabulary they can opt into. ========================================================================== */ :root { --rule: #ded0b8; /* hairline - heavier than --line, reads as a printed rule */ --rule-soft: #eadfcb; --ink-deep: #17110d; /* the institutional dark ground */ --ink-mid: #2e241c; --meta: #8a7a67; /* metadata / citation grey */ } /* ---------- Editorial measure & rhythm ---------- */ .measure { max-width: 68ch; } .measure-s { max-width: 54ch; } /* A rule that carries a label - the spine of the whole layer. */ .rule-head { display: flex; align-items: baseline; gap: 1.2rem; border-top: 1.5px solid var(--ink); padding-top: .85rem; margin-bottom: clamp(1.8rem, 3.5vw, 2.8rem); } .rule-head .rh-label { font-family: "Karla", sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink); flex: none; } .rule-head .rh-note { font-size: .82rem; color: var(--meta); margin: 0 0 0 auto; letter-spacing: .04em; text-align: right; } @media (max-width: 560px) { .rule-head .rh-note { display: none; } } /* Dark variants, for use inside .stance / .band */ .on-dark .rule-head { border-top-color: rgba(243,233,218,.55); } .on-dark .rule-head .rh-label { color: #fff; } .on-dark .rule-head .rh-note { color: rgba(243,233,218,.6); } /* ---------- Position statement (home hero) ---------- */ .position { padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2rem, 4vw, 3rem); } .position-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: end; } @media (max-width: 900px) { .position-grid { grid-template-columns: 1fr; gap: 2.5rem; align-items: start; } } .position h1 { font-size: clamp(2.3rem, 5.6vw, 4.35rem); font-weight: 500; line-height: 1.04; letter-spacing: -.022em; margin: 0; } .position h1 em { font-style: italic; color: var(--accent-deep); } .position .standfirst { font-size: clamp(1.08rem, 1.55vw, 1.3rem); color: var(--ink-soft); line-height: 1.55; margin: 1.5rem 0 0; max-width: 56ch; } .position .btn-row { margin-top: 2.2rem; } /* The dateline block that sits opposite the headline. */ .dateline { border-top: 1.5px solid var(--ink); padding-top: 1rem; } .dateline dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .55rem 1.4rem; } .dateline dt { font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--meta); white-space: nowrap; } .dateline dd { margin: 0; font-size: .92rem; color: var(--ink); font-weight: 600; } /* ---------- Figures: proof at a glance ---------- */ .figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); border-top: 1.5px solid var(--ink); } .figure { padding: 1.5rem 1.4rem 1.4rem 0; border-right: 1px solid var(--rule); } .figure:last-child { border-right: 0; } @media (max-width: 720px) { .figure { border-right: 0; border-bottom: 1px solid var(--rule); padding-right: 0; } .figure:last-child { border-bottom: 0; } } .figure b { display: block; font-family: "Fraunces", serif; font-weight: 500; font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; } .figure b sup { font-size: .42em; vertical-align: super; color: var(--accent); letter-spacing: 0; } .figure span { display: block; margin-top: .6rem; font-size: .9rem; color: var(--ink-soft); line-height: 1.4; max-width: 26ch; } .figure small { display: block; margin-top: .45rem; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--meta); font-weight: 700; } .on-dark .figures { border-top-color: rgba(243,233,218,.55); } .on-dark .figure { border-right-color: rgba(243,233,218,.18); border-bottom-color: rgba(243,233,218,.18); } .on-dark .figure b { color: #fff; } .on-dark .figure span { color: rgba(243,233,218,.8); } .on-dark .figure small { color: color-mix(in srgb, var(--accent) 60%, #fff); } /* ---------- Lead story: the featured publication ---------- */ .lead-story { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(1.8rem, 4vw, 3.5rem); align-items: start; } @media (max-width: 880px) { .lead-story { grid-template-columns: 1fr; } } .ls-series { display: inline-flex; align-items: center; gap: .6rem; font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 1rem; } .ls-series::after { content: ""; width: 30px; height: 1.5px; background: var(--accent); } .lead-story h2, .lead-story h3 { font-size: clamp(1.85rem, 3.9vw, 3rem); line-height: 1.06; letter-spacing: -.02em; margin: 0 0 1rem; } .lead-story h2 a, .lead-story h3 a { color: inherit; text-decoration: none; } .lead-story h2 a:hover, .lead-story h3 a:hover { color: var(--accent-deep); } .ls-standfirst { font-size: clamp(1.02rem, 1.4vw, 1.14rem); color: var(--ink-soft); line-height: 1.6; max-width: 58ch; margin: 0 0 1.4rem; } .ls-byline { font-size: .88rem; color: var(--meta); margin: 0 0 1.6rem; padding-top: .9rem; border-top: 1px solid var(--rule); } .ls-byline b { color: var(--ink); font-weight: 700; } /* The finding pulled out of the report - the thing a partner remembers. */ .finding { background: var(--ink-deep); color: var(--sand); padding: clamp(1.5rem, 3vw, 2.1rem); border-radius: 2px; position: relative; overflow: hidden; } .finding::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, var(--accent) 0%, var(--accent) 53%, rgba(243,233,218,.2) 53%); } .finding .f-score { font-family: "Fraunces", serif; font-weight: 500; color: #fff; font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .finding .f-score i { font-style: normal; font-size: .38em; color: var(--meta); letter-spacing: .02em; } .finding .f-grade { display: inline-block; margin-top: .9rem; padding: .3rem .7rem; border-radius: 999px; background: color-mix(in srgb, var(--accent) 88%, #000); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .finding p { margin: 1.1rem 0 0; color: rgba(243,233,218,.82); font-size: .95rem; line-height: 1.55; } .finding .f-quote { font-family: "Fraunces", serif; font-size: 1.22rem; line-height: 1.35; color: #fff; margin: 1.2rem 0 0; padding-top: 1.2rem; border-top: 1px solid rgba(243,233,218,.22); } /* ---------- Publication index: rows, not cards ---------- */ .pubs { border-top: 1.5px solid var(--ink); } .pub { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: 0 clamp(1.2rem, 3vw, 2.5rem); align-items: start; padding: clamp(1.5rem, 3vw, 2.1rem) 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; transition: background .2s ease, padding .2s ease; } .pub:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); } @media (min-width: 861px) { .pub:hover { padding-inline: 1.2rem; } } .pub-meta { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--meta); line-height: 1.6; } .pub-meta b { display: block; color: var(--accent-deep); } .pub-body { min-width: 0; } .pub-body h3 { font-size: clamp(1.25rem, 2.1vw, 1.62rem); line-height: 1.18; margin: 0 0 .5rem; letter-spacing: -.012em; } .pub:hover .pub-body h3 { color: var(--accent-deep); } .pub-body p { margin: 0; color: var(--ink-soft); font-size: .97rem; line-height: 1.55; max-width: 62ch; } .pub-body .pub-tags { margin: .85rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem; } .pub-tags span { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--meta); border: 1px solid var(--rule); border-radius: 999px; padding: .22rem .6rem; } .pub-go { flex: none; align-self: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--rule); color: var(--accent-deep); transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease; } .pub-go svg { width: 1.1rem; height: 1.1rem; } .pub:hover .pub-go { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateX(3px); } @media (max-width: 860px) { .pub { grid-template-columns: 1fr auto; gap: .8rem 1rem; } .pub-meta { grid-column: 1 / -1; } .pub-go { align-self: start; margin-top: .2rem; } } /* ---------- Capability index: the practices, read down ---------- */ .cap-index { border-top: 1.5px solid var(--ink); } .cap { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) minmax(0, 1.05fr) auto; gap: 0 clamp(1.2rem, 3vw, 2.4rem); align-items: center; padding: clamp(1.6rem, 3vw, 2.3rem) 0; border-bottom: 1px solid var(--rule); text-decoration: none; color: inherit; position: relative; transition: padding .25s ease; } .cap::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: var(--cap-accent, var(--accent)); opacity: 0; transition: opacity .25s ease; z-index: -1; } .cap:hover { padding-inline: clamp(.6rem, 2vw, 1.4rem); } .cap:hover::before { opacity: .05; } .cap-num { font-family: "Fraunces", serif; font-size: 1rem; color: var(--cap-accent, var(--accent)); font-weight: 600; font-variant-numeric: tabular-nums; } .cap h3 { font-size: clamp(1.3rem, 2.3vw, 1.75rem); margin: 0; line-height: 1.15; letter-spacing: -.015em; } .cap:hover h3 { color: var(--cap-accent, var(--accent-deep)); } .cap .cap-what { margin: .35rem 0 0; font-size: .86rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: var(--meta); } .cap p { margin: 0; color: var(--ink-soft); font-size: .99rem; line-height: 1.55; } .cap .pub-go { border-color: var(--rule); color: var(--cap-accent, var(--accent-deep)); } .cap:hover .pub-go { background: var(--cap-accent, var(--accent)); border-color: var(--cap-accent, var(--accent)); color: #fff; } .cap[data-cap="consulting"] { --cap-accent: var(--consulting); } .cap[data-cap="research"] { --cap-accent: var(--research); } .cap[data-cap="media"] { --cap-accent: var(--media); } .cap[data-cap="foundation"] { --cap-accent: var(--foundation); } @media (max-width: 860px) { .cap { grid-template-columns: 2.4rem minmax(0, 1fr) auto; row-gap: .7rem; align-items: start; } .cap p { grid-column: 2 / -1; } .cap .pub-go { align-self: start; } } /* ---------- Stance: the dark statement band ---------- */ .stance { background: var(--ink-deep); color: var(--sand); } .stance h2, .stance h3 { color: #fff; } .stance .kicker { color: color-mix(in srgb, var(--accent) 72%, #fff); } .stance p { color: rgba(243,233,218,.82); } .stance-quote { font-family: "Fraunces", serif; font-weight: 400; font-style: italic; font-size: clamp(1.6rem, 3.6vw, 2.7rem); line-height: 1.22; letter-spacing: -.018em; color: #fff; margin: 0; max-width: 22ch; } .stance-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; } @media (max-width: 880px) { .stance-grid { grid-template-columns: 1fr; } } .stance-attrib { margin-top: 1.8rem; padding-top: 1.1rem; border-top: 1px solid rgba(243,233,218,.22); font-size: .88rem; color: rgba(243,233,218,.7); } .stance-attrib b { display: block; color: #fff; font-size: .98rem; margin-bottom: .15rem; } /* ---------- SSII: the Strategic Systems Integrity & Impact Framework ---------- */ /* Quads: a four-up block with an oversized marker. Used for the rules that constrain an SSII score, and anywhere else four things need equal billing. */ .quads { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1.5px solid var(--ink); } @media (max-width: 900px) { .quads { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .quads { grid-template-columns: 1fr; } } .quad { padding: 1.6rem 1.4rem 1.7rem 0; border-right: 1px solid var(--rule); position: relative; } .quad:last-child { border-right: 0; } @media (max-width: 900px) { .quad:nth-child(2n) { border-right: 0; } .quad { border-bottom: 1px solid var(--rule); padding-right: 1.2rem; } } @media (max-width: 520px) { .quad { border-right: 0; padding-right: 0; } } .quad .q-letter { font-family: "Fraunces", serif; font-size: 2.6rem; line-height: 1; font-weight: 500; color: var(--accent); display: block; margin-bottom: .7rem; letter-spacing: -.03em; } .quad h3 { font-size: 1.14rem; margin: 0 0 .45rem; } .quad p { margin: 0; font-size: .92rem; color: var(--ink-soft); line-height: 1.5; } .on-dark .quads { border-top-color: rgba(243,233,218,.55); } .on-dark .quad { border-right-color: rgba(243,233,218,.18); border-bottom-color: rgba(243,233,218,.18); } .on-dark .quad h3 { color: #fff; } .on-dark .quad p { color: rgba(243,233,218,.78); } .on-dark .quad .q-letter { color: color-mix(in srgb, var(--accent) 72%, #fff); } /* The two headline metrics. They are reported as a pair, so they share one bordered block rather than sitting in two detached cards. */ .dual { display: grid; grid-template-columns: 1fr 1fr; border-top: 1.5px solid var(--ink); } @media (max-width: 780px) { .dual { grid-template-columns: 1fr; } } .metric { padding: 1.7rem 1.8rem 1.8rem 0; border-right: 1px solid var(--rule); } .metric:last-child { border-right: 0; padding-right: 0; } @media (max-width: 780px) { .metric { border-right: 0; padding-right: 0; border-bottom: 1px solid var(--rule); } .metric:last-child { border-bottom: 0; } } .metric .m-code { display: block; font-family: "Karla", sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: .7rem; } .metric h3 { font-size: clamp(1.2rem, 2vw, 1.44rem); margin: 0 0 .55rem; letter-spacing: -.015em; } .metric .m-q { font-family: "Fraunces", serif; font-style: italic; font-size: 1.04rem; color: var(--ink); margin: 0 0 .8rem; } .metric p { margin: 0 0 .7rem; font-size: .92rem; color: var(--ink-soft); line-height: 1.6; } .metric p:last-child { margin-bottom: 0; } .m-formula { display: block; margin-top: 1.1rem; padding-top: .9rem; border-top: 1px dotted var(--rule); font-family: "Karla", sans-serif; font-size: .76rem; letter-spacing: .01em; color: var(--meta); line-height: 1.75; } .on-dark .dual { border-top-color: rgba(243,233,218,.55); } .on-dark .metric { border-right-color: rgba(243,233,218,.18); border-bottom-color: rgba(243,233,218,.18); } .on-dark .metric h3 { color: #fff; } .on-dark .metric .m-code { color: color-mix(in srgb, var(--accent) 68%, #fff); } .on-dark .metric .m-q { color: rgba(243,233,218,.92); } .on-dark .metric p { color: rgba(243,233,218,.78); } .on-dark .m-formula { color: rgba(243,233,218,.55); border-top-color: rgba(243,233,218,.18); } /* Five pillars, one row each. Not a five-across grid: the weights differ, and equal columns would imply the pillars are interchangeable. */ .pillars { border-top: 1.5px solid var(--ink); } .pillar { display: grid; grid-template-columns: 7.5rem minmax(0, 1.1fr) minmax(0, .8fr); gap: clamp(.9rem, 2.4vw, 2.4rem); align-items: start; padding: clamp(1.35rem, 2.4vw, 1.85rem) 0; border-bottom: 1px solid var(--rule); } @media (max-width: 940px) { .pillar { grid-template-columns: 1fr; gap: .85rem; } } .p-code { font-family: "Fraunces", serif; font-size: 1.55rem; font-weight: 600; letter-spacing: -.025em; line-height: 1; color: var(--accent); } .p-code i { display: block; font-style: normal; font-family: "Karla", sans-serif; font-size: .67rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--meta); margin-top: .55rem; } .pillar h3 { font-size: 1.08rem; margin: 0 0 .4rem; } .pillar p { margin: 0; font-size: .93rem; color: var(--ink-soft); line-height: 1.6; } .pillar .chip { margin-top: .8rem; } .p-dims { list-style: none; margin: 0; padding: 0; font-size: .81rem; color: var(--meta); line-height: 1.45; } .p-dims li { padding: .3rem 0; border-bottom: 1px dotted var(--rule); } .p-dims li:last-child { border-bottom: 0; } .on-dark .pillars { border-top-color: rgba(243,233,218,.55); } .on-dark .pillar { border-bottom-color: rgba(243,233,218,.18); } .on-dark .pillar h3 { color: #fff; } .on-dark .pillar p { color: rgba(243,233,218,.78); } .on-dark .p-code { color: color-mix(in srgb, var(--accent) 72%, #fff); } .on-dark .p-code i, .on-dark .p-dims { color: rgba(243,233,218,.55); } .on-dark .p-dims li { border-bottom-color: rgba(243,233,218,.14); } .on-dark .chip { border-color: rgba(243,233,218,.28); color: rgba(243,233,218,.7); } .on-dark .chip.is-flag { border-color: color-mix(in srgb, var(--accent) 65%, #fff); color: color-mix(in srgb, var(--accent) 55%, #fff); background: color-mix(in srgb, var(--accent) 22%, transparent); } /* Pillar weight vectors by evaluation context. */ .weights { margin-top: clamp(1.6rem, 3vw, 2.2rem); } .weights p { font-size: .88rem; color: var(--ink-soft); line-height: 1.65; margin: 0; max-width: 78ch; } .on-dark .weights p { color: rgba(243,233,218,.72); } /* ---------- Sectors (industries axis) ---------- */ .sectors { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr)); gap: 0; border-top: 1.5px solid var(--ink); } .sector { padding: clamp(1.5rem, 2.6vw, 2rem) clamp(1.2rem, 2.4vw, 2rem) clamp(1.6rem, 3vw, 2.2rem) 0; border-bottom: 1px solid var(--rule); border-right: 1px solid var(--rule); display: flex; flex-direction: column; } @media (max-width: 660px) { .sector { border-right: 0; padding-right: 0; } } .sector-ix { font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--meta); margin-bottom: .9rem; display: flex; align-items: center; gap: .55rem; } .sector-ix svg { width: 1.15rem; height: 1.15rem; color: var(--accent); flex: none; } .sector h3 { font-size: 1.32rem; margin: 0 0 .5rem; line-height: 1.18; } .sector p { margin: 0 0 1.1rem; font-size: .95rem; color: var(--ink-soft); line-height: 1.55; } .sector .sector-work { margin: 0 0 1.2rem; padding: 0; list-style: none; display: grid; gap: .4rem; font-size: .9rem; color: var(--ink-soft); } .sector .sector-work li { padding-left: 1.1rem; position: relative; } .sector .sector-work li::before { content: ""; position: absolute; left: 0; top: .58em; width: .34rem; height: .34rem; background: var(--accent); border-radius: 50%; } .sector .card-cta { margin-top: auto; } /* ---------- People ---------- */ .people { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); } .person { border-top: 1.5px solid var(--ink); padding-top: 1.3rem; } .person .p-name { font-family: "Fraunces", serif; font-size: 1.42rem; font-weight: 600; margin: 0 0 .2rem; letter-spacing: -.012em; } .person .p-role { font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 700; color: var(--accent-deep); margin: 0 0 1rem; } .person p { margin: 0 0 .9rem; font-size: .96rem; color: var(--ink-soft); line-height: 1.6; } .person .p-credits { margin: 0; padding: 0; list-style: none; display: grid; gap: .35rem; } .person .p-credits li { font-size: .88rem; color: var(--meta); padding-left: 1.1rem; position: relative; } .person .p-credits li::before { content: ""; position: absolute; left: 0; top: .62em; width: .3rem; height: .3rem; background: var(--accent); border-radius: 50%; } /* ---------- Standards / numbered commitments ---------- */ .standards { display: grid; gap: 0; border-top: 1.5px solid var(--ink); } .standard { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 0 clamp(1rem, 2.5vw, 2rem); padding: 1.5rem 0; border-bottom: 1px solid var(--rule); } .standard .st-num { font-family: "Fraunces", serif; color: var(--accent); font-weight: 600; font-size: 1rem; } .standard h3 { font-size: 1.18rem; margin: 0 0 .4rem; } .standard p { margin: 0; font-size: .96rem; color: var(--ink-soft); line-height: 1.58; max-width: 66ch; } @media (max-width: 560px) { .standard { grid-template-columns: 2.4rem minmax(0, 1fr); } } /* ---------- Subscribe strip ---------- */ .subscribe { background: var(--sand); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .subscribe-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(1.8rem, 4vw, 3.5rem); align-items: center; } @media (max-width: 820px) { .subscribe-grid { grid-template-columns: 1fr; } } /* ---------- Navigation: capabilities panel ---------- */ .nav-group { position: relative; } .nav-trigger { display: inline-flex; align-items: center; gap: .35rem; font-family: "Karla", sans-serif; font-weight: 600; font-size: .95rem; color: var(--ink-soft); background: none; border: 0; cursor: pointer; padding: .5rem .8rem; border-radius: 999px; transition: color .15s, background .15s; } .nav-trigger:hover, .nav-group.open .nav-trigger { color: var(--accent-deep); background: var(--sand); } .nav-trigger svg { width: .7rem; height: .7rem; transition: transform .2s ease; } .nav-group.open .nav-trigger svg { transform: rotate(180deg); } .nav-trigger.active { color: var(--accent-deep); } .nav-panel { position: absolute; top: calc(100% + .6rem); left: -1rem; z-index: 70; min-width: 33rem; background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--accent); border-radius: 2px; box-shadow: var(--shadow-lg); padding: 1.3rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: .3rem; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .nav-group.open .nav-panel { opacity: 1; visibility: visible; transform: none; } .nav-panel a { display: block; padding: .8rem .9rem; border-radius: 2px; text-decoration: none; background: none; transition: background .15s ease; } .nav-panel a:hover { background: var(--sand); } .nav-panel a b { display: block; font-family: "Fraunces", serif; font-size: 1.06rem; font-weight: 600; color: var(--ink); margin-bottom: .15rem; letter-spacing: -.01em; } .nav-panel a:hover b { color: var(--np-accent, var(--accent-deep)); } .nav-panel a span { display: block; font-size: .84rem; color: var(--muted); line-height: 1.45; } .nav-panel a[data-np="consulting"] { --np-accent: var(--consulting); } .nav-panel a[data-np="research"] { --np-accent: var(--research); } .nav-panel a[data-np="media"] { --np-accent: var(--media); } .nav-panel a[data-np="foundation"] { --np-accent: var(--foundation); } .nav-panel a.active { background: var(--sand); } .nav-panel a.active b { color: var(--np-accent, var(--accent-deep)); } /* In the mobile sheet the panel is simply always open and stacked. */ @media (max-width: 1120px) { .nav-group { width: 100%; } .nav-trigger { display: none; } .nav-panel { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; box-shadow: none; border: 0; border-left: 2px solid var(--accent); border-radius: 0; grid-template-columns: 1fr; padding: .2rem 0 .6rem .9rem; margin: .3rem 0 .5rem; background: none; gap: 0; } .nav-panel a { padding: .55rem .2rem; } .nav-panel a span { display: none; } } /* ---------- Breadcrumb ---------- */ .crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--meta); padding-top: 1.6rem; margin: 0; } .crumbs a { color: var(--meta); text-decoration: none; } .crumbs a:hover { color: var(--accent-deep); } .crumbs span[aria-current] { color: var(--ink); } .crumbs .sep { color: var(--rule); } /* ---------- Related insight strip (division pages) ---------- */ .related { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)); gap: 0; border-top: 1.5px solid var(--ink); } .rel { padding: 1.4rem 1.5rem 1.5rem 0; border-right: 1px solid var(--rule); text-decoration: none; color: inherit; display: flex; flex-direction: column; transition: background .2s ease; } .rel:last-child { border-right: 0; } .rel:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); } @media (max-width: 700px) { .rel { border-right: 0; border-bottom: 1px solid var(--rule); padding-right: 0; } .rel:last-child { border-bottom: 0; } } .rel .rel-series { font-size: .68rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 700; color: var(--accent-deep); margin-bottom: .7rem; } .rel h3 { font-size: 1.1rem; line-height: 1.25; margin: 0 0 .5rem; } .rel:hover h3 { color: var(--accent-deep); } .rel p { margin: 0 0 1rem; font-size: .89rem; color: var(--muted); line-height: 1.5; } .rel .rel-go { margin-top: auto; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-deep); } /* ---------- Exhibit: a scored comparison table ---------- Used where the argument IS the comparison - a series of evaluations scored on one fixed instrument. Scrolls horizontally rather than reflowing, because a scorecard that wraps stops being a scorecard. */ .exhibit-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .exhibit-wrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } table.exhibit { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: .93rem; font-variant-numeric: tabular-nums; } .exhibit caption { caption-side: bottom; text-align: left; font-size: .82rem; color: var(--meta); padding-top: 1rem; line-height: 1.55; max-width: 78ch; } .exhibit thead th { font-family: "Karla", sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--meta); text-align: left; padding: 0 .9rem .7rem 0; border-bottom: 1.5px solid var(--ink); white-space: nowrap; vertical-align: bottom; } .exhibit tbody td, .exhibit tbody th { padding: 1rem .9rem 1rem 0; border-bottom: 1px solid var(--rule); text-align: left; font-weight: 400; vertical-align: baseline; } .exhibit tbody tr { transition: background .2s ease; } .exhibit tbody tr:hover { background: color-mix(in srgb, var(--accent) 4%, transparent); } .exhibit .ex-vol, .exhibit tbody th.ex-vol { font-family: "Fraunces", serif; font-weight: 600; color: var(--accent-deep); font-size: 1rem; white-space: nowrap; } .exhibit .ex-name { font-weight: 600; color: var(--ink); min-width: 12rem; } .exhibit .ex-name a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); } .exhibit .ex-name a:hover { color: var(--accent-deep); border-bottom-color: var(--accent); } .exhibit .ex-name small { display: block; font-weight: 400; color: var(--meta); font-size: .8rem; margin-top: .15rem; } .exhibit .ex-num { font-family: "Fraunces", serif; font-weight: 500; font-size: 1.32rem; letter-spacing: -.02em; color: var(--ink-deep); white-space: nowrap; } .exhibit .ex-num i { display: block; font-style: normal; font-size: .7rem; color: var(--meta); letter-spacing: .06em; white-space: normal; margin-top: .2rem; max-width: 9rem; } /* Band chips. Deliberately not a red/amber/green traffic light - these are evaluation bands, and colouring them like a dashboard would imply a precision the evidence licence does not permit. */ .chip { display: inline-block; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: .26rem .6rem; border-radius: 999px; border: 1px solid var(--rule); color: var(--meta); white-space: nowrap; } .chip.is-flag { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-tint); } .chip.is-low { border-color: var(--rule); color: var(--ink-mid); background: var(--sand); } /* ---------- Editorial section spacing ---------- */ .tight { padding-block: clamp(2.2rem, 4.5vw, 3.5rem); }