/* Day One Solutions.
   The whole site is built out of the logo: one teal, one ink, a lot of white, and a ring that fills
   from the top. Modern and plain on purpose. Almost nothing is boxed, almost nothing has a shadow,
   and the teal is spent only where something is meant to be clicked or noticed. */

:root{
	--teal:#0F7A6B;          /* the mark */
	--teal-deep:#0B5F55;     /* teal as readable text on white, 5.2:1 */
	--teal-lift:#2ABFA3;     /* teal on the dark ground */
	--teal-track:#CFE3DE;    /* the pale ring */
	--teal-wash:#E6F1EE;     /* tinted ground */

	--ink:#0D1A18;
	--ink-2:#13201E;
	--ground:#0B1513;        /* the dark sections */
	--ground-2:#101E1B;

	--body:#3A4745;          /* 9.4:1 on white */
	--muted:#6B7A77;         /* 5.4:1 on white */
	--dim:#8FA8A3;           /* body text on the dark ground */
	--line:#D8E3E0;
	--paper:#FFFFFF;
	--mist:#F0F5F4;

	--r:12px;
	--r-lg:18px;
	--wrap:1120px;

	--f-display:'Archivo',ui-sans-serif,system-ui,-apple-system,sans-serif;
	--f-body:'DM Sans',ui-sans-serif,system-ui,-apple-system,sans-serif;
	--f-read:'DM Sans',ui-sans-serif,system-ui,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
	margin:0;background:var(--paper);color:var(--body);
	font-family:var(--f-body);font-size:17px;line-height:1.65;letter-spacing:-0.004em;
	-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-display);margin:0;color:var(--ink);letter-spacing:-0.035em;line-height:1.1;text-wrap:balance;font-weight:700}
h1{font-size:clamp(36px,4.8vw,58px)}
h2{font-size:clamp(27px,3.1vw,38px)}
h3{font-size:clamp(18px,1.45vw,21px);letter-spacing:-0.022em;line-height:1.3}
p{margin:0}
a{color:var(--teal-deep);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%}
:focus-visible{outline:2.5px solid var(--teal);outline-offset:3px;border-radius:4px}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.narrow{max-width:720px}
.stack>*+*{margin-top:16px}

.hero .eyebrow{margin-bottom:20px}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.15em;font-weight:600;color:var(--teal-deep)}
.eyebrow.on-ink{color:var(--teal-lift)}
.mini{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:600}
.lede{font-size:clamp(17px,1.45vw,20px);line-height:1.62;color:var(--body)}

/* ------------------------------------------------------------------ header */

.top{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.9);backdrop-filter:saturate(150%) blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:30px;height:74px}
.brand{display:flex;align-items:center;gap:11px;flex-shrink:0}
.brand:hover{text-decoration:none}
.brand .wm{font-size:25px;letter-spacing:-0.045em;line-height:1;color:var(--ink)}
.brand .wm b{font-weight:700}
.brand .wm i{font-style:normal;font-weight:400;color:var(--muted)}
footer .brand .wm{color:#fff}
footer .brand .wm i{color:var(--dim)}
nav.links{display:flex;gap:28px;margin-left:auto}
nav.links a{color:var(--body);font-size:15px;font-weight:500}
nav.links a:hover{color:var(--ink);text-decoration:none}
nav.links a.on{color:var(--ink);font-weight:600}
.navbtn{display:none}

/* ----------------------------------------------------------------- buttons */

.btn{
	display:inline-flex;align-items:center;justify-content:center;gap:9px;
	border:none;border-radius:var(--r);padding:14px 22px;cursor:pointer;
	font-family:var(--f-body);font-size:15.5px;font-weight:600;letter-spacing:-0.012em;
}
.btn:hover{text-decoration:none}
.btn.solid,.btn.brass{background:var(--teal);color:#fff}
.btn.solid:hover,.btn.brass:hover{background:var(--teal-deep)}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line)}
.btn.line:hover{box-shadow:inset 0 0 0 1.5px #CBD8D5}
.btn.ghost{background:rgba(255,255,255,.1);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.18)}
.btn.sm{padding:10px 17px;font-size:14.5px;border-radius:10px}
.btn.wide{width:100%}

/* --------------------------------------------------------------- sections */

section{padding:92px 0}
section.tight{padding:64px 0}
section.lead-in{padding:30px 0 70px}
.hero.short{padding:52px 0 36px;background:linear-gradient(176deg,#EAF4F1 0%,#F6FBF9 60%,#FFFFFF 100%)}
.ink{background:var(--ground);color:var(--dim)}
.ink h1,.ink h2,.ink h3{color:#fff}
.ink p{color:var(--dim)}
.ink a{color:var(--teal-lift)}
.mist{background:var(--mist)}

.hero{padding:96px 0 72px;background:linear-gradient(176deg,#EAF4F1 0%,#F4FAF8 42%,#FFFFFF 86%);position:relative;overflow:hidden}
.hero:after{content:none}
.hero h1{margin-top:0;max-width:17ch}
.hero .lede{margin-top:24px;max-width:52ch}
.hero .cta{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.hero .under{display:flex;flex-direction:column;gap:12px;margin-top:28px;font-size:14.5px;color:var(--muted)}
.hero .under span{display:flex;align-items:center;gap:9px}
.hero .under svg{color:var(--teal);flex-shrink:0}

.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:70px;align-items:center}
.two.wide-left{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}

/* ------------------------------------------------------------------ cards */

.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px}
.card.plain{border:1px solid var(--line)}
.card h3{margin-bottom:10px}
.card p{color:var(--body);font-size:16px}

/* a numbered idea: numbered because the three build on each other */
.pillar{padding:34px 0;border-top:1px solid var(--line);display:grid;grid-template-columns:62px minmax(0,1fr);gap:26px}
.pillar:first-of-type{border-top:none;padding-top:0}
.pillar .num{font-family:var(--f-display);font-size:17px;font-weight:700;color:var(--teal);letter-spacing:.02em;line-height:1.5;padding-top:2px}
.pillar p{color:var(--body);font-size:16.5px;margin-top:9px;max-width:62ch}

/* programmes */
.tier{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;position:relative}
.tier.lead{border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-wash)}
.tier .flag{position:absolute;top:-11px;left:26px;background:var(--teal);color:#fff;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 11px;border-radius:999px}
.tier .step{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tier h3{margin:12px 0 0}
.tier .who{color:var(--body);font-size:15.5px;margin-top:11px}
.tier ul{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.tier li{display:flex;gap:11px;font-size:15.5px;color:var(--body);line-height:1.5}
.tier li svg{color:var(--teal);flex-shrink:0;margin-top:4px}
.tier .foot{margin-top:auto;padding-top:24px}

/* the method: a real sequence */
.phase{display:grid;grid-template-columns:150px minmax(0,1fr);gap:30px;padding:30px 0;border-top:1px solid rgba(255,255,255,.1)}
.phase:first-of-type{border-top:none}
.phase .when{font-family:var(--f-display);font-size:18px;font-weight:700;color:var(--teal-lift);letter-spacing:-0.02em}
.phase .when small{display:block;font-family:var(--f-body);font-size:12px;font-weight:500;color:#6E817D;letter-spacing:.1em;text-transform:uppercase;margin-top:6px}
.phase h3{font-size:19px}
.phase p{margin-top:9px;font-size:16px;max-width:62ch}

/* quotes */
.quote{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);padding:30px;display:flex;flex-direction:column}
.quote blockquote{margin:0;font-size:17.5px;line-height:1.62;color:var(--ink)}
.quote .by{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);font-size:14.5px;font-weight:600;color:var(--ink)}
.quote .by span{display:block;font-weight:400;color:var(--muted);font-size:13.5px;margin-top:2px}

/* founder */
.letter{font-size:18px;line-height:1.72;color:var(--body)}
.letter p+p{margin-top:18px}
.sig{margin-top:28px;font-family:var(--f-display);font-size:19px;font-weight:700;letter-spacing:-0.03em;color:var(--ink)}
.sig span{display:block;font-family:var(--f-body);font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0;margin-top:4px}
/* A portrait sits in a disc: the mark is a circle, and the headshot was cut from its studio
   backdrop so the tint shows through instead of a white rectangle. */
/* A plain photograph, cropped tight enough to carry itself. The hairline keeps a white studio
   backdrop from dissolving into a pale page. */
.shot{position:relative;display:block;width:100%;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:#fff;
	box-shadow:0 0 0 1px var(--line),0 26px 54px -32px rgba(13,26,24,.5)}
.shot img{width:100%;height:100%;object-fit:cover;object-position:50% 26%;display:block}

.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:56px;align-items:center}
.hero-photo,.portrait{margin:0;position:relative;width:100%;max-width:384px;margin-left:auto}
.portrait{margin-left:0;max-width:100%}

/* the film the hero will carry */
.hero-media{margin:0;width:100%;position:relative;aspect-ratio:16/10}
.hero-media video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;mix-blend-mode:multiply;
	-webkit-mask-image:radial-gradient(ellipse closest-side,#000 64%,transparent 100%);
	mask-image:radial-gradient(ellipse closest-side,#000 64%,transparent 100%)}
@media (prefers-reduced-motion:reduce){.hero-media video{display:none}
	.hero-media{aspect-ratio:16/9;background:url(/assets/video/poster.jpg) center/cover no-repeat;border-radius:12px;box-shadow:0 0 0 1px var(--line)}}
.hero-photo figcaption{margin-top:16px;font-size:13.5px;line-height:1.45;color:var(--muted)}
.hero-photo figcaption b{display:block;font-family:var(--f-display);font-size:15px;font-weight:700;color:var(--ink);letter-spacing:-0.02em;margin-bottom:2px}
.hero-photo figcaption span{color:var(--muted)}

/* ------------------------------------------------------------------ forms */

.field{margin:0 0 20px}
.field label,.lab{display:block;font-size:14px;font-weight:600;color:var(--ink);margin:0 0 8px}
.contact-form{border:1.5px solid var(--line);box-shadow:0 1px 2px rgba(13,26,24,.04),0 18px 40px -28px rgba(13,26,24,.35)}
.field .hint{font-weight:400;color:var(--muted);font-size:13px}
.in{width:100%;padding:14px 16px;border-radius:var(--r);border:1.5px solid #C3D3D0;font:inherit;font-size:16px;color:var(--ink);background:#FBFDFC}
.in::placeholder{color:#A3AFAC}
.in:focus{outline:none;border-color:var(--teal);background:#fff;box-shadow:0 0 0 3px var(--teal-wash)}
textarea.in{min-height:150px;resize:vertical;line-height:1.65}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.msg{border-radius:var(--r);padding:15px 18px;font-size:15.5px;margin:0 0 22px}
.msg.good{background:var(--teal-wash);color:var(--teal-deep)}
.msg.bad{background:#FCEEF0;color:#8E2740}

/* ------------------------------------------------------------------- misc */

.band{background:var(--ground);color:var(--dim);border-radius:var(--r-lg);padding:52px 48px;position:relative;overflow:hidden}
.band h2{color:#fff}
.band:after{content:none}
.band>*{position:relative}

.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:30px}
.fact .n{font-family:var(--f-display);font-size:34px;font-weight:700;letter-spacing:-0.035em;line-height:1;color:var(--ink)}
.fact .l{font-size:14.5px;color:var(--body);margin-top:9px}
.ink .fact .n{color:#fff}
.ink .fact .l{color:var(--dim)}

.faq{border-top:1px solid var(--line);padding:26px 0}
.faq:first-of-type{border-top:none}
.faq h3{font-size:18px}
.faq p{color:var(--body);margin-top:9px;font-size:16px;max-width:70ch}

footer{background:var(--ground);color:var(--dim);padding:70px 0 44px;font-size:15px}
footer a{color:#C3D2CF}
footer a:hover{color:#fff}
footer h4{color:#fff;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;margin-bottom:16px;font-family:var(--f-body)}
.fgrid{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:44px}
.fgrid ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.fbot{margin-top:52px;padding-top:26px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px}

/* ------------------------------------------------------------------ phone */

@media (max-width:900px){
	section{padding:64px 0}
	.hero{padding:70px 0 60px}
	.two,.g2,.g3,.row2,.hero-grid{grid-template-columns:minmax(0,1fr)}
	.hero-photo,.portrait{max-width:300px;margin:0 auto}
	.hero-media{aspect-ratio:16/9}
	.two{gap:38px}
	.fgrid{grid-template-columns:1fr 1fr;gap:32px}
	.phase{grid-template-columns:minmax(0,1fr);gap:12px;padding:24px 0}
	.pillar{grid-template-columns:44px minmax(0,1fr);gap:18px}
	.band{padding:36px 26px}
	nav.links{display:none;position:absolute;top:74px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px 24px 18px}
	nav.links a{padding:12px 0;font-size:16px;border-top:1px solid var(--line)}
	body.navopen nav.links{display:flex}
	.navbtn{display:flex;margin-left:auto;width:42px;height:42px;border-radius:11px;border:none;background:var(--mist);color:var(--ink);align-items:center;justify-content:center;cursor:pointer}
	.top .wrap .btn.hdr{display:none}
	.brand .wm{font-size:22px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* ------------------------------------------------------------------ rings */
.ring{display:block;flex-shrink:0}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px}
.pillars .pillar{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:30px 28px;border-top:1px solid var(--line)}
.pillars .pillar:first-of-type{padding-top:30px;border-top:1px solid var(--line)}
.pillars .pillar .num{padding:0;margin-bottom:20px}
.pillars .pillar p{font-size:16px;max-width:none}
.tier .step{display:flex;align-items:center;gap:9px}
.phase .when .ring{margin-bottom:12px}
@media (max-width:900px){.pillars{grid-template-columns:minmax(0,1fr)}}

/* About: the portrait supports the letter, it does not compete with it */
.portrait.on-about{max-width:340px}

.top .tel{font-family:'Archivo',sans-serif;font-weight:800;font-size:19px;color:var(--ink);white-space:nowrap;letter-spacing:0.01em;text-decoration:none}
.top .tel .pre{font-weight:600;font-size:15px;color:var(--muted,#5B6B67);margin-right:2px}
.top .tel .d{color:var(--teal-lift)}
.top .tel .o{color:var(--teal-deep)}
.top .tel:hover .d,.top .tel:hover .o{filter:brightness(.92)}
@media (max-width:900px){.top .tel{display:none}}