/* ============================================================ Redberyl Investment Managers LLP Charcoal on white, with eleven watercolour landscapes carrying the colour and the interface carrying none. Generous white space, content centred, and separation by wash rather than by rule. One face throughout: Poppins, light at display sizes and regular in the body. Caveat appears in exactly two places — one clause of the hero headline, and the buttons. It is used nowhere else: a statutory disclosure written in a script face is one nobody can read. The folio register from the previous build is retained: statutory surfaces are plain, high contrast and unornamented. See "the folio register" below. ============================================================ */ :root{ /* burgundy — the only colour in the mark */ /* the R renders as a faceted gem, not a flat fill: greyscale facets composite in overlay over #800020, giving #f6003e -> #2f000c. #8E0024 is that gem at its dominant value. */ --brand:#3a3a3d; --brand-deep:#1f1f22; --brand-dark:#141416; --brand-on-dark:#d8d8dc; /* graphite and silver, lifted from the logo's own ramp */ --ink:#1b2126; --ink-2:#1a2027; /* was #343a40 — 11.5:1 on white, now 14.5:1 */ --ink-deep:#0e1216; --muted:#222930; /* was #4e565d — 7.5:1 on white, now 10.2:1 */ --silver:#bebebe; --edge:#d8d8d8; /* surfaces */ --tint:#f0efed; --tint-2:#f8f7f6; --tint-3:#ebebeb; --tint-4:#fafafa; --paper:#FFFFFF; --ground:#FFFFFF; --line:#e7e7e7; --line-soft:#f4f4f4; /* the folio register — statutory surfaces */ --folio-bg:#FFFFFF; --folio-line:#C4C4C4; --folio-head:#F3F3F3; --folio-ink:#141414; --ok:#0F4433; --warn:#8A5A00; --warn-bg:#FFF8E7; /* Poppins carries the whole system, display and body alike; the two tokens are kept separate only so a display face could be swapped back in later without touching the body. Caveat is reserved for the hero clause and the buttons - see .hero h1 em and .btn. */ --sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --serif:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --hand:"Caveat","Segoe Script","Bradley Hand",cursive; /* Sampled from the eleven watercolour plates rather than chosen: the mean of the most saturated mid-tone in each is #a6cdd5, the lake-and-sky blue running through the whole set. --band-deep is the same hue pulled down for the hover state, where it has to hold against larger type. */ /* the four painted strokes, declared once so the hover variants can refer to them by name instead of repeating the data URI */ --stroke:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2012'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1.00%205.90L5.95%204.35L10.90%204.00L15.85%204.00L20.80%204.00L25.75%204.00L30.70%204.00L35.65%204.00L40.60%204.00L45.55%204.00L50.50%204.00L55.45%204.00L60.40%204.00L65.35%204.00L70.30%204.00L75.25%204.00L80.20%204.00L85.15%204.00L90.10%204.00L95.05%204.00L100.00%204.00L104.95%204.00L109.90%204.00L114.85%204.00L119.80%204.00L124.75%204.00L129.70%204.00L134.65%204.00L139.60%204.00L144.55%204.00L149.50%204.00L154.45%204.00L159.40%204.00L164.35%204.00L169.30%204.00L174.25%204.00L179.20%204.00L184.15%204.00L189.10%204.00L194.05%204.35L199.00%205.90L199.00%206.10L194.05%207.65L189.10%208.00L184.15%208.00L179.20%208.00L174.25%208.00L169.30%208.00L164.35%208.00L159.40%208.00L154.45%208.00L149.50%208.00L144.55%208.00L139.60%208.00L134.65%208.00L129.70%208.00L124.75%208.00L119.80%208.00L114.85%208.00L109.90%208.00L104.95%208.00L100.00%208.00L95.05%208.00L90.10%208.00L85.15%208.00L80.20%208.00L75.25%208.00L70.30%208.00L65.35%208.00L60.40%208.00L55.45%208.00L50.50%208.00L45.55%208.00L40.60%208.00L35.65%208.00L30.70%208.00L25.75%208.00L20.80%208.00L15.85%208.00L10.90%208.00L5.95%207.65L1.00%206.10Z'%20fill='%23a6cdd5'/%3E%3C/svg%3E"); --stroke-deep:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2012'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1.00%205.90L5.95%204.35L10.90%204.00L15.85%204.00L20.80%204.00L25.75%204.00L30.70%204.00L35.65%204.00L40.60%204.00L45.55%204.00L50.50%204.00L55.45%204.00L60.40%204.00L65.35%204.00L70.30%204.00L75.25%204.00L80.20%204.00L85.15%204.00L90.10%204.00L95.05%204.00L100.00%204.00L104.95%204.00L109.90%204.00L114.85%204.00L119.80%204.00L124.75%204.00L129.70%204.00L134.65%204.00L139.60%204.00L144.55%204.00L149.50%204.00L154.45%204.00L159.40%204.00L164.35%204.00L169.30%204.00L174.25%204.00L179.20%204.00L184.15%204.00L189.10%204.00L194.05%204.35L199.00%205.90L199.00%206.10L194.05%207.65L189.10%208.00L184.15%208.00L179.20%208.00L174.25%208.00L169.30%208.00L164.35%208.00L159.40%208.00L154.45%208.00L149.50%208.00L144.55%208.00L139.60%208.00L134.65%208.00L129.70%208.00L124.75%208.00L119.80%208.00L114.85%208.00L109.90%208.00L104.95%208.00L100.00%208.00L95.05%208.00L90.10%208.00L85.15%208.00L80.20%208.00L75.25%208.00L70.30%208.00L65.35%208.00L60.40%208.00L55.45%208.00L50.50%208.00L45.55%208.00L40.60%208.00L35.65%208.00L30.70%208.00L25.75%208.00L20.80%208.00L15.85%208.00L10.90%208.00L5.95%207.65L1.00%206.10Z'%20fill='%2376acbc'/%3E%3C/svg%3E"); --stroke-light:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2012'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1.00%205.90L5.95%204.35L10.90%204.00L15.85%204.00L20.80%204.00L25.75%204.00L30.70%204.00L35.65%204.00L40.60%204.00L45.55%204.00L50.50%204.00L55.45%204.00L60.40%204.00L65.35%204.00L70.30%204.00L75.25%204.00L80.20%204.00L85.15%204.00L90.10%204.00L95.05%204.00L100.00%204.00L104.95%204.00L109.90%204.00L114.85%204.00L119.80%204.00L124.75%204.00L129.70%204.00L134.65%204.00L139.60%204.00L144.55%204.00L149.50%204.00L154.45%204.00L159.40%204.00L164.35%204.00L169.30%204.00L174.25%204.00L179.20%204.00L184.15%204.00L189.10%204.00L194.05%204.35L199.00%205.90L199.00%206.10L194.05%207.65L189.10%208.00L184.15%208.00L179.20%208.00L174.25%208.00L169.30%208.00L164.35%208.00L159.40%208.00L154.45%208.00L149.50%208.00L144.55%208.00L139.60%208.00L134.65%208.00L129.70%208.00L124.75%208.00L119.80%208.00L114.85%208.00L109.90%208.00L104.95%208.00L100.00%208.00L95.05%208.00L90.10%208.00L85.15%208.00L80.20%208.00L75.25%208.00L70.30%208.00L65.35%208.00L60.40%208.00L55.45%208.00L50.50%208.00L45.55%208.00L40.60%208.00L35.65%208.00L30.70%208.00L25.75%208.00L20.80%208.00L15.85%208.00L10.90%208.00L5.95%207.65L1.00%206.10Z'%20fill='%23cfe4ea'/%3E%3C/svg%3E"); --stroke-light-deep:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2012'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1.00%205.90L5.95%204.35L10.90%204.00L15.85%204.00L20.80%204.00L25.75%204.00L30.70%204.00L35.65%204.00L40.60%204.00L45.55%204.00L50.50%204.00L55.45%204.00L60.40%204.00L65.35%204.00L70.30%204.00L75.25%204.00L80.20%204.00L85.15%204.00L90.10%204.00L95.05%204.00L100.00%204.00L104.95%204.00L109.90%204.00L114.85%204.00L119.80%204.00L124.75%204.00L129.70%204.00L134.65%204.00L139.60%204.00L144.55%204.00L149.50%204.00L154.45%204.00L159.40%204.00L164.35%204.00L169.30%204.00L174.25%204.00L179.20%204.00L184.15%204.00L189.10%204.00L194.05%204.35L199.00%205.90L199.00%206.10L194.05%207.65L189.10%208.00L184.15%208.00L179.20%208.00L174.25%208.00L169.30%208.00L164.35%208.00L159.40%208.00L154.45%208.00L149.50%208.00L144.55%208.00L139.60%208.00L134.65%208.00L129.70%208.00L124.75%208.00L119.80%208.00L114.85%208.00L109.90%208.00L104.95%208.00L100.00%208.00L95.05%208.00L90.10%208.00L85.15%208.00L80.20%208.00L75.25%208.00L70.30%208.00L65.35%208.00L60.40%208.00L55.45%208.00L50.50%208.00L45.55%208.00L40.60%208.00L35.65%208.00L30.70%208.00L25.75%208.00L20.80%208.00L15.85%208.00L10.90%208.00L5.95%207.65L1.00%206.10Z'%20fill='%23e6f2f5'/%3E%3C/svg%3E"); --band:166,205,213; --band-deep:118,172,188; --wrap:1240px; --r:6px; --pill:999px; --shadow:0 1px 2px rgba(26,26,26,.05),0 12px 32px -16px rgba(26,26,26,.18); --shadow-lg:0 2px 10px rgba(26,26,26,.06),0 30px 70px -28px rgba(26,26,26,.26); --ease:cubic-bezier(.22,.68,.28,1); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px} body{ margin:0;background:var(--ground);color:var(--ink); font-family:var(--sans);font-size:15.8px;line-height:1.8;font-weight:400;letter-spacing:-.002em; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } .rb-defs{position:absolute;width:0;height:0;overflow:hidden} img,svg{max-width:100%;height:auto;display:block} a{color:var(--brand);text-decoration-thickness:1px;text-underline-offset:3px} a:hover{color:var(--brand-deep)} /* Display sizes: see the block at the foot of this file, where the final Poppins settings override the size and weight declared here. */ h1,h2{ font-family:var(--serif);font-weight:500;color:var(--ink-deep); margin:0 0 .55em;letter-spacing:-.004em;line-height:1.26; } h1{font-size:clamp(2.15rem,4.1vw,3.5rem)} h2{font-size:clamp(1.65rem,2.6vw,2.4rem)} /* --- everything below stays legible --- */ h3{font-family:var(--serif);font-size:clamp(1.12rem,1.4vw,1.3rem);font-weight:600;line-height:1.4;letter-spacing:0;color:var(--ink);margin:0 0 .5em} h4{font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin:0 0 .7em;color:var(--brand)} p{margin:0 0 1.35em} ul,ol{margin:0 0 1.15em;padding-left:1.2em} li{margin-bottom:.7em} strong{font-weight:600} hr{border:0;border-top:1px solid var(--line);margin:2.6rem 0} ::selection{background:var(--tint-3);color:var(--ink-deep)} .wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:32px} .narrow{max-width:680px} .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:9999} .skip:focus{left:8px;top:8px} :focus-visible{outline:2px solid var(--brand);outline-offset:3px} /* ---------- hand-drawn marks ---------- */ /* ---------- demo ribbon + placeholder marker ---------- */.section--dark .ph{background:rgba(255,255,255,.12);box-shadow:inset 0 -1px 0 rgba(255,255,255,.34)} /* ---------- buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55em; font-family:var(--sans);font-size:13.6px;font-weight:600;letter-spacing:.01em; padding:14px 28px;border-radius:var(--pill);border:1.5px solid transparent; cursor:pointer;text-decoration:none;transition:.28s var(--ease);white-space:nowrap; } .btn-primary{background-color:var(--brand);color:#fff;border-color:var(--brand)} .btn-primary:hover{background-color:var(--brand-dark);border-color:var(--brand-dark);color:#fff} .btn-ghost{background-color:transparent;color:var(--ink);border-color:var(--edge)} .btn-ghost:hover{background-color:var(--ink);border-color:var(--ink);color:#fff} .btn-light{background-color:#fff;color:var(--ink);border-color:#fff} .btn-light:hover{background-color:var(--tint);color:var(--ink-deep)} .btn-outline-light{background-color:transparent;color:#fff;border-color:rgba(255,255,255,.42)} .btn-outline-light:hover{background-color:#fff;border-color:#fff;color:var(--ink)} .btn-lg{padding:16px 34px;font-size:14.6px} /* ---------- header ---------- */ .site-head{ position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94); backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px); border-bottom:1px solid transparent;transition:.3s var(--ease); } .site-head.is-stuck{border-bottom-color:var(--line)} .head-inner{display:flex;align-items:center;gap:24px;min-height:86px} .brand{display:flex;align-items:center;text-decoration:none;flex-shrink:0} /* the supplied artwork carries the wordmark and tagline, so no text sits beside it */ .brand-logo{height:60px;width:auto;display:block} .brand--foot .brand-logo{height:78px} .main-nav{margin-left:auto} .main-nav>ul{display:flex;gap:3px;list-style:none;margin:0;padding:0} .main-nav li{margin:0;position:relative} .nav-link{ display:flex;align-items:center;gap:5px;padding:10px 14px;border-radius:var(--pill); font-family:var(--sans);font-size:13.4px;font-weight:500;color:var(--ink-2); text-decoration:none;transition:.2s var(--ease); } .nav-link:hover{color:var(--ink);background-color:var(--tint-2)} .nav-link.is-active{color:var(--ink);background-color:var(--tint);font-weight:600}.head-cta{display:flex;gap:10px;flex-shrink:0} .burger{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;background:none;border:1.5px solid var(--edge);border-radius:var(--pill);cursor:pointer;padding:0 12px} .burger span{display:block;height:1.6px;border-radius:2px;background:var(--ink);transition:.25s var(--ease)} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)} .mobile-nav{position:fixed;inset:0;z-index:45;background:var(--paper);padding:106px 28px 48px;overflow-y:auto;overscroll-behavior:contain} .mobile-nav[hidden]{display:none} .mobile-nav ul{list-style:none;margin:0;padding:0} .mobile-nav>nav>ul>li{border-bottom:1px solid var(--line)} .mobile-nav>nav>ul>li>a{display:block;padding:16px 0;font-size:24px;font-weight:300;letter-spacing:-.025em;color:var(--ink);text-decoration:none} .mobile-nav ul ul{padding:0 0 16px} .mobile-nav ul ul a{display:block;padding:6px 0;font-size:14.5px;color:var(--muted);text-decoration:none} .mobile-cta{display:flex;flex-direction:column;gap:10px;margin-top:30px} /* ---------- sections ---------- */ .section{padding:clamp(52px,5.6vw,92px) 0}.section--paper{background:var(--paper)} .section--blush{background:var(--paper)} .section--pearl{background:var(--paper)} .section--silver{background:var(--paper)} .section--mist{background:var(--paper)} .section--dark{background:var(--ink);color:rgba(255,255,255,.76)} .section--dark h1,.section--dark h2{color:#fff} .section--dark h3{color:#fff} .section--dark h4{color:var(--brand-on-dark)} .section--dark p{color:rgba(255,255,255,.72)} .section--dark a{color:var(--brand-on-dark)} /* was inheriting a muted grey meant for pale grounds; measured at 1.42:1 on the dark band, against a 4.5:1 requirement */ .section--dark .eyebrow,.cta-band .eyebrow{color:rgba(255,255,255,.86)} .eyebrow{ display:inline-flex;align-items:center;gap:10px;font-family:var(--sans);font-size:11px; font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);margin:0 0 18px; } .eyebrow::before{content:"";width:26px;height:2px;background:var(--brand)} .section--dark .eyebrow{color:var(--brand-on-dark)} .lede{font-size:clamp(1.06rem,1.4vw,1.22rem);line-height:1.7;color:var(--ink-2);max-width:56ch;font-weight:400} .section--dark .lede{color:rgba(255,255,255,.8)} .sec-head{max-width:660px;margin-bottom:clamp(20px,2.3vw,34px)} .sec-head.center{margin-inline:auto;text-align:center} .sec-head.center .eyebrow{justify-content:center} .muted{color:var(--muted)} .small{font-size:13.8px;line-height:1.7} /* ---------- hero ---------- */ .hero{position:relative;background:var(--paper);padding:clamp(86px,11vw,180px) 0 clamp(86px,11vw,168px);overflow:hidden} .hero-inner{max-width:940px} .hero h1{margin-bottom:.24em} /* the single handwritten moment on the site: the clause the page turns on */ .hero h1 em{font-family:var(--hand);font-style:normal;font-weight:600;color:var(--brand);font-size:1.3em;letter-spacing:0;line-height:.92} .hero-lede{font-size:clamp(1.1rem,1.5vw,1.32rem);line-height:1.6;color:var(--ink-2);max-width:56ch;margin:0 auto 2.2rem;font-weight:300} .hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:2.1rem} /* --- the mountain plate: line art wants a light ground, not a painted one --- */ /* ---------- studies after Leonardo ---------- The site stays clean and modern; the drawings are framed as sheets of prepared paper set into it, the way studies hang in a gallery. *//* the ruled margin every notebook sheet carries */ /* a study set beside a block of text */ /* ---------- landing page: label + one sentence ---------- */ /* ---------- stat band ---------- */ /* ---------- cards ---------- */ .grid{display:grid;gap:clamp(24px,2.6vw,40px)} .g-2{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:repeat(3,1fr)} .g-4{grid-template-columns:repeat(4,1fr)} a.card{text-decoration:none;color:inherit} .card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(28px,2.8vw,42px);transition:.3s var(--ease)} .card:hover{border-color:var(--edge);box-shadow:var(--shadow);transform:translateY(-2px)} .card p:last-child{margin-bottom:0}.section--dark .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)} .section--dark .card:hover{background:rgba(255,255,255,.1);border-color:var(--brand-on-dark)}.section--dark .pillar{border-top-color:var(--brand-on-dark)} .section--dark .pillar h3{color:#fff} .section--dark .pillar p{color:rgba(255,255,255,.66)} /* ---------- press strip ---------- */ /* ---------- strategies ---------- *//* The stone is hung off the top-right corner, oversized and tilted, after the strategy cards on wealthmanagers.co.in. It sits outside the card, which is why .strat-card cannot clip its overflow. The wrapper carries the position, the svg carries the tilt. On hover the wrapper turns a half circle about a pivot set just below the stone, so the stone travels a semicircle; an equal counter-turn on the svg keeps it sitting at the same angle throughout, so it orbits rather than spins. */@media (max-width:1199px){ .beryl-orbit{top:-28px;right:-28px;width:106px} }@media (max-width:640px){ .strat-top{padding:28px 70px 24px 24px} .strat-meta{grid-template-columns:1fr} .strat-meta div{padding:15px 24px} .strat-foot{padding:18px 24px} .strat-solo{margin-right:32px} .beryl-orbit{top:-20px;right:-10px;width:76px;transform-origin:50% calc(50% + 10px)} } /* ============================================================ THE FOLIO REGISTER — statutory surfaces. Inter only, plain white, hard rules, no handwriting, no ornament. ============================================================ */ .table-scroll{overflow-x:auto;border:1px solid var(--folio-line);background:var(--folio-bg);-webkit-overflow-scrolling:touch} .dtable{width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13.6px;min-width:660px;color:var(--folio-ink)} .dtable caption{ caption-side:top;text-align:left;padding:18px 22px;font-family:var(--sans);font-weight:700; font-size:12.6px;letter-spacing:.07em;text-transform:uppercase; border-bottom:2px solid var(--folio-ink);background:var(--folio-head);color:var(--folio-ink); } .dtable th,.dtable td{padding:12px 18px;border-bottom:1px solid var(--folio-line);text-align:right;font-variant-numeric:tabular-nums} .dtable th:first-child,.dtable td:first-child{text-align:left;font-variant-numeric:normal} .dtable thead th{background:var(--folio-head);font-size:10.4px;letter-spacing:.09em;text-transform:uppercase;color:var(--folio-ink);font-weight:700;border-bottom:1px solid var(--folio-ink);white-space:nowrap} .dtable tbody tr:last-child td{border-bottom:0} .dtable tbody tr:hover td{background:#faf7f8} .dtable .row-bench td{color:#2b2b2b;font-size:13px} .dtable .row-bench td:first-child{padding-left:36px} .dtable tfoot td{background:var(--folio-head);font-weight:700;border-top:2px solid var(--folio-ink)} .table-note{font-size:12.6px;color:var(--muted);margin-top:14px;line-height:1.7} .scroll-hint{font-size:12px;color:var(--muted);margin:8px 0 0;display:none} .section--dark .table-scroll{background:var(--folio-bg)} .section--dark .dtable td,.section--dark .dtable th{color:var(--folio-ink)} .section--dark .dtable a{color:var(--brand)} .notice{border:1px solid var(--line);border-left:4px solid var(--brand);background:var(--paper);border-radius:var(--r);padding:28px 32px;margin:32px 0} /* callout labels are not document structure: they were

directly under the page

, which reads as a skipped level to anything walking the outline. Same look, no longer a heading. */ .notice h4,.notice .notice-title{margin-bottom:.55em;color:var(--brand);font-family:var(--sans);font-size:1rem;font-weight:600;line-height:1.35} .notice p:last-child,.notice ul:last-child{margin-bottom:0} .notice a{display:inline-block;padding-block:6px;margin-block:-6px} .notice--warn{ border:2px solid var(--folio-ink);border-left-width:6px;border-radius:0; background:var(--folio-bg);color:var(--folio-ink);font-family:var(--sans); } .notice--warn h4{color:var(--folio-ink);letter-spacing:.12em} .notice--warn p,.notice--warn li{color:var(--folio-ink)} .notice--info{border-left-color:var(--brand-on-dark);background:var(--tint-2)} .notice--info h4{color:var(--ink)} /* complaint status header, with the PDF download alongside */ .cs-head{display:flex;justify-content:space-between;align-items:flex-end;gap:26px;flex-wrap:wrap} .cs-head h2{margin-bottom:.25em} .cs-dl{flex:none} @media (max-width:720px){.cs-head{align-items:flex-start}.cs-dl{width:100%}} /* ---------- documents ---------- */ .doc-list{list-style:none;padding:0;margin:0;border-top:1px solid var(--line)} .doc-list li{margin:0;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;padding:30px 0;border-bottom:1px solid var(--line);transition:.22s var(--ease)} .doc-list li:hover{background:var(--tint-2)} .doc-name{font-family:var(--sans);font-weight:600;font-size:15.4px;display:flex;align-items:center;gap:11px;margin-bottom:6px} .doc-desc{font-size:13.8px;color:var(--muted);margin:0;max-width:78ch} .doc-meta{font-size:10.4px;color:var(--muted);margin-top:8px;letter-spacing:.14em;text-transform:uppercase} .doc-icon{color:var(--brand);flex:none} /* ---------- escalation ladder ---------- */ .ladder{list-style:none;padding:0;margin:0} .ladder li{position:relative;padding:0 0 44px 72px;margin:0;border-left:2px solid var(--tint-3)} .ladder li:last-child{border-left-color:transparent;padding-bottom:0} .ladder li::before{content:"";position:absolute;left:-7px;top:6px;width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid var(--brand)} .ladder .lv{font-size:10.4px;letter-spacing:.2em;text-transform:uppercase;color:var(--brand);font-weight:700} .ladder h3{font-size:1.22rem;font-weight:500;letter-spacing:-.02em;color:var(--ink);margin:7px 0 .35em;line-height:1.25} .ladder p{color:var(--muted);font-size:14.4px;margin-bottom:10px} .ladder .tat{display:inline-block;font-size:11.2px;letter-spacing:.06em;border:1px solid var(--edge);border-radius:var(--pill);padding:4px 13px;color:var(--ink);background:var(--tint-2)} /* ---------- accordion ---------- */.acc details[open] summary::after{transform:translateY(-30%) rotate(-135deg)} /* ---------- people ---------- */ .person{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:clamp(28px,2.8vw,42px);transition:.3s var(--ease);text-align:center} .person:hover{border-color:var(--edge);box-shadow:var(--shadow)} .avatar{ width:88px;height:88px;border-radius:50%;display:grid;place-items:center;margin:0 auto 20px; background:linear-gradient(150deg,var(--brand),var(--ink-deep)); color:#fff;font-size:26px;font-weight:500;letter-spacing:.04em;border:3px solid var(--tint); } .person h3{font-size:1.32rem;font-weight:500;letter-spacing:-.02em;color:var(--ink);margin-bottom:.25em;line-height:1.25} .person .role{font-size:10.4px;letter-spacing:.18em;text-transform:uppercase;color:var(--brand);font-weight:700;margin-bottom:16px} .person .bio{font-size:14.2px;color:var(--muted);margin-bottom:0;text-align:left} /* ---------- insights ---------- */ /* ---------- newsletter band ---------- */ /* ---------- fee calculator ---------- */.field input[type="number"],.field select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:4px;font-family:var(--sans);font-size:15px;background:#fff;color:var(--ink)} /* ---------- risk strip + footer ---------- */ .site-foot{background:var(--tint-4);border-top:1px solid var(--line);color:var(--muted);padding:44px 0 22px;font-size:13.8px} .site-foot h3{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--brand);font-weight:600;margin-bottom:20px} .site-foot h3::first-letter{color:#ca0033} .site-foot a{color:var(--ink-2);text-decoration:none;transition:.2s var(--ease)} .site-foot a:hover{color:var(--brand)} .foot-grid{display:grid;grid-template-columns:1.9fr 1fr 1fr 1.1fr;gap:36px} .foot-tag{margin:18px 0 18px;font-size:14.4px;font-weight:400;line-height:1.6;color:var(--muted);max-width:32ch} .foot-addr{font-style:normal;font-size:13px;line-height:1.88;color:var(--muted)} .foot-social{display:flex;gap:10px;margin-top:20px} .foot-social a{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--edge);border-radius:50%;color:var(--ink-2);transition:.26s var(--ease)} .foot-social a:hover{background:var(--brand);border-color:var(--brand);color:#fff} .foot-col ul{list-style:none;padding:0;margin:0} .foot-col li{margin-bottom:2px;font-size:13.2px} /* an inline anchor is only as tall as its text — 19px here, against the 24px WCAG 2.2 AA asks of a target that is not inside a sentence. The list spacing above is reduced by what this padding adds, so the footer looks the same and the targets are the size a thumb needs. */ .foot-col li a{display:inline-block;padding:4px 0;min-height:24px} .foot-bar{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:52px;padding-top:24px;border-top:1px solid var(--line);font-size:12.2px} .foot-bar p{margin:0;color:var(--muted)} .foot-legal{display:flex;gap:24px;list-style:none;margin:0;padding:0} .foot-legal li{margin:0} /* ---------- residency declaration ---------- */ .rd-gate{position:fixed;inset:0;z-index:200;background:rgba(26,26,26,.62);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px;overflow-y:auto} .rd-gate[hidden]{display:none} .rd-card{ background:#fff;border-radius:12px;padding:clamp(26px,3.6vw,44px); width:min(950px,100%);margin:auto;box-shadow:0 8px 40px rgba(0,0,0,.28); } .rd-card .eyebrow{margin-bottom:12px} .rd-card h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-bottom:.3em} .rd-sub{font-size:14.6px;color:var(--muted);margin-bottom:26px} .rd-opt{ display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start; padding:20px 22px;border:1px solid var(--line);border-radius:8px; margin-bottom:14px;cursor:pointer;transition:.2s var(--ease);background:var(--tint-4); } .rd-opt:hover{border-color:var(--brand);background:#fff} .rd-opt:has(input:checked){border-color:var(--brand);background:var(--tint);box-shadow:inset 0 0 0 1px var(--brand)} .rd-opt input{margin-top:4px;accent-color:var(--brand);width:17px;height:17px} .rd-opt span{font-size:13.6px;line-height:1.62;color:var(--ink-2)} .rd-opt strong{display:block;font-size:11.4px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--brand);margin-bottom:7px} .rd-opt em{font-style:normal;font-weight:600;color:var(--ink)} .rd-warn{font-size:12.6px;line-height:1.6;color:var(--muted);border-left:3px solid var(--brand);padding-left:16px;margin:22px 0 24px} #rdConfirm{min-width:190px} .rd-blocked h3{font-size:1.3rem;margin-bottom:.5em} .rd-blocked p{font-size:14.4px;color:var(--ink-2)} .rd-link{background:none;border:0;padding:0;font:inherit;color:var(--brand);text-decoration:underline;cursor:pointer} @media (max-width:640px){ .rd-opt{padding:16px 16px;gap:11px} .rd-card{padding:24px 20px} #rdConfirm{width:100%} } /* ---------- page banner ---------- */ .pbanner{background:var(--paper);border-bottom:1px solid var(--line);padding:clamp(64px,7vw,104px) 0 clamp(30px,3.4vw,48px)} /* Poppins Light sets much wider than the serif this was drawn for, so the banner headline steps down to keep page titles to two lines. */ /* the same hand as h1.mission-line on About: light, deep fir green, tight tracking, centred. Held to 26ch rather than 19 because a statutory page title is longer than a mission statement. */ .pbanner h1{ max-width:26ch;margin-inline:auto;text-align:center; font-size:clamp(2.1rem,4.2vw,3.5rem); font-weight:300;line-height:1.14;letter-spacing:-.022em; color:#173B2C; } .pbanner .lede{ max-width:58ch;margin-inline:auto;text-align:center; font-size:clamp(.92rem,1.1vw,1.02rem);line-height:1.6;color:var(--ink-2); } /* ---------- prose ---------- */ .prose{max-width:66ch} /* the weight, colour and scale the rest of the site sets a section head in, and the same brush rule under it — left-aligned, because these are numbered clauses read down an edge */ .prose h2{ font-family:var(--sans);font-size:clamp(1.5rem,2.3vw,1.95rem); font-weight:500;color:var(--ink-deep);letter-spacing:-.016em;line-height:1.24; margin-top:2.4em; } .prose h2::after{ content:"";display:block; width:64px;height:8px;margin:16px 0 0; background:var(--stroke-nav) no-repeat center / 100% 8px; opacity:.75; } .prose h2:first-child{margin-top:0} .prose h3{font-size:1.16rem;font-weight:500;color:var(--ink-deep);margin-top:1.9em} .prose li{margin-bottom:.55em} /* a prose table has no .table-scroll around it, so it carries its own: display:block makes overflow-x meaningful on a table element, and the page stops being widened by a column that will not compress */ .prose table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;border-collapse:collapse;font-family:var(--sans);font-size:13.6px;margin:1.6em 0;background:var(--folio-bg);color:var(--folio-ink)} .prose th,.prose td{border:1px solid var(--folio-line);padding:12px 15px;text-align:left;vertical-align:top} .prose th{background:var(--folio-head);font-weight:700;font-size:12.4px;letter-spacing:.06em;text-transform:uppercase} .toc{background:var(--tint-2);border:1px solid var(--edge);border-radius:var(--r);padding:28px 32px;margin-bottom:40px} .toc h4{margin-bottom:.8em} .toc ol{margin:0;padding-left:1.3em;font-size:14.2px} .toc li{margin-bottom:.45em} /* ---------- cta band ---------- */ .cta-band{background:transparent;color:var(--ink);padding:clamp(76px,9vw,140px) 0;position:relative} .cta-inner{display:flex;justify-content:space-between;align-items:center;gap:42px;flex-wrap:wrap;position:relative;z-index:2} .cta-inner h2{color:var(--ink-deep);margin-bottom:.4em;max-width:20ch} .cta-inner p{color:var(--ink-2);margin:0;max-width:52ch} .cta-actions{display:flex;gap:12px;flex-wrap:wrap} /* ---------- forms ---------- */ .form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .form-grid .full{grid-column:1/-1} .form-grid label{display:block;font-size:10.6px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin-bottom:9px} .form-grid input,.form-grid select,.form-grid textarea{width:100%;padding:13px 15px;border:1px solid var(--line);border-radius:4px;font-family:var(--sans);font-size:15px;background:#fff;color:var(--ink)} .form-grid textarea{min-height:145px;resize:vertical} .form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{border-color:var(--ink);outline:none} /* .form-grid label is (0,1,1) and beat a bare .consent at (0,1,0), so the consent declaration was rendering as letterspaced capitals — a legal statement set as a field label. Matching on label.consent takes it back. */ .form-grid label.consent{display:flex;gap:12px;align-items:flex-start;font-size:13.6px; color:var(--ink-2);line-height:1.75;text-transform:none;letter-spacing:0;font-weight:400} .consent input{margin-top:3px;accent-color:var(--ink)} /* ---------- reveal ---------- */ .rv{opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .rv.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important;scroll-behavior:auto!important} .rv{opacity:1;transform:none} } /* ---------- responsive ---------- */ @media (max-width:1180px){ .main-nav,.head-cta{display:none} .burger{display:flex} .head-inner{justify-content:space-between} .foot-grid{grid-template-columns:1fr 1fr 1fr;gap:36px} .foot-brand{grid-column:1/-1} .calc{grid-template-columns:1fr} .calc-panel{position:static} .hero-inner{grid-template-columns:1fr;gap:44px} .hero-media{aspect-ratio:16/10;max-width:560px;margin-inline:auto} } @media (max-width:900px){ .g-4{grid-template-columns:repeat(2,1fr)} .g-3{grid-template-columns:1fr} .stat-grid{grid-template-columns:repeat(2,1fr)} .stat{border-bottom:1px solid var(--line-soft)} .stat:nth-child(2n){border-right:0} .strat-detail-head{grid-template-columns:1fr} .risk-body{columns:1} .calc-summary{grid-template-columns:1fr} .scroll-hint{display:block} .news-inner{grid-template-columns:1fr} .media-row{grid-template-columns:repeat(3,1fr)} .why-list{grid-template-columns:1fr} .why-list li:nth-last-child(2){border-bottom:0} .split-row{grid-template-columns:1fr;gap:22px} .study-row,.study-row--narrow{grid-template-columns:1fr;gap:30px} } @media (max-width:640px){ body{font-size:16px} .wrap{padding-inline:20px} .g-2,.g-4{grid-template-columns:1fr} .stat-grid{grid-template-columns:1fr} .stat{border-right:0} .form-grid{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} .doc-list li{grid-template-columns:1fr} .steps li{padding:66px 0 30px} .steps li::before{top:20px;left:0;text-align:left} .cta-inner,.foot-bar{flex-direction:column;align-items:flex-start} .media-row{grid-template-columns:repeat(2,1fr)} .brand-logo{height:48px} .brand--foot .brand-logo{height:58px} .acc summary{font-size:1rem;padding-right:44px} .why-list li{grid-template-columns:1fr;gap:8px;padding-right:0} } /* ---------- flat: rules and borders removed ---------- Content is separated by whitespace instead of by rules. Kept: data tables, form controls, buttons and pills, the nav dropdown panel, and the hero underline, which is drawn artwork rather than a border. */ .site-head,.site-head.is-stuck{border-bottom-color:transparent} .pbanner,.media-strip,.post-thumb,.strat-top{border-bottom:0} .foot-bar,.site-foot,.strat-detail,.strat-foot,.acc,.doc-list,.post--text{border-top:0}.why-list li,.why-list li:last-child,.why-list li:nth-last-child(2), .why-list--single li:last-child,.steps li,.steps li:last-child, .acc details,.doc-list li,.mobile-nav>nav>ul>li{border-top:0;border-bottom:0}.ladder li{border-left-color:transparent} /* the meta grid drew its separators with a background showing through 1px gaps *//* the placeholder marker drew a maroon rule under every value */@media (max-width:900px){.stat{border-bottom:0}} @media (max-width:560px){.stat{border-right:0}} hr{display:none} .hero-inner .eyebrow,.brief-head .eyebrow,.sec-head .eyebrow{justify-content:flex-start} } /* ---------- unien.in: washed ground, soft surfaces ---------- Sections are separated by broad, very pale washes that bleed across the page rather than by rules or hard tinted bands. The washes live on the body and are fixed, so scrolling moves the content through them; every section is therefore transparent. */ body{background:var(--ground)} .section,.section--paper,.section--blush,.section--pearl,.section--silver,.section--mist, .hero,.pbanner,.site-foot,.stat-band,.media-strip,.news-band{background:transparent} .section.section--dark{background:var(--ink)} .section.section--dark .sec-head h2, .section.section--dark h1, .section.section--dark h2, .section.section--dark h3{color:#fff} .section.section--dark .sec-head .lede, .section.section--dark p{color:rgba(255,255,255,.78)} .section.section--dark .eyebrow{color:var(--brand-on-dark)} .section{padding:clamp(56px,6vw,96px) 0} /* surfaces float on the wash: soft radius, soft shadow, no hard border */ .card,.person,.post,.calc-panel,.kpi,.toc,.strat-card,.notice{ border-radius:16px;border-color:transparent; background:rgba(255,255,255,.72); backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px); box-shadow:0 1px 2px rgba(44,44,46,.04),0 18px 44px -26px rgba(44,44,46,.28); } .card:hover,.person:hover,.post:hover,.strat-card:hover{ background:rgba(255,255,255,.92); box-shadow:0 2px 4px rgba(44,44,46,.05),0 26px 60px -28px rgba(44,44,46,.3); }.notice{border-left-width:3px;border-left-style:solid} /* body copy: a little more air, as on the reference */ body{line-height:1.82} .lede{font-weight:400} .btn{font-weight:500;border-radius:var(--pill)} .eyebrow{letter-spacing:.2em} /* ---------- painted grounds ---------- Eleven watercolour landscapes carry the site. Three are large enough to run full-bleed behind a section; the rest are set into the page as plates, at their own size, where they can be looked at rather than glimpsed. That division is the whole design: a picture used as a wash and a picture used as a picture want opposite treatment, and treating them alike is what makes image-heavy sites read as stock photography. The interface stays monochrome throughout so the paintings carry all of the colour. */ #main > section{position:relative} .hero,.pbanner,.plate{ background-repeat:no-repeat;background-size:cover;background-position:center; } .hero{ background-image: radial-gradient(ellipse 66% 58% at 50% 50%,rgba(255,255,255,.9) 20%,rgba(255,255,255,.64) 56%,rgba(255,255,255,.26) 100%), url("/images/plates/06_oeschinen_lake.jpg"); background-position:center 34%; } /* was a photographic plate, which made the statutory pages open on a different note from every other page. The ridge that sits behind the mission statement instead — same image, same treatment, far enough out of focus to be a ground rather than a picture. */ .pbanner{ background-image:radial-gradient(120% 96% at 50% 0%,#F4F7F3 0%,#EDF2EC 46%,#E6EDE6 100%); position:relative;overflow:hidden;isolation:isolate; } .pbanner::after{ content:"";position:absolute;z-index:0;pointer-events:none; left:-6%;right:-6%;bottom:0;height:min(92%,420px); background:url("/images/ridge-silhouette.png") center bottom / 100% 94% no-repeat; opacity:.10;filter:blur(20px); -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%); } .pbanner > .wrap{position:relative;z-index:1}@media (max-width:640px){ .hero,.pbanner,.plate{background-attachment:scroll} .hero{background-image:radial-gradient(ellipse 128% 72% at 50% 46%,rgba(255,255,255,.94) 24%,rgba(255,255,255,.82) 100%),url("/images/plates/06_oeschinen_lake.jpg")} .pbanner::after{left:-16%;right:-16%;filter:blur(15px)} .plate--lake{background-image:radial-gradient(ellipse 128% 72% at 50% 50%,rgba(255,255,255,.94) 24%,rgba(255,255,255,.84) 100%),url("/images/plates/04_conifer_slope.jpg")} } @media print{.hero,.pbanner,.plate{background-image:none}} /* ---------- plates set into the page ---------- Hung, not filled: a hairline radius, a long soft shadow so the sheet lifts off the paper, and a caption set small and centred underneath the way a plate is captioned in a book. *//* inside a grid the plate is already positioned; it carries no margin there */.section--dark .art-plate figcaption{color:rgba(255,255,255,.6)} /* paper grain, kept very light so it does not muddy the washes */ body::after{opacity:.026} /* ---------- the hero headline sets in one voice ---------- The handwritten clause and its drawn underline were the loudest red on the site; with the accent gone they no longer had a reason to differ from the line above them, so they now set in the same serif. */ .hero h1 em{ font-family:inherit;font-style:normal;font-weight:inherit;color:inherit; font-size:inherit;letter-spacing:inherit;line-height:inherit; } .hero .art-swash,.hand-underline .art-swash{display:none} /* burgundy survived in a few borders and shadows *//* ---------- the two actions ---------- Contact and Login are the only two things the site asks a visitor to do, so both are set apart from the navigation rather than sitting in it. Contact carries the solid field and Login the drawn one: equal weight, different emphasis, so it is obvious they are a pair and obvious which is the primary of the two. */ .head-cta{display:flex;align-items:center;gap:10px;margin-left:22px;flex:none} .btn-cta{ background:var(--ink-deep);color:#fff;border-color:var(--ink-deep); box-shadow:0 1px 2px rgba(23,28,32,.16),0 10px 26px -12px rgba(23,28,32,.7); } .btn-cta:hover{background:var(--ink);border-color:var(--ink);color:#fff; box-shadow:0 2px 4px rgba(23,28,32,.2),0 16px 34px -12px rgba(23,28,32,.8)} .btn-login{ background:transparent;color:var(--ink-deep);border-color:var(--ink-deep);border-width:1.5px; font-weight:600; } .btn-login:hover{background:var(--ink-deep);color:#fff;border-color:var(--ink-deep)} /* both sit a little tighter than a body button, being in a header */ .head-cta .btn{padding-block:11px;padding-inline:22px} @media (max-width:1120px){ /* the burger takes over the navigation, but the two actions stay */ .head-cta{display:flex;margin-left:auto;margin-right:14px} .head-cta .btn{padding-inline:16px} } @media (max-width:640px){ .head-cta .btn-login{display:none} } /* Below 380px the wordmark, the pill and the burger stop fitting on one line and the burger is pushed off the right edge, which is what made every page scroll sideways at 320 and 360. The pill folds away; it is in the menu the burger opens, so nothing becomes unreachable. */ @media (max-width:380px){ .head-cta{display:none} .head-inner{gap:10px} } /* ============================================================ FINAL TYPE, HEADER AND CONTROLS Chosen from the trial set and written in here directly: typeface Poppins display over Inter body header serif navigation, active item in italic buttons the script hand, ruled underneath script Caveat, on one clause of the hero headline only The trial variants and the five controls that switched them are gone, along with the eleven font families none of these needs. ============================================================ */ /* ---------- type: Poppins display, Inter body ---------- Poppins runs wide with a tall x-height, so it takes the opposite settings to a serif: a light weight, tracking near zero rather than negative, and a size step down. Both faces are sans, so the distinction between heading and body comes from weight and tracking, not shape. */ h1,h2{font-weight:300;letter-spacing:-.008em;line-height:1.24} h1{font-size:clamp(1.95rem,3.6vw,3.05rem)} h2{font-size:clamp(1.5rem,2.2vw,1.95rem)} h3{font-weight:500;font-size:clamp(1rem,1.2vw,1.12rem);letter-spacing:-.004em} .lede,.hero-lede{font-weight:400} .eyebrow{letter-spacing:.24em} /* ---------- the one handwritten clause ---------- The single moment of hand on the site: the em in the hero headline, set in Caveat a size and a third up, because a script at the size of a grotesk reads small. Kept to this one element deliberately. */ .hero h1 em{ font-family:var(--hand);font-style:normal;font-weight:600; font-size:1.35em;line-height:1.1;letter-spacing:.005em;color:inherit; } /* ---------- header: serif navigation ---------- */ .head-inner{min-height:82px} .main-nav>ul{gap:clamp(18px,2.4vw,34px);align-items:baseline} .nav-link{ font-family:var(--serif);font-size:17.5px;font-weight:400; text-transform:none;letter-spacing:0;padding:6px 0; background:none;border-radius:0;color:var(--ink-2); } .nav-link:hover{background-color:transparent;color:var(--ink)} .nav-link.is-active{background-color:transparent;color:var(--ink);font-style:italic;font-weight:400} /* ---------- buttons: the script hand ---------- The label in Caveat over a hairline that darkens on hover, tying the controls to the handwritten clause in the hero rather than setting them apart from everything else on the page. */ .btn{ position:relative;border:0;border-radius:0;background-color:transparent; padding:5px 2px 16px;font-family:var(--hand);font-size:23px;font-weight:600; letter-spacing:.01em;text-transform:none;color:var(--ink);line-height:1; } /* The band is painted as a background on the button itself. It was a pseudo-element on z-index:-1 with isolation:isolate, which is the usual way to sit something behind text — but inside the cards, which carry a backdrop-filter, Chromium composited that negative layer as an opaque black rectangle on hover. A background needs no stacking context and no negative index: it paints behind the text by definition, so the artefact cannot occur. It sits below the baseline in both states and only thickens — .09em at rest, .22em on hover — so it never climbs into the letters. Growing the background rather than a transform costs a repaint of one small box, which is the right trade against a rendering bug. */ /* The stroke is a background image, not a pseudo-element: a background paints behind text by definition, so it needs no stacking context and cannot produce the compositing artefact the earlier z-index:-1 version did. At rest the stroke is only half laid down, starting at the left edge. On hover the brush carries it to the far end, stopping just short of the edge so it stays one swipe rather than a bar filling the control. Its height is fixed in px, and the bottom padding is deep enough to clear a descender, so it passes under the letters rather than through them. The label does not change size at all — the only thing that moves is the paint. */ .btn{ background-image:var(--stroke); background-repeat:no-repeat; background-position:0% calc(100% - 1px); background-size:38% 13px; transition:background-size .42s cubic-bezier(.22,.61,.24,1), color .3s var(--ease); } .btn:hover{ background-repeat:no-repeat; background-position:0% calc(100% - 1px); color:var(--ink-deep); background-image:var(--stroke-deep); background-size:90% 13px; } .btn-light,.btn-outline-light{ color:#fff; background-image:var(--stroke-light); } .btn-light:hover,.btn-outline-light:hover{ color:#fff; background-image:var(--stroke-light-deep); } /* the two header actions carry drawn fields instead, and take no band */ .head-cta .btn{background-image:none} @media (prefers-reduced-motion:reduce){ .btn{transition:none} } .hero-cta,.cta-actions{gap:34px} /* ---------- the two header actions ---------- Contact Us and Login keep a drawn field while every other button on the page is a ruled line. That is what makes them visible in a header that is otherwise all text: a script link among script links disappears, which is exactly what went wrong before. */ .head-cta .btn{ padding:9px 22px 10px;border-radius:999px;border:1.5px solid var(--ink-deep); font-size:20px;line-height:1.15; } .head-cta .btn{background-image:none} .head-cta .btn-cta{ background:var(--ink-deep);color:#fff; box-shadow:0 1px 2px rgba(23,28,32,.16),0 10px 26px -12px rgba(23,28,32,.7); } .head-cta .btn-cta:hover{background:var(--ink);border-color:var(--ink);color:#fff} .head-cta .btn-login{background:transparent;color:var(--ink-deep)} .head-cta .btn-login:hover{background:var(--ink-deep);color:#fff} /* ---------- no field behind a page button ---------- .btn-primary / .btn-ghost / .btn-light / .btn-outline-light each paint a background on hover, left over from when these were pills. A page button is a label and a brush stroke and nothing else, so the field and the border are cancelled. The two header actions are more specific and keep theirs. */ .btn-primary:hover,.btn-ghost:hover,.btn-light:hover,.btn-outline-light:hover{ background-color:transparent; border-color:transparent; } .btn-primary,.btn-ghost,.btn-light,.btn-outline-light{ background-color:transparent; border-color:transparent; } /* the header pair is the exception: those two are meant to read as fields */ .head-cta .btn-cta,.head-cta .btn-cta:hover{border-color:var(--ink-deep)} .head-cta .btn-login,.head-cta .btn-login:hover{border-color:var(--ink-deep)} /* ---------- the same brush under the navigation ---------- The nav carries the stroke the page buttons do, swept in on hover and held open on the current page, so the two share one gesture rather than each having a hover of its own. Bottom padding is deepened first: at the old 6px the mark would have crossed the descenders of Philosophy. */ .nav-link{ padding:6px 0 12px; background-image:var(--stroke); background-repeat:no-repeat; background-position:0% calc(100% - 1px); background-size:0% 7px; transition:background-size .34s cubic-bezier(.22,.61,.24,1),color .26s var(--ease); } .nav-link:hover{ background-repeat:no-repeat; background-size:100% 7px; color:var(--ink); } .nav-link.is-active{ background-image:var(--stroke-deep); background-repeat:no-repeat; background-position:0% calc(100% - 1px); background-size:100% 7px; } @media (prefers-reduced-motion:reduce){.nav-link{transition:none}} /* ---------- enquiry form ---------- */ /* off-screen rather than display:none — a bot reads the stylesheet too, and an unrendered field is the easier one to spot and skip */ .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .form-status{margin:14px 0 0;font-size:14px;line-height:1.6;color:var(--ink-2)} .form-status.is-ok{color:#1d6b4f} .form-status.is-error{color:#9a2b2b} /* ---------- form validation ---------- */.form-grid .is-invalid{border-color:#9a2b2b;background:#fffafa} .form-grid .is-invalid:focus{outline:2px solid #9a2b2b;outline-offset:1px} /* ---------- line icons ---------- */ .ico{width:26px;height:26px;display:block;color:var(--ink-2);flex:none} .card .ico,.pillar .ico{margin-bottom:16px} .section--dark .ico{color:rgba(255,255,255,.72)} /* a list whose marker is an icon rather than a bullet */ /* one measure for every icon list on the site, rather than a different inline width per page */ .icon-list{list-style:none;margin:0 auto;padding:0;display:grid; gap:clamp(22px,2.6vw,34px);max-width:880px;text-align:left} .icon-list li{display:grid;grid-template-columns:26px 1fr;gap:16px;align-items:start;margin:0} .icon-list h3{margin:0 0 .3em} .icon-list p{margin:0;color:var(--ink-2)} .icon-list .ico{margin-top:2px} /* the long qualification list: two columns, a tick against each line */ .tick-list{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(30px,4vw,64px)} .tick-list li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start; margin:0 0 16px;break-inside:avoid;font-size:15px;line-height:1.65;color:var(--ink-2)} .tick-list .ico{width:20px;height:20px;margin-top:2px;color:var(--band-ink,#6f9aa6)} @media (max-width:820px){.tick-list{columns:1}} /* ---------- a call to action that is only a sentence ---------- */ /* on paper the band's buttons are ordinary page buttons again */ .cta-band .btn-light,.cta-band .btn-outline-light{ color:var(--ink);background-image:var(--stroke); } .cta-band .btn-light:hover,.cta-band .btn-outline-light:hover{ color:var(--ink-deep);background-image:var(--stroke-deep); } /* ---------- alignment ---------- One axis for the whole site. Every block is centred on the page; short things — headings, ledes, the call to action — are centred as text too, because they are read as a unit. Running text stays ranged left inside its centred block, because centred prose is hard to read at length. Three measures and no others. They live here rather than being written inline per page, which is how About, Philosophy and Offering ended up on three slightly different widths. */ :root{ /* One measure. Headings and the content beneath them share it, so their left and right edges line up rather than being centred independently on two different widths. */ --m-read:880px; } /* headings */ .sec-head{max-width:var(--m-read);margin-inline:auto;text-align:center} /* the lede keeps a readable line length inside the wider block */ .sec-head .lede{max-width:62ch} .sec-head .lede{margin-inline:auto} .sec-head .eyebrow{justify-content:center} /* hero and page banner take the same axis */ .hero-inner{max-width:var(--m-read);margin-inline:auto;text-align:center} .hero-inner .eyebrow{justify-content:center} .hero-cta{justify-content:center} .pbanner{text-align:center} .pbanner h1,.pbanner .lede{margin-inline:auto} /* blocks of running content: centred as a block, ranged left inside it */ .narrow{max-width:var(--m-read);margin-inline:auto} .icon-list{max-width:var(--m-read);margin-inline:auto;text-align:left} .tick-list{max-width:var(--m-read);margin-inline:auto;text-align:left} /* the call to action was the one block still split left-and-right, which is what made it read as belonging to a different site */ .cta-inner{ flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:clamp(24px,3vw,36px); } .cta-inner h2,.cta-inner p{margin-inline:auto} .cta-actions{justify-content:center} /* the same axis holds on a phone: an alignment that changes at a breakpoint is the thing people notice */ /* ---------- contact page ---------- */ /* addresses are set as running text, not as a monospaced block */ address{font-style:normal;line-height:1.85;color:var(--ink-2);margin:0} .card address + .contact-lines{margin-top:14px} .contact-lines{margin:0 0 14px;line-height:1.9} /* the parenthetical asides in the copy sit a step back from the line above */ .aside{opacity:.78} /* the safety notes are one column: they are read in order, not scanned */ .tick-list--single{columns:1;max-width:var(--m-read)} /* the closing note, set apart from the contacts above it */ .postscript{ margin:clamp(38px,4.5vw,60px) 0 0;padding-top:clamp(24px,3vw,34px); border-top:1px solid var(--line); font-size:14.6px;line-height:1.75;color:var(--muted); } @media (max-width:760px){.grid.g-2{grid-template-columns:1fr}} /* ---------- print ---------- */ @media print{ .site-head,.mobile-nav,.rd-gate,.demo-ribbon,.cta-band,.foot-social,.burger,.news-band,.media-strip,.art-swash,.art-arrow{display:none!important} body{background:#fff;font-size:11pt} .hero,.pbanner,.site-foot,.section--dark,.cta-band{background:#fff!important;color:#000!important} h1,h2{font-family:Georgia,serif!important;color:#000!important} .site-foot,.site-foot a,.site-foot h3{color:#000!important} a{text-decoration:underline} .table-scroll{overflow:visible;border:1px solid #666} .section{padding:18px 0} } /* The checkbox was picking up .form-grid input{width:100%} and sitting in the middle of a full-width box, a hundred-odd pixels from the sentence it belongs to. Sized to itself, it sits against its text. */ .form-grid label.consent input[type=checkbox]{ width:24px;height:24px;flex:none;margin-top:1px;accent-color:#173B2C; } /* 88px under a heading is right when a lede sits there to fill it. On the contact page most headings are a bare line followed straight by body text, and that much air reads as the two being unrelated. */ .sec-head:not(:has(.lede)):not(:has(p)){ margin-bottom:clamp(20px,2.4vw,34px); } /* ---------- the hero, sized and spaced as one block ---------- The sub-line was set at the site's generic lede size, which is right in the middle of a page but far too quiet directly under a 46px headline — it read as a caption rather than the sentence that says what the firm is. It now scales with the headline. The spacing was also being set in four places that did not know about each other: the headline's em-based margin, the lede's 2.2rem, the actions' own 2.1rem and then the badge's 46px top margin on top of that, which put a 79px hole between the buttons and the badge. One rhythm, declared here. */ .hero{padding:clamp(96px,12vw,190px) 0 clamp(92px,11.5vw,176px)} .hero h1{ font-size:clamp(2.3rem,4.4vw,3.75rem); margin-bottom:clamp(38px,4.6vw,64px); } .hero-lede{ font-size:clamp(1.22rem,1.75vw,1.5rem); line-height:1.62; max-width:54ch; margin:0 auto clamp(34px,4vw,52px); } .hero-cta{margin-bottom:0} /* With the sub-line at 24px the hero's two actions were the smallest type in the block, which inverts the order they should be read in. Sized up to sit between the sub-line and the badge, and given room to breathe apart. */ .hero-cta .btn-lg{font-size:19px;padding:16px 30px} .hero-cta{gap:46px} /* The hero was padded almost equally top and bottom, which left the whole statement sitting low in the frame — below the optical centre, so the first thing on the page was empty sky. Weighted upwards: the block now starts high and the remaining air falls beneath it. */ .hero{padding:clamp(48px,5.4vw,84px) 0 clamp(72px,8.4vw,126px)} .hero-cta .btn-lg{font-size:23px;padding:14px 30px} /* The green dot said "live" but said nothing about who registered us. The shield-and-tick does both jobs, so the dot goes rather than sitting beside it as a second marker of the same thing. */ /* The two actions carry the page, so they hold their own against the sub-line rather than sitting under it as a footnote. */ .hero-cta .btn-lg{font-size:33px;padding:16px 34px} /* The registration line is the one factual claim in the hero. It was set at label weight, quiet enough to skim past; it now reads as a statement. */ /* The stroke is positioned against the button box, and .btn-lg puts 32px of padding on each side. On a filled control that is invisible; on the hero's two bare labels it meant the brush began a third of an inch before the first letter and ran out halfway through the word. With the box hugging its label the same 38%-to-90% sweep now starts and ends where the text does. */ .hero-cta .btn-lg{padding:12px 2px} .hero-cta{gap:54px} /* ---------- Login ---------- Green pill, white label. Written with background-color rather than the shorthand: .btn sets a brush stroke as its background-image, and the shorthand would reset repeat and position along with it — which is how the stroke ended up tiling down a button once before. background-image:none removes the paint explicitly instead. The green is the one already used by the registration mark, so the page carries a single green. */ .btn-login, .head-cta .btn-login, .mobile-cta .btn-login{ background-color:#1c5638;background-image:none; color:#fff;border-color:#1c5638;border-width:1.5px;font-weight:600; } .btn-login:hover, .head-cta .btn-login:hover, .mobile-cta .btn-login:hover{ background-color:#123f28;background-image:none; color:#fff;border-color:#123f28; } /* ---------- the hero on the pine plate ---------- The plate is a dark painting, so the hero inverts: everything that was ink on paper becomes light on the canopy. A deep forest ground sits under the image, which does two things — it carries the colour while the JPEG loads, and it means the type is legible even if the file is ever missing. Over the top, a vertical scrim, heaviest where the sub-line and the actions sit, because the painting's pale sky is at the top and would otherwise take the contrast out from under them. */ .hero{ background-color:#141d18; background-image: linear-gradient(180deg, rgba(12,20,16,.50) 0%, rgba(12,20,16,.60) 38%, rgba(12,20,16,.74) 74%, rgba(12,20,16,.80) 100%), url("/images/plates/10_pine_stand.jpg"); background-position:center 28%; background-size:cover; } .hero h1{color:#fff} .hero h1 em{color:#fff} .hero-lede{color:rgba(255,255,255,.88)} /* the actions take the pale stroke that was drawn for dark grounds */ .hero-cta .btn, .hero-cta .btn-primary, .hero-cta .btn-ghost{ color:#fff;background-color:transparent;border-color:transparent; background-image:var(--stroke-light); } .hero-cta .btn:hover, .hero-cta .btn-primary:hover, .hero-cta .btn-ghost:hover{ color:#fff;background-color:transparent; background-image:var(--stroke-light-deep); } /* the badge becomes a pane of the sky rather than a white chip stuck on it */ @media (max-width:640px){ /* the phone rule that lightened the plate was written for the old pale image; on this one it would wash the painting out entirely */ .hero{ background-image: linear-gradient(180deg,rgba(12,20,16,.44) 0%,rgba(12,20,16,.80) 100%), url("/images/plates/10_pine_stand.jpg"); } } /* Pure white was the one colour on the hero that came from nowhere in the painting — it sat on top of the greens rather than in them. The type now takes a pale sage drawn from the plate's own light passages: still bright enough to read cleanly against the scrim, but part of the picture. */ .hero h1,.hero h1 em{color:#e9f1e6} /* Milky white rather than the sage: the sub-line is the sentence that says what the firm is, and it should sit forward of the plate, not in it. Warm and very slightly off-full-white, so it reads as milk rather than glare. */ .hero-lede{color:#f4f2ec} .hero-cta .btn, .hero-cta .btn-primary, .hero-cta .btn-ghost, .hero-cta .btn:hover, .hero-cta .btn-primary:hover, .hero-cta .btn-ghost:hover{color:#e9f1e6} /* The hero strokes were the pale blue drawn for the old lake plate — the one cool note left on a page that is now entirely green. Repainted in the sunlit green of the fir tips, the same path and the same sweep. */ :root{ --stroke-hero:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2012'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1.00%205.90L5.95%204.35L10.90%204.00L15.85%204.00L20.80%204.00L25.75%204.00L30.70%204.00L35.65%204.00L40.60%204.00L45.55%204.00L50.50%204.00L55.45%204.00L60.40%204.00L65.35%204.00L70.30%204.00L75.25%204.00L80.20%204.00L85.15%204.00L90.10%204.00L95.05%204.00L100.00%204.00L104.95%204.00L109.90%204.00L114.85%204.00L119.80%204.00L124.75%204.00L129.70%204.00L134.65%204.00L139.60%204.00L144.55%204.00L149.50%204.00L154.45%204.00L159.40%204.00L164.35%204.00L169.30%204.00L174.25%204.00L179.20%204.00L184.15%204.00L189.10%204.00L194.05%204.35L199.00%205.90L199.00%206.10L194.05%207.65L189.10%208.00L184.15%208.00L179.20%208.00L174.25%208.00L169.30%208.00L164.35%208.00L159.40%208.00L154.45%208.00L149.50%208.00L144.55%208.00L139.60%208.00L134.65%208.00L129.70%208.00L124.75%208.00L119.80%208.00L114.85%208.00L109.90%208.00L104.95%208.00L100.00%208.00L95.05%208.00L90.10%208.00L85.15%208.00L80.20%208.00L75.25%208.00L70.30%208.00L65.35%208.00L60.40%208.00L55.45%208.00L50.50%208.00L45.55%208.00L40.60%208.00L35.65%208.00L30.70%208.00L25.75%208.00L20.80%208.00L15.85%208.00L10.90%208.00L5.95%207.65L1.00%206.10Z'%20fill='%239dc98d'/%3E%3C/svg%3E"); --stroke-hero-deep:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2012'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1.00%205.90L5.95%204.35L10.90%204.00L15.85%204.00L20.80%204.00L25.75%204.00L30.70%204.00L35.65%204.00L40.60%204.00L45.55%204.00L50.50%204.00L55.45%204.00L60.40%204.00L65.35%204.00L70.30%204.00L75.25%204.00L80.20%204.00L85.15%204.00L90.10%204.00L95.05%204.00L100.00%204.00L104.95%204.00L109.90%204.00L114.85%204.00L119.80%204.00L124.75%204.00L129.70%204.00L134.65%204.00L139.60%204.00L144.55%204.00L149.50%204.00L154.45%204.00L159.40%204.00L164.35%204.00L169.30%204.00L174.25%204.00L179.20%204.00L184.15%204.00L189.10%204.00L194.05%204.35L199.00%205.90L199.00%206.10L194.05%207.65L189.10%208.00L184.15%208.00L179.20%208.00L174.25%208.00L169.30%208.00L164.35%208.00L159.40%208.00L154.45%208.00L149.50%208.00L144.55%208.00L139.60%208.00L134.65%208.00L129.70%208.00L124.75%208.00L119.80%208.00L114.85%208.00L109.90%208.00L104.95%208.00L100.00%208.00L95.05%208.00L90.10%208.00L85.15%208.00L80.20%208.00L75.25%208.00L70.30%208.00L65.35%208.00L60.40%208.00L55.45%208.00L50.50%208.00L45.55%208.00L40.60%208.00L35.65%208.00L30.70%208.00L25.75%208.00L20.80%208.00L15.85%208.00L10.90%208.00L5.95%207.65L1.00%206.10Z'%20fill='%23c2e3ac'/%3E%3C/svg%3E"); } .hero-cta .btn, .hero-cta .btn-primary, .hero-cta .btn-ghost{background-image:var(--stroke-hero)} .hero-cta .btn:hover, .hero-cta .btn-primary:hover, .hero-cta .btn-ghost:hover{background-image:var(--stroke-hero-deep)} /* ---------- the plate, softened ---------- A background-image cannot be blurred on its own — filter would take the type with it — so the painting moves onto its own layer beneath the content. Two layers, not one: the plate is blurred, the scrim over it is not, which keeps the type crisp on an even ground. The blurred layer is inset by -20px so its own soft edges fall outside the hero's clip rather than showing as a pale seam. Both layers sit at z-index 0 with the content at 1 — deliberately not a negative z-index, which composites as an opaque black rectangle under a backdrop-filter ancestor in Chromium. */ .hero{background-image:none} .hero::before, .hero::after{content:"";position:absolute;z-index:0;pointer-events:none} /* The bleed has to clear the WIDEST blur any effect reaches, not the base one. Focus pull peaks at 14px, and a Gaussian samples roughly three radii, so -20px left the layer translucent at its own edges — which showed as a pale vertical seam down the right of the hero at the top of the cycle, and only then. -60px clears 14px with room to spare; scaling up never reveals an edge, so the cost is a slightly larger painted area and nothing else. */ .hero::before{ inset:-60px; background-image:url("/images/plates/10_pine_stand.jpg"); background-position:center 28%; background-size:cover; filter:blur(5px); } .hero::after{ inset:0; background-image:linear-gradient(180deg, rgba(12,20,16,.50) 0%, rgba(12,20,16,.60) 38%, rgba(12,20,16,.74) 74%, rgba(12,20,16,.80) 100%); } .hero>.wrap{position:relative;z-index:1} /* The headline in antique gold. Muted rather than yellow — on a green plate a bright gold reads as a warning colour, while a soft one reads as gilding. The sub-line stays sage so the gold is the only warm note in the hero. */ .hero h1,.hero h1 em{color:#DABD38} /* ---------- the header as glass ---------- The bar already carried a 14px backdrop blur; a 94% white fill was sitting on top of it, so none of it showed. The fill drops to a light frost and the blur does the work — the plate reads through the bar as a soft green. Frost rather than a dark tint: the logo and the nav are drawn in ink, and a dark bar would take both down with it. Once the page scrolls, content of unknown colour passes underneath, so the veil thickens to keep the nav legible over anything. */ .site-head{ background:rgba(255,255,255,.46); backdrop-filter:saturate(165%) blur(20px); -webkit-backdrop-filter:saturate(165%) blur(20px); } .site-head.is-stuck{ background:rgba(255,255,255,.88); } /* The bar is sticky but still in flow, so at the top of the page it had nothing behind it but white — a backdrop blur with nothing to blur. The banner sections now start underneath it and pay the height back as padding, so the header genuinely floats on the plate. */ :root{--head-h:70px} /* keep in step with .head-inner min-height */ .hero,.pbanner{margin-top:calc(var(--head-h) * -1)} .hero{padding-top:calc(clamp(52px,6vw,92px) + var(--head-h))} .pbanner{padding-top:calc(clamp(40px,4.8vw,74px) + var(--head-h))} /* ---------- the header, read against the plate ---------- Everything in the bar now sits on a frosted green rather than flat white, which cost it contrast. The nav goes to the deepest ink, its brush takes the fir green of the plate instead of the old lake blue, and the logo is darkened with a filter — it is an , so its internal greys cannot be reached with CSS, but they can be pulled down as a whole. */ :root{ --stroke-nav:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2012'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1.00%205.90L5.95%204.35L10.90%204.00L15.85%204.00L20.80%204.00L25.75%204.00L30.70%204.00L35.65%204.00L40.60%204.00L45.55%204.00L50.50%204.00L55.45%204.00L60.40%204.00L65.35%204.00L70.30%204.00L75.25%204.00L80.20%204.00L85.15%204.00L90.10%204.00L95.05%204.00L100.00%204.00L104.95%204.00L109.90%204.00L114.85%204.00L119.80%204.00L124.75%204.00L129.70%204.00L134.65%204.00L139.60%204.00L144.55%204.00L149.50%204.00L154.45%204.00L159.40%204.00L164.35%204.00L169.30%204.00L174.25%204.00L179.20%204.00L184.15%204.00L189.10%204.00L194.05%204.35L199.00%205.90L199.00%206.10L194.05%207.65L189.10%208.00L184.15%208.00L179.20%208.00L174.25%208.00L169.30%208.00L164.35%208.00L159.40%208.00L154.45%208.00L149.50%208.00L144.55%208.00L139.60%208.00L134.65%208.00L129.70%208.00L124.75%208.00L119.80%208.00L114.85%208.00L109.90%208.00L104.95%208.00L100.00%208.00L95.05%208.00L90.10%208.00L85.15%208.00L80.20%208.00L75.25%208.00L70.30%208.00L65.35%208.00L60.40%208.00L55.45%208.00L50.50%208.00L45.55%208.00L40.60%208.00L35.65%208.00L30.70%208.00L25.75%208.00L20.80%208.00L15.85%208.00L10.90%208.00L5.95%207.65L1.00%206.10Z'%20fill='%23417a4e'/%3E%3C/svg%3E"); --stroke-nav-deep:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2012'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1.00%205.90L5.95%204.35L10.90%204.00L15.85%204.00L20.80%204.00L25.75%204.00L30.70%204.00L35.65%204.00L40.60%204.00L45.55%204.00L50.50%204.00L55.45%204.00L60.40%204.00L65.35%204.00L70.30%204.00L75.25%204.00L80.20%204.00L85.15%204.00L90.10%204.00L95.05%204.00L100.00%204.00L104.95%204.00L109.90%204.00L114.85%204.00L119.80%204.00L124.75%204.00L129.70%204.00L134.65%204.00L139.60%204.00L144.55%204.00L149.50%204.00L154.45%204.00L159.40%204.00L164.35%204.00L169.30%204.00L174.25%204.00L179.20%204.00L184.15%204.00L189.10%204.00L194.05%204.35L199.00%205.90L199.00%206.10L194.05%207.65L189.10%208.00L184.15%208.00L179.20%208.00L174.25%208.00L169.30%208.00L164.35%208.00L159.40%208.00L154.45%208.00L149.50%208.00L144.55%208.00L139.60%208.00L134.65%208.00L129.70%208.00L124.75%208.00L119.80%208.00L114.85%208.00L109.90%208.00L104.95%208.00L100.00%208.00L95.05%208.00L90.10%208.00L85.15%208.00L80.20%208.00L75.25%208.00L70.30%208.00L65.35%208.00L60.40%208.00L55.45%208.00L50.50%208.00L45.55%208.00L40.60%208.00L35.65%208.00L30.70%208.00L25.75%208.00L20.80%208.00L15.85%208.00L10.90%208.00L5.95%207.65L1.00%206.10Z'%20fill='%232f5d3a'/%3E%3C/svg%3E"); } .nav-link{color:var(--ink-deep);font-weight:500;background-image:var(--stroke-nav)} .nav-link:hover,.nav-link.is-active{color:#000} .nav-link.is-active{background-image:var(--stroke-nav-deep)} .brand-logo{filter:brightness(.74) contrast(1.14) saturate(1.06)} /* ---------- a living plate ---------- Two motions, neither of them a slideshow. The first is a slow breath — 44 seconds from end to end, a few pixels of drift and four percent of scale — which is below the threshold where the eye tracks it as movement and above the one where the image reads as a flat print. The second is parallax: the crop shifts as the page scrolls, so the forest falls away more slowly than the type over it. That runs on background-position rather than transform, because transform is already carrying the breath and the two would overwrite each other. The bleed is -20px and the scale tops out at 1.08, so the drifting edges stay outside the hero clip at every point in the cycle. */ /* fxBreathe below replaces this; the effect set owns every keyframe now. */ .hero::before{ background-position:center calc(28% + var(--hero-par,0px)); animation:fxBreathe 16s ease-in-out infinite; will-change:transform; } @media (prefers-reduced-motion:reduce){ .hero::before{animation:none;background-position:center 28%} } /* ---------- the plate in motion: focus pull ---------- One layer, one cycle. The plate drifts between sharp and soft over 11 seconds — 2px to 16px of blur — and nothing else moves. The sunbeam that used to ride on top of this, and the overlay it needed, are gone. The scroll parallax is separate and still runs: it shifts the crop, not the focus, and lives on background-position so the two never contend for the same property. */ @keyframes fxFocusSoft{ 0%,100%{filter:blur(2px)} 50% {filter:blur(16px)} } .hero::before{ transform:scale(1.08); animation:fxFocusSoft 11s ease-in-out infinite; } @media (prefers-reduced-motion:reduce){ .hero::before{animation:none} } /* The stroke is Marker, fine: a flat band of even weight whose ends round off over the last few units. It is written into the eight stroke variables above rather than layered on as a class, so there is one definition of the stroke and nothing to switch between. */ /* ---------- the hero in plain white ---------- The sub-line was a warm milky white and the actions a pale sage, both drawn from the plate. Against a green ground those tints read as slightly dirty rather than deliberate. Pure white where white is what is meant — the headline keeps its gold, and the shield keeps its green, so the hero holds three colours and no half-tones. */ .hero-lede{color:#fff} .hero-cta .btn, .hero-cta .btn-primary, .hero-cta .btn-ghost, .hero-cta .btn:hover, .hero-cta .btn-primary:hover, .hero-cta .btn-ghost:hover{color:#fff} /* ================= the landing header ================= On the home page, before anything has been scrolled, the bar is not there at all: no fill, no blur, no rule — the plate runs unbroken from the top of the window and the nav sits directly on it in white. The moment the page moves, is-stuck brings back the frosted bar, the ink nav and the ink wordmark. Everything transitions, so the change reads as the bar arriving rather than the colours flipping. Scoped to the home page on purpose: every other page opens on a pale banner, where white nav type would be unreadable. */ .brand{position:relative;display:inline-flex;align-items:center} .brand-logo,.brand-logo-light{transition:opacity .34s var(--ease)} .brand-logo-light{ position:absolute;left:0;top:50%;transform:translateY(-50%); width:100%;height:auto;opacity:0;pointer-events:none;filter:none; } body.page-index .site-head:not(.is-stuck){ background:transparent; backdrop-filter:none;-webkit-backdrop-filter:none; border-bottom-color:transparent;box-shadow:none; } body.page-index .site-head:not(.is-stuck) .brand-logo{opacity:0} body.page-index .site-head:not(.is-stuck) .brand-logo-light{opacity:1} /* the nav in white, with the pale stroke drawn for dark grounds */ body.page-index .site-head:not(.is-stuck) .nav-link{ color:#fff;background-image:var(--stroke-light); } body.page-index .site-head:not(.is-stuck) .nav-link:hover, body.page-index .site-head:not(.is-stuck) .nav-link.is-active{ color:#fff;background-image:var(--stroke-light-deep); } /* the two pills need an edge of their own once the bar behind them is gone */ body.page-index .site-head:not(.is-stuck) .btn-cta{ box-shadow:0 8px 26px -10px rgba(0,0,0,.55); } body.page-index .site-head:not(.is-stuck) .btn-login{ box-shadow:0 8px 26px -10px rgba(0,0,0,.45); } /* ---------- the statutory disclosure, as footer small print ---------- It used to be a full-width section with an h2, which gave it the weight of a chapter of the site. It is a legal notice: it belongs at the foot of the page, set small, above the copyright line. The heading stays an h2 in the markup — the document outline should still carry it, and a screen reader should still be able to jump to it — but it is sized as a label rather than a section head. Colours are ink-on-paper: this footer is a pale tint, not a dark slab. */ .foot-risk{ margin-top:clamp(30px,4vw,48px); padding-top:clamp(24px,3vw,34px); border-top:1px solid var(--line); } .foot-risk h2{ font-size:10px;letter-spacing:.22em;text-transform:uppercase; color:var(--muted);font-weight:600;margin:0 0 14px;line-height:1.4; } .foot-risk p{ font-size:11.8px;line-height:1.7;color:var(--muted); margin:0 0 10px;max-width:none; } .foot-risk p:last-child{margin-bottom:0} .foot-risk strong{color:var(--ink-2);font-weight:600} .foot-risk a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px} .foot-risk a:hover{color:var(--brand)} /* the copyright bar already draws a rule; two in a row reads as a mistake */ .foot-risk + .foot-bar{border-top:0;margin-top:26px;padding-top:0} /* On the transparent bar both pills are white on the plate — a black pill and a green one floating over a photo read as two stray objects. They swap back to their own colours as soon as the frosted bar arrives, so the change is part of the same transition as the nav and the wordmark. */ body.page-index .site-head:not(.is-stuck) .btn-cta, body.page-index .site-head:not(.is-stuck) .btn-login, body.page-index .site-head:not(.is-stuck) .btn-cta:hover, body.page-index .site-head:not(.is-stuck) .btn-login:hover{ background-color:#fff;background-image:none; color:var(--ink-deep);border-color:#fff; } /* The headline larger, and the gold given depth: a gradient clipped to the glyphs runs from a lit highlight through the brand gold into a deep bronze, so the letters catch light across their width the way struck metal does rather than sitting flat. The plain colour underneath is the fallback for anything that cannot clip a background to text. */ .hero h1{font-size:clamp(3.1rem,6.6vw,5.9rem)} .hero h1,.hero h1 em{ color:#C9A227; background-image:linear-gradient(96deg, #F6E3A8 0%,#E7C766 18%,#C9A227 44%,#9C7614 70%,#E3C264 88%,#F3DE9F 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; filter:drop-shadow(0 1px 0 rgba(74,52,8,.34)) drop-shadow(0 10px 26px rgba(0,0,0,.30)); } @supports not (background-clip:text){ .hero h1,.hero h1 em{-webkit-text-fill-color:#D8B44A;color:#D8B44A} } /* The gradient was set on the h1 AND on the em inside it, so the em became its own painting box and the ramp restarted at "Lasts." — two golds in one sentence. The gradient belongs to the h1 alone; the em keeps only the transparent fill, so it is painted as part of the parent's text and the ramp runs unbroken across the whole line. */ .hero h1 em{ background-image:none; background:none; -webkit-text-fill-color:transparent; filter:none; } /* Bolder on hover. The weight is the only thing that changes — the pill keeps its width, because a bolder label is wider and the button would otherwise nudge its neighbour along the bar. */ .head-cta .btn-cta,.head-cta .btn-login, .mobile-cta .btn-cta,.mobile-cta .btn-login{ transition:font-weight .18s var(--ease),background-color .3s var(--ease),color .3s var(--ease); } .head-cta .btn-cta:hover,.head-cta .btn-login:hover, .mobile-cta .btn-cta:hover,.mobile-cta .btn-login:hover{ font-weight:800; } /* On the landing bar only, the white pills warm to a golden green on hover — the headline's gold running into the fir green of the plate, so the hover colour comes from the two colours already on screen rather than a third. Scoped to :not(.is-stuck): once the frosted bar arrives the pills are back to black and dark green, and their own hovers apply. */ body.page-index .site-head:not(.is-stuck) .btn-cta:hover, body.page-index .site-head:not(.is-stuck) .btn-login:hover{ /* muted: the same gold-into-green, desaturated and lightened so it reads as the white pill warming rather than a second, louder button */ background-color:#CFC48A; background-image:linear-gradient(104deg,#EBDCA8 0%,#D6CE96 48%,#AFC098 100%); color:#12210F;border-color:transparent; box-shadow:0 8px 20px -12px rgba(0,0,0,.4); } /* ---------- the wordmark at full bleed ---------- The last thing on the page: the mark drawn across the whole window, the way a colophon closes a book. It sits outside .wrap so it is not held to the content measure, and it is aria-hidden — the brand link at the top of the footer already names the firm, and a screen reader should not hear it twice. Held slightly back from full strength: at this size a solid mark would out- weigh everything above it, and the point is a closing note, not a headline. */ .foot-mark{ /* the wordmark carries its own whitespace inside the SVG, so the margin here was being added to space that was already there */ margin-top:clamp(8px,1.2vw,18px); padding:0 clamp(16px,3vw,44px); line-height:0; /* Negative margin on the img pulls the mark over the legal row; never intercept clicks meant for Privacy / Terms / Sitemap. */ pointer-events:none; } .foot-mark img{ display:block;width:100%;height:auto; opacity:.92; pointer-events:none; } .site-foot > .wrap{position:relative;z-index:2} @media (max-width:640px){ .foot-mark{padding:0 14px;margin-top:30px} } /* ---------- the ridge behind the wordmark ---------- A green ridge line sits behind the closing mark, anchored to the bottom of the page so the letters rise out of it. It is held well back — low opacity and a gradient mask that fades it out toward the top — so the wordmark reads as the sharp thing and the ridge as atmosphere behind it. The mark itself is lifted into its own layer so it paints above the ridge; z-index 1 against 0, never a negative index, which composites as a black rectangle under a backdrop-filter ancestor in Chromium. */ .foot-mark{position:relative;isolation:isolate} .foot-mark::before{ content:"";position:absolute;z-index:0;pointer-events:none; left:0;right:0;bottom:-2px;height:62%; background:url("/images/ridge-green.png") center bottom / 100% 100% no-repeat; opacity:.85; -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 46%,#000 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 46%,#000 100%); } .foot-mark img{position:relative;z-index:1} @media (max-width:640px){ .foot-mark::before{height:56%;opacity:.42} } /* ---------- the plate deepens as it softens ---------- The scrim is a fixed gradient; the darkening rides underneath it as an animated background-colour, which is interpolatable in a way a gradient is not. Same 11s cycle and the same easing as the blur, with no delay, so the green reaches its deepest exactly as the plate reaches its softest. The plate now goes all the way to black at the peak rather than to a deep forest green: the picture does not merely recede, it goes out. The headline keeps its gold and the actions their white, so the hero at its darkest is three marks on black and nothing else. */ @keyframes heroDeepen{ 0%,100%{background-color:rgba(0,0,0,0)} 50% {background-color:rgba(0,0,0,1)} } .hero::after{ animation:heroDeepen 11s ease-in-out infinite; } @media (prefers-reduced-motion:reduce){ .hero::after{animation:none} } /* ---------- the wordmark over a drawn range ---------- The glow behind the mark was a warm amber, and against the pale footer it cast the whole area faintly red. Replaced with a cool, almost colourless lift — the sense of light behind the letters survives without the tint. The ridge is now a black line drawing rather than the green painted one, in the same open line as the belief sketches, and held well back so the wordmark stays the sharp thing in front of it. */ .foot-mark::before{ content:"";position:absolute;z-index:0;pointer-events:none; left:0;right:0;bottom:0;height:96%; background:radial-gradient(58% 86% at 50% 104%, rgba(246,248,247,.95) 0%, rgba(240,244,242,.62) 30%, rgba(238,242,240,0) 68%); -webkit-mask-image:none;mask-image:none; opacity:1;filter:none; } .foot-mark::after{ content:"";position:absolute;z-index:0;pointer-events:none; left:0;right:0;bottom:-2px;height:66%; background:url("/images/ridge-black.png") center bottom / 100% 100% no-repeat; opacity:.30;filter:blur(4.5px); -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 40%,#000 100%); mask-image:linear-gradient(180deg,transparent 0%,#000 40%,#000 100%); } /* the mark itself rises as it reveals, as though clearing the ridge line */ .foot-mark.rv{transform:translateY(46px)} .foot-mark.rv.in{transform:none} .foot-mark{transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)} /* The footer kept 30px of padding under its last child. With the full-bleed mark now sitting there, that padding read as a white strip below the letters. The mark runs to the very edge of the page instead. */ .site-foot{padding-bottom:0} /* The mark starts 46px low and rises into place. A transform does not affect layout but it does create scrollable overflow, and that overflow was the white band below the footer — visible before the reveal fired, and left as empty page height afterwards. Containing it here costs nothing: the footer has no other content that needs to escape its box. */ .site-foot{overflow:hidden} /* ---------- the beliefs, as drawn plates ---------- Card boxes replaced by centred columns: a sketch on a tinted disc, a small label above the belief, the belief itself set large, and the note beneath. Nothing is boxed — the disc and the type carry the structure. */ .belief{text-align:center;background:none;border:0;box-shadow:none;padding:0} .belief-ico{ width:132px;height:132px;margin:0 auto 20px;position:relative; display:grid;place-items:center;color:var(--ink-deep); } /* the disc sits behind the drawing, in the site's green rather than the reference's blue, and only three quarters the size so the line work overshoots it the way it does in a sketchbook */ .belief-ico::before{ content:"";position:absolute;z-index:0; width:96px;height:96px;border-radius:50%; background:radial-gradient(circle at 38% 32%,#EAF3EA 0%,#DDEBDD 100%); } .belief-ico .sk{position:relative;z-index:1;width:118px;height:118px;display:block} .belief-label{ margin:0 0 10px;font-size:10.6px;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:var(--muted); } .belief h3{ margin:0 0 12px;font-size:clamp(1.16rem,1.5vw,1.42rem);font-weight:500; line-height:1.3;color:var(--ink-deep);letter-spacing:-.004em; } .belief-note{ margin:0 auto;max-width:30ch;font-size:13.6px;line-height:1.65;color:var(--ink-2); } @media (max-width:640px){ .belief-ico{width:110px;height:110px;margin-bottom:16px} .belief-ico::before{width:80px;height:80px} .belief-ico .sk{width:100px;height:100px} } /* ---------- the section heading on the home page ---------- Same face, more presence: set larger with the tracking pulled in, and given a short brush rule beneath — the site's own stroke, at a fraction of its usual width, so the heading is marked rather than decorated. Scoped to the home page: the inner pages carry left-aligned heads where a centred rule would sit off-axis. */ .sec-head h2{ font-size:clamp(2.1rem,3.2vw,2.9rem); letter-spacing:-.018em; line-height:1.14; color:var(--ink-deep); margin-bottom:0; } /* The rule follows its heading rather than always centring: as an inline-block it obeys the text-align of the block it sits in, so the left-aligned heads on the inner pages get a left-aligned rule without needing a modifier class. That is what kept this scoped to the home page before. */ .sec-head::after{ content:"";display:inline-block; width:74px;height:8px;margin:22px 0 0; background:var(--stroke-nav) no-repeat center / 100% 8px; opacity:.75; } /* ---------- the beliefs heading ---------- One word in the hand, in the fir green, the same move the hero headline makes. The rest of the section goes back to the sans in ink: the drawing and the heading carry the character, the copy stays plain so it reads. */ .sec-head h2 em{ font-family:var(--hand);font-style:normal;font-weight:600; color:#173B2C;font-size:1.16em;letter-spacing:0; } .belief h3{ font-family:var(--sans); font-size:clamp(1.16rem,1.5vw,1.42rem); font-weight:500;line-height:1.3;letter-spacing:-.004em; color:var(--ink-deep); } .belief-note{color:var(--ink-2)} .belief-label{color:var(--muted)} /* ---------- the beliefs on moving water ---------- The loop fills the section and is blurred hard, which does two things: it pushes the motion behind the reading plane so the eye is not pulled off the copy, and it hides the fact that the frames were thinned three to one. A wash of the page colour sits over it. Without that the type would be asked to hold its own against a moving picture, which no amount of weight will win — the wash gives the words clean ground and lets the loop read as light behind them. The layer is fixed in place rather than repeated: one 720 square scaled to cover, so the water reads as one body rather than a tiled pattern. */ body.page-index .section--paper{position:relative;overflow:hidden;isolation:isolate} body.page-index .section--paper > .wrap{position:relative;z-index:2} /* The loop is 4.9 MB — two-thirds of everything this site ships — and it is decoration under a white wash and a 34px blur. A background image inside a media query is never requested while the query does not match, so it is fetched only on screens wide enough to be a desktop; phones get the still wash instead and the section simply stops moving. */ body.page-index .section--paper::before{ content:"";position:absolute;z-index:0;pointer-events:none;inset:-40px; background:radial-gradient(120% 90% at 50% 0%,#EAF1EA 0%,#DCE7DC 60%,#D3E0D4 100%); filter:blur(34px) saturate(.82); opacity:.6; } @media (min-width:900px){ body.page-index .section--paper::before{ background:url("/images/beliefs-loop.gif") center / cover no-repeat; } } /* the wash that gives the type its ground */ body.page-index .section--paper::after{ content:"";position:absolute;z-index:1;pointer-events:none;inset:0; background:linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(255,255,255,.82) 42%, rgba(255,255,255,.76) 100%); } /* the middle wave layer has nothing left to draw */ body.page-index .section--paper > .water{display:none} @media (prefers-reduced-motion:reduce){ /* a still frame is what a paused GIF gives, which is the right answer here */ body.page-index .section--paper::before{filter:blur(26px) saturate(.7);opacity:.4} } /* The section sits on a moving picture behind a wash, and mid-greys go soft against it. Everything in the beliefs steps down toward ink so the copy holds its own without needing more weight. */ .belief h3{color:#0B1116} .belief-note{color:#232E36} .belief-label{color:#2B3840} /* ---------- the registration band ---------- A deep green strip carrying the registration as a struck seal. Everything in it is a fact already held in config — the number, the grant date, the validity, the LLPIN — and the qualifying line SEBI expects alongside any display of registration sits directly beneath, at small size but not hidden. The number is the object here, so it is set largest and in tabular figures; everything else is a label around it. */@media (max-width:520px){ .reg-seal-facts li{flex-direction:column;gap:2px} .reg-seal-facts b{text-align:left} } /* ---------- the struck seal ---------- */.seal{ width:clamp(196px,20vw,258px);height:auto;display:block; filter:drop-shadow(0 3px 5px rgba(20,14,2,.34)) drop-shadow(0 22px 44px rgba(20,14,2,.44)); } /* ---------- the seal on the seam ---------- It sits between the hero and the beliefs rather than inside either, so the section boundary passes through its middle: the upper half reads against the plate, the lower half against the section below, and scrolling walks the join down through it. Both sections clip their overflow, which is why this cannot live in one of them — half the seal would simply be cut away. A zero-height block on the seam owns no layout space and pushes nothing around; the seal is lifted by half its own height to straddle the line. The dark half needs a heavier shadow than the light half, so the shadow is set for the plate and the paper below is bright enough to carry it. */ /* align-items defaults to stretch, so as a flex item in a zero-height box the seal was stretched to 0 tall and vanished. flex-start lets it keep its own height, and the square aspect-ratio gives it one to keep. */ .seal-seam{ position:relative;z-index:5;height:0; display:flex;justify-content:center;align-items:flex-start; pointer-events:none; } .seal-seam .seal{ /* The engraving is at its geometric limit inside the circle — twelve characters on one centred line can only grow so far before the chord runs out. So the badge itself grows instead, which makes every mark on it physically larger without touching the proportions. */ width:clamp(232px,21.5vw,308px);aspect-ratio:280/350;height:auto; /* the seam runs through the coin, not the box: with the tails hanging below, the coin centres at y=120 of 330 */ transform:translateY(-37.1%); /* a flat mark needs a flat shadow: enough to lift it off both grounds, not so much that it pretends to be an object */ /* a dimensional object needs a shadow that agrees with its own light: cast down and to the right, since the coin is lit from the top left */ /* a softer cast: wider and lighter, so the coin sits on the page rather than being stamped onto it */ filter:drop-shadow(2px 5px 9px rgba(28,18,2,.24)) drop-shadow(8px 22px 44px rgba(28,18,2,.3)); } /* the heading below needs to clear the half that hangs into it */ /* The badge hangs into this section, and with the ribbon tails it now reaches about 250px below the seam — the old padding was set for a coin that ended at 120. The heading needs to clear the tails, not the disc. */ body.page-index .seal-seam + .section--paper{padding-top:clamp(196px,16.5vw,244px)} /* ---------- offerings ---------- One card, not a grid: there is one strategy, and a lone card in a three-column rack would only advertise the two that are missing. It is sized as a plate — wide, generous, with the specification set as a run of term-and-value pairs beneath the description rather than as a table. */ .offer-band{background:var(--tint-4)} .offer-card{ margin:0; /* squared off: a 16px radius on a plate this size reads as a soft tile, and the content inside it is all straight rules and columns */ background:#fff;border-radius:14px; padding:clamp(30px,4vw,52px); box-shadow:0 1px 2px rgba(20,32,24,.05),0 30px 60px -34px rgba(20,32,24,.42); border:1px solid rgba(20,32,24,.07); } .offer-eyebrow{ margin:0 0 7px;font-size:10.4px;font-weight:700;letter-spacing:.2em; text-transform:uppercase;color:#213B28; } .offer-card h3{ margin:0 0 16px;font-size:clamp(1.5rem,2.4vw,2.15rem);font-weight:500; letter-spacing:-.012em;line-height:1.16;color:var(--ink-deep); } .offer-line{ margin:0;max-width:64ch;font-size:clamp(1rem,1.2vw,1.08rem); line-height:1.68;color:#232E36; } .offer-specs{ display:grid;grid-template-columns:repeat(4,1fr);gap:22px; margin:clamp(26px,3vw,36px) 0 0;padding:clamp(24px,2.8vw,30px) 0 0; border-top:1px solid rgba(20,32,24,.10); } .offer-specs div{margin:0} .offer-specs dt{ font-size:10.2px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:var(--muted);margin:0 0 7px; } .offer-specs dd{margin:0;font-size:14.6px;color:var(--ink-deep);font-weight:500} .offer-actions{ display:flex;flex-wrap:wrap;gap:34px;align-items:center; margin-top:clamp(28px,3.2vw,38px); } @media (max-width:720px){ .offer-specs{grid-template-columns:repeat(2,1fr);gap:18px} } @media (max-width:460px){ .offer-specs{grid-template-columns:1fr} .offer-actions .btn{font-size:19px} } /* ---------- the turning coin ---------- Six frames stacked in one image, stepped through with steps(6) so each frame is held rather than blended — a linear tween between them would read as a sliding picture instead of a coin turning. It sits on the seam between the beliefs and the offerings, on a zero-height block like the medal above it, so it belongs to both sections and carries the eye from one into the next. The last frame of the cycle is the first frame again in the artwork, so the loop closes on itself; the sprite is scrolled by exactly five cells and steps() lands on each one squarely. */ /* Off to the right rather than centred: down the middle it fell straight through the headings of both sections. The wrap measure keeps it inside the content column instead of hard against the window edge. */ .coin-seam{ position:relative;z-index:4;height:0; display:flex;justify-content:flex-end;align-items:flex-start; padding-right:clamp(24px,9vw,150px); pointer-events:none; } .coin-flip{ display:block;width:clamp(76px,7vw,104px);aspect-ratio:295/268; background:url("/images/coin-flip.png") 0 0 / 100% 600% no-repeat; /* two animations on different properties: the sprite steps through its six frames while the transform carries it down across the seam. They run at unrelated speeds on purpose, so the coin does not appear to land on the same face every time. */ animation:coinTurn 1.5s steps(6) infinite, coinFall 8.4s linear infinite; filter:drop-shadow(0 10px 18px rgba(20,32,24,.28)); } /* With background-size 600%, a percentage position is measured against (box height - image height) = -5 box heights, so the six frames sit at 0, 20, 40, 60, 80 and 100 per cent — not 0 to 600. steps(6) emits the start of each interval, so running to 120% lands on exactly those six and never shows the end value. Scrolling to 600% overshot the sprite and left four of every six frames blank. */ @keyframes coinTurn{ from{background-position-y:0%} to {background-position-y:120%} } @media (prefers-reduced-motion:reduce){ .coin-flip{animation:none} } /* the fall: begins above the seam inside the beliefs, ends below it inside the offerings, fading at both ends so it enters and leaves rather than popping. The seam block owns no height, so none of this moves the page. */ /* The drop now runs the whole way: it starts inside the beliefs and ends level with the foot of the offering card, measured at 715px from the seam. Longer travel needs a longer cycle or it would race — 8.4s covers it at a speed that reads as falling rather than dropping. */ @keyframes coinFall{ 0% {transform:translateY(-300px);opacity:0} 9% {opacity:1} 88% {opacity:1} 100%{transform:translateY(730px);opacity:0} } /* ---------- the offering card as a vertical plate ---------- Portrait rather than landscape: the content is a sequence — category, name, description, specification, actions — and a tall column reads down that sequence, where a wide plate left the eye hunting across half-empty rows. */ /* Pared back to roughly 60% of its former bulk: tighter padding, a smaller type scale and a narrower measure. Nothing is hidden — the same content, set closer. */ .offer-card{max-width:none;padding:clamp(22px,2.4vw,28px)} .offer-card h3{font-size:clamp(1.2rem,1.6vw,1.42rem);margin-bottom:11px} .offer-line{max-width:none;font-size:13.6px;line-height:1.6} .offer-specs{grid-template-columns:repeat(2,1fr);gap:14px;margin-top:18px;padding-top:16px} /* Side by side, and closer than the 34px the hero uses: in a 470px card that gap would push the second action against the edge. */ /* The two actions stay on one line at every width. wrap would drop the second beneath the first on a narrow card, so the row never wraps and the labels never break; the gap gives way instead. */ .offer-actions{ flex-direction:row;align-items:center;flex-wrap:nowrap; gap:clamp(12px,3vw,22px);margin-top:20px; } .offer-actions .btn{white-space:nowrap} @media (max-width:520px){ .offer-card{max-width:none} } /* ---------- the offering rack ---------- Three across: what is offered, then what is planned. The planned two are veiled rather than hidden — the shape of the card, its name and its status read plainly, and only the particulars are out of focus. The veil is a visual treatment, not a security measure: the values are still in the page source and still reach a screen reader unless marked otherwise, which is why the veiled block is aria-hidden. Do not put anything genuinely confidential behind it. */ .offer-rack{ display:grid;grid-template-columns:repeat(3,1fr);gap:22px; max-width:1080px;margin:0 auto;align-items:stretch; } .offer-rack .offer-card{display:flex;flex-direction:column} .offer-card--planned{background:#FBFBFA;border-style:dashed;border-color:rgba(20,32,24,.16)} .offer-tag{ margin:0 0 10px;display:inline-block;align-self:flex-start; padding:4px 10px;border-radius:999px; background:rgba(201,162,39,.14);color:#46330A; font-size:9.6px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; } /* The planned names were greyed to signal their state, but the Planned tag already does that, and two different treatments for one message left the three headings looking like different type. All three now set identically; the tag carries the distinction on its own. */ .offer-card--planned h3{color:var(--ink-deep)} .offer-veiled{ filter:blur(4.5px); opacity:.72; user-select:none;pointer-events:none; } .offer-veiled .offer-specs{border-top-color:rgba(20,32,24,.14)} @media (max-width:900px){ .offer-rack{grid-template-columns:1fr;max-width:470px} } /* Live reads in the site's green against Planned's gold, so the state of each card is legible from the tag colour before the word is read. */ /* Kelly green: brighter and truer than the site fir, which is the point — a live tag should read as live. Deepened a little from pure kelly so it still passes as body-size text on the pale card. */ .offer-tag--live{ background:rgba(76,187,23,.16);color:#163C08; } .offer-card-head .offer-tag{margin-bottom:12px} /* ---------- the hero, opened up ---------- The statement, the sub-line and the actions were each spaced by a rule set at a different time, so the block read as three things stacked rather than one. One rhythm, wider at every join, and a narrower measure on the sub-line so it breaks into even lines instead of one long one and a short remainder. text-wrap:balance evens the ragged edge where it is supported and is simply ignored where it is not — the max-width does the real work. */ /* The hero centres its content in the padding box, so unequal padding offsets it: 116 top against 216 bottom was lifting the block 50px above centre and crowding it under the header. Near-equal padding lets it sit where the eye expects, a little lower down the frame. */ .hero{padding:clamp(64px,7vw,112px) 0 clamp(64px,7.4vw,118px)} .hero h1{margin-bottom:clamp(24px,2.6vw,36px)} .hero-lede{ max-width:49ch; line-height:1.54; margin:0 auto clamp(42px,4.8vw,62px); text-wrap:balance; } /* ---------- the sub-line spans the header ---------- Set to the same measure as the header itself: it begins where the wordmark begins and ends where the Contact Us button ends, so the hero shares one set of edges with the bar above it rather than sitting in a narrower column of its own. Worth knowing: that is about 95 characters a line, well past the 45-75 that reads comfortably. It works here only because the sentence is short enough to take two lines — it would not survive a third. */ .hero-inner{max-width:none} .hero-lede{max-width:none;margin-inline:0} /* ---------- the hero fills the screen ---------- min-height in svh, not vh: on a phone, vh is the viewport with the browser chrome retracted, so a 100vh hero is taller than what you can actually see and the badge below the fold never resolves. svh is the small viewport — what is visible with the chrome showing — so the section fits on arrival. vh is declared first as the fallback for anything that predates svh. The block centres rather than sitting on padding, so the hero holds its composition at any height from a laptop to a tall desktop. */ .hero{ min-height:100vh; min-height:100svh; display:flex; align-items:center; } .hero > .wrap{width:100%} /* The sub-line breaks over three lines and is set larger to do it. At the full header width two lines meant ~95 characters each; three lines at this size brings it to about 63, which is inside the range that reads comfortably — so the wider measure and the better line length arrive together. */ .hero-lede{ /* Sized so the break falls after three lines at the full header width: at 1280 that is ~32px, which puts about 63 characters on a line — inside the comfortable range, where the two-line version sat at 91. */ font-size:clamp(1.28rem,2.5vw,2.15rem); line-height:1.6; max-width:none; } /* ---------- stewardship ---------- Two columns on a cream plate: the statement and its attribution on the left, the working detail on the right. The gold arrives as a wash out of the bottom-right corner rather than as a fill, so the card stays paper with light falling across it — and the gold is the badge's gold, not a fourth colour. Overflow is hidden because the wash is drawn oversized and rotated; it needs to bleed past the corner and be cut by it. */ /* The pull-quote this styled has been removed, and the element that took its place is a blockquote too — so this rule went on winning at (0,1,1) against .steward-note at (0,1,0), holding her sentence to a 14ch measure and nine lines. Nothing uses it now. */ .steward-sign{ font-family:var(--hand);font-size:clamp(2rem,3.2vw,2.7rem); color:#14382A;margin:clamp(48px,7vw,104px) 0 6px;line-height:1; } .steward-role{margin:0;font-size:13.6px;color:#232E36} .steward-lead{ margin:0 0 clamp(28px,3.4vw,44px); font-size:clamp(1.02rem,1.35vw,1.22rem);line-height:1.5;font-weight:500; color:#14382A;max-width:30ch; } .steward-intro{margin:0 0 18px;font-size:14.4px;color:#232E36} .anchor-list{list-style:none;margin:0;padding:0;display:grid;gap:14px} .anchor-list li{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;margin:0} .anchor-star{width:15px;height:15px;fill:#C9A227;margin-top:3px} .anchor-list span{font-size:14.8px;line-height:1.45;color:#243038} @media (max-width:820px){ .steward-card{grid-template-columns:1fr;gap:40px} .steward-sign{margin-top:34px} } /* The personal note sits between the statement and the signature, set smaller and in the ink used for body copy — it is her voice, not a second headline, and the space that used to hold the quote and the signature apart now holds this instead. */ .steward-note{ margin:clamp(26px,3.4vw,40px) 0 0; max-width:34ch; font-size:clamp(.95rem,1.15vw,1.06rem); line-height:1.66; color:#232E36; } .steward-note + .steward-sign{margin-top:clamp(26px,3vw,40px)} /* Her sentence is now the statement rather than a note beneath one, so it takes the display size the quote had — stepped down, because it runs to about 150 characters where the old line ran to 40, and set on a measure that keeps it to four lines. It is a blockquote in the markup: it is her speaking. */ .steward-note{ margin:0; /* 24ch on a 150-character sentence gave nine lines and a card half a page deep. It fills its column instead, at a size that settles to five. */ max-width:none; font-size:clamp(1.16rem,1.75vw,1.56rem); font-weight:300; line-height:1.44; letter-spacing:-.008em; color:#14382A; } .steward-note + .steward-sign{margin-top:clamp(44px,6vw,88px)} /* ---------- stewardship, in the site's own clothes ---------- The cream plate and the gold corner wash came from the reference, and on this site they read as a visitor from another design: nothing else here is cream, and gold appears only on the badge and the headline. The card now matches the offering card exactly — same radius, same hairline, same shadow — on a barely-green ground taken from the belief discs. The gold that remains is the five stars. One accent, used once. */ .steward{background:var(--paper)} .steward-card{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px); max-width:1080px;margin:0 auto; padding:clamp(34px,5vw,64px); border-radius:14px; background:#F7FAF7; border:1px solid rgba(20,32,24,.08); box-shadow:0 1px 2px rgba(20,32,24,.05),0 30px 60px -34px rgba(20,32,24,.42); } .steward-note{color:var(--ink-deep)} .steward-role{color:var(--muted)} .steward-lead{color:var(--ink-deep)} .steward-intro{color:var(--muted)} .anchor-list span{color:var(--ink-2)} .steward-sign{color:#173B2C} @media (max-width:820px){ .steward-card{grid-template-columns:1fr;gap:40px} } /* ---------- stewardship in gold ---------- The card carries the gold now: a warm ground running from near-cream into the badge's own gold at the far corner, with a gold hairline rather than the grey one. The green type is kept — gold behind green is the pairing the hero already makes, and swapping the text to a warm colour too would leave the card with nothing to hold it. Her line is set in italic: it is speech, and the italic is what marks it as hers rather than the site's voice. */ .steward-card{ background:linear-gradient(148deg,#FDF8EA 0%,#F8EDD2 46%,#EFDCA8 100%); border-color:rgba(201,162,39,.42); box-shadow:0 1px 2px rgba(90,64,12,.06),0 30px 60px -34px rgba(90,64,12,.4); } .steward-note{ font-style:italic; color:#173B2C; } .steward-lead{color:#173B2C} .steward-intro{color:#2E3A30} .anchor-list span{color:#2A3A31} .steward-role{color:#2E3A30} /* Her line goes into the drawing hand and takes weight with it. Caveat has no italic — the hand IS the italic — so the earlier font-style is dropped rather than left to synthesise a slant, which Caveat renders badly. */ .steward-note{ font-family:var(--hand); font-style:normal; font-weight:700; font-size:clamp(1.5rem,2.5vw,2.15rem); line-height:1.34; letter-spacing:0; } /* the finer mark needs a touch more room to read at this size */ .anchor-star{width:16px;height:16px;margin-top:2px} /* The action sits under the card, centred on it — outside the plate rather than inside, so the card stays a statement and the invitation follows it. */ .steward-cta{ display:flex;justify-content:center; margin-top:clamp(34px,4vw,52px); } /* Sized to match the hero's actions, and stroked in the nav's fir green rather than the pale lake blue the buttons carry by default — on a white section the blue reads as a stray colour, where the green belongs to the page. The band grows with the type or it would look thin under 27px letters. */ .steward-cta .btn{ font-size:27px; padding:14px 4px; background-image:var(--stroke-nav); background-size:38% 15px; } .steward-cta .btn:hover{ background-image:var(--stroke-nav-deep); background-size:90% 15px; } /* ---------- notes falling past the founder's card ---------- One down each side, drawn as a small banknote and clipped by the section, so they enter at the top and leave at the bottom rather than appearing and vanishing mid-air. Two things keep it from looking mechanical: the durations share no factor (13s against 17s), so the pair never falls in step, and each note rocks on its own slower cycle as it drops, the way paper does. The rock is a separate animation on the same element — one drives translate, the other rotate, and CSS composes them. They sit behind the card and are aria-hidden: they are weather, not content. */ .steward{position:relative;overflow:hidden} .steward > .wrap{position:relative;z-index:1} .note-fall{ position:absolute;z-index:0;pointer-events:none; width:132px;height:66px;top:0; background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%20100'%3E%3Cdefs%3E%3Cfilter%20id='w'%20x='-8%25'%20y='-8%25'%20width='116%25'%20height='116%25'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.04'%20numOctaves='3'%20seed='6'%20result='t'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='t'%20scale='1.9'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cg%20filter='url(%23w)'%3E%3Cpath%20d='M8%2032C50%206%20110%2034%20192%2010L192%2068C110%2094%2050%2064%208%2090Z'%20fill='%23A8DCB4'%20stroke='%23123A24'%20stroke-width='2.6'%20stroke-linejoin='round'/%3E%3Cpath%20d='M17%2039C55%2016%20108%2041%20183%2018L183%2061C108%2084%2055%2057%2017%2081Z'%20fill='none'%20stroke='%23123A24'%20stroke-width='1.2'/%3E%3Cg%20fill='%23123A24'%3E%3Cpath%20d='M9%2033L21%2030L11%2042Z'/%3E%3Cpath%20d='M191%2011L179%2014L189%2023Z'/%3E%3Cpath%20d='M9%2089L21%2085L11%2078Z'/%3E%3Cpath%20d='M191%2069L180%2072L189%2081Z'/%3E%3C/g%3E%3Cellipse%20cx='100'%20cy='50'%20rx='40'%20ry='24'%20fill='none'%20stroke='%23123A24'%20stroke-width='1.6'/%3E%3Cellipse%20cx='100'%20cy='50'%20rx='34'%20ry='19'%20fill='none'%20stroke='%23123A24'%20stroke-width='1'/%3E%3Ctext%20x='100'%20y='60'%20text-anchor='middle'%20font-family='Poppins,sans-serif'%20font-size='26'%20font-weight='600'%20fill='%23123A24'%3E%E2%82%B9%3C/text%3E%3Ctext%20x='172'%20y='68'%20text-anchor='end'%20font-family='Poppins,sans-serif'%20font-size='10'%20font-weight='600'%20fill='%23123A24'%3E%E2%82%B95000%3C/text%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat; opacity:.95; /* a drawn note casts a drawn shadow: short and soft, not the deep one a modelled object needs */ filter:drop-shadow(2px 4px 5px rgba(40,30,14,.26)); } .note-fall--l{left:clamp(6px,1.8vw,26px);animation:noteFall 13s linear infinite,noteRock 4.1s ease-in-out infinite,noteTurn 6.7s ease-in-out infinite} .note-fall--r{right:clamp(6px,1.8vw,26px);animation:noteFall 17s linear infinite,noteRock 5.3s ease-in-out infinite,noteTurn 8.9s ease-in-out infinite;animation-delay:-6s,-2s,-4s} @keyframes noteFall{ 0% {translate:0 -120px} 100%{translate:0 760px} } /* the tumble: the note turns edge-on and back, which is what stops it reading as a picture sliding down the page. Three animations on one element, each driving a different individual transform property — translate, rotate and scale — so the browser composes them instead of the last one winning. */ @keyframes noteTurn{ 0%,100%{scale:1 1} 46% {scale:.12 1} 50% {scale:-.12 1} 96% {scale:-1 1} } @keyframes noteRock{ 0%,100%{rotate:-14deg} 50% {rotate:16deg} } @media (prefers-reduced-motion:reduce){ .note-fall{animation:none;display:none} } @media (max-width:900px){ .note-fall{display:none} } /* ---------- the founder's card, made quieter and richer ---------- The flat cream-to-gold ramp was bright rather than expensive. This is a champagne ground — far less saturated, warm rather than yellow — with the gold moved to where gold belongs on a piece of stationery: a hairline frame set in from the edge, the way an engraved card is ruled. The frame is a pseudo-element rather than a second border, because a border cannot be inset from the element's own edge. */ .steward-card{ position:relative; /* deeper into gold: the champagne was so pale the card read as off-white paper. This holds real colour while staying light enough for green type to sit on it at full contrast. */ background: radial-gradient(120% 90% at 82% 108%,rgba(184,140,34,.34) 0%,rgba(184,140,34,0) 64%), linear-gradient(152deg,#FBF1D6 0%,#F3E3B6 52%,#E6CD8C 100%); border-color:rgba(176,140,42,.32); box-shadow: inset 0 1px 0 rgba(255,255,255,.7), 0 1px 2px rgba(90,64,12,.05), 0 40px 80px -46px rgba(24,64,42,.45); } .steward-card::before{ content:"";position:absolute;z-index:0;pointer-events:none; inset:clamp(12px,1.4vw,18px); border:1px solid rgba(176,140,42,.34); border-radius:7px; } .steward-card > *{position:relative;z-index:1} .steward-note{color:#12362A} .anchor-star{fill:#B08C2A} /* ---------- the card's edges, cut rather than drawn ---------- A 1px border is a line; an edge is two lines. The outer rim is a raised ridge — light along the top and left where the light falls, shade along the bottom and right — and the inset rule is the opposite, a groove cut into the face. Both agree with the light source used everywhere else on the page, from the top left. The flat border comes off: leaving it would put a third line between the two that describe the edge. */ .steward-card{ border:0; box-shadow: inset 1.5px 1.5px 0 rgba(255,255,255,.92), inset -2px -2px 0 rgba(16,54,34,.46), inset 0 0 0 2.6px rgba(20,74,46,.82), 0 1px 2px rgba(90,64,12,.05), 0 40px 80px -46px rgba(90,64,12,.5); } .steward-card::before{ border:0; border-top:1.4px solid rgba(20,74,46,.62); border-left:1.4px solid rgba(20,74,46,.62); border-bottom:1.4px solid rgba(255,255,255,.92); border-right:1.4px solid rgba(255,255,255,.92); } /* the heading sits closer to the card than a section head normally would */ .steward .sec-head{margin-bottom:clamp(30px,3.6vw,48px)} /* The wordmark file reports ink across its whole viewBox — it carries an invisible full-bleed element — so the empty band above the letterforms is not whitespace the layout can see. It is cropped here instead: a negative top margin pulls the image up and shortens the flow with it, so the mark still sits flush to the foot of the page. */ .foot-mark img{margin-top:-7.5%} /* ---------- the signature ---------- Caveat is a marker hand — right for the pull-quote, wrong for a name at the foot of a letter. This is a fine looping script, closer to a pen: monoline, deep descenders, the loops carrying the eye across the name. It sets very small for its point size, so it runs at roughly twice the figure a sans would need, and the line-height is opened so the loops below the baseline are not clipped by the line box. The face joins the existing Google Fonts request rather than adding a second one — same round trip, one more family in the query. */ .steward-sign{ /* Great Vibes: a copperplate hand with weighted downstrokes, hairline joins and a swash on the capital that carries under the word — the face the signature was drawn in. Every face tried before it erred one way or the other: Allison, Allura, Pinyon and Italianno were fine-pen and read as ornament; Zeyada drew its capital J with no shoulder, so "Jaya" read as lowercase; Caveat was a marker, upright and thick. */ font-family:"Great Vibes","Parisienne","Dancing Script",var(--hand),cursive; font-weight:400; /* it sets far larger on the body than the fine-pen faces did, so the figure comes down by about a third to hold the same measure */ font-size:clamp(2.4rem,3.7vw,3.3rem); line-height:1.25; letter-spacing:0; word-spacing:.14em; /* the capital's swash and the y's tail both run below the baseline */ padding-bottom:.28em; } /* The card's action takes the same fir-green stroke as the founder's, rather than the pale lake blue the buttons carry by default — the offering card sits on a near-white ground where that blue reads as a stray colour. */ .offer-actions .btn{background-image:var(--stroke-nav)} .offer-actions .btn:hover{background-image:var(--stroke-nav-deep)} /* ---------- the team block on About ---------- */ .team-lead{ display:grid;grid-template-columns:64px 1fr;gap:26px;align-items:start; max-width:var(--m-read);margin:0 auto;text-align:left; } .team-mark{width:56px;height:56px;color:#173B2C;margin-top:-4px} .team-lead p{margin:0;font-size:clamp(1rem,1.25vw,1.14rem);line-height:1.7;color:var(--ink-2)} .team-more{ max-width:var(--m-read);margin:26px auto 0;text-align:left; padding-left:90px;font-size:14.6px; } .team-more a{color:#173B2C;font-weight:500} @media (max-width:640px){ .team-lead{grid-template-columns:1fr;gap:16px} .team-more{padding-left:0} } /* ---------- drawn marks in the icon lists ---------- The 24px pictograms are gone from these rows; each one is now a drawing at illustration scale, on the same pale green disc the beliefs use on the home page. The disc is the element's own background and the drawing is inset by its padding, so no wrapper was needed in any of the six pages. Not applied to the tick lists — fifteen drawn discs down a checklist would overwhelm the sentences they belong to. */ .icon-list .sk{ width:60px;height:60px;flex:none;box-sizing:border-box; padding:6px;border-radius:50%; background:radial-gradient(circle at 38% 32%,#EDF4EC 0%,#DCEADB 100%); color:#173B2C; margin-top:-2px; } .icon-list li{grid-template-columns:60px 1fr;gap:22px} /* the team block's mark is the same drawing at the same size */ .team-lead .sk{ width:60px;height:60px;box-sizing:border-box;padding:6px;border-radius:50%; background:radial-gradient(circle at 38% 32%,#EDF4EC 0%,#DCEADB 100%); color:#173B2C; } .team-lead{grid-template-columns:60px 1fr} @media (max-width:560px){ .icon-list .sk{width:50px;height:50px;padding:5px} .icon-list li{grid-template-columns:50px 1fr;gap:16px} } /* ---------- About, as cards ---------- The same plate the offering cards use — white, one hairline, a soft shadow — with the drawing on its disc at the head of each, centred like the beliefs on the home page. A rack of cards suits three short claims better than a list, which reads as a run-on of one idea. The rack is capped at the reading measure so two or three cards do not stretch to the full window on a wide screen. */ .about-rack{max-width:var(--m-read);margin:0 auto;align-items:stretch} .about-card{ display:flex;flex-direction:column;text-align:center;align-items:center; background:#fff;border:1px solid rgba(20,32,24,.08);border-radius:14px; padding:clamp(20px,2.2vw,26px) clamp(16px,1.8vw,22px); box-shadow:0 1px 2px rgba(20,32,24,.05),0 26px 52px -34px rgba(20,32,24,.4); } .about-card .sk{ width:88px;height:88px;flex:none;box-sizing:border-box;padding:7px; border-radius:50%;color:#173B2C;margin-bottom:16px; background:radial-gradient(circle at 38% 32%,#EDF4EC 0%,#DCEADB 100%); } .about-card h3{ margin:0 0 10px;font-size:clamp(1.04rem,1.3vw,1.18rem);font-weight:500; line-height:1.3;color:var(--ink-deep); } .about-card p{margin:0;font-size:14.2px;line-height:1.65;color:var(--ink-2)} @media (max-width:820px){ .about-rack{grid-template-columns:1fr;max-width:470px} } /* ---------- the mission statement ---------- One sentence given the width of the page and nothing to compete with. The reference sets this in a serif; this site has no serif, and adding a fourth family for one sentence would cost more than it returns. Poppins at 300 with the tracking pulled in does the same job — the effect comes from the size, the measure and the space around it, not the face. Deep fir green rather than ink: it is a statement of intent, not body copy, and the green is the colour the site reserves for those. */ .mission{ background:var(--paper); padding:clamp(56px,6.4vw,104px) 0; } .mission-line{ max-width:19ch;margin:0 auto;text-align:center; font-size:clamp(2.1rem,4.6vw,4.1rem); font-weight:300;line-height:1.14;letter-spacing:-.022em; color:#173B2C; } .mission-sub{ max-width:46ch;margin:clamp(28px,3.4vw,44px) auto 0;text-align:center; font-size:clamp(.92rem,1.1vw,1.02rem);line-height:1.6;color:var(--ink-2); } @media (max-width:560px){ .mission-line{max-width:none} } /* The statement as a page opening rather than a section within one: it sits under the header with the breadcrumb above it, so it takes the top padding the banner used to carry and the h1 is reset to the statement's own size rather than the global h1 scale. */ .mission--page{padding:clamp(64px,8vw,116px) 0 clamp(44px,5.4vw,78px)} h1.mission-line{ font-size:clamp(2.1rem,4.6vw,4.1rem); font-weight:300;line-height:1.14;letter-spacing:-.022em; color:#173B2C;max-width:19ch;margin:0 auto;text-align:center; } /* ---------- a ridge behind the statement ---------- The ridge behind the closing wordmark, reduced to its skyline and filled solid, then thrown far out of focus. A drawing blurs into smudges — its hatching survives the blur and its wash does not. A silhouette blurs into what it should be here: a dark hill a long way off, faint enough that the sentence never has to compete with it. The blurred layer is inset beyond the section on every side — a 26px Gaussian bleeds about three radii, so a layer flush with the edges would fade out along them and show its own seam. isolation:isolate keeps the ridge in this section's own stacking context; it paints at z-index 0 with the copy at 1, never at a negative index, which Chromium composites as an opaque black rectangle when any ancestor carries a backdrop-filter. */ .mission--page{position:relative;overflow:hidden;isolation:isolate} .mission--page::after{ content:"";position:absolute;z-index:0;pointer-events:none; left:-6%;right:-6%;bottom:0;height:min(92%,620px); background:url("/images/ridge-silhouette.png") center bottom / 100% 94% no-repeat; opacity:.10;filter:blur(20px); -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%); mask-image:linear-gradient(180deg,#000 0%,#000 68%,transparent 100%); } .mission-body{position:relative;z-index:1} /* With a horizon under it the block wants to sit clear of the ridge line and read as one centred column: more room below than the flat version had, and the supporting line on the same measure discipline as the statement. */ .mission--page{padding:clamp(40px,4.6vw,70px) 0 clamp(30px,3.6vw,54px)} .mission--page h1.mission-line{ max-width:35ch;font-size:clamp(1.6rem,3.15vw,2.85rem); letter-spacing:-.022em;line-height:1.24; } .mission--page .mission-sub{ max-width:70ch;font-size:clamp(.95rem,1.15vw,1.06rem); margin-top:clamp(24px,2.8vw,36px); } @media (max-width:700px){ .mission--page::after{left:-16%;right:-16%;height:88%;filter:blur(15px)} .mission--page{padding:clamp(40px,6.5vw,64px) 0 clamp(56px,9vw,88px)} } /* ---------- the team, in the About page ---------- The people used to have a page of their own; they now sit under the One Team paragraph. Both blocks are held to the same reading measure as the paragraph above them, so the section reads as one column rather than as a narrow intro over full-width furniture. A card with no biography yet is mostly air, so the person plate is tightened here — it was padded for three sentences of bio. */ .team-rack{max-width:var(--m-read);margin:clamp(32px,3.8vw,50px) auto 0} .team-rack.g-2{max-width:min(980px,100%)} .team-rack .person{padding:clamp(26px,2.6vw,34px) clamp(20px,2.2vw,28px)} .team-rack .person h3{margin-bottom:.3em} .team-rack .person .role{margin-bottom:0} @media (max-width:820px){ .team-rack{grid-template-columns:1fr;max-width:470px} } /* The section following the opening statement does not need its own full top padding on top of the statement's bottom one. */ .mission--page + .section{padding-top:clamp(40px,4.6vw,76px)} /* ---------- angel investors ---------- Eleven names want to be read as a roll, not as eleven cards: no plate, no icon, one hairline between rows so the column has structure without furniture. Three columns on a wide screen, one on a phone, with the names set at the same weight as body copy — they are people, not logos, and blowing them up would read as endorsement. */ .angel-lede{ max-width:none;margin:0 auto clamp(24px,2.8vw,38px);text-align:center; font-family:var(--hand);font-style:italic;font-weight:500; font-size:clamp(1.45rem,2.5vw,2.15rem);line-height:1.45; color:#173B2C; } .angel-rack{ list-style:none;margin:0 auto;padding:0;max-width:var(--m-read); display:grid;grid-template-columns:repeat(3,1fr); column-gap:clamp(24px,3vw,44px); } .angel-rack li{ display:flex;align-items:center;gap:13px; padding:12px 2px;border-bottom:1px solid rgba(20,32,24,.09); font-size:15px;line-height:1.4;color:var(--ink); } @media (max-width:820px){ .angel-rack{grid-template-columns:repeat(2,1fr);max-width:520px} } @media (max-width:520px){ .angel-rack{grid-template-columns:1fr;max-width:340px} } /* ---------- the portraits ---------- Sized as a small disc on the same green plate the belief and About drawings sit on, so the roll reads as a row of people rather than as a spreadsheet column. Only the eyes move. A blink is a fraction of a six-second loop — long enough that eleven faces are never busy, short enough to be caught out of the corner of the eye — and each face carries its own offset, which is what keeps the rack from looking mechanical. */ /* a role beneath a name: small, but held at 12px so it stays legible on a phone */ .angel-rack .angel-role{display:block;margin-top:2px;font-size:12px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--muted)} .angel-rack .face{ width:58px;height:58px;flex:none;box-sizing:border-box;padding:4px; border-radius:50%;color:#173B2C; background:radial-gradient(circle at 38% 32%,#EDF4EC 0%,#DCEADB 100%); } .angel-rack .face-eyes{ transform-box:fill-box;transform-origin:center; animation:faceBlink 6s var(--fd,0s) infinite; } @keyframes faceBlink{ 0%,92%,100%{transform:scaleY(1)} 95%{transform:scaleY(.12)} } @media (prefers-reduced-motion:reduce){ .angel-rack .face-eyes{animation:none} } /* ---------- Angels, in the hero gold ---------- The same struck-metal ramp the hero headline uses, so the word is the site's gold rather than a second one. The hero's version is tuned for a dark photograph: its lightest stop is nearly cream, which disappears on paper, and it carries two drop shadows to lift it off the image. Here the ramp is pulled a stop or two deeper and the shadows dropped — on white, contrast has to come from the colour itself. */ .about-angels .sec-head h2 em{ display:inline-block;padding:0 .14em .12em; color:#9C7614; background-image:linear-gradient(96deg, #C9A227 0%,#A8830F 22%,#7E5E0D 48%,#A8830F 74%,#CBA93A 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } @supports not (background-clip:text){ .about-angels .sec-head h2 em{-webkit-text-fill-color:#9C7614;color:#9C7614} } /* ---------- About: one rhythm between sections ---------- Every section carried a full 190px ceiling and floor, so each seam between them was most of a screen of empty paper. The page is short sections of short copy; it reads better as a continuous column. Scoped to this page so the longer, denser pages keep the site rhythm. */ body.page-about .section, body.page-philosophy .section, body.page-strategies .section, body.page-all-cap-opportunities .section, body.page-disclosures .section, body.page-investor-charter .section, body.page-complaints .section, body.page-performance .section, body.page-privacy-policy .section, body.page-terms .section, body.page-who-should-invest .section, body.page-sitemap .section{padding:clamp(32px,3.6vw,56px) 0} body.page-about .mission--page, body.page-philosophy .mission--page, body.page-strategies .mission--page, body.page-all-cap-opportunities .mission--page{padding:clamp(40px,4.6vw,70px) 0 clamp(30px,3.6vw,54px)} body.page-about .mission--page + .section, body.page-philosophy .mission--page + .section, body.page-strategies .mission--page + .section, body.page-all-cap-opportunities .mission--page + .section{padding-top:clamp(40px,4.6vw,76px)} /* ---------- the two portraits on the team cards ---------- The initials plate was a placeholder dressed as a photograph. A drawn face on the same green disc as every other drawing on the site says the same thing without pretending to be a likeness. Each movement is chosen for the job rather than for variety. The Principal Officer looks out and along: a slow glance to either side, the whole point of the role being what is watched and for how long. The Compliance Officer works down a list: the eyes step, hold, step again, and return to the top — discrete ticks, not a sweep, because that is what checking is. Both keep the blink underneath, which is why the eyes are wrapped twice: the outer group squashes, the inner one moves. */ .team-rack .face{ width:88px;height:88px;box-sizing:border-box;padding:6px; border-radius:50%;color:#173B2C;margin:0 auto 20px;display:block; background:radial-gradient(circle at 38% 32%,#EDF4EC 0%,#DCEADB 100%); } .team-rack .face-eyes{ transform-box:fill-box;transform-origin:center; animation:faceBlink 6s var(--fd,0s) infinite; } .face-look{transform-box:fill-box;transform-origin:center} .face--scan .face-look{animation:faceScan 9s ease-in-out infinite} .face--check .face-look{animation:faceCheck 6s steps(1,end) infinite} @keyframes faceScan{ 0%,14%{transform:translateX(0)} 28%,44%{transform:translateX(3.4px)} 58%,74%{transform:translateX(-3.4px)} 88%,100%{transform:translateX(0)} } @keyframes faceCheck{ 0%,24%{transform:translateY(0)} 25%,49%{transform:translateY(2.6px)} 50%,74%{transform:translateY(5.2px)} 75%,100%{transform:translateY(0)} } @media (prefers-reduced-motion:reduce){ .face-look{animation:none} } /* One line on anything wide enough to hold it; it may wrap on a phone, which is the one place a break is better than shrinking the hand. */ @media (min-width:900px){.angel-lede{white-space:nowrap}} /* ---------- the office dog ---------- A guard dog does not scan and does not tick down a list: it hears something, the ears come up, the head goes over. The tilt is on the whole drawing and the ear lift is on the ears alone, on a longer loop than either of the human portraits, because the joke stops being one if it repeats too often. */ .puppy .face-ears{transform-box:fill-box;transform-origin:center top} .face--guard{transform-box:view-box;transform-origin:60% 70%} .face--guard{animation:puppyTilt 11s ease-in-out infinite} .face--guard .face-ears{animation:puppyEars 11s ease-in-out infinite} @keyframes puppyTilt{ 0%,58%{transform:rotate(0deg)} 66%,80%{transform:rotate(-9deg)} 90%,100%{transform:rotate(0deg)} } @keyframes puppyEars{ 0%,56%{transform:translateY(0)} 62%,82%{transform:translateY(-2.4px)} 92%,100%{transform:translateY(0)} } @media (prefers-reduced-motion:reduce){ .face--guard,.face--guard .face-ears{animation:none} } /* three to a row now, so the rack keeps the reading measure */ @media (max-width:900px) and (min-width:821px){ .team-rack{grid-template-columns:repeat(2,1fr)} } /* ---------- Contact, as a title and a card ---------- The page used to open on a stock photograph with two words over it, which is the one arrangement every financial site has had since 2014. It now opens the way the rest of the site does: a title set large on paper, and immediately under it the single thing the page is for. The title is the serif the navigation uses, at a size nothing else on the site reaches — on a page with one job, the job can be the biggest thing on it. */ .contact-open{padding:clamp(52px,6.4vw,96px) 0 clamp(60px,7vw,104px)} .contact-title{ font-family:var(--hand);font-weight:600;font-style:italic; font-size:clamp(3.4rem,9vw,7rem);line-height:1;letter-spacing:.005em; text-align:center;color:#173B2C; margin:0 0 clamp(38px,4.6vw,72px); } /* The card is the whole invitation: a dark green plate with the light falling across it from the top left, and the coin half out of frame at the right so the card reads as a window onto something larger rather than a box with a picture in it. overflow:hidden does the cropping, so the coin can be drawn whole and simply hang over the edge. */ .pms-card{ position:relative;overflow:hidden;isolation:isolate; max-width:var(--m-read);margin:0 auto; border-radius:26px; padding:clamp(34px,4.4vw,62px); background: radial-gradient(120% 140% at 8% 0%,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 46%), linear-gradient(128deg,#20583F 0%,#154430 44%,#0D3223 100%); box-shadow:0 30px 70px -34px rgba(13,50,35,.7); } .pms-card-body{position:relative;z-index:1;max-width:54ch} .pms-card h2{ font-family:var(--serif);font-weight:400;color:#fff; font-size:clamp(1.7rem,3vw,2.6rem);line-height:1.15;letter-spacing:-.015em; margin:0 0 clamp(14px,1.6vw,20px); } .pms-card p{ margin:0 0 clamp(26px,3vw,38px);color:rgba(255,255,255,.82); font-size:clamp(.98rem,1.15vw,1.08rem);line-height:1.65; } .pms-btn{font-size:clamp(1.15rem,1.7vw,1.5rem);padding:12px 4px} .pms-btn,.pms-btn:hover{color:#fff} /* The coin hangs off the right edge and past the bottom. Its own box is larger than the column it sits in, which is why the grid column is a minmax(0,...) — otherwise the coin would widen the card rather than overflow it. */ /* the form, given the same plate the rest of the site gives a group of fields, rather than sitting bare on the paper */ .contact-form-sec{padding-top:clamp(30px,3.6vw,56px)} .contact-cols .form-grid,.contact-form-sec .form-grid{ background:#fff;border:1px solid rgba(20,32,24,.08);border-radius:18px; padding:clamp(26px,3.2vw,44px); box-shadow:0 1px 2px rgba(20,32,24,.05),0 30px 60px -40px rgba(20,32,24,.45); } /* the dog, in black and white */ .team-rack .puppy{ color:#14100D; background:radial-gradient(circle at 38% 32%,#F6F5F2 0%,#E4E3DE 100%); } /* ---------- contact, in two columns ---------- The form and the three short blocks beside it were four stacked sections, which made a page of contact details four screens long. The form takes the wider column because it is the thing being asked for; the rail holds what a visitor might want instead of it — where we are, how to come direct, what to do when we get it wrong. The rail is sticky on a tall window so the addresses stay in view while a long form is being filled, and the whole thing folds to one column below 940px, where two columns of this would be two narrow ones. */ .contact-cols{padding-top:clamp(30px,3.6vw,56px)} .contact-grid{ display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(34px,4.6vw,74px);align-items:start; } .contact-main .form-grid{margin-top:clamp(18px,2vw,26px)} .contact-rail{position:sticky;top:104px} .contact-rail .sec-head{margin-bottom:clamp(14px,1.6vw,20px)} .contact-rail .rail-head{margin-top:clamp(34px,4vw,52px)} .contact-rail h2{font-size:clamp(1.3rem,1.9vw,1.65rem)} .contact-rail p{font-size:14.6px;line-height:1.7;color:var(--ink-2)} .rail-block{ background:#fff;border:1px solid rgba(20,32,24,.08);border-radius:14px; padding:clamp(18px,2vw,24px);margin-bottom:14px; box-shadow:0 1px 2px rgba(20,32,24,.04); } .rail-block h3{font-size:14.5px;font-weight:600;margin:0 0 8px;color:var(--ink-deep)} /* what the address is for, set beside the label rather than under it */ .rail-note{font-weight:400;font-size:12.6px;color:var(--muted);white-space:nowrap} .rail-block address,.rail-block p{font-size:14px;line-height:1.65;margin:0} .rail-block .contact-lines{margin-top:10px} .rail-block .small{margin-top:10px} @media (max-width:940px){ .contact-grid{grid-template-columns:1fr} .contact-rail{position:static} } .contact-rail .sec-head+p{margin-top:0} .contact-rail .sec-head::after{margin-bottom:6px} @media (max-width:820px){.pms-card-body{max-width:none}} /* the card action, stroked in white */ .pms-btn{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2012'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1.00%205.90L5.95%204.35L10.90%204.00L15.85%204.00L20.80%204.00L25.75%204.00L30.70%204.00L35.65%204.00L40.60%204.00L45.55%204.00L50.50%204.00L55.45%204.00L60.40%204.00L65.35%204.00L70.30%204.00L75.25%204.00L80.20%204.00L85.15%204.00L90.10%204.00L95.05%204.00L100.00%204.00L104.95%204.00L109.90%204.00L114.85%204.00L119.80%204.00L124.75%204.00L129.70%204.00L134.65%204.00L139.60%204.00L144.55%204.00L149.50%204.00L154.45%204.00L159.40%204.00L164.35%204.00L169.30%204.00L174.25%204.00L179.20%204.00L184.15%204.00L189.10%204.00L194.05%204.35L199.00%205.90L199.00%206.10L194.05%207.65L189.10%208.00L184.15%208.00L179.20%208.00L174.25%208.00L169.30%208.00L164.35%208.00L159.40%208.00L154.45%208.00L149.50%208.00L144.55%208.00L139.60%208.00L134.65%208.00L129.70%208.00L124.75%208.00L119.80%208.00L114.85%208.00L109.90%208.00L104.95%208.00L100.00%208.00L95.05%208.00L90.10%208.00L85.15%208.00L80.20%208.00L75.25%208.00L70.30%208.00L65.35%208.00L60.40%208.00L55.45%208.00L50.50%208.00L45.55%208.00L40.60%208.00L35.65%208.00L30.70%208.00L25.75%208.00L20.80%208.00L15.85%208.00L10.90%208.00L5.95%207.65L1.00%206.10Z'%20fill='%23f3f6f4'/%3E%3C/svg%3E")} .pms-btn:hover{background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20200%2012'%20preserveAspectRatio='none'%3E%3Cpath%20d='M1.00%205.90L5.95%204.35L10.90%204.00L15.85%204.00L20.80%204.00L25.75%204.00L30.70%204.00L35.65%204.00L40.60%204.00L45.55%204.00L50.50%204.00L55.45%204.00L60.40%204.00L65.35%204.00L70.30%204.00L75.25%204.00L80.20%204.00L85.15%204.00L90.10%204.00L95.05%204.00L100.00%204.00L104.95%204.00L109.90%204.00L114.85%204.00L119.80%204.00L124.75%204.00L129.70%204.00L134.65%204.00L139.60%204.00L144.55%204.00L149.50%204.00L154.45%204.00L159.40%204.00L164.35%204.00L169.30%204.00L174.25%204.00L179.20%204.00L184.15%204.00L189.10%204.00L194.05%204.35L199.00%205.90L199.00%206.10L194.05%207.65L189.10%208.00L184.15%208.00L179.20%208.00L174.25%208.00L169.30%208.00L164.35%208.00L159.40%208.00L154.45%208.00L149.50%208.00L144.55%208.00L139.60%208.00L134.65%208.00L129.70%208.00L124.75%208.00L119.80%208.00L114.85%208.00L109.90%208.00L104.95%208.00L100.00%208.00L95.05%208.00L90.10%208.00L85.15%208.00L80.20%208.00L75.25%208.00L70.30%208.00L65.35%208.00L60.40%208.00L55.45%208.00L50.50%208.00L45.55%208.00L40.60%208.00L35.65%208.00L30.70%208.00L25.75%208.00L20.80%208.00L15.85%208.00L10.90%208.00L5.95%207.65L1.00%206.10Z'%20fill='%23ffffff'/%3E%3C/svg%3E")} /* ---------- the safety notes, as a rack ---------- Five short warnings read better as five objects than as five bullets: a bullet list of prohibitions scans as small print, which is the one thing this section must not be. Flex rather than grid so the last two centre under the first three instead of hanging left. */ .safety-rack{ display:flex;flex-wrap:wrap;justify-content:center; gap:clamp(16px,1.8vw,22px);max-width:var(--m-read);margin:0 auto; } .safety-card{ flex:1 1 250px;max-width:300px; display:flex;flex-direction:column;align-items:center;text-align:center; background:#fff;border:1px solid rgba(20,32,24,.08);border-radius:14px; padding:clamp(24px,2.6vw,32px) clamp(18px,2vw,24px); box-shadow:0 1px 2px rgba(20,32,24,.05),0 26px 52px -34px rgba(20,32,24,.4); } .safety-card p{margin:0;font-size:14.2px;line-height:1.65;color:var(--ink-2)} .safety-card .sf{ width:64px;height:64px;flex:none;box-sizing:border-box;padding:5px; border-radius:50%;color:#173B2C;margin-bottom:16px; background:radial-gradient(circle at 38% 32%,#EDF4EC 0%,#DCEADB 100%); } /* One moving part per drawing, each on its own long loop so the rack is never busy: the flap opens and shuts, the passcode fills in a digit at a time, the payment starts to leave and is pulled back, the chatter bobs, the bell rings. The struck-through line does not move at all — a prohibition should not look playful. */ .sf-flap{transform-box:fill-box;transform-origin:center top;animation:sfFlap 7s ease-in-out infinite} @keyframes sfFlap{ 0%,58%{transform:scaleY(1)} 72%,88%{transform:scaleY(-.34)} 100%{transform:scaleY(1)} } .sf-dot{opacity:0;animation:sfDot 5.4s var(--dd,0s) infinite} @keyframes sfDot{ 0%,6%{opacity:0} 14%,74%{opacity:1} 86%,100%{opacity:0} } .sf-send{transform-box:fill-box;transform-origin:left center;animation:sfSend 6s ease-in-out infinite} @keyframes sfSend{ 0%,44%{transform:translateX(0);opacity:1} 64%{transform:translateX(7px);opacity:.35} 78%,100%{transform:translateX(0);opacity:1} } .sf-bob{transform-box:fill-box;transform-origin:center;animation:sfBob 4.6s var(--bd,0s) ease-in-out infinite} @keyframes sfBob{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-3px)} } .sf-ring{transform-box:fill-box;transform-origin:center top;animation:sfRing 6.5s ease-in-out infinite} @keyframes sfRing{ 0%,62%{transform:rotate(0deg)} 68%{transform:rotate(9deg)} 74%{transform:rotate(-8deg)} 80%{transform:rotate(5deg)} 86%,100%{transform:rotate(0deg)} } @media (prefers-reduced-motion:reduce){ .sf-flap,.sf-send,.sf-bob,.sf-ring{animation:none} .sf-dot{animation:none;opacity:1} } /* the enquiry button, stroked in the site's green rather than the default pale lake blue — on a white plate the blue reads as a stray colour, the same reason the founder's action carries the nav green */ .contact-cols .form-grid .btn-primary{background-image:var(--stroke-nav)} .contact-cols .form-grid .btn-primary:hover{background-image:var(--stroke-nav-deep)} /* ---------- the hero as one block ---------- The headline grew to 5.9rem but the space under it and the gap between the two actions were set against the old size, so the three lines read as a headline with two small things parked beneath it. Both are now tied to the same scale the headline uses, which is what keeps them reading as one stack rather than three separate decisions. */ .hero h1{margin-bottom:clamp(30px,3.4vw,48px)} .hero-cta{gap:clamp(34px,4vw,58px);align-items:baseline} /* ---------- cards that keep their reasoning until asked ---------- At rest a card is a drawing and a claim, which is what a reader scans; the sentence explaining it arrives on hover. Four claims read in a glance and the detail is there for whoever wants it. The sentence opens in normal flow under the claim while the drawing shrinks to make room for it, so the two can never land on top of each other whatever their length — which the earlier version, with the text absolutely positioned and the claim shifted by a fixed distance, could not promise. Touch has no hover, so on those devices every card is simply open — a reveal nobody can trigger is content nobody can read. */ .about-card{ justify-content:center; min-height:clamp(200px,19vw,228px); } .about-card .sk{ /* height is animated, not just scaled: the space it gives back is what the sentence moves into, which is what keeps the card from growing */ height:88px;margin-bottom:16px; transition:height .45s var(--ease),width .45s var(--ease), margin-bottom .45s var(--ease),opacity .35s var(--ease); } .about-card h3{margin-bottom:0} .about-card p{ font-size:13.4px;line-height:1.6; max-height:0;opacity:0;overflow:hidden;margin:0; transition:max-height .5s var(--ease),opacity .4s var(--ease), margin-top .45s var(--ease); } .about-card:hover .sk,.about-card:focus-within .sk{ width:44px;height:44px;margin-bottom:10px;opacity:.75; } .about-card:hover p,.about-card:focus-within p{ max-height:16em;opacity:1;margin-top:10px; } @media (hover:none){ .about-card{min-height:0} .about-card p{max-height:none;opacity:1;margin-top:10px} } @media (prefers-reduced-motion:reduce){ .about-card .sk,.about-card h3,.about-card p{transition-duration:.01ms} } /* ---------- the dog says hello ---------- Beside the greeting rather than under it, at the height of the word, so the two read as one line: someone waving as you come in. Only the raised paw moves, on a long loop with a pause between waves — a dog that never stops waving is a machine. */ .hello-row{ display:flex;align-items:center;justify-content:center; gap:clamp(10px,1.6vw,26px); margin:0 0 clamp(38px,4.6vw,72px); } .hello-row .contact-title{margin:0} .hello-dog{display:block;flex:none;color:#173B2C} .wave-dog{ width:clamp(78px,9vw,132px);height:auto;display:block; } @media (max-width:560px){ .hello-row{gap:6px} } /* Contact takes the same rhythm as the other statement pages: its sections are short, and the site default left most of a screen between each. */ body.page-contact .section{padding:clamp(30px,3.4vw,52px) 0} body.page-contact .contact-open{padding:clamp(44px,5vw,80px) 0 clamp(30px,3.4vw,52px)} /* the two statutory contacts, side by side */ .icon-list--pair{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(18px,2.4vw,34px);max-width:var(--m-read); } @media (max-width:700px){ .icon-list--pair{grid-template-columns:1fr} } /* the checklist is common to every strategy, and says so under the head */ .who-lede{ max-width:58ch;margin:0 auto clamp(28px,3.2vw,44px);text-align:center; font-size:14.8px;line-height:1.7;color:var(--ink-2); } /* ---------- words that have to be copied exactly ---------- Set in the deep green rather than highlighted: a swipe of colour behind a phrase reads as emphasis on a page that has no other highlighting, where the darker green reads as "this is the string". */ .say{color:#14432E;font-weight:600} /* ---------- a single strategy ---------- The terms of the mandate, given as a strip under the statement rather than buried in prose: these are the five things a prospect checks before reading a word of the approach. */ .strat-eyebrow{ text-align:center;font-size:11px;letter-spacing:.2em;text-transform:uppercase; color:#173B2C;font-weight:600;margin:0 0 clamp(18px,2vw,26px); } .strat-facts-sec{padding-top:0} .strat-facts{ display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:0;max-width:var(--m-read);margin:0 auto; padding:clamp(6px,1vw,12px) clamp(18px,2.2vw,28px); background:#fff;border:1px solid rgba(20,32,24,.08);border-radius:16px; box-shadow:0 1px 2px rgba(20,32,24,.05),0 26px 52px -38px rgba(20,32,24,.4); } .strat-facts dt{ font-size:10.4px;letter-spacing:.16em;text-transform:uppercase; color:var(--muted);font-weight:600;margin-bottom:6px; } .strat-facts dd{margin:0;font-size:15.5px;font-weight:500;color:var(--ink-deep)} @media (max-width:820px){ .strat-facts{grid-template-columns:repeat(2,minmax(0,1fr))} } /* the numbered method: a rule of discipline per line, numbered because the screens run in order and the order is the point */ .strat-steps{ list-style:none;counter-reset:step;margin:0;padding:0; max-width:var(--m-read); } .strat-steps li{ counter-increment:step;position:relative; padding:0 0 clamp(18px,2vw,24px) 46px; font-size:15px;line-height:1.7;color:var(--ink-2); } .strat-steps li::before{ content:counter(step,decimal-leading-zero);position:absolute;left:0;top:1px; font-size:12px;letter-spacing:.08em;font-weight:600;color:#173B2C; } .strat-who{font-size:clamp(1rem,1.3vw,1.15rem);line-height:1.75;color:var(--ink-2);max-width:62ch} /* a card that is itself a link to somewhere */ .offer-card--linked{transition:transform .4s var(--ease),box-shadow .4s var(--ease)} .offer-card--linked:hover{transform:translateY(-3px)} /* ---------- a strategy, named large ---------- The page is about one thing and the reader arrived knowing which, so the name carries the size the statement used to. The description sits under it at reading size, and the factsheet — the one thing a serious prospect wants to take away — is the only action in the block. */ .strat-title{ font-size:clamp(2.4rem,5.4vw,4.4rem);font-weight:300;line-height:1.06; letter-spacing:-.028em;color:#173B2C;text-align:center; max-width:18ch;margin:0 auto; } .strat-lede{ max-width:var(--m-read);margin:clamp(20px,2.4vw,32px) auto 0;text-align:center; font-size:clamp(.92rem,1.05vw,1rem);line-height:1.7;color:var(--ink-2); } .strat-cta{margin:clamp(26px,3vw,40px) 0 0;text-align:center} .strat-cta .btn{font-size:clamp(1.35rem,2vw,1.85rem);padding:14px 8px} .strat-cta .btn{background-image:var(--stroke-nav)} .strat-cta .btn:hover{background-image:var(--stroke-nav-deep)} .strat-title,.strat-eyebrow,.strat-lede,.strat-cta{position:relative;z-index:1} /* ---------- three steps ---------- Numbered, because the order is the whole content: this happens, then this, then that. No cards and no icons — a step is not an object, and plates around three short paragraphs would only add furniture. The numeral does the work a drawing would, and it is set large and pale so it reads as position rather than as a heading. */ .how-lede{ max-width:52ch;margin:0 auto clamp(40px,4.8vw,66px);text-align:center; font-size:clamp(.98rem,1.2vw,1.1rem);line-height:1.7;color:var(--ink-2); } .how-rack{ list-style:none;margin:0 auto;padding:0;max-width:var(--m-read); display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(26px,3.6vw,54px); } .how-step{position:relative;padding-top:clamp(10px,1.4vw,18px)} .how-num{ display:block;font-size:clamp(2.4rem,4vw,3.4rem);font-weight:300; line-height:1;letter-spacing:-.03em;color:rgba(30,69,48,.62); margin-bottom:clamp(12px,1.4vw,18px); } .how-step h3{ margin:0 0 10px;font-size:clamp(1.05rem,1.35vw,1.22rem);font-weight:500; line-height:1.3;color:var(--ink-deep); } .how-step p{margin:0;font-size:14.4px;line-height:1.7;color:var(--ink-2)} /* a hairline between the steps, drawn on the gaps rather than on the items, so it never appears before the first or after the last */ .how-step + .how-step::before{ content:"";position:absolute;left:calc(clamp(26px,3.6vw,54px) / -2);top:6px;bottom:6px; width:1px;background:rgba(20,32,24,.10); } @media (max-width:820px){ .how-rack{grid-template-columns:1fr;max-width:520px;gap:clamp(24px,4vw,34px)} .how-step + .how-step::before{ left:0;right:0;top:calc(clamp(24px,4vw,34px) / -2);bottom:auto; width:auto;height:1px; } } } /* the route drawing above the steps: full reading width, held back from the copy so it reads as an illustration of the sequence rather than as a fourth thing to read. On a phone the steps stack into a column and the drawing, which is a horizontal line by construction, no longer describes them — so it goes. */ .how-map{ max-width:var(--m-read);margin:0 auto clamp(26px,3vw,44px); color:#173B2C;opacity:.62; } .journey{display:block;width:100%;height:auto} @media (max-width:820px){ .how-map{display:none} } /* Two full section paddings met between the offerings and the steps — about a third of a screen of empty paper on a page that is otherwise paced tightly. The offerings close sooner and the steps open sooner. */ body.page-index .section{padding:clamp(36px,4vw,62px) 0} body.page-index .seal-seam + .section--paper{padding-top:clamp(196px,16.5vw,244px)} /* Eleven facts read as a table, not as a strip: each sits in its own cell with a hairline under it, so the eye can run down a column instead of along one long line. The rules are drawn on the cells rather than between them, and the last row in each column loses its own, which is what stops a stray line hanging under a short final column. */ .strat-facts > div{ padding:clamp(14px,1.6vw,20px) clamp(6px,1vw,14px); border-bottom:1px solid rgba(20,32,24,.08); } .strat-facts > div:last-child{border-bottom:0} .strat-facts dd{line-height:1.5} @media (max-width:900px){ .strat-facts{grid-template-columns:repeat(2,minmax(0,1fr))} .strat-facts > div{border-bottom:1px solid rgba(20,32,24,.08)} .strat-facts > div:last-child{border-bottom:0} } @media (max-width:560px){ .strat-facts{grid-template-columns:1fr} .strat-facts > div:last-child{border-bottom:0} } .strat-facts-sec .sec-head{max-width:var(--m-read);margin-inline:auto} /* the one action at the foot of the approach: the reader has just been told how the strategy is run, and the next question is whether it fits them, which is a conversation rather than another page */ .strat-fit{ margin:clamp(34px,4vw,56px) 0 0;text-align:center; } .strat-fit .btn{ font-size:clamp(1.35rem,2vw,1.85rem);padding:14px 8px; background-image:var(--stroke-nav); } .strat-fit .btn:hover{background-image:var(--stroke-nav-deep)} /* the Offering statement is one short line, so it takes the width it needs rather than the 35ch measure written for the longer statements */ body.page-strategies h1.mission-line{ max-width:none; font-size:clamp(2.2rem,5vw,4.4rem); line-height:1.1; } /* the last word of a page statement in the hand, as the section heads do it: a size and a third up, because a script set at the size of a grotesk reads small beside it */ h1.mission-line em{ font-family:var(--hand);font-style:normal;font-weight:600; font-size:1.24em;line-height:1;letter-spacing:.005em; color:#173B2C; } /* ---------- what we ask of an investor ---------- Fifteen conditions set as a run of ticked text read as small print, which is the last thing this list should look like: it is the honest part of the pitch, and a reader who disagrees with half of it should find that out here rather than after signing. So each condition gets its own plate — white, hairlined, with the drawn tick on the same green disc every other mark on the site sits on. Two columns on a wide screen, one on a phone, and the plate lifts a little under the pointer so a long list still feels like a set of things rather than a wall. The tick is the only mark that repeats fifteen times, so it is drawn small and the wobble filter gives each one a slightly different hand — the same reason the list does not use a font glyph. */ .who-list{ list-style:none;margin:0 auto;padding:0;max-width:min(1040px,100%); display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px); } .who-list li{ display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start; background:#fff;border:1px solid rgba(20,32,24,.08);border-radius:12px; padding:clamp(18px,1.9vw,24px) clamp(18px,2vw,26px); box-shadow:0 1px 2px rgba(20,32,24,.04); transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease); } .who-list li:hover{ transform:translateY(-2px);border-color:rgba(30,69,48,.3); box-shadow:0 1px 2px rgba(20,32,24,.05),0 18px 34px -26px rgba(20,32,24,.5); } .who-list .sk{ width:34px;height:34px;flex:none;box-sizing:border-box;padding:5px;margin-top:1px; border-radius:50%;color:#173B2C; background:radial-gradient(circle at 38% 32%,#EDF4EC 0%,#DCEADB 100%); } .who-list span{ font-size:clamp(15px,1.15vw,16.5px);line-height:1.68; color:var(--ink-deep);align-self:start; } .who-list strong{font-weight:600;color:#14201A} @media (max-width:860px){ .who-list{grid-template-columns:1fr;max-width:640px} } /* ---------- the chart behind the statement ---------- Sits behind the words at z-index 0 with the statement at 1 — never at a negative index, which Chromium composites as an opaque black rectangle under any ancestor carrying a backdrop-filter. The columns rise from their own baselines and the line draws itself across them, both on the same twelve-second loop with the columns staggered, so the plate builds rather than appears. It fades out at the end of the cycle instead of snapping back to nothing. Held at 12%: it is the ground the sentence stands on, not a thing to read. */ .growth-mark{ position:absolute;left:50%;top:50%; transform:translate(-50%,-44%); z-index:0;pointer-events:none; width:min(540px,76%);color:#173B2C;opacity:.13; } .growth{display:block;width:100%;height:auto} body.page-strategies h1.mission-line{position:relative;z-index:1} .gc-bar{ transform-box:fill-box;transform-origin:center bottom; animation:gcBar 12s var(--d,0s) ease-out infinite; } @keyframes gcBar{ 0%{transform:scaleY(0);opacity:0} 6%{opacity:1} 34%,86%{transform:scaleY(1);opacity:1} 100%{transform:scaleY(1);opacity:0} } .gc-line{stroke-dasharray:1;stroke-dashoffset:1;animation:gcDraw 12s ease-in-out infinite} .gc-tip{opacity:0;animation:gcTip 12s ease-in-out infinite} @keyframes gcDraw{ 0%{stroke-dashoffset:1;opacity:0} 8%{opacity:1} 55%,86%{stroke-dashoffset:0;opacity:1} 100%{stroke-dashoffset:0;opacity:0} } @keyframes gcTip{ 0%,52%{opacity:0} 62%,86%{opacity:1} 100%{opacity:0} } @media (prefers-reduced-motion:reduce){ .gc-bar,.gc-line,.gc-tip{animation:none;stroke-dashoffset:0;opacity:1;transform:none} } /* ---------- the phone on the contact card ---------- Set against the right edge of the card, in white on the green, at the size of an object on a desk rather than an icon in a line of text. The card is the thing that says "call us"; this is what that looks like. It rings in bursts: two shakes, then four seconds of quiet, which is how a phone actually rings and also what keeps a looping animation from becoming a nuisance on a page someone is reading. */ .card-phone{ position:absolute;right:clamp(20px,4vw,60px);top:50%; transform:translateY(-50%); width:clamp(120px,17vw,210px); color:rgba(255,255,255,.72); z-index:0;pointer-events:none; } .phone{display:block;width:100%;height:auto} .ph-set{transform-box:fill-box;transform-origin:center bottom;animation:phRing 6s ease-in-out infinite} @keyframes phRing{ 0%,4%{transform:rotate(0deg)} 7%{transform:rotate(-6deg)} 10%{transform:rotate(6deg)} 13%{transform:rotate(-5deg)} 16%{transform:rotate(4deg)} 19%,30%{transform:rotate(0deg)} 33%{transform:rotate(-6deg)} 36%{transform:rotate(6deg)} 39%{transform:rotate(-4deg)} 42%,100%{transform:rotate(0deg)} } .ph-wave path{opacity:0;animation:phWave 6s var(--w,0s) ease-out infinite} @keyframes phWave{ 0%,4%{opacity:0} 9%{opacity:.9} 20%{opacity:0} 32%{opacity:0} 36%{opacity:.9} 46%,100%{opacity:0} } @media (prefers-reduced-motion:reduce){ .ph-set{animation:none} .ph-wave path{animation:none;opacity:.5} } /* the copy keeps its own column so the drawing never sits under the words */ .pms-card-body{position:relative;z-index:1} @media (max-width:820px){ .card-phone{right:-6%;top:auto;bottom:-8%;transform:none;width:150px;opacity:.55} .pms-card{padding-bottom:clamp(96px,18vw,140px)} } /* ---------- target size (WCAG 2.2 AA, 2.5.8) ---------- These are links that stand on their own — footer legal row, table of contents, sitemap, the links that close a card — not links inside a sentence, which the criterion exempts. Inline text gives a 19px box; padding takes it to 24 without moving the layout, because the list spacing absorbs it. */ .foot-legal a, .toc a, .sitemap-card a, .card > p > a, .card h3 > a, .card ul.small li a{display:inline-block;padding:4px 0;min-height:24px} .card ul.small li{margin-bottom:2px} .toc li{margin-bottom:2px} /* ---------- the marks, alive ---------- */ /* idle: the whole disc breathes, staggered across a rack so they never move together — six per cycle is enough that neighbours never share a phase, and the eye reads the group as settling rather than pulsing */ @keyframes inkBreathe{ 0%,100%{transform:rotate(-1.2deg) scale(1)} 50% {transform:rotate(1.2deg) scale(1.045)} } .about-card .sk, .safety-card .sf, .belief .sk, .team-lead .sk, .icon-list .sk{animation:inkBreathe 5s ease-in-out infinite} .about-card:nth-of-type(2) .sk,.safety-card:nth-child(2) .sf{animation-delay:-.8s} .about-card:nth-of-type(3) .sk,.safety-card:nth-child(3) .sf{animation-delay:-1.6s} .about-card:nth-of-type(4) .sk,.safety-card:nth-child(4) .sf{animation-delay:-2.4s} .about-card:nth-of-type(5) .sk,.safety-card:nth-child(5) .sf{animation-delay:-3.2s} .about-card:nth-of-type(6) .sk{animation-delay:-4s} .belief:nth-child(2) .sk{animation-delay:-1.7s} .belief:nth-child(3) .sk{animation-delay:-3.4s} /* on approach: the mark writes itself. The stroke order is the order the paths were drawn in, which is the order a hand would take them. */ @keyframes inkDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} .sk .ink{stroke-dasharray:1} .about-card:hover .sk .ink, .about-card:focus-within .sk .ink, .offer-card:hover .sk .ink, .icon-list li:hover .sk .ink, .team-lead:hover .sk .ink{ animation:inkDraw .5s ease-out backwards; animation-delay:calc(var(--s,0) * .07s); } /* the disc lifts and warms under the pointer, so the drawing has somewhere to be drawn onto rather than appearing out of flat colour */ .about-card .sk,.safety-card .sf{ transition:background .35s var(--ease),transform .35s var(--ease); } .about-card:hover .sk,.safety-card:hover .sf{ background:radial-gradient(circle at 38% 32%,#F2F8F1 0%,#D2E4D2 100%); } /* the 24px pictograms in tick lists: too small to draw, so they simply nudge toward the line they belong to */ .tick-list .ico,.icon-list .ico{transition:transform .3s var(--ease)} .tick-list li:hover .ico,.icon-list li:hover .ico{transform:translateX(2px) scale(1.12)} @media (prefers-reduced-motion:reduce){ .about-card .sk,.safety-card .sf,.belief .sk,.team-lead .sk,.icon-list .sk{animation:none} .sk .ink{stroke-dasharray:none;stroke-dashoffset:0;animation:none} } /* the tail wags from where it meets him, not from the middle of the page: transform-origin sits at the right-hand end of the tail box, which is the haunch. It runs faster than the wave and on its own cycle length, so the two never lock into a rhythm — a dog whose tail keeps time with its paw looks like a clock. */ .wd-tail{transform-box:fill-box;transform-origin:right bottom;animation:wdWag 1.15s ease-in-out infinite} @keyframes wdWag{ 0%,100%{transform:rotate(-13deg)} 50%{transform:rotate(15deg)} } @media (prefers-reduced-motion:reduce){.wd-tail{animation:none}} /* ---------- the marks write themselves, unprompted ---------- The hover draw was the nicer of the two motions and most visitors would never have triggered it. It now runs on its own: twelve seconds, of which the drawing takes about one, so each mark is still for eleven seconds out of twelve. The per-stroke offset (--s) keeps the strokes in order, and the per-card offset keeps a rack from writing itself in unison, which would read as a page-wide flicker rather than as ink going down. */ @keyframes inkWrite{ 0% {stroke-dashoffset:1} 26%,100% {stroke-dashoffset:0} } .about-card .sk .ink, .belief .sk .ink, .offer-card .sk .ink, .team-lead .sk .ink{ animation:inkWrite 4s ease-out infinite; animation-delay:calc(var(--s,0) * .07s); } .about-card:nth-of-type(2) .sk .ink{animation-delay:calc(0.7s + var(--s,0) * .07s)} .about-card:nth-of-type(3) .sk .ink{animation-delay:calc(1.4s + var(--s,0) * .07s)} .about-card:nth-of-type(4) .sk .ink{animation-delay:calc(2.1s + var(--s,0) * .07s)} .about-card:nth-of-type(5) .sk .ink{animation-delay:calc(2.8s + var(--s,0) * .07s)} .about-card:nth-of-type(6) .sk .ink{animation-delay:calc(3.5s + var(--s,0) * .07s)} .belief:nth-child(2) .sk .ink{animation-delay:calc(1.3s + var(--s,0) * .07s)} .belief:nth-child(3) .sk .ink{animation-delay:calc(2.6s + var(--s,0) * .07s)} /* hovering still redraws it immediately, rather than waiting for the loop */ .about-card:hover .sk .ink, .about-card:focus-within .sk .ink, .offer-card:hover .sk .ink, .team-lead:hover .sk .ink{ animation:inkDraw .5s ease-out backwards; animation-delay:calc(var(--s,0) * .07s); } @media (prefers-reduced-motion:reduce){ .about-card .sk .ink,.belief .sk .ink,.offer-card .sk .ink,.team-lead .sk .ink{ animation:none;stroke-dashoffset:0; } } /* the map pin on "Feet on the Ground" — the one stroke on the site that means a place rather than an idea. Set in the logo's red so it reads as a pin before it reads as a shape; everything else in the drawing stays in the green the rest of the set uses. */ .sk .key,.sk .pin,.sf .sf-strike{stroke:#8A2318} .foot-ids{ margin:10px 0 0;font-size:11.5px;letter-spacing:.05em;line-height:1.6; color:var(--ink-2);font-weight:500; } .foot-ids + .foot-tag{margin-top:8px} /* ---------- Key Information: the riskometer ---------- A card of its own above the facts, dial left and words right, collapsing to a column on a phone. The band the needle rests in is lifted and the others held back, so the reading is the colour, not the whole rainbow. */ .risk-panel{ display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr); align-items:center;gap:clamp(18px,3vw,44px); max-width:var(--m-read);margin:0 auto clamp(26px,3vw,40px); padding:clamp(20px,2.4vw,30px) clamp(20px,2.6vw,34px); background:#fff;border:1px solid rgba(20,32,24,.08);border-radius:16px; box-shadow:0 1px 2px rgba(20,32,24,.04),0 18px 44px -28px rgba(20,32,24,.3); } .riskometer{display:block;width:100%;height:auto;overflow:visible} .rm-band{opacity:.34;transition:opacity .4s var(--ease)} .rm-band.is-on{opacity:1} .rm-needle{fill:var(--ink-deep);transform-box:view-box;transform-origin:110px 112px} /* ---------- Key Information, in motion ---------- Each graphic moves the way its fact behaves, and none of them starts until its panel has scrolled into view (.rv.in), so the reader sees the motion rather than the end of it. Every animation only supplies the moving values; the resting state is the complete drawing, which is what the reduced-motion rule below falls back to. */ /* the riskometer: the needle climbs from Low to its level, overshoots a touch and settles, holds there long enough to be read, then falls back to Low and climbs again — on a loop, so the reading is always being arrived at rather than simply sitting there. The active band lights as the needle reaches it and dims as it leaves. */ .rv.in .rm-needle{animation:rmClimb 5s cubic-bezier(.45,.05,.3,1) infinite} @keyframes rmClimb{ 0%,6%{transform:rotate(0deg)} 40%{transform:rotate(calc(var(--deg) + 4deg))} 48%,80%{transform:rotate(var(--deg))} 100%{transform:rotate(0deg)} } .rv.in .rm-band.is-on{animation:rmGlow 5s ease-in-out infinite} @keyframes rmGlow{0%,28%,96%,100%{opacity:.45}42%,80%{opacity:1}} /* holdings: the slices light in turn round the ring, a portfolio of many positions each taking its moment */ .rv.in .ring-slice{animation:ringPass 3.6s ease-in-out infinite;animation-delay:calc(var(--i) * .3s)} @keyframes ringPass{0%,100%{opacity:1}50%{opacity:.32}} /* investment horizon: the sun rises out of the skyline, holds, and sets back into it; the rays come out only once it is up */ .hz-sun{transform-box:view-box;transform-origin:24px 31px} .rv.in .hz-sun{animation:hzRise 6s cubic-bezier(.45,.05,.35,1) infinite} @keyframes hzRise{0%,100%{transform:translateY(11px)}32%,74%{transform:translateY(0)}} .rv.in .hz-rays{animation:hzRays 6s ease-in-out infinite} @keyframes hzRays{0%,20%,86%,100%{opacity:0}36%,70%{opacity:1}} /* exit load: the treads rise one after another, the arrow draws down across them, and the whole thing clears and begins again */ .load-step{transform-box:fill-box;transform-origin:50% 100%} .rv.in .load-step{animation:loadRise 5.2s cubic-bezier(.3,.8,.3,1) infinite;animation-delay:calc(var(--i) * .22s)} @keyframes loadRise{0%{transform:scaleY(0);opacity:1}18%,84%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}} .load-arrow{stroke-dasharray:1} .rv.in .load-arrow{animation:loadDraw 5.2s ease-in-out infinite} @keyframes loadDraw{0%,26%{stroke-dashoffset:1;opacity:1}52%,84%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}} .rv.in .load-head{animation:loadHead 5.2s ease-in-out infinite} @keyframes loadHead{0%,48%{opacity:0}56%,84%{opacity:1}100%{opacity:0}} @media (prefers-reduced-motion:reduce){ .rv.in .rm-needle,.rv.in .rm-band.is-on,.rv.in .ring-slice, .rv.in .hz-sun,.rv.in .hz-rays,.rv.in .load-step,.rv.in .load-arrow,.rv.in .load-head{animation:none} } .rm-hub{fill:var(--ink-deep)} .rm-end{font:600 9.5px var(--sans);letter-spacing:.06em;text-transform:uppercase;fill:var(--muted)} .risk-eyebrow{margin:0 0 4px;font-size:10.4px;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--muted)} .risk-level{margin:0 0 10px;font-size:clamp(1.6rem,2.6vw,2.2rem);font-weight:500;line-height:1.1;letter-spacing:-.015em;color:#8A2318} .risk-note{margin:0;font-size:13.6px;line-height:1.65;color:var(--ink-2)} @media (prefers-reduced-motion:reduce){.rm-needle{animation:none}} @media (max-width:640px){ .risk-panel{grid-template-columns:1fr;text-align:center} .risk-dial{max-width:240px;margin:0 auto} } /* ---------- Key Information: illustrated facts ---------- The three drawn facts run across the top row; the marked ones sit below. Every picture keeps its value in words underneath it. */ .strat-facts--art dd{display:flex;flex-direction:column;gap:8px} .fact-art{display:block;width:100%;max-width:190px;height:auto;color:#173B2C;overflow:visible} .fact-band{fill:rgba(158,42,30,.18);stroke:#8A2318;stroke-width:1.2} .fact-bar{fill:#173B2C} .fact-lbl{font:500 8.5px var(--sans);fill:var(--muted)} .fact-art--ring{max-width:56px} .fact-val{font:600 8.5px var(--sans);fill:var(--ink-deep)} .strat-facts--art dt{display:flex;align-items:center;gap:8px} .fact-mark{width:24px;height:24px;flex:none;color:#173B2C} /* nine facts at three across: the whole bottom row closes, not just its last cell */ @media (min-width:901px){.strat-facts--art > div:nth-last-child(-n+3){border-bottom:0}} .ident{ display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:clamp(14px,1.6vw,22px) clamp(20px,2.4vw,36px); margin:0 0 clamp(30px,3.4vw,46px); padding:clamp(20px,2.2vw,28px) clamp(20px,2.4vw,30px); border:1px solid var(--line);border-radius:14px;background:var(--tint-4); } .ident>div{min-width:0} .ident dt{ font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:600; color:var(--muted);margin:0 0 4px; } .ident dd{ margin:0;font-size:clamp(.92rem,1.1vw,1rem);line-height:1.45; color:var(--ink-deep);font-weight:500;overflow-wrap:anywhere; } /* ---------- the advisory board ---------- Inside the team section rather than beside it, because it answers the same question. A hairline and a smaller heading do the separating, so the page does not gain a whole section for one name. */ .board{margin-top:clamp(28px,3vw,46px);padding-top:clamp(22px,2.4vw,34px);border-top:1px solid var(--line)} .board-head{ font-family:var(--sans);font-weight:500; font-size:clamp(1.3rem,2vw,1.75rem);letter-spacing:-.01em; color:var(--ink-deep);text-align:center;margin:0 0 clamp(22px,2.6vw,34px); } .board-head em{ font-family:var(--hand);font-style:normal;font-weight:600;font-size:1.16em; display:inline-block;padding:0 .14em .12em; color:#9C7614; background-image:linear-gradient(96deg, #C9A227 0%,#A8830F 22%,#7E5E0D 48%,#A8830F 74%,#CBA93A 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } @supports not (background-clip:text){ .board-head em{-webkit-text-fill-color:#9C7614;color:#9C7614} } /* ---------- the dog, on his own ---------- One card, so the three-column rack would have left it hanging at the left edge. It sits in the middle at the width the cards above it use. */ .dog-rack{display:grid;grid-template-columns:minmax(0,340px);justify-content:center;margin-top:0} /* ---------- the one card that has more to say ---------- It turns over. The front is the person; the back is what they are for. The pointer turns it as a courtesy, but the button under the role is the real control — a card that answers only to hover is a card nobody on a phone or a keyboard can read. */ .team-rack .person.person--flip{ background:none;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none; border:0;padding:0;perspective:1400px; } .person--flip .flip{ position:relative;min-height:100%; transform-style:preserve-3d;transition:transform .8s var(--ease); } /* the back is taller than the front, so it grows downward from the same top edge rather than pushing the whole rack to its height */ .person--flip .flip-face{ position:absolute;top:0;left:0;right:0;min-height:100%; backface-visibility:hidden;-webkit-backface-visibility:hidden; border-radius:16px;padding:clamp(26px,2.6vw,34px) clamp(20px,2.2vw,28px); text-align:center; box-shadow:0 1px 2px rgba(44,44,46,.04),0 18px 44px -26px rgba(44,44,46,.28); } /* a solid ground, not the frosted one the other cards use: backdrop-filter flattens a preserve-3d subtree and the card stops turning */ .person--flip .flip-front{background:#fff;position:relative} .person--flip .flip-back{ /* the same paper as the front, so the card reads as one object turning rather than two cards swapped; the writing carries the section's green, and a hairline in the same green keeps the panel's edge findable where it hangs past the card onto the wash */ background:#fff;box-shadow:0 0 0 1px rgba(30,69,48,.26),0 2px 6px rgba(44,44,46,.06),0 26px 60px -28px rgba(44,44,46,.34); color:#173B2C; transform:rotateY(180deg);text-align:left; --back-w:max(100%,min(360px,88vw)); width:var(--back-w);left:50%;right:auto;margin-left:calc(var(--back-w) / -2); /* the back holds a page of words where the front holds three lines; its own padding is fixed so the panel does not grow with the viewport and start reaching into the section below */ padding:24px 24px 20px; } .person--flip:hover .flip, .person--flip.is-flipped .flip{transform:rotateY(180deg)} /* a turned card rises over the two beside it while its back hangs below */ .person--flip:hover,.person--flip.is-flipped{z-index:5} .flip-btn{ appearance:none;background:none;border:0;padding:6px 2px 0;margin:14px 0 0; font:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase; font-weight:700;color:var(--brand);cursor:pointer; border-bottom:1px solid var(--edge);transition:border-color .25s var(--ease); } .flip-btn:hover{border-bottom-color:var(--ink)} .flip-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px} .flip-btn--back{color:#173B2C;border-bottom-color:rgba(30,69,48,.5);display:block;margin:2px auto 0} .flip-btn--back:hover{color:#173B2C;border-bottom-color:#173B2C} .flip-back p{margin:0 0 .55em;font-size:12.4px;line-height:1.5;color:#173B2C} .flip-back strong{color:#8E0024;font-weight:600} .flip-back .gn-title{font-size:14px;color:#173B2C;margin-bottom:.15em;text-align:center} .flip-back .gn-sub{font-size:12px;color:#1F3B2E} .flip-back .gn-title + .gn-sub{text-align:center;margin-bottom:1em} .flip-back .gn-punch{color:#173B2C} /* Turning a card in three dimensions is exactly the kind of motion the setting asks the browser to stop making. Without it the back simply replaces the front. */ @media (prefers-reduced-motion:reduce){ .person--flip .flip{transition:none;transform:none} .person--flip:hover .flip,.person--flip.is-flipped .flip{transform:none} .person--flip .flip-back{transform:none;opacity:0;visibility:hidden} .person--flip:hover .flip-back, .person--flip.is-flipped .flip-back{opacity:1;visibility:visible} } /* ---------- the home hero sub-line, in the hand ---------- Written in the handwritten face, like the two actions beneath it, and set large enough that the face stays legible on the photograph. Appended last so it wins over the earlier .hero-lede sizes. */ .hero-lede{ font-family:var(--hand);font-weight:500;letter-spacing:0; font-size:clamp(1.75rem,2.7vw,2.4rem);line-height:1.25; max-width:36ch;margin-inline:auto;text-align:center; } /* ---------- the headline, written live ---------- "Wealth That Lasts." is written across from left to right, as a pen would take it, while the sub-line beneath it stands still. The headline is painted with a gold gradient clipped to its letters and a drop shadow, so it cannot be split into separately animated letters: a transformed inline-block letter would lose the gradient and render invisible. Instead a mask with a soft edge travels across the whole line. The mask is applied after the gradient and the shadow are drawn, so the gold, the handwritten "Lasts." and the shadow all arrive exactly as they are at rest. Only the mask position animates. Geometry: the mask is 250% of the headline's width, opaque for its first 46% and transparent from 54%. Parked at 100% the headline sees only the transparent end; at 0 it sees only the opaque start. The 8% soft band is the pen's edge, about a fifth of the headline wide. */ .hero h1{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 46%,transparent 54%,transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 46%,transparent 54%,transparent 100%); -webkit-mask-size:250% 100%;mask-size:250% 100%; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; /* Parked at 90%, not 100%: from 100% the soft edge had to travel a tenth of the way before the first letter showed, so the writing seemed to start late. At 90% the pen is already touching the first letter. The run ends at 8%, where the whole line is already opaque, so no time is spent at the end moving a mask over finished words. */ -webkit-mask-position:90% 0;mask-position:90% 0; /* a steady hand over 5.5s, starting almost at once and without a slow run-in */ animation:heroWrite 5.5s cubic-bezier(.2,.3,.45,1) .1s forwards; } @keyframes heroWrite{ to{-webkit-mask-position:8% 0;mask-position:8% 0} } @media (prefers-reduced-motion:reduce){ .hero h1{-webkit-mask-image:none;mask-image:none;animation:none} } /* the action under the suitability list, centred like the list above it */ .who-cta{margin:clamp(26px,3vw,40px) 0 0;text-align:center} /* the same size and green stroke the strategy pages give their closing invitation, so the two read as the same gesture */ .who-cta .btn{ font-size:clamp(1.35rem,2vw,1.85rem);padding:14px 8px; background-image:var(--stroke-nav); } .who-cta .btn:hover{background-image:var(--stroke-nav-deep)} .who-links{ max-width:58ch;margin:clamp(14px,1.6vw,20px) auto 0;text-align:center; font-size:13.2px;line-height:1.7;color:var(--muted); } /* ---------- Who Should Invest: a tighter page ---------- One heading, one list, one close. The default page rhythm left a screen of empty paper between the banner and the first card, which on a page that is nothing but a list reads as a missing section. */ body.page-who-should-invest .pbanner{padding:clamp(72px,8vw,118px) 0 clamp(36px,4vw,60px)} body.page-who-should-invest .section{padding:clamp(30px,3.4vw,52px) 0} body.page-who-should-invest .who-lede{ margin-bottom:clamp(20px,2.2vw,28px); font-size:clamp(1.15rem,1.7vw,1.45rem);font-weight:600;color:var(--ink-deep); } /* ---------- wide screens ---------- The page was a 1240px column however large the window, and the racks inside it were held to the 880px reading measure, so on a 1920px display the cards stayed small while the paper either side of them grew to 340px. The column and the furniture inside it now use the room. Prose does not: the reading measure stays where it is, because a 130-character line is harder to read, not easier, and the headings stay centred on it. */ @media (min-width:1500px){ :root{--wrap:1380px} .about-rack,.team-rack,.angel-rack,.safety-rack, .icon-list--pair,.strat-facts,.strat-steps, .how-rack,.how-map,.pms-card,.steward-card{max-width:1120px} .offer-rack{max-width:1180px} .who-list{max-width:min(1180px,100%)} } @media (min-width:1800px){ :root{--wrap:1500px} .about-rack,.team-rack,.angel-rack,.safety-rack, .icon-list--pair,.strat-facts,.strat-steps, .how-rack,.how-map,.pms-card,.steward-card{max-width:1220px} .offer-rack{max-width:1280px} .who-list{max-width:min(1280px,100%)} } /* ---------- one behaviour for every card under the pointer ---------- Three things were making the hover feel unsettled. The cards transitioned `all` — the shorthand `.3s var(--ease)` with no property list — so the browser animated whatever happened to change, including the hand-drawn SVG filter inside each card, which has to be re-rasterised on every frame it moves. Only the properties that actually move are transitioned now. Each family also lifted by a different amount, or not at all: two pixels on a plain card, three on an offering, none on a person. One distance for all of them, so a page of cards answers the pointer one way. And :hover latches on a touch screen after a tap, leaving a card lifted or a card turned with no way to put it back, so the pointer behaviours are guarded on a device that actually has a pointer. */ .card,.person,.who-list li,.offer-card--linked, .about-card,.safety-card,.doc-list li{ transition:transform .24s var(--ease),box-shadow .24s var(--ease), border-color .24s var(--ease),background-color .24s var(--ease); } @media (hover:hover) and (pointer:fine){ .card:hover,.who-list li:hover,.offer-card--linked:hover, .person:not(.person--flip):hover{transform:translateY(-2px)} /* a pointer crossing the turning card on its way somewhere else should not set it spinning: the turn waits a moment to start, and comes back the instant the pointer leaves */ .person--flip:hover .flip{transition-delay:.12s} } @media (hover:none){ .card:hover,.who-list li:hover,.offer-card--linked:hover{transform:none} .person--flip:hover .flip{transform:none} .person--flip.is-flipped .flip{transform:rotateY(180deg)} } @media (prefers-reduced-motion:reduce){ .card,.person,.who-list li,.offer-card--linked, .about-card,.safety-card,.doc-list li{transition:none} .card:hover,.who-list li:hover,.offer-card--linked:hover, .person:not(.person--flip):hover{transform:none} } /* ---------- the turning card, sized to what it holds ---------- On the team rack the back hung below the front so that one long card did not set the height of the two beside it. In its own section there is nothing beside it, and the overhang reached into the footer — 148px of it at 320px wide, where the note wraps longest. So the two faces swap roles here: the back sits in the flow and sets the height, the front is laid over it. The card is then exactly as tall as the note at every width, with no measurement to keep up to date, and the turn happens entirely inside the section. */ /* the qualification under the key information table: a footnote to the numbers above it, so it is set smaller and in the secondary ink */ .fact-note{ max-width:min(74ch,100%);margin:clamp(16px,1.8vw,24px) auto 0; font-size:13.6px;line-height:1.72;font-weight:600; color:var(--ink-2);text-align:center; } .fn-mark{color:#8E0024;font-weight:700} sup.fn-mark{font-size:.72em;vertical-align:super;line-height:0;margin-left:1px} /* ---------- the suitability list, as one sheet ---------- Fifteen identical white boxes, each with the same tick in the same green disc, read as one grey texture: nothing in it told the eye where it was, and the repeated mark stopped carrying meaning by the third row. It is one sheet now, ruled like the key-information panel the strategy page already uses — the pattern this site reaches for whenever it has a list of facts to set. The numbers do the work the ticks were failing to do: they give the reader a position in a long list and something to refer to. Set in the light weight and the deep green the how-it-works numerals use, so the page keeps one voice. */ .who-sheet{ list-style:none;margin:0 auto;padding:0;max-width:min(1060px,100%); display:grid;grid-template-columns:repeat(2,minmax(0,1fr)); background:#fff;border:1px solid var(--line);border-radius:18px; box-shadow:0 1px 2px rgba(20,32,24,.04),0 26px 52px -38px rgba(20,32,24,.45); overflow:hidden; } .who-sheet li{ display:grid;grid-template-columns:auto minmax(0,1fr); gap:clamp(14px,1.4vw,18px);align-items:start; padding:clamp(20px,2vw,26px) clamp(22px,2.2vw,30px); border-top:1px solid var(--line); transition:background-color .24s var(--ease); } .who-sheet li:nth-child(-n+2){border-top:0} .who-sheet li:nth-child(odd){border-right:1px solid var(--line)} /* fifteen is odd, so the last point takes the full width rather than leaving a ruled blank beside it */ .who-sheet li:last-child:nth-child(odd){grid-column:1 / -1;border-right:0} .who-sheet p{ margin:0;font-size:clamp(15px,1.15vw,16.5px);line-height:1.68; color:var(--ink-deep); } .who-sheet strong{font-weight:600;color:#14201A} .who-n{ font-size:clamp(1.5rem,2.1vw,1.9rem);font-weight:300;line-height:1.05; letter-spacing:-.03em;color:rgba(30,69,48,.5); font-variant-numeric:tabular-nums; } @media (hover:hover) and (pointer:fine){ .who-sheet li:hover{background:var(--tint-4)} .who-sheet li:hover .who-n{color:rgba(30,69,48,.85)} } @media (max-width:860px){ .who-sheet{grid-template-columns:1fr;max-width:640px} .who-sheet li:nth-child(2){border-top:1px solid var(--line)} .who-sheet li:nth-child(odd){border-right:0} } @media (prefers-reduced-motion:reduce){ .who-sheet li{transition:none} } /* portrait cards keep role spacing; row cards own their own stack */ .team-rack .person:not(.person--row) .role{margin-bottom:18px} .team-rack .person--row .role{margin-bottom:0} .team-rack .face{ width:66px;height:66px;padding:0;margin:0 auto 16px; background:none;border-radius:0;color:#173B2C; } /* ---------- the people, across rather than down ---------- Identity on the left — portrait, name, role, on a column of its own with a rule down its edge — and the biography beside it. Four of these stack in about the height two of the old cards took, and every row begins at the same place, which a two-up grid of centred cards never did. Under 720px the two columns become one: the identity block goes to the top and the paragraphs follow it, still left. */ .team-rows{display:grid;grid-template-columns:1fr;gap:clamp(14px,1.6vw,20px)} .person--row{ display:grid;grid-template-columns:minmax(176px,220px) minmax(0,1fr); column-gap:clamp(20px,2.5vw,34px);align-items:stretch;text-align:left; padding:clamp(22px,2.4vw,32px) clamp(20px,2.2vw,30px); } .person--row .person-id{ display:flex;flex-direction:column;align-items:center; justify-content:flex-start; text-align:center; width:100%; min-width:0; box-sizing:border-box; border-right:1px solid var(--line); padding:2px clamp(12px,1.4vw,18px) 2px 0; } .person--row .person-id .person-photo, .person--row .person-id .face{ width:112px;height:112px;margin:0 auto 14px; flex:0 0 auto; align-self:center; } .person--row .person-id h3{ display:block; width:100%; max-width:100%; margin:0 0 .28em; padding:0; font-size:clamp(1.08rem,1.3vw,1.26rem); font-weight:600; line-height:1.3; letter-spacing:-.015em; text-align:center; text-wrap:balance; overflow-wrap:anywhere; } .person--row .person-id .role{ display:block; width:100%; max-width:100%; margin:0; padding:0; font-size:11px; letter-spacing:.12em; line-height:1.45; text-align:center; text-wrap:balance; } .person--row .person-in{ margin:12px auto 0; flex:0 0 auto; align-self:center; } .person-bio, .person-bio--rich{ min-width:0; padding-top:4px; } .person-bio--rich{ font-size:clamp(14.5px,1.05vw,16px); color:var(--ink-2); line-height:1.75; text-align:left; } .person-bio--rich p{margin:0 0 1em;color:var(--ink-2)} .person-bio--rich p:first-child{color:var(--ink)} .person-bio--rich p:last-child{margin-bottom:0;color:var(--muted)} .person-bio--rich strong,.person-bio--rich b{font-weight:600;color:var(--ink-deep)} .person--row .bio{ font-size:clamp(14.2px,1.02vw,15.5px);line-height:1.72;color:var(--ink-2); text-align:left;margin:0 0 1em; } .person--row .bio:first-child{color:var(--ink)} .person--row .bio:last-child{margin-bottom:0} .person--row .bio strong{font-weight:600;color:var(--ink-deep)} @media (max-width:720px){ .person--row{grid-template-columns:1fr;row-gap:16px;column-gap:0} .person--row .person-id{ border-right:0;border-bottom:1px solid var(--line); padding:0 0 16px; } .person--row .person-id .person-photo, .person--row .person-id .face{width:96px;height:96px} .person-bio,.person-bio--rich{padding-top:0} } /* ---------- who they are, on the portrait ---------- The angels are a list of names, and the writing about one of them would make its row several times the height of the rows beside it. So it sits over the list instead, shown while the pointer is on the portrait. The panel takes the width of the cell that holds it, which is what keeps it honest: it cannot reach past its own column, so there is nothing to overflow at any screen width and no script needed to place it. The portrait is focusable and the panel opens on focus as well as hover, so it is reachable from the keyboard and on a touch screen, where there is no pointer to hover with. */ .pop-host{position:relative} .pop-trigger{ display:block;cursor:help;border-radius:50%; transition:transform .22s var(--ease); } .pop-trigger:focus-visible{outline:2px solid var(--ink);outline-offset:3px} .pop-panel{ position:absolute;left:0;top:calc(100% - 6px);z-index:6; width:100%;box-sizing:border-box; background:#fff;border:1px solid var(--line);border-radius:12px; box-shadow:0 2px 6px rgba(20,32,24,.06),0 24px 48px -28px rgba(20,32,24,.5); padding:14px 16px; font-size:12.8px;line-height:1.6;color:var(--ink-2); text-align:left;letter-spacing:0;text-transform:none;font-weight:400; opacity:0;visibility:hidden;transform:translateY(-6px); transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s .22s; } .pop-para{display:block} .pop-para + .pop-para{margin-top:.7em} .pop-panel strong{font-weight:600;color:var(--ink-deep)} .pop-host:hover .pop-panel, .pop-host:focus-within .pop-panel{ opacity:1;visibility:visible;transform:none;transition-delay:0s; } @media (hover:hover) and (pointer:fine){ .pop-host:hover .pop-trigger{transform:translateY(-1px)} } @media (prefers-reduced-motion:reduce){ .pop-panel{transition:opacity .01s,visibility 0s} .pop-trigger{transition:none} } .team-rack.board-rack{gap:clamp(16px,1.8vw,22px)} /* ---------- the dog's note, in a panel ---------- His note is a page of short paragraphs rather than the two or three sentences an angel sends, so the panel it sits in sets them the way the back of the card used to: the heading centred, the punchline in the firm's green, the bold phrases in crimson, because that is the joke's own voice and it should not be flattened into body copy. */ .dog-rack .pop-trigger{margin:0 auto} .pop-panel p{margin:0 0 .55em;font-size:12.4px;line-height:1.55;color:#173B2C} .pop-panel p:last-child{margin-bottom:0} .pop-panel strong{color:#8E0024;font-weight:600} .pop-panel .gn-title{font-size:14px;color:#173B2C;margin-bottom:.15em;text-align:center} .pop-panel .gn-sub{font-size:12px;color:#1F3B2E;text-align:center} .pop-panel .gn-title + .gn-sub{margin-bottom:1em} .pop-panel .gn-punch{color:#173B2C} .pop-panel .gn-punch strong{color:#8E0024} /* ---------- the dog, without a card ---------- He is one drawing in a section of his own, so the plate around him was framing nothing. The paper, the hairline and the shadow go; the portrait, the name and the role stay, and the panel still takes its width from the column he stands in. */ .dog-rack .person, .dog-rack .person:hover{ background:none;border:0;box-shadow:none;padding:0; } /* the line that closes the angels: italic and bold in the green the section is set in, held to a reading measure and centred under the list, with the quotation marks in the gold the heading's last word uses */ .angel-close{ max-width:66ch;margin:clamp(30px,3.4vw,46px) auto 0; text-align:center;font-style:italic;font-weight:600; font-size:clamp(15px,1.2vw,16.8px);line-height:1.72; color:#173B2C; } .angel-quote{ color:#9C7614;font-style:normal;font-weight:700; font-size:1.5em;line-height:0;vertical-align:-.2em; } .angel-quote:first-child{margin-right:.06em} .angel-quote:last-child{margin-left:.06em} /* the profile link under a person's role: the footer's glyph at the size a secondary link should be, with a target big enough to hit (WCAG 2.2 AA wants 24px) */ .person-in{ display:inline-grid;place-items:center; width:26px;height:26px;margin-top:12px; color:var(--muted);border-radius:50%; transition:color .22s var(--ease),background-color .22s var(--ease); } .person-in:hover{color:#173B2C;background:rgba(30,69,48,.08)} .person-in:focus-visible{outline:2px solid var(--ink);outline-offset:2px} /* ---------- the dog's note, to his right ---------- His note is long enough that hanging it under him reached into the footer. Beside him there is room for it, and nothing below moves. Only where the room actually exists: he stands in a 340px column in the middle of the page, so a 320px panel and its gap need about 1050px of window before they clear the right-hand gutter. Under that it goes back to hanging beneath him, where it cannot overflow anything. */ @media (min-width:900px){ .dog-rack .pop-panel{ top:0;left:calc(50% + 46px); width:320px; transform:translateX(-8px); } .dog-rack .pop-host:hover .pop-panel, .dog-rack .pop-host:focus-within .pop-panel{transform:none} } /* ---------- the nav submenu ---------- The markup for this has existed since the navigation was written and was never used, so it had no styles: an item with children would have dropped a permanently open list into the header. It opens on hover and on focus-within, which means no script and a keyboard route through it. The panel is padded above by the gap it hangs in, so the pointer can cross from the parent to the panel without falling through the crack between them. */ .main-nav .has-sub{position:relative} .main-nav .sub{ position:absolute;top:100%;left:50%;transform:translate(-50%,-6px); min-width:190px;margin:0;padding:8px;list-style:none; background:#fff;border:1px solid var(--line);border-radius:14px; box-shadow:0 2px 6px rgba(20,32,24,.06),0 22px 44px -26px rgba(20,32,24,.45); opacity:0;visibility:hidden;z-index:60; transition:opacity .2s var(--ease),transform .2s var(--ease),visibility 0s .2s; } /* the strip the pointer crosses on its way down */ .main-nav .has-sub::after{content:'';position:absolute;top:100%;left:0;right:0;height:10px} .main-nav .has-sub:hover .sub, .main-nav .has-sub:focus-within .sub{ opacity:1;visibility:visible;transform:translate(-50%,0);transition-delay:0s; } .main-nav .sub a{ display:block;padding:9px 12px;border-radius:9px; font-family:var(--sans);font-size:13.2px;font-weight:500; color:var(--ink-2);text-decoration:none;white-space:nowrap; transition:color .18s var(--ease),background-color .18s var(--ease); } .main-nav .sub a:hover{color:var(--ink);background-color:var(--tint-2)} .main-nav .sub a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px} .main-nav .caret{flex:none;transition:transform .2s var(--ease)} .main-nav .has-sub:hover .caret, .main-nav .has-sub:focus-within .caret{transform:rotate(180deg)} @media (prefers-reduced-motion:reduce){ .main-nav .sub,.main-nav .caret{transition:none} } /* the mobile menu renders the children as a nested list, which needs no opening and closing — only indenting */ .mobile-nav ul ul{list-style:none;margin:2px 0 6px;padding-left:18px} .mobile-nav ul ul a{font-size:15px;color:var(--muted)} /* the drafts on the Blogs page */ .post-list{list-style:none;margin:0;padding:0} .post-list li{ padding:clamp(20px,2.2vw,28px) 0;border-top:1px solid var(--line); } .post-list li:first-child{border-top:0;padding-top:0} .post-cat{ font-size:10.4px;letter-spacing:.18em;text-transform:uppercase; font-weight:700;color:var(--brand);margin-bottom:8px; } .post-list h3{font-size:clamp(1.1rem,1.5vw,1.3rem);font-weight:500;margin-bottom:10px} .post-excerpt{font-size:14.6px;line-height:1.7;color:var(--ink-2);margin-bottom:8px} .post-state{font-size:12.4px;color:var(--muted);font-style:italic;margin:0} /* ---------- the navigation stays on one line ---------- Six items, a logo and two buttons in one row. Three guards, none of which changes how anything looks when there is room: nothing in the row may wrap — without this, "Who Should Invest" breaks across two lines before the row itself does, which is the distortion that shows first; the row may not wrap either, so a tight window shortens the gaps rather than dropping the buttons to a second line; and the gaps are a shade tighter than they were, which buys back about thirty pixels at the width where it was closest. */ .head-inner{flex-wrap:nowrap;gap:20px} .main-nav>ul{flex-wrap:nowrap;gap:clamp(14px,1.9vw,28px)} .main-nav .nav-link{white-space:nowrap} .head-cta{flex-wrap:nowrap} .head-cta .btn{white-space:nowrap} /* ---------- a smaller header ---------- The serif navigation was set at 17.5px in an 82px bar, which was drawn for five items. With six it is heavy at the top of every page, so the type comes down two points and the bar with it. The proportions hold: the logo, the buttons and the underline all key off the same row. It also buys back about forty pixels of width, which the row spends on the gaps rather than on being tight. */ .head-inner{min-height:70px} .main-nav .nav-link{font-size:15.6px} .main-nav .sub a{font-size:12.8px} /* ---------- an article ---------- A single column at the reading measure, with the headings and paragraphs given the room a long read needs rather than the room a card needs. */ .post-body h2{ font-size:clamp(1.24rem,1.7vw,1.5rem);font-weight:500; margin:clamp(30px,3.2vw,44px) 0 12px;color:var(--ink); } .post-body p{margin:0 0 1.05em;font-size:15.6px;line-height:1.78;color:var(--ink-2)} .post-body ul,.post-body ol{margin:0 0 1.2em;padding-left:22px} .post-body li{margin:0 0 .5em;font-size:15.6px;line-height:1.75;color:var(--ink-2)} .post-body strong{color:var(--ink-deep);font-weight:600} .post-meta{ font-size:12.6px;color:var(--muted);letter-spacing:.01em; padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:clamp(22px,2.4vw,32px); } .post-cta{margin-top:clamp(26px,3vw,40px)} .post-body .tbl{width:100%;border-collapse:collapse;margin:0 0 1.4em;font-size:14.6px} .post-body .tbl th,.post-body .tbl td{ text-align:left;padding:10px 12px;border-bottom:1px solid var(--line); } .post-body .tbl th{ font-size:10.6px;letter-spacing:.14em;text-transform:uppercase; color:var(--brand);font-weight:700; } .post-list h3 a{color:inherit;text-decoration:none;border-bottom:1px solid var(--edge)} .post-list h3 a:hover{border-bottom-color:var(--ink)} /* ---------- the two header buttons ---------- They came down with the bar when the navigation was made smaller, which was not the intention: they are the only two actions in the header and they should be the heaviest things in it. Bigger than they were before the bar shrank, while the nav type stays where it is. */ .head-cta{gap:12px} .head-cta .btn{ padding:14px 32px;font-size:23px;line-height:1.15;letter-spacing:.005em; border-radius:var(--pill); } /* ---------- the Advisory Board heading ---------- It was set at 1.3–1.75rem, a size below the section heads it sits among, because it began as a sub-heading inside One Team. It now reads as the section it actually is: the same size as "One Team" above it and "Backed by our Angels" below, so the three carry equal weight down the page. */ .board-head{ font-size:clamp(2.1rem,3.2vw,2.9rem); letter-spacing:-.018em;line-height:1.14; margin-bottom:clamp(26px,3vw,40px); } /* ---------- across systems, platforms and screens ---------- Three fixes, each for a specific platform behaviour rather than a general tidy-up. 1. iOS zooms the whole page when a text field smaller than 16px takes focus, and then leaves the visitor zoomed in on a form they now have to pan around. The fields are set at 15px, which is the right size on a desktop and the wrong size on a phone, so they go to 16px on touch devices only and the desktop is left alone. This matters more than it sounds: the enquiry form is the site's only conversion. 2. iOS paints a grey box over anything tapped. Removing it entirely takes away the only feedback a tap gives, so it becomes a faint tint of the firm's own green instead. 3. Windows draws a scrollbar that takes real width; macOS overlays one that does not. A page that is short enough not to scroll and then grows — which is what the turned cards and the hover panels do — shifts sideways by the width of that scrollbar as it appears. Reserving the gutter stops the shift, on the platforms that have it. Deliberately not added: overflow-x:hidden on the root. It hides horizontal overflow rather than fixing it, and the audit's job is to find that overflow. */ @media (pointer:coarse){ .form-grid input,.form-grid select,.form-grid textarea, .field input[type="number"],.field select{font-size:16px} } html{-webkit-tap-highlight-color:rgba(30,69,48,.12)} html{scrollbar-gutter:stable} /* ---------- the hero, made to actually fit the screen ---------- The hero is pulled up under the sticky header by --head-h so its photograph runs behind the bar. It was then given a height of 100svh — the height of the screen — which made it 100svh tall starting --head-h above the top of the screen. Its bottom edge therefore fell --head-h below the fold every time, and the seal that hangs from it with it. The height now carries the same --head-h it was moved up by, so the bottom edge lands exactly on the fold. And the content: a flex box centres its children in the content box, so with equal padding the block sat --head-h/2 high — it was centring on the whole hero, including the part hidden behind the header, rather than on the part you can see. Adding --head-h to the top padding alone moves the centre down by half of it, which is exactly the correction needed. */ .hero{ min-height:calc(100vh + var(--head-h)); min-height:calc(100svh + var(--head-h)); padding-top:calc(clamp(64px,7vw,112px) + var(--head-h)); padding-bottom:clamp(64px,7.4vw,118px); } /* a photographed portrait, sized and placed exactly as the drawn ones are, so a row with a photograph in it lines up with a row without */ .person-photo{ width:66px;height:66px;display:block;margin:0 auto 16px; border-radius:50%;object-fit:cover;object-position:50% 20%; background:var(--tint-2); } /* ---------- the portraits, a size up ---------- 66px suited a drawing with a name under it. A photograph carries detail that a line drawing does not, and the row has the room, so both go to 88px — both, so that a row with a photograph still lines up with a row without one. The source file is 264px, which is still three times the new display size. */ .team-rack .face{width:88px;height:88px;margin-bottom:18px} .person-photo{width:88px;height:88px;margin-bottom:18px} /* the photograph alone goes up again. A face with real detail in it can carry a larger circle than a line drawing can, and hers is the only one on the page. The source is 264px, so 112px is still better than a two-times pixel ratio. */ .person-photo{width:112px;height:112px;margin-bottom:18px} /* ---------- photographed angels ---------- The photographs come from twelve different cameras, backgrounds and decades. What makes a set like that read as one set is not retouching it is consistency of frame: the same circle, the same size, the same crop rule, and a hairline ring so a pale background does not dissolve into the page while a dark one sits heavy. */ .angel-photo{ width:58px;height:58px;flex:none;display:block; border-radius:50%;object-fit:cover;object-position:50% 18%; background:var(--tint-2); box-shadow:inset 0 0 0 1px rgba(20,32,24,.10); } .angel-rack li:has(.angel-photo){align-items:flex-start} /* ---------- in their words ---------- Same wash as other home paper sections. Edges dissolve with a mask (no hard white bars). Cards read as paper quotes, not app tiles. */ .voices .wrap{overflow:visible;max-width:none;padding-inline:0} .voices .sec-head, .voices .steward-cta, .voices .voice-note{ max-width:var(--wrap); margin-inline:auto; padding-inline:32px; box-sizing:border-box; } .voices .sec-head{margin-bottom:clamp(20px,2.3vw,34px)} .voice-scroll{ --voice-edge:clamp(36px,6vw,88px); position:relative; width:100%; overflow:hidden; padding:12px 0 16px; -webkit-mask-image:linear-gradient(90deg,transparent 0, #000 var(--voice-edge), #000 calc(100% - var(--voice-edge)), transparent 100%); mask-image:linear-gradient(90deg,transparent 0, #000 var(--voice-edge), #000 calc(100% - var(--voice-edge)), transparent 100%); } .voice-track{ display:flex;gap:clamp(16px,2.2vw,28px); width:max-content; padding:6px var(--voice-edge); will-change:transform; } .voice-scroll.is-looping .voice-track{ animation:voiceMarquee var(--voice-duration,48s) linear infinite; } .voice-scroll.is-looping:hover .voice-track, .voice-scroll.is-looping:focus-within .voice-track{ animation-play-state:paused; } @keyframes voiceMarquee{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-50%,0,0)} } .voice-card{ box-sizing:border-box; flex:0 0 min(280px,78vw); display:flex;flex-direction:column;align-items:flex-start;gap:12px; margin:0;padding:clamp(18px,2vw,24px) 4px 8px; border:0;border-top:2px solid rgba(156,118,20,.38); border-radius:0; background:transparent; box-shadow:none; color:inherit;font:inherit;text-align:left; cursor:pointer;-webkit-tap-highlight-color:transparent; transition:opacity .22s var(--ease),border-color .22s var(--ease); min-height:210px; } .voice-card:hover,.voice-card:focus-visible{ border-top-color:rgba(156,118,20,.7); outline:none; } .voice-card:focus-visible{ outline:2px solid rgba(30,69,48,.35);outline-offset:6px; } .voice-card-top{ display:flex;align-items:center;justify-content:space-between; gap:12px;width:100%; } .voice-mark{ font-family:var(--serif);font-size:2.5rem;line-height:.7;color:#9C7614; } .voice-preview{ margin:0;flex:1; font-size:clamp(14.6px,1.2vw,16.2px);line-height:1.7; color:var(--ink-2);font-style:italic; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden; } .voice-meta{ display:flex;flex-direction:column;gap:3px;width:100%; padding-top:4px; } .voice-name{ font-size:15px;font-weight:600;color:var(--ink-deep);letter-spacing:-.005em; font-style:normal; } .voice-role{ font-size:11px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);font-weight:600;font-style:normal; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; } .voice-more{ display:inline-flex;align-items:center;min-height:36px;padding:0; font-size:11.4px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--ink);font-style:normal; border-bottom:1px solid rgba(30,69,48,.28); background:transparent;border-radius:0; } .voice-card:hover .voice-more,.voice-card:focus-visible .voice-more{ border-bottom-color:rgba(30,69,48,.55); background:transparent; } .voice-note{ max-width:74ch;margin:clamp(22px,2.6vw,34px) auto 0;text-align:center; font-size:12.6px;line-height:1.7;color:var(--muted); } @media (prefers-reduced-motion:reduce){ .voice-scroll{ overflow-x:auto;scrollbar-width:none; -webkit-mask-image:none;mask-image:none; } .voice-scroll::-webkit-scrollbar{display:none} .voice-scroll.is-looping .voice-track{animation:none} } @media (max-width:560px){ .voice-card{flex-basis:min(260px,82vw);min-height:200px} } .voice-dialog{ padding:0;border:0;border-radius:14px; width:min(560px,calc(100vw - 28px)); max-height:min(82vh,720px); background:#fbfaf6;color:var(--ink); box-shadow:0 24px 60px rgba(20,32,24,.22); } .voice-dialog::backdrop{background:rgba(16,28,20,.48);backdrop-filter:blur(2px)} .voice-dialog-panel{ position:relative;padding:clamp(22px,4vw,32px); overflow:auto;max-height:min(82vh,720px); } .voice-dialog-close{ position:absolute;top:10px;right:10px; width:44px;height:44px;border:0;border-radius:999px; background:transparent;color:var(--ink);font-size:1.6rem;line-height:1; cursor:pointer; } .voice-dialog-close:hover,.voice-dialog-close:focus-visible{background:rgba(20,32,24,.06)} .voice-dialog-kicker{ margin:0 0 14px;padding-right:40px; font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700; color:#9C7614; } .voice-dialog-quote{ margin:0 0 18px; font-size:clamp(15.5px,1.35vw,17.5px);line-height:1.75; color:var(--ink-2);font-style:italic; } .voice-dialog-quote::before{ content:'\201C';font-family:var(--serif);font-style:normal; font-size:1.7em;line-height:0;color:#9C7614;margin-right:.05em;vertical-align:-.28em; } .voice-dialog-name{ margin:0;font-size:16px;font-weight:600;color:var(--ink-deep); } .voice-dialog-role{ margin:4px 0 0;font-size:11.4px;letter-spacing:.1em;text-transform:uppercase; color:var(--muted);font-weight:600; } @media (max-width:560px){ .voice-card{flex-basis:min(280px,86vw)} } /* ---------- a flag above a page title ---------- Set as the small capitals the site uses for a label, in the crimson it keeps for the one mark that matters on a page, with a rule under it so it reads as an instruction rather than as a category. */ .pbanner-flag{ display:inline-block;margin:0 0 clamp(12px,1.4vw,18px); padding-bottom:5px;border-bottom:2px solid #8E0024; font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700; color:#8E0024; } /* a section arrived at from the menu stops below the sticky header rather than underneath it */ #team,#board,#angels{scroll-margin-top:calc(var(--head-h) + 18px)} /* ---------- a section that folds ---------- The heading is the control, so it carries the pointer and a mark that says which way it will move. The browser's own triangle is removed: it sits at the wrong size beside a section head and cannot be styled reliably across browsers. */ .fold{border:0;padding:0;margin:0} .fold > summary{ display:block;list-style:none;cursor:pointer; position:relative;padding-right:46px; } .fold > summary::-webkit-details-marker{display:none} .fold > summary::marker{content:''} .fold > summary > h2{margin:0} .fold > summary::after{ content:'';position:absolute;right:8px;top:50%; width:12px;height:12px;margin-top:-8px; border-right:2px solid rgba(30,69,48,.55); border-bottom:2px solid rgba(30,69,48,.55); transform:rotate(45deg);transform-origin:center; transition:transform .28s var(--ease),border-color .28s var(--ease); } .fold[open] > summary::after{transform:rotate(-135deg);margin-top:-2px} .fold > summary:hover::after{border-color:#173B2C} .fold > summary:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:6px} /* the contents arrive rather than appear */ .fold[open] > :not(summary){animation:foldIn .36s var(--ease) both} @keyframes foldIn{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} } /* the heading sits centred like every other section head, and the board's keeps its own smaller treatment */ .fold > summary .sec-head,.fold > summary h2{text-align:center} .about-team .fold > summary{margin-bottom:clamp(20px,2.3vw,34px)} @media (prefers-reduced-motion:reduce){ .fold[open] > :not(summary){animation:none} .fold > summary::after{transition:none} } /* ---------- the three ways into the people ---------- Cards on the About page, standing where the people themselves used to. Each is a whole link rather than a card with a link in it, so the target is the card and not a line of text inside it. */ .people-rack{max-width:min(1040px,100%);margin:0 auto;align-items:stretch} .people-card{ display:flex;flex-direction:column;text-decoration:none;color:inherit; } .people-card h3{ font-size:clamp(1.08rem,1.4vw,1.26rem);font-weight:500; color:var(--ink);margin-bottom:10px; } .people-card p{ font-size:14.4px;line-height:1.7;color:var(--ink-2);margin:0 0 18px;flex:1; } .people-go{ font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700; color:var(--brand);border-bottom:1px solid var(--edge); align-self:flex-start;padding-bottom:3px; transition:border-color .22s var(--ease); } .people-card:hover .people-go{border-bottom-color:var(--ink)} /* the line at the foot of each of the three pages, and the note on the board */ .people-next,.people-note{ max-width:var(--m-read);margin:clamp(28px,3vw,42px) auto 0;text-align:center; font-size:13.4px;line-height:1.7;color:var(--muted); } .people-note{margin-top:clamp(22px,2.4vw,32px)} /* a nav item that is a menu rather than a link: it has to look identical to the links beside it, which a button does not by default */ .nav-link--menu{ appearance:none;-webkit-appearance:none; border:0;margin:0;cursor:default; background-color:transparent; color:inherit;line-height:inherit;text-align:inherit; } .nav-link--menu:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:6px} /* the same, in the phone menu */ .mobile-group{ display:block;font-size:inherit;color:var(--ink);font-weight:600; } /* a section arrived at from the menu stops below the sticky header */ #how-we-work{scroll-margin-top:calc(var(--head-h) + 18px)} /* ---------- the people pages, in the hand ---------- The banner heading takes the same accent the section heads use: the part that names the thing is written rather than set, a size and a third up because a script at the size of a grotesk reads small beside it. */ .pbanner h1 em{ font-family:var(--hand);font-style:normal;font-weight:600; font-size:1.26em;line-height:1;letter-spacing:.005em; display:inline-block;color:#173B2C; } /* two of them in gold: the same ramp the board and the angels carried when they were sections of the About page */ body.page-advisory-board .pbanner h1 em, body.page-backed-by-angels .pbanner h1 em{ padding:0 .14em .12em; color:#9C7614; background-image:linear-gradient(96deg, #C9A227 0%,#A8830F 22%,#7E5E0D 48%,#A8830F 74%,#CBA93A 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } @supports not (background-clip:text){ body.page-advisory-board .pbanner h1 em, body.page-backed-by-angels .pbanner h1 em{ background-image:none;-webkit-text-fill-color:#9C7614;color:#9C7614; } } /* ---------- the line under the angels ---------- It was set in the hand and set large when it sat inside the section on the About page. Becoming a page banner lede put it back into the plain face at the plain size; this returns it to what it was. */ body.page-backed-by-angels .pbanner .lede{ font-family:var(--hand);font-style:italic;font-weight:500; font-size:clamp(1.45rem,2.5vw,2.15rem);line-height:1.45; color:#173B2C;max-width:none; } /* ---------- the Advisory Board page, tightened ---------- One card, and 90px of paper between it and the heading — the banner's bottom padding and the section's top padding stacked, both sized for a page with several blocks on it. The board has one. The two lines beneath come up with it, and the page closes sooner. */ body.page-advisory-board .pbanner{padding-bottom:clamp(18px,2vw,28px)} body.page-advisory-board .section{padding:clamp(20px,2.2vw,32px) 0 clamp(26px,2.8vw,40px)} body.page-advisory-board .people-note{margin-top:clamp(16px,1.8vw,24px)} body.page-advisory-board .people-next{margin-top:clamp(18px,2vw,26px)} /* the Team page closes up the same way the board page did: the banner's bottom padding and the section's top padding were stacked for a page with several blocks on it */ body.page-our-team .pbanner{padding-bottom:clamp(18px,2vw,28px)} body.page-our-team .section{padding:clamp(20px,2.2vw,32px) 0 clamp(26px,2.8vw,40px)} body.page-our-team .team-lead{margin-bottom:clamp(20px,2.2vw,30px)} body.page-our-team .people-next{margin-top:clamp(18px,2vw,26px)} /* the note under the board reads as an aside about what an advisor is and is not, so it is set in italic rather than in the plain face */ .people-note{font-style:italic} /* ---------- the map ---------- Sized by ratio rather than by a fixed height, so it holds its shape in the rail at any width and reserves its space before it loads — a frame that arrives late and pushes the page down is the thing to avoid. */ .rail-map{margin:clamp(18px,2vw,26px) 0 0} .rail-map iframe{ display:block;width:100%;aspect-ratio:4/3;border:0; border-radius:12px;background:var(--tint-2); } .rail-map figcaption{margin-top:10px;font-size:12.8px} .rail-map figcaption a{ color:var(--ink-2);text-decoration:none; border-bottom:1px solid var(--edge);padding-bottom:2px; transition:border-color .22s var(--ease),color .22s var(--ease); } .rail-map figcaption a:hover{color:var(--ink);border-bottom-color:var(--ink)} /* ---------- the grievance block, under the form ---------- Separated from the form by a rule rather than by a gap, so the column reads as two things rather than as one thing that stopped. */ .contact-grievance{ margin-top:clamp(28px,3.2vw,44px); padding-top:clamp(24px,2.6vw,34px); border-top:1px solid var(--line); } .contact-grievance h2{ font-size:clamp(1.3rem,1.9vw,1.65rem);font-weight:500; letter-spacing:-.012em;color:var(--ink-deep);margin:0 0 .5em; } .contact-grievance h2 em{ font-family:var(--hand);font-style:normal;font-weight:600; font-size:1.16em;color:#173B2C; } .contact-grievance p{ margin:0 0 .7em;font-size:14.8px;line-height:1.72;color:var(--ink-2); } .contact-grievance p:last-child{margin-bottom:0} /* next/font registers the faces on body. Keep the original family names here and do not include the size-adjusted fallbacks, which rescale Poppins, Caveat, and Great Vibes away from the sizes this sheet sets. */ body{ --sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --serif:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --hand:"Caveat","Segoe Script","Bradley Hand",cursive; } html{font-size:16px} .contents{display:contents}